mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-22 17:47:11 +03:00
1683 lines
69 KiB
HTML
1683 lines
69 KiB
HTML
<!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.5/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Material Design for Bootstrap -->
|
|
<link href="dist/css/roboto.min.css" rel="stylesheet">
|
|
<link href="dist/css/material-fullpalette.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 -->
|
|
<link href="index.css" rel="stylesheet">
|
|
|
|
<!-- jQuery -->
|
|
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a href="https://github.com/FezVrasta/bootstrap-material-design" style="position: absolute; top: 0; left: 0; border: 0; z-index: 10;"><img src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
|
|
<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="#about">Material Design for Bootstrap</li>
|
|
<li class="withripple" data-target="#getting-started">Getting Started</li>
|
|
<li><a href="bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a>
|
|
</li>
|
|
<li class="withripple" data-target="#material-colors">Material Colors</li>
|
|
<li class="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 (To do)</li>
|
|
<li class="withripple" data-target="#button">Button</li>
|
|
<li class="withripple">Icon button (To do)</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>
|
|
<li class="withripple" data-target="#dialog">Dialog</li>
|
|
<li class="withripple" data-target="#shadow">Shadow</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="pages col-xs-9">
|
|
<div class="col-xs-10">
|
|
<div class="well page active" id="about">
|
|
<h1 class="header">Material Design for Bootstrap</h1>
|
|
|
|
<p>Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new
|
|
<a href="http://www.google.com/design/spec/material-design/" target="_blank">Google Material Design</a> in your favorite front-end framework.
|
|
</p>
|
|
|
|
<p>If you like this project you can support me by donating something on Gratipay, starring this repository, or
|
|
<a href="https://github.com/FezVrasta/bootstrap-material-design/issues">reporting bugs and ideas</a>.</p>
|
|
|
|
<p>Read more about Material Design for Bootstrap at the
|
|
<a href="https://github.com/FezVrasta/bootstrap-material-design">Github page</a>.</p>
|
|
|
|
<br>
|
|
|
|
<p>If you want support the development of this project please consider donate something:</p>
|
|
<a href="https://www.gratipay.com/FezVrasta/" target="_blank" class="btn btn-primary">Donate with Gratipay</a>
|
|
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" id="paypal" method="post" target="_blank" style="display: inline-block;">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
|
|
<div class="btn btn-primary">
|
|
<select name="hosted_button_id" title="I can't accept less than 5 euro due to accounting troubles">
|
|
<option value="DAAK965W2DKYE">€ 5,00</option>
|
|
<option value="28PH77JK5QWFE">€ 10,00</option>
|
|
<option value="6B6TJAJ2R99HS">€ 15,00</option>
|
|
<option value="GJCEKCQFMBVHA">€ 20,00</option>
|
|
<option value="U7QXM95C8RJ9W">€ 25,00</option>
|
|
<option value="55S3VBB3U4NAS">€ 50,00</option>
|
|
</select>
|
|
<input type="submit" value="DONATE WITH PAYPAL" name="submit">
|
|
</div>
|
|
</form>
|
|
<style>
|
|
#paypal .btn {
|
|
padding: 5px 30px 6px 30px;
|
|
}
|
|
|
|
#paypal input {
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
<p>Thanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! You are great guys!</p>
|
|
|
|
<br>
|
|
|
|
<p>Would you like to use this theme for commercial projects? Visit
|
|
<a href="http://www.mywebexpression.com">MyWebExpression</a> and contact me using the form on the bottom of the page. Thanks!
|
|
</p>
|
|
|
|
<br>
|
|
|
|
<div class="cbwrapper">
|
|
<script async
|
|
type="text/javascript"
|
|
src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri"
|
|
id="_carbonads_js">
|
|
</script>
|
|
<div id="fakecb">Seems like you are using AdBlock to hide banners... Carbon ADS are quite nice and don't take much space, you may consider disabling it on this website.<br>This is the only AD on the entire website.<br><br>Thanks!
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.cbwrapper div {
|
|
display: none;
|
|
}
|
|
|
|
.cbwrapper div:nth-child(2) {
|
|
display: block;
|
|
}
|
|
|
|
#carbonads, #fakecb {
|
|
border: 1px solid #d5d5d5;
|
|
font-size: 11px;
|
|
line-height: 15px;
|
|
overflow: hidden;
|
|
width: 340px;
|
|
padding: 20px;
|
|
margin: auto;
|
|
height: 142px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
#carbonads .carbon-img {
|
|
float: left;
|
|
display: block;
|
|
}
|
|
|
|
#carbonads .carbon-text, #carbonads .carbon-poweredby {
|
|
float: left;
|
|
width: 150px;
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
|
|
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#carbonads .carbon-poweredby {
|
|
color: #9D9D9D;
|
|
}
|
|
</style>
|
|
|
|
<br>
|
|
|
|
<p>You can get this theme downloading the source from Bower:</p>
|
|
<pre><code>bower install bootstrap-material-design</code></pre>
|
|
|
|
|
|
</div>
|
|
<div class="well page" id="getting-started">
|
|
<h1 class="header">Getting Started</h1>
|
|
|
|
<h3>Download</h3>
|
|
<hr>
|
|
<h4>Install with NPM - Coming Soon</h4>
|
|
|
|
<p>You can also install and manage Material Bootstrap using NPM</p>
|
|
<pre><code>npm install</code></pre>
|
|
<h4>Install with Bower</h4>
|
|
|
|
<p>You can also install and manage Material Bootstrap using Bower</p>
|
|
<pre><code>bower install bootstrap-material-design</code></pre>
|
|
<h4>Install with Meteor</h4>
|
|
|
|
<p>You can also install and manage Material Bootstrap using Meteor</p>
|
|
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
|
|
<br/>
|
|
|
|
<h3>What's included</h3>
|
|
<hr>
|
|
<p>Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette</p>
|
|
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Required Frameworks</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="list-group">
|
|
<div class="list-group-item">
|
|
<div class="row-action-primary">
|
|
<i class="mdi-action-settings"></i>
|
|
</div>
|
|
<div class="row-content">
|
|
<h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
|
|
|
|
<p class="list-group-item-text">This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to
|
|
<a href="http://getbootstrap.com/getting-started/" alt="Bootstrap Docs">Get Bootstrap</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-separator"></div>
|
|
<div class="list-group-item">
|
|
<div class="row-action-primary">
|
|
<i class="mdi-action-settings"></i>
|
|
</div>
|
|
<div class="row-content">
|
|
<h4 class="list-group-item-heading">jQuery 1.9.1+</h4>
|
|
|
|
<p class="list-group-item-text">All JavaScript plugins require jQuery to be included.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:</p>
|
|
<!-- This code must be aligned this way to render correctly -->
|
|
<pre><code class="language-bash" data-lang="bash">Material/
|
|
├── css/
|
|
│ ├── material.css
|
|
│ ├── material.css.map
|
|
│ ├── material.min.css
|
|
│ ├── material.min.css.map
|
|
│ ├── material-wfont.css
|
|
│ ├── material-wfont.css.map
|
|
│ ├── material-wfont.min.css
|
|
│ ├── material-wfont.min.css.map
|
|
│ ├── ripples
|
|
│ ├── ripples.css.map
|
|
│ ├── ripples.min.css
|
|
│ ├── ripples.min.css.map
|
|
├── js/
|
|
│ ├── material.js
|
|
│ ├── material.min.js
|
|
│ ├── material.min.js.map
|
|
│ ├── ripples.js
|
|
│ ├── ripples.min.js
|
|
│ ├── ripples.min.js.map
|
|
└── fonts/
|
|
├── Material-Design-Icons.eot
|
|
├── Material-Design-Icons.svg
|
|
├── Material-Design-Icons.ttf
|
|
├── Material-Design-Icons.woff
|
|
└── ADD REMAINING GOOGLE FONT FILES HERE
|
|
</code>
|
|
</pre>
|
|
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
|
|
<br/>
|
|
|
|
<p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
|
|
<pre><code>$.material.init()</code></pre>
|
|
</div>
|
|
<div class="well page" 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 {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
#checkbox .sample2 .text {
|
|
display: inline-block;
|
|
}
|
|
|
|
#checkbox .sample2 .checkbox {
|
|
float: right;
|
|
margin: 0;
|
|
}
|
|
</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>
|
|
|
|
<h1 class="header">Toggle Button Variations</h1>
|
|
|
|
<div class="togglebutton togglebutton-material-pink">
|
|
<label>
|
|
Wi-Fi
|
|
<input type="checkbox" checked>
|
|
</label>
|
|
</div>
|
|
<div class="togglebutton togglebutton-material-deep-orange">
|
|
<label>
|
|
Bluetooth
|
|
<input type="checkbox" checked>
|
|
</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>
|
|
<!--
|
|
Inputs
|
|
-->
|
|
<div class="well page" id="input">
|
|
<h1 class="header">Input</h1>
|
|
|
|
<div class="inputs">
|
|
<h2>Input</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="i1" class="not-floating">Static label</label>
|
|
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
|
|
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="i2" class="floating-label">Floating label</label>
|
|
<input type="email" class="form-control" id="i2">
|
|
<span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
|
|
</div>
|
|
|
|
<!-- Exercise backwards compatibility without form-group -->
|
|
<input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
|
|
|
|
<h2>Textarea</h2>
|
|
|
|
<div class="form-group">
|
|
<textarea class="form-control" placeholder="textarea label"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea class="form-control floating-label" placeholder="textarea floating label"></textarea>
|
|
</div>
|
|
|
|
<h2>Validation</h2>
|
|
|
|
<div class="form-group">
|
|
<input type="email" class="form-control floating-label" placeholder="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control floating-label" placeholder="number">
|
|
</div>
|
|
|
|
<h2>Disabled</h2>
|
|
|
|
<div class="form-group">
|
|
<input disabled type="text" class="form-control floating-label" placeholder="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<input disabled type="text" class="form-control floating-label" placeholder="number">
|
|
</div>
|
|
|
|
<h2>Hints</h2>
|
|
|
|
<div class="form-group">
|
|
<input type="text" class="form-control floating-label" data-hint="Write here something cool" placeholder="label">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="email" class="form-control floating-label" data-hint="A valid email should contain an @ symbol" placeholder="label">
|
|
</div>
|
|
|
|
|
|
<h2>Styling</h2>
|
|
|
|
<div class="form-group has-error">
|
|
<input type="text" class="form-control form-control-success" placeholder="label">
|
|
</div>
|
|
<div class="form-group has-error">
|
|
<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-group {
|
|
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="http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html" data-target="#" 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">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="javascript:void(0)">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html" data-target="#" 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="index.html" data-target="#" 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">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="javascript:void(0)">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="index.html" data-target="#" 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-inverse-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-inverse-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="index.html" data-target="#" 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">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="javascript:void(0)">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="index.html" data-target="#" 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-material-light-blue-300">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-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-material-light-blue-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="index.html" data-target="#" 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">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="javascript:void(0)">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="index.html" data-target="#" 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="material-colors">
|
|
<h1 class="header">Material Color Samples</h1>
|
|
|
|
<p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
|
|
|
|
<pre>.btn-material-{{color}}<br>.navbar-material-{{color}}<br>.well-material-{{color}}<br>etc...</pre>
|
|
|
|
<p>
|
|
<b>material.css</b> includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use
|
|
<b>material-fullpalette.css</b></p>
|
|
|
|
<div class="sampleOthers">
|
|
<button class="btn btn-black btn-lg">Black</button>
|
|
<button class="btn btn-white btn-lg">White</button>
|
|
</div>
|
|
<div class="sampleRed">
|
|
<h2>
|
|
<button class="btn btn-material-red btn-lg">Red</button>
|
|
</h2>
|
|
<button class="btn btn-material-red-50">050</button>
|
|
<button class="btn btn-material-red-100">100</button>
|
|
<button class="btn btn-material-red-200">200</button>
|
|
<button class="btn btn-material-red-300">300</button>
|
|
<button class="btn btn-material-red-400">400</button>
|
|
<button class="btn btn-material-red-500">500</button>
|
|
<button class="btn btn-material-red-600">600</button>
|
|
<button class="btn btn-material-red-700">700</button>
|
|
<button class="btn btn-material-red-800">800</button>
|
|
<button class="btn btn-material-red-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-red-A100">A100</button>
|
|
<button class="btn btn-material-red-A200">A200</button>
|
|
<button class="btn btn-material-red-A400">A400</button>
|
|
<button class="btn btn-material-red-A700">A700</button>
|
|
</div>
|
|
<div class="samplePink">
|
|
<h2>
|
|
<button class="btn btn-material-pink btn-lg">Pink</button>
|
|
</h2>
|
|
<button class="btn btn-material-pink-50">050</button>
|
|
<button class="btn btn-material-pink-100">100</button>
|
|
<button class="btn btn-material-pink-200">200</button>
|
|
<button class="btn btn-material-pink-300">300</button>
|
|
<button class="btn btn-material-pink-400">400</button>
|
|
<button class="btn btn-material-pink-500">500</button>
|
|
<button class="btn btn-material-pink-600">600</button>
|
|
<button class="btn btn-material-pink-700">700</button>
|
|
<button class="btn btn-material-pink-800">800</button>
|
|
<button class="btn btn-material-pink-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-pink-A100">A100</button>
|
|
<button class="btn btn-material-pink-A200">A200</button>
|
|
<button class="btn btn-material-pink-A400">A400</button>
|
|
<button class="btn btn-material-pink-A700">A700</button>
|
|
</div>
|
|
<div class="samplePurple">
|
|
<h2>
|
|
<button class="btn btn-material-purple btn-lg">Purple</button>
|
|
</h2>
|
|
<button class="btn btn-material-purple-50">050</button>
|
|
<button class="btn btn-material-purple-100">100</button>
|
|
<button class="btn btn-material-purple-200">200</button>
|
|
<button class="btn btn-material-purple-300">300</button>
|
|
<button class="btn btn-material-purple-400">400</button>
|
|
<button class="btn btn-material-purple-500">500</button>
|
|
<button class="btn btn-material-purple-600">600</button>
|
|
<button class="btn btn-material-purple-700">700</button>
|
|
<button class="btn btn-material-purple-800">800</button>
|
|
<button class="btn btn-material-purple-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-purple-A100">A100</button>
|
|
<button class="btn btn-material-purple-A200">A200</button>
|
|
<button class="btn btn-material-purple-A400">A400</button>
|
|
<button class="btn btn-material-purple-A700">A700</button>
|
|
</div>
|
|
<div class="sampleDeepPurple">
|
|
<h2>
|
|
<button class="btn btn-material-deep-purple btn-lg">Deep Purple</button>
|
|
</h2>
|
|
<button class="btn btn-material-deep-purple-50">050</button>
|
|
<button class="btn btn-material-deep-purple-100">100</button>
|
|
<button class="btn btn-material-deep-purple-200">200</button>
|
|
<button class="btn btn-material-deep-purple-300">300</button>
|
|
<button class="btn btn-material-deep-purple-400">400</button>
|
|
<button class="btn btn-material-deep-purple-500">500</button>
|
|
<button class="btn btn-material-deep-purple-600">600</button>
|
|
<button class="btn btn-material-deep-purple-700">700</button>
|
|
<button class="btn btn-material-deep-purple-800">800</button>
|
|
<button class="btn btn-material-deep-purple-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-deep-purple-A100">A100</button>
|
|
<button class="btn btn-material-deep-purple-A200">A200</button>
|
|
<button class="btn btn-material-deep-purple-A400">A400</button>
|
|
<button class="btn btn-material-deep-purple-A700">A700</button>
|
|
</div>
|
|
<div class="sampleIndigo">
|
|
<h2>
|
|
<button class="btn btn-material-indigo btn-lg">Indigo</button>
|
|
</h2>
|
|
<button class="btn btn-material-indigo-50">050</button>
|
|
<button class="btn btn-material-indigo-100">100</button>
|
|
<button class="btn btn-material-indigo-200">200</button>
|
|
<button class="btn btn-material-indigo-300">300</button>
|
|
<button class="btn btn-material-indigo-400">400</button>
|
|
<button class="btn btn-material-indigo-500">500</button>
|
|
<button class="btn btn-material-indigo-600">600</button>
|
|
<button class="btn btn-material-indigo-700">700</button>
|
|
<button class="btn btn-material-indigo-800">800</button>
|
|
<button class="btn btn-material-indigo-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-indigo-A100">A100</button>
|
|
<button class="btn btn-material-indigo-A200">A200</button>
|
|
<button class="btn btn-material-indigo-A400">A400</button>
|
|
<button class="btn btn-material-indigo-A700">A700</button>
|
|
</div>
|
|
<div class="sampleBlue">
|
|
<h2>
|
|
<button class="btn btn-material-blue btn-lg">Blue</button>
|
|
</h2>
|
|
<button class="btn btn-material-blue-50">050</button>
|
|
<button class="btn btn-material-blue-100">100</button>
|
|
<button class="btn btn-material-blue-200">200</button>
|
|
<button class="btn btn-material-blue-300">300</button>
|
|
<button class="btn btn-material-blue-400">400</button>
|
|
<button class="btn btn-material-blue-500">500</button>
|
|
<button class="btn btn-material-blue-600">600</button>
|
|
<button class="btn btn-material-blue-700">700</button>
|
|
<button class="btn btn-material-blue-800">800</button>
|
|
<button class="btn btn-material-blue-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-blue-A100">A100</button>
|
|
<button class="btn btn-material-blue-A200">A200</button>
|
|
<button class="btn btn-material-blue-A400">A400</button>
|
|
<button class="btn btn-material-blue-A700">A700</button>
|
|
</div>
|
|
<div class="sampleLightBlue">
|
|
<h2>
|
|
<button class="btn btn-material-light-blue btn-lg">Light Blue</button>
|
|
</h2>
|
|
<button class="btn btn-material-light-blue-50">050</button>
|
|
<button class="btn btn-material-light-blue-100">100</button>
|
|
<button class="btn btn-material-light-blue-200">200</button>
|
|
<button class="btn btn-material-light-blue-300">300</button>
|
|
<button class="btn btn-material-light-blue-400">400</button>
|
|
<button class="btn btn-material-light-blue-500">500</button>
|
|
<button class="btn btn-material-light-blue-600">600</button>
|
|
<button class="btn btn-material-light-blue-700">700</button>
|
|
<button class="btn btn-material-light-blue-800">800</button>
|
|
<button class="btn btn-material-light-blue-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-light-blue-A100">A100</button>
|
|
<button class="btn btn-material-light-blue-A200">A200</button>
|
|
<button class="btn btn-material-light-blue-A400">A400</button>
|
|
<button class="btn btn-material-light-blue-A700">A700</button>
|
|
</div>
|
|
<div class="sampleCyan">
|
|
<h2>
|
|
<button class="btn btn-material-cyan btn-lg">Cyan</button>
|
|
</h2>
|
|
<button class="btn btn-material-cyan-50">050</button>
|
|
<button class="btn btn-material-cyan-100">100</button>
|
|
<button class="btn btn-material-cyan-200">200</button>
|
|
<button class="btn btn-material-cyan-300">300</button>
|
|
<button class="btn btn-material-cyan-400">400</button>
|
|
<button class="btn btn-material-cyan-500">500</button>
|
|
<button class="btn btn-material-cyan-600">600</button>
|
|
<button class="btn btn-material-cyan-700">700</button>
|
|
<button class="btn btn-material-cyan-800">800</button>
|
|
<button class="btn btn-material-cyan-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-cyan-A100">A100</button>
|
|
<button class="btn btn-material-cyan-A200">A200</button>
|
|
<button class="btn btn-material-cyan-A400">A400</button>
|
|
<button class="btn btn-material-cyan-A700">A700</button>
|
|
</div>
|
|
<div class="sampleTeal">
|
|
<h2>
|
|
<button class="btn btn-material-teal btn-lg">Teal</button>
|
|
</h2>
|
|
<button class="btn btn-material-teal-50">050</button>
|
|
<button class="btn btn-material-teal-100">100</button>
|
|
<button class="btn btn-material-teal-200">200</button>
|
|
<button class="btn btn-material-teal-300">300</button>
|
|
<button class="btn btn-material-teal-400">400</button>
|
|
<button class="btn btn-material-teal-500">500</button>
|
|
<button class="btn btn-material-teal-600">600</button>
|
|
<button class="btn btn-material-teal-700">700</button>
|
|
<button class="btn btn-material-teal-800">800</button>
|
|
<button class="btn btn-material-teal-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-teal-A100">A100</button>
|
|
<button class="btn btn-material-teal-A200">A200</button>
|
|
<button class="btn btn-material-teal-A400">A400</button>
|
|
<button class="btn btn-material-teal-A700">A700</button>
|
|
</div>
|
|
<div class="sampleGreen">
|
|
<h2>
|
|
<button class="btn btn-material-green btn-lg">Green</button>
|
|
</h2>
|
|
<button class="btn btn-material-green-50">050</button>
|
|
<button class="btn btn-material-green-100">100</button>
|
|
<button class="btn btn-material-green-200">200</button>
|
|
<button class="btn btn-material-green-300">300</button>
|
|
<button class="btn btn-material-green-400">400</button>
|
|
<button class="btn btn-material-green-500">500</button>
|
|
<button class="btn btn-material-green-600">600</button>
|
|
<button class="btn btn-material-green-700">700</button>
|
|
<button class="btn btn-material-green-800">800</button>
|
|
<button class="btn btn-material-green-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-green-A100">A100</button>
|
|
<button class="btn btn-material-green-A200">A200</button>
|
|
<button class="btn btn-material-green-A400">A400</button>
|
|
<button class="btn btn-material-green-A700">A700</button>
|
|
</div>
|
|
<div class="sampleLightGreen">
|
|
<h2>
|
|
<button class="btn btn-material-light-green btn-lg">LightGreen</button>
|
|
</h2>
|
|
<button class="btn btn-material-light-green-50">050</button>
|
|
<button class="btn btn-material-light-green-100">100</button>
|
|
<button class="btn btn-material-light-green-200">200</button>
|
|
<button class="btn btn-material-light-green-300">300</button>
|
|
<button class="btn btn-material-light-green-400">400</button>
|
|
<button class="btn btn-material-light-green-500">500</button>
|
|
<button class="btn btn-material-light-green-600">600</button>
|
|
<button class="btn btn-material-light-green-700">700</button>
|
|
<button class="btn btn-material-light-green-800">800</button>
|
|
<button class="btn btn-material-light-green-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-light-green-A100">A100</button>
|
|
<button class="btn btn-material-light-green-A200">A200</button>
|
|
<button class="btn btn-material-light-green-A400">A400</button>
|
|
<button class="btn btn-material-light-green-A700">A700</button>
|
|
</div>
|
|
<div class="sampleLime">
|
|
<h2>
|
|
<button class="btn btn-material-lime btn-lg">Lime</button>
|
|
</h2>
|
|
<button class="btn btn-material-lime-50">050</button>
|
|
<button class="btn btn-material-lime-100">100</button>
|
|
<button class="btn btn-material-lime-200">200</button>
|
|
<button class="btn btn-material-lime-300">300</button>
|
|
<button class="btn btn-material-lime-400">400</button>
|
|
<button class="btn btn-material-lime-500">500</button>
|
|
<button class="btn btn-material-lime-600">600</button>
|
|
<button class="btn btn-material-lime-700">700</button>
|
|
<button class="btn btn-material-lime-800">800</button>
|
|
<button class="btn btn-material-lime-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-lime-A100">A100</button>
|
|
<button class="btn btn-material-lime-A200">A200</button>
|
|
<button class="btn btn-material-lime-A400">A400</button>
|
|
<button class="btn btn-material-lime-A700">A700</button>
|
|
</div>
|
|
<div class="sampleYellow">
|
|
<h2>
|
|
<button class="btn btn-material-yellow btn-lg">Yellow</button>
|
|
</h2>
|
|
<button class="btn btn-material-yellow-50">050</button>
|
|
<button class="btn btn-material-yellow-100">100</button>
|
|
<button class="btn btn-material-yellow-200">200</button>
|
|
<button class="btn btn-material-yellow-300">300</button>
|
|
<button class="btn btn-material-yellow-400">400</button>
|
|
<button class="btn btn-material-yellow-500">500</button>
|
|
<button class="btn btn-material-yellow-600">600</button>
|
|
<button class="btn btn-material-yellow-700">700</button>
|
|
<button class="btn btn-material-yellow-800">800</button>
|
|
<button class="btn btn-material-yellow-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-yellow-A100">A100</button>
|
|
<button class="btn btn-material-yellow-A200">A200</button>
|
|
<button class="btn btn-material-yellow-A400">A400</button>
|
|
<button class="btn btn-material-yellow-A700">A700</button>
|
|
</div>
|
|
<div class="sampleAmber">
|
|
<h2>
|
|
<button class="btn btn-material-amber btn-lg">Amber</button>
|
|
</h2>
|
|
<button class="btn btn-material-amber-50">050</button>
|
|
<button class="btn btn-material-amber-100">100</button>
|
|
<button class="btn btn-material-amber-200">200</button>
|
|
<button class="btn btn-material-amber-300">300</button>
|
|
<button class="btn btn-material-amber-400">400</button>
|
|
<button class="btn btn-material-amber-500">500</button>
|
|
<button class="btn btn-material-amber-600">600</button>
|
|
<button class="btn btn-material-amber-700">700</button>
|
|
<button class="btn btn-material-amber-800">800</button>
|
|
<button class="btn btn-material-amber-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-amber-A100">A100</button>
|
|
<button class="btn btn-material-amber-A200">A200</button>
|
|
<button class="btn btn-material-amber-A400">A400</button>
|
|
<button class="btn btn-material-amber-A700">A700</button>
|
|
</div>
|
|
<div class="sampleOrange">
|
|
<h2>
|
|
<button class="btn btn-material-orange btn-lg">Orange</button>
|
|
</h2>
|
|
<button class="btn btn-material-orange-50">050</button>
|
|
<button class="btn btn-material-orange-100">100</button>
|
|
<button class="btn btn-material-orange-200">200</button>
|
|
<button class="btn btn-material-orange-300">300</button>
|
|
<button class="btn btn-material-orange-400">400</button>
|
|
<button class="btn btn-material-orange-500">500</button>
|
|
<button class="btn btn-material-orange-600">600</button>
|
|
<button class="btn btn-material-orange-700">700</button>
|
|
<button class="btn btn-material-orange-800">800</button>
|
|
<button class="btn btn-material-orange-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-orange-A100">A100</button>
|
|
<button class="btn btn-material-orange-A200">A200</button>
|
|
<button class="btn btn-material-orange-A400">A400</button>
|
|
<button class="btn btn-material-orange-A700">A700</button>
|
|
</div>
|
|
<div class="sampleDeepOrange">
|
|
<h2>
|
|
<button class="btn btn-material-deep-orange btn-lg">Deep Orange</button>
|
|
</h2>
|
|
<button class="btn btn-material-deep-orange-50">050</button>
|
|
<button class="btn btn-material-deep-orange-100">100</button>
|
|
<button class="btn btn-material-deep-orange-200">200</button>
|
|
<button class="btn btn-material-deep-orange-300">300</button>
|
|
<button class="btn btn-material-deep-orange-400">400</button>
|
|
<button class="btn btn-material-deep-orange-500">500</button>
|
|
<button class="btn btn-material-deep-orange-600">600</button>
|
|
<button class="btn btn-material-deep-orange-700">700</button>
|
|
<button class="btn btn-material-deep-orange-800">800</button>
|
|
<button class="btn btn-material-deep-orange-900">900</button>
|
|
<br>
|
|
<button class="btn btn-material-deep-orange-A100">A100</button>
|
|
<button class="btn btn-material-deep-orange-A200">A200</button>
|
|
<button class="btn btn-material-deep-orange-A400">A400</button>
|
|
<button class="btn btn-material-deep-orange-A700">A700</button>
|
|
<br><br>
|
|
</div>
|
|
<div class="sampleBrown">
|
|
<h2>
|
|
<button class="btn btn-material-brown btn-lg">Brown</button>
|
|
</h2>
|
|
<button class="btn btn-material-brown-50">050</button>
|
|
<button class="btn btn-material-brown-100">100</button>
|
|
<button class="btn btn-material-brown-200">200</button>
|
|
<button class="btn btn-material-brown-300">300</button>
|
|
<button class="btn btn-material-brown-400">400</button>
|
|
<button class="btn btn-material-brown-500">500</button>
|
|
<button class="btn btn-material-brown-600">600</button>
|
|
<button class="btn btn-material-brown-700">700</button>
|
|
<button class="btn btn-material-brown-800">800</button>
|
|
<button class="btn btn-material-brown-900">900</button>
|
|
</div>
|
|
<div class="sampleGrey">
|
|
<h2>
|
|
<button class="btn btn-material-grey btn-lg">Grey</button>
|
|
</h2>
|
|
<button class="btn btn-material-grey-50">050</button>
|
|
<button class="btn btn-material-grey-100">100</button>
|
|
<button class="btn btn-material-grey-200">200</button>
|
|
<button class="btn btn-material-grey-300">300</button>
|
|
<button class="btn btn-material-grey-400">400</button>
|
|
<button class="btn btn-material-grey-500">500</button>
|
|
<button class="btn btn-material-grey-600">600</button>
|
|
<button class="btn btn-material-grey-700">700</button>
|
|
<button class="btn btn-material-grey-800">800</button>
|
|
<button class="btn btn-material-grey-900">900</button>
|
|
</div>
|
|
<div class="sampleBlueGrey">
|
|
<h2>
|
|
<button class="btn btn-material-blue-grey btn-lg">Blue Grey</button>
|
|
</h2>
|
|
<button class="btn btn-material-blue-grey-50">050</button>
|
|
<button class="btn btn-material-blue-grey-100">100</button>
|
|
<button class="btn btn-material-blue-grey-200">200</button>
|
|
<button class="btn btn-material-blue-grey-300">300</button>
|
|
<button class="btn btn-material-blue-grey-400">400</button>
|
|
<button class="btn btn-material-blue-grey-500">500</button>
|
|
<button class="btn btn-material-blue-grey-600">600</button>
|
|
<button class="btn btn-material-blue-grey-700">700</button>
|
|
<button class="btn btn-material-blue-grey-800">800</button>
|
|
<button class="btn btn-material-blue-grey-900">900</button>
|
|
</div>
|
|
</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-group {
|
|
margin: 30px 0;
|
|
}
|
|
</style>
|
|
<h1 class="header">Dropdown</h1>
|
|
|
|
<div class="sample">
|
|
<div class="form-group">
|
|
|
|
<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>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="form-group">
|
|
<select class="form-control" disabled placeholder="Your favorite pastry">
|
|
<option value="disabled">Disabled</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<p>Dropdowns provided by
|
|
<a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
|
|
|
|
</div>
|
|
<div class="well page" id="dialog">
|
|
<h1 class="header">Dialog</h1>
|
|
|
|
<h2>Simple Dialog</h2>
|
|
<button class="btn btn-primary" data-toggle="modal" data-target="#simple-dialog">Open dialog</button>
|
|
|
|
<h2>Dialog with header and footer</h2>
|
|
<button class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button>
|
|
|
|
<div id="simple-dialog" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<p>E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus,
|
|
legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum,
|
|
nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a
|
|
nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te
|
|
quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do
|
|
quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat.
|
|
Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi
|
|
id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi
|
|
mandaremus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="complete-dialog" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Dialog</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit,
|
|
cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum,
|
|
si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In
|
|
probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque.
|
|
Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita
|
|
ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi
|
|
quis dolore veniam proident, consequat sed ingeniis.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
#dialog h2 {
|
|
padding: 14px;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|
|
</div>
|
|
<div class="well page" id="shadow">
|
|
<h1 class="header">Shadow</h1>
|
|
|
|
<h2>Shadows</h2>
|
|
|
|
<div class="sample">z = 0</div>
|
|
<div class="sample shadow-z-1">z = 1</div>
|
|
<div class="sample shadow-z-2">z = 2</div>
|
|
<div class="sample shadow-z-3">z = 3</div>
|
|
<div class="sample shadow-z-4">z = 4</div>
|
|
<div class="sample shadow-z-5">z = 5</div>
|
|
|
|
<h2>Animated</h2>
|
|
|
|
<div id="shadow-sample2" data-tap="0">tap</div>
|
|
<div id="shadow-sample3" data-tap="0">tap</div>
|
|
|
|
<script>
|
|
$(document).on("click", "#shadow-sample2, #shadow-sample3", function () {
|
|
var tap = ($(this).data("tap") * 1) + 1;
|
|
if (tap === 6) {
|
|
tap = 0;
|
|
}
|
|
$(this).data("tap", tap);
|
|
var shadow = "shadow-z-" + tap;
|
|
$(this).attr("class", shadow);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#shadow h2 {
|
|
padding: 14px;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#shadow .sample {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 16px;
|
|
padding: 16px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#shadow-sample2 {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 16px;
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
#shadow-sample3 {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 16px;
|
|
padding: 16px;
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<button class="btn btn-fab btn-material-grey-200" 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>
|
|
|
|
|
|
<!-- Open source code -->
|
|
<script>
|
|
window.page = window.location.hash || "#about";
|
|
|
|
$(document).ready(function () {
|
|
if (window.page != "#about") {
|
|
$(".menu").find("li[data-target=" + window.page + "]").trigger("click");
|
|
}
|
|
});
|
|
|
|
$(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
|
|
if (!$(this).data("target")) return;
|
|
if ($(this).is(".active")) return;
|
|
$(".menu li").not($(this)).removeClass("active");
|
|
$(".page").not(page).removeClass("active").hide();
|
|
window.page = $(this).data("target");
|
|
var page = $(window.page);
|
|
window.location.hash = window.page;
|
|
$(this).addClass("active");
|
|
|
|
|
|
page.show();
|
|
|
|
var totop = setInterval(function () {
|
|
$(".pages").animate({scrollTop: 0}, 0);
|
|
}, 1);
|
|
|
|
setTimeout(function () {
|
|
page.addClass("active");
|
|
setTimeout(function () {
|
|
clearInterval(totop);
|
|
}, 1000);
|
|
}, 100);
|
|
});
|
|
|
|
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.5/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>
|