mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
material colors aproximation
This commit is contained in:
parent
908c0ec80b
commit
28c0728c35
77
index.html
77
index.html
|
@ -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">
|
||||
|
@ -698,6 +774,7 @@
|
|||
<button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button>
|
||||
<button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
#button h2 {
|
||||
|
|
|
@ -21,7 +21,16 @@
|
|||
.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;
|
||||
box-shadow: none;
|
||||
|
|
|
@ -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,4 +1,5 @@
|
|||
@import "_variables.less";
|
||||
@import "_colors.less";
|
||||
@import "_mixins.less";
|
||||
@import "_icons-material-design.less";
|
||||
@import "_shadows.less";
|
||||
|
|
Loading…
Reference in New Issue
Block a user