219 lines
5.3 KiB
SCSS
219 lines
5.3 KiB
SCSS
//Colors
|
|
|
|
// White/black
|
|
$white: #ffffff;
|
|
$black: #000000;
|
|
$black-100: #0a0a0a;
|
|
|
|
// Blues
|
|
$blue-100: #e4f1f7; // Used in theme
|
|
$blue-150: #e5f1fa;
|
|
$blue-200: #c1dfee;
|
|
$blue-300: #9fcee6;
|
|
$blue-400: #69adcf; // Used in theme
|
|
$blue-500: #3b8fb8;
|
|
$blue: #0070d1; // Default Blue
|
|
$blue-700: #06577c;
|
|
$blue-800: #003d58;
|
|
$blue-900: #002433; // Used in theme
|
|
|
|
// Reds
|
|
$red-100: #ffe6e4;
|
|
$red-200: #fcbfbb;
|
|
$red-300: #f89892;
|
|
$red-400: #e65c53;
|
|
$red: #db0020; // Default Red
|
|
$red-600: #ac160b;
|
|
$red-700: #840900;
|
|
$red-800: #5b0600;
|
|
$red-900: #330300;
|
|
$red-1000: #a80019;
|
|
$red-1100: #791710;
|
|
|
|
// Greens
|
|
$green-100: #e3f2ea;
|
|
$green-200: #bcedd4;
|
|
$green-300: #94d7b6;
|
|
$green-400: #5abc8c; // Used in theme
|
|
$green-500: #2ca168;
|
|
$green: #0c7e47; // Default Green
|
|
$green-600: #e7f2ed;
|
|
$green-700: #006a36;
|
|
$green-800: #004f28;
|
|
$green-900: #00331a;
|
|
$green-1000: #00723e;
|
|
|
|
// Yellows
|
|
$yellow-100: #fff5eb;
|
|
$yellow-200: #ffe1c6;
|
|
$yellow-300: #ffcaa0;
|
|
$yellow-400: #f5975d;
|
|
$yellow: #e86421; // Default Yellow
|
|
$yellow-600: #bb4b06;
|
|
$yellow-700: #8e3c00;
|
|
$yellow-800: #602d00;
|
|
$yellow-900: #331a00;
|
|
|
|
// Grays
|
|
$gray-100: #f5f5f5; // Used in theme
|
|
$gray-200: #e3e4e4; // Used in theme
|
|
$gray-300: #d2d4d4;
|
|
$gray: #b0b3b3; // Default Gray
|
|
$gray-500: #8e9292; // Used in theme
|
|
$gray-550: #727676; // Used in theme
|
|
$gray-600: #4d5151; // Used in theme
|
|
$gray-650: #525656;
|
|
$gray-700: #303333; // Used in theme
|
|
$gray-800: #222424; // Used in theme
|
|
$gray-900: #181a1a; // Used in theme
|
|
$gray-1000: #b3b4b5;
|
|
$gray-1100: #4b4c4e;
|
|
|
|
//orange
|
|
$orange-600: #e86421;
|
|
$orange-100: #fff5eb;
|
|
|
|
// Miscellaneous Colors
|
|
$indigo: #6610f2;
|
|
$purple: #6f42c1;
|
|
$pink: #d63384;
|
|
$orange: #fd7e14;
|
|
$teal: #20c997;
|
|
$cyan: #0dcaf0;
|
|
|
|
// scss-docs-start colors-map
|
|
$colors: (
|
|
"blue": $blue,
|
|
"indigo": $indigo,
|
|
"purple": $purple,
|
|
"pink": $pink,
|
|
"red": $red,
|
|
"orange": $orange,
|
|
"yellow": $yellow,
|
|
"green": $green,
|
|
"teal": $teal,
|
|
"cyan": $cyan,
|
|
"white": $white,
|
|
"gray": $gray,
|
|
"gray-dark": $gray-500,
|
|
);
|
|
|
|
// scss-docs-start theme-color-variables
|
|
$primary: $blue;
|
|
$secondary: $red;
|
|
$success: $green;
|
|
$info: $cyan;
|
|
$warning: $yellow;
|
|
$danger: $red;
|
|
$light: $gray-100;
|
|
$dark: $gray-500;
|
|
|
|
// scss-docs-start theme-colors-map
|
|
$theme-colors: (
|
|
"primary": $primary,
|
|
"secondary": $secondary,
|
|
"success": $success,
|
|
"info": $info,
|
|
"warning": $warning,
|
|
"danger": $danger,
|
|
"light": $light,
|
|
"dark": $dark,
|
|
);
|
|
|
|
//Default font color
|
|
$body-color: $gray-600;
|
|
|
|
//Fonts
|
|
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
|
|
$font-family-monospace:
|
|
UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
$font-family-sans-serif-semibold: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
|
$font-family-sans-serif-bold: UrbanistBold, Arial, Helvetica, sans-serif;
|
|
$font-family-sans-serif-extrabold: UrbanistExtraBold, Arial, Helvetica, sans-serif;
|
|
$font-family-sans-serif-medium-italic: UrbanistMedium_Italic, Arial, Helvetica, sans-serif;
|
|
$font-family-sans-serif-bold-italic: UrbanistBold_Italic, Arial, Helvetica, sans-serif;
|
|
|
|
// stylelint-enable value-keyword-case
|
|
$font-family-base: $font-family-sans-serif;
|
|
$font-family-code: $font-family-monospace;
|
|
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
|
|
|
|
$font-size-12: $font-size-base * 0.75; // 12px
|
|
$font-size-14: $font-size-base * 0.875; // 14px
|
|
$font-size-20: $font-size-base * 1.25; // 20px
|
|
|
|
//Custom Font size (extra small)
|
|
$font-size-xsm: $font-size-base * 0.75;
|
|
$font-sizes: (
|
|
7: $font-size-xsm,
|
|
);
|
|
|
|
//Font weight
|
|
$font-weight-lighter: lighter;
|
|
$font-weight-light: 300;
|
|
$font-weight-normal: 400;
|
|
$font-weight-bold: 500;
|
|
$font-weight-600: 600;
|
|
$font-weight-700: 700;
|
|
$font-weight-bolder: bolder;
|
|
|
|
//Headings
|
|
$h1-font-size: $font-size-base * 3;
|
|
$h2-font-size: $font-size-base * 2.625;
|
|
$h3-font-size: $font-size-base * 2;
|
|
$h4-font-size: $font-size-base * 1.625;
|
|
//$h5-font-size: $font-size-base * 1.25;// Font size set in customMixins.scss
|
|
$h6-font-size: $font-size-base * 0.875;
|
|
|
|
//Border Radius
|
|
// Helper classes are rounded, rounded-1, rounded-2, rounded-3
|
|
$border-radius: 0.25rem;
|
|
$border-radius-sm: 0.2rem;
|
|
$border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
|
|
$border-radius-pill: 50rem;
|
|
|
|
//Spacing
|
|
// 8 spacers available instead of the usual 5
|
|
$spacer: 1rem;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * 0.25,
|
|
/* 4px */ 2: $spacer * 0.5,
|
|
/* 8px */ 3: $spacer * 0.75,
|
|
/* 12px */ 4: $spacer * 1,
|
|
/* 16px */ 5: $spacer * 1.5,
|
|
/* 24px */ 6: $spacer * 2,
|
|
/* 32px */ 7: $spacer * 2.5,
|
|
/* 40px */ 8: $spacer * 3 /* 48px */,
|
|
);
|
|
|
|
//Enable negative spacing (does NOT work on padding)
|
|
$enable-negative-margins: true;
|
|
|
|
//Shadow
|
|
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
|
|
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
|
|
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default
|
|
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
|
|
|
|
//Alerts
|
|
$alert-bg-scale: -90%;
|
|
$alert-border-scale: -100%;
|
|
$alert-color-scale: 40%;
|
|
|
|
//Modal animation
|
|
// This affects all [Bootstrap] modals
|
|
$modal-fade-transform: translate(0, 100%);
|
|
$modal-backdrop-opacity: 0;
|
|
|
|
//Disable default !important behavior
|
|
$enable-important-utilities: false;
|
|
|
|
//Bootstrap Grid Breakpoints - Use these breakpoints only
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1440px,
|
|
);
|