google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added variable to trim color pallet. (Closes #991)

master
Jonathan Garbee 2015-07-12 16:34:52 -04:00
parent 52208cd2b8
commit 4b3164d0fd
2 changed files with 1688 additions and 1689 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/_variables.scss
View File

@ -71,6 +71,14 @@ $performance_font: 'Helvetica', 'Arial', sans-serif !default;
/* ========== Color & Themes ========== */
// Define whether individual color pallet items should have classes created.
// Setting this to true will remove individual color classes for each color in the pallets.
// To improve overall performance (assuming they aren't used) by:
// * Saving server bandwidth sending the extra classes
// * Save client computation against the classes
// it is RECOMMENDED you set this to true.
$trim-color-classes: false !default;
// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-indigo-500 !default;

33
src/palette/_palette.scss
View File

@ -16,6 +16,7 @@
@import "../variables";
@if $trim-color-classes == false {
// Red
.mdl-color-text--red {
@ -138,7 +139,6 @@
background-color: unquote("rgb(#{$palette-red-A700})") !important;
}
// Pink
.mdl-color-text--pink {
@ -261,7 +261,6 @@
background-color: unquote("rgb(#{$palette-pink-A700})") !important;
}
// Purple
.mdl-color-text--purple {
@ -384,7 +383,6 @@
background-color: unquote("rgb(#{$palette-purple-A700})") !important;
}
// Deep Purple.
.mdl-color-text--deep-purple {
@ -507,7 +505,6 @@
background-color: unquote("rgb(#{$palette-deep-purple-A700})") !important;
}
// Indigo
.mdl-color-text--indigo {
@ -630,7 +627,6 @@
background-color: unquote("rgb(#{$palette-indigo-A700})") !important;
}
// Blue
.mdl-color-text--blue {
@ -753,7 +749,6 @@
background-color: unquote("rgb(#{$palette-blue-A700})") !important;
}
// Light Blue
.mdl-color-text--light-blue {
@ -876,7 +871,6 @@
background-color: unquote("rgb(#{$palette-light-blue-A700})") !important;
}
// Cyan
.mdl-color-text--cyan {
@ -999,7 +993,6 @@
background-color: unquote("rgb(#{$palette-cyan-A700})") !important;
}
// Teal
.mdl-color-text--teal {
@ -1122,7 +1115,6 @@
background-color: unquote("rgb(#{$palette-teal-A700})") !important;
}
// Green
.mdl-color-text--green {
@ -1245,7 +1237,6 @@
background-color: unquote("rgb(#{$palette-green-A700})") !important;
}
// Light Green
.mdl-color-text--light-green {
@ -1368,7 +1359,6 @@
background-color: unquote("rgb(#{$palette-light-green-A700})") !important;
}
// Lime
.mdl-color-text--lime {
@ -1491,7 +1481,6 @@
background-color: unquote("rgb(#{$palette-lime-A700})") !important;
}
// Yellow
.mdl-color-text--yellow {
@ -1614,7 +1603,6 @@
background-color: unquote("rgb(#{$palette-yellow-A700})") !important;
}
// Amber
.mdl-color-text--amber {
@ -1737,7 +1725,6 @@
background-color: unquote("rgb(#{$palette-amber-A700})") !important;
}
// Orange
.mdl-color-text--orange {
@ -1860,7 +1847,6 @@
background-color: unquote("rgb(#{$palette-orange-A700})") !important;
}
// Deep Orange
.mdl-color-text--deep-orange {
@ -1983,7 +1969,6 @@
background-color: unquote("rgb(#{$palette-deep-orange-A700})") !important;
}
// Brown
.mdl-color-text--brown {
@ -2074,7 +2059,6 @@
background-color: unquote("rgb(#{$palette-brown-900})") !important;
}
// Grey
.mdl-color-text--grey {
@ -2165,7 +2149,6 @@
background-color: unquote("rgb(#{$palette-grey-900})") !important;
}
// Blue Grey
.mdl-color-text--blue-grey {
@ -2256,41 +2239,45 @@
background-color: unquote("rgb(#{$palette-blue-grey-900})") !important;
}
// Black
.mdl-color--black {
background-color: unquote("rgb(#{$color-black})") !important;
}
.mdl-color-text--black {
color: unquote("rgb(#{$color-black})") !important;
}
// White
.mdl-color--white {
background-color: unquote("rgb(#{$color-white})") !important;
}
.mdl-color-text--white {
color: unquote("rgb(#{$color-white})") !important;
}
}
// Primary and accent
.mdl-color--primary {
background-color: unquote("rgb(#{$color-primary})") !important;
}
.mdl-color--primary-contrast {
background-color: unquote("rgb(#{$color-primary-contrast})") !important;
}
.mdl-color--primary-dark {
background-color: unquote("rgb(#{$color-primary-dark})") !important;
}
.mdl-color--accent {
background-color: unquote("rgb(#{$color-accent})") !important;
}
.mdl-color--accent-contrast {
background-color: unquote("rgb(#{$color-accent-contrast})") !important;
}
@ -2298,15 +2285,19 @@
.mdl-color-text--primary {
color: unquote("rgb(#{$color-primary})") !important;
}
.mdl-color-text--primary-contrast {
color: unquote("rgb(#{$color-primary-contrast})") !important;
}
.mdl-color-text--primary-dark {
color: unquote("rgb(#{$color-primary-dark})") !important;
}
.mdl-color-text--accent {
color: unquote("rgb(#{$color-accent})") !important;
}
.mdl-color-text--accent-contrast {
color: unquote("rgb(#{$color-accent-contrast})") !important;
}