Merge pull request #459 from FezVrasta/master

updated ghpages
This commit is contained in:
Fez Vrasta 2015-02-27 09:39:00 +01:00
commit 9ff02834d7
15 changed files with 70 additions and 23 deletions

View File

@ -1,6 +1,6 @@
## Playground
Use this pen to test and deveop new features of Material Design for Bootstrap:
Use this pen to test and develop new features of Material Design for Bootstrap:
http://codepen.io/FezVrasta/pen/ihmea

View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title>Bootstrap Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet">
<link href="dist/css/material-wfont.min.css" rel="stylesheet">
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
@ -2264,7 +2264,7 @@
<br>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
(function(){

View File

@ -14296,6 +14296,25 @@ select[multiple].form-control.focus {
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border: 0;
}
.form-control:focus,
.form-control.focus {

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

19
dist/css/material.css vendored
View File

@ -14272,6 +14272,25 @@ select[multiple].form-control.focus {
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border: 0;
}
.form-control:focus,
.form-control.focus {

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

4
dist/test.html vendored
View File

@ -2,7 +2,7 @@
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">
@ -32,7 +32,7 @@
<!-- Your site ends -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>

View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="dist/css/material-wfont.min.css" rel="stylesheet">
@ -1415,7 +1415,7 @@
</script>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.min.js"></script>

View File

@ -29,6 +29,15 @@ select[multiple].form-control {
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px");
background-color: transparent;
background-color: rgba(0,0,0,0);
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0,0,0,0);
}
fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:disabled, .form-control:disabled, fieldset[disabled] .form-control:focus:disabled, .form-control-wrapper .form-control:focus:disabled, .form-control:focus:disabled, fieldset[disabled] .form-control.focus:disabled, .form-control-wrapper .form-control.focus:disabled, .form-control.focus:disabled {
border: 0;
}
.form-control:focus, .form-control.focus {

View File

@ -7,13 +7,13 @@
font-weight: 400;
cursor: pointer;
// Hide original checkbox
input[type=checkbox]:first-child {
input[type=checkbox]:first-of-type {
opacity: 0;
width: 0;
height:0;
}
// Switch bg on
input[type=checkbox]:first-child:checked + .toggle {
input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
// Handle on
&:after {
@ -22,7 +22,7 @@
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled]:first-child + .toggle {
input[type=checkbox][disabled]:first-of-type + .toggle {
content: "";
display: inline-block;
width: 30px;
@ -48,20 +48,20 @@
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
// Handle disabled
input[type=checkbox][disabled]:first-child + .toggle:after,
input[type=checkbox][disabled]:checked:first-child + .toggle:after{
input[type=checkbox][disabled]:first-of-type + .toggle:after,
input[type=checkbox][disabled]:checked:first-of-type + .toggle:after{
background-color: #BDBDBD;
}
// Ripple on
input[type=checkbox]:first-child:checked ~ .toggle:active:after {
input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
}
// Ripple off and disabled
input[type=checkbox]:first-child ~ .toggle:active:after,
input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
input[type=checkbox]:first-of-type ~ .toggle:active:after,
input[type=checkbox][disabled]:first-of-type ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
input[type=checkbox]:first-child:checked + .toggle:after {
input[type=checkbox]:first-of-type:checked + .toggle:after {
left: 15px;
}
}

View File

@ -111,7 +111,7 @@
})
.on("keyup change", ".form-control", function() {
var $this = $(this);
if($this.val() === "" && $this[0].checkValidity()) {
if ($this.val() === "" && (typeof $this[0].checkValidity != "undefined" && $this[0].checkValidity())) {
$this.addClass("empty");
} else {
$this.removeClass("empty");