OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Bruno Windels 2018-11-05 09:28:26 +01:00
parent 1fbfddfa8a
commit 80afc0982b
2 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/_common.scss
View File

@ -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 {

60
res/themes/dharma/css/_dharma.scss
View File

@ -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 {