mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-04 09:57:36 +03:00
format only (so changes are more obvious)
This commit is contained in:
Kevin Ross
parent
01e39ac88c
commit
660d5004cd
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
278
index-sass.html
278
index-sass.html
|
|
@ -24,16 +24,19 @@
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-panel {
|
.header-panel {
|
||||||
background-color: #009587;
|
background-color: #009587;
|
||||||
height: 144px;
|
height: 144px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-panel div {
|
.header-panel div {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-panel h1 {
|
.header-panel h1 {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -47,15 +50,18 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu, .menu * {
|
.menu, .menu * {
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul {
|
.menu ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 7px 0;
|
margin: 7px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul li {
|
.menu ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 20px 0 20px 50px;
|
padding: 20px 0 20px 50px;
|
||||||
|
|
@ -63,10 +69,12 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul li.active {
|
.menu ul li.active {
|
||||||
background-color: #dedede;
|
background-color: #dedede;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul li a {
|
.menu ul li a {
|
||||||
color: rgb(51, 51, 51);
|
color: rgb(51, 51, 51);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -80,6 +88,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pages > div {
|
.pages > div {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
padding-top: 64px;
|
padding-top: 64px;
|
||||||
|
|
@ -146,7 +155,8 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
|
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
|
||||||
<li class="withripple" data-target="#getting-started">Getting Started</li>
|
<li class="withripple" data-target="#getting-started">Getting Started</li>
|
||||||
<li><a href="bootstrap-elements-sass.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
|
<li><a href="bootstrap-elements-sass.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="#material-colors">Material Colors</li>
|
||||||
<li class="withripple" data-target="#checkbox">Checkbox</li>
|
<li class="withripple" data-target="#checkbox">Checkbox</li>
|
||||||
<li class="withripple" data-target="#radio-button">Radio Button</li>
|
<li class="withripple" data-target="#radio-button">Radio Button</li>
|
||||||
|
|
@ -169,15 +179,25 @@
|
||||||
<div class="col-xs-10">
|
<div class="col-xs-10">
|
||||||
<div class="well page active" id="about">
|
<div class="well page active" id="about">
|
||||||
<h1 class="header">Material Design for Bootstrap</h1>
|
<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>Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new
|
||||||
<p>Read more about Material Design for Bootstrap at the <a href="https://github.com/FezVrasta/bootstrap-material-design">Github page</a>.</p>
|
<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>
|
<br>
|
||||||
|
|
||||||
<p>If you want support the development of this project please consider donate something:</p>
|
<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>
|
<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;">
|
<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">
|
<input type="hidden" name="cmd" value="_s-xclick">
|
||||||
|
|
||||||
<div class="btn btn-primary">
|
<div class="btn btn-primary">
|
||||||
<select name="hosted_button_id" title="I can't accept less than 5 euro due to accounting troubles">
|
<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="DAAK965W2DKYE">€ 5,00</option>
|
||||||
|
|
@ -191,30 +211,43 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<style>
|
<style>
|
||||||
#paypal .btn { padding: 5px 30px 6px 30px; }
|
#paypal .btn {
|
||||||
#paypal input { background: transparent; border: 0; }
|
padding: 5px 30px 6px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#paypal input {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
</style>
|
</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>
|
<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>
|
<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>
|
|
||||||
|
<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>
|
<br>
|
||||||
|
|
||||||
<div class="cbwrapper">
|
<div class="cbwrapper">
|
||||||
<script async
|
<script async
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri"
|
src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri"
|
||||||
id="_carbonads_js">
|
id="_carbonads_js">
|
||||||
</script>
|
</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 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>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.cbwrapper div {
|
.cbwrapper div {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cbwrapper div:nth-child(2) {
|
.cbwrapper div:nth-child(2) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads, #fakecb {
|
#carbonads, #fakecb {
|
||||||
border: 1px solid #d5d5d5;
|
border: 1px solid #d5d5d5;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
@ -226,24 +259,29 @@
|
||||||
height: 142px;
|
height: 142px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-img {
|
#carbonads .carbon-img {
|
||||||
float: left;
|
float: left;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-text, #carbonads .carbon-poweredby {
|
#carbonads .carbon-text, #carbonads .carbon-poweredby {
|
||||||
float: left;
|
float: left;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 0 10px 10px 10px;
|
padding: 0 10px 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
|
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-poweredby {
|
#carbonads .carbon-poweredby {
|
||||||
color: #9D9D9D;
|
color: #9D9D9D;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<p>You can get this theme downloading the source from Bower:</p>
|
<p>You can get this theme downloading the source from Bower:</p>
|
||||||
<pre><code>bower install bootstrap-material-design</code></pre>
|
<pre><code>bower install bootstrap-material-design</code></pre>
|
||||||
|
|
||||||
|
|
@ -251,21 +289,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="getting-started">
|
<div class="well page" id="getting-started">
|
||||||
<h1 class="header">Getting Started</h1>
|
<h1 class="header">Getting Started</h1>
|
||||||
|
|
||||||
<h3>Download</h3>
|
<h3>Download</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<h4>Install with NPM - Coming Soon</h4>
|
<h4>Install with NPM - Coming Soon</h4>
|
||||||
|
|
||||||
<p>You can also install and manage Material Bootstrap using NPM</p>
|
<p>You can also install and manage Material Bootstrap using NPM</p>
|
||||||
<pre><code>npm install</code></pre>
|
<pre><code>npm install</code></pre>
|
||||||
<h4>Install with Bower</h4>
|
<h4>Install with Bower</h4>
|
||||||
|
|
||||||
<p>You can also install and manage Material Bootstrap using Bower</p>
|
<p>You can also install and manage Material Bootstrap using Bower</p>
|
||||||
<pre><code>bower install bootstrap-material-design</code></pre>
|
<pre><code>bower install bootstrap-material-design</code></pre>
|
||||||
<h4>Install with Meteor</h4>
|
<h4>Install with Meteor</h4>
|
||||||
|
|
||||||
<p>You can also install and manage Material Bootstrap using Meteor</p>
|
<p>You can also install and manage Material Bootstrap using Meteor</p>
|
||||||
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
|
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<h3>What's included</h3>
|
<h3>What's included</h3>
|
||||||
<hr>
|
<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>
|
<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 panel-info">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title">Required Frameworks</h3>
|
<h3 class="panel-title">Required Frameworks</h3>
|
||||||
|
|
@ -278,7 +322,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row-content">
|
<div class="row-content">
|
||||||
<h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
|
<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>
|
|
||||||
|
<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>
|
</div>
|
||||||
<div class="list-group-separator"></div>
|
<div class="list-group-separator"></div>
|
||||||
|
|
@ -288,6 +334,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row-content">
|
<div class="row-content">
|
||||||
<h4 class="list-group-item-heading">jQuery 1.9.1+</h4>
|
<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>
|
<p class="list-group-item-text">All JavaScript plugins require jQuery to be included.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -327,6 +374,7 @@
|
||||||
</pre>
|
</pre>
|
||||||
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
|
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
|
<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>
|
<pre><code>$.material.init()</code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -396,11 +444,13 @@
|
||||||
#checkbox .sample1 label {
|
#checkbox .sample1 label {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .hint {
|
#checkbox .hint {
|
||||||
padding-left: 45px;
|
padding-left: 45px;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .sample1 {
|
#checkbox .sample1 {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -420,9 +470,11 @@
|
||||||
#checkbox .sample2 {
|
#checkbox .sample2 {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .sample2 .text {
|
#checkbox .sample2 .text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .sample2 .checkbox {
|
#checkbox .sample2 .checkbox {
|
||||||
float: right;
|
float: right;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -431,7 +483,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="radio-button">
|
<div class="well page" id="radio-button">
|
||||||
<h1 class="header">Checkbox</h1>
|
<h1 class="header">Checkbox</h1>
|
||||||
|
|
||||||
<h2>Keep Wi-Fi on during sleep</h2>
|
<h2>Keep Wi-Fi on during sleep</h2>
|
||||||
|
|
||||||
<div class="sample1">
|
<div class="sample1">
|
||||||
<div class="radio radio-success">
|
<div class="radio radio-success">
|
||||||
<label>
|
<label>
|
||||||
|
|
@ -455,6 +509,7 @@
|
||||||
|
|
||||||
|
|
||||||
<h2>Wi-Fi frequency band</h2>
|
<h2>Wi-Fi frequency band</h2>
|
||||||
|
|
||||||
<div class="sample2">
|
<div class="sample2">
|
||||||
<div class="radio radio-primary">
|
<div class="radio radio-primary">
|
||||||
<label>
|
<label>
|
||||||
|
|
@ -483,6 +538,7 @@
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#radio-button .radio {
|
#radio-button .radio {
|
||||||
margin: 20px 10px;
|
margin: 20px 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -491,6 +547,7 @@
|
||||||
<div class="well page" id="toggle-button">
|
<div class="well page" id="toggle-button">
|
||||||
|
|
||||||
<h1 class="header">Toggle Button</h1>
|
<h1 class="header">Toggle Button</h1>
|
||||||
|
|
||||||
<div class="togglebutton">
|
<div class="togglebutton">
|
||||||
<label>
|
<label>
|
||||||
Wi-Fi
|
Wi-Fi
|
||||||
|
|
@ -505,6 +562,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="header">Toggle Button Variations</h1>
|
<h1 class="header">Toggle Button Variations</h1>
|
||||||
|
|
||||||
<div class="togglebutton togglebutton-material-pink">
|
<div class="togglebutton togglebutton-material-pink">
|
||||||
<label>
|
<label>
|
||||||
Wi-Fi
|
Wi-Fi
|
||||||
|
|
@ -525,10 +583,12 @@
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toggle-button .togglebutton label {
|
#toggle-button .togglebutton label {
|
||||||
margin: 20px 10px;
|
margin: 20px 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toggle-button .togglebutton .toggle {
|
#toggle-button .togglebutton .toggle {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
@ -536,6 +596,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="input">
|
<div class="well page" id="input">
|
||||||
<h1 class="header">Input</h1>
|
<h1 class="header">Input</h1>
|
||||||
|
|
||||||
<div class="inputs">
|
<div class="inputs">
|
||||||
<h2>Input</h2>
|
<h2>Input</h2>
|
||||||
<input type="text" class="form-control" placeholder="label">
|
<input type="text" class="form-control" placeholder="label">
|
||||||
|
|
@ -559,6 +620,7 @@
|
||||||
|
|
||||||
|
|
||||||
<h2>Styling</h2>
|
<h2>Styling</h2>
|
||||||
|
|
||||||
<div class="form-group has-error">
|
<div class="form-group has-error">
|
||||||
<input type="text" class="form-control form-control-success" placeholder="label">
|
<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">
|
<input type="text" class="form-control form-control-success floating-label" placeholder="floating label">
|
||||||
|
|
@ -570,9 +632,11 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#input .inputs {
|
#input .inputs {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#input .form-control-wrapper {
|
#input .form-control-wrapper {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -597,7 +661,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<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>
|
<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">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -615,7 +680,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<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>
|
<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">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -642,7 +708,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -660,7 +727,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -687,7 +755,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -705,7 +774,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -732,7 +802,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -750,7 +821,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -766,12 +838,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="progress-bar">
|
<div class="well page" id="progress-bar">
|
||||||
<h1 class="header">Progress Bar</h1>
|
<h1 class="header">Progress Bar</h1>
|
||||||
|
|
||||||
<h2>Basic</h2>
|
<h2>Basic</h2>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar" style="width: 60%;"></div>
|
<div class="progress-bar" style="width: 60%;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Contextual alternatives</h2>
|
<h2>Contextual alternatives</h2>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -786,6 +861,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Striped</h2>
|
<h2>Striped</h2>
|
||||||
|
|
||||||
<div class="progress progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -800,11 +876,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Animated</h2>
|
<h2>Animated</h2>
|
||||||
|
|
||||||
<div class="progress progress-striped active">
|
<div class="progress progress-striped active">
|
||||||
<div class="progress-bar" style="width: 45%"></div>
|
<div class="progress-bar" style="width: 45%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Stacked</h2>
|
<h2>Stacked</h2>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
<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-warning" style="width: 20%"></div>
|
||||||
|
|
@ -822,14 +900,18 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="slider">
|
<div class="well page" id="slider">
|
||||||
<h1 class="header">Slider</h1>
|
<h1 class="header">Slider</h1>
|
||||||
|
|
||||||
<div class="sample1">
|
<div class="sample1">
|
||||||
<h2>Music, video, games & other media</h2>
|
<h2>Music, video, games & other media</h2>
|
||||||
|
|
||||||
<div class="slider shor slider-material-orange"></div>
|
<div class="slider shor slider-material-orange"></div>
|
||||||
|
|
||||||
<h2>Notifications</h2>
|
<h2>Notifications</h2>
|
||||||
|
|
||||||
<div class="slider shor slider-material-orange"></div>
|
<div class="slider shor slider-material-orange"></div>
|
||||||
|
|
||||||
<h2>Alarms</h2>
|
<h2>Alarms</h2>
|
||||||
|
|
||||||
<div class="slider shor slider-material-orange"></div>
|
<div class="slider shor slider-material-orange"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -847,18 +929,22 @@
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider .sample2 {
|
#slider .sample2 {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider .sample2 .slider {
|
#slider .sample2 .slider {
|
||||||
margin: 0 40px;
|
margin: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider h2 {
|
#slider h2 {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider .slider {
|
#slider .slider {
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
@ -867,17 +953,23 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="material-colors">
|
<div class="well page" id="material-colors">
|
||||||
<h1 class="header">Material Color Samples</h1>
|
<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>
|
<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>
|
<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>
|
<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">
|
<div class="sampleOthers">
|
||||||
<button class="btn btn-black btn-lg">Black</button>
|
<button class="btn btn-black btn-lg">Black</button>
|
||||||
<button class="btn btn-white btn-lg">White</button>
|
<button class="btn btn-white btn-lg">White</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleRed">
|
<div class="sampleRed">
|
||||||
<h2><button class="btn btn-material-red btn-lg">Red</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-red-100">100</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-200">200</button>
|
||||||
|
|
@ -887,14 +979,17 @@
|
||||||
<button class="btn btn-material-red-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-red-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-red-A100">A100</button>
|
<button class="btn btn-material-red-A100">A100</button>
|
||||||
<button class="btn btn-material-red-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-red-A700">A700</button>
|
<button class="btn btn-material-red-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="samplePink">
|
<div class="samplePink">
|
||||||
<h2><button class="btn btn-material-pink btn-lg">Pink</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-pink-100">100</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-200">200</button>
|
||||||
|
|
@ -904,14 +999,17 @@
|
||||||
<button class="btn btn-material-pink-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-pink-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-pink-A100">A100</button>
|
<button class="btn btn-material-pink-A100">A100</button>
|
||||||
<button class="btn btn-material-pink-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-pink-A700">A700</button>
|
<button class="btn btn-material-pink-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="samplePurple">
|
<div class="samplePurple">
|
||||||
<h2><button class="btn btn-material-purple btn-lg">Purple</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-purple-100">100</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-200">200</button>
|
||||||
|
|
@ -921,14 +1019,17 @@
|
||||||
<button class="btn btn-material-purple-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-purple-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-purple-A100">A100</button>
|
<button class="btn btn-material-purple-A100">A100</button>
|
||||||
<button class="btn btn-material-purple-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-purple-A700">A700</button>
|
<button class="btn btn-material-purple-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleDeepPurple">
|
<div class="sampleDeepPurple">
|
||||||
<h2><button class="btn btn-material-deep-purple btn-lg">Deep Purple</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-deep-purple-100">100</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-200">200</button>
|
||||||
|
|
@ -938,14 +1039,17 @@
|
||||||
<button class="btn btn-material-deep-purple-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-deep-purple-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-deep-purple-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-deep-purple-A400">A400</button>
|
<button class="btn btn-material-deep-purple-A400">A400</button>
|
||||||
<button class="btn btn-material-deep-purple-A700">A700</button>
|
<button class="btn btn-material-deep-purple-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleIndigo">
|
<div class="sampleIndigo">
|
||||||
<h2><button class="btn btn-material-indigo btn-lg">Indigo</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-indigo-100">100</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-200">200</button>
|
||||||
|
|
@ -955,14 +1059,17 @@
|
||||||
<button class="btn btn-material-indigo-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-indigo-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-indigo-A100">A100</button>
|
<button class="btn btn-material-indigo-A100">A100</button>
|
||||||
<button class="btn btn-material-indigo-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-indigo-A700">A700</button>
|
<button class="btn btn-material-indigo-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleBlue">
|
<div class="sampleBlue">
|
||||||
<h2><button class="btn btn-material-blue btn-lg">Blue</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-blue-100">100</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-200">200</button>
|
||||||
|
|
@ -972,14 +1079,17 @@
|
||||||
<button class="btn btn-material-blue-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-blue-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-blue-A100">A100</button>
|
<button class="btn btn-material-blue-A100">A100</button>
|
||||||
<button class="btn btn-material-blue-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-blue-A700">A700</button>
|
<button class="btn btn-material-blue-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleLightBlue">
|
<div class="sampleLightBlue">
|
||||||
<h2><button class="btn btn-material-light-blue btn-lg">Light Blue</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-light-blue-100">100</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-200">200</button>
|
||||||
|
|
@ -989,14 +1099,17 @@
|
||||||
<button class="btn btn-material-light-blue-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-light-blue-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-light-blue-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-light-blue-A400">A400</button>
|
<button class="btn btn-material-light-blue-A400">A400</button>
|
||||||
<button class="btn btn-material-light-blue-A700">A700</button>
|
<button class="btn btn-material-light-blue-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleCyan">
|
<div class="sampleCyan">
|
||||||
<h2><button class="btn btn-material-cyan btn-lg">Cyan</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-cyan-100">100</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-200">200</button>
|
||||||
|
|
@ -1006,14 +1119,17 @@
|
||||||
<button class="btn btn-material-cyan-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-cyan-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-cyan-A100">A100</button>
|
<button class="btn btn-material-cyan-A100">A100</button>
|
||||||
<button class="btn btn-material-cyan-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-cyan-A700">A700</button>
|
<button class="btn btn-material-cyan-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleTeal">
|
<div class="sampleTeal">
|
||||||
<h2><button class="btn btn-material-teal btn-lg">Teal</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-teal-100">100</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-200">200</button>
|
||||||
|
|
@ -1023,14 +1139,17 @@
|
||||||
<button class="btn btn-material-teal-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-teal-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-teal-A100">A100</button>
|
<button class="btn btn-material-teal-A100">A100</button>
|
||||||
<button class="btn btn-material-teal-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-teal-A700">A700</button>
|
<button class="btn btn-material-teal-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleGreen">
|
<div class="sampleGreen">
|
||||||
<h2><button class="btn btn-material-green btn-lg">Green</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-green-100">100</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-200">200</button>
|
||||||
|
|
@ -1040,14 +1159,17 @@
|
||||||
<button class="btn btn-material-green-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-green-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-green-A100">A100</button>
|
<button class="btn btn-material-green-A100">A100</button>
|
||||||
<button class="btn btn-material-green-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-green-A700">A700</button>
|
<button class="btn btn-material-green-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleLightGreen">
|
<div class="sampleLightGreen">
|
||||||
<h2><button class="btn btn-material-light-green btn-lg">LightGreen</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-light-green-100">100</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-200">200</button>
|
||||||
|
|
@ -1057,14 +1179,17 @@
|
||||||
<button class="btn btn-material-light-green-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-light-green-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-light-green-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-light-green-A400">A400</button>
|
<button class="btn btn-material-light-green-A400">A400</button>
|
||||||
<button class="btn btn-material-light-green-A700">A700</button>
|
<button class="btn btn-material-light-green-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleLime">
|
<div class="sampleLime">
|
||||||
<h2><button class="btn btn-material-lime btn-lg">Lime</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-lime-100">100</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-200">200</button>
|
||||||
|
|
@ -1074,14 +1199,17 @@
|
||||||
<button class="btn btn-material-lime-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-lime-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-lime-A100">A100</button>
|
<button class="btn btn-material-lime-A100">A100</button>
|
||||||
<button class="btn btn-material-lime-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-lime-A700">A700</button>
|
<button class="btn btn-material-lime-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleYellow">
|
<div class="sampleYellow">
|
||||||
<h2><button class="btn btn-material-yellow btn-lg">Yellow</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-yellow-100">100</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-200">200</button>
|
||||||
|
|
@ -1091,14 +1219,17 @@
|
||||||
<button class="btn btn-material-yellow-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-yellow-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-yellow-A100">A100</button>
|
<button class="btn btn-material-yellow-A100">A100</button>
|
||||||
<button class="btn btn-material-yellow-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-yellow-A700">A700</button>
|
<button class="btn btn-material-yellow-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleAmber">
|
<div class="sampleAmber">
|
||||||
<h2><button class="btn btn-material-amber btn-lg">Amber</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-amber-100">100</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-200">200</button>
|
||||||
|
|
@ -1108,14 +1239,17 @@
|
||||||
<button class="btn btn-material-amber-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-amber-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-amber-A100">A100</button>
|
<button class="btn btn-material-amber-A100">A100</button>
|
||||||
<button class="btn btn-material-amber-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-amber-A700">A700</button>
|
<button class="btn btn-material-amber-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleOrange">
|
<div class="sampleOrange">
|
||||||
<h2><button class="btn btn-material-orange btn-lg">Orange</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-orange-100">100</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-200">200</button>
|
||||||
|
|
@ -1125,14 +1259,17 @@
|
||||||
<button class="btn btn-material-orange-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-orange-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-orange-A100">A100</button>
|
<button class="btn btn-material-orange-A100">A100</button>
|
||||||
<button class="btn btn-material-orange-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-orange-A700">A700</button>
|
<button class="btn btn-material-orange-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleDeepOrange">
|
<div class="sampleDeepOrange">
|
||||||
<h2><button class="btn btn-material-deep-orange btn-lg">Deep Orange</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-deep-orange-100">100</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-200">200</button>
|
||||||
|
|
@ -1142,14 +1279,18 @@
|
||||||
<button class="btn btn-material-deep-orange-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-deep-orange-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-deep-orange-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-deep-orange-A400">A400</button>
|
<button class="btn btn-material-deep-orange-A400">A400</button>
|
||||||
<button class="btn btn-material-deep-orange-A700">A700</button><br><br>
|
<button class="btn btn-material-deep-orange-A700">A700</button>
|
||||||
|
<br><br>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleBrown">
|
<div class="sampleBrown">
|
||||||
<h2><button class="btn btn-material-brown btn-lg">Brown</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-brown-100">100</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-200">200</button>
|
||||||
|
|
@ -1162,7 +1303,9 @@
|
||||||
<button class="btn btn-material-brown-900">900</button>
|
<button class="btn btn-material-brown-900">900</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleGrey">
|
<div class="sampleGrey">
|
||||||
<h2><button class="btn btn-material-grey btn-lg">Grey</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-grey-100">100</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-200">200</button>
|
||||||
|
|
@ -1175,7 +1318,9 @@
|
||||||
<button class="btn btn-material-grey-900">900</button>
|
<button class="btn btn-material-grey-900">900</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleBlueGrey">
|
<div class="sampleBlueGrey">
|
||||||
<h2><button class="btn btn-material-blue-grey btn-lg">Blue Grey</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-blue-grey-100">100</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-200">200</button>
|
||||||
|
|
@ -1190,6 +1335,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="button">
|
<div class="well page" id="button">
|
||||||
<h1 class="header">Button</h1>
|
<h1 class="header">Button</h1>
|
||||||
|
|
||||||
<div class="sample1">
|
<div class="sample1">
|
||||||
<h2>Normal buttons</h2>
|
<h2>Normal buttons</h2>
|
||||||
<button class="btn btn-default">Button</button>
|
<button class="btn btn-default">Button</button>
|
||||||
|
|
@ -1235,13 +1381,16 @@
|
||||||
<button class="btn btn-fab btn-raised btn-primary"><i class="mdi-image-edit"></i></button>
|
<button class="btn btn-fab btn-raised btn-primary"><i class="mdi-image-edit"></i></button>
|
||||||
|
|
||||||
<h2>Mini</h2>
|
<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-sm btn-success"><i class="mdi-navigation-check"></i>
|
||||||
<button class="btn btn-fab btn-fab-mini btn-raised btn-material-lightyellow"><i class="mdi-content-reply"></i></button>
|
</button>
|
||||||
|
<button class="btn btn-fab btn-fab-mini btn-raised btn-material-lightyellow"><i class="mdi-content-reply"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#floating-action-button .btn {
|
#floating-action-button .btn {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating-action-button h2 {
|
#floating-action-button h2 {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -1258,12 +1407,14 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown .dropdown {
|
#dropdown .dropdown {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<h1 class="header">Dropdown</h1>
|
<h1 class="header">Dropdown</h1>
|
||||||
|
|
||||||
<h2>Simple dropdown</h2>
|
<h2>Simple dropdown</h2>
|
||||||
<span class="dropdown"><i class="mdi-navigation-menu"></i></span>
|
<span class="dropdown"><i class="mdi-navigation-menu"></i></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1275,9 +1426,11 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown-menu .sample {
|
#dropdown-menu .sample {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown-menu .form-group {
|
#dropdown-menu .form-group {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -1304,7 +1457,9 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
|
|
||||||
|
<p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="dialog">
|
<div class="well page" id="dialog">
|
||||||
|
|
@ -1369,6 +1524,7 @@
|
||||||
<h1 class="header">Shadow</h1>
|
<h1 class="header">Shadow</h1>
|
||||||
|
|
||||||
<h2>Shadows</h2>
|
<h2>Shadows</h2>
|
||||||
|
|
||||||
<div class="sample">z = 0</div>
|
<div class="sample">z = 0</div>
|
||||||
<div class="sample shadow-z-1">z = 1</div>
|
<div class="sample shadow-z-1">z = 1</div>
|
||||||
<div class="sample shadow-z-2">z = 2</div>
|
<div class="sample shadow-z-2">z = 2</div>
|
||||||
|
|
@ -1377,6 +1533,7 @@
|
||||||
<div class="sample shadow-z-5">z = 5</div>
|
<div class="sample shadow-z-5">z = 5</div>
|
||||||
|
|
||||||
<h2>Animated</h2>
|
<h2>Animated</h2>
|
||||||
|
|
||||||
<div id="shadow-sample2" data-tap="0">tap</div>
|
<div id="shadow-sample2" data-tap="0">tap</div>
|
||||||
<div id="shadow-sample3" data-tap="0">tap</div>
|
<div id="shadow-sample3" data-tap="0">tap</div>
|
||||||
|
|
||||||
|
|
@ -1399,6 +1556,7 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#shadow .sample {
|
#shadow .sample {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
|
@ -1406,6 +1564,7 @@
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#shadow-sample2 {
|
#shadow-sample2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -1418,6 +1577,7 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#shadow-sample3 {
|
#shadow-sample3 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -1434,7 +1594,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-2">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
278
index.html
278
index.html
|
|
@ -23,16 +23,19 @@
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-panel {
|
.header-panel {
|
||||||
background-color: #009587;
|
background-color: #009587;
|
||||||
height: 144px;
|
height: 144px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-panel div {
|
.header-panel div {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-panel h1 {
|
.header-panel h1 {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -46,15 +49,18 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu, .menu * {
|
.menu, .menu * {
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul {
|
.menu ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 7px 0;
|
margin: 7px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul li {
|
.menu ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 20px 0 20px 50px;
|
padding: 20px 0 20px 50px;
|
||||||
|
|
@ -62,10 +68,12 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul li.active {
|
.menu ul li.active {
|
||||||
background-color: #dedede;
|
background-color: #dedede;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul li a {
|
.menu ul li a {
|
||||||
color: rgb(51, 51, 51);
|
color: rgb(51, 51, 51);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -79,6 +87,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pages > div {
|
.pages > div {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
padding-top: 64px;
|
padding-top: 64px;
|
||||||
|
|
@ -145,7 +154,8 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
|
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
|
||||||
<li class="withripple" data-target="#getting-started">Getting Started</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><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="#material-colors">Material Colors</li>
|
||||||
<li class="withripple" data-target="#checkbox">Checkbox</li>
|
<li class="withripple" data-target="#checkbox">Checkbox</li>
|
||||||
<li class="withripple" data-target="#radio-button">Radio Button</li>
|
<li class="withripple" data-target="#radio-button">Radio Button</li>
|
||||||
|
|
@ -168,15 +178,25 @@
|
||||||
<div class="col-xs-10">
|
<div class="col-xs-10">
|
||||||
<div class="well page active" id="about">
|
<div class="well page active" id="about">
|
||||||
<h1 class="header">Material Design for Bootstrap</h1>
|
<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>Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new
|
||||||
<p>Read more about Material Design for Bootstrap at the <a href="https://github.com/FezVrasta/bootstrap-material-design">Github page</a>.</p>
|
<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>
|
<br>
|
||||||
|
|
||||||
<p>If you want support the development of this project please consider donate something:</p>
|
<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>
|
<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;">
|
<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">
|
<input type="hidden" name="cmd" value="_s-xclick">
|
||||||
|
|
||||||
<div class="btn btn-primary">
|
<div class="btn btn-primary">
|
||||||
<select name="hosted_button_id" title="I can't accept less than 5 euro due to accounting troubles">
|
<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="DAAK965W2DKYE">€ 5,00</option>
|
||||||
|
|
@ -190,30 +210,43 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<style>
|
<style>
|
||||||
#paypal .btn { padding: 5px 30px 6px 30px; }
|
#paypal .btn {
|
||||||
#paypal input { background: transparent; border: 0; }
|
padding: 5px 30px 6px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#paypal input {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
</style>
|
</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>
|
<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>
|
<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>
|
|
||||||
|
<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>
|
<br>
|
||||||
|
|
||||||
<div class="cbwrapper">
|
<div class="cbwrapper">
|
||||||
<script async
|
<script async
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri"
|
src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri"
|
||||||
id="_carbonads_js">
|
id="_carbonads_js">
|
||||||
</script>
|
</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 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>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.cbwrapper div {
|
.cbwrapper div {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cbwrapper div:nth-child(2) {
|
.cbwrapper div:nth-child(2) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads, #fakecb {
|
#carbonads, #fakecb {
|
||||||
border: 1px solid #d5d5d5;
|
border: 1px solid #d5d5d5;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
@ -225,24 +258,29 @@
|
||||||
height: 142px;
|
height: 142px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-img {
|
#carbonads .carbon-img {
|
||||||
float: left;
|
float: left;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-text, #carbonads .carbon-poweredby {
|
#carbonads .carbon-text, #carbonads .carbon-poweredby {
|
||||||
float: left;
|
float: left;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 0 10px 10px 10px;
|
padding: 0 10px 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
|
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carbonads .carbon-poweredby {
|
#carbonads .carbon-poweredby {
|
||||||
color: #9D9D9D;
|
color: #9D9D9D;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<p>You can get this theme downloading the source from Bower:</p>
|
<p>You can get this theme downloading the source from Bower:</p>
|
||||||
<pre><code>bower install bootstrap-material-design</code></pre>
|
<pre><code>bower install bootstrap-material-design</code></pre>
|
||||||
|
|
||||||
|
|
@ -250,21 +288,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="getting-started">
|
<div class="well page" id="getting-started">
|
||||||
<h1 class="header">Getting Started</h1>
|
<h1 class="header">Getting Started</h1>
|
||||||
|
|
||||||
<h3>Download</h3>
|
<h3>Download</h3>
|
||||||
<hr>
|
<hr>
|
||||||
<h4>Install with NPM - Coming Soon</h4>
|
<h4>Install with NPM - Coming Soon</h4>
|
||||||
|
|
||||||
<p>You can also install and manage Material Bootstrap using NPM</p>
|
<p>You can also install and manage Material Bootstrap using NPM</p>
|
||||||
<pre><code>npm install</code></pre>
|
<pre><code>npm install</code></pre>
|
||||||
<h4>Install with Bower</h4>
|
<h4>Install with Bower</h4>
|
||||||
|
|
||||||
<p>You can also install and manage Material Bootstrap using Bower</p>
|
<p>You can also install and manage Material Bootstrap using Bower</p>
|
||||||
<pre><code>bower install bootstrap-material-design</code></pre>
|
<pre><code>bower install bootstrap-material-design</code></pre>
|
||||||
<h4>Install with Meteor</h4>
|
<h4>Install with Meteor</h4>
|
||||||
|
|
||||||
<p>You can also install and manage Material Bootstrap using Meteor</p>
|
<p>You can also install and manage Material Bootstrap using Meteor</p>
|
||||||
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
|
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<h3>What's included</h3>
|
<h3>What's included</h3>
|
||||||
<hr>
|
<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>
|
<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 panel-info">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title">Required Frameworks</h3>
|
<h3 class="panel-title">Required Frameworks</h3>
|
||||||
|
|
@ -277,7 +321,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row-content">
|
<div class="row-content">
|
||||||
<h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
|
<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>
|
|
||||||
|
<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>
|
</div>
|
||||||
<div class="list-group-separator"></div>
|
<div class="list-group-separator"></div>
|
||||||
|
|
@ -287,6 +333,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row-content">
|
<div class="row-content">
|
||||||
<h4 class="list-group-item-heading">jQuery 1.9.1+</h4>
|
<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>
|
<p class="list-group-item-text">All JavaScript plugins require jQuery to be included.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -326,6 +373,7 @@
|
||||||
</pre>
|
</pre>
|
||||||
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
|
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
|
<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>
|
<pre><code>$.material.init()</code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -395,11 +443,13 @@
|
||||||
#checkbox .sample1 label {
|
#checkbox .sample1 label {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .hint {
|
#checkbox .hint {
|
||||||
padding-left: 45px;
|
padding-left: 45px;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .sample1 {
|
#checkbox .sample1 {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -419,9 +469,11 @@
|
||||||
#checkbox .sample2 {
|
#checkbox .sample2 {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .sample2 .text {
|
#checkbox .sample2 .text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#checkbox .sample2 .checkbox {
|
#checkbox .sample2 .checkbox {
|
||||||
float: right;
|
float: right;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -430,7 +482,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="radio-button">
|
<div class="well page" id="radio-button">
|
||||||
<h1 class="header">Checkbox</h1>
|
<h1 class="header">Checkbox</h1>
|
||||||
|
|
||||||
<h2>Keep Wi-Fi on during sleep</h2>
|
<h2>Keep Wi-Fi on during sleep</h2>
|
||||||
|
|
||||||
<div class="sample1">
|
<div class="sample1">
|
||||||
<div class="radio radio-success">
|
<div class="radio radio-success">
|
||||||
<label>
|
<label>
|
||||||
|
|
@ -454,6 +508,7 @@
|
||||||
|
|
||||||
|
|
||||||
<h2>Wi-Fi frequency band</h2>
|
<h2>Wi-Fi frequency band</h2>
|
||||||
|
|
||||||
<div class="sample2">
|
<div class="sample2">
|
||||||
<div class="radio radio-primary">
|
<div class="radio radio-primary">
|
||||||
<label>
|
<label>
|
||||||
|
|
@ -482,6 +537,7 @@
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#radio-button .radio {
|
#radio-button .radio {
|
||||||
margin: 20px 10px;
|
margin: 20px 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -490,6 +546,7 @@
|
||||||
<div class="well page" id="toggle-button">
|
<div class="well page" id="toggle-button">
|
||||||
|
|
||||||
<h1 class="header">Toggle Button</h1>
|
<h1 class="header">Toggle Button</h1>
|
||||||
|
|
||||||
<div class="togglebutton">
|
<div class="togglebutton">
|
||||||
<label>
|
<label>
|
||||||
Wi-Fi
|
Wi-Fi
|
||||||
|
|
@ -504,6 +561,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="header">Toggle Button Variations</h1>
|
<h1 class="header">Toggle Button Variations</h1>
|
||||||
|
|
||||||
<div class="togglebutton togglebutton-material-pink">
|
<div class="togglebutton togglebutton-material-pink">
|
||||||
<label>
|
<label>
|
||||||
Wi-Fi
|
Wi-Fi
|
||||||
|
|
@ -524,10 +582,12 @@
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toggle-button .togglebutton label {
|
#toggle-button .togglebutton label {
|
||||||
margin: 20px 10px;
|
margin: 20px 10px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toggle-button .togglebutton .toggle {
|
#toggle-button .togglebutton .toggle {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
@ -535,6 +595,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="input">
|
<div class="well page" id="input">
|
||||||
<h1 class="header">Input</h1>
|
<h1 class="header">Input</h1>
|
||||||
|
|
||||||
<div class="inputs">
|
<div class="inputs">
|
||||||
<h2>Input</h2>
|
<h2>Input</h2>
|
||||||
<input type="text" class="form-control" placeholder="label">
|
<input type="text" class="form-control" placeholder="label">
|
||||||
|
|
@ -558,6 +619,7 @@
|
||||||
|
|
||||||
|
|
||||||
<h2>Styling</h2>
|
<h2>Styling</h2>
|
||||||
|
|
||||||
<div class="form-group has-error">
|
<div class="form-group has-error">
|
||||||
<input type="text" class="form-control form-control-success" placeholder="label">
|
<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">
|
<input type="text" class="form-control form-control-success floating-label" placeholder="floating label">
|
||||||
|
|
@ -569,9 +631,11 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#input .inputs {
|
#input .inputs {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#input .form-control-wrapper {
|
#input .form-control-wrapper {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -596,7 +660,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<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>
|
<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">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -614,7 +679,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<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>
|
<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">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -641,7 +707,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -659,7 +726,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -686,7 +754,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -704,7 +773,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -731,7 +801,8 @@
|
||||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -749,7 +820,8 @@
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="javascript:void(0)">Link</a></li>
|
<li><a href="javascript:void(0)">Link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="index.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
|
||||||
|
<b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="javascript:void(0)">Action</a></li>
|
<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)">Another action</a></li>
|
||||||
|
|
@ -765,12 +837,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="progress-bar">
|
<div class="well page" id="progress-bar">
|
||||||
<h1 class="header">Progress Bar</h1>
|
<h1 class="header">Progress Bar</h1>
|
||||||
|
|
||||||
<h2>Basic</h2>
|
<h2>Basic</h2>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar" style="width: 60%;"></div>
|
<div class="progress-bar" style="width: 60%;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Contextual alternatives</h2>
|
<h2>Contextual alternatives</h2>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -785,6 +860,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Striped</h2>
|
<h2>Striped</h2>
|
||||||
|
|
||||||
<div class="progress progress-striped">
|
<div class="progress progress-striped">
|
||||||
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -799,11 +875,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Animated</h2>
|
<h2>Animated</h2>
|
||||||
|
|
||||||
<div class="progress progress-striped active">
|
<div class="progress progress-striped active">
|
||||||
<div class="progress-bar" style="width: 45%"></div>
|
<div class="progress-bar" style="width: 45%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Stacked</h2>
|
<h2>Stacked</h2>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
<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-warning" style="width: 20%"></div>
|
||||||
|
|
@ -821,14 +899,18 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="slider">
|
<div class="well page" id="slider">
|
||||||
<h1 class="header">Slider</h1>
|
<h1 class="header">Slider</h1>
|
||||||
|
|
||||||
<div class="sample1">
|
<div class="sample1">
|
||||||
<h2>Music, video, games & other media</h2>
|
<h2>Music, video, games & other media</h2>
|
||||||
|
|
||||||
<div class="slider shor slider-material-orange"></div>
|
<div class="slider shor slider-material-orange"></div>
|
||||||
|
|
||||||
<h2>Notifications</h2>
|
<h2>Notifications</h2>
|
||||||
|
|
||||||
<div class="slider shor slider-material-orange"></div>
|
<div class="slider shor slider-material-orange"></div>
|
||||||
|
|
||||||
<h2>Alarms</h2>
|
<h2>Alarms</h2>
|
||||||
|
|
||||||
<div class="slider shor slider-material-orange"></div>
|
<div class="slider shor slider-material-orange"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -846,18 +928,22 @@
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider .sample2 {
|
#slider .sample2 {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider .sample2 .slider {
|
#slider .sample2 .slider {
|
||||||
margin: 0 40px;
|
margin: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider h2 {
|
#slider h2 {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider .slider {
|
#slider .slider {
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
@ -866,17 +952,23 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="material-colors">
|
<div class="well page" id="material-colors">
|
||||||
<h1 class="header">Material Color Samples</h1>
|
<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>
|
<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>
|
<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>
|
<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">
|
<div class="sampleOthers">
|
||||||
<button class="btn btn-black btn-lg">Black</button>
|
<button class="btn btn-black btn-lg">Black</button>
|
||||||
<button class="btn btn-white btn-lg">White</button>
|
<button class="btn btn-white btn-lg">White</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleRed">
|
<div class="sampleRed">
|
||||||
<h2><button class="btn btn-material-red btn-lg">Red</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-red-100">100</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-200">200</button>
|
||||||
|
|
@ -886,14 +978,17 @@
|
||||||
<button class="btn btn-material-red-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-red-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-red-A100">A100</button>
|
<button class="btn btn-material-red-A100">A100</button>
|
||||||
<button class="btn btn-material-red-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-red-A700">A700</button>
|
<button class="btn btn-material-red-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="samplePink">
|
<div class="samplePink">
|
||||||
<h2><button class="btn btn-material-pink btn-lg">Pink</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-pink-100">100</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-200">200</button>
|
||||||
|
|
@ -903,14 +998,17 @@
|
||||||
<button class="btn btn-material-pink-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-pink-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-pink-A100">A100</button>
|
<button class="btn btn-material-pink-A100">A100</button>
|
||||||
<button class="btn btn-material-pink-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-pink-A700">A700</button>
|
<button class="btn btn-material-pink-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="samplePurple">
|
<div class="samplePurple">
|
||||||
<h2><button class="btn btn-material-purple btn-lg">Purple</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-purple-100">100</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-200">200</button>
|
||||||
|
|
@ -920,14 +1018,17 @@
|
||||||
<button class="btn btn-material-purple-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-purple-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-purple-A100">A100</button>
|
<button class="btn btn-material-purple-A100">A100</button>
|
||||||
<button class="btn btn-material-purple-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-purple-A700">A700</button>
|
<button class="btn btn-material-purple-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleDeepPurple">
|
<div class="sampleDeepPurple">
|
||||||
<h2><button class="btn btn-material-deep-purple btn-lg">Deep Purple</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-deep-purple-100">100</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-200">200</button>
|
||||||
|
|
@ -937,14 +1038,17 @@
|
||||||
<button class="btn btn-material-deep-purple-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-deep-purple-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-deep-purple-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-deep-purple-A400">A400</button>
|
<button class="btn btn-material-deep-purple-A400">A400</button>
|
||||||
<button class="btn btn-material-deep-purple-A700">A700</button>
|
<button class="btn btn-material-deep-purple-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleIndigo">
|
<div class="sampleIndigo">
|
||||||
<h2><button class="btn btn-material-indigo btn-lg">Indigo</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-indigo-100">100</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-200">200</button>
|
||||||
|
|
@ -954,14 +1058,17 @@
|
||||||
<button class="btn btn-material-indigo-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-indigo-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-indigo-A100">A100</button>
|
<button class="btn btn-material-indigo-A100">A100</button>
|
||||||
<button class="btn btn-material-indigo-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-indigo-A700">A700</button>
|
<button class="btn btn-material-indigo-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleBlue">
|
<div class="sampleBlue">
|
||||||
<h2><button class="btn btn-material-blue btn-lg">Blue</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-blue-100">100</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-200">200</button>
|
||||||
|
|
@ -971,14 +1078,17 @@
|
||||||
<button class="btn btn-material-blue-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-blue-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-blue-A100">A100</button>
|
<button class="btn btn-material-blue-A100">A100</button>
|
||||||
<button class="btn btn-material-blue-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-blue-A700">A700</button>
|
<button class="btn btn-material-blue-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleLightBlue">
|
<div class="sampleLightBlue">
|
||||||
<h2><button class="btn btn-material-light-blue btn-lg">Light Blue</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-light-blue-100">100</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-200">200</button>
|
||||||
|
|
@ -988,14 +1098,17 @@
|
||||||
<button class="btn btn-material-light-blue-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-light-blue-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-light-blue-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-light-blue-A400">A400</button>
|
<button class="btn btn-material-light-blue-A400">A400</button>
|
||||||
<button class="btn btn-material-light-blue-A700">A700</button>
|
<button class="btn btn-material-light-blue-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleCyan">
|
<div class="sampleCyan">
|
||||||
<h2><button class="btn btn-material-cyan btn-lg">Cyan</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-cyan-100">100</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-200">200</button>
|
||||||
|
|
@ -1005,14 +1118,17 @@
|
||||||
<button class="btn btn-material-cyan-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-cyan-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-cyan-A100">A100</button>
|
<button class="btn btn-material-cyan-A100">A100</button>
|
||||||
<button class="btn btn-material-cyan-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-cyan-A700">A700</button>
|
<button class="btn btn-material-cyan-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleTeal">
|
<div class="sampleTeal">
|
||||||
<h2><button class="btn btn-material-teal btn-lg">Teal</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-teal-100">100</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-200">200</button>
|
||||||
|
|
@ -1022,14 +1138,17 @@
|
||||||
<button class="btn btn-material-teal-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-teal-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-teal-A100">A100</button>
|
<button class="btn btn-material-teal-A100">A100</button>
|
||||||
<button class="btn btn-material-teal-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-teal-A700">A700</button>
|
<button class="btn btn-material-teal-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleGreen">
|
<div class="sampleGreen">
|
||||||
<h2><button class="btn btn-material-green btn-lg">Green</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-green-100">100</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-200">200</button>
|
||||||
|
|
@ -1039,14 +1158,17 @@
|
||||||
<button class="btn btn-material-green-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-green-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-green-A100">A100</button>
|
<button class="btn btn-material-green-A100">A100</button>
|
||||||
<button class="btn btn-material-green-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-green-A700">A700</button>
|
<button class="btn btn-material-green-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleLightGreen">
|
<div class="sampleLightGreen">
|
||||||
<h2><button class="btn btn-material-light-green btn-lg">LightGreen</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-light-green-100">100</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-200">200</button>
|
||||||
|
|
@ -1056,14 +1178,17 @@
|
||||||
<button class="btn btn-material-light-green-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-light-green-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-light-green-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-light-green-A400">A400</button>
|
<button class="btn btn-material-light-green-A400">A400</button>
|
||||||
<button class="btn btn-material-light-green-A700">A700</button>
|
<button class="btn btn-material-light-green-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleLime">
|
<div class="sampleLime">
|
||||||
<h2><button class="btn btn-material-lime btn-lg">Lime</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-lime-100">100</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-200">200</button>
|
||||||
|
|
@ -1073,14 +1198,17 @@
|
||||||
<button class="btn btn-material-lime-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-lime-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-lime-A100">A100</button>
|
<button class="btn btn-material-lime-A100">A100</button>
|
||||||
<button class="btn btn-material-lime-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-lime-A700">A700</button>
|
<button class="btn btn-material-lime-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleYellow">
|
<div class="sampleYellow">
|
||||||
<h2><button class="btn btn-material-yellow btn-lg">Yellow</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-yellow-100">100</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-200">200</button>
|
||||||
|
|
@ -1090,14 +1218,17 @@
|
||||||
<button class="btn btn-material-yellow-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-yellow-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-yellow-A100">A100</button>
|
<button class="btn btn-material-yellow-A100">A100</button>
|
||||||
<button class="btn btn-material-yellow-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-yellow-A700">A700</button>
|
<button class="btn btn-material-yellow-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleAmber">
|
<div class="sampleAmber">
|
||||||
<h2><button class="btn btn-material-amber btn-lg">Amber</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-amber-100">100</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-200">200</button>
|
||||||
|
|
@ -1107,14 +1238,17 @@
|
||||||
<button class="btn btn-material-amber-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-amber-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-amber-A100">A100</button>
|
<button class="btn btn-material-amber-A100">A100</button>
|
||||||
<button class="btn btn-material-amber-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-amber-A700">A700</button>
|
<button class="btn btn-material-amber-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleOrange">
|
<div class="sampleOrange">
|
||||||
<h2><button class="btn btn-material-orange btn-lg">Orange</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-orange-100">100</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-200">200</button>
|
||||||
|
|
@ -1124,14 +1258,17 @@
|
||||||
<button class="btn btn-material-orange-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-orange-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-orange-A100">A100</button>
|
<button class="btn btn-material-orange-A100">A100</button>
|
||||||
<button class="btn btn-material-orange-A200">A200</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-A400">A400</button>
|
||||||
<button class="btn btn-material-orange-A700">A700</button>
|
<button class="btn btn-material-orange-A700">A700</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleDeepOrange">
|
<div class="sampleDeepOrange">
|
||||||
<h2><button class="btn btn-material-deep-orange btn-lg">Deep Orange</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-deep-orange-100">100</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-200">200</button>
|
||||||
|
|
@ -1141,14 +1278,18 @@
|
||||||
<button class="btn btn-material-deep-orange-600">600</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-700">700</button>
|
||||||
<button class="btn btn-material-deep-orange-800">800</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-900">900</button>
|
||||||
|
<br>
|
||||||
<button class="btn btn-material-deep-orange-A100">A100</button>
|
<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-A200">A200</button>
|
||||||
<button class="btn btn-material-deep-orange-A400">A400</button>
|
<button class="btn btn-material-deep-orange-A400">A400</button>
|
||||||
<button class="btn btn-material-deep-orange-A700">A700</button><br><br>
|
<button class="btn btn-material-deep-orange-A700">A700</button>
|
||||||
|
<br><br>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleBrown">
|
<div class="sampleBrown">
|
||||||
<h2><button class="btn btn-material-brown btn-lg">Brown</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-brown-100">100</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-200">200</button>
|
||||||
|
|
@ -1161,7 +1302,9 @@
|
||||||
<button class="btn btn-material-brown-900">900</button>
|
<button class="btn btn-material-brown-900">900</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleGrey">
|
<div class="sampleGrey">
|
||||||
<h2><button class="btn btn-material-grey btn-lg">Grey</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-grey-100">100</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-200">200</button>
|
||||||
|
|
@ -1174,7 +1317,9 @@
|
||||||
<button class="btn btn-material-grey-900">900</button>
|
<button class="btn btn-material-grey-900">900</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="sampleBlueGrey">
|
<div class="sampleBlueGrey">
|
||||||
<h2><button class="btn btn-material-blue-grey btn-lg">Blue Grey</button></h2>
|
<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-50">050</button>
|
||||||
<button class="btn btn-material-blue-grey-100">100</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-200">200</button>
|
||||||
|
|
@ -1189,6 +1334,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="button">
|
<div class="well page" id="button">
|
||||||
<h1 class="header">Button</h1>
|
<h1 class="header">Button</h1>
|
||||||
|
|
||||||
<div class="sample1">
|
<div class="sample1">
|
||||||
<h2>Normal buttons</h2>
|
<h2>Normal buttons</h2>
|
||||||
<button class="btn btn-default">Button</button>
|
<button class="btn btn-default">Button</button>
|
||||||
|
|
@ -1234,13 +1380,16 @@
|
||||||
<button class="btn btn-fab btn-raised btn-primary"><i class="mdi-image-edit"></i></button>
|
<button class="btn btn-fab btn-raised btn-primary"><i class="mdi-image-edit"></i></button>
|
||||||
|
|
||||||
<h2>Mini</h2>
|
<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-sm btn-success"><i class="mdi-navigation-check"></i>
|
||||||
<button class="btn btn-fab btn-fab-mini btn-raised btn-material-lightyellow"><i class="mdi-content-reply"></i></button>
|
</button>
|
||||||
|
<button class="btn btn-fab btn-fab-mini btn-raised btn-material-lightyellow"><i class="mdi-content-reply"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#floating-action-button .btn {
|
#floating-action-button .btn {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating-action-button h2 {
|
#floating-action-button h2 {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -1257,12 +1406,14 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown .dropdown {
|
#dropdown .dropdown {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<h1 class="header">Dropdown</h1>
|
<h1 class="header">Dropdown</h1>
|
||||||
|
|
||||||
<h2>Simple dropdown</h2>
|
<h2>Simple dropdown</h2>
|
||||||
<span class="dropdown"><i class="mdi-navigation-menu"></i></span>
|
<span class="dropdown"><i class="mdi-navigation-menu"></i></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1274,9 +1425,11 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown-menu .sample {
|
#dropdown-menu .sample {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown-menu .form-group {
|
#dropdown-menu .form-group {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -1303,7 +1456,9 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
|
|
||||||
|
<p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="well page" id="dialog">
|
<div class="well page" id="dialog">
|
||||||
|
|
@ -1368,6 +1523,7 @@
|
||||||
<h1 class="header">Shadow</h1>
|
<h1 class="header">Shadow</h1>
|
||||||
|
|
||||||
<h2>Shadows</h2>
|
<h2>Shadows</h2>
|
||||||
|
|
||||||
<div class="sample">z = 0</div>
|
<div class="sample">z = 0</div>
|
||||||
<div class="sample shadow-z-1">z = 1</div>
|
<div class="sample shadow-z-1">z = 1</div>
|
||||||
<div class="sample shadow-z-2">z = 2</div>
|
<div class="sample shadow-z-2">z = 2</div>
|
||||||
|
|
@ -1376,6 +1532,7 @@
|
||||||
<div class="sample shadow-z-5">z = 5</div>
|
<div class="sample shadow-z-5">z = 5</div>
|
||||||
|
|
||||||
<h2>Animated</h2>
|
<h2>Animated</h2>
|
||||||
|
|
||||||
<div id="shadow-sample2" data-tap="0">tap</div>
|
<div id="shadow-sample2" data-tap="0">tap</div>
|
||||||
<div id="shadow-sample3" data-tap="0">tap</div>
|
<div id="shadow-sample3" data-tap="0">tap</div>
|
||||||
|
|
||||||
|
|
@ -1398,6 +1555,7 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
#shadow .sample {
|
#shadow .sample {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
|
@ -1405,6 +1563,7 @@
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#shadow-sample2 {
|
#shadow-sample2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -1417,6 +1576,7 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#shadow-sample3 {
|
#shadow-sample3 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -1433,7 +1593,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-2">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user