mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-01 14:03:45 +03:00
fixed indentation and updated changelog
This commit is contained in:
FezVrasta
parent
13cf2b7d7f
commit
99704278fa
|
|
@ -15,6 +15,7 @@
|
||||||
- Added color variations on toggles
|
- Added color variations on toggles
|
||||||
- Improved shadows to better fit Material Design specs
|
- Improved shadows to better fit Material Design specs
|
||||||
- Improved hover state of buttons
|
- Improved hover state of buttons
|
||||||
|
- Material Checkboxes now are a single inline element `.checkbox-material`, this helps when you need to vertical align them
|
||||||
|
|
||||||
## v 0.2.1
|
## v 0.2.1
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,235 +1,235 @@
|
||||||
.form-horizontal .checkbox {
|
.form-horizontal .checkbox {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
.checkbox {
|
.checkbox {
|
||||||
transform: translateZ(0); // Force 3d rendering
|
transform: translateZ(0); // Force 3d rendering
|
||||||
label {
|
label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide native checkbox
|
||||||
|
input[type=checkbox] {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-material {
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background-color: rgba(0,0,0,.84);
|
||||||
|
height: @checkbox-size;
|
||||||
|
width: @checkbox-size;
|
||||||
|
border-radius: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
margin: 0;
|
||||||
|
transform: scale(2.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide native checkbox
|
.check {
|
||||||
input[type=checkbox] {
|
position: relative;
|
||||||
opacity: 0;
|
display: inline-block;
|
||||||
position: absolute;
|
width: @checkbox-size;
|
||||||
margin: 0;
|
height: @checkbox-size;
|
||||||
z-index: -1;
|
border: 2px solid;
|
||||||
width: 0;
|
border-radius: 2px;
|
||||||
height: 0;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
z-index: 1;
|
||||||
left: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
.check:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
transform: rotate(45deg);
|
||||||
|
display: block;
|
||||||
|
margin-top: -4px;
|
||||||
|
margin-left: 6px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 0,
|
||||||
|
0 0 0 0,
|
||||||
|
0 0 0 0,
|
||||||
|
0 0 0 0,
|
||||||
|
0 0 0 0,
|
||||||
|
0 0 0 0,
|
||||||
|
0 0 0 0 inset;
|
||||||
|
animation: checkbox-off @checkbox-animation-check forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-material {
|
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||||
vertical-align: middle;
|
opacity: 0.2;
|
||||||
position: relative;
|
}
|
||||||
top: 3px;
|
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||||
&:before {
|
box-shadow:
|
||||||
display: block;
|
0 0 0 10px,
|
||||||
position: absolute;
|
10px -10px 0 10px,
|
||||||
content: "";
|
32px 0px 0 20px,
|
||||||
background-color: rgba(0,0,0,.84);
|
0px 32px 0 20px,
|
||||||
height: @checkbox-size;
|
-5px 5px 0 10px,
|
||||||
width: @checkbox-size;
|
20px -12px 0 11px;
|
||||||
border-radius: 100%;
|
animation: checkbox-on @checkbox-animation-check forwards;
|
||||||
z-index: 1;
|
}
|
||||||
opacity: 0;
|
|
||||||
margin: 0;
|
|
||||||
transform: scale(2.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.check {
|
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||||
position: relative;
|
animation: rippleOff @checkbox-animation-ripple;
|
||||||
display: inline-block;
|
}
|
||||||
width: @checkbox-size;
|
input[type=checkbox]:checked + .checkbox-material:before {
|
||||||
height: @checkbox-size;
|
animation: rippleOn @checkbox-animation-ripple;
|
||||||
border: 2px solid;
|
}
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.check:before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
transform: rotate(45deg);
|
|
||||||
display: block;
|
|
||||||
margin-top: -4px;
|
|
||||||
margin-left: 6px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
box-shadow:
|
|
||||||
0 0 0 0,
|
|
||||||
0 0 0 0,
|
|
||||||
0 0 0 0,
|
|
||||||
0 0 0 0,
|
|
||||||
0 0 0 0,
|
|
||||||
0 0 0 0,
|
|
||||||
0 0 0 0 inset;
|
|
||||||
animation: checkbox-off @checkbox-animation-check forwards;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
// Ripple effect on click
|
||||||
opacity: 0.2;
|
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||||
}
|
animation: rippleOff @checkbox-animation-ripple forwards;
|
||||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
}
|
||||||
box-shadow:
|
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||||
0 0 0 10px,
|
animation: rippleOn @checkbox-animation-ripple forwards;
|
||||||
10px -10px 0 10px,
|
}
|
||||||
32px 0px 0 20px,
|
|
||||||
0px 32px 0 20px,
|
|
||||||
-5px 5px 0 10px,
|
|
||||||
20px -12px 0 11px;
|
|
||||||
animation: checkbox-on @checkbox-animation-check forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
// Style for disabled inputs
|
||||||
animation: rippleOff @checkbox-animation-ripple;
|
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||||
}
|
input[type=checkbox][disabled] + .circle {
|
||||||
input[type=checkbox]:checked + .checkbox-material:before {
|
opacity: 0.5;
|
||||||
animation: rippleOn @checkbox-animation-ripple;
|
}
|
||||||
}
|
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||||
|
background-color: @lightbg-text;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
// Ripple effect on click
|
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
|
||||||
animation: rippleOff @checkbox-animation-ripple forwards;
|
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
|
||||||
}
|
|
||||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
|
||||||
animation: rippleOn @checkbox-animation-ripple forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style for disabled inputs
|
|
||||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
|
||||||
input[type=checkbox][disabled] + .circle {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
|
||||||
background-color: @lightbg-text;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
|
||||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
|
|
||||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes checkbox-on {
|
@keyframes checkbox-on {
|
||||||
0% {
|
0% {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 10px,
|
0 0 0 10px,
|
||||||
10px -10px 0 10px,
|
10px -10px 0 10px,
|
||||||
32px 0px 0 20px,
|
32px 0px 0 20px,
|
||||||
0px 32px 0 20px,
|
0px 32px 0 20px,
|
||||||
-5px 5px 0 10px,
|
-5px 5px 0 10px,
|
||||||
15px 2px 0 11px;
|
15px 2px 0 11px;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 10px,
|
0 0 0 10px,
|
||||||
10px -10px 0 10px,
|
10px -10px 0 10px,
|
||||||
32px 0px 0 20px,
|
32px 0px 0 20px,
|
||||||
0px 32px 0 20px,
|
0px 32px 0 20px,
|
||||||
-5px 5px 0 10px,
|
-5px 5px 0 10px,
|
||||||
20px 2px 0 11px;
|
20px 2px 0 11px;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 10px,
|
0 0 0 10px,
|
||||||
10px -10px 0 10px,
|
10px -10px 0 10px,
|
||||||
32px 0px 0 20px,
|
32px 0px 0 20px,
|
||||||
0px 32px 0 20px,
|
0px 32px 0 20px,
|
||||||
-5px 5px 0 10px,
|
-5px 5px 0 10px,
|
||||||
20px -12px 0 11px;
|
20px -12px 0 11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes checkbox-off {
|
@keyframes checkbox-off {
|
||||||
0% {
|
0% {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 10px,
|
0 0 0 10px,
|
||||||
10px -10px 0 10px,
|
10px -10px 0 10px,
|
||||||
32px 0px 0 20px,
|
32px 0px 0 20px,
|
||||||
0px 32px 0 20px,
|
0px 32px 0 20px,
|
||||||
-5px 5px 0 10px,
|
-5px 5px 0 10px,
|
||||||
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,
|
||||||
10px -10px 0 10px,
|
10px -10px 0 10px,
|
||||||
32px 0px 0 20px,
|
32px 0px 0 20px,
|
||||||
0px 32px 0 20px,
|
0px 32px 0 20px,
|
||||||
-5px 5px 0 10px,
|
-5px 5px 0 10px,
|
||||||
20px -12px 0 11px,
|
20px -12px 0 11px,
|
||||||
0 0 0 0 inset;
|
0 0 0 0 inset;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 10px,
|
0 0 0 10px,
|
||||||
10px -10px 0 10px,
|
10px -10px 0 10px,
|
||||||
32px 0px 0 20px,
|
32px 0px 0 20px,
|
||||||
0px 32px 0 20px,
|
0px 32px 0 20px,
|
||||||
-5px 5px 0 10px,
|
-5px 5px 0 10px,
|
||||||
15px 2px 0 11px,
|
15px 2px 0 11px,
|
||||||
0 0 0 0 inset;
|
0 0 0 0 inset;
|
||||||
}
|
}
|
||||||
51% {
|
51% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0px 0px 0 10px inset;
|
0px 0px 0 10px inset;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0 0 0 0,
|
0 0 0 0,
|
||||||
0px 0px 0 0px inset;
|
0px 0px 0 0px inset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes rippleOn {
|
@keyframes rippleOn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes rippleOff {
|
@keyframes rippleOff {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user