mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SCSS colors in inputs.scss 

Signed-off-by: Julius Haertl <jus@bitgrid.net>
This commit is contained in:
Julius Haertl 2017-02-19 19:49:19 +01:00 committed by Julius Härtl
parent 35a805a6f3
commit 128c271c73
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
1 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
core/css/inputs.scss
View File

@ -39,9 +39,9 @@ textarea,
margin: 3px 3px 3px 0; margin: 3px 3px 3px 0;
padding: 7px 6px; padding: 7px 6px;
font-size: 13px; font-size: 13px;
background-color: #fff; background-color: $color-main-background;
color: #333; color: $color-main-old-333333;
border: 1px solid #ddd; border: 1px solid $color-main-old-dddddd;
outline: none; outline: none;
border-radius: 3px; border-radius: 3px;
&:not(:disabled):not(.primary) { &:not(:disabled):not(.primary) {
@ -50,38 +50,38 @@ textarea,
&:focus, &:focus,
&.active { &.active {
/* active class used for multiselect */ /* active class used for multiselect */
border-color: #0082c9; border-color: $color-primary;
outline: none; outline: none;
} }
&:active { &:active {
outline: none; outline: none;
background-color: #fff; background-color: $color-main-background;
} }
} }
&:disabled { &:disabled {
background-color: #eee; background-color: $color-main-old-eeeeee;
color: #999; color: rgba($color-main-text, 0.4);
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
} }
/* Primary action button, use sparingly */ /* Primary action button, use sparingly */
&.primary { &.primary {
border: 1px solid #0082c9; border: 1px solid $color-primary;
background-color: #00a2e9; background-color: rgba($color-primary, .7);
color: #fff; color: $color-primary-text;
cursor: pointer; cursor: pointer;
&:not(:disabled) { &:not(:disabled) {
&:hover, &:hover,
&:focus { &:focus {
background-color: #0092d9; background-color: rgba($color-primary, .85);
} }
&:active { &:active {
background-color: #00a2e9; background-color: rgba($color-primary, .7);
} }
} }
&:disabled { &:disabled {
background-color: #00a2e9; background-color: rgba($color-primary, .7);
color: #bbb; color: color-main-old-bbbbbb;
} }
} }
} }
@ -128,7 +128,7 @@ input[type='reset'] {
min-height: 34px; min-height: 34px;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
background-color: #fafafa; background-color: $color-main-old-fafafa;
} }
/* Buttons */ /* Buttons */
@ -155,7 +155,7 @@ button, .button {
} }
textarea { textarea {
color: #555; color: $color-main-old-555555;
cursor: text; cursor: text;
font-family: inherit; font-family: inherit;
height: auto; height: auto;
@ -163,8 +163,8 @@ textarea {
&:active, &:active,
&:hover, &:hover,
&:focus { &:focus {
border-color: #ddd !important; border-color: $color-main-old-dddddd !important;
background-color: #fff !important; background-color: $color-main-background !important;
} }
} }
} }
@ -186,7 +186,7 @@ button img,
cursor: pointer; cursor: pointer;
} }
#quota { #quota {
color: #555; color: $color-main-old-555555;
} }
select, select,
.button.multiselect { .button.multiselect {
@ -221,27 +221,27 @@ input {
border-radius: 50%; border-radius: 50%;
margin: 3px; margin: 3px;
margin-top: 1px; margin-top: 1px;
border: 1px solid #888; border: 1px solid $color-main-old-888888;
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
border-color: #0082c9; border-color: $color-primary;
} }
&:checked + label:before, &:checked + label:before,
&.checkbox:indeterminate + label:before { &.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio, /* ^ :indeterminate have a strange behavior on radio,
so we respecified the checkbox class again to be safe */ so we respecified the checkbox class again to be safe */
box-shadow: inset 0px 0px 0px 2px #fff; box-shadow: inset 0px 0px 0px 2px $color-main-background;
background-color: #0082c9; background-color: $color-primary;
border-color: #0082c9 border-color: $color-primary
} }
&:disabled + label:before { &:disabled + label:before {
background-color: #ccc !important; /* override other status */ background-color: $color-main-old-cccccc !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px #fff; box-shadow: inset 0px 0px 0px 2px $color-main-background;
border-color: #aaa; border-color: $color-main-old-aaaaaa;
background-color: #bbb; background-color: $color-main-old-bbbbbb;
} }
} }
&.checkbox { &.checkbox {
@ -259,48 +259,48 @@ input {
background-image: url('../img/actions/checkbox-mixed.svg'); background-image: url('../img/actions/checkbox-mixed.svg');
} }
&:indeterminate:disabled + label:before { &:indeterminate:disabled + label:before {
border-color: #888; border-color: $color-main-old-888888;
} }
} }
&.radio--white, &.radio--white,
&.checkbox--white { &.checkbox--white {
+ label:before { + label:before {
border-color: #ddd; border-color: $color-main-old-dddddd;
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
border-color: #fff; border-color: $color-main-background;
} }
&:checked + label:before { &:checked + label:before {
box-shadow: inset 0px 0px 0px 2px #000; box-shadow: inset 0px 0px 0px 2px $color-main-text;
background-color: #eee; background-color: $color-main-old-eeeeee;
border-color: #eee border-color: $color-main-old-eeeeee
} }
&:disabled + label:before { &:disabled + label:before {
background-color: #666 !important; /* override other status */ background-color: $color-main-old-666666 !important; /* override other status */
border-color: #999 !important; /* override other status */ border-color: rgba($color-main-text, 0.4) !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px #000; box-shadow: inset 0px 0px 0px 2px $color-main-text;
border-color: #666; border-color: $color-main-old-666666;
background-color: #222; background-color: $color-main-old-222222;
} }
} }
&.checkbox--white { &.checkbox--white {
&:checked + label:before, &:checked + label:before,
&:indeterminate + label:before { &:indeterminate + label:before {
background-color: transparent !important; /* Override default checked */ background-color: transparent !important; /* Override default checked */
border-color: #fff !important; /* Override default checked */ border-color: $color-main-background !important; /* Override default checked */
background-image: url('../img/actions/checkbox-mark-white.svg'); background-image: url('../img/actions/checkbox-mark-white.svg');
} }
&:indeterminate + label:before { &:indeterminate + label:before {
background-image: url('../img/actions/checkbox-mixed-white.svg'); background-image: url('../img/actions/checkbox-mixed-white.svg');
} }
&:checked:disabled + label:after { &:checked:disabled + label:after {
border-color: #aaa; border-color: $color-main-old-aaaaaa;
} }
&:indeterminate:disabled + label:after { &:indeterminate:disabled + label:after {
background-color: #aaa; background-color: $color-main-old-aaaaaa;
} }
} }
} }
@ -310,7 +310,7 @@ input {
.select2-drop { .select2-drop {
margin-top: -2px; margin-top: -2px;
&.select2-drop-active { &.select2-drop-active {
border-color: #ddd; border-color: $color-main-old-dddddd;
} }
.avatar { .avatar {
display: inline-block; display: inline-block;
@ -343,17 +343,17 @@ input {
position: relative; position: relative;
display: list-item; display: list-item;
padding: 12px; padding: 12px;
background-color: #fff; background-color: $color-main-background;
cursor: pointer; cursor: pointer;
color: #222; color: $color-main-old-222222;
} }
.select2-result { .select2-result {
&.select2-selected { &.select2-selected {
background-color: #f8f8f8; background-color: $color-main-old-f8f8f8;
} }
&.select2-highlighted { &.select2-highlighted {
background-color: #f8f8f8; background-color: $color-main-old-f8f8f8;
color: #000; color: $color-main-text;
} }
} }
} }
@ -371,11 +371,11 @@ input {
box-shadow: none; box-shadow: none;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: #fff; background: $color-main-background;
color: #555; color: $color-main-old-555555;
box-sizing: content-box; box-sizing: content-box;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ddd; border: 1px solid $color-main-old-dddddd;
margin: 0; margin: 0;
padding: 2px 0; padding: 2px 0;
min-height: auto; min-height: auto;
@ -387,9 +387,9 @@ input {
&:active, &:active,
& { & {
background-image: none; background-image: none;
background-color: #fff; background-color: $color-main-background;
color: #333; color: $color-main-old-333333;
border: 1px solid #ddd; border: 1px solid $color-main-old-dddddd;
} }
.select2-search-choice-close { .select2-search-choice-close {
display: none; display: none;
@ -413,11 +413,11 @@ input {
box-shadow: none; box-shadow: none;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: #fff; background: $color-main-background;
color: #555; color: $color-main-old-555555;
box-sizing: content-box; box-sizing: content-box;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ddd; border: 1px solid $color-main-old-dddddd;
margin: 0; margin: 0;
padding: 2px 0; padding: 2px 0;
padding-left: 6px; padding-left: 6px;
@ -426,15 +426,15 @@ input {
line-height: 20px; line-height: 20px;
padding-left: 5px; padding-left: 5px;
background-image: none; background-image: none;
background-color: #f8f8f8; background-color: $color-main-old-f8f8f8;
border-color: #f8f8f8; border-color: $color-main-old-f8f8f8;
.select2-search-choice-close { .select2-search-choice-close {
display: none; display: none;
} }
&.select2-search-choice-focus, &.select2-search-choice-focus,
&:hover { &:hover {
background-color: #f0f0f0; background-color: $color-main-old-f0f0f0;
border-color: #f0f0f0; border-color: $color-main-old-f0f0f0;
} }
} }
.select2-arrow { .select2-arrow {
@ -470,7 +470,7 @@ input {
} }
.ui-widget-content { .ui-widget-content {
background: #fff; background: $color-main-background;
border-top: none; border-top: none;
} }
@ -482,7 +482,7 @@ input {
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: none; border: none;
background: #f8f8f8; background: $color-main-old-f8f8f8;
} }
/* Animation */ /* Animation */