This commit is contained in:
Kevin Ross 2015-12-09 11:28:54 -06:00
commit 66bad55ac7
9 changed files with 79 additions and 62 deletions

1
.gitignore vendored
View File

@ -35,3 +35,4 @@ scripts
meteor
bower.json
testcase.html
package.js

View File

@ -85,6 +85,21 @@ a:hover .material-icons,
a:focus .material-icons {
vertical-align: middle;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 0;
}
.form-horizontal .radio {
margin-bottom: 10px;
}
.form-horizontal label {
text-align: right;
}
.form-horizontal label.control-label {
margin: 0;
}
body .container .well.well-sm,
body .container-fluid .well.well-sm {
padding: 10px;
@ -787,7 +802,14 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
.checkbox label {
cursor: pointer;
padding-left: 0;
color: rgba(0, 0, 0, 0.54);
color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .checkbox label {
color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .checkbox label:hover,
.form-group.is-focused .checkbox label:focus {
color: rgba(0,0,0, .54);
}
.checkbox input[type=checkbox] {
opacity: 0;
@ -825,7 +847,7 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(0, 0, 0, 0.54);
border: 2px solid rgba(0,0,0, .54);
overflow: hidden;
z-index: 1;
}
@ -863,11 +885,11 @@ fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:act
opacity: 0.2;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check {
color: #4caf50;
border-color: #4caf50;
color: #009688;
border-color: #009688;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
color: #4caf50;
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;
@ -1205,7 +1227,14 @@ fieldset[disabled] .checkbox input[type=checkbox],
}
.togglebutton label {
cursor: pointer;
color: rgba(0, 0, 0, 0.54);
color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .togglebutton label {
color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .togglebutton label:hover,
.form-group.is-focused .togglebutton label:focus {
color: rgba(0,0,0, .54);
}
.togglebutton label input[type=checkbox] {
opacity: 0;
@ -1271,7 +1300,14 @@ fieldset[disabled] .checkbox input[type=checkbox],
cursor: pointer;
padding-left: 45px;
position: relative;
color: rgba(0, 0, 0, 0.54);
color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .radio label {
color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .radio label:hover,
.form-group.is-focused .radio label:focus {
color: rgba(0,0,0, .54);
}
.radio label span {
display: block;
@ -1283,7 +1319,7 @@ fieldset[disabled] .checkbox input[type=checkbox],
transition-duration: 0.2s;
}
.radio label .circle {
border: 2px solid rgba(0, 0, 0, 0.54);
border: 2px solid rgba(0,0,0, .54);
height: 15px;
width: 15px;
border-radius: 100%;
@ -2005,21 +2041,6 @@ select.form-control[multiple],
height: 100%;
z-index: 100;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 0;
}
.form-horizontal .radio {
margin-bottom: 10px;
}
.form-horizontal label {
text-align: right;
}
.form-horizontal label.control-label {
margin: 0;
}
legend {
border-bottom: 0;
}
@ -3308,21 +3329,15 @@ hr.on-light {
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
display: block;
}
.dropdownjs:after {
.dropdownjs::after {
right: 5px;
top: 3px;
font-size: 25px;
position: absolute;
content: "\e8ac";
font-family: "Material-Design-Icons";
speak: none;
font-family: 'Material Icons';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
content: "\e5c5";
pointer-events: none;
color: #757575;
}

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

23
dist/js/material.js vendored
View File

@ -18,11 +18,11 @@
}
return false;
}
function _addFormGroupFocus(element){
$(element).closest(".form-group").addClass("is-focused");
}
function _removeFormGroupFocus(element){
$(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
}
@ -62,17 +62,32 @@
},
"togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes
$((selector) ? selector : this.options.togglebuttonElements)
var $input = $((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class='toggle'></span>");
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
$formGroup.find('label').hover(function() {
_addFormGroupFocus(this);
}, function() {
_removeFormGroupFocus(this);
});
},
"radio": function(selector) {
// Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements)
var $input = $((selector) ? selector : this.options.radioElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class='circle'></span><span class='check'></span>");
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
$formGroup.find('label').hover(function() {
_addFormGroupFocus(this);
}, function() {
_removeFormGroupFocus(this);
});
},
"input": function(selector) {
$((selector) ? selector : this.options.inputElements)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -226,12 +226,12 @@
<p class="help-block">Auto-update apps over wifi only</p>
</div>
<h2>Horizontal form <small>with column label variations and <code>checkbox-primary</code> color</small></h2>
<h2>Horizontal form with column label variations</h2>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="ch1">Touch sounds</label>
<div class="col-sm-10">
<div class="checkbox checkbox-primary">
<div class="checkbox">
<label>
<input id="ch1" type="checkbox" checked>
</label>
@ -242,7 +242,7 @@
<div class="form-group">
<label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label>
<div class="col-sm-10">
<div class="checkbox checkbox-primary">
<div class="checkbox">
<label>
<input id="ch3" type="checkbox">
</label>
@ -284,15 +284,15 @@
</label>
</div>
<h2><small><code>.radio-success</code> inside a <code>.form-group</code></small></h2>
<h2>Default inside a <small><code>.form-group</code></small></h2>
<div class="form-group">
<div class="radio radio-success">
<div class="radio">
<label>
<input type="radio" name="sample1" value="option1" checked="">
Always
</label>
</div>
<div class="radio radio-success">
<div class="radio">
<label>
<input type="radio" name="sample1" value="option1">
Only when plugged in
@ -300,20 +300,6 @@
</div>
</div>
<h2><small><code>.radio-primary</code> outside a <code>.form-group</code></small></h2>
<div class="radio radio-primary">
<label>
<input type="radio" name="sample2" value="option1" checked="">
Auto
</label>
</div>
<div class="radio radio-primary">
<label>
<input type="radio" name="sample2" value="option1">
5 GHz only
</label>
</div>
</div>
<div class="well page" id="toggle-button">