mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 01:47:35 +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 de25798e17
commit e1f2eea2a8
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 {
label {
cursor: pointer;
@ -13,7 +28,7 @@
transition-duration: 0.2s;
}
.circle {
border: 2px solid @mdb-radio-border-color;
border: 2px solid @mdb-radio-color-off;
height: 15px;
width: 15px;
border-radius: 100%;
@ -22,7 +37,7 @@
height: 15px;
width: 15px;
border-radius: 100%;
background-color: @mdb-radio-default;
background-color: @mdb-radio-color-on;
transform: scale3d(0, 0, 0);
}
.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] {
opacity: 0;
height: 0;
width: 0;
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] ~ .circle {
border-color: @mdb-text-color-primary;
}
input[type=radio][disabled] ~ .check {
background-color: @mdb-text-color-primary;
input[type=radio][disabled] {
// light theme spec: Disabled: #000000, Opacity 26%
.radio-color(@black, 0.26);
// dark theme spec: Disabled: #FFFFFF, Opacity 30%
.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
@mdb-input-placeholder-color: #BDBDBD;
@ -136,7 +134,8 @@
// Radio:
@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:
@mdb-btn-font-size-base: 14px;