mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge #839 branch 'master' of git://github.com/shannabarnard/bootstrap-material-design into shannabarnard-master

Browse Source
This commit is contained in:
Kevin Ross 2016-02-29 09:23:45 -06:00
commit a78222d1ce
4 changed files with 78 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
less/_checkboxes.less
View File

@ -68,7 +68,7 @@
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off @mdb-checkbox-animation-check forwards; animation: checkbox-off;
} }
} }
@ -98,7 +98,7 @@
} }
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOn @mdb-checkbox-animation-ripple; animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
@ -109,12 +109,11 @@
&:not(:checked) { &:not(:checked) {
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff @mdb-checkbox-animation-ripple; animation: rippleOff;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck 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 { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow:
@ -162,6 +184,7 @@
20px -12px 0 11px; 20px -12px 0 11px;
} }
} }
@keyframes checkbox-off { @keyframes checkbox-off {
0% { 0% {
box-shadow: box-shadow:
@ -173,7 +196,6 @@
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
} }
25% { 25% {
box-shadow: box-shadow:
0 0 0 10px, 0 0 0 10px,
@ -230,6 +252,7 @@
0px 0 0 0 inset; 0px 0 0 0 inset;
} }
} }
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -241,6 +264,7 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

12
less/_radios.less
View File

@ -60,9 +60,8 @@
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn;
} }
} }
input[type=radio] { 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 { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;

34
sass/_checkboxes.scss
View File

@ -70,7 +70,7 @@
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off $mdb-checkbox-animation-check forwards; animation: checkbox-off;
} }
} }
@ -100,7 +100,7 @@
} }
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple; animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
@ -111,12 +111,11 @@
&:not(:checked) { &:not(:checked) {
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple; animation: rippleOff;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck 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 { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow:
@ -164,6 +186,7 @@
20px -12px 0 11px; 20px -12px 0 11px;
} }
} }
@keyframes checkbox-off { @keyframes checkbox-off {
0% { 0% {
box-shadow: box-shadow:
@ -175,7 +198,6 @@
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
} }
25% { 25% {
box-shadow: box-shadow:
0 0 0 10px, 0 0 0 10px,
@ -232,6 +254,7 @@
0px 0 0 0 inset; 0px 0 0 0 inset;
} }
} }
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -243,6 +266,7 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

12
sass/_radios.scss
View File

@ -62,9 +62,8 @@
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn;
} }
} }
input[type=radio] { 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 { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;