mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-30 13:33:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

#740 updated radio color variables

Browse Source
This commit is contained in:
Kevin Ross 2015-11-24 17:14:53 -06:00
parent 5177178d7c
commit 0404dcc28d
2 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
less/_radios.less
View File

@ -1,3 +1,18 @@
.radio-color(@color, @opacity){
& ~ .check,
& ~ .circle {
opacity: @opacity;
}
& ~ .check {
background-color: @color;
}
& ~ .circle {
border-color: @color;
}
}
.radio { .radio {
label { label {
cursor: pointer; cursor: pointer;
@ -13,7 +28,7 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.circle { .circle {
border: 2px solid @mdb-radio-border-color; border: 2px solid @mdb-radio-color-off;
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
@ -22,7 +37,7 @@
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: @mdb-radio-default; background-color: @mdb-radio-color-on;
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
.check:after { .check:after {
@ -48,34 +63,30 @@
} }
} }
& input[type=radio]:checked {
& ~ .check {
background-color: @mdb-radio-default;
}
& ~ .circle {
border-color: @mdb-radio-default;
}
}
input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle {
opacity: 0.5;
}
input[type=radio] { input[type=radio] {
opacity: 0; opacity: 0;
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
&:checked {
.radio-color(@mdb-radio-color-on, 1);
}
&:checked ~ .check {
transform: scale3d(0.55, 0.55, 1);
}
} }
input[type=radio]:checked ~ .check {
transform: scale3d(0.55, 0.55, 1); input[type=radio][disabled] {
}
input[type=radio][disabled] ~ .circle { // light theme spec: Disabled: #000000, Opacity 26%
border-color: @mdb-text-color-primary; .radio-color(@black, 0.26);
}
input[type=radio][disabled] ~ .check { // dark theme spec: Disabled: #FFFFFF, Opacity 30%
background-color: @mdb-text-color-primary; .theme-dark & {
.radio-color(@white, 0.30);
}
} }
} }

5
less/_variables.less
View File

@ -53,8 +53,6 @@
//--- //---
@mdb-radio-default: @mdb-text-color-primary;
// -------------------- // --------------------
// inputs // inputs
@mdb-input-placeholder-color: #BDBDBD; @mdb-input-placeholder-color: #BDBDBD;
@ -136,7 +134,8 @@
// Radio: // Radio:
@mdb-radio-label-color: @mdb-checkbox-label-color; @mdb-radio-label-color: @mdb-checkbox-label-color;
@mdb-radio-border-color: @mdb-checkbox-border-color; @mdb-radio-color-off: @mdb-checkbox-border-color;
@mdb-radio-color-on: @brand-primary;
// Buttons: // Buttons:
@mdb-btn-font-size-base: 14px; @mdb-btn-font-size-base: 14px;