mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
Merge branch 'shannabarnard-master'
This commit is contained in:
commit
8aa0d93a62
|
@ -68,7 +68,7 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @mdb-checkbox-animation-check forwards;
|
||||
animation: checkbox-off;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -98,7 +98,7 @@
|
|||
}
|
||||
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn @mdb-checkbox-animation-ripple;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
|
@ -109,12 +109,11 @@
|
|||
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff @mdb-checkbox-animation-ripple;
|
||||
animation: rippleOff;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -133,6 +132,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
.is-focused {
|
||||
.checkbox {
|
||||
.checkbox-material {
|
||||
.check:before {
|
||||
animation: checkbox-off @mdb-checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
input[type=checkbox] {
|
||||
&:checked {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn @mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff @mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
@ -162,6 +184,7 @@
|
|||
20px -12px 0 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-off {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
@ -173,7 +196,6 @@
|
|||
20px -12px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
|
@ -230,6 +252,7 @@
|
|||
0px 0 0 0 inset;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
@ -241,6 +264,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
@ -60,9 +60,8 @@
|
|||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
|
@ -91,6 +90,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
.is-focused {
|
||||
.radio {
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off $mdb-checkbox-animation-check forwards;
|
||||
animation: checkbox-off;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -100,7 +100,7 @@
|
|||
}
|
||||
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
|
@ -111,12 +111,11 @@
|
|||
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
animation: rippleOff;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -135,6 +134,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
.is-focused {
|
||||
.checkbox {
|
||||
.checkbox-material {
|
||||
.check:before {
|
||||
animation: checkbox-off $mdb-checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
input[type=checkbox] {
|
||||
&:checked {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
@ -164,6 +186,7 @@
|
|||
20px -12px 0 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-off {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
@ -175,7 +198,6 @@
|
|||
20px -12px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
|
@ -232,6 +254,7 @@
|
|||
0px 0 0 0 inset;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
@ -243,6 +266,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
@ -62,9 +62,8 @@
|
|||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
|
@ -93,6 +92,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
.is-focused {
|
||||
.radio {
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
Loading…
Reference in New Issue
Block a user