mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Integrate PR #829 from @shannabarnard into v4-dev

Browse Source
This commit is contained in:
Kevin Ross 2016-02-29 09:22:32 -06:00
parent 32c7c139e0
commit 9f3b4d6b94
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/_checkboxes.scss
View File

@ -50,10 +50,15 @@ label.checkbox-inline {
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
transform: rotate(45deg); transform: rotate(45deg);
animation: checkbox-off;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
animation: checkbox-off $mdb-checkbox-animation-check forwards; animation: checkbox-off $mdb-checkbox-animation-check forwards;
} }
} }
} }
}
input[type=checkbox] { input[type=checkbox] {
@ -92,8 +97,12 @@ label.checkbox-inline {
} }
+ .checkbox-decorator::before { + .checkbox-decorator::before {
animation: rippleOn;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
animation: rippleOn $mdb-checkbox-animation-ripple; animation: rippleOn $mdb-checkbox-animation-ripple;
} }
}
+ .checkbox-decorator .check::after { + .checkbox-decorator .check::after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
@ -103,12 +112,15 @@ label.checkbox-inline {
&:not(:checked) { &:not(:checked) {
+ .checkbox-decorator::before { + .checkbox-decorator::before {
animation: rippleOff;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
animation: rippleOff $mdb-checkbox-animation-ripple; animation: rippleOff $mdb-checkbox-animation-ripple;
} }
}
+ .checkbox-decorator .check::after { + .checkbox-decorator .check::after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
} }
@ -125,7 +137,6 @@ label.checkbox-inline {
} }
} }
} }
} }
@keyframes checkbox-on { @keyframes checkbox-on {
@ -165,7 +176,6 @@ label.checkbox-inline {
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
} }
25% { 25% {
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,

5
scss/_radios.scss
View File

@ -56,10 +56,15 @@ label.radio-inline {
~ .mdb-radio-inner-circle { ~ .mdb-radio-inner-circle {
transform: scale3d(0.55, 0.55, 1); transform: scale3d(0.55, 0.55, 1);
&::after { &::after {
animation: rippleOn;
.is-focused & {
// Prevent ripple effect on page load
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
} }
} }
}
&:not(:checked) ~ .mdb-radio-inner-circle::after { &:not(:checked) ~ .mdb-radio-inner-circle::after {
animation: rippleOff 500ms; animation: rippleOff 500ms;