403 lines
15 KiB
SCSS
Executable file
403 lines
15 KiB
SCSS
Executable file
/**
|
|
*
|
|
* Material design color palettes
|
|
* @see http://www.google.com/design/spec/style/color.html
|
|
*
|
|
**/
|
|
|
|
// Blacks for text
|
|
// ----------------------------------------------------------------------------
|
|
|
|
$colorBlack: #000;
|
|
$colorGrayDark: rgba($colorBlack, .87);
|
|
$colorGray: rgba($colorBlack, .54);
|
|
$colorGrayLight: rgba($colorBlack, .26);
|
|
$colorGrayLighter: rgba($colorBlack, .12);
|
|
|
|
// Color Palettes
|
|
// At this stage of developpement --eg. version AngularMaterial v0.7.1-- ngMaterial theming is incomplete
|
|
// and does not apply every specified hues, neither provide acces to it trough it's theming API
|
|
// As a workaround we use sass palettes and theming
|
|
|
|
$paletteRed: #fde0dc #f9bdbb #f69988 #f36c60 #e84e40 #e51c23 #dd191d #d01716 #c41411 #b0120a #ff7997 #ff5177 #ff2d6f #e00032;
|
|
|
|
$palettePink: #fce4ec #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60 #c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
|
|
|
|
$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #a0f;
|
|
|
|
$paletteDeepPurple: #673ab7 #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7 #5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff #6200ea;
|
|
|
|
$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab #303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
|
|
|
|
$paletteBlue: #e7e9fd #d0d9ff #afbfff #91a7ff #738ffe #5677fc #4e6cef #455ede #3b50ce #2a36b1 #a6baff #6889ff #4d73ff #4d69ff;
|
|
|
|
$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5 #0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
|
|
|
|
$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1 #0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
|
|
|
|
$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
|
|
|
|
$paletteGreen: #d0f8ce #a3e9a4 #72d572 #42bd41 #2baf2b #259b24 #0a8f08 #0a7e07 #056f00 #0d5302 #a2f78d #5af158 #14e715 #12c700;
|
|
|
|
$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342 #689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
|
|
|
|
$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33 #afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
|
|
|
|
$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835 #fbc02d #f9a825 #f57f17 #ffff8d #ff0 #ffea00 #ffd600;
|
|
|
|
$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300 #ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
|
|
|
|
$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00 #f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
|
|
|
|
$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e #e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
|
|
|
|
$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63 #795548 #6d4c41 #5d4037 #4e342e #3e2723;
|
|
|
|
$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c #607d8b #546e7a #455a64 #37474f #263238;
|
|
|
|
/// SOGo custom theme palettes
|
|
// ---------------------------------------------------------------------------
|
|
|
|
$sogoPaper: (
|
|
50: #fcfbf8,
|
|
100: #f7f1dc,
|
|
200: #ede5ca,
|
|
300: #e6d8ba,
|
|
400: #e2d2a3,
|
|
500: #d6c48d,
|
|
600: #baa870,
|
|
700: #857545,
|
|
800: #524517,
|
|
900: #433809,
|
|
1000: #000,
|
|
A100: #fff,
|
|
A200: #eee,
|
|
A400: #bdbdbd,
|
|
A700: #616161
|
|
);
|
|
$sogoGreen: (
|
|
50: #eaf5e9,
|
|
100: #cbe5c8,
|
|
200: #aad6a5,
|
|
300: #88c781,
|
|
400: #66b86a,
|
|
500: #56b04c,
|
|
600: #4da143,
|
|
700: #388e3c,
|
|
800: #367d2e,
|
|
900: #225e1b,
|
|
A100: #b9f6ca,
|
|
A200: #69f0ae,
|
|
A400: #00e676,
|
|
A700: #00c853
|
|
);
|
|
$sogoBlue: (
|
|
50: #f0faf9,
|
|
100:#e1f5f3,
|
|
200:#ceebe8,
|
|
300:#bfe0dd,
|
|
400:#b2d6d3,
|
|
500:#a1ccc8,
|
|
600:#8ebfbb,
|
|
700:#7db3b0,
|
|
800:#639997,
|
|
900:#4d8080,
|
|
A100: #d4f7fa,
|
|
A200: #c3f5fa,
|
|
A400: #53e3f0,
|
|
A700: #00b0c0
|
|
);
|
|
|
|
// Color definitions of Google's palette
|
|
// ----------------------------------------------------------------------------
|
|
|
|
$colorRed50: nth($paletteRed, 1);
|
|
$colorRed100: nth($paletteRed, 2);
|
|
$colorRed200: nth($paletteRed, 3);
|
|
$colorRed300: nth($paletteRed, 4);
|
|
$colorRed400: nth($paletteRed, 5);
|
|
$colorRed500: nth($paletteRed, 6);
|
|
$colorRed600: nth($paletteRed, 7);
|
|
$colorRed700: nth($paletteRed, 8);
|
|
$colorRed800: nth($paletteRed, 9);
|
|
$colorRed900: nth($paletteRed, 10);
|
|
$colorRedA100: nth($paletteRed, 11);
|
|
$colorRedA200: nth($paletteRed, 12);
|
|
$colorRedA400: nth($paletteRed, 13);
|
|
$colorRedA700: nth($paletteRed, 14);
|
|
|
|
$colorPink50: nth($palettePink, 1);
|
|
$colorPink100: nth($palettePink, 2);
|
|
$colorPink200: nth($palettePink, 3);
|
|
$colorPink300: nth($palettePink, 4);
|
|
$colorPink400: nth($palettePink, 5);
|
|
$colorPink500: nth($palettePink, 6);
|
|
$colorPink600: nth($palettePink, 7);
|
|
$colorPink700: nth($palettePink, 8);
|
|
$colorPink800: nth($palettePink, 9);
|
|
$colorPink900: nth($palettePink, 10);
|
|
$colorPinkA100: nth($palettePink, 11);
|
|
$colorPinkA200: nth($palettePink, 12);
|
|
$colorPinkA400: nth($palettePink, 13);
|
|
$colorPinkA700: nth($palettePink, 14);
|
|
|
|
$colorPurple50: nth($palettePurple, 1);
|
|
$colorPurple100: nth($palettePurple, 2);
|
|
$colorPurple200: nth($palettePurple, 3);
|
|
$colorPurple300: nth($palettePurple, 4);
|
|
$colorPurple400: nth($palettePurple, 5);
|
|
$colorPurple500: nth($palettePurple, 6);
|
|
$colorPurple600: nth($palettePurple, 7);
|
|
$colorPurple700: nth($palettePurple, 8);
|
|
$colorPurple800: nth($palettePurple, 9);
|
|
$colorPurple900: nth($palettePurple, 10);
|
|
$colorPurpleA100: nth($palettePurple, 11);
|
|
$colorPurpleA200: nth($palettePurple, 12);
|
|
$colorPurpleA400: nth($palettePurple, 13);
|
|
$colorPurpleA700: nth($palettePurple, 14);
|
|
|
|
$colorDeepPurple50: nth($paletteDeepPurple, 1);
|
|
$colorDeepPurple100: nth($paletteDeepPurple, 2);
|
|
$colorDeepPurple200: nth($paletteDeepPurple, 3);
|
|
$colorDeepPurple300: nth($paletteDeepPurple, 4);
|
|
$colorDeepPurple400: nth($paletteDeepPurple, 5);
|
|
$colorDeepPurple500: nth($paletteDeepPurple, 6);
|
|
$colorDeepPurple600: nth($paletteDeepPurple, 7);
|
|
$colorDeepPurple700: nth($paletteDeepPurple, 8);
|
|
$colorDeepPurple800: nth($paletteDeepPurple, 9);
|
|
$colorDeepPurple900: nth($paletteDeepPurple, 10);
|
|
$colorDeepPurpleA100: nth($paletteDeepPurple, 11);
|
|
$colorDeepPurpleA200: nth($paletteDeepPurple, 12);
|
|
$colorDeepPurpleA400: nth($paletteDeepPurple, 13);
|
|
$colorDeepPurpleA700: nth($paletteDeepPurple, 14);
|
|
|
|
$colorIndigo50: nth($paletteIndigo, 1);
|
|
$colorIndigo100: nth($paletteIndigo, 2);
|
|
$colorIndigo200: nth($paletteIndigo, 3);
|
|
$colorIndigo300: nth($paletteIndigo, 4);
|
|
$colorIndigo400: nth($paletteIndigo, 5);
|
|
$colorIndigo500: nth($paletteIndigo, 6);
|
|
$colorIndigo600: nth($paletteIndigo, 7);
|
|
$colorIndigo700: nth($paletteIndigo, 8);
|
|
$colorIndigo800: nth($paletteIndigo, 9);
|
|
$colorIndigo900: nth($paletteIndigo, 10);
|
|
$colorIndigoA100: nth($paletteIndigo, 11);
|
|
$colorIndigoA200: nth($paletteIndigo, 12);
|
|
$colorIndigoA400: nth($paletteIndigo, 13);
|
|
$colorIndigoA700: nth($paletteIndigo, 14);
|
|
|
|
$colorBlue50: nth($paletteBlue, 1);
|
|
$colorBlue100: nth($paletteBlue, 2);
|
|
$colorBlue200: nth($paletteBlue, 3);
|
|
$colorBlue300: nth($paletteBlue, 4);
|
|
$colorBlue400: nth($paletteBlue, 5);
|
|
$colorBlue500: nth($paletteBlue, 6);
|
|
$colorBlue600: nth($paletteBlue, 7);
|
|
$colorBlue700: nth($paletteBlue, 8);
|
|
$colorBlue800: nth($paletteBlue, 9);
|
|
$colorBlue900: nth($paletteBlue, 10);
|
|
$colorBlueA100: nth($paletteBlue, 11);
|
|
$colorBlueA200: nth($paletteBlue, 12);
|
|
$colorBlueA400: nth($paletteBlue, 13);
|
|
$colorBlueA700: nth($paletteBlue, 14);
|
|
|
|
$colorLightBlue50: nth($paletteLightBlue, 1);
|
|
$colorLightBlue100: nth($paletteLightBlue, 2);
|
|
$colorLightBlue200: nth($paletteLightBlue, 3);
|
|
$colorLightBlue300: nth($paletteLightBlue, 4);
|
|
$colorLightBlue400: nth($paletteLightBlue, 5);
|
|
$colorLightBlue500: nth($paletteLightBlue, 6);
|
|
$colorLightBlue600: nth($paletteLightBlue, 7);
|
|
$colorLightBlue700: nth($paletteLightBlue, 8);
|
|
$colorLightBlue800: nth($paletteLightBlue, 9);
|
|
$colorLightBlue900: nth($paletteLightBlue, 10);
|
|
$colorLightBlueA100: nth($paletteLightBlue, 11);
|
|
$colorLightBlueA200: nth($paletteLightBlue, 12);
|
|
$colorLightBlueA400: nth($paletteLightBlue, 13);
|
|
$colorLightBlueA700: nth($paletteLightBlue, 14);
|
|
|
|
$colorCyan50: nth($paletteCyan, 1);
|
|
$colorCyan100: nth($paletteCyan, 2);
|
|
$colorCyan200: nth($paletteCyan, 3);
|
|
$colorCyan300: nth($paletteCyan, 4);
|
|
$colorCyan400: nth($paletteCyan, 5);
|
|
$colorCyan500: nth($paletteCyan, 6);
|
|
$colorCyan600: nth($paletteCyan, 7);
|
|
$colorCyan700: nth($paletteCyan, 8);
|
|
$colorCyan800: nth($paletteCyan, 9);
|
|
$colorCyan900: nth($paletteCyan, 10);
|
|
$colorCyanA100: nth($paletteCyan, 11);
|
|
$colorCyanA200: nth($paletteCyan, 12);
|
|
$colorCyanA400: nth($paletteCyan, 13);
|
|
$colorCyanA700: nth($paletteCyan, 14);
|
|
|
|
$colorTeal50: nth($paletteTeal, 1);
|
|
$colorTeal100: nth($paletteTeal, 2);
|
|
$colorTeal200: nth($paletteTeal, 3);
|
|
$colorTeal300: nth($paletteTeal, 4);
|
|
$colorTeal400: nth($paletteTeal, 5);
|
|
$colorTeal500: nth($paletteTeal, 6);
|
|
$colorTeal600: nth($paletteTeal, 7);
|
|
$colorTeal700: nth($paletteTeal, 8);
|
|
$colorTeal800: nth($paletteTeal, 9);
|
|
$colorTeal900: nth($paletteTeal, 10);
|
|
$colorTealA100: nth($paletteTeal, 11);
|
|
$colorTealA200: nth($paletteTeal, 12);
|
|
$colorTealA400: nth($paletteTeal, 13);
|
|
$colorTealA700: nth($paletteTeal, 14);
|
|
|
|
$colorGreen50: nth($paletteGreen, 1);
|
|
$colorGreen100: nth($paletteGreen, 2);
|
|
$colorGreen200: nth($paletteGreen, 3);
|
|
$colorGreen300: nth($paletteGreen, 4);
|
|
$colorGreen400: nth($paletteGreen, 5);
|
|
$colorGreen500: nth($paletteGreen, 6);
|
|
$colorGreen600: nth($paletteGreen, 7);
|
|
$colorGreen700: nth($paletteGreen, 8);
|
|
$colorGreen800: nth($paletteGreen, 9);
|
|
$colorGreen900: nth($paletteGreen, 10);
|
|
$colorGreenA100: nth($paletteGreen, 11);
|
|
$colorGreenA200: nth($paletteGreen, 12);
|
|
$colorGreenA400: nth($paletteGreen, 13);
|
|
$colorGreenA700: nth($paletteGreen, 14);
|
|
|
|
$colorLightGreen50: nth($paletteLightGreen, 1);
|
|
$colorLightGreen100: nth($paletteLightGreen, 2);
|
|
$colorLightGreen200: nth($paletteLightGreen, 3);
|
|
$colorLightGreen300: nth($paletteLightGreen, 4);
|
|
$colorLightGreen400: nth($paletteLightGreen, 5);
|
|
$colorLightGreen500: nth($paletteLightGreen, 6);
|
|
$colorLightGreen600: nth($paletteLightGreen, 7);
|
|
$colorLightGreen700: nth($paletteLightGreen, 8);
|
|
$colorLightGreen800: nth($paletteLightGreen, 9);
|
|
$colorLightGreen900: nth($paletteLightGreen, 10);
|
|
$colorLightGreenA100: nth($paletteLightGreen, 11);
|
|
$colorLightGreenA200: nth($paletteLightGreen, 12);
|
|
$colorLightGreenA400: nth($paletteLightGreen, 13);
|
|
$colorLightGreenA700: nth($paletteLightGreen, 14);
|
|
|
|
$colorLime50: nth($paletteLime, 1);
|
|
$colorLime100: nth($paletteLime, 2);
|
|
$colorLime200: nth($paletteLime, 3);
|
|
$colorLime300: nth($paletteLime, 4);
|
|
$colorLime400: nth($paletteLime, 5);
|
|
$colorLime500: nth($paletteLime, 6);
|
|
$colorLime600: nth($paletteLime, 7);
|
|
$colorLime700: nth($paletteLime, 8);
|
|
$colorLime800: nth($paletteLime, 9);
|
|
$colorLime900: nth($paletteLime, 10);
|
|
$colorLimeA100: nth($paletteLime, 11);
|
|
$colorLimeA200: nth($paletteLime, 12);
|
|
$colorLimeA400: nth($paletteLime, 13);
|
|
$colorLimeA700: nth($paletteLime, 14);
|
|
|
|
$colorYellow50: nth($paletteYellow, 1);
|
|
$colorYellow100: nth($paletteYellow, 2);
|
|
$colorYellow200: nth($paletteYellow, 3);
|
|
$colorYellow300: nth($paletteYellow, 4);
|
|
$colorYellow400: nth($paletteYellow, 5);
|
|
$colorYellow500: nth($paletteYellow, 6);
|
|
$colorYellow600: nth($paletteYellow, 7);
|
|
$colorYellow700: nth($paletteYellow, 8);
|
|
$colorYellow800: nth($paletteYellow, 9);
|
|
$colorYellow900: nth($paletteYellow, 10);
|
|
$colorYellowA100: nth($paletteYellow, 11);
|
|
$colorYellowA200: nth($paletteYellow, 12);
|
|
$colorYellowA400: nth($paletteYellow, 13);
|
|
$colorYellowA700: nth($paletteYellow, 14);
|
|
|
|
$colorAmber50: nth($paletteAmber, 1);
|
|
$colorAmber100: nth($paletteAmber, 2);
|
|
$colorAmber200: nth($paletteAmber, 3);
|
|
$colorAmber300: nth($paletteAmber, 4);
|
|
$colorAmber400: nth($paletteAmber, 5);
|
|
$colorAmber500: nth($paletteAmber, 6);
|
|
$colorAmber600: nth($paletteAmber, 7);
|
|
$colorAmber700: nth($paletteAmber, 8);
|
|
$colorAmber800: nth($paletteAmber, 9);
|
|
$colorAmber900: nth($paletteAmber, 10);
|
|
$colorAmberA100: nth($paletteAmber, 11);
|
|
$colorAmberA200: nth($paletteAmber, 12);
|
|
$colorAmberA400: nth($paletteAmber, 13);
|
|
$colorAmberA700: nth($paletteAmber, 14);
|
|
|
|
$colorOrange50: nth($paletteOrange, 1);
|
|
$colorOrange100: nth($paletteOrange, 2);
|
|
$colorOrange200: nth($paletteOrange, 3);
|
|
$colorOrange300: nth($paletteOrange, 4);
|
|
$colorOrange400: nth($paletteOrange, 5);
|
|
$colorOrange500: nth($paletteOrange, 6);
|
|
$colorOrange600: nth($paletteOrange, 7);
|
|
$colorOrange700: nth($paletteOrange, 8);
|
|
$colorOrange800: nth($paletteOrange, 9);
|
|
$colorOrange900: nth($paletteOrange, 10);
|
|
$colorOrangeA100: nth($paletteOrange, 11);
|
|
$colorOrangeA200: nth($paletteOrange, 12);
|
|
$colorOrangeA400: nth($paletteOrange, 13);
|
|
$colorOrangeA700: nth($paletteOrange, 14);
|
|
|
|
$colorDeepOrange50: nth($paletteDeepOrange, 1);
|
|
$colorDeepOrange100: nth($paletteDeepOrange, 2);
|
|
$colorDeepOrange200: nth($paletteDeepOrange, 3);
|
|
$colorDeepOrange300: nth($paletteDeepOrange, 4);
|
|
$colorDeepOrange400: nth($paletteDeepOrange, 5);
|
|
$colorDeepOrange500: nth($paletteDeepOrange, 6);
|
|
$colorDeepOrange600: nth($paletteDeepOrange, 7);
|
|
$colorDeepOrange700: nth($paletteDeepOrange, 8);
|
|
$colorDeepOrange800: nth($paletteDeepOrange, 9);
|
|
$colorDeepOrange900: nth($paletteDeepOrange, 10);
|
|
$colorDeepOrangeA100: nth($paletteDeepOrange, 11);
|
|
$colorDeepOrangeA200: nth($paletteDeepOrange, 12);
|
|
$colorDeepOrangeA400: nth($paletteDeepOrange, 13);
|
|
$colorDeepOrangeA700: nth($paletteDeepOrange, 14);
|
|
|
|
$colorBrown50: nth($paletteBrown, 1);
|
|
$colorBrown100: nth($paletteBrown, 2);
|
|
$colorBrown200: nth($paletteBrown, 3);
|
|
$colorBrown300: nth($paletteBrown, 4);
|
|
$colorBrown400: nth($paletteBrown, 5);
|
|
$colorBrown500: nth($paletteBrown, 6);
|
|
$colorBrown600: nth($paletteBrown, 7);
|
|
$colorBrown700: nth($paletteBrown, 8);
|
|
$colorBrown800: nth($paletteBrown, 9);
|
|
$colorBrown900: nth($paletteBrown, 10);
|
|
|
|
$colorBlueGrey50: nth($paletteBlueGrey, 1);
|
|
$colorBlueGrey100: nth($paletteBlueGrey, 2);
|
|
$colorBlueGrey200: nth($paletteBlueGrey, 3);
|
|
$colorBlueGrey300: nth($paletteBlueGrey, 4);
|
|
$colorBlueGrey400: nth($paletteBlueGrey, 5);
|
|
$colorBlueGrey500: nth($paletteBlueGrey, 6);
|
|
$colorBlueGrey600: nth($paletteBlueGrey, 7);
|
|
$colorBlueGrey700: nth($paletteBlueGrey, 8);
|
|
$colorBlueGrey800: nth($paletteBlueGrey, 9);
|
|
$colorBlueGrey900: nth($paletteBlueGrey, 10);
|
|
|
|
|
|
/// Provides Color definitions of SOGo's palette in classes
|
|
/// One for 'color' attribute (fg-color), and one for the
|
|
/// background-color attribute (bg-color)
|
|
/// We also provide a getter function for use in class definitions
|
|
// ----------------------------------------------------------------------------
|
|
|
|
@function sg-color($color, $hue) {
|
|
@return map-get($color, $hue);
|
|
}
|
|
|
|
@mixin colors($palette, $name) {
|
|
$hues: map-keys($palette);
|
|
@each $hue in $hues {
|
|
$color: map-get($palette, $hue);
|
|
.fg-#{$name}-#{$hue} {
|
|
color: $color;
|
|
};
|
|
.bg-#{$name}-#{$hue} {
|
|
background-color: $color;
|
|
};
|
|
};
|
|
}
|
|
@include colors($sogoBlue, 'sogoBlue');
|
|
@include colors($sogoGreen, 'sogoGreen');
|
|
@include colors($sogoPaper, 'sogoPaper');
|
|
|