_variables.scss 1.08 KB
Newer Older
arturo's avatar
arturo committed
1 2
@use 'sass:map';

3 4
/// Global spacing value
$space-unit: 8px;
5

arturo's avatar
arturo committed
6
// Bootstrap color system
arturo's avatar
arturo committed
7
// * with added shades of gray (+)
arturo's avatar
arturo committed
8
$white:    #FFFFFF;
arturo's avatar
arturo committed
9
$gray-50 : #FCFCFC; // (+)
arturo's avatar
arturo committed
10 11 12 13 14 15 16 17 18 19 20 21 22
$gray-100: #F8F9FA;
$gray-150: #FAFAFA; // (+)
$gray-175: #F0F0F0; // (+)
$gray-200: #E9ECEF;
$gray-300: #DEE2E6;
$gray-400: #CED4DA;
$gray-500: #ADB5BD;
$gray-600: #6C757D;
$gray-700: #495057;
$gray-800: #343A40;
$gray-900: #212529;
$black:    #000000;

arturo's avatar
arturo committed
23 24 25 26 27 28 29 30
// Pastel colours
$pastel-green   : hsla(149, 46%, 41%, 1);
$pastel-blue    : hsla(206, 28%, 55%, 1);
$pastel-yellow  : hsla(60, 100%, 71%, 1);
$pastel-red     : hsla(3, 60%, 59%, 1);
$pastel-orange  : hsla(40, 89%, 75%, 1);
$pastel-purple  : hsla(278, 19%, 74%, 1);

arturo's avatar
arturo committed
31

32 33 34 35
/// Z-Index Management
/// @link https://medium.com/alistapart/sassier-z-index-management-for-complex-layouts-4540717a9488
$z-indexes: (
  main: (
arturo's avatar
arturo committed
36 37 38 39
    "sidebar",
    "topbar",
    "handlebar",
    "floaty",
40
  ),
arturo's avatar
arturo committed
41
  phylo: (
arturo's avatar
arturo committed
42
    "frame",
43 44
    "spinner",
  ),
arturo's avatar
arturo committed
45
  graph: (
arturo's avatar
arturo committed
46
    "toolbar",
arturo's avatar
arturo committed
47
    "frame",
48
  ),
arturo's avatar
arturo committed
49 50 51 52 53 54 55 56 57
  tree: (
    "content",
    "badge",
  ),
  tile: (
    "bottom-teaser"
    "navbar",
    "top-teaser",
  ),
58
);