new demo page landed and added material-blue to colors

This commit is contained in:
FezVrasta 2014-12-01 15:43:41 +01:00
parent 6fe22da484
commit 7cc760915e
11 changed files with 3408 additions and 3205 deletions

2351
bootstrap-elements.html Normal file

File diff suppressed because it is too large Load Diff

871
demo.html
View File

@ -1,871 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Material Design for Bootstrap</title>
<!-- Mobile support -->
<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">
<!-- Material Design for Bootstrap -->
<link href="dist/css/material-wfont.min.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet">
<!-- Dropdown.js -->
<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
<!-- Page style -->
<style>
* {
box-sizing: border-box;
}
.header-panel {
background-color: #5264AE;
height: 144px;
position: relative;
z-index: 3;
}
.header-panel div {
position: relative;
height: 100%;
}
.header-panel h1 {
color: #FFF;
font-size: 20px;
font-weight: 400;
position: absolute;
bottom: 10px;
padding-left: 35px;
}
.menu {
overflow: auto;
padding: 0;
}
.menu, .menu * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.menu ul {
padding: 0;
margin: 7px 0;
}
.menu ul li {
list-style: none;
padding: 20px 0 20px 50px;
font-size: 15px;
font-weight: normal;
cursor: pointer;
}
.menu ul li.active {
background-color: #dedede;
position: relative;
}
.pages {
position: absolute;
top: 0;
right: 0;
z-index: 4;
padding: 0;
overflow: auto;
}
.pages > div {
padding: 0 5px;
padding-top: 64px;
}
.pages .header {
color: rgb(82, 101, 162);
font-size: 24px;
font-weight: normal;
margin-top: 5px;
margin-bottom: 60px;
letter-spacing: 1.20000004768372px;
}
.page {
transform: translateY(1080px);
transition: transform 0 linear;
display: none;
opacity: 0;
font-size: 16px;
}
.page.active {
transform: translateY(0px);
transition: all 0.6s ease-out;
display: block;
opacity: 1;
}
#opensource {
color: rgba(0, 0, 0, 0.62);
position: fixed;
margin-top: 50px;
margin-left: 50px;
}
#source-modal h4 {
color: black;
}
/* FIXME: why do I need these overrides? */
.navbar input::-webkit-input-placeholder {
color: rgba(255,255,255,.84) !important
}
.navbar input::-moz-placeholder {
color: rgba(255,255,255,.84) !important
}
.navbar input:-ms-input-placeholder {
color: rgba(255,255,255,.84) !important
}
</style>
</head>
<body>
<div class="header-panel shadow-z-2">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<h1>Paper Elements</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid main">
<div class="row">
<nav class="col-xs-3 menu">
<ul>
<li class="active withripple" data-target="#checkbox">Checkbox</li>
<li class="withripple" data-target="#radio-button">Radio Button</li>
<li class="withripple" data-target="#toggle-button">Toggle Button</li>
<li class="withripple" data-target="#input">Input</li>
<li class="withripple" data-target="#navbar">Navbar</li>
<li class="withripple" data-target="#progress-bar">Progress Bar</li>
<li class="withripple" data-target="#slider">Slider</li>
<li class="withripple">Tabs (TODO)</li>
<li class="withripple" data-target="#button">Button</li>
<li class="withripple">Icon button (TODO)</li>
<li class="withripple" data-target="#floating-action-button">Floating Action Button</li>
<li class="withripple" data-target="#dropdown">Dropdown (Work in progress)</li>
<li class="withripple" data-target="#dropdown-menu">Dropdown Menu</li>
</ul>
</nav>
<div class="pages col-xs-9">
<div class="col-xs-10">
<div class="well page active" id="checkbox">
<h1 class="header">Checkbox</h1>
<!-- Simple checkbox with label -->
<div class="sample1">
<div class="checkbox">
<label>
<input type="checkbox"> Notifications
</label>
</div>
<p class="hint">Notify me about updates to apps or games that I've downloaded</p>
</div>
<!-- Simple checkbox with label, checked -->
<div class="sample1">
<div class="checkbox">
<label>
<input type="checkbox" checked> Auto-updates
</label>
</div>
<p class="hint">Auto-update apps over wifi only</p>
</div>
<!-- Simple checkbox with label -->
<div class="sample1">
<div class="checkbox">
<label>
<input type="checkbox"> Clear search history
</label>
</div>
<p class="hint">Remove all the searches you have ever performed</p>
</div>
<h2>Sound</h2>
<!-- Checkboxes with labels on the left -->
<div class="sample2">
<div class="text">Touch sounds</div>
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox" checked>
</label>
</div>
</div>
<div class="sample2">
<div class="text">Screen lock sound</div>
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox">
</label>
</div>
</div>
<div class="sample2">
<div class="text">Vibrate on touch</div>
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox">
</label>
</div>
</div>
<!-- Custom page style -->
<style>
#checkbox .sample1 label {
font-weight: bold;
}
#checkbox .hint {
padding-left: 45px;
padding-top: 20px;
font-weight: 400;
}
#checkbox .sample1 {
padding-bottom: 20px;
}
#checkbox h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
}
#checkbox .sample2 {
width: 300px;
clear: both;
font-weight: 400;
}
#checkbox .sample2 .text {
padding: 10px 0;
display: inline-block;
}
#checkbox .sample2 .checkbox {
float: right;
}
</style>
</div>
<div class="well page" id="radio-button">
<h1 class="header">Checkbox</h1>
<h2>Keep Wi-Fi on during sleep</h2>
<div class="sample1">
<div class="radio radio-success">
<label>
<input type="radio" name="sample1" value="option1" checked="">
Always
</label>
</div>
<div class="radio radio-success">
<label>
<input type="radio" name="sample1" value="option1">
Only when plugged in
</label>
</div>
<div class="radio radio-success">
<label>
<input type="radio" name="sample1" value="option1">
Never
</label>
</div>
</div>
<h2>Wi-Fi frequency band</h2>
<div class="sample2">
<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 class="radio radio-primary">
<label>
<input type="radio" name="sample2" value="option1">
2.4 GHz only
</label>
</div>
</div>
<style>
#radio-button h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
margin-top: 50px;
}
#radio-button .radio {
margin: 20px 10px;
}
</style>
</div>
<div class="well page" id="toggle-button">
<h1 class="header">Toggle Button</h1>
<div class="togglebutton">
<label>
Wi-Fi
<input type="checkbox" checked>
</label>
</div>
<div class="togglebutton">
<label>
Bluetooth
<input type="checkbox">
</label>
</div>
<style>
#toggle-button h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
margin-top: 50px;
}
#toggle-button .togglebutton label {
margin: 20px 10px;
width: 200px;
}
#toggle-button .togglebutton .toggle {
float: right;
}
</style>
</div>
<div class="well page" id="input">
<h1 class="header">Input</h1>
<div class="inputs">
<h2>Input</h2>
<input type="text" class="form-control" placeholder="label">
<input type="text" class="form-control floating-label" placeholder="floating label">
<h2>Textarea</h2>
<textarea class="form-control" placeholder="textarea label"></textarea>
<textarea class="form-control floating-label" placeholder="textarea floating label"></textarea>
<h2>Validation</h2>
<input type="email" class="form-control floating-label" placeholder="email">
<input type="number" class="form-control floating-label" placeholder="number">
<h2>Hints</h2>
<input type="text" class="form-control floating-label" data-hint="Write here something cool" placeholder="label">
<input type="email" class="form-control floating-label" data-hint="A valid email should contains @" placeholder="label">
<h2>Styling</h2>
<div class="form-group has-success">
<input type="text" class="form-control form-control-success" placeholder="label">
<input type="text" class="form-control form-control-success floating-label" placeholder="floating label">
</div>
<style>
#input h2 {
padding: 14px;
font-size: 16px;
font-weight: 400;
}
#input .inputs {
width: 80%;
}
#input .form-control-wrapper {
margin: 30px 0;
}
</style>
</div>
</div>
<div class="well page" id="navbar">
<h1 class="header">Navbar</h1>
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-warning">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-warning-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-warning-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="well page" id="progress-bar">
<h1 class="header">Progress Bar</h1>
<h2>Basic</h2>
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
<h2>Contextual alternatives</h2>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
<h2>Striped</h2>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
<h2>Animated</h2>
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
<h2>Stacked</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
<style>
#progress-bar h2 {
font-size: 18.7199993133545px;
font-weight: bold;
margin-bottom: 30px;
}
</style>
</div>
<div class="well page" id="slider">
<h1 class="header">Slider</h1>
<div class="sample1">
<h2>Music, video, games &amp; other media</h2>
<div class="slider shor slider-material-orange"></div>
<h2>Notifications</h2>
<div class="slider shor slider-material-orange"></div>
<h2>Alarms</h2>
<div class="slider shor slider-material-orange"></div>
</div>
<div class="sample2">
<div class="slider svert"></div>
<div class="slider svert"></div>
<div class="slider svert"></div>
</div>
<p>Sliders are powered by <a href="http://refreshless.com/nouislider/" target="_blank">noUiSlider</a></p>
<style>
#slider .sample1, #slider .sample2 {
padding: 20px 0;
background-color: #f0f0f0;
margin-bottom: 20px;
}
#slider .sample2 {
height: 150px;
}
#slider .sample2 .slider {
margin: 0 40px;
}
#slider h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
#slider .slider {
margin: 15px;
}
</style>
</div>
<div class="well page" id="button">
<h1 class="header">Button</h1>
<div class="sample1">
<h2>Normal buttons</h2>
<button class="btn btn-default">Button</button>
<button class="btn btn-primary">Colored</button>
<button class="btn btn-default" disabled>Disabled</button>
<button class="btn btn-default btn-link">Noink</button>
</div>
<div class="sample1">
<h2>Flat buttons</h2>
<button class="btn btn-default btn-flat">Button</button>
<button class="btn btn-primary btn-flat">Colored</button>
<button class="btn btn-default btn-flat" disabled>Disabled</button>
<button class="btn btn-default btn-flat btn-link">Noink</button>
</div>
<div class="sample2">
<h2>Raised buttons</h2>
<button class="btn btn-default btn-raised">Button</button>
<button class="btn btn-primary btn-raised">Colored</button>
<button class="btn btn-default btn-raised" disabled>Disabled</button>
<button class="btn btn-default btn-raised btn-link">Noink</button>
</div>
<div class="sample3">
<h2>Custom button content</h2>
<button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button>
<button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
</div>
<style>
#button h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
</style>
</div>
<div class="well page" id="floating-action-button">
<h1 class="header">Floating Action Button</h1>
<h2>Regular</h2>
<button class="btn btn-fab btn-raised btn-material-red"><i class="mdi-navigation-arrow-forward"></i></button>
<button class="btn btn-fab btn-raised btn-primary"><i class="mdi-image-edit"></i></button>
<h2>Mini</h2>
<button class="btn btn-fab btn-fab-mini btn-raised btn-sm btn-success"><i class="mdi-navigation-check"></i></button>
<button class="btn btn-fab btn-fab-mini btn-raised btn-material-lightyellow"><i class="mdi-content-reply"></i></button>
<style>
#floating-action-button .btn {
margin: 20px;
}
#floating-action-button h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
</style>
</div>
<div class="well page" id="dropdown">
<style>
#dropdown h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
#dropdown .dropdown {
font-size: 30px;
padding: 20px;
}
</style>
<h1 class="header">Dropdown</h1>
<h2>Simple dropdown</h2>
<span class="dropdown"><i class="mdi-navigation-menu"></i></span>
</div>
<div class="well page" id="dropdown-menu">
<style>
#dropdown-menu h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
#dropdown-menu .sample {
width: 200px;
}
#dropdown-menu .form-control-wrapper {
margin: 30px 0;
}
</style>
<h1 class="header">Dropdown</h1>
<div class="sample">
<select class="form-control" placeholder="Your favorite pastry">
<option value="Apple fritter">Apple fritter</option>
<option value="Croissant">Croissant</option>
<option value="Donut">Donut</option>
<option value="Financier">Financier</option>
<option value="Jello">Jello</option>
<option value="Madeleine">Madeleine</option>
<option value="Pound cake">Pound cake</option>
<option value="Pretzel">Pretzel</option>
<option value="Sfogliatelle">Sfogliatelle</option>
</select>
<select class="form-control" disabled placeholder="Your favorite pastry">
<option value="disabled">Disabled</option>
</select>
</div>
</div>
</div>
<div class="col-xs-2">
<button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
</div>
</div>
</div>
<div id="source-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Source Code</h4>
</div>
<div class="modal-body">
<pre></pre>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Open source code -->
<script>
window.page = "#checkbox";
$(window).on("resize", function() {
$("html, body").height($(window).height());
$(".main, .menu").height($(window).height() - $(".header-panel").outerHeight());
$(".pages").height($(window).height());
}).trigger("resize");
$(".menu li").click(function() {
$(".menu li").not($(this)).removeClass("active");
$(this).addClass("active");
window.page = $(this).data("target");
var page = $(window.page);
$(".page").not(page).removeClass("active").hide();
page.show();
setTimeout(function() {
page.addClass("active");
}, 50);
});
function cleanSource(html) {
var lines = html.split(/\n/);
lines.shift();
lines.splice(-1, 1);
var indentSize = lines[0].length - lines[0].trim().length,
re = new RegExp(" {" + indentSize + "}");
lines = lines.map(function(line){
if (line.match(re)) {
line = line.substring(indentSize);
}
return line;
});
lines = lines.join("\n");
return lines;
}
$("#opensource").click(function() {
$.get(window.location.href, function(data){
var html = $(data).find(window.page).html();
html = cleanSource(html);
$("#source-modal pre").text(html);
$("#source-modal").modal();
});
});
</script>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.min.js"></script>
<script src="dist/js/ripples.min.js"></script>
<script>
$.material.init();
</script>
<!-- Sliders -->
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script>
$(function() {
$.material.init();
$(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
$(".svert").noUiSlider({
orientation: "vertical",
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
});
</script>
<!-- Dropdown.js -->
<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>
<script>
$("#dropdown-menu select").dropdown();
</script>
</body>
</html>

View File

@ -2519,6 +2519,14 @@ body .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo {
background-color: #3f51b5;
}
body .well-material-blue,
.container .well-material-blue,
.container-fluid .well-material-blue,
body .jumbotron-material-blue,
.container .jumbotron-material-blue,
.container-fluid .jumbotron-material-blue {
background-color: #4285f4;
}
body .well-material-lightblue,
.container .well-material-lightblue,
.container-fluid .well-material-lightblue,
@ -2669,6 +2677,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo:not(.btn-link):not(.btn-flat) {
background-color: #3f51b5;
}
.btn-material-blue:not(.btn-link):not(.btn-flat) {
background-color: #4285f4;
}
.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
background-color: #03a9f4;
}
@ -2739,6 +2750,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo.btn-flat:not(.btn-link) {
color: #3f51b5;
}
.btn-material-blue.btn-flat:not(.btn-link) {
color: #4285f4;
}
.btn-material-lightblue.btn-flat:not(.btn-link) {
color: #03a9f4;
}
@ -2848,6 +2862,10 @@ body .jumbotron-material-lightgrey,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-blue,
.btn.btn-fab:hover-material-blue {
background-color: #4285f4;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
@ -2962,6 +2980,9 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-indigo {
background-color: #3f51b5;
}
.open > .dropdown-toggle.btn-material-blue {
background-color: #4285f4;
}
.open > .dropdown-toggle.btn-material-lightblue {
background-color: #03a9f4;
}
@ -3195,6 +3216,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
background-color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
background-color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
background-color: #03a9f4;
}
@ -3265,6 +3289,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
@ -3335,6 +3362,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
@ -3687,6 +3717,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .check {
background-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .check {
background-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .check {
background-color: #03a9f4;
}
@ -3757,6 +3790,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .circle {
border-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .circle {
border-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .circle {
border-color: #03a9f4;
}
@ -4055,6 +4091,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .material-input:before {
background-color: #3f51b5;
}
.form-group-material-blue .material-input:before {
background-color: #4285f4;
}
.form-group-material-lightblue .material-input:before {
background-color: #03a9f4;
}
@ -4125,6 +4164,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control:focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4195,6 +4237,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control.focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4265,6 +4310,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .control-label {
color: #3f51b5;
}
.form-group-material-blue .control-label {
color: #4285f4;
}
.form-group-material-lightblue .control-label {
color: #03a9f4;
}
@ -4335,6 +4383,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5;
}
.form-group-material-blue input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
}
.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
@ -4718,6 +4769,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.navbar-material-indigo {
background-color: #3f51b5;
}
.navbar-material-blue {
background-color: #4285f4;
}
.navbar-material-lightblue {
background-color: #03a9f4;
}
@ -4853,6 +4907,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-blue li a:hover {
color: #4285f4;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
@ -4931,6 +4988,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.alert-material-indigo {
background-color: #3f51b5;
}
.alert-material-blue {
background-color: #4285f4;
}
.alert-material-lightblue {
background-color: #03a9f4;
}
@ -5020,6 +5080,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.progress .progress-bar-material-indigo {
background-color: #3f51b5;
}
.progress .progress-bar-material-blue {
background-color: #4285f4;
}
.progress .progress-bar-material-lightblue {
background-color: #03a9f4;
}
@ -5180,6 +5243,10 @@ icon-material-deeppurple {
icon-material-indigo {
color: #3f51b5;
}
.mdi-material-blue,
icon-material-blue {
color: #4285f4;
}
.mdi-material-lightblue,
icon-material-lightblue {
color: #03a9f4;
@ -5360,6 +5427,9 @@ icon-material-lightgrey {
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-blue {
background-color: #4285f4;
}
.label-material-lightblue {
background-color: #03a9f4;
}
@ -5435,6 +5505,9 @@ icon-material-lightgrey {
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-blue > .panel-heading {
background-color: #4285f4;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
@ -5662,6 +5735,9 @@ icon-material-lightgrey {
.slider-material-indigo.noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue.noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue.noUi-connect {
background-color: #03a9f4;
}
@ -5732,6 +5808,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue .noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-connect {
background-color: #03a9f4;
}
@ -5802,6 +5881,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
background-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
background-color: #03a9f4;
}
@ -5872,6 +5954,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
border-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
border-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
border-color: #03a9f4;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

85
dist/css/material.css vendored
View File

@ -2512,6 +2512,14 @@ body .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo {
background-color: #3f51b5;
}
body .well-material-blue,
.container .well-material-blue,
.container-fluid .well-material-blue,
body .jumbotron-material-blue,
.container .jumbotron-material-blue,
.container-fluid .jumbotron-material-blue {
background-color: #4285f4;
}
body .well-material-lightblue,
.container .well-material-lightblue,
.container-fluid .well-material-lightblue,
@ -2662,6 +2670,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo:not(.btn-link):not(.btn-flat) {
background-color: #3f51b5;
}
.btn-material-blue:not(.btn-link):not(.btn-flat) {
background-color: #4285f4;
}
.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
background-color: #03a9f4;
}
@ -2732,6 +2743,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo.btn-flat:not(.btn-link) {
color: #3f51b5;
}
.btn-material-blue.btn-flat:not(.btn-link) {
color: #4285f4;
}
.btn-material-lightblue.btn-flat:not(.btn-link) {
color: #03a9f4;
}
@ -2841,6 +2855,10 @@ body .jumbotron-material-lightgrey,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-blue,
.btn.btn-fab:hover-material-blue {
background-color: #4285f4;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
@ -2955,6 +2973,9 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-indigo {
background-color: #3f51b5;
}
.open > .dropdown-toggle.btn-material-blue {
background-color: #4285f4;
}
.open > .dropdown-toggle.btn-material-lightblue {
background-color: #03a9f4;
}
@ -3188,6 +3209,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
background-color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
background-color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
background-color: #03a9f4;
}
@ -3258,6 +3282,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
@ -3328,6 +3355,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
@ -3680,6 +3710,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .check {
background-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .check {
background-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .check {
background-color: #03a9f4;
}
@ -3750,6 +3783,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .circle {
border-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .circle {
border-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .circle {
border-color: #03a9f4;
}
@ -4048,6 +4084,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .material-input:before {
background-color: #3f51b5;
}
.form-group-material-blue .material-input:before {
background-color: #4285f4;
}
.form-group-material-lightblue .material-input:before {
background-color: #03a9f4;
}
@ -4118,6 +4157,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control:focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4188,6 +4230,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control.focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4258,6 +4303,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .control-label {
color: #3f51b5;
}
.form-group-material-blue .control-label {
color: #4285f4;
}
.form-group-material-lightblue .control-label {
color: #03a9f4;
}
@ -4328,6 +4376,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5;
}
.form-group-material-blue input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
}
.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
@ -4711,6 +4762,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.navbar-material-indigo {
background-color: #3f51b5;
}
.navbar-material-blue {
background-color: #4285f4;
}
.navbar-material-lightblue {
background-color: #03a9f4;
}
@ -4846,6 +4900,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-blue li a:hover {
color: #4285f4;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
@ -4924,6 +4981,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.alert-material-indigo {
background-color: #3f51b5;
}
.alert-material-blue {
background-color: #4285f4;
}
.alert-material-lightblue {
background-color: #03a9f4;
}
@ -5013,6 +5073,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.progress .progress-bar-material-indigo {
background-color: #3f51b5;
}
.progress .progress-bar-material-blue {
background-color: #4285f4;
}
.progress .progress-bar-material-lightblue {
background-color: #03a9f4;
}
@ -5173,6 +5236,10 @@ icon-material-deeppurple {
icon-material-indigo {
color: #3f51b5;
}
.mdi-material-blue,
icon-material-blue {
color: #4285f4;
}
.mdi-material-lightblue,
icon-material-lightblue {
color: #03a9f4;
@ -5353,6 +5420,9 @@ icon-material-lightgrey {
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-blue {
background-color: #4285f4;
}
.label-material-lightblue {
background-color: #03a9f4;
}
@ -5428,6 +5498,9 @@ icon-material-lightgrey {
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-blue > .panel-heading {
background-color: #4285f4;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
@ -5655,6 +5728,9 @@ icon-material-lightgrey {
.slider-material-indigo.noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue.noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue.noUi-connect {
background-color: #03a9f4;
}
@ -5725,6 +5801,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue .noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-connect {
background-color: #03a9f4;
}
@ -5795,6 +5874,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
background-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
background-color: #03a9f4;
}
@ -5865,6 +5947,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
border-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
border-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
border-color: #03a9f4;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

3209
index.html

File diff suppressed because it is too large Load Diff

View File

@ -35,6 +35,9 @@
&-material-indigo@{extra} {
@{property}: @indigo;
}
&-material-blue@{extra} {
@{property}: @blue;
}
&-material-lightblue@{extra} {
@{property}: @lightblue;
}

View File

@ -7,6 +7,7 @@
@purple: #9C27B0;
@deeppurple: #673AB7;
@indigo: #3F51B5;
@blue: #4285f4;
@lightblue: #03A9F4;
@cyan: #00BCD4;
@teal: #009688;