157 lines
3.7 KiB
SCSS
157 lines
3.7 KiB
SCSS
// $screen-xl: 2559px;
|
|
$screen-l: 1439px;
|
|
$screen-ls: 1280px;
|
|
$screen-m: 1023px;
|
|
$screen-s: 767px;
|
|
// $screen-xs: 424px;
|
|
|
|
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
|
// Generic colors
|
|
$color-generic-black: #000000;
|
|
$color-generic-white: #ffffff;
|
|
$color-generic-none: #00000000;
|
|
|
|
// Neutral colors
|
|
$color-neutral-50: #f7f8f8;
|
|
$color-neutral-100: #edeff1;
|
|
$color-neutral-200: #d7dce0;
|
|
$color-neutral-300: #b4bec5;
|
|
$color-neutral-400: #8b9aa5;
|
|
$color-neutral-500: #6d7e8a;
|
|
$color-neutral-600: #576672;
|
|
$color-neutral-700: #47535d;
|
|
$color-neutral-800: #3e474e;
|
|
$color-neutral-900: #373e44;
|
|
$color-neutral-950: #24282e;
|
|
|
|
// Primary colors
|
|
$color-primary-50: #e5eefa;
|
|
$color-primary-100: #b7d1f1;
|
|
$color-primary-200: #89b3e7;
|
|
$color-primary-300: #5c96de;
|
|
$color-primary-400: #2e78d4;
|
|
$color-primary-500: #005bcb;
|
|
$color-primary-600: #004eb8;
|
|
$color-primary-700: #0040a4;
|
|
$color-primary-800: #013391;
|
|
$color-primary-900: #01257d;
|
|
$color-primary-950: #01186a;
|
|
|
|
// Secondary colors
|
|
$color-secondary-50: #fff3ed;
|
|
$color-secondary-100: #ffe4d4;
|
|
$color-secondary-200: #ffc5a8;
|
|
$color-secondary-300: #ff9c70;
|
|
$color-secondary-400: #ff6737;
|
|
$color-secondary-500: #ff4617;
|
|
$color-secondary-600: #f02505;
|
|
$color-secondary-700: #c71707;
|
|
$color-secondary-800: #9e150e;
|
|
$color-secondary-900: #7f140f;
|
|
$color-secondary-950: #450605;
|
|
|
|
// Error colors
|
|
$color-error-50: #fef2f2;
|
|
$color-error-100: #fee2e1;
|
|
$color-error-200: #fecaca;
|
|
$color-error-300: #fda5a5;
|
|
$color-error-400: #f87172;
|
|
$color-error-500: #ef4444;
|
|
$color-error-600: #dc2625;
|
|
$color-error-700: #b91c1d;
|
|
$color-error-800: #991b1c;
|
|
$color-error-900: #7f1c1d;
|
|
$color-error-950: #450a0a;
|
|
|
|
// Warning colors
|
|
$color-warning-50: #fffbeb;
|
|
$color-warning-100: #fff4c6;
|
|
$color-warning-200: #ffe788;
|
|
$color-warning-300: #ffd54a;
|
|
$color-warning-400: #ffbd12;
|
|
$color-warning-500: #f99f09;
|
|
$color-warning-600: #de7702;
|
|
$color-warning-700: #b75306;
|
|
$color-warning-800: #943f0d;
|
|
$color-warning-900: #7a340e;
|
|
$color-warning-950: #461a02;
|
|
|
|
// Sucess colors
|
|
$color-success-50: #effdf4;
|
|
$color-success-100: #dcfce8;
|
|
$color-success-200: #bbf7d2;
|
|
$color-success-300: #87efb0;
|
|
$color-success-400: #49de86;
|
|
$color-success-500: #22c564;
|
|
$color-success-600: #15a450;
|
|
$color-success-700: #178040;
|
|
$color-success-800: #166437;
|
|
$color-success-900: #14532f;
|
|
$color-success-950: #052e18;
|
|
|
|
// Info colors
|
|
$color-info-50: #edf9ff;
|
|
$color-info-100: #d8f1ff;
|
|
$color-info-200: #b9e7ff;
|
|
$color-info-300: #8adaff;
|
|
$color-info-400: #51c3fe;
|
|
$color-info-500: #29a6ff;
|
|
$color-info-600: #1088fe;
|
|
$color-info-700: #0b71ef;
|
|
$color-info-800: #0e58bc;
|
|
$color-info-900: #134d95;
|
|
$color-info-950: #11305a;
|
|
|
|
// Soft colors (TO DELETE AFTER)
|
|
$color-primary-500-soft: #005bcb4d;
|
|
$color-secondary-500-soft: #ff46174d;
|
|
$color-info-500-soft: #29a6ff4d;
|
|
$color-success-600-soft: #15a4504d;
|
|
$color-warning-500-soft: #f99f094d;
|
|
$color-error-600-soft: #dc26254d;
|
|
|
|
$modal-background: rgba(0, 0, 0, 0.44);
|
|
|
|
$shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07);
|
|
$shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);
|
|
|
|
$spacing-0-25: 2px;
|
|
$spacing-0-5: 4px;
|
|
$spacing-0-75: 6px;
|
|
$spacing-1: 8px;
|
|
$spacing-1-5: 12px;
|
|
$spacing-2: 16px;
|
|
$spacing-3: 24px;
|
|
$spacing-4: 32px;
|
|
$spacing-5: 40px;
|
|
$spacing-6: 48px;
|
|
$spacing-7: 56px;
|
|
$spacing-8: 64px;
|
|
$spacing-9: 72px;
|
|
$spacing-10: 80px;
|
|
$spacing-11: 88px;
|
|
$spacing-12: 96px;
|
|
$spacing-13: 104px;
|
|
$spacing-14: 112px;
|
|
$spacing-15: 120px;
|
|
$spacing-16: 128px;
|
|
|
|
$radius-xs: 2px;
|
|
$radius-sm: 4px;
|
|
$radius-md: 8px;
|
|
$radius-lg: 16px;
|
|
$radius-xl: 24px;
|
|
$radius-2xl: 32px;
|
|
$radius-3xl: 360px;
|
|
|
|
$background-primary: #ffffff;
|
|
$background-elevation-1: #f7f8f8;
|
|
$background-elevation-2: #edeff1;
|
|
|
|
$opacity-disabled: 0.3;
|
|
|
|
$shadow-sm: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
|
|
$shadow-md: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
|
|
$shadow-lg: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
|