mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
0.5.5
This commit is contained in:
Kevin Ross
commit
66bad55ac7
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -35,3 +35,4 @@ scripts
|
|||
meteor
|
||||
bower.json
|
||||
testcase.html
|
||||
package.js
|
||||
|
|
|
|||
81
dist/css/bootstrap-material-design.css
vendored
81
dist/css/bootstrap-material-design.css
vendored
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/bootstrap-material-design.css.map
vendored
2
dist/css/bootstrap-material-design.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-material-design.min.css
vendored
2
dist/css/bootstrap-material-design.min.css
vendored
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
23
dist/js/material.js
vendored
|
|
@ -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)
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
File diff suppressed because one or more lines are too long
26
index.html
26
index.html
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user