Skip to content

Instantly share code, notes, and snippets.

@EdricChan03
Created June 11, 2018 10:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EdricChan03/cf760730fdb7e764c3ee1ee50ca7b91e to your computer and use it in GitHub Desktop.
Save EdricChan03/cf760730fdb7e764c3ee1ee50ca7b91e to your computer and use it in GitHub Desktop.
Angular Material colors.
// This file is used for generating styles for Angular Material
/// An array of values
/// @author Edric Chan
$mat-colors: (
"red": $mat-red,
"pink": $mat-pink,
"purple": $mat-purple,
"deep-purple": $mat-deep-purple,
"indigo": $mat-indigo,
"blue": $mat-blue,
"light-blue": $mat-light-blue,
"cyan": $mat-cyan,
"teal": $mat-teal,
"green": $mat-green,
"light-green": $mat-light-green,
"lime": $mat-lime,
"yellow": $mat-yellow,
"amber": $mat-amber,
"orange": $mat-orange,
"deep-orange": $mat-deep-orange,
"brown": $mat-brown,
"grey": $mat-grey,
"gray": $mat-grey,
"blue-grey": $mat-blue-grey,
"blue-gray": $mat-blue-grey
);
.mat- {
@each $key, $val in $mat-colors {
@each $key1, $val1 in $val {
@if type-of($val1) == map {
@each $key2, $val2 in $val1 {
&#{$key}-#{$key1}-#{$key2}-fg {
color: $val2 !important;
}
&#{$key}-#{$key1}-#{$key2}-bg {
background-color: $val2 !important;
}
}
} @else {
&#{$key}-#{$key1}-fg {
color: $val1 !important;
}
&#{$key}-#{$key1}-bg {
background-color: $val1 !important;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment