This commit is contained in:
Kevin Ross 2016-06-04 14:18:38 -05:00
commit c3c45f4ec8
12 changed files with 156 additions and 87 deletions

3
.gitignore vendored
View File

@ -37,3 +37,6 @@ bower.json
testcase.html
package.js
.versions
ISSUE_TEMPLATE.md
material-design-color-palette.jpg
grunt/**

View File

@ -1,6 +1,5 @@
demo\
fonts\
meteor\
scripts\
test\

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 69 KiB

View File

@ -817,22 +817,28 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
.btn-group-vertical .btn-group {
margin: 0;
}
.checkbox label {
.checkbox label,
label.checkbox-inline {
cursor: pointer;
padding-left: 0;
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);
}
.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);
}
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);
}
.checkbox input[type=checkbox] {
.checkbox input[type=checkbox],
label.checkbox-inline input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
@ -843,14 +849,17 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
left: 0;
pointer-events: none;
}
.checkbox .checkbox-material {
.checkbox .checkbox-material,
label.checkbox-inline .checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
}
.checkbox .checkbox-material:before {
.checkbox .checkbox-material:before,
label.checkbox-inline .checkbox-material:before {
display: block;
position: absolute;
top: -5px;
left: 0;
content: "";
background-color: rgba(0, 0, 0, 0.84);
@ -863,16 +872,19 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
-webkit-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;
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(0,0,0, .54);
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.checkbox .checkbox-material .check:before {
.checkbox .checkbox-material .check:before,
label.checkbox-inline .checkbox-material .check:before {
position: absolute;
content: "";
-webkit-transform: rotate(45deg);
@ -898,53 +910,72 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
-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 + .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;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check {
color: #009688;
border-color: #009688;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
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;
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 {
.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]:checked + .checkbox-material .check:after {
.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]:not(:checked) + .checkbox-material:before {
.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]:not(:checked) + .checkbox-material .check:after {
.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,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check {
color: #009688;
border-color: #009688;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:before {
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;
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;
}
fieldset[disabled] .checkbox,
fieldset[disabled] label.checkbox-inline,
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,
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] + .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;
}
.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);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
@ -1320,23 +1351,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);
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;
padding-left: 45px;
position: relative;
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);
}
.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);
}
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);
}
.radio label span {
.radio span,
label.radio-inline span {
display: block;
position: absolute;
left: 10px;
@ -1345,13 +1382,15 @@ fieldset[disabled] .form-group.is-focused .radio label {
-o-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);
height: 15px;
width: 15px;
border-radius: 100%;
}
.radio label .check {
.radio .check,
label.radio-inline .check {
height: 15px;
width: 15px;
border-radius: 100%;
@ -1359,7 +1398,8 @@ fieldset[disabled] .form-group.is-focused .radio label {
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
}
.radio label .check:after {
.radio .check:after,
label.radio-inline .check:after {
display: block;
position: absolute;
content: "";
@ -1375,54 +1415,70 @@ fieldset[disabled] .form-group.is-focused .radio label {
-webkit-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]:focus:not(:checked) ~ .check:after,
label.radio-inline input[type=radio]:focus:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.radio label input[type=radio]:checked ~ .check:after {
.radio input[type=radio]:focus:checked ~ .check:after,
label.radio-inline input[type=radio]:focus:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.radio input[type=radio] {
.radio input[type=radio],
label.radio-inline input[type=radio] {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
}
.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;
}
.radio input[type=radio]:checked ~ .check {
.radio input[type=radio]:checked ~ .check,
label.radio-inline input[type=radio]:checked ~ .check {
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;
}
.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);
transform: scale3d(0.55, 0.55, 1);
}
.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;
}
.radio input[type=radio][disabled] ~ .check {
.radio input[type=radio][disabled] ~ .check,
label.radio-inline input[type=radio][disabled] ~ .check {
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;
}
.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;
}
.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;
}
.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;
}
@keyframes rippleOn {
@ -1600,6 +1656,7 @@ output {
}
.label {
border-radius: 1px;
padding: .3em .6em;
}
.label,
.label.label-default {
@ -1826,7 +1883,6 @@ label {
label.control-label {
font-size: 12px;
line-height: 1.07142857;
color: #BDBDBD;
font-weight: 400;
margin: 16px 0 0 0;
}
@ -1870,7 +1926,6 @@ label.control-label {
.form-group label.control-label {
font-size: 12px;
line-height: 1.07142857;
color: #BDBDBD;
font-weight: 400;
margin: 16px 0 0 0;
}
@ -1934,7 +1989,6 @@ label.control-label {
.form-group.form-group-sm label.control-label {
font-size: 9px;
line-height: 1.125;
color: #BDBDBD;
font-weight: 400;
margin: 16px 0 0 0;
}
@ -1998,7 +2052,6 @@ label.control-label {
.form-group.form-group-lg label.control-label {
font-size: 14px;
line-height: 0.99999998;
color: #BDBDBD;
font-weight: 400;
margin: 16px 0 0 0;
}

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

35
dist/js/material.js vendored
View File

@ -37,13 +37,32 @@
}
}
function _toggleDisabledState($element, state) {
var $target;
if ($element.hasClass('checkbox-inline') || $element.hasClass('radio-inline')) {
$target = $element;
} else {
$target = $element.closest('.checkbox').length ? $element.closest('.checkbox') : $element.closest('.radio');
}
return $target.toggleClass('disabled', state);
}
function _toggleTypeFocus($input) {
var disabledToggleType = false;
if ($input.is($.material.options.checkboxElements) || $input.is($.material.options.radioElements)) {
disabledToggleType = true;
}
$input.closest('label').hover(function () {
var $i = $(this).find('input');
if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
var isDisabled = $i.prop('disabled'); // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
if (disabledToggleType) {
_toggleDisabledState($(this), isDisabled);
}
if (!isDisabled) {
_addFormGroupFocus($i); // need to find the input so we can check disablement
}
}, function () {
},
function () {
_removeFormGroupFocus($(this).find('input'));
});
}
@ -74,9 +93,9 @@
".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
].join(","),
"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]",
"radioElements": ".radio > label > input[type=radio]"
"radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]"
},
"checkbox": function (selector) {
// Add fake-checkbox to material checkboxes
@ -114,7 +133,7 @@
// Requires form-group standard markup (will add it if necessary)
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
if ($formGroup.length === 0) {
if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) {
$input.wrap("<div class='form-group'></div>");
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
}
@ -155,9 +174,6 @@
$formGroup.addClass("is-empty");
}
// Add at the end of the form-group
$formGroup.append("<span class='material-input'></span>");
// Support for file input
if ($formGroup.find("input[type=file]").length > 0) {
$formGroup.addClass("is-fileinput");
@ -168,9 +184,6 @@
var validate = this.options.validate;
$(document)
.on("change", ".checkbox input[type=checkbox]", function () {
$(this).blur();
})
.on("keydown paste", ".form-control", function (e) {
if (_isChar(e)) {
$(this).closest(".form-group").removeClass("is-empty");

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -280,9 +280,9 @@
/*margin-bottom: 20px;*/
/*}*/
/*#slider .sample2 {*/
/*height: 150px;*/
/*}*/
#slider .sample2 {
height: 150px;
}
/*#slider .sample2 .slider {*/
/*margin: 0 40px;*/

View File

@ -33,7 +33,7 @@
</head>
<body>
<a href="https://github.com/FezVrasta/bootstrap-material-design" style="position: absolute; top: 0; left: 0; border: 0; z-index: 10;"><img src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<a href="https://github.com/FezVrasta/bootstrap-material-design" style="position: absolute; top: 0; right: 0; border: 0; z-index: 10;"><img src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="header-panel shadow-z-2">
<div class="container-fluid">
@ -131,10 +131,7 @@
<p>You can also install and manage Material Bootstrap using Bower</p>
<pre><code>bower install bootstrap-material-design</code></pre>
<h4>Install with Meteor</h4>
<p>You can also install and manage Material Bootstrap using Meteor</p>
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
<br/>
<h3>What's included</h3>
@ -692,7 +689,7 @@
</div>
</div>
<div class="navbar navbar-material-light-blue-300">
<div class="navbar navbar-info">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse">
@ -874,7 +871,11 @@
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-fab btn-material-grey-200 opensource">
<<<<<<< HEAD
<i class="material-icons">open_in_new</i>
=======
<i class="material-icons">grade</i>
>>>>>>> master
</button>
</div>
</div>