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

dist

Browse Source
This commit is contained in:
Kevin Ross 2016-04-26 09:39:58 -05:00
parent 455e5aeb4a
commit 48f12888c5
9 changed files with 157 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -817,22 +817,28 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
.btn-group-vertical .btn-group { .btn-group-vertical .btn-group {
margin: 0; margin: 0;
} }
.checkbox label { .checkbox label,
label.checkbox-inline {
cursor: pointer; cursor: pointer;
padding-left: 0; padding-left: 0;
color: rgba(0,0,0, 0.26); color: rgba(0,0,0, 0.26);
} }
.form-group.is-focused .checkbox label { .form-group.is-focused .checkbox label,
.form-group.is-focused label.checkbox-inline {
color: rgba(0,0,0, 0.26); color: rgba(0,0,0, 0.26);
} }
.form-group.is-focused .checkbox label:hover, .form-group.is-focused .checkbox label:hover,
.form-group.is-focused .checkbox label:focus { .form-group.is-focused label.checkbox-inline:hover,
.form-group.is-focused .checkbox label:focus,
.form-group.is-focused label.checkbox-inline:focus {
color: rgba(0,0,0, .54); color: rgba(0,0,0, .54);
} }
fieldset[disabled] .form-group.is-focused .checkbox label { fieldset[disabled] .form-group.is-focused .checkbox label,
fieldset[disabled] .form-group.is-focused label.checkbox-inline {
color: rgba(0,0,0, 0.26); color: rgba(0,0,0, 0.26);
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox],
label.checkbox-inline input[type=checkbox] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
margin: 0; margin: 0;
@ -843,12 +849,14 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
} }
.checkbox .checkbox-material { .checkbox .checkbox-material,
label.checkbox-inline .checkbox-material {
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
} }
.checkbox .checkbox-material:before { .checkbox .checkbox-material:before,
label.checkbox-inline .checkbox-material:before {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -863,7 +871,8 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
-webkit-transform: scale3d(2.3, 2.3, 1); -webkit-transform: scale3d(2.3, 2.3, 1);
transform: scale3d(2.3, 2.3, 1); transform: scale3d(2.3, 2.3, 1);
} }
.checkbox .checkbox-material .check { .checkbox .checkbox-material .check,
label.checkbox-inline .checkbox-material .check {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
@ -873,7 +882,8 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
} }
.checkbox .checkbox-material .check:before { .checkbox .checkbox-material .check:before,
label.checkbox-inline .checkbox-material .check:before {
position: absolute; position: absolute;
content: ""; content: "";
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
@ -903,14 +913,17 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
-o-animation: checkbox-off; -o-animation: checkbox-off;
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 {
opacity: 0.2; opacity: 0.2;
} }
.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 {
color: #009688; color: #009688;
border-color: #009688; border-color: #009688;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before { .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:before {
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;
@ -918,51 +931,64 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
-o-animation: checkbox-on 0.3s forwards; -o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards; animation: checkbox-on 0.3s forwards;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material:before { .checkbox input[type=checkbox]:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn; -webkit-animation: rippleOn;
-o-animation: rippleOn; -o-animation: rippleOn;
animation: rippleOn; animation: rippleOn;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after { .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; -webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards; -o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards; animation: rippleOn 500ms forwards;
} }
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before { .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff; -webkit-animation: rippleOff;
-o-animation: rippleOff; -o-animation: rippleOff;
animation: rippleOff; animation: rippleOff;
} }
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after { .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; -webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards; -o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards; animation: rippleOff 500ms forwards;
} }
fieldset[disabled] .checkbox, fieldset[disabled] .checkbox,
fieldset[disabled] label.checkbox-inline,
fieldset[disabled] .checkbox input[type=checkbox], fieldset[disabled] .checkbox input[type=checkbox],
fieldset[disabled] label.checkbox-inline input[type=checkbox],
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
.checkbox input[type=checkbox][disabled] + .circle { label.checkbox-inline input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
.checkbox input[type=checkbox][disabled] + .circle,
label.checkbox-inline input[type=checkbox][disabled] + .circle {
opacity: 0.5; opacity: 0.5;
} }
.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after { .checkbox input[type=checkbox][disabled] + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: rgba(0,0,0, 0.87); background-color: rgba(0,0,0, 0.87);
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.is-focused .checkbox .checkbox-material .check:before { .is-focused .checkbox .checkbox-material .check:before,
.is-focused label.checkbox-inline .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards; -webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards; -o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards; animation: checkbox-off 0.3s forwards;
} }
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before { .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; -webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms; -o-animation: rippleOn 500ms;
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
.is-focused .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before { .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; -webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms; -o-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
@ -1336,23 +1362,29 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1); -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
} }
.radio label { .radio label,
label.radio-inline {
cursor: pointer; cursor: pointer;
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: rgba(0,0,0, 0.26); color: rgba(0,0,0, 0.26);
} }
.form-group.is-focused .radio label { .form-group.is-focused .radio label,
.form-group.is-focused label.radio-inline {
color: rgba(0,0,0, 0.26); color: rgba(0,0,0, 0.26);
} }
.form-group.is-focused .radio label:hover, .form-group.is-focused .radio label:hover,
.form-group.is-focused .radio label:focus { .form-group.is-focused label.radio-inline:hover,
.form-group.is-focused .radio label:focus,
.form-group.is-focused label.radio-inline:focus {
color: rgba(0,0,0, .54); color: rgba(0,0,0, .54);
} }
fieldset[disabled] .form-group.is-focused .radio label { fieldset[disabled] .form-group.is-focused .radio label,
fieldset[disabled] .form-group.is-focused label.radio-inline {
color: rgba(0,0,0, 0.26); color: rgba(0,0,0, 0.26);
} }
.radio label span { .radio span,
label.radio-inline span {
display: block; display: block;
position: absolute; position: absolute;
left: 10px; left: 10px;
@ -1361,13 +1393,15 @@ fieldset[disabled] .form-group.is-focused .radio label {
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.radio label .circle { .radio .circle,
label.radio-inline .circle {
border: 2px solid rgba(0,0,0, .54); border: 2px solid rgba(0,0,0, .54);
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
} }
.radio label .check { .radio .check,
label.radio-inline .check {
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
@ -1375,7 +1409,8 @@ fieldset[disabled] .form-group.is-focused .radio label {
-webkit-transform: scale3d(0, 0, 0); -webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
.radio label .check:after { .radio .check:after,
label.radio-inline .check:after {
display: block; display: block;
position: absolute; position: absolute;
content: ""; content: "";
@ -1391,57 +1426,74 @@ fieldset[disabled] .form-group.is-focused .radio label {
-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 label input[type=radio]:not(:checked) ~ .check:after { .radio input[type=radio]:not(:checked) ~ .check:after,
label.radio-inline input[type=radio]: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 label input[type=radio]:checked ~ .check:after { .radio input[type=radio]:checked ~ .check:after,
label.radio-inline input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn; -webkit-animation: rippleOn;
-o-animation: rippleOn; -o-animation: rippleOn;
animation: rippleOn; animation: rippleOn;
} }
.radio input[type=radio] { .radio input[type=radio],
label.radio-inline input[type=radio] {
opacity: 0; opacity: 0;
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
} }
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .check,
.radio input[type=radio]:checked ~ .circle { label.radio-inline input[type=radio]:checked ~ .check,
.radio input[type=radio]:checked ~ .circle,
label.radio-inline input[type=radio]:checked ~ .circle {
opacity: 1; opacity: 1;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check,
label.radio-inline input[type=radio]:checked ~ .check {
background-color: #009688; background-color: #009688;
} }
.radio input[type=radio]:checked ~ .circle { .radio input[type=radio]:checked ~ .circle,
label.radio-inline input[type=radio]:checked ~ .circle {
border-color: #009688; border-color: #009688;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check,
label.radio-inline input[type=radio]:checked ~ .check {
-webkit-transform: scale3d(0.55, 0.55, 1); -webkit-transform: scale3d(0.55, 0.55, 1);
transform: scale3d(0.55, 0.55, 1); transform: scale3d(0.55, 0.55, 1);
} }
.radio input[type=radio][disabled] ~ .check, .radio input[type=radio][disabled] ~ .check,
.radio input[type=radio][disabled] ~ .circle { label.radio-inline input[type=radio][disabled] ~ .check,
.radio input[type=radio][disabled] ~ .circle,
label.radio-inline input[type=radio][disabled] ~ .circle {
opacity: 0.26; opacity: 0.26;
} }
.radio input[type=radio][disabled] ~ .check { .radio input[type=radio][disabled] ~ .check,
label.radio-inline input[type=radio][disabled] ~ .check {
background-color: #000000; background-color: #000000;
} }
.radio input[type=radio][disabled] ~ .circle { .radio input[type=radio][disabled] ~ .circle,
label.radio-inline input[type=radio][disabled] ~ .circle {
border-color: #000000; border-color: #000000;
} }
.theme-dark .radio input[type=radio][disabled] ~ .check, .theme-dark .radio input[type=radio][disabled] ~ .check,
.theme-dark .radio input[type=radio][disabled] ~ .circle { .theme-dark label.radio-inline input[type=radio][disabled] ~ .check,
.theme-dark .radio input[type=radio][disabled] ~ .circle,
.theme-dark label.radio-inline input[type=radio][disabled] ~ .circle {
opacity: 0.3; opacity: 0.3;
} }
.theme-dark .radio input[type=radio][disabled] ~ .check { .theme-dark .radio input[type=radio][disabled] ~ .check,
.theme-dark label.radio-inline input[type=radio][disabled] ~ .check {
background-color: #ffffff; background-color: #ffffff;
} }
.theme-dark .radio input[type=radio][disabled] ~ .circle { .theme-dark .radio 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 .radio input[type=radio]:checked ~ .check:after,
.is-focused label.radio-inline input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms; -webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms; -o-animation: rippleOn 500ms;
animation: rippleOn 500ms; animation: rippleOn 500ms;

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

7
dist/js/material.js vendored
View File

@ -74,9 +74,9 @@
".pagination li:not(.active):not(.disabled) a:not(.withoutripple)" ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
].join(","), ].join(","),
"inputElements": "input.form-control, textarea.form-control, select.form-control", "inputElements": "input.form-control, textarea.form-control, select.form-control",
"checkboxElements": ".checkbox > label > input[type=checkbox]", "checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]",
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]", "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
"radioElements": ".radio > label > input[type=radio]" "radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]"
}, },
"checkbox": function (selector) { "checkbox": function (selector) {
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes
@ -155,9 +155,6 @@
$formGroup.addClass("is-empty"); $formGroup.addClass("is-empty");
} }
// Add at the end of the form-group
$formGroup.append("<span class='material-input'></span>");
// Support for file input // Support for file input
if ($formGroup.find("input[type=file]").length > 0) { if ($formGroup.find("input[type=file]").length > 0) {
$formGroup.addClass("is-fileinput"); $formGroup.addClass("is-fileinput");

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

19
sass/_checkboxes.scss
View File

@ -4,14 +4,16 @@
.form-group { .form-group {
} }
.checkbox { .checkbox label,
label { label.checkbox-inline {
cursor: pointer; cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: $mdb-checkbox-label-color; color: $mdb-checkbox-label-color;
@include mdb-label-color-toggle-focus(); @include mdb-label-color-toggle-focus();
} }
.checkbox,
label.checkbox-inline {
// Hide native checkbox // Hide native checkbox
input[type=checkbox] { input[type=checkbox] {
opacity: 0; opacity: 0;
@ -137,7 +139,8 @@
// Prevent checkbox animation and ripple effect on page load // Prevent checkbox animation and ripple effect on page load
.is-focused { .is-focused {
.checkbox { .checkbox,
label.checkbox-inline {
.checkbox-material { .checkbox-material {
.check:before { .check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards; animation: checkbox-off $mdb-checkbox-animation-check forwards;

88
sass/_radios.scss
View File

@ -15,55 +15,55 @@
} }
} }
.radio { .radio label, label.radio-inline {
label {
cursor: pointer; cursor: pointer;
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: $mdb-radio-label-color; color: $mdb-radio-label-color;
@include mdb-label-color-toggle-focus(); @include mdb-label-color-toggle-focus();
}
span { .radio, label.radio-inline {
display: block; span {
position: absolute; display: block;
left: 10px; position: absolute;
top: 2px; left: 10px;
transition-duration: 0.2s; top: 2px;
} transition-duration: 0.2s;
.circle { }
border: 2px solid $mdb-radio-color-off; .circle {
height: 15px; border: 2px solid $mdb-radio-color-off;
width: 15px; height: 15px;
border-radius: 100%; width: 15px;
} border-radius: 100%;
.check { }
height: 15px; .check {
width: 15px; height: 15px;
border-radius: 100%; width: 15px;
background-color: $mdb-radio-color-on; border-radius: 100%;
transform: scale3d(0, 0, 0); background-color: $mdb-radio-color-on;
} transform: scale3d(0, 0, 0);
.check:after { }
display: block; .check:after {
position: absolute; display: block;
content: ""; position: absolute;
background-color: $mdb-text-color-primary; content: "";
left: -18px; background-color: $mdb-text-color-primary;
top: -18px; left: -18px;
height: 50px; top: -18px;
width: 50px; height: 50px;
border-radius: 100%; width: 50px;
z-index: 1; border-radius: 100%;
opacity: 0; z-index: 1;
margin: 0; opacity: 0;
transform: scale3d(1.5, 1.5, 1); margin: 0;
} transform: scale3d(1.5, 1.5, 1);
input[type=radio]:not(:checked) ~ .check:after { }
animation: rippleOff 500ms; input[type=radio]:not(:checked) ~ .check:after {
} animation: rippleOff 500ms;
input[type=radio]:checked ~ .check:after { }
animation: rippleOn; input[type=radio]:checked ~ .check:after {
} animation: rippleOn;
} }
input[type=radio] { input[type=radio] {
@ -94,7 +94,7 @@
// Prevent ripple effect on page load // Prevent ripple effect on page load
.is-focused { .is-focused {
.radio { .radio, label.radio-inline {
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }