From fdd88b60a6f996951b00e7af7032d782e6645079 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 13:43:18 +0000 Subject: [PATCH] Lift panel input styling up to common --- res/css/_common.scss | 65 ++++++++++++++++++++++++++++++ res/themes/dark/css/_dark.scss | 49 +---------------------- res/themes/light/css/_light.scss | 68 -------------------------------- 3 files changed, 66 insertions(+), 116 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index c6c924c6c4..4769df1c33 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -104,6 +104,71 @@ textarea { color: $primary-fg-color; } +// .mx_textinput is a container for a text input +// + some other controls like buttons, ... +// it has the appearance of a text box so the controls +// appear to be part of the input + +.mx_Dialog, .mx_MatrixChat { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + display: block; + box-sizing: border-box; + background-color: transparent; + color: $input-darker-fg-color; + border-radius: 4px; + border: 1px solid #c1c1c1; + // these things should probably not be defined + // globally + margin: 9px; + flex: 0 0 auto; + } + + .mx_textinput { + display: flex; + align-items: center; + + > input[type=text], + > input[type=search] { + border: none; + flex: 1; + color: $primary-fg-color; + } + } + + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, + .mx_textinput input::placeholder { + color: $roomsublist-label-fg-color; + } +} + +/*** panels ***/ +.dark-panel { + background-color: $secondary-accent-color; +} + +.dark-panel { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + color: $input-darker-fg-color; + background-color: $input-darker-bg-color; + border: none; + } +} + +.light-panel { + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], + .mx_textinput { + color: $input-lighter-fg-color; + background-color: $input-lighter-bg-color; + border: none; + } +} + /* Prevent ugly dotted highlight around selected elements in Firefox */ ::-moz-focus-inner { border: 0; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 3122951034..8542e617c0 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -141,59 +141,12 @@ $room-warning-bg-color: $header-panel-bg-color; $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); -/*** form elements ***/ - -// .mx_textinput is a container for a text input -// + some other controls like buttons, ... -// it has the appearance of a text box so the controls -// appear to be part of the input - -.mx_Dialog, .mx_MatrixChat { - - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - background-color: transparent; - color: $input-darker-fg-color; - border: 1px solid #c1c1c1; - } - - .mx_textinput { - > input[type=text], - > input[type=search] { - color: $primary-fg-color; - } - input::placeholder { - color: $roomsublist-label-fg-color; - } - } -} - /*** panels ***/ + .dark-panel { background-color: $header-panel-bg-color; } -.dark-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-darker-fg-color; - background-color: $input-darker-bg-color; - border: none; - } -} - -.light-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-lighter-fg-color; - background-color: $input-lighter-bg-color; - border: none; - } -} - // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index e52f62b044..2b3f3a33ca 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -252,74 +252,6 @@ $authpage-secondary-color: #61708b; $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); -/*** form elements ***/ - -// .mx_textinput is a container for a text input -// + some other controls like buttons, ... -// it has the appearance of a text box so the controls -// appear to be part of the input - -.mx_Dialog, .mx_MatrixChat { - - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - display: block; - box-sizing: border-box; - background-color: transparent; - color: $input-darker-fg-color; - border-radius: 4px; - border: 1px solid #c1c1c1; - // these things should probably not be defined - // globally - margin: 9px; - flex: 0 0 auto; - } - - .mx_textinput { - display: flex; - align-items: center; - - > input[type=text], - > input[type=search] { - border: none; - flex: 1; - color: $primary-fg-color; - } - } - - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, - .mx_textinput input::placeholder { - color: $roomsublist-label-fg-color; - } -} - -/*** panels ***/ -.dark-panel { - background-color: $secondary-accent-color; -} - -.dark-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-darker-fg-color; - background-color: $input-darker-bg-color; - border: none; - } -} - -.light-panel { - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], - :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], - .mx_textinput { - color: $input-lighter-fg-color; - background-color: $input-lighter-bg-color; - border: none; - } -} - // ***** Mixins! ***** @define-mixin mx_DialogButton {