mirror of https://github.com/vector-im/riot-web
Lift panel input styling up to common
J. Ryan Stinnett
parent
98a3ecbcb5
commit
fdd88b60a6
|
|
@ -104,6 +104,71 @@ textarea {
|
||||||
color: $primary-fg-color;
|
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 */
|
/* Prevent ugly dotted highlight around selected elements in Firefox */
|
||||||
::-moz-focus-inner {
|
::-moz-focus-inner {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
||||||
|
|
@ -141,59 +141,12 @@ $room-warning-bg-color: $header-panel-bg-color;
|
||||||
|
|
||||||
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
|
$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 ***/
|
/*** panels ***/
|
||||||
|
|
||||||
.dark-panel {
|
.dark-panel {
|
||||||
background-color: $header-panel-bg-color;
|
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! *****
|
// ***** Mixins! *****
|
||||||
|
|
||||||
@define-mixin mx_DialogButton {
|
@define-mixin mx_DialogButton {
|
||||||
|
|
|
||||||
|
|
@ -252,74 +252,6 @@ $authpage-secondary-color: #61708b;
|
||||||
|
|
||||||
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
|
$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! *****
|
// ***** Mixins! *****
|
||||||
|
|
||||||
@define-mixin mx_DialogButton {
|
@define-mixin mx_DialogButton {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue