diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
index 65984d34fdd3b7311add6268c239e3df18cd83de..82eb4668258423b57aeadaf641091aa034716853 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx
@@ -95,7 +95,7 @@ class AudioSettings extends React.Component {
} = this.props;
return (
- <div>
+ <div className={styles.formWrapper}>
<div className={styles.form}>
<div className={styles.row}>
<div className={styles.audioNote}>
@@ -158,15 +158,15 @@ class AudioSettings extends React.Component {
<Button
className={styles.backBtn}
label={intl.formatMessage(intlMessages.backLabel)}
- size={'md'}
- color={'primary'}
+ size="md"
+ color="primary"
onClick={handleBack}
disabled={isConnecting}
ghost
/>
<Button
- size={'md'}
- color={'primary'}
+ size="md"
+ color="primary"
label={intl.formatMessage(intlMessages.retryLabel)}
onClick={handleRetry}
/>
@@ -174,7 +174,6 @@ class AudioSettings extends React.Component {
</div>
);
}
-
}
AudioSettings.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
index 947f0f7e2fa31990e079ba361094c2c76d3950eb..2d0467512137c33c3e39c4f640d68bdc9452388d 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
@@ -1,5 +1,10 @@
@import "/imports/ui/stylesheets/variables/_all";
+.col,
+.formWrapper{
+ min-width: 0;
+}
+
.form {
display: flex;
flex-flow: column;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
index ec7a104c4a77f968552f311ee222b3b6cf05b77d..08ffa1f092e41f2272b5d6c7699e78739cc989ec 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
@@ -1,42 +1,24 @@
@import "/imports/ui/stylesheets/mixins/focus";
@import "/imports/ui/stylesheets/variables/_all";
+:root {
+ --toast-content-width: 98%;
+ --toast-font-size: 80%;
+ --toast-content-margin-sm: .4rem;
+ --toast-content-margin-md: 1.4rem;
+}
-
-@mixin lineClamp($lineHeight: 1em, $lineCount: 1, $bgColor: inherit) {
- display: block;
- box-orient: vertical;
+@mixin lineClamp($lineHeight: 1em, $lineCount: 1) {
position: relative;
- word-break: break-word;
-
+ white-space: nowrap;
overflow: hidden;
+ text-overflow: ellipsis;
line-height: $lineHeight;
max-height: calc(#{"$lineHeight * $lineCount"});
-
- &:before {
- content: '...';
- width: 10%;
- height: lineHeight;
- text-align: right;
- position: absolute;
- right: 0;
- bottom: 0;
- background: linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 75%);
- }
-
- &:after {
- content: '';
- position: absolute;
- right: 0;
- width: 1em;
- height: $lineHeight;
- margin-top: 0.2em;
- background-color: $bgColor;
- }
}
.chat {
- background-color: #fff;
+ background-color: var(--color-white);
padding: var(--md-padding-x);
display: flex;
flex-grow: 1;
@@ -61,9 +43,8 @@
flex: 1;
& > button, button:hover {
- max-width: 98%;
+ max-width: var(--toast-content-width);
}
-
}
.hideBtn {
@@ -90,16 +71,17 @@
}
.pushMessageContent {
- margin-left: 2rem;
- margin-right: 2rem;
- margin-top: 1.4rem;
- margin-bottom: .4rem;
+ margin-top: var(--toast-content-margin-md);
+ margin-bottom: var(--toast-content-margin-sm);
+ margin-left: var(--toast-content-margin-sm);
+ margin-right: var(--toast-content-margin-sm);
background-color: inherit;
+ width: var(--toast-content-width);
}
.userNameMessage {
margin: 0;
- font-size: 80%;
+ font-size: var(--toast-font-size);
color: var(--color-gray-dark);
font-weight: bold;
background-color: inherit;
@@ -107,8 +89,8 @@
}
.contentMessage {
- margin-top: .2rem;
- font-size: 80%;
+ margin-top: var(--border-radius);
+ font-size: var(--toast-font-size);
background-color: inherit;
@include lineClamp(var(--font-size-small), 10);
}
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
index 087c2d0d73e626f3a44cd7e40c9075412a28dc7d..c769d612442beb3fa162a58bcc6fe9d720bfe2d1 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
@@ -19,13 +19,13 @@
}
.content {
+ z-index: 9999;
position: absolute;
background: var(--dropdown-bg);
border-radius: var(--border-radius);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
border: 0;
padding: calc(var(--line-height-computed) / 2);
- z-index: 1000;
&:after,
&:before {
diff --git a/bigbluebutton-html5/imports/ui/components/toast/component.jsx b/bigbluebutton-html5/imports/ui/components/toast/component.jsx
index a54d83b8fd187a46dcd6aa65ad6491f4c036d4f2..771db8d457a660e68ffd771358e85a6889a4682f 100755
--- a/bigbluebutton-html5/imports/ui/components/toast/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/toast/component.jsx
@@ -42,17 +42,12 @@ const Toast = ({
<span>{message}</span>
</div>
</div>
- {
- content ? (
- <div className={styles.backgroundColorInherit}>
- <div className={styles.separator} />
- <div className={styles.backgroundColorInherit}>
- {content}
- </div>
- </div>
- )
- : null
- }
+ <div className={styles.backgroundColorInherit}>
+ <div className={styles.separator} />
+ <div className={styles.backgroundColorInherit}>
+ {content}
+ </div>
+ </div>
</div>
);
diff --git a/bigbluebutton-html5/imports/ui/components/toast/styles.scss b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
index d2efe6d84641c23f2220e63e7b51a8b0c017d587..d1c231283b870bf2c71a2f287abd015226407025 100755
--- a/bigbluebutton-html5/imports/ui/components/toast/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
@@ -18,6 +18,18 @@
--background: var(--color-white);
--background-active: #eee;
+
+ --toast-offset: 4.5rem;
+ --toast-offset-sm: .325rem;
+ --toast-mobile-width: 75%;
+
+ --toast-max-width: 20rem !important;
+ --toast-body-max-width: 17.75rem !important;
+ --toast-container-max-width: 23rem !important;
+ --toast-container-min-width: var(--toast-max-width);
+
+ --toast-icon-md: 2rem;
+ --toast-icon-sm: 1.2rem;
}
@mixin notification-variant($icon-color, $icon-bg) {
@@ -36,17 +48,16 @@
.smallToastContainer {
background-color: inherit;
- margin: -.35rem;
}
.icon {
align-self: flex-start;
margin-bottom: auto;
margin-right: var(--sm-padding-x);
- width: 2rem;
+ width: var(--toast-icon-md);
+ height: var(--toast-icon-md);
border-radius: 50%;
position: relative;
- height: 2rem;
flex-shrink: 0;
> i {
@@ -59,25 +70,20 @@
}
.smallIcon {
- width: 1.2rem;
- height: 1.2rem;
+ width: var(--toast-icon-sm);
+ height: var(--toast-icon-sm);
> i {
font-size: 70%;
}
}
.separator {
- height: 1px;
- width: 99%;
- position: absolute;
- margin-left: -.5em;
+ position: relative;
+ width: 100%;
+ height: var(--border-size-small);
background-color: var(--color-gray-lighter);
margin-top: calc(var(--line-height-computed) * .5);
margin-bottom: calc(var(--line-height-computed) * .5);
- @include mq($small-only) {
- position: relative;
- margin-left: auto;
- }
}
.message {
@@ -113,20 +119,19 @@
}
.container {
- z-index: 9999;
+ z-index: 9998;
position: fixed;
padding: var(--sm-padding-y);
- width: 15vw;
- min-width: 320px;
+ min-width: var(--toast-container-min-width);
+ max-width: var(--toast-container-max-width);
box-sizing: border-box;
- top: var(--md-padding-y);
- right: var(--md-padding-y);
+ right: var(--jumbo-padding-y);
+ top: var(--toast-offset);
max-height: 75vh;
overflow: hidden;
@include mq($small-only) {
- left: var(--sm-padding-y);
- width: auto;
+ width: var(--toast-mobile-width);
}
}
@@ -135,7 +140,7 @@
margin-bottom: var(--sm-padding-x);
padding: var(--md-padding-x);
border-radius: var(--border-radius);
- box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 var(--border-size-small) 10px 0 rgba(0, 0, 0, 0.1), 0 var(--border-size) 15px 0 rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
cursor: pointer;
@@ -143,6 +148,7 @@
background-color: var(--background);
animation-duration: 0.75s;
animation-fill-mode: both;
+ max-width: var(--toast-max-width);
&:hover,
&:focus {
@@ -151,9 +157,10 @@
}
.body {
- margin: auto 0;
+ margin: auto auto;
flex: 1;
background-color: inherit;
+ max-width: var(--toast-body-max-width);
}
.close {
@@ -162,22 +169,19 @@
border: none;
cursor: pointer;
opacity: .5;
- font-size: .35rem;
+ font-size: var(--font-size-smallest);
color: var(--color-gray-dark);
- padding: .4rem;
line-height: 0;
- position: absolute;
- top: var(--md-padding-y);
- right: var(--md-padding-y);
+ position: relative;
font-size: 70%;
- top: var(--lg-padding-y);
+ left: var(--toast-offset-sm);
:global(.animationsEnabled) & {
transition: .3s ease;
}
&:before {
- margin-left: -.2rem;
+ margin-left: -.4rem;
}
&:hover,
@@ -187,15 +191,8 @@
@include mq($small-only) {
position: relative;
- top: auto;
- right: auto;
- align-self: flex-start;
- margin-top: auto;
- margin-bottom: auto;
- margin-left: var(--sm-padding-x);
- font-size: 1rem;
- line-height: 1;
- border: none;
+ font-size: var(--font-size-smaller);
+ left: auto;
}
}
@@ -208,7 +205,7 @@
}
}
.backgroundColorInherit {
- background-color: inherit;
+ position: relative;
}
.progress {
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
index 965e62997fa2a6f706672062fc9e3efaf776a1f9..c67aa40b0b2168b8c0db130c44669e0c4a3a672d 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
@@ -8,6 +8,8 @@
--font-size-base: 1rem;
--font-size-large: 1.25rem;
--font-size-small: 0.875rem;
+ --font-size-smaller: .75rem;
+ --font-size-smallest: .35rem;
--line-height-base: 1.25; // 20/16
--line-height-computed: 1rem;