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

dist

Browse Source
This commit is contained in:
Kevin Ross 2016-05-09 10:37:53 -05:00
parent 2671c73cea
commit 8667184340
9 changed files with 91 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
dist/css/bootstrap-material-design.css vendored
View File

@ -859,6 +859,7 @@ label.checkbox-inline .checkbox-material {
label.checkbox-inline .checkbox-material:before { label.checkbox-inline .checkbox-material:before {
display: block; display: block;
position: absolute; position: absolute;
top: -5px;
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
@ -909,14 +910,47 @@ label.checkbox-inline .checkbox-material .check:before {
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;
-webkit-animation: checkbox-off;
-o-animation: checkbox-off;
animation: checkbox-off;
} }
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after, .checkbox input[type=checkbox]:focus + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after { label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2; opacity: 0.2;
} }
.checkbox input[type=checkbox]:focus:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:before {
-webkit-animation: checkbox-on 0.3s forwards;
-o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check, .checkbox input[type=checkbox]:checked + .checkbox-material .check,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check { label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check {
color: #009688; color: #009688;
@ -927,33 +961,6 @@ label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:b
color: #009688; color: #009688;
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s forwards;
-o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn;
-o-animation: rippleOn;
animation: rippleOn;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff;
-o-animation: rippleOff;
animation: rippleOff;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards;
} }
fieldset[disabled] .checkbox, fieldset[disabled] .checkbox,
fieldset[disabled] label.checkbox-inline, fieldset[disabled] label.checkbox-inline,
@ -975,24 +982,6 @@ label.checkbox-inline input[type=checkbox][disabled] + .checkbox-material .check
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.is-focused .checkbox .checkbox-material .check:before,
.is-focused label.checkbox-inline .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before,
.is-focused label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.is-focused .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
.is-focused label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
@-webkit-keyframes checkbox-on { @-webkit-keyframes checkbox-on {
0% { 0% {
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -1426,17 +1415,17 @@ label.radio-inline .check:after {
-webkit-transform: scale3d(1.5, 1.5, 1); -webkit-transform: scale3d(1.5, 1.5, 1);
transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1);
} }
.radio input[type=radio]:not(:checked) ~ .check:after, .radio input[type=radio]:focus:not(:checked) ~ .check:after,
label.radio-inline input[type=radio]:not(:checked) ~ .check:after { label.radio-inline input[type=radio]:focus:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms; -webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms; -o-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.radio input[type=radio]:checked ~ .check:after, .radio input[type=radio]:focus:checked ~ .check:after,
label.radio-inline input[type=radio]:checked ~ .check:after { label.radio-inline input[type=radio]:focus:checked ~ .check:after {
-webkit-animation: rippleOn; -webkit-animation: rippleOn 500ms;
-o-animation: rippleOn; -o-animation: rippleOn 500ms;
animation: rippleOn; animation: rippleOn 500ms;
} }
.radio input[type=radio], .radio input[type=radio],
label.radio-inline input[type=radio] { label.radio-inline input[type=radio] {
@ -1492,12 +1481,6 @@ label.radio-inline input[type=radio][disabled] ~ .circle {
.theme-dark label.radio-inline input[type=radio][disabled] ~ .circle { .theme-dark label.radio-inline input[type=radio][disabled] ~ .circle {
border-color: #ffffff; border-color: #ffffff;
} }
.is-focused .radio input[type=radio]:checked ~ .check:after,
.is-focused label.radio-inline input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;

2
dist/css/bootstrap-material-design.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-material-design.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-material-design.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

3
dist/js/material.js vendored
View File

@ -165,9 +165,6 @@
var validate = this.options.validate; var validate = this.options.validate;
$(document) $(document)
.on("change", ".checkbox input[type=checkbox]", function () {
$(this).blur();
})
.on("keydown paste", ".form-control", function (e) { .on("keydown paste", ".form-control", function (e) {
if (_isChar(e)) { if (_isChar(e)) {
$(this).closest(".form-group").removeClass("is-empty"); $(this).closest(".form-group").removeClass("is-empty");

2
dist/js/material.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/material.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

86
sass/_checkboxes.scss
View File

@ -1,8 +1,6 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.form-group {
}
.checkbox label, .checkbox label,
label.checkbox-inline { label.checkbox-inline {
@ -31,12 +29,13 @@ label.checkbox-inline {
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block; display: block;
position: absolute; position: absolute;
top:-5px;
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0,0,0,.84); background-color: rgba(0, 0, 0, .84);
height: $mdb-checkbox-size; height: $mdb-checkbox-size;
width: $mdb-checkbox-size; width: $mdb-checkbox-size;
border-radius: 100%; border-radius: 100%;
@ -73,7 +72,6 @@ label.checkbox-inline {
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;
} }
} }
@ -83,6 +81,35 @@ label.checkbox-inline {
opacity: 0.2; opacity: 0.2;
} }
&:focus{
&:checked{
& + .checkbox-material:before {
animation: rippleOn 500ms;
}
& + .checkbox-material .check:before {
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material .check:after {
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff 500ms;
}
& + .checkbox-material .check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
}
&:checked { &:checked {
// FIXME: once working - combine further to reduce code // FIXME: once working - combine further to reduce code
@ -93,32 +120,17 @@ label.checkbox-inline {
& + .checkbox-material .check:before { & + .checkbox-material .check:before {
color: $mdb-checkbox-checked-color; color: $mdb-checkbox-checked-color;
box-shadow: 0 0 0 10px, box-shadow:
0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 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;
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material:before {
animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
} }
} }
@ -137,30 +149,6 @@ label.checkbox-inline {
} }
} }
// Prevent checkbox animation and ripple effect on page load
.is-focused {
.checkbox,
label.checkbox-inline {
.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:

17
sass/_radios.scss
View File

@ -59,11 +59,12 @@
margin: 0; margin: 0;
transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1);
} }
input[type=radio]:not(:checked) ~ .check:after {
input[type=radio]:focus:not(:checked) ~ .check:after {
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:focus:checked ~ .check:after {
animation: rippleOn; animation: rippleOn 500ms;
} }
input[type=radio] { input[type=radio] {
@ -92,15 +93,6 @@
} }
} }
// Prevent ripple effect on page load
.is-focused {
.radio, label.radio-inline {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -112,7 +104,6 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;