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

Variable for checkboxes and name fix 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-10-04 16:09:45 +02:00
parent 27a6bbcd8a
commit c2abc5810c
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
core/css/inputs.scss
View File

@ -192,6 +192,8 @@ select,
/* Radio & Checkboxes */ /* Radio & Checkboxes */
input { input {
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
&[type='checkbox'], &[type='checkbox'],
&[type='radio'] { &[type='radio'] {
&.radio, &.radio,
@ -218,7 +220,7 @@ input {
border-radius: 50%; border-radius: 50%;
margin: 3px; margin: 3px;
margin-top: 1px; margin-top: 1px;
border: 1px solid nc-darken($color-main-background, 47%); border: 1px solid $color-checkbox-radio-border;
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
@ -233,11 +235,11 @@ input {
border-color: $color-primary-element; border-color: $color-primary-element;
} }
&:disabled + label:before { &:disabled + label:before {
border: 1px solid nc-darken($color-main-background, 47%); border: 1px solid $color-checkbox-radio-border;
background-color: nc-darken($color-main-background, 27%) !important; /* override other status */ background-color: $color-checkbox-radio-disabled !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
background-color: nc-darken($color-main-background, 27%); background-color: $color-checkbox-radio-disabled;
} }
} }
&.checkbox { &.checkbox {
@ -255,36 +257,38 @@ input {
background-image: url('../img/actions/checkbox-mixed.svg'); background-image: url('../img/actions/checkbox-mixed.svg');
} }
} }
$color-checkbox-white: #fff;
/* We do not use the nc-darken function as this si not supposed to be changed */
$color-checkbox-radio-white: #fff;
&.radio--white, &.radio--white,
&.checkbox--white { &.checkbox--white {
+ label:before, + label:before,
&:focus + label:before { &:focus + label:before {
border-color: darken($color-checkbox-white, 27%); border-color: darken($color-checkbox-radio-white, 27%);
} }
&:not(:disabled):not(:checked) + label:hover:before { &:not(:disabled):not(:checked) + label:hover:before {
border-color: $color-checkbox-white; border-color: $color-checkbox-radio-white;
} }
&:checked + label:before { &:checked + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-background; box-shadow: inset 0px 0px 0px 2px $color-main-background;
background-color: darken($color-checkbox-white, 14%); background-color: darken($color-checkbox-radio-white, 14%);
border-color: darken($color-checkbox-white, 14%); border-color: darken($color-checkbox-radio-white, 14%);
} }
&:disabled + label:before { &:disabled + label:before {
background-color: darken($color-checkbox-white, 27%) !important; /* override other status */ background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
border-color: rgba($color-checkbox-white, 0.4) !important; /* override other status */ border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
} }
&:checked:disabled + label:before { &:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-background; box-shadow: inset 0px 0px 0px 2px $color-main-background;
border-color: rgba($color-checkbox-white, 0.4) !important; /* override other status */ border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
background-color: darken($color-checkbox-white, 27%); background-color: darken($color-checkbox-radio-white, 27%);
} }
} }
&.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: $color-checkbox-white !important; /* Override default checked */ border-color: $color-checkbox-radio-white !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 {