BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #13577 from ramonlsouza/styled-components-small

Browse Source 
refactor: styled-components conversion - partial
This commit is contained in:
Anton Georgiev 2021-10-27 08:59:09 -04:00 committed by GitHub
commit 1b142a05e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 412 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
bigbluebutton-html5/imports/ui/components/activity-check/component.jsx
View File

@ -7,7 +7,7 @@ import Modal from '/imports/ui/components/modal/simple/component';
import { makeCall } from '/imports/ui/services/api';
import { Meteor } from 'meteor/meteor';
import { styles } from './styles';
import Styled from './styles';
const propTypes = {
intl: PropTypes.shape({
@ -98,7 +98,7 @@ class ActivityCheck extends Component {
shouldCloseOnOverlayClick={false}
shouldShowCloseButton={false}
>
<div className={styles.activityModalContent}>
<Styled.ActivityModalContent>
<h1>{intl.formatMessage(intlMessages.activityCheckTitle)}</h1>
<p>{intl.formatMessage(intlMessages.activityCheckLabel, { 0: responseDelay })}</p>
<Button
@ -109,7 +109,7 @@ class ActivityCheck extends Component {
role="button"
size="lg"
/>
</div>
</Styled.ActivityModalContent>
</Modal>
);
}

23
bigbluebutton-html5/imports/ui/components/activity-check/styles.js Normal file
View File

@ -0,0 +1,23 @@
import styled from 'styled-components';
import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
const ActivityModalContent = styled.div`
flex-direction: column;
flex-grow: 1;
display: flex;
justify-content: center;
padding: 0;
margin-top: auto;
margin-bottom: auto;
padding: 0.5rem;
text-align: center;
& > p {
font-size: ${fontSizeLarge};
margin: 0.5em 0;
}
`;
export default {
ActivityModalContent,
};

16
bigbluebutton-html5/imports/ui/components/activity-check/styles.scss
View File

@ -1,16 +0,0 @@
.activityModalContent {
flex-direction: column;
flex-grow: 1;
display: flex;
justify-content: center;
padding: 0;
margin-top: auto;
margin-bottom: auto;
padding: 0.5rem;
text-align: center;
p {
font-size: var(--font-size-large);
margin: 0.5em 0;
}
}

6
bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import NotificationsBar from '/imports/ui/components/notifications-bar/component';
import { styles } from './styles';
import Styled from './styles';
import { ACTIONS } from '../layout/enums';
const BannerBar = ({
@ -22,9 +22,9 @@ const BannerBar = ({
return (
<NotificationsBar color={color}>
<span className={styles.bannerTextColor}>
<Styled.BannerTextColor>
{text}
</span>
</Styled.BannerTextColor>
</NotificationsBar>
);
};

11
bigbluebutton-html5/imports/ui/components/banner-bar/styles.js Normal file
View File

@ -0,0 +1,11 @@
import styled from 'styled-components';
import { TextElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
const BannerTextColor = styled(TextElipsis)`
color: ${colorWhite};
`;
export default {
BannerTextColor,
};

6
bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss
View File

@ -1,6 +0,0 @@
@import "/imports/ui/stylesheets/variables/placeholders";
.bannerTextColor {
@extend %text-elipsis;
color: var(--color-white);
}

11
bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx
View File

@ -8,7 +8,7 @@ import AudioService from '../audio/service';
import VideoService from '../video-provider/service';
import { screenshareHasEnded } from '/imports/ui/components/screenshare/service';
import UserListService from '/imports/ui/components/user-list/service';
import { styles } from './styles';
import Styled from './styles';
const intlMessages = defineMessages({
title: {
@ -173,10 +173,9 @@ class BreakoutJoinConfirmation extends Component {
const { breakouts, intl } = this.props;
const { selectValue, waiting, } = this.state;
return (
<div className={styles.selectParent}>
<Styled.SelectParent>
{`${intl.formatMessage(intlMessages.freeJoinMessage)}`}
<select
className={styles.select}
<Styled.Select
value={selectValue}
onChange={this.handleSelectChange}
disabled={waiting}
@ -191,9 +190,9 @@ class BreakoutJoinConfirmation extends Component {
</option>
))
}
</select>
</Styled.Select>
{ waiting ? <span data-test="labelGeneratingURL">{intl.formatMessage(intlMessages.generatingURL)}</span> : null}
</div>
</Styled.SelectParent>
);
}

20
bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.js Normal file
View File

@ -0,0 +1,20 @@
import styled from 'styled-components';
import { colorWhite, colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
const SelectParent = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
const Select = styled.select`
background-color: ${colorWhite};
width: 50%;
margin: 1rem;
border-color: ${colorGrayLighter};
`;
export default {
SelectParent,
Select,
};

12
bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss
View File

@ -1,12 +0,0 @@
.selectParent {
display: flex;
flex-direction: column;
align-items: center;
}
.select {
background-color: var(--color-white);
width: 50%;
margin: 1rem;
border-color: var(--color-gray-lighter);
}

75
bigbluebutton-html5/imports/ui/components/debug-window/component.jsx
View File

@ -1,10 +1,7 @@
import React, { Component } from 'react';
import Draggable from 'react-draggable';
import Resizable from 're-resizable';
import { defineMessages, injectIntl } from 'react-intl';
import { styles } from './styles.scss';
import Icon from '/imports/ui/components/icon/component';
import Button from '/imports/ui/components/button/component';
import Styled from './styles';
import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
const intlMessages = defineMessages({
@ -87,10 +84,10 @@ class DebugWindow extends Component {
const { intl } = this.props;
return (
<span className={styles.toggleLabel}>
<Styled.ToggleLabel>
{status ? intl.formatMessage(intlMessages.on)
: intl.formatMessage(intlMessages.off)}
</span>
</Styled.ToggleLabel>
);
}
@ -108,8 +105,7 @@ class DebugWindow extends Component {
bounds="body"
enableUserSelectHack={false}
>
<Resizable
className={styles.debugWindowWrapper}
<Styled.DebugWindowWrapper
minWidth={window.innerWidth * 0.2}
minHeight={window.innerHeight * 0.2}
enable={{
@ -123,19 +119,13 @@ class DebugWindow extends Component {
bottomRight: true,
}}
>
<div
className={styles.debugWindow}
>
<div
id="debugWindowHeader"
className={styles.header}
>
<Icon iconName="fit_to_screen" className={styles.moveIcon} />
<div className={styles.title}>
<Styled.DebugWindow>
<Styled.Header id="debugWindowHeader">
<Styled.MoveIcon iconName="fit_to_screen" />
<Styled.Title>
{intl.formatMessage(intlMessages.debugWindowTitle)}
</div>
<Button
className={styles.close}
</Styled.Title>
<Styled.CloseButton
label={intl.formatMessage(intlMessages.modalClose)}
aria-label={`${intl.formatMessage(intlMessages.modalClose)} ${intl.formatMessage(intlMessages.debugWindowTitle)}`}
icon="close"
@ -143,16 +133,15 @@ class DebugWindow extends Component {
hideLabel
onClick={() => this.setShowDebugWindow(false)}
/>
</div>
<div className={styles.debugWindowContent}>
<div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>
</Styled.Header>
<Styled.DebugWindowContent>
<Styled.Table>
<Styled.TableRow>
<Styled.TableCell>
{`${intl.formatMessage(intlMessages.userAgentLabel)}:`}
</div>
<div className={styles.cell}>
<input
className={styles.userAgentInput}
</Styled.TableCell>
<Styled.TableCell>
<Styled.UserAgentInput
id="debugModalUserAgent"
type="text"
value={window.navigator.userAgent}
@ -164,14 +153,14 @@ class DebugWindow extends Component {
>
{`${intl.formatMessage(intlMessages.copyButtonLabel)}`}
</button>
</div>
</div>
<div className={styles.row}>
<div className={styles.cell}>
</Styled.TableCell>
</Styled.TableRow>
<Styled.TableRow>
<Styled.TableCell>
{`${intl.formatMessage(intlMessages.chatLoggerLabel)}:`}
</div>
<div className={styles.cell}>
<div className={styles.cellContent}>
</Styled.TableCell>
<Styled.TableCell>
<Styled.CellContent>
<select
style={{ marginRight: '1rem' }}
onChange={(ev) => {
@ -199,13 +188,13 @@ class DebugWindow extends Component {
>
{`${intl.formatMessage(intlMessages.applyButtonLabel)}`}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</Resizable>
</Styled.CellContent>
</Styled.TableCell>
</Styled.TableRow>
</Styled.Table>
</Styled.DebugWindowContent>
</Styled.DebugWindow>
</Styled.DebugWindowWrapper>
</Draggable>
);
}

132
bigbluebutton-html5/imports/ui/components/debug-window/styles.js Normal file
View File

@ -0,0 +1,132 @@
import styled from 'styled-components';
import { smPaddingX } from '/imports/ui/stylesheets/styled-components/general';
import Resizable from 're-resizable';
import Icon from '/imports/ui/components/icon/component';
import Button from '/imports/ui/components/button/component';
const ToggleLabel = styled.span`
margin-right: ${smPaddingX};
[dir="rtl"] & {
margin: 0 0 0 ${smPaddingX};
}
`;
const DebugWindowWrapper = styled(Resizable)`
position: absolute !important;
z-index: 9;
`;
const DebugWindow = styled.div`
min-width: 20vw;
min-height: 20vh;
width: 100%;
height: 100%;
background-color: white;
border: 2px solid #06172A;
&::after {
content: "";
-webkit-transform: rotate(-45deg);
position: absolute;
right: 2px;
bottom: 8px;
pointer-events: none;
width: 14px;
height: 1px;
background: rgba(0,0,0,.5);
}
&::before {
content: "";
-webkit-transform: rotate(-45deg);
position: absolute;
right: 2px;
bottom: 5px;
pointer-events: none;
width: 8px;
height: 1px;
background: rgba(0,0,0,.5);
}
`;
const Header = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid lightgray;
cursor: move;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
`;
const MoveIcon = styled(Icon)`
margin: 5px;
color: rgba(0,0,0,.5);
`;
const Title = styled.div`
font-size: 1.2rem;
font-weight: bold;
`;
const CloseButton = styled(Button)`
& > span > i {
font-size: 115%;
}
`;
const DebugWindowContent = styled.div`
padding: 10px;
`;
const Table = styled.div`
display: table;
width: 100%;
`;
const TableRow = styled.div`
display: table-row;
`;
const TableCell = styled.div`
display: table-cell;
padding: 5px;
vertical-align: middle;
`;
const UserAgentInput = styled.input`
margin-right: 5px;
`;
const AutoArrangeToggle = styled.input`
margin-right: 5px;
`;
const CellContent = styled.div`
display: flex;
align-items: center;
`;
export default {
ToggleLabel,
DebugWindowWrapper,
DebugWindow,
Header,
MoveIcon,
Title,
CloseButton,
DebugWindowContent,
Table,
TableRow,
TableCell,
UserAgentInput,
AutoArrangeToggle,
CellContent,
};

104
bigbluebutton-html5/imports/ui/components/debug-window/styles.scss
View File

@ -1,104 +0,0 @@
.debugWindowWrapper {
position: absolute !important;
z-index: 9;
}
.debugWindow {
min-width: 20vw;
min-height: 20vh;
width: 100%;
height: 100%;
background-color: white;
border: 2px solid #06172A;
&::after {
content: "";
-webkit-transform: rotate(-45deg);
position: absolute;
right: 2px;
bottom: 8px;
pointer-events: none;
width: 14px;
height: 1px;
background: rgba(0,0,0,.5);
}
&::before {
content: "";
-webkit-transform: rotate(-45deg);
position: absolute;
right: 2px;
bottom: 5px;
pointer-events: none;
width: 8px;
height: 1px;
background: rgba(0,0,0,.5);
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid lightgray;
cursor: move;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.title {
font-size: 1.2rem;
font-weight: bold;
}
.moveIcon {
margin: 5px;
color: rgba(0,0,0,.5);
}
.close {
span {
i {
font-size: 115%;
}
}
}
}
.debugWindowContent {
padding: 10px;
.table{
display: table;
width: 100%;
.row{
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
.cellContent {
display: flex;
align-items: center;
}
}
}
.userAgentInput, .autoArrangeToggle {
margin-right: 5px;
}
}
}
.toggleLabel {
margin-right: var(--sm-padding-x);
[dir="rtl"] & {
margin: 0 0 0 var(--sm-padding-x);
}
}

11
bigbluebutton-html5/imports/ui/components/reload-button/component.jsx
View File

@ -1,8 +1,6 @@
import React from 'react';
import cx from 'classnames';
import Button from '/imports/ui/components/button/component';
import _ from 'lodash';
import { styles } from './styles';
import Styled from './styles';
const DEBOUNCE_TIMEOUT = 5000;
const DEBOUNCE_OPTIONS = {
@ -14,16 +12,15 @@ const ReloadButtonComponent = ({
handleReload,
label,
}) => (
<div className={cx(styles.wrapper, styles.top)}>
<Button
className={cx(styles.button, styles.reloadButton)}
<Styled.Wrapper>
<Styled.ReloadButton
color="primary"
icon="refresh"
onClick={_.debounce(handleReload, DEBOUNCE_TIMEOUT, DEBOUNCE_OPTIONS)}
label={label}
hideLabel
/>
</div>
</Styled.Wrapper>
);
export default ReloadButtonComponent;

49
bigbluebutton-html5/imports/ui/components/reload-button/styles.js Normal file
View File

@ -0,0 +1,49 @@
import styled from 'styled-components';
import { colorTransparent } from '/imports/ui/stylesheets/styled-components/palette';
import Button from '/imports/ui/components/button/component';
const Wrapper = styled.div`
position: absolute;
right: auto;
left: 0;
background-color: ${colorTransparent};
cursor: pointer;
border: 0;
z-index: 2;
margin: 2px;
bottom: 0;
top: 0;
[dir="rtl"] & {
right: 0;
left : auto;
}
`;
const ReloadButton = styled(Button)`
&,
&:active,
&:hover,
&:focus {
border: none !important;
i {
border: none !important;
background-color: ${colorTransparent} !important;
}
}
padding: 5px;
&:hover {
border: 0;
}
i {
font-size: 1rem;
}
`;
export default {
Wrapper,
ReloadButton,
};

49
bigbluebutton-html5/imports/ui/components/reload-button/styles.scss
View File

@ -1,49 +0,0 @@
@import '/imports/ui/stylesheets/variables/_all';
.wrapper {
position: absolute;
right: auto;
left: 0;
background-color: var(--color-transparent);
cursor: pointer;
border: 0;
z-index: 2;
margin: 2px;
bottom: 0;
[dir="rtl"] & {
right: 0;
left : auto;
}
}
.button {
&,
&:active,
&:hover,
&:focus {
border: none !important;
i {
border: none !important;
background-color: var(--color-transparent) !important;
}
}
}
.top {
top: 0;
}
.reloadButton {
padding: 5px;
&:hover {
border: 0;
}
i {
font-size: 1rem;
}
}

26
bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx
View File

@ -5,7 +5,7 @@ import browserInfo from '/imports/utils/browserInfo';
import deviceInfo from '/imports/utils/deviceInfo';
import Modal from '/imports/ui/components/modal/simple/component';
import _ from 'lodash';
import { styles } from './styles';
import Styled from './styles';
import withShortcutHelper from './service';
const intlMessages = defineMessages({
@ -137,37 +137,37 @@ const ShortcutHelpComponent = (props) => {
if (!CHAT_ENABLED && shortcut.descId.indexOf('Chat') !== -1) return null;
return (
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>{`${accessMod} + ${shortcut.accesskey}`}</td>
<td className={styles.descCell}>{`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`}</td>
<Styled.KeyCell>{`${accessMod} + ${shortcut.accesskey}`}</Styled.KeyCell>
<Styled.DescCell>{`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`}</Styled.DescCell>
</tr>
);
});
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Spacebar</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.togglePan)}</td>
<Styled.KeyCell>Spacebar</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.togglePan)}</Styled.DescCell>
</tr>
));
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Enter</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.toggleFullscreen)}</td>
<Styled.KeyCell>Enter</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.toggleFullscreen)}</Styled.DescCell>
</tr>
));
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Right Arrow</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.nextSlideDesc)}</td>
<Styled.KeyCell>Right Arrow</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.nextSlideDesc)}</Styled.DescCell>
</tr>
));
shortcutItems.push((
<tr key={_.uniqueId('hotkey-item-')}>
<td className={styles.keyCell}>Left Arrow</td>
<td className={styles.descCell}>{intl.formatMessage(intlMessages.previousSlideDesc)}</td>
<Styled.KeyCell>Left Arrow</Styled.KeyCell>
<Styled.DescCell>{intl.formatMessage(intlMessages.previousSlideDesc)}</Styled.DescCell>
</tr>
));
@ -182,7 +182,7 @@ const ShortcutHelpComponent = (props) => {
{!accessMod ? <p>{intl.formatMessage(intlMessages.accessKeyNotAvailable)}</p>
: (
<span>
<table className={styles.shortcutTable}>
<Styled.ShortcutTable>
<tbody>
<tr>
<th>{intl.formatMessage(intlMessages.comboLabel)}</th>
@ -190,7 +190,7 @@ const ShortcutHelpComponent = (props) => {
</tr>
{shortcutItems}
</tbody>
</table>
</Styled.ShortcutTable>
</span>
)
}

28
bigbluebutton-html5/imports/ui/components/shortcut-help/styles.js Normal file
View File

@ -0,0 +1,28 @@
import styled from 'styled-components';
import { borderSize, smPaddingX } from '/imports/ui/stylesheets/styled-components/general';
import { colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
const KeyCell = styled.td`
border: ${borderSize} solid ${colorGrayLighter};
text-align: center;
padding: ${smPaddingX};
margin: auto;
`;
const DescCell = styled.td`
border: ${borderSize} solid ${colorGrayLighter};
padding: ${smPaddingX};
margin: auto;
`;
const ShortcutTable = styled.table`
border: ${borderSize} solid ${colorGrayLighter};
border-collapse: collapse;
margin: auto;
`;
export default {
KeyCell,
DescCell,
ShortcutTable,
};

29
bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
View File

@ -1,29 +0,0 @@
.shortcutTable,
.keyCell,
.descCell,
.tableTitle {
border: var(--border-size) solid var(--color-gray-lighter);
}
.keyCell {
text-align: center;
}
.descCell {
padding: 0 var(--jumbo-padding-x) !important 0 0;
}
.keyCell,
.descCell {
padding: var(--sm-padding-x);
margin: auto;
}
.shortcutTable {
border-collapse: collapse;
margin: auto;
}
.tableTitle {
padding: var(--sm-padding-x);
}

14
bigbluebutton-html5/imports/ui/components/text-input/component.jsx
View File

@ -1,10 +1,8 @@
import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import TextareaAutosize from 'react-autosize-textarea';
import PropTypes from 'prop-types';
import logger from '/imports/startup/client/logger';
import Button from '/imports/ui/components/button/component';
import { styles } from './styles.scss';
import Styled from './styles';
const propTypes = {
placeholder: PropTypes.string,
@ -60,25 +58,23 @@ class TextInput extends PureComponent {
const { message } = this.state;
return (
<div className={styles.wrapper}>
<TextareaAutosize
className={styles.textarea}
<Styled.Wrapper>
<Styled.TextArea
maxLength={maxLength}
onChange={(e) => this.handleOnChange(e)}
onKeyDown={(e) => this.handleOnKeyDown(e)}
placeholder={placeholder}
value={message}
/>
<Button
<Styled.TextInputButton
circle
className={styles.button}
color="primary"
hideLabel
icon="send"
label={intl.formatMessage(messages.sendLabel)}
onClick={() => this.handleOnClick()}
/>
</div>
</Styled.Wrapper>
);
}
}

79
bigbluebutton-html5/imports/ui/components/text-input/styles.js Normal file
View File

@ -0,0 +1,79 @@
import styled from 'styled-components';
import {
smPaddingX,
smPaddingY,
borderRadius,
borderSize,
} from '/imports/ui/stylesheets/styled-components/general';
import {
colorText,
colorGrayLighter,
colorBlueLight,
colorPrimary,
} from '/imports/ui/stylesheets/styled-components/palette';
import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
import TextareaAutosize from 'react-autosize-textarea';
import Button from '/imports/ui/components/button/component';
const Wrapper = styled.div`
display: flex;
flex-direction: row;
`;
const TextArea = styled(TextareaAutosize)`
flex: 1;
background: #fff;
background-clip: padding-box;
margin: 0;
color: ${colorText};
-webkit-appearance: none;
padding: calc(${smPaddingY} * 2.5) calc(${smPaddingX} * 1.25);
resize: none;
transition: none;
border-radius: ${borderRadius};
font-size: ${fontSizeBase};
min-height: 2.5rem;
max-height: 10rem;
border: 1px solid ${colorGrayLighter};
box-shadow: 0 0 0 1px ${colorGrayLighter};
&:hover {
outline: transparent;
outline-style: dotted;
outline-width: ${borderSize};
}
&:active,
&:focus {
outline: transparent;
outline-width: ${borderSize};
outline-style: solid;
}
&:focus {
outline: none;
border-radius: ${borderSize};
box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
}
`;
const TextInputButton = styled(Button)`
margin:0 0 0 ${smPaddingX};
align-self: center;
font-size: 0.9rem;
[dir="rtl"] & {
margin: 0 ${smPaddingX} 0 0;
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
`;
export default {
Wrapper,
TextArea,
TextInputButton,
};

53
bigbluebutton-html5/imports/ui/components/text-input/styles.scss
View File

@ -1,53 +0,0 @@
@import "/imports/ui/stylesheets/mixins/focus";
@import "/imports/ui/stylesheets/mixins/_indicators";
@import "/imports/ui/stylesheets/variables/_all";
.wrapper {
display: flex;
flex-direction: row;
}
.textarea {
@include inputFocus(var(--color-blue-light));
flex: 1;
background: #fff;
background-clip: padding-box;
margin: 0;
color: var(--color-text);
-webkit-appearance: none;
padding: calc(var(--sm-padding-y) * 2.5) calc(var(--sm-padding-x) * 1.25);
resize: none;
transition: none;
border-radius: var(--border-radius);
font-size: var(--font-size-base);
min-height: 2.5rem;
max-height: 10rem;
border: 1px solid var(--color-gray-lighter);
box-shadow: 0 0 0 1px var(--color-gray-lighter);
&:hover {
@include highContrastOutline();
}
&:active,
&:focus {
@include highContrastOutline();
outline-style: solid;
}
}
.button {
margin:0 0 0 var(--sm-padding-x);
align-self: center;
font-size: 0.9rem;
[dir="rtl"] & {
margin: 0 var(--sm-padding-x) 0 0;
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}

5
bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
View File

@ -9,6 +9,8 @@ const colorGrayLighter = '#A7B3BD';
const colorBlueLight = '#54a1f3';
const colorBlueLighter = '#92BCEA';
const colorTransparent = '#ff000000';
const colorPrimary = '#0F70D7';
const colorDanger = '#DF2721';
@ -17,6 +19,7 @@ const userListBg = colorOffWhite;
const userListText = colorGray;
const unreadMessagesBg = colorDanger;
const colorGrayLabel = colorGray;
const colorText = colorGray;
const listItemBgHover = '#DCE4ED';
const itemFocusBorder = colorBlueLighter;
@ -32,6 +35,7 @@ export {
colorGrayDark,
colorGrayLight,
colorGrayLighter,
colorTransparent,
colorBlueLight,
colorBlueLighter,
colorPrimary,
@ -41,6 +45,7 @@ export {
userListText,
unreadMessagesBg,
colorGrayLabel,
colorText,
listItemBgHover,
itemFocusBorder,
btnDefaultColor,