mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
checkboxes now don't use js and are more similar to the original ones
This commit is contained in:
FezVrasta
parent
1c37b4a872
commit
c4bd0ed646
|
|
@ -442,38 +442,23 @@ h6,
|
||||||
}
|
}
|
||||||
.checkbox label .ripple {
|
.checkbox label .ripple {
|
||||||
background-color: rgba(0, 0, 0, 0.84);
|
background-color: rgba(0, 0, 0, 0.84);
|
||||||
left: 0;
|
left: -5px;
|
||||||
top: -10px;
|
top: -15px;
|
||||||
height: 40px;
|
height: 50px;
|
||||||
width: 40px;
|
width: 50px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
transform: scale(0);
|
|
||||||
transition: transform .1s, opacity 0.2s 0.4s;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 0.2;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.checkbox label .ripple.animate {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
.checkbox label .box {
|
.checkbox label .box {
|
||||||
border: 2px solid rgba(0, 0, 0, 0.84);
|
border: 2px solid rgba(0, 0, 0, 0.84);
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
transition-delay: 0.2s;
|
-webkit-transition-delay: 0.2s;
|
||||||
}
|
-moz-transition-delay: 0.2s;
|
||||||
.checkbox label .check {
|
-o-transition-delay: 0.2s;
|
||||||
top: -4px;
|
-ms-transition-delay: 0.2s;
|
||||||
left: 16px;
|
|
||||||
width: 12px;
|
|
||||||
height: 24px;
|
|
||||||
border: 2px solid;
|
|
||||||
border-top: none;
|
|
||||||
border-left: none;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 888;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
}
|
}
|
||||||
.checkbox .check,
|
.checkbox .check,
|
||||||
|
|
@ -546,19 +531,49 @@ h6,
|
||||||
.checkbox-material-lightgrey .check {
|
.checkbox-material-lightgrey .check {
|
||||||
color: #ececec;
|
color: #ececec;
|
||||||
}
|
}
|
||||||
.checkbox input[type=checkbox][disabled]:checked ~ .check,
|
.checkbox input[type=checkbox] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.checkbox input[type=checkbox] ~ .box {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: solid 2px;
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
-webkit-animation: uncheck 300ms ease-out forwards;
|
||||||
|
-moz-animation: uncheck 300ms ease-out forwards;
|
||||||
|
-ms-animation: uncheck 300ms ease-out forwards;
|
||||||
|
-o-animation: uncheck 300ms ease-out forwards;
|
||||||
|
animation: uncheck 300ms ease-out forwards;
|
||||||
|
}
|
||||||
|
.checkbox input[type=checkbox]:checked ~ .box {
|
||||||
|
-webkit-animation: check 300ms ease-out forwards;
|
||||||
|
-moz-animation: check 300ms ease-out forwards;
|
||||||
|
-ms-animation: check 300ms ease-out forwards;
|
||||||
|
-o-animation: check 300ms ease-out forwards;
|
||||||
|
animation: check 300ms ease-out forwards;
|
||||||
|
}
|
||||||
|
.checkbox input[type=checkbox]:not(:checked) ~ .ripple {
|
||||||
|
-webkit-animation: rippleOff 500ms;
|
||||||
|
-moz-animation: rippleOff 500ms;
|
||||||
|
-ms-animation: rippleOff 500ms;
|
||||||
|
-o-animation: rippleOff 500ms;
|
||||||
|
animation: rippleOff 500ms;
|
||||||
|
}
|
||||||
|
.checkbox input[type=checkbox]:checked ~ .ripple {
|
||||||
|
-webkit-animation: rippleOn 500ms;
|
||||||
|
-moz-animation: rippleOn 500ms;
|
||||||
|
-ms-animation: rippleOn 500ms;
|
||||||
|
-o-animation: rippleOn 500ms;
|
||||||
|
animation: rippleOn 500ms;
|
||||||
|
}
|
||||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .box {
|
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .box {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
.checkbox input[type=checkbox][disabled] ~ .ripple {
|
.checkbox input[type=checkbox][disabled] ~ .ripple {
|
||||||
opacity: 0.1;
|
background-color: rgba(0, 0, 0, 0.84);
|
||||||
}
|
|
||||||
.checkbox input[type=checkbox] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.checkbox input[type=checkbox]:checked ~ .box {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0) rotate(-180deg);
|
|
||||||
}
|
}
|
||||||
.checkbox input[type=checkbox]:checked ~ .ripple,
|
.checkbox input[type=checkbox]:checked ~ .ripple,
|
||||||
.checkbox-default input[type=checkbox]:checked ~ .ripple {
|
.checkbox-default input[type=checkbox]:checked ~ .ripple {
|
||||||
|
|
@ -630,12 +645,375 @@ h6,
|
||||||
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple {
|
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple {
|
||||||
background-color: #ececec;
|
background-color: #ececec;
|
||||||
}
|
}
|
||||||
.checkbox input[type=checkbox]:checked ~ .check {
|
@-webkit-keyframes uncheck {
|
||||||
opacity: 1;
|
0% {
|
||||||
transform: scale(1) rotate(45deg);
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.checkbox input[type=checkbox][disabled] ~ .ripple {
|
.keyframe-check 100% {
|
||||||
background-color: rgba(0, 0, 0, 0.84);
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
.keyframe-check 51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
.keyframe-check 50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
.keyframe-check 0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes check {
|
||||||
|
100% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes check {
|
||||||
|
100% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes check {
|
||||||
|
100% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes check {
|
||||||
|
100% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes check {
|
||||||
|
100% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ripple 0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.ripple 50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
.ripple 100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes rippleOff {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes rippleOff {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes rippleOff {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes rippleOff {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.form-horizontal .radio {
|
.form-horizontal .radio {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
@ -849,6 +1227,12 @@ h6,
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-bottom: 1px solid #757575;
|
border-bottom: 1px solid #757575;
|
||||||
}
|
}
|
||||||
|
.form-control-wrapper .form-control:disabled,
|
||||||
|
.form-control:disabled,
|
||||||
|
.form-control-wrapper .form-control:focus:disabled,
|
||||||
|
.form-control:focus:disabled {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
.form-control-wrapper {
|
.form-control-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* active state */
|
/* active state */
|
||||||
|
|
|
||||||
|
|
@ -16,62 +16,165 @@
|
||||||
}
|
}
|
||||||
.ripple {
|
.ripple {
|
||||||
background-color: @lightbg-text;
|
background-color: @lightbg-text;
|
||||||
left: 0;
|
left: -5px;
|
||||||
top: -10px;
|
top: -15px;
|
||||||
height: 40px;
|
height: 50px;
|
||||||
width: 40px;
|
width: 50px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
transform: scale(0);
|
|
||||||
transition: transform .1s, opacity 0.2s 0.4s;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 0.2;
|
opacity: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
&.animate {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid @lightbg-text;
|
border: 2px solid @lightbg-text;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
transition-delay: 0.2s;
|
.transition-delay(0.2s);
|
||||||
}
|
|
||||||
.check {
|
|
||||||
top: -4px;
|
|
||||||
left: 16px;
|
|
||||||
width: 12px;
|
|
||||||
height: 24px;
|
|
||||||
border: 2px solid;
|
|
||||||
border-top: none;
|
|
||||||
border-left: none;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 888;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Variations
|
||||||
.variations(~" .check", color, @success);
|
.variations(~" .check", color, @success);
|
||||||
|
|
||||||
input[type=checkbox][disabled]:checked ~ .check,
|
// Hide native checkbox
|
||||||
|
input[type=checkbox] { display: none; }
|
||||||
|
|
||||||
|
input[type=checkbox] ~ .box {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: solid 2px;
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
.animation(uncheck 300ms ease-out forwards);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:checked ~ .box {
|
||||||
|
.animation(check 300ms ease-out forwards);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ripple effect on click
|
||||||
|
input[type=checkbox]:not(:checked) ~ .ripple {
|
||||||
|
.animation(rippleOff 500ms);
|
||||||
|
}
|
||||||
|
input[type=checkbox]:checked ~ .ripple {
|
||||||
|
.animation(rippleOn 500ms);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style for disabled inputs
|
||||||
input[type=checkbox][disabled]:not(:checked) ~ .box {
|
input[type=checkbox][disabled]:not(:checked) ~ .box {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
input[type=checkbox][disabled] ~ .ripple {
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
input[type=checkbox] { display: none; }
|
|
||||||
input[type=checkbox]:checked ~ .box {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0) rotate(-180deg);
|
|
||||||
}
|
|
||||||
.variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
|
|
||||||
input[type=checkbox]:checked ~ .check {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox][disabled] ~ .ripple {
|
input[type=checkbox][disabled] ~ .ripple {
|
||||||
background-color: @lightbg-text;
|
background-color: @lightbg-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@-webkit-keyframes uncheck {
|
||||||
|
0% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyframe-check {
|
||||||
|
100% {
|
||||||
|
top: -3px;
|
||||||
|
left: 17px;
|
||||||
|
width: 10px;
|
||||||
|
height: 21px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #0f9d58;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
border-left: transparent;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 14px;
|
||||||
|
left: 17px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
top: 1px;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
border-color: #5a5a5a;
|
||||||
|
border-left-color: #5a5a5a;
|
||||||
|
border-top-color: #5a5a5a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes check {.keyframe-check()}
|
||||||
|
@-moz-keyframes check {.keyframe-check()}
|
||||||
|
@-ms-keyframes check {.keyframe-check()}
|
||||||
|
@-o-keyframes check {.keyframe-check()}
|
||||||
|
@keyframes check {.keyframe-check()}
|
||||||
|
|
||||||
|
.ripple{
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes rippleOn {.ripple()}
|
||||||
|
@-moz-keyframes rippleOn {.ripple()}
|
||||||
|
@-ms-keyframes rippleOn {.ripple()}
|
||||||
|
@-o-keyframes rippleOn {.ripple()}
|
||||||
|
@keyframes rippleOn {.ripple()}
|
||||||
|
|
||||||
|
@-webkit-keyframes rippleOff {.ripple()}
|
||||||
|
@-moz-keyframes rippleOff {.ripple()}
|
||||||
|
@-ms-keyframes rippleOn {.ripple()}
|
||||||
|
@-o-keyframes rippleOff {.ripple()}
|
||||||
|
@keyframes rippleOff {.ripple()}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,9 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-bottom: 1px solid #757575;
|
border-bottom: 1px solid #757575;
|
||||||
|
&:disabled {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -18,10 +21,6 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-input:after {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-label {
|
.floating-label {
|
||||||
color: #7E7E7E;
|
color: #7E7E7E;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
@import "variables.less";
|
@import "variables.less";
|
||||||
@import "mixins.less";
|
@import "mixins.less";
|
||||||
|
@import "prefixer.less";
|
||||||
@import "animations.less";
|
@import "animations.less";
|
||||||
@import "shadows.less";
|
@import "shadows.less";
|
||||||
|
|
||||||
|
|
|
||||||
371
less/prefixer.less
Normal file
371
less/prefixer.less
Normal file
|
|
@ -0,0 +1,371 @@
|
||||||
|
// main: material
|
||||||
|
|
||||||
|
//---------------------------------------------------
|
||||||
|
// LESS Prefixer
|
||||||
|
//---------------------------------------------------
|
||||||
|
//
|
||||||
|
// All of the CSS3 fun, none of the prefixes!
|
||||||
|
//
|
||||||
|
// As a rule, you can use the CSS properties you
|
||||||
|
// would expect just by adding a '.':
|
||||||
|
//
|
||||||
|
// box-shadow => .box-shadow(@args)
|
||||||
|
//
|
||||||
|
// Also, when shorthand is available, arguments are
|
||||||
|
// not parameterized. Learn CSS, not LESS Prefixer.
|
||||||
|
//
|
||||||
|
// -------------------------------------------------
|
||||||
|
// TABLE OF CONTENTS
|
||||||
|
// (*) denotes a syntax-sugar helper
|
||||||
|
// -------------------------------------------------
|
||||||
|
//
|
||||||
|
// .animation(@args)
|
||||||
|
// .animation-delay(@delay)
|
||||||
|
// .animation-direction(@direction)
|
||||||
|
// .animation-duration(@duration)
|
||||||
|
// .animation-fill-mode(@mode)
|
||||||
|
// .animation-iteration-count(@count)
|
||||||
|
// .animation-name(@name)
|
||||||
|
// .animation-play-state(@state)
|
||||||
|
// .animation-timing-function(@function)
|
||||||
|
// .background-size(@args)
|
||||||
|
// .border-radius(@args)
|
||||||
|
// .box-shadow(@args)
|
||||||
|
// .inner-shadow(@args) *
|
||||||
|
// .box-sizing(@args)
|
||||||
|
// .border-box() *
|
||||||
|
// .content-box() *
|
||||||
|
// .columns(@args)
|
||||||
|
// .column-count(@count)
|
||||||
|
// .column-gap(@gap)
|
||||||
|
// .column-rule(@args)
|
||||||
|
// .column-width(@width)
|
||||||
|
// .gradient(@default,@start,@stop) *
|
||||||
|
// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
|
||||||
|
// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
|
||||||
|
// .opacity(@factor)
|
||||||
|
// .transform(@args)
|
||||||
|
// .transform-origin(@args)
|
||||||
|
// .transform-style(@style)
|
||||||
|
// .rotate(@deg)
|
||||||
|
// .scale(@factor)
|
||||||
|
// .translate(@x,@y)
|
||||||
|
// .translate3d(@x,@y,@z)
|
||||||
|
// .translateHardware(@x,@y) *
|
||||||
|
// .text-shadow(@args)
|
||||||
|
// .transition(@args)
|
||||||
|
// .transition-delay(@delay)
|
||||||
|
// .transition-duration(@duration)
|
||||||
|
// .transition-property(@property)
|
||||||
|
// .transition-timing-function(@function)
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Credit to LESS Elements for the motivation and
|
||||||
|
// to CSS3Please.com for implementation.
|
||||||
|
//
|
||||||
|
// Copyright (c) 2012 Joel Sutherland
|
||||||
|
// MIT Licensed:
|
||||||
|
// http://www.opensource.org/licenses/mit-license.php
|
||||||
|
//
|
||||||
|
//---------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Animation
|
||||||
|
|
||||||
|
.animation(@args) {
|
||||||
|
-webkit-animation: @args;
|
||||||
|
-moz-animation: @args;
|
||||||
|
-ms-animation: @args;
|
||||||
|
-o-animation: @args;
|
||||||
|
animation: @args;
|
||||||
|
}
|
||||||
|
.animation-delay(@delay) {
|
||||||
|
-webkit-animation-delay: @delay;
|
||||||
|
-moz-animation-delay: @delay;
|
||||||
|
-ms-animation-delay: @delay;
|
||||||
|
-o-animation-delay: @delay;
|
||||||
|
animation-delay: @delay;
|
||||||
|
}
|
||||||
|
.animation-direction(@direction) {
|
||||||
|
-webkit-animation-direction: @direction;
|
||||||
|
-moz-animation-direction: @direction;
|
||||||
|
-ms-animation-direction: @direction;
|
||||||
|
-o-animation-direction: @direction;
|
||||||
|
}
|
||||||
|
.animation-duration(@duration) {
|
||||||
|
-webkit-animation-duration: @duration;
|
||||||
|
-moz-animation-duration: @duration;
|
||||||
|
-ms-animation-duration: @duration;
|
||||||
|
-o-animation-duration: @duration;
|
||||||
|
}
|
||||||
|
.animation-fill-mode(@mode) {
|
||||||
|
-webkit-animation-fill-mode: @mode;
|
||||||
|
-moz-animation-fill-mode: @mode;
|
||||||
|
-ms-animation-fill-mode: @mode;
|
||||||
|
-o-animation-fill-mode: @mode;
|
||||||
|
animation-fill-mode: @mode;
|
||||||
|
}
|
||||||
|
.animation-iteration-count(@count) {
|
||||||
|
-webkit-animation-iteration-count: @count;
|
||||||
|
-moz-animation-iteration-count: @count;
|
||||||
|
-ms-animation-iteration-count: @count;
|
||||||
|
-o-animation-iteration-count: @count;
|
||||||
|
animation-iteration-count: @count;
|
||||||
|
}
|
||||||
|
.animation-name(@name) {
|
||||||
|
-webkit-animation-name: @name;
|
||||||
|
-moz-animation-name: @name;
|
||||||
|
-ms-animation-name: @name;
|
||||||
|
-o-animation-name: @name;
|
||||||
|
animation-name: @name;
|
||||||
|
}
|
||||||
|
.animation-play-state(@state) {
|
||||||
|
-webkit-animation-play-state: @state;
|
||||||
|
-moz-animation-play-state: @state;
|
||||||
|
-ms-animation-play-state: @state;
|
||||||
|
-o-animation-play-state: @state;
|
||||||
|
animation-play-state: @state;
|
||||||
|
}
|
||||||
|
.animation-timing-function(@function) {
|
||||||
|
-webkit-animation-timing-function: @function;
|
||||||
|
-moz-animation-timing-function: @function;
|
||||||
|
-ms-animation-timing-function: @function;
|
||||||
|
-o-animation-timing-function: @function;
|
||||||
|
animation-timing-function: @function;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Background Size
|
||||||
|
|
||||||
|
.background-size(@args) {
|
||||||
|
-webkit-background-size: @args;
|
||||||
|
background-size: @args;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Border Radius
|
||||||
|
|
||||||
|
.border-radius(@args) {
|
||||||
|
-webkit-border-radius: @args;
|
||||||
|
border-radius: @args;
|
||||||
|
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Box Shadows
|
||||||
|
|
||||||
|
.box-shadow(@args) {
|
||||||
|
-webkit-box-shadow: @args;
|
||||||
|
box-shadow: @args;
|
||||||
|
}
|
||||||
|
.inner-shadow(@args) {
|
||||||
|
.box-shadow(inset @args);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Box Sizing
|
||||||
|
|
||||||
|
.box-sizing(@args) {
|
||||||
|
-webkit-box-sizing: @args;
|
||||||
|
-moz-box-sizing: @args;
|
||||||
|
box-sizing: @args;
|
||||||
|
}
|
||||||
|
.border-box(){
|
||||||
|
.box-sizing(border-box);
|
||||||
|
}
|
||||||
|
.content-box(){
|
||||||
|
.box-sizing(content-box);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Columns
|
||||||
|
|
||||||
|
.columns(@args) {
|
||||||
|
-webkit-columns: @args;
|
||||||
|
-moz-columns: @args;
|
||||||
|
columns: @args;
|
||||||
|
}
|
||||||
|
.column-count(@count) {
|
||||||
|
-webkit-column-count: @count;
|
||||||
|
-moz-column-count: @count;
|
||||||
|
column-count: @count;
|
||||||
|
}
|
||||||
|
.column-gap(@gap) {
|
||||||
|
-webkit-column-gap: @gap;
|
||||||
|
-moz-column-gap: @gap;
|
||||||
|
column-gap: @gap;
|
||||||
|
}
|
||||||
|
.column-width(@width) {
|
||||||
|
-webkit-column-width: @width;
|
||||||
|
-moz-column-width: @width;
|
||||||
|
column-width: @width;
|
||||||
|
}
|
||||||
|
.column-rule(@args) {
|
||||||
|
-webkit-column-rule: @args;
|
||||||
|
-moz-column-rule: @args;
|
||||||
|
column-rule: @args;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Gradients
|
||||||
|
|
||||||
|
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
|
||||||
|
.linear-gradient-top(@default,@start,0%,@stop,100%);
|
||||||
|
}
|
||||||
|
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
|
||||||
|
background-color: @default;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
|
||||||
|
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
|
||||||
|
}
|
||||||
|
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
|
||||||
|
background-color: @default;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
|
||||||
|
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
}
|
||||||
|
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
|
||||||
|
background-color: @default;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
|
||||||
|
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
}
|
||||||
|
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
|
||||||
|
background-color: @default;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
|
||||||
|
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||||
|
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
|
||||||
|
}
|
||||||
|
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
|
||||||
|
background-color: @default;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
|
||||||
|
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
|
||||||
|
}
|
||||||
|
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
|
||||||
|
background-color: @default;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
|
||||||
|
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Opacity
|
||||||
|
|
||||||
|
.opacity(@factor) {
|
||||||
|
@iefactor: @factor*100;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
|
||||||
|
filter: ~"alpha(opacity=(@{iefactor}))";
|
||||||
|
opacity: @factor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Text Shadow
|
||||||
|
|
||||||
|
.text-shadow(@args) {
|
||||||
|
text-shadow: @args;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Transforms
|
||||||
|
|
||||||
|
.transform(@args) {
|
||||||
|
-webkit-transform: @args;
|
||||||
|
-moz-transform: @args;
|
||||||
|
-ms-transform: @args;
|
||||||
|
-o-transform: @args;
|
||||||
|
transform: @args;
|
||||||
|
}
|
||||||
|
.transform-origin(@args) {
|
||||||
|
-webkit-transform-origin: @args;
|
||||||
|
-moz-transform-origin: @args;
|
||||||
|
-ms-transform-origin: @args;
|
||||||
|
-o-transform-origin: @args;
|
||||||
|
transform-origin: @args;
|
||||||
|
}
|
||||||
|
.transform-style(@style) {
|
||||||
|
-webkit-transform-style: @style;
|
||||||
|
-moz-transform-style: @style;
|
||||||
|
-ms-transform-style: @style;
|
||||||
|
-o-transform-style: @style;
|
||||||
|
transform-style: @style;
|
||||||
|
}
|
||||||
|
.rotate(@deg:45deg){
|
||||||
|
.transform(rotate(@deg));
|
||||||
|
}
|
||||||
|
.scale(@factor:.5){
|
||||||
|
.transform(scale(@factor));
|
||||||
|
}
|
||||||
|
.translate(@x,@y){
|
||||||
|
.transform(translate(@x,@y));
|
||||||
|
}
|
||||||
|
.translate3d(@x,@y,@z) {
|
||||||
|
.transform(translate3d(@x,@y,@z));
|
||||||
|
}
|
||||||
|
.translateHardware(@x,@y) {
|
||||||
|
.translate(@x,@y);
|
||||||
|
-webkit-transform: translate3d(@x,@y,0);
|
||||||
|
-moz-transform: translate3d(@x,@y,0);
|
||||||
|
-o-transform: translate3d(@x,@y,0);
|
||||||
|
-ms-transform: translate3d(@x,@y,0);
|
||||||
|
transform: translate3d(@x,@y,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Transitions
|
||||||
|
|
||||||
|
.transition(@args:200ms) {
|
||||||
|
-webkit-transition: @args;
|
||||||
|
-moz-transition: @args;
|
||||||
|
-o-transition: @args;
|
||||||
|
-ms-transition: @args;
|
||||||
|
transition: @args;
|
||||||
|
}
|
||||||
|
.transition-delay(@delay:0) {
|
||||||
|
-webkit-transition-delay: @delay;
|
||||||
|
-moz-transition-delay: @delay;
|
||||||
|
-o-transition-delay: @delay;
|
||||||
|
-ms-transition-delay: @delay;
|
||||||
|
transition-delay: @delay;
|
||||||
|
}
|
||||||
|
.transition-duration(@duration:200ms) {
|
||||||
|
-webkit-transition-duration: @duration;
|
||||||
|
-moz-transition-duration: @duration;
|
||||||
|
-o-transition-duration: @duration;
|
||||||
|
-ms-transition-duration: @duration;
|
||||||
|
transition-duration: @duration;
|
||||||
|
}
|
||||||
|
.transition-property(@property:all) {
|
||||||
|
-webkit-transition-property: @property;
|
||||||
|
-moz-transition-property: @property;
|
||||||
|
-o-transition-property: @property;
|
||||||
|
-ms-transition-property: @property;
|
||||||
|
transition-property: @property;
|
||||||
|
}
|
||||||
|
.transition-timing-function(@function:ease) {
|
||||||
|
-webkit-transition-timing-function: @function;
|
||||||
|
-moz-transition-timing-function: @function;
|
||||||
|
-o-transition-timing-function: @function;
|
||||||
|
-ms-transition-timing-function: @function;
|
||||||
|
transition-timing-function: @function;
|
||||||
|
}
|
||||||
|
|
@ -25,17 +25,17 @@ $(function (){
|
||||||
});
|
});
|
||||||
|
|
||||||
// Material inputs engine (ripple effect)
|
// Material inputs engine (ripple effect)
|
||||||
$(document).on("click", ".checkbox label, .radio label", function() {
|
/*$(document).on("mouseup", ".checkbox label, .radio label", function() {
|
||||||
var $ripple = $(this).find(".ripple"),
|
console.log("click");
|
||||||
timestamp = "t" + new Date().getTime();
|
var $ripple = $(this).find(".ripple");
|
||||||
$ripple.attr("class", "ripple");
|
|
||||||
$ripple.addClass("animate").addClass(timestamp);
|
$ripple.addClass("animate");
|
||||||
setTimeout(function() {
|
var timer = setTimeout(function() {
|
||||||
if ($ripple.hasClass(timestamp)) {
|
console.log("out");
|
||||||
$ripple.removeClass("animate").removeClass(timestamp);
|
clearTimeout(timer);
|
||||||
}
|
$ripple.removeClass("animate");
|
||||||
}, 800);
|
}, 800);
|
||||||
});
|
});*/
|
||||||
|
|
||||||
$(document).on("change", ".form-control", function() {
|
$(document).on("change", ".form-control", function() {
|
||||||
if ($(this).val() !== "") {
|
if ($(this).val() !== "") {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user