mirror of
https://github.com/Coffeedon/Cofffee-Assets.git
synced 2024-11-15 19:21:00 +00:00
889 lines
23 KiB
SCSS
889 lines
23 KiB
SCSS
|
// ==========================================================================
|
||
|
//
|
||
|
// Name: UI Color Palette
|
||
|
// Description: The color palette of material design.
|
||
|
// Version: 2.3.1
|
||
|
//
|
||
|
// Author: Denis Malinochkin
|
||
|
// Git: https://github.com/mrmlnc/material-color
|
||
|
//
|
||
|
// twitter: @mrmlnc
|
||
|
//
|
||
|
// ==========================================================================
|
||
|
|
||
|
|
||
|
//
|
||
|
// List of base colors
|
||
|
//
|
||
|
|
||
|
// $clr-red
|
||
|
// $clr-pink
|
||
|
// $clr-purple
|
||
|
// $clr-deep-purple
|
||
|
// $clr-indigo
|
||
|
// $clr-blue
|
||
|
// $clr-light-blue
|
||
|
// $clr-cyan
|
||
|
// $clr-teal
|
||
|
// $clr-green
|
||
|
// $clr-light-green
|
||
|
// $clr-lime
|
||
|
// $clr-yellow
|
||
|
// $clr-amber
|
||
|
// $clr-orange
|
||
|
// $clr-deep-orange
|
||
|
// $clr-brown
|
||
|
// $clr-grey
|
||
|
// $clr-blue-grey
|
||
|
// $clr-black
|
||
|
// $clr-white
|
||
|
|
||
|
|
||
|
//
|
||
|
// Red
|
||
|
//
|
||
|
|
||
|
$clr-red-list: (
|
||
|
"base": #f44336,
|
||
|
"50": #ffebee,
|
||
|
"100": #ffcdd2,
|
||
|
"200": #ef9a9a,
|
||
|
"300": #e57373,
|
||
|
"400": #ef5350,
|
||
|
"500": #f44336,
|
||
|
"600": #e53935,
|
||
|
"700": #d32f2f,
|
||
|
"800": #c62828,
|
||
|
"900": #b71c1c,
|
||
|
"a100": #ff8a80,
|
||
|
"a200": #ff5252,
|
||
|
"a400": #ff1744,
|
||
|
"a700": #d50000
|
||
|
);
|
||
|
|
||
|
$clr-red: map-get($clr-red-list, "base");
|
||
|
|
||
|
$clr-red-50: map-get($clr-red-list, "50");
|
||
|
$clr-red-100: map-get($clr-red-list, "100");
|
||
|
$clr-red-200: map-get($clr-red-list, "200");
|
||
|
$clr-red-300: map-get($clr-red-list, "300");
|
||
|
$clr-red-400: map-get($clr-red-list, "400");
|
||
|
$clr-red-500: map-get($clr-red-list, "500");
|
||
|
$clr-red-600: map-get($clr-red-list, "600");
|
||
|
$clr-red-700: map-get($clr-red-list, "700");
|
||
|
$clr-red-800: map-get($clr-red-list, "800");
|
||
|
$clr-red-900: map-get($clr-red-list, "900");
|
||
|
$clr-red-a100: map-get($clr-red-list, "a100");
|
||
|
$clr-red-a200: map-get($clr-red-list, "a200");
|
||
|
$clr-red-a400: map-get($clr-red-list, "a400");
|
||
|
$clr-red-a700: map-get($clr-red-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Pink
|
||
|
//
|
||
|
|
||
|
$clr-pink-list: (
|
||
|
"base": #e91e63,
|
||
|
"50": #fce4ec,
|
||
|
"100": #f8bbd0,
|
||
|
"200": #f48fb1,
|
||
|
"300": #f06292,
|
||
|
"400": #ec407a,
|
||
|
"500": #e91e63,
|
||
|
"600": #d81b60,
|
||
|
"700": #c2185b,
|
||
|
"800": #ad1457,
|
||
|
"900": #880e4f,
|
||
|
"a100": #ff80ab,
|
||
|
"a200": #ff4081,
|
||
|
"a400": #f50057,
|
||
|
"a700": #c51162
|
||
|
);
|
||
|
|
||
|
$clr-pink: map-get($clr-pink-list, "base");
|
||
|
|
||
|
$clr-pink-50: map-get($clr-pink-list, "50");
|
||
|
$clr-pink-100: map-get($clr-pink-list, "100");
|
||
|
$clr-pink-200: map-get($clr-pink-list, "200");
|
||
|
$clr-pink-300: map-get($clr-pink-list, "300");
|
||
|
$clr-pink-400: map-get($clr-pink-list, "400");
|
||
|
$clr-pink-500: map-get($clr-pink-list, "500");
|
||
|
$clr-pink-600: map-get($clr-pink-list, "600");
|
||
|
$clr-pink-700: map-get($clr-pink-list, "700");
|
||
|
$clr-pink-800: map-get($clr-pink-list, "800");
|
||
|
$clr-pink-900: map-get($clr-pink-list, "900");
|
||
|
$clr-pink-a100: map-get($clr-pink-list, "a100");
|
||
|
$clr-pink-a200: map-get($clr-pink-list, "a200");
|
||
|
$clr-pink-a400: map-get($clr-pink-list, "a400");
|
||
|
$clr-pink-a700: map-get($clr-pink-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Purple
|
||
|
//
|
||
|
|
||
|
$clr-purple-list: (
|
||
|
"base": #9c27b0,
|
||
|
"50": #f3e5f5,
|
||
|
"100": #e1bee7,
|
||
|
"200": #ce93d8,
|
||
|
"300": #ba68c8,
|
||
|
"400": #ab47bc,
|
||
|
"500": #9c27b0,
|
||
|
"600": #8e24aa,
|
||
|
"700": #7b1fa2,
|
||
|
"800": #6a1b9a,
|
||
|
"900": #4a148c,
|
||
|
"a100": #ea80fc,
|
||
|
"a200": #e040fb,
|
||
|
"a400": #d500f9,
|
||
|
"a700": #aa00ff
|
||
|
);
|
||
|
|
||
|
$clr-purple: map-get($clr-purple-list, "base");
|
||
|
|
||
|
$clr-purple-50: map-get($clr-purple-list, "50");
|
||
|
$clr-purple-100: map-get($clr-purple-list, "100");
|
||
|
$clr-purple-200: map-get($clr-purple-list, "200");
|
||
|
$clr-purple-300: map-get($clr-purple-list, "300");
|
||
|
$clr-purple-400: map-get($clr-purple-list, "400");
|
||
|
$clr-purple-500: map-get($clr-purple-list, "500");
|
||
|
$clr-purple-600: map-get($clr-purple-list, "600");
|
||
|
$clr-purple-700: map-get($clr-purple-list, "700");
|
||
|
$clr-purple-800: map-get($clr-purple-list, "800");
|
||
|
$clr-purple-900: map-get($clr-purple-list, "900");
|
||
|
$clr-purple-a100: map-get($clr-purple-list, "a100");
|
||
|
$clr-purple-a200: map-get($clr-purple-list, "a200");
|
||
|
$clr-purple-a400: map-get($clr-purple-list, "a400");
|
||
|
$clr-purple-a700: map-get($clr-purple-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Deep purple
|
||
|
//
|
||
|
|
||
|
$clr-deep-purple-list: (
|
||
|
"base": #673ab7,
|
||
|
"50": #ede7f6,
|
||
|
"100": #d1c4e9,
|
||
|
"200": #b39ddb,
|
||
|
"300": #9575cd,
|
||
|
"400": #7e57c2,
|
||
|
"500": #673ab7,
|
||
|
"600": #5e35b1,
|
||
|
"700": #512da8,
|
||
|
"800": #4527a0,
|
||
|
"900": #311b92,
|
||
|
"a100": #b388ff,
|
||
|
"a200": #7c4dff,
|
||
|
"a400": #651fff,
|
||
|
"a700": #6200ea
|
||
|
);
|
||
|
|
||
|
$clr-deep-purple: map-get($clr-deep-purple-list, "base");
|
||
|
|
||
|
$clr-deep-purple-50: map-get($clr-deep-purple-list, "50");
|
||
|
$clr-deep-purple-100: map-get($clr-deep-purple-list, "100");
|
||
|
$clr-deep-purple-200: map-get($clr-deep-purple-list, "200");
|
||
|
$clr-deep-purple-300: map-get($clr-deep-purple-list, "300");
|
||
|
$clr-deep-purple-400: map-get($clr-deep-purple-list, "400");
|
||
|
$clr-deep-purple-500: map-get($clr-deep-purple-list, "500");
|
||
|
$clr-deep-purple-600: map-get($clr-deep-purple-list, "600");
|
||
|
$clr-deep-purple-700: map-get($clr-deep-purple-list, "700");
|
||
|
$clr-deep-purple-800: map-get($clr-deep-purple-list, "800");
|
||
|
$clr-deep-purple-900: map-get($clr-deep-purple-list, "900");
|
||
|
$clr-deep-purple-a100: map-get($clr-deep-purple-list, "a100");
|
||
|
$clr-deep-purple-a200: map-get($clr-deep-purple-list, "a200");
|
||
|
$clr-deep-purple-a400: map-get($clr-deep-purple-list, "a400");
|
||
|
$clr-deep-purple-a700: map-get($clr-deep-purple-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Indigo
|
||
|
//
|
||
|
|
||
|
$clr-indigo-list: (
|
||
|
"base": #3f51b5,
|
||
|
"50": #e8eaf6,
|
||
|
"100": #c5cae9,
|
||
|
"200": #9fa8da,
|
||
|
"300": #7986cb,
|
||
|
"400": #5c6bc0,
|
||
|
"500": #3f51b5,
|
||
|
"600": #3949ab,
|
||
|
"700": #303f9f,
|
||
|
"800": #283593,
|
||
|
"900": #1a237e,
|
||
|
"a100": #8c9eff,
|
||
|
"a200": #536dfe,
|
||
|
"a400": #3d5afe,
|
||
|
"a700": #304ffe
|
||
|
);
|
||
|
|
||
|
$clr-indigo: map-get($clr-indigo-list, "base");
|
||
|
|
||
|
$clr-indigo-50: map-get($clr-indigo-list, "50");
|
||
|
$clr-indigo-100: map-get($clr-indigo-list, "100");
|
||
|
$clr-indigo-200: map-get($clr-indigo-list, "200");
|
||
|
$clr-indigo-300: map-get($clr-indigo-list, "300");
|
||
|
$clr-indigo-400: map-get($clr-indigo-list, "400");
|
||
|
$clr-indigo-500: map-get($clr-indigo-list, "500");
|
||
|
$clr-indigo-600: map-get($clr-indigo-list, "600");
|
||
|
$clr-indigo-700: map-get($clr-indigo-list, "700");
|
||
|
$clr-indigo-800: map-get($clr-indigo-list, "800");
|
||
|
$clr-indigo-900: map-get($clr-indigo-list, "900");
|
||
|
$clr-indigo-a100: map-get($clr-indigo-list, "a100");
|
||
|
$clr-indigo-a200: map-get($clr-indigo-list, "a200");
|
||
|
$clr-indigo-a400: map-get($clr-indigo-list, "a400");
|
||
|
$clr-indigo-a700: map-get($clr-indigo-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Blue
|
||
|
//
|
||
|
|
||
|
$clr-blue-list: (
|
||
|
"base": #2196f3,
|
||
|
"50": #e3f2fd,
|
||
|
"100": #bbdefb,
|
||
|
"200": #90caf9,
|
||
|
"300": #64b5f6,
|
||
|
"400": #42a5f5,
|
||
|
"500": #2196f3,
|
||
|
"600": #1e88e5,
|
||
|
"700": #1976d2,
|
||
|
"800": #1565c0,
|
||
|
"900": #0d47a1,
|
||
|
"a100": #82b1ff,
|
||
|
"a200": #448aff,
|
||
|
"a400": #2979ff,
|
||
|
"a700": #2962ff
|
||
|
);
|
||
|
|
||
|
$clr-blue: map-get($clr-blue-list, "base");
|
||
|
|
||
|
$clr-blue-50: map-get($clr-blue-list, "50");
|
||
|
$clr-blue-100: map-get($clr-blue-list, "100");
|
||
|
$clr-blue-200: map-get($clr-blue-list, "200");
|
||
|
$clr-blue-300: map-get($clr-blue-list, "300");
|
||
|
$clr-blue-400: map-get($clr-blue-list, "400");
|
||
|
$clr-blue-500: map-get($clr-blue-list, "500");
|
||
|
$clr-blue-600: map-get($clr-blue-list, "600");
|
||
|
$clr-blue-700: map-get($clr-blue-list, "700");
|
||
|
$clr-blue-800: map-get($clr-blue-list, "800");
|
||
|
$clr-blue-900: map-get($clr-blue-list, "900");
|
||
|
$clr-blue-a100: map-get($clr-blue-list, "a100");
|
||
|
$clr-blue-a200: map-get($clr-blue-list, "a200");
|
||
|
$clr-blue-a400: map-get($clr-blue-list, "a400");
|
||
|
$clr-blue-a700: map-get($clr-blue-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Light Blue
|
||
|
//
|
||
|
|
||
|
$clr-light-blue-list: (
|
||
|
"base": #03a9f4,
|
||
|
"50": #e1f5fe,
|
||
|
"100": #b3e5fc,
|
||
|
"200": #81d4fa,
|
||
|
"300": #4fc3f7,
|
||
|
"400": #29b6f6,
|
||
|
"500": #03a9f4,
|
||
|
"600": #039be5,
|
||
|
"700": #0288d1,
|
||
|
"800": #0277bd,
|
||
|
"900": #01579b,
|
||
|
"a100": #80d8ff,
|
||
|
"a200": #40c4ff,
|
||
|
"a400": #00b0ff,
|
||
|
"a700": #0091ea
|
||
|
);
|
||
|
|
||
|
$clr-light-blue: map-get($clr-light-blue-list, "base");
|
||
|
|
||
|
$clr-light-blue-50: map-get($clr-light-blue-list, "50");
|
||
|
$clr-light-blue-100: map-get($clr-light-blue-list, "100");
|
||
|
$clr-light-blue-200: map-get($clr-light-blue-list, "200");
|
||
|
$clr-light-blue-300: map-get($clr-light-blue-list, "300");
|
||
|
$clr-light-blue-400: map-get($clr-light-blue-list, "400");
|
||
|
$clr-light-blue-500: map-get($clr-light-blue-list, "500");
|
||
|
$clr-light-blue-600: map-get($clr-light-blue-list, "600");
|
||
|
$clr-light-blue-700: map-get($clr-light-blue-list, "700");
|
||
|
$clr-light-blue-800: map-get($clr-light-blue-list, "800");
|
||
|
$clr-light-blue-900: map-get($clr-light-blue-list, "900");
|
||
|
$clr-light-blue-a100: map-get($clr-light-blue-list, "a100");
|
||
|
$clr-light-blue-a200: map-get($clr-light-blue-list, "a200");
|
||
|
$clr-light-blue-a400: map-get($clr-light-blue-list, "a400");
|
||
|
$clr-light-blue-a700: map-get($clr-light-blue-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Cyan
|
||
|
//
|
||
|
|
||
|
$clr-cyan-list: (
|
||
|
"base": #00bcd4,
|
||
|
"50": #e0f7fa,
|
||
|
"100": #b2ebf2,
|
||
|
"200": #80deea,
|
||
|
"300": #4dd0e1,
|
||
|
"400": #26c6da,
|
||
|
"500": #00bcd4,
|
||
|
"600": #00acc1,
|
||
|
"700": #0097a7,
|
||
|
"800": #00838f,
|
||
|
"900": #006064,
|
||
|
"a100": #84ffff,
|
||
|
"a200": #18ffff,
|
||
|
"a400": #00e5ff,
|
||
|
"a700": #00b8d4
|
||
|
);
|
||
|
|
||
|
$clr-cyan: map-get($clr-cyan-list, "base");
|
||
|
|
||
|
$clr-cyan-50: map-get($clr-cyan-list, "50");
|
||
|
$clr-cyan-100: map-get($clr-cyan-list, "100");
|
||
|
$clr-cyan-200: map-get($clr-cyan-list, "200");
|
||
|
$clr-cyan-300: map-get($clr-cyan-list, "300");
|
||
|
$clr-cyan-400: map-get($clr-cyan-list, "400");
|
||
|
$clr-cyan-500: map-get($clr-cyan-list, "500");
|
||
|
$clr-cyan-600: map-get($clr-cyan-list, "600");
|
||
|
$clr-cyan-700: map-get($clr-cyan-list, "700");
|
||
|
$clr-cyan-800: map-get($clr-cyan-list, "800");
|
||
|
$clr-cyan-900: map-get($clr-cyan-list, "900");
|
||
|
$clr-cyan-a100: map-get($clr-cyan-list, "a100");
|
||
|
$clr-cyan-a200: map-get($clr-cyan-list, "a200");
|
||
|
$clr-cyan-a400: map-get($clr-cyan-list, "a400");
|
||
|
$clr-cyan-a700: map-get($clr-cyan-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Teal
|
||
|
//
|
||
|
|
||
|
$clr-teal-list: (
|
||
|
"base": #009688,
|
||
|
"50": #e0f2f1,
|
||
|
"100": #b2dfdb,
|
||
|
"200": #80cbc4,
|
||
|
"300": #4db6ac,
|
||
|
"400": #26a69a,
|
||
|
"500": #009688,
|
||
|
"600": #00897b,
|
||
|
"700": #00796b,
|
||
|
"800": #00695c,
|
||
|
"900": #004d40,
|
||
|
"a100": #a7ffeb,
|
||
|
"a200": #64ffda,
|
||
|
"a400": #1de9b6,
|
||
|
"a700": #00bfa5
|
||
|
);
|
||
|
|
||
|
$clr-teal: map-get($clr-teal-list, "base");
|
||
|
|
||
|
$clr-teal-50: map-get($clr-teal-list, "50");
|
||
|
$clr-teal-100: map-get($clr-teal-list, "100");
|
||
|
$clr-teal-200: map-get($clr-teal-list, "200");
|
||
|
$clr-teal-300: map-get($clr-teal-list, "300");
|
||
|
$clr-teal-400: map-get($clr-teal-list, "400");
|
||
|
$clr-teal-500: map-get($clr-teal-list, "500");
|
||
|
$clr-teal-600: map-get($clr-teal-list, "600");
|
||
|
$clr-teal-700: map-get($clr-teal-list, "700");
|
||
|
$clr-teal-800: map-get($clr-teal-list, "800");
|
||
|
$clr-teal-900: map-get($clr-teal-list, "900");
|
||
|
$clr-teal-a100: map-get($clr-teal-list, "a100");
|
||
|
$clr-teal-a200: map-get($clr-teal-list, "a200");
|
||
|
$clr-teal-a400: map-get($clr-teal-list, "a400");
|
||
|
$clr-teal-a700: map-get($clr-teal-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Green
|
||
|
//
|
||
|
|
||
|
$clr-green-list: (
|
||
|
"base": #4caf50,
|
||
|
"50": #e8f5e9,
|
||
|
"100": #c8e6c9,
|
||
|
"200": #a5d6a7,
|
||
|
"300": #81c784,
|
||
|
"400": #66bb6a,
|
||
|
"500": #4caf50,
|
||
|
"600": #43a047,
|
||
|
"700": #388e3c,
|
||
|
"800": #2e7d32,
|
||
|
"900": #1b5e20,
|
||
|
"a100": #b9f6ca,
|
||
|
"a200": #69f0ae,
|
||
|
"a400": #00e676,
|
||
|
"a700": #00c853
|
||
|
);
|
||
|
|
||
|
$clr-green: map-get($clr-green-list, "base");
|
||
|
|
||
|
$clr-green-50: map-get($clr-green-list, "50");
|
||
|
$clr-green-100: map-get($clr-green-list, "100");
|
||
|
$clr-green-200: map-get($clr-green-list, "200");
|
||
|
$clr-green-300: map-get($clr-green-list, "300");
|
||
|
$clr-green-400: map-get($clr-green-list, "400");
|
||
|
$clr-green-500: map-get($clr-green-list, "500");
|
||
|
$clr-green-600: map-get($clr-green-list, "600");
|
||
|
$clr-green-700: map-get($clr-green-list, "700");
|
||
|
$clr-green-800: map-get($clr-green-list, "800");
|
||
|
$clr-green-900: map-get($clr-green-list, "900");
|
||
|
$clr-green-a100: map-get($clr-green-list, "a100");
|
||
|
$clr-green-a200: map-get($clr-green-list, "a200");
|
||
|
$clr-green-a400: map-get($clr-green-list, "a400");
|
||
|
$clr-green-a700: map-get($clr-green-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Light green
|
||
|
//
|
||
|
|
||
|
$clr-light-green-list: (
|
||
|
"base": #8bc34a,
|
||
|
"50": #f1f8e9,
|
||
|
"100": #dcedc8,
|
||
|
"200": #c5e1a5,
|
||
|
"300": #aed581,
|
||
|
"400": #9ccc65,
|
||
|
"500": #8bc34a,
|
||
|
"600": #7cb342,
|
||
|
"700": #689f38,
|
||
|
"800": #558b2f,
|
||
|
"900": #33691e,
|
||
|
"a100": #ccff90,
|
||
|
"a200": #b2ff59,
|
||
|
"a400": #76ff03,
|
||
|
"a700": #64dd17
|
||
|
);
|
||
|
|
||
|
$clr-light-green: map-get($clr-light-green-list, "base");
|
||
|
|
||
|
$clr-light-green-50: map-get($clr-light-green-list, "50");
|
||
|
$clr-light-green-100: map-get($clr-light-green-list, "100");
|
||
|
$clr-light-green-200: map-get($clr-light-green-list, "200");
|
||
|
$clr-light-green-300: map-get($clr-light-green-list, "300");
|
||
|
$clr-light-green-400: map-get($clr-light-green-list, "400");
|
||
|
$clr-light-green-500: map-get($clr-light-green-list, "500");
|
||
|
$clr-light-green-600: map-get($clr-light-green-list, "600");
|
||
|
$clr-light-green-700: map-get($clr-light-green-list, "700");
|
||
|
$clr-light-green-800: map-get($clr-light-green-list, "800");
|
||
|
$clr-light-green-900: map-get($clr-light-green-list, "900");
|
||
|
$clr-light-green-a100: map-get($clr-light-green-list, "a100");
|
||
|
$clr-light-green-a200: map-get($clr-light-green-list, "a200");
|
||
|
$clr-light-green-a400: map-get($clr-light-green-list, "a400");
|
||
|
$clr-light-green-a700: map-get($clr-light-green-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Lime
|
||
|
//
|
||
|
|
||
|
$clr-lime-list: (
|
||
|
"base": #cddc39,
|
||
|
"50": #f9fbe7,
|
||
|
"100": #f0f4c3,
|
||
|
"200": #e6ee9c,
|
||
|
"300": #dce775,
|
||
|
"400": #d4e157,
|
||
|
"500": #cddc39,
|
||
|
"600": #c0ca33,
|
||
|
"700": #afb42b,
|
||
|
"800": #9e9d24,
|
||
|
"900": #827717,
|
||
|
"a100": #f4ff81,
|
||
|
"a200": #eeff41,
|
||
|
"a400": #c6ff00,
|
||
|
"a700": #aeea00
|
||
|
);
|
||
|
|
||
|
$clr-lime: map-get($clr-lime-list, "base");
|
||
|
|
||
|
$clr-lime-50: map-get($clr-lime-list, "50");
|
||
|
$clr-lime-100: map-get($clr-lime-list, "100");
|
||
|
$clr-lime-200: map-get($clr-lime-list, "200");
|
||
|
$clr-lime-300: map-get($clr-lime-list, "300");
|
||
|
$clr-lime-400: map-get($clr-lime-list, "400");
|
||
|
$clr-lime-500: map-get($clr-lime-list, "500");
|
||
|
$clr-lime-600: map-get($clr-lime-list, "600");
|
||
|
$clr-lime-700: map-get($clr-lime-list, "700");
|
||
|
$clr-lime-800: map-get($clr-lime-list, "800");
|
||
|
$clr-lime-900: map-get($clr-lime-list, "900");
|
||
|
$clr-lime-a100: map-get($clr-lime-list, "a100");
|
||
|
$clr-lime-a200: map-get($clr-lime-list, "a200");
|
||
|
$clr-lime-a400: map-get($clr-lime-list, "a400");
|
||
|
$clr-lime-a700: map-get($clr-lime-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Yellow
|
||
|
//
|
||
|
|
||
|
$clr-yellow-list: (
|
||
|
"base": #ffeb3b,
|
||
|
"50": #fffde7,
|
||
|
"100": #fff9c4,
|
||
|
"200": #fff59d,
|
||
|
"300": #fff176,
|
||
|
"400": #ffee58,
|
||
|
"500": #ffeb3b,
|
||
|
"600": #fdd835,
|
||
|
"700": #fbc02d,
|
||
|
"800": #f9a825,
|
||
|
"900": #f57f17,
|
||
|
"a100": #ffff8d,
|
||
|
"a200": #ffff00,
|
||
|
"a400": #ffea00,
|
||
|
"a700": #ffd600
|
||
|
);
|
||
|
|
||
|
$clr-yellow: map-get($clr-yellow-list, "base");
|
||
|
|
||
|
$clr-yellow-50: map-get($clr-yellow-list, "50");
|
||
|
$clr-yellow-100: map-get($clr-yellow-list, "100");
|
||
|
$clr-yellow-200: map-get($clr-yellow-list, "200");
|
||
|
$clr-yellow-300: map-get($clr-yellow-list, "300");
|
||
|
$clr-yellow-400: map-get($clr-yellow-list, "400");
|
||
|
$clr-yellow-500: map-get($clr-yellow-list, "500");
|
||
|
$clr-yellow-600: map-get($clr-yellow-list, "600");
|
||
|
$clr-yellow-700: map-get($clr-yellow-list, "700");
|
||
|
$clr-yellow-800: map-get($clr-yellow-list, "800");
|
||
|
$clr-yellow-900: map-get($clr-yellow-list, "900");
|
||
|
$clr-yellow-a100: map-get($clr-yellow-list, "a100");
|
||
|
$clr-yellow-a200: map-get($clr-yellow-list, "a200");
|
||
|
$clr-yellow-a400: map-get($clr-yellow-list, "a400");
|
||
|
$clr-yellow-a700: map-get($clr-yellow-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// amber
|
||
|
//
|
||
|
|
||
|
$clr-amber-list: (
|
||
|
"base": #ffc107,
|
||
|
"50": #fff8e1,
|
||
|
"100": #ffecb3,
|
||
|
"200": #ffe082,
|
||
|
"300": #ffd54f,
|
||
|
"400": #ffca28,
|
||
|
"500": #ffc107,
|
||
|
"600": #ffb300,
|
||
|
"700": #ffa000,
|
||
|
"800": #ff8f00,
|
||
|
"900": #ff6f00,
|
||
|
"a100": #ffe57f,
|
||
|
"a200": #ffd740,
|
||
|
"a400": #ffc400,
|
||
|
"a700": #ffab00
|
||
|
);
|
||
|
|
||
|
$clr-amber: map-get($clr-amber-list, "base");
|
||
|
|
||
|
$clr-amber-50: map-get($clr-amber-list, "50");
|
||
|
$clr-amber-100: map-get($clr-amber-list, "100");
|
||
|
$clr-amber-200: map-get($clr-amber-list, "200");
|
||
|
$clr-amber-300: map-get($clr-amber-list, "300");
|
||
|
$clr-amber-400: map-get($clr-amber-list, "400");
|
||
|
$clr-amber-500: map-get($clr-amber-list, "500");
|
||
|
$clr-amber-600: map-get($clr-amber-list, "600");
|
||
|
$clr-amber-700: map-get($clr-amber-list, "700");
|
||
|
$clr-amber-800: map-get($clr-amber-list, "800");
|
||
|
$clr-amber-900: map-get($clr-amber-list, "900");
|
||
|
$clr-amber-a100: map-get($clr-amber-list, "a100");
|
||
|
$clr-amber-a200: map-get($clr-amber-list, "a200");
|
||
|
$clr-amber-a400: map-get($clr-amber-list, "a400");
|
||
|
$clr-amber-a700: map-get($clr-amber-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Orange
|
||
|
//
|
||
|
|
||
|
$clr-orange-list: (
|
||
|
"base": #ff9800,
|
||
|
"50": #fff3e0,
|
||
|
"100": #ffe0b2,
|
||
|
"200": #ffcc80,
|
||
|
"300": #ffb74d,
|
||
|
"400": #ffa726,
|
||
|
"500": #ff9800,
|
||
|
"600": #fb8c00,
|
||
|
"700": #f57c00,
|
||
|
"800": #ef6c00,
|
||
|
"900": #e65100,
|
||
|
"a100": #ffd180,
|
||
|
"a200": #ffab40,
|
||
|
"a400": #ff9100,
|
||
|
"a700": #ff6d00
|
||
|
);
|
||
|
|
||
|
$clr-orange: map-get($clr-orange-list, "base");
|
||
|
|
||
|
$clr-orange-50: map-get($clr-orange-list, "50");
|
||
|
$clr-orange-100: map-get($clr-orange-list, "100");
|
||
|
$clr-orange-200: map-get($clr-orange-list, "200");
|
||
|
$clr-orange-300: map-get($clr-orange-list, "300");
|
||
|
$clr-orange-400: map-get($clr-orange-list, "400");
|
||
|
$clr-orange-500: map-get($clr-orange-list, "500");
|
||
|
$clr-orange-600: map-get($clr-orange-list, "600");
|
||
|
$clr-orange-700: map-get($clr-orange-list, "700");
|
||
|
$clr-orange-800: map-get($clr-orange-list, "800");
|
||
|
$clr-orange-900: map-get($clr-orange-list, "900");
|
||
|
$clr-orange-a100: map-get($clr-orange-list, "a100");
|
||
|
$clr-orange-a200: map-get($clr-orange-list, "a200");
|
||
|
$clr-orange-a400: map-get($clr-orange-list, "a400");
|
||
|
$clr-orange-a700: map-get($clr-orange-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Deep orange
|
||
|
//
|
||
|
|
||
|
$clr-deep-orange-list: (
|
||
|
"base": #ff5722,
|
||
|
"50": #fbe9e7,
|
||
|
"100": #ffccbc,
|
||
|
"200": #ffab91,
|
||
|
"300": #ff8a65,
|
||
|
"400": #ff7043,
|
||
|
"500": #ff5722,
|
||
|
"600": #f4511e,
|
||
|
"700": #e64a19,
|
||
|
"800": #d84315,
|
||
|
"900": #bf360c,
|
||
|
"a100": #ff9e80,
|
||
|
"a200": #ff6e40,
|
||
|
"a400": #ff3d00,
|
||
|
"a700": #dd2c00
|
||
|
);
|
||
|
|
||
|
$clr-deep-orange: map-get($clr-deep-orange-list, "base");
|
||
|
|
||
|
$clr-deep-orange-50: map-get($clr-deep-orange-list, "50");
|
||
|
$clr-deep-orange-100: map-get($clr-deep-orange-list, "100");
|
||
|
$clr-deep-orange-200: map-get($clr-deep-orange-list, "200");
|
||
|
$clr-deep-orange-300: map-get($clr-deep-orange-list, "300");
|
||
|
$clr-deep-orange-400: map-get($clr-deep-orange-list, "400");
|
||
|
$clr-deep-orange-500: map-get($clr-deep-orange-list, "500");
|
||
|
$clr-deep-orange-600: map-get($clr-deep-orange-list, "600");
|
||
|
$clr-deep-orange-700: map-get($clr-deep-orange-list, "700");
|
||
|
$clr-deep-orange-800: map-get($clr-deep-orange-list, "800");
|
||
|
$clr-deep-orange-900: map-get($clr-deep-orange-list, "900");
|
||
|
$clr-deep-orange-a100: map-get($clr-deep-orange-list, "a100");
|
||
|
$clr-deep-orange-a200: map-get($clr-deep-orange-list, "a200");
|
||
|
$clr-deep-orange-a400: map-get($clr-deep-orange-list, "a400");
|
||
|
$clr-deep-orange-a700: map-get($clr-deep-orange-list, "a700");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Brown
|
||
|
//
|
||
|
|
||
|
$clr-brown-list: (
|
||
|
"base": #795548,
|
||
|
"50": #efebe9,
|
||
|
"100": #d7ccc8,
|
||
|
"200": #bcaaa4,
|
||
|
"300": #a1887f,
|
||
|
"400": #8d6e63,
|
||
|
"500": #795548,
|
||
|
"600": #6d4c41,
|
||
|
"700": #5d4037,
|
||
|
"800": #4e342e,
|
||
|
"900": #3e2723,
|
||
|
);
|
||
|
|
||
|
$clr-brown: map-get($clr-brown-list, "base");
|
||
|
|
||
|
$clr-brown-50: map-get($clr-brown-list, "50");
|
||
|
$clr-brown-100: map-get($clr-brown-list, "100");
|
||
|
$clr-brown-200: map-get($clr-brown-list, "200");
|
||
|
$clr-brown-300: map-get($clr-brown-list, "300");
|
||
|
$clr-brown-400: map-get($clr-brown-list, "400");
|
||
|
$clr-brown-500: map-get($clr-brown-list, "500");
|
||
|
$clr-brown-600: map-get($clr-brown-list, "600");
|
||
|
$clr-brown-700: map-get($clr-brown-list, "700");
|
||
|
$clr-brown-800: map-get($clr-brown-list, "800");
|
||
|
$clr-brown-900: map-get($clr-brown-list, "900");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Grey
|
||
|
//
|
||
|
|
||
|
$clr-grey-list: (
|
||
|
"base": #9e9e9e,
|
||
|
"50": #fafafa,
|
||
|
"100": #f5f5f5,
|
||
|
"200": #eeeeee,
|
||
|
"300": #e0e0e0,
|
||
|
"400": #bdbdbd,
|
||
|
"500": #9e9e9e,
|
||
|
"600": #757575,
|
||
|
"700": #616161,
|
||
|
"800": #424242,
|
||
|
"900": #212121,
|
||
|
);
|
||
|
|
||
|
$clr-grey: map-get($clr-grey-list, "base");
|
||
|
|
||
|
$clr-grey-50: map-get($clr-grey-list, "50");
|
||
|
$clr-grey-100: map-get($clr-grey-list, "100");
|
||
|
$clr-grey-200: map-get($clr-grey-list, "200");
|
||
|
$clr-grey-300: map-get($clr-grey-list, "300");
|
||
|
$clr-grey-400: map-get($clr-grey-list, "400");
|
||
|
$clr-grey-500: map-get($clr-grey-list, "500");
|
||
|
$clr-grey-600: map-get($clr-grey-list, "600");
|
||
|
$clr-grey-700: map-get($clr-grey-list, "700");
|
||
|
$clr-grey-800: map-get($clr-grey-list, "800");
|
||
|
$clr-grey-900: map-get($clr-grey-list, "900");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Blue grey
|
||
|
//
|
||
|
|
||
|
$clr-blue-grey-list: (
|
||
|
"base": #607d8b,
|
||
|
"50": #eceff1,
|
||
|
"100": #cfd8dc,
|
||
|
"200": #b0bec5,
|
||
|
"300": #90a4ae,
|
||
|
"400": #78909c,
|
||
|
"500": #607d8b,
|
||
|
"600": #546e7a,
|
||
|
"700": #455a64,
|
||
|
"800": #37474f,
|
||
|
"900": #263238,
|
||
|
);
|
||
|
|
||
|
$clr-blue-grey: map-get($clr-blue-grey-list, "base");
|
||
|
|
||
|
$clr-blue-grey-50: map-get($clr-blue-grey-list, "50");
|
||
|
$clr-blue-grey-100: map-get($clr-blue-grey-list, "100");
|
||
|
$clr-blue-grey-200: map-get($clr-blue-grey-list, "200");
|
||
|
$clr-blue-grey-300: map-get($clr-blue-grey-list, "300");
|
||
|
$clr-blue-grey-400: map-get($clr-blue-grey-list, "400");
|
||
|
$clr-blue-grey-500: map-get($clr-blue-grey-list, "500");
|
||
|
$clr-blue-grey-600: map-get($clr-blue-grey-list, "600");
|
||
|
$clr-blue-grey-700: map-get($clr-blue-grey-list, "700");
|
||
|
$clr-blue-grey-800: map-get($clr-blue-grey-list, "800");
|
||
|
$clr-blue-grey-900: map-get($clr-blue-grey-list, "900");
|
||
|
|
||
|
|
||
|
//
|
||
|
// Black
|
||
|
//
|
||
|
|
||
|
$clr-black-list: (
|
||
|
"base": #000
|
||
|
);
|
||
|
|
||
|
$clr-black: map-get($clr-black-list, "base");
|
||
|
|
||
|
|
||
|
//
|
||
|
// White
|
||
|
//
|
||
|
|
||
|
$clr-white-list: (
|
||
|
"base": #fff
|
||
|
);
|
||
|
|
||
|
$clr-white: map-get($clr-white-list, "base");
|
||
|
|
||
|
|
||
|
//
|
||
|
// List for all Colors for looping
|
||
|
//
|
||
|
|
||
|
$clr-list-all: (
|
||
|
"red": $clr-red-list,
|
||
|
"pink": $clr-pink-list,
|
||
|
"purple": $clr-purple-list,
|
||
|
"deep-purple": $clr-deep-purple-list,
|
||
|
"indigo": $clr-indigo-list,
|
||
|
"blue": $clr-blue-list,
|
||
|
"light-blue": $clr-light-blue-list,
|
||
|
"cyan": $clr-cyan-list,
|
||
|
"teal": $clr-teal-list,
|
||
|
"green": $clr-green-list,
|
||
|
"light-green": $clr-light-green-list,
|
||
|
"lime": $clr-lime-list,
|
||
|
"yellow": $clr-yellow-list,
|
||
|
"amber": $clr-amber-list,
|
||
|
"orange": $clr-orange-list,
|
||
|
"deep-orange": $clr-deep-orange-list,
|
||
|
"brown": $clr-brown-list,
|
||
|
"grey": $clr-grey-list,
|
||
|
"blue-grey": $clr-blue-grey-list,
|
||
|
"black": $clr-black-list,
|
||
|
"white": $clr-white-list
|
||
|
);
|
||
|
|
||
|
|
||
|
//
|
||
|
// Typography
|
||
|
//
|
||
|
|
||
|
$clr-ui-display-4: $clr-grey-600;
|
||
|
$clr-ui-display-3: $clr-grey-600;
|
||
|
$clr-ui-display-2: $clr-grey-600;
|
||
|
$clr-ui-display-1: $clr-grey-600;
|
||
|
$clr-ui-headline: $clr-grey-900;
|
||
|
$clr-ui-title: $clr-grey-900;
|
||
|
$clr-ui-subhead-1: $clr-grey-900;
|
||
|
$clr-ui-body-2: $clr-grey-900;
|
||
|
$clr-ui-body-1: $clr-grey-900;
|
||
|
$clr-ui-caption: $clr-grey-600;
|
||
|
$clr-ui-menu: $clr-grey-900;
|
||
|
$clr-ui-button: $clr-grey-900;
|
||
|
|
||
|
|
||
|
$error-red: $clr-red-500;
|
||
|
$success-green: $clr-green-500;
|
||
|
|
||
|
$valid-value-color: $clr-green-a400;
|
||
|
$error-value-color: $clr-red-a400;
|
||
|
|
||
|
$base-shadow-color: #000;
|
||
|
$base-overlay-background: #000;
|
||
|
$base-border-color: #fff;
|
||
|
$simple-background-color: #fff;
|
||
|
$primary-text-color: #FFF;
|
||
|
|
||
|
$gold-star: $clr-amber-500;
|
||
|
|
||
|
$ui-base-dark-color: $clr-blue-grey-900;
|
||
|
$ui-base-color: $clr-blue-grey-800;
|
||
|
$ui-base-light-color: $clr-blue-grey-700;
|
||
|
$ui-base-lighter-color: $clr-blue-grey-400;
|
||
|
$ui-base-lightest-color: $clr-blue-grey-300;
|
||
|
$ui-primary-color: $clr-blue-grey-100;
|
||
|
$ui-secondary-color: $clr-blue-grey-200;
|
||
|
$ui-highlight-color: $clr-pink-a200;
|
||
|
|
||
|
$secondary-text-color: $ui-secondary-color;
|
||
|
$darker-text-color: rgba($primary-text-color, 0.7);
|
||
|
$dark-text-color: rgba($primary-text-color, 0.5);
|
||
|
$inverted-text-color: #000 !default;
|
||
|
$lighter-text-color: rgba($inverted-text-color, 0.7);
|
||
|
$light-text-color: rgba($inverted-text-color, 0.5);
|
||
|
|
||
|
$primary: $clr-teal-500;
|
||
|
$accent: $clr-pink-a200;
|
||
|
|
||
|
$ui-avatar-border-size: 0%;
|
||
|
|
||
|
@import 'application';
|
||
|
.activity-stream .status.light .status__content a.status__content__spoiler-link {
|
||
|
color: #000;
|
||
|
}
|
||
|
$ui-highlight-color: $clr-light-blue-500;
|
||
|
@import 'boost';
|
||
|
//@import 'fullwidth-media';
|