diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-07-12 02:03:17 -0700 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-07-12 02:03:17 -0700 |
commit | 79d898ae0ad8c0e66bd63ec3e0904e9e5e7894e8 (patch) | |
tree | ee8d832ed2f11e9afe62daf0e586a86004eb8d98 /app/javascript/styles/forms.scss | |
parent | bcf7ee48e94cd2e4d2de28e8854e7f0e2b5cad1f (diff) | |
parent | 056b5ed72f6d980bceeb49eb249b8365fe8fce66 (diff) |
Merge upstream!! #64 <3 <3
Diffstat (limited to 'app/javascript/styles/forms.scss')
-rw-r--r-- | app/javascript/styles/forms.scss | 127 |
1 files changed, 104 insertions, 23 deletions
diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 7a181f36b..e1de36d55 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -24,6 +24,20 @@ code { p.hint { margin-bottom: 15px; + color: lighten($ui-base-color, 32%); + + &.subtle-hint { + text-align: center; + font-size: 12px; + line-height: 18px; + margin-top: 15px; + margin-bottom: 0; + color: lighten($ui-base-color, 26%); + + a { + color: $ui-primary-color; + } + } } strong { @@ -43,10 +57,7 @@ code { } } - .input.file, - .input.select, - .input.radio_buttons, - .input.check_boxes { + .input.with_label { padding: 15px 0; margin-bottom: 0; @@ -57,6 +68,44 @@ code { display: block; padding-top: 5px; } + + &.boolean { + padding: initial; + margin-bottom: initial; + + .label_input > label { + font-family: inherit; + font-size: 14px; + color: $primary-text-color; + display: block; + width: auto; + } + + label.checkbox { + position: relative; + padding-left: 25px; + flex: 1 1 auto; + } + } + } + + .input.with_block_label { + & > label { + font-family: inherit; + font-size: 16px; + color: $primary-text-color; + display: block; + padding-top: 5px; + } + + .hint { + margin-bottom: 15px; + } + + li { + float: left; + width: 50%; + } } .fields-group { @@ -92,7 +141,7 @@ code { input[type=checkbox] { position: absolute; left: 0; - top: 1px; + top: 5px; margin: 0; } @@ -102,6 +151,29 @@ code { } } + .check_boxes { + .checkbox { + label { + font-family: inherit; + font-size: 14px; + color: $primary-text-color; + display: block; + width: auto; + position: relative; + padding-top: 5px; + padding-left: 25px; + flex: 1 1 auto; + } + + input[type=checkbox] { + position: absolute; + left: 0; + top: 5px; + margin: 0; + } + } + } + input[type=text], input[type=number], input[type=email], @@ -197,8 +269,6 @@ code { &:active, &:focus { - position: relative; - top: 1px; background-color: darken($ui-highlight-color, 5%); } @@ -219,6 +289,27 @@ code { select { font-size: 16px; } + + .input-with-append { + position: relative; + + .input input { + padding-right: 127px; + } + + .append { + position: absolute; + right: 0; + top: 0; + padding: 7px 4px; + padding-bottom: 9px; + font-size: 16px; + color: lighten($ui-base-color, 26%); + font-family: inherit; + pointer-events: none; + cursor: default; + } + } } .flash-message { @@ -240,7 +331,7 @@ code { text-align: center; a { - color: $primary-text-color; + color: $ui-primary-color; text-decoration: none; &:hover { @@ -357,21 +448,11 @@ code { } } -.user_filtered_languages { - & > label { - font-family: inherit; - font-size: 16px; - color: $primary-text-color; - display: block; - padding-top: 5px; - } - - .hint { - margin-bottom: 15px; - } +.post-follow-actions { + text-align: center; + color: $ui-primary-color; - li { - float: left; - width: 50%; + div { + margin-bottom: 4px; } } |