diff --git a/css/_base.scss b/css/_base.scss index 6491bcbb0..64dfcd203 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -29,36 +29,6 @@ html, body, input, textarea, keygen, select, button { color: #636363; } -input[type='text'], input[type='password'], textarea { - display: inline-block; - width: 100%; - padding: 5px 7px; - color: $inputColor; - border-radius: $borderRadius; - line-height: 32px; - height: 32px; - text-align: left; - border:1px solid $inputBorderColor; - background-color: $inputBackground; - outline: none; /* removes the default outline */ - resize: none; /* prevents the user-resizing, adjust to taste */ -} - -@include placeholder { - color: $placeHolderColor; -} - -textarea { - overflow: hidden; - word-wrap: break-word; - resize: none; - line-height: 1.5em; -} - -button.no-icon { - padding: 0 1em; -} - button, input, select, textarea { margin: 0; vertical-align: baseline; @@ -75,10 +45,26 @@ input[type="reset"], input[type="submit"] { cursor: pointer; } +textarea { + overflow: hidden; + word-wrap: break-word; + resize: none; + line-height: 1.5em; +} + +input[type='text'], input[type='password'], textarea { + outline: none; /* removes the default outline */ + resize: none; /* prevents the user-resizing, adjust to taste */ +} + button { color: #FFF; background-color: $buttonBackground; border-radius: $borderRadius; + + &.no-icon { + padding: 0 1em; + } } button, @@ -132,42 +118,6 @@ form { font-size: 12px; } -/** - * Hides an element. - */ -.hide { - display: none !important; -} - -/** - * Shows an element. - */ -.show { - display: block !important; -} - -/** - * Shows an inline element. - */ -.show-inline { - display: inline-block !important; -} - -.show-list-item { - display: list-item !important; -} - -/** - * Shows a flex element. - */ -.show-flex { - display: -webkit-box !important; - display: -moz-box !important; - display: -ms-flexbox !important; - display: -webkit-flex !important; - display: flex !important; -} - /** * Tooltips **/ @@ -189,18 +139,6 @@ form { visibility: visible; } -.link { - cursor: pointer; - color: $linkFontColor; - @include transition(color .1s ease-out); - - &:hover { - color: $linkHoverFontColor; - text-decoration: underline; - @include transition(color .1s ease-in); - } -} - #inviteLinkRef { -webkit-user-select: text; user-select: text; diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index c174a4c71..f6a11afe3 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -23,23 +23,13 @@ * Form elements and blocks. */ input, select, a, - .sideToolbarBlock, .input-control, .button-control { + .sideToolbarBlock, .form-control, .button-control { display: block; margin-top: 15px; margin-left: 10%; width: 80%; } - /** - * Specify colors for edit elements. - */ - select, input[type="button"], input[type="text"], input[type="reset"], - input[type="submit"] { - color: $inputColor; - background: $inputBackground; - border: none; - } - /** * Specify styling of elements inside a block. */ diff --git a/css/_utils.scss b/css/_utils.scss new file mode 100644 index 000000000..33524eea4 --- /dev/null +++ b/css/_utils.scss @@ -0,0 +1,38 @@ +/** + * Hides an element. + */ +.hide { + display: none !important; +} + +/** + * Shows an element. + */ +.show { + display: block !important; +} + +/** + * Shows an inline element. + */ +.show-inline { + display: inline-block !important; +} + +/** +* Shows as a list item +**/ +.show-list-item { + display: list-item !important; +} + +/** + * Shows a flex element. + */ +.show-flex { + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-flexbox !important; + display: -webkit-flex !important; + display: flex !important; +} \ No newline at end of file diff --git a/css/buttons/_button-control.scss b/css/components/_button-control.scss similarity index 100% rename from css/buttons/_button-control.scss rename to css/components/_button-control.scss diff --git a/css/input-control/_input-control.scss b/css/components/_form-control.scss similarity index 71% rename from css/input-control/_input-control.scss rename to css/components/_form-control.scss index 05ea6c28f..227312162 100644 --- a/css/input-control/_input-control.scss +++ b/css/components/_form-control.scss @@ -1,4 +1,4 @@ -.input-control { +.form-control { padding: 16px 0; &:first-child { @@ -19,24 +19,6 @@ font-weight: $labelFontWeight; } - &__input { - margin-bottom: 8px; - @include transition(all .2s ease-in); - - &:last-child { - margin-bottom: inherit; - } - - &::selection { - background-color: $defaultDarkSelectionColor; - } - - &.error { - color: $errorColor; - border-color: $errorColor; - } - } - &__em { color: $inputControlEmColor; } diff --git a/css/components/_input-control.scss b/css/components/_input-control.scss new file mode 100644 index 000000000..f13566606 --- /dev/null +++ b/css/components/_input-control.scss @@ -0,0 +1,32 @@ +.input-control { + @include transition(all .2s ease-in); + display: inline-block; + width: 100%; + padding: 5px 7px; + color: $inputColor; + border-radius: $borderRadius; + line-height: 32px; + height: 32px; + text-align: left; + border:1px solid $inputBorderColor; + background-color: $inputBackground; + margin-bottom: 8px; + + &:last-child { + margin-bottom: inherit; + } + + &::selection { + background-color: $defaultDarkSelectionColor; + } + + + &.error { + color: $errorColor; + border-color: $errorColor; + } +} + +@include placeholder { + color: $placeHolderColor; +} \ No newline at end of file diff --git a/css/components/_link.scss b/css/components/_link.scss new file mode 100644 index 000000000..c8631350f --- /dev/null +++ b/css/components/_link.scss @@ -0,0 +1,11 @@ +.link { + cursor: pointer; + color: $linkFontColor; + @include transition(color .1s ease-out); + + &:hover { + color: $linkHoverFontColor; + text-decoration: underline; + @include transition(color .1s ease-in); + } +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 3d2af62be..ae22301cf 100644 --- a/css/main.scss +++ b/css/main.scss @@ -33,6 +33,7 @@ @import 'toastr'; @import 'base'; +@import 'utils'; @import 'overlay/overlay'; @import 'inlay'; @import 'reload_overlay/reload_overlay'; @@ -55,9 +56,11 @@ @import 'jquery.contextMenu'; @import 'keyboard-shortcuts'; @import 'redirect_page'; -@import 'input-control/input-control'; +@import 'components/form-control'; +@import 'components/link'; @import 'shortcuts/main'; -@import 'buttons/button-control'; +@import 'components/button-control'; +@import 'components/_input-control.scss'; @import "modals/invite/invite"; @import "connection-info"; @import 'aui-components/dropdown'; diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss index 6de6b9316..c25b15615 100644 --- a/css/modals/_dialog.scss +++ b/css/modals/_dialog.scss @@ -72,7 +72,7 @@ } } - .input-control:not(:last-child) { + .form-control:not(:last-child) { border-bottom: 1px solid $auiBorderColor; } } diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss index 881afb9cc..5086377ba 100644 --- a/css/modals/feedback/_feedback.scss +++ b/css/modals/feedback/_feedback.scss @@ -62,7 +62,7 @@ text-align: center; padding: 10px 40px 20px 40px; - .input-control{ + .form-control{ &__input { background-color: $feedbackInputBg; color: $feedbackInputTextColor; diff --git a/modules/UI/UI.js b/modules/UI/UI.js index fd6cbe549..ff2932cfd 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -80,12 +80,11 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE] function promptDisplayName() { let labelKey = 'dialog.enterDisplayName'; let message = ( - `
- + `
+ + class="input-control" autofocus>
` ); @@ -742,9 +741,11 @@ UI.showLoginPopup = function(callback) { let message = ( ` + placeholder="user@domain.net" + class="input-control" autofocus> ` ); diff --git a/modules/UI/authentication/LoginDialog.js b/modules/UI/authentication/LoginDialog.js index 8eb01d22f..535731e73 100644 --- a/modules/UI/authentication/LoginDialog.js +++ b/modules/UI/authentication/LoginDialog.js @@ -11,10 +11,10 @@ function getPasswordInputHtml() { return ` `; } diff --git a/modules/UI/feedback/FeedbackWindow.js b/modules/UI/feedback/FeedbackWindow.js index 1bab72a0b..35a444028 100644 --- a/modules/UI/feedback/FeedbackWindow.js +++ b/modules/UI/feedback/FeedbackWindow.js @@ -66,7 +66,7 @@ function createRateFeedbackHTML() {
-
`; diff --git a/modules/UI/invite/InviteDialogView.js b/modules/UI/invite/InviteDialogView.js index 2919ee22f..ad4cbaed6 100644 --- a/modules/UI/invite/InviteDialogView.js +++ b/modules/UI/invite/InviteDialogView.js @@ -120,20 +120,20 @@ export default class InviteDialogView { getShareLinkBlock() { let classes = 'button-control button-control_light copyInviteLink'; return ( - `
-