FanicaSite/assets/css/scss/helpers/_variables.scss

91 lines
2.6 KiB
SCSS

//
// Font //
//
$font-family-primary: 'Open Sans', sans-serif;
$font-family-secondary: 'Playfair Display', serif;
$font-family-tertiary: 'Poppins', sans-serif;
$font-weight-black: 900;
$font-weight-extra-bold: 800;
$font-weight-bold: 700;
$font-weight-semi-bold: 600;
$font-weight-medium: 500;
$font-weight-regular: 400;
$font-weight-light: 300;
$font-weight-extra-light: 200;
$font-weight-thin: 100;
//
// Colors //
//
$color-white: #fff;
$color-black: #000;
$color-black-09: rgba(0, 0, 0, 0.9);
$color-black-08: rgba(0, 0, 0, 0.8);
$color-black-07: rgba(0, 0, 0, 0.7);
$color-black-06: rgba(0, 0, 0, 0.6);
$color-black-05: rgba(0, 0, 0, 0.5);
$color-black-04: rgba(0, 0, 0, 0.4);
$color-black-03: rgba(0, 0, 0, 0.3);
$color-black-02: rgba(0, 0, 0, 0.2);
$color-black-015: rgba(0, 0, 0, 0.15);
$color-black-01: rgba(0, 0, 0, 0.1);
$color-black-005: rgba(0, 0, 0, 0.05);
$color-white-09: rgba(255, 255, 255, 0.9);
$color-white-08: rgba(255, 255, 255, 0.8);
$color-white-07: rgba(255, 255, 255, 0.7);
$color-white-06: rgba(255, 255, 255, 0.6);
$color-white-05: rgba(255, 255, 255, 0.5);
$color-white-04: rgba(255, 255, 255, 0.4);
$color-white-03: rgba(255, 255, 255, 0.3);
$color-white-02: rgba(255, 255, 255, 0.2);
$color-white-015: rgba(255, 255, 255, 0.15);
$color-white-01: rgba(255, 255, 255, 0.1);
$color-primary: #7C7C7C;
$color-primary-lighter: #AAAAAA;
$color-green: #24963e;
$color-green-lighter: #28a745;
$color-red: #c62f3e;
$color-red-lighter: #dc3545;
$color-warning: #e5ad06;
$color-warning-lighter: #ffc107;
$color-info: #1491a5;
$color-info-lighter: #17a2b8;
$color-dark: rgb(19, 21, 23);
$color-dark-lighter: rgb(26, 28, 30);
$color-blue: #007bff;
//
// Background colors //
//
$bg-dark: rgb(19, 21, 23);
$bg-dark-lighter: rgb(26, 28, 30);
$bg-dark-lightest: rgb(33, 35, 37);
$bg-dark-grey: rgb(48, 50, 52);
$bg-dark-grey-09: rgba(48, 50, 52, 0.9);
$bg-dark-grey-09: rgba(48, 50, 52, 0.9);
$bg-dark-grey-08: rgba(48, 50, 52, 0.8);
$bg-dark-grey-07: rgba(48, 50, 52, 0.7);
$bg-dark-grey-06: rgba(48, 50, 52, 0.6);
$bg-dark-grey-05: rgba(48, 50, 52, 0.5);
$bg-dark-grey-04: rgba(48, 50, 52, 0.4);
$bg-dark-grey-03: rgba(48, 50, 52, 0.3);
$bg-dark-grey-02: rgba(48, 50, 52, 0.2);
$bg-dark-grey-01: rgba(48, 50, 52, 0.1);
$bg-grey: rgb(239, 242, 245);
$bg-grey-lighter: rgb(242, 245, 248);
$bg-grey-lightest: rgb(245, 248, 251);
//
// Border colors //
//
$border-dark: $color-dark;
$border-grey: rgb(227, 230, 233);
//
// Button colors //
//
$button-dark: $color-dark;
$button-dark-lighter: rgb(29, 32, 35);
$button-grey: rgb(229, 232, 235);
$button-grey-lighter: rgb(239, 242, 245);
$button-grey-darker: rgb(221, 224, 227);