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

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;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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");

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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;

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;
} }