mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-06-30 18:03:11 +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

22
scss/_checkboxes.scss
View File

@ -50,7 +50,12 @@ 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 $mdb-checkbox-animation-check forwards; animation: checkbox-off;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
} }
} }
} }
@ -92,7 +97,11 @@ label.checkbox-inline {
} }
+ .checkbox-decorator::before { + .checkbox-decorator::before {
animation: rippleOn $mdb-checkbox-animation-ripple; animation: rippleOn;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
animation: rippleOn $mdb-checkbox-animation-ripple;
}
} }
+ .checkbox-decorator .check::after { + .checkbox-decorator .check::after {
@ -103,12 +112,15 @@ label.checkbox-inline {
&:not(:checked) { &:not(:checked) {
+ .checkbox-decorator::before { + .checkbox-decorator::before {
animation: rippleOff $mdb-checkbox-animation-ripple; animation: rippleOff;
.is-focused & {
// Prevent checkbox animation and ripple effect on page load
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,

7
scss/_radios.scss
View File

@ -56,7 +56,12 @@ 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 500ms; animation: rippleOn;
.is-focused & {
// Prevent ripple effect on page load
animation: rippleOn 500ms;
}
} }
} }
} }