You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.6 KiB
146 lines
3.6 KiB
$primary: var(--primary);
|
|
$secondary: var(--secondary-2nd);
|
|
$warning: #FFC434;
|
|
$danger: #E15647;
|
|
$body-font: 'Inter', sans-serif !important;
|
|
$header-font: 'Nunito', sans-serif !important;
|
|
$border-radius: 5px;
|
|
|
|
// General
|
|
|
|
$white: #ffffff;
|
|
$black: #000000;
|
|
|
|
// Gray
|
|
$gray-list: (
|
|
"50": #f8f9fa,
|
|
"100": #f1f3f5,
|
|
"200": #e9ecef,
|
|
"300": #dee2e6,
|
|
"400": #ced4da,
|
|
"500": #adb5bd,
|
|
"600": #868e96,
|
|
"700": #495057,
|
|
"800": #343a40,
|
|
"900": #212529
|
|
);
|
|
|
|
$gray-50: map-get($gray-list, "50");
|
|
$gray-100: map-get($gray-list, "100");
|
|
$gray-200: map-get($gray-list, "200");
|
|
$gray-300: map-get($gray-list, "300");
|
|
$gray-400: map-get($gray-list, "400");
|
|
$gray-500: map-get($gray-list, "500");
|
|
$gray-600: map-get($gray-list, "600");
|
|
$gray-700: map-get($gray-list, "700");
|
|
$gray-800: map-get($gray-list, "800");
|
|
$gray-900: map-get($gray-list, "900");
|
|
|
|
// Night
|
|
|
|
$night-list: (
|
|
"50": #EBF3FA,
|
|
"100": #D1DAE6,
|
|
"200": #B1BFCF,
|
|
"300": #8A9CB3,
|
|
"400": #657D99,
|
|
"500": #435B77,
|
|
"600": #374B61,
|
|
"700": #2E3D4F,
|
|
"800": #212D3B,
|
|
"900": #15212D,
|
|
"950": #0E171F
|
|
);
|
|
|
|
$night-50: map-get($night-list, "50");
|
|
$night-100: map-get($night-list, "100");
|
|
$night-200: map-get($night-list, "200");
|
|
$night-300: map-get($night-list, "300");
|
|
$night-400: map-get($night-list, "400");
|
|
$night-500: map-get($night-list, "500");
|
|
$night-600: map-get($night-list, "600");
|
|
$night-700: map-get($night-list, "700");
|
|
$night-800: map-get($night-list, "800");
|
|
$night-900: map-get($night-list, "900");
|
|
$night-950: map-get($night-list, "950");
|
|
|
|
// Indigo
|
|
$indigo-list: (
|
|
"100": #ECF3FF,
|
|
"200": #C6D9FE,
|
|
"300": #A4BEFB,
|
|
"400": #7E9DF4,
|
|
"500": #6280E6,
|
|
"600": #546BD2,
|
|
"700": #4456B7,
|
|
"800": #3C468A,
|
|
"900": #363A68
|
|
);
|
|
|
|
$indigo-100: map-get($indigo-list, "100");
|
|
$indigo-200: map-get($indigo-list, "200");
|
|
$indigo-300: map-get($indigo-list, "300");
|
|
$indigo-400: map-get($indigo-list, "400");
|
|
$indigo-500: map-get($indigo-list, "500");
|
|
$indigo-600: map-get($indigo-list, "600");
|
|
$indigo-700: map-get($indigo-list, "700");
|
|
$indigo-800: map-get($indigo-list, "800");
|
|
$indigo-900: map-get($indigo-list, "900");
|
|
|
|
// Teal
|
|
$teal-list: (
|
|
"100": #E5FFFE,
|
|
"200": #A6F8F8,
|
|
"300": #7EE4E8,
|
|
"400": #50CEDA,
|
|
"500": #38ADC2,
|
|
"600": #3190A8,
|
|
"700": #2B758D,
|
|
"800": #245C70,
|
|
"900": #1E4C5E
|
|
);
|
|
|
|
$teal-100: map-get($teal-list, "100");
|
|
$teal-200: map-get($teal-list, "200");
|
|
$teal-300: map-get($teal-list, "300");
|
|
$teal-400: map-get($teal-list, "400");
|
|
$teal-500: map-get($teal-list, "500");
|
|
$teal-600: map-get($teal-list, "600");
|
|
$teal-700: map-get($teal-list, "700");
|
|
$teal-800: map-get($teal-list, "800");
|
|
$teal-900: map-get($teal-list, "900");
|
|
|
|
// Orange
|
|
$orange-list: (
|
|
"100": #FFFAF0,
|
|
"200": #FEEBC8,
|
|
"300": #FBD38D,
|
|
"400": #F6AD55,
|
|
"500": #ED8936,
|
|
"600": #DD6B20,
|
|
"700": #C05621,
|
|
"800": #9C4221,
|
|
"900": #7B341E
|
|
);
|
|
|
|
$orange-100: map-get($orange-list, "100");
|
|
$orange-200: map-get($orange-list, "200");
|
|
$orange-300: map-get($orange-list, "300");
|
|
$orange-400: map-get($orange-list, "400");
|
|
$orange-500: map-get($orange-list, "500");
|
|
$orange-600: map-get($orange-list, "600");
|
|
$orange-700: map-get($orange-list, "700");
|
|
$orange-800: map-get($orange-list, "800");
|
|
$orange-900: map-get($orange-list, "900");
|
|
|
|
// Mixins
|
|
//
|
|
// .header-display :before size and position
|
|
@mixin headerDisplayBefore($size) {
|
|
$height: $size * 1.5;
|
|
$horizontalAlignment: -15px;
|
|
$verticalAlignment: $height * -0.25;
|
|
height: $height;
|
|
transform: translate($horizontalAlignment, 0);
|
|
margin-bottom: $verticalAlignment;
|
|
}
|
|
|