263 lines
5.8 KiB
SCSS
263 lines
5.8 KiB
SCSS
// ----------------------------------------------
|
|
// Variables Style
|
|
// ----------------------------------------------
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
|
|
|
|
|
|
// colors
|
|
$white: #fff !default;
|
|
$gray-100: #F6F9FC !default;
|
|
$gray-200: #EAEFF4 !default;
|
|
$gray-300: #DFE5EF !default;
|
|
$gray-400: #7C8FAC !default;
|
|
$gray-500: #5A6A85 !default;
|
|
$gray-600: #2A3547 !default;
|
|
$black: #000 !default;
|
|
|
|
// Color
|
|
$blue: #5D87FF !default;
|
|
$indigo: #6610f2 !default;
|
|
$purple: #6f42c1 !default;
|
|
$pink: #d63384 !default;
|
|
$red: #FA896B !default;
|
|
$orange: #fd7e14 !default;
|
|
$yellow: #FFAE1F !default;
|
|
$green: #13DEB9 !default;
|
|
$teal: #20c997 !default;
|
|
$cyan: #539BFF !default;
|
|
|
|
// Main Colors
|
|
$primary: $blue !default;
|
|
$secondary: #49BEFF !default;
|
|
$success: $green !default;
|
|
$info: $cyan !default;
|
|
$warning: $yellow !default;
|
|
$danger: $red !default;
|
|
$light: $gray-100 !default;
|
|
$muted: $gray-500 !default;
|
|
$dark: $gray-600 !default;
|
|
$dark-light: $gray-600 !default;
|
|
$light-gray: $gray-100 !default;
|
|
|
|
// light colors
|
|
$light-primary: #ECF2FF;
|
|
$light-secondary: #E8F7FF;
|
|
$light-info: #EBF3FE;
|
|
$light-success: #E6FFFA;
|
|
$light-warning: #FEF5E5;
|
|
$light-danger: #FBF2EF;
|
|
$light-indigo: #EBF3FE;
|
|
|
|
// dark colors
|
|
$dark-primary: #7067a4;
|
|
$dark-warning: #ae8e59;
|
|
$dark-info: #6099a9;
|
|
$dark-danger: #b18d7c;
|
|
$dark-success: #5cab99;
|
|
$dark-indigo: #557fb9;
|
|
|
|
// Theme Colorss
|
|
$theme-colors: (
|
|
"primary": $primary,
|
|
"secondary": $secondary,
|
|
"success": $success,
|
|
"info": $info,
|
|
"warning": $warning,
|
|
"danger": $danger,
|
|
"light": $light,
|
|
"dark": $dark,
|
|
"muted": $muted,
|
|
"indigo": $indigo,
|
|
"light-primary": $light-primary,
|
|
"light-secondary": $light-secondary,
|
|
"light-info": $light-info,
|
|
"light-success": $light-success,
|
|
"light-warning": $light-warning,
|
|
"light-danger": $light-danger,
|
|
"light-indigo": $light-indigo,
|
|
"dark-primary": $dark-primary,
|
|
"dark-info": $dark-info,
|
|
"dark-success": $dark-success,
|
|
"dark-warning": $dark-warning,
|
|
"dark-danger": $dark-danger,
|
|
"dark-indigo": $dark-indigo,
|
|
"dark-light": $dark-light,
|
|
"light-gray": $light-gray,
|
|
) !default;
|
|
|
|
// Spacer
|
|
$spacer: 1rem !default;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * 0.25,
|
|
2: $spacer * 0.5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
6: 10px,
|
|
7: 20px,
|
|
8: 30px,
|
|
9: 60px,
|
|
10: 90px,
|
|
11: 70px,
|
|
12: 120px,
|
|
13: 130px,
|
|
14: 140px,
|
|
15: 150px,
|
|
) !default;
|
|
|
|
$utilities: () !default;
|
|
$utilities: (
|
|
"width": (
|
|
property: width,
|
|
class: w,
|
|
values: (
|
|
20: 20%,
|
|
25: 25%,
|
|
30: 30%,
|
|
40: 40%,
|
|
50: 50%,
|
|
60: 60%,
|
|
70: 70%,
|
|
75: 75%,
|
|
85: 85%,
|
|
100: 100%,
|
|
auto: auto,
|
|
),
|
|
),
|
|
);
|
|
|
|
// Common
|
|
$min-contrast-ratio: 1.7 !default;
|
|
|
|
// Margins
|
|
$enable-negative-margins: true !default;
|
|
$enable-shadows: true !default;
|
|
|
|
// Global
|
|
$text-muted: $muted !default;
|
|
$grid-gutter-width: 24px !default;
|
|
|
|
// Font Weight
|
|
$font-weight-lighter: 300 !default;
|
|
$font-weight-light: 300 !default;
|
|
$font-weight-normal: 400 !default;
|
|
$font-weight-bold: 500 !default;
|
|
$font-weight-bolder: 700 !default;
|
|
$font-weight-base: $font-weight-normal !default;
|
|
|
|
// Buttons
|
|
$btn-padding-y: 13px !default;
|
|
$btn-padding-x: 34px !default;
|
|
$btn-font-weight: 400 !default;
|
|
$btn-border-radius: 7px !default;
|
|
$btn-font-size: 16px !default;
|
|
$btn-box-shadow: unset !default;
|
|
|
|
// Font Family
|
|
$font-family-sans-serif: "Plus Jakarta Sans", sans-serif !default;
|
|
|
|
// Font Sizes
|
|
$font-sizes: (
|
|
1: 10px,
|
|
2: 12px,
|
|
3: 14px,
|
|
4: 16px,
|
|
5: 18px,
|
|
6: 20px,
|
|
7: 24px,
|
|
8: 30px,
|
|
9: 36px,
|
|
10: 40px,
|
|
11: 45px,
|
|
12: 32px,
|
|
13: 54px,
|
|
14: 21px,
|
|
) !default;
|
|
$font-size-base: 0.875rem !default;
|
|
|
|
// scss-docs-start container-max-widths
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1200px,
|
|
) !default;
|
|
// scss-docs-end container-max-widths
|
|
|
|
// Line Heght
|
|
$line-height-base: 1.5 !default;
|
|
$line-height-sm: 1.25 !default;
|
|
$line-height-lg: 2 !default;
|
|
|
|
// Body
|
|
$body-bg: $white !default;
|
|
$body-color: #5D7287 !default;
|
|
|
|
// Heading
|
|
$headings-color: $dark !default;
|
|
$headings-font-weight: 500 !default;
|
|
|
|
// Border Color
|
|
$border-color: #ebf1f6 !default;
|
|
|
|
|
|
// Box Shadow
|
|
$box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.12) !default;
|
|
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
|
|
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
|
|
$box-shadow-inset: unset !default;
|
|
|
|
// Card
|
|
$card-title-color: $dark !default;
|
|
$card-subtitle-color: $dark !default;
|
|
$card-spacer-y: 30px !default;
|
|
$card-spacer-x: 30px !default;
|
|
$card-border-width: 0px !default;
|
|
$card-border-radius: 7px;
|
|
$card-box-shadow: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !default;
|
|
|
|
// Border Radius
|
|
$border-radius: 6px !default;
|
|
$border-radius-sm: 8px !default;
|
|
$border-radius-lg: 10px !default;
|
|
$border-radius-md: 10px !default;
|
|
$border-radius-xl: 12px !default;
|
|
|
|
|
|
// Tabs
|
|
$nav-link-color: $dark !default;
|
|
$nav-link-hover-color: $dark !default;
|
|
$nav-tabs-link-active-color: $white !default;
|
|
$nav-tabs-link-active-bg: $primary !default;
|
|
$nav-tabs-border-radius: 7px !default;
|
|
$nav-tabs-border-width: 0 !default;
|
|
$nav-link-font-size: 16px !default;
|
|
$nav-link-font-weight: $font-weight-normal !default;
|
|
|
|
// Tooltips
|
|
$tooltip-font-size: 12px !default;
|
|
$tooltip-bg: $dark;
|
|
|
|
|
|
// Dropdown
|
|
$dropdown-border-radius: 7px !default;
|
|
$dropdown-border-width: 0 !default;
|
|
$dropdown-item-padding-y: 10px !default;
|
|
$dropdown-link-hover-bg: $gray-100 !default;
|
|
$dropdown-link-active-bg: $gray-100;
|
|
$dropdown-link-active-color: $dark;
|
|
$dropdown-box-shadow: 0px 4px 10px rgba(145, 158, 171, 0.16);
|
|
|
|
// Offcanvas
|
|
$offcanvas-border-width: 0 !default;
|
|
$offcanvas-horizontal-width: 270px !default;
|
|
|
|
// Navbar
|
|
$navbar-dark-color: rgba($white, 0.6) !default;
|
|
$navbar-dark-hover-color: rgba($white, 1) !default;
|
|
$navbar-light-color: rgba(0, 0, 0, 0.87) !default;
|
|
$navbar-light-hover-color: $primary !default;
|