mirror of https://github.com/vector-im/riot-web
add generic text input styling
text inputs are now styled at every occurence in the app, style input by default, and provide a .mx_textinput class if buttons need to appear inside the input styling. Before this was partially done in _common.scss, but as it's highly theme-dependent, makes more sense to do it in the theme.pull/21833/head
parent
1fbfddfa8a
commit
80afc0982b
|
@ -52,11 +52,6 @@ a:visited {
|
|||
|
||||
input[type=text], input[type=password], textarea {
|
||||
background-color: transparent;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
input[type=text].error, input[type=password].error {
|
||||
border: 1px solid $warning-color;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
|
|
|
@ -178,6 +178,66 @@ $lightbox-border-color: #ffffff;
|
|||
// unused?
|
||||
$progressbar-color: #000;
|
||||
|
||||
// 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
|
||||
|
||||
:not(.mx_textinput) > input[type=text],
|
||||
:not(.mx_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
display: block;
|
||||
margin: 9px;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #c1c1c1;
|
||||
}
|
||||
|
||||
.mx_textinput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_textinput > input[type=text],
|
||||
.mx_textinput > input[type=search] {
|
||||
border: none;
|
||||
flex: 1;
|
||||
color: inherit; //from .mx_textinput
|
||||
}
|
||||
|
||||
.mx_textinput > :not(input) {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=search] {
|
||||
padding: 9px;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// dont search UI as not all browsers support it,
|
||||
// we implement it ourselves where needed instead
|
||||
input[type=search]::-webkit-search-decoration,
|
||||
input[type=search]::-webkit-search-cancel-button,
|
||||
input[type=search]::-webkit-search-results-button,
|
||||
input[type=search]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input[type=text]::-webkit-input-placeholder,
|
||||
.input[type=text]::-moz-placeholder,
|
||||
.input[type=search]::-webkit-input-placeholder,
|
||||
.input[type=search]::-moz-placeholder {
|
||||
color: #a5aab2;
|
||||
}
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
|
|
Loading…
Reference in New Issue