mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 11:34:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

material colors aproximation

Browse Source
This commit is contained in:
Korgan 2014-12-05 03:35:32 +01:00
parent 908c0ec80b
commit 28c0728c35
4 changed files with 121 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@ -156,6 +156,7 @@
<ul>
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
<li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
<li class="withripple" data-target="#material-colors">Material Colors</li>
<li class="withripple" data-target="#checkbox">Checkbox</li>
<li class="withripple" data-target="#radio-button">Radio Button</li>
<li class="withripple" data-target="#toggle-button">Toggle Button</li>
@ -670,6 +671,81 @@
</style>
</div>
<div class="well page" id="material-colors">
<h1 class="header">Material Color Samples</h1>
<div class="sample1">
<button class="btn btn-material-red-50">050</button>
<button class="btn btn-material-red-100">100</button>
<button class="btn btn-material-red-200">200</button>
<button class="btn btn-material-red-300">300</button>
<button class="btn btn-material-red-400">400</button>
<button class="btn btn-material-red-500">500</button>
<button class="btn btn-material-red-600">600</button>
<button class="btn btn-material-red-700">700</button>
<button class="btn btn-material-red-800">800</button>
<button class="btn btn-material-red-900">900</button><br>
<button class="btn btn-material-red-A100">A100</button>
<button class="btn btn-material-red-A200">A200</button>
<button class="btn btn-material-red-A400">A400</button>
<button class="btn btn-material-red-A700">A700</button><br><br>
<button class="btn btn-material-pink-50">050</button>
<button class="btn btn-material-pink-100">100</button>
<button class="btn btn-material-pink-200">200</button>
<button class="btn btn-material-pink-300">300</button>
<button class="btn btn-material-pink-400">400</button>
<button class="btn btn-material-pink-500">500</button>
<button class="btn btn-material-pink-600">600</button>
<button class="btn btn-material-pink-700">700</button>
<button class="btn btn-material-pink-800">800</button>
<button class="btn btn-material-pink-900">900</button><br>
<button class="btn btn-material-pink-A100">A100</button>
<button class="btn btn-material-pink-A200">A200</button>
<button class="btn btn-material-pink-A400">A400</button>
<button class="btn btn-material-pink-A700">A700</button><br><br>
<button class="btn btn-material-deep-purple-50">050</button>
<button class="btn btn-material-deep-purple-100">100</button>
<button class="btn btn-material-deep-purple-200">200</button>
<button class="btn btn-material-deep-purple-300">300</button>
<button class="btn btn-material-deep-purple-400">400</button>
<button class="btn btn-material-deep-purple-500">500</button>
<button class="btn btn-material-deep-purple-600">600</button>
<button class="btn btn-material-deep-purple-700">700</button>
<button class="btn btn-material-deep-purple-800">800</button>
<button class="btn btn-material-deep-purple-900">900</button><br>
<button class="btn btn-material-deep-purple-A100">A100</button>
<button class="btn btn-material-deep-purple-A200">A200</button>
<button class="btn btn-material-deep-purple-A400">A400</button>
<button class="btn btn-material-deep-purple-A700">A700</button><br><br>
<button class="btn btn-material-orange-50">050</button>
<button class="btn btn-material-orange-100">100</button>
<button class="btn btn-material-orange-200">200</button>
<button class="btn btn-material-orange-300">300</button>
<button class="btn btn-material-orange-400">400</button>
<button class="btn btn-material-orange-500">500</button>
<button class="btn btn-material-orange-600">600</button>
<button class="btn btn-material-orange-700">700</button>
<button class="btn btn-material-orange-800">800</button>
<button class="btn btn-material-orange-900">900</button><br>
<button class="btn btn-material-orange-A100">A100</button>
<button class="btn btn-material-orange-A200">A200</button>
<button class="btn btn-material-orange-A400">A400</button>
<button class="btn btn-material-orange-A700">A700</button><br><br>
<button class="btn btn-material-deep-orange-50">050</button>
<button class="btn btn-material-deep-orange-100">100</button>
<button class="btn btn-material-deep-orange-200">200</button>
<button class="btn btn-material-deep-orange-300">300</button>
<button class="btn btn-material-deep-orange-400">400</button>
<button class="btn btn-material-deep-orange-500">500</button>
<button class="btn btn-material-deep-orange-600">600</button>
<button class="btn btn-material-deep-orange-700">700</button>
<button class="btn btn-material-deep-orange-800">800</button>
<button class="btn btn-material-deep-orange-900">900</button><br>
<button class="btn btn-material-deep-orange-A100">A100</button>
<button class="btn btn-material-deep-orange-A200">A200</button>
<button class="btn btn-material-deep-orange-A400">A400</button>
<button class="btn btn-material-deep-orange-A700">A700</button><br><br>
</div>
</div>
<div class="well page" id="button">
<h1 class="header">Button</h1>
<div class="sample1">
@ -699,6 +775,7 @@
<button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
</div>
<style>
#button h2 {
padding: 14px;

9
less/_buttons.less
View File

@ -21,6 +21,15 @@
.variations(~":not(.btn-link):not(.btn-flat)", background-color, @btn-default);
.variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
/*
.background-variations(@extra) {
&-material-test {
background-color: blue !important;
color: red !important;
}
}*/
.background-variations(~":not(.btn-link):not(.btn-flat)");
.background-variations(~".btn-flat:not(.btn-link)");
&.btn-flat {
background: none;

33
less/_mixins.less
View File

@ -76,4 +76,37 @@
}
}
.background-variations(@extra) {
.background-variations-factory(@material-color) {
.background-variations-factory-deep(@material-color-number) {
&-material-@{material-color}@{material-color-number}@{extra} {
@final-background-color: "@{material-color}@{material-color-number}";
background-color: @@final-background-color;
color: contrast(@@final-background-color, @lightbg-text, @darkbg-text, 25%);
}
}
.background-variations-factory-deep(~"");
.background-variations-factory-deep(~"-50");
.background-variations-factory-deep(~"-100");
.background-variations-factory-deep(~"-200");
.background-variations-factory-deep(~"-300");
.background-variations-factory-deep(~"-400");
.background-variations-factory-deep(~"-500");
.background-variations-factory-deep(~"-600");
.background-variations-factory-deep(~"-700");
.background-variations-factory-deep(~"-800");
.background-variations-factory-deep(~"-900");
.background-variations-factory-deep(~"-A100");
.background-variations-factory-deep(~"-A200");
.background-variations-factory-deep(~"-A400");
.background-variations-factory-deep(~"-A700");
}
.background-variations-factory(~"lime");
.background-variations-factory(~"red");
.background-variations-factory(~"pink");
.background-variations-factory(~"deep-purple");
.background-variations-factory(~"deep-orange");
.background-variations-factory(~"orange");
}
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

1
less/material.less
View File

@ -1,4 +1,5 @@
@import "_variables.less";
@import "_colors.less";
@import "_mixins.less";
@import "_icons-material-design.less";
@import "_shadows.less";