mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
new demo page landed and added material-blue to colors
This commit is contained in:
FezVrasta
parent
6fe22da484
commit
7cc760915e
2351
bootstrap-elements.html
Normal file
2351
bootstrap-elements.html
Normal file
File diff suppressed because it is too large
Load Diff
871
demo.html
871
demo.html
|
|
@ -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 & 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">×</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>
|
||||
85
dist/css/material-wfont.css
vendored
85
dist/css/material-wfont.css
vendored
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/material-wfont.css.map
vendored
2
dist/css/material-wfont.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-wfont.min.css
vendored
2
dist/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
85
dist/css/material.css
vendored
85
dist/css/material.css
vendored
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
3209
index.html
3209
index.html
File diff suppressed because it is too large
Load Diff
|
|
@ -35,6 +35,9 @@
|
|||
&-material-indigo@{extra} {
|
||||
@{property}: @indigo;
|
||||
}
|
||||
&-material-blue@{extra} {
|
||||
@{property}: @blue;
|
||||
}
|
||||
&-material-lightblue@{extra} {
|
||||
@{property}: @lightblue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
@purple: #9C27B0;
|
||||
@deeppurple: #673AB7;
|
||||
@indigo: #3F51B5;
|
||||
@blue: #4285f4;
|
||||
@lightblue: #03A9F4;
|
||||
@cyan: #00BCD4;
|
||||
@teal: #009688;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user