Files
crater/resources/assets/sass/variables.scss
2019-11-17 12:37:13 +05:30

182 lines
6.5 KiB
SCSS
Vendored

// Font Awesome
// -------------------------
$fa-css-prefix: icon-fa !default;
// Colors
// -------------------------
$crater-theme: #5851D8;
$crater-theme--light: #817AE3;
$crater-theme--very-light: rgba(88, 81, 216, 0.2);
$gray--very-light: #F9FBFF;
$gray--light: #EBF1FA;
$gray: #B9C1D1;
$gray--dark: #A5ACC1;
$gray--very-dark: #595959;
$red--dark: #9B2C2C;
$red--very-light: #FED7D7;
$ls-color-black: #040405;
$ls-color-black--light: #263B5E;
$ls-color-blue: #15B2EC;
$ls-color-green: #00C99C;
$ls-color-red: #FB7178;
$ls-color-secondary: #55547A;
$ls-color-gray--very-light: $gray--very-light;
$ls-color-gray--light: $gray--light;
$ls-color-gray: $gray;
$ls-color-gray--dark: $gray--dark;
$ls-color-gray--very-dark: $gray--very-dark;
$ls-color-light-blue: #15B2EC;
$ls-color-orange: #F3AF4E;
$ls-color-red--dark: $red--dark;
$ls-color-red--very-light: $red--very-light;
$color-warning-light: #6C432E;
$warning-light: #F8EDCB;
$color-success-light: #354930;
$success-light: #D5EED0;
// Theme Colors
// -------------------------
$ls-color-primary: $crater-theme;
$ls-color-primary--light: $crater-theme--light;
$ls-color-primary--very-light: $crater-theme--very-light;
// Gradients
// -------------------------
$primary-to-primary-light-gradient: linear-gradient(to right, $ls-color-primary, $ls-color-primary--light);
$primary-light-to-primary-gradient: linear-gradient(to right, $ls-color-primary--light, $ls-color-primary);
// Shadows
// -------------------------
$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
$shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
// Bootstrap Overrides
// -------------------------
$white: #fff;
$brand-primary: $crater-theme;
$brand-secondary: $ls-color-black;
$brand-success: $ls-color-green;
$brand-info: $ls-color-light-blue;
$brand-warning: $ls-color-orange;
$brand-danger: $ls-color-red;
$brand-dark: $ls-color-secondary;
$btn-secondary-color: $white;
$btn-secondary-bg: $ls-color-black;
$btn-secondary-border: $ls-color-black;
$theme-colors: (
primary: $ls-color-primary,
secondary: $ls-color-secondary,
success: $ls-color-green,
info: $ls-color-light-blue,
warning: $ls-color-orange,
danger: $ls-color-red,
light: $ls-color-primary--light,
dark: $ls-color-secondary
) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-dark-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
$navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-light-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
// -- HEADER SECTION --
$header-bg-color: $ls-color-primary;
$header-font-color: $white;
$header-buttons-bg-color: $ls-color-black;
$header-buttons-bg-color--hover: lighten($ls-color-black,5%);
$header-buttons-font-color: $white;
// -- SIDEBAR SECTION --
$sidebar-bg-color: $ls-color-secondary;
$sidebar-font-color: $white;
$sidebar-icon-color: #9EA9C4;
$sidemenu-item-bg-color--hover: lighten($ls-color-black,10%);
$sidemenu-item-bg-color--active: transparent;
$sidemenu-item-font-color: $white;
$sidemenu-item-font-color--active: $ls-color-primary;
$sidemenu-arrow-color: $ls-color-gray--very-dark;
$sidemenu-submenu-bg: lighten($ls-color-black,3%);
// -- DROPDOWN --
$dropdown-bg: $ls-color-black;
$dropdown-link-color : $white;
$dropdown-border-color : $ls-color-black;
$dropdown-divider-bg : $ls-color-gray--very-dark;
$dropdown-header-color : $ls-color-primary;
$dropdown-header-border-color : $ls-color-gray--very-dark;
// -- HORIZONTAL MENU --
$header-bottom-bg : $ls-color-black;
$header-menu-item-font-color : darken($white,10%);
$header-menu-item-font-color--active : $white;
$header-menu-item-bg-color--hover : lighten($ls-color-black,10%);
$header-menu-item-bg-color--active : lighten($ls-color-black,10%);
// -- MISC --
$code-bg : $ls-color-black;
$code-color : $ls-color-primary;
// Fonts
//----------------------------------
$base-font-family : 'Poppins', sans-serif;
$base-font-color : lighten($ls-color-black, 15%);
$heading-font-color : $ls-color-black;
$font-family-base : $base-font-family;
$font-size-base: 1rem;
$font-size-section-title : 1.25rem;
$font-size-semi-section-title : 1.1rem;
$font-size-page-title : 1.5rem;
// Breakpoints
//----------------------------------
$x-small-breakpoint : 480px;
$x-small-breakpoint-below : $x-small-breakpoint - 1px;
$small-breakpoint : 768px;
$small-breakpoint-below : $small-breakpoint - 1px;
$medium-breakpoint : 992px;
$medium-breakpoint-below : $medium-breakpoint - 1px;
$large-breakpoint : 1240px;
$large-breakpoint-below : $large-breakpoint - 1px;
$x-large-breakpoint : 1800px;
$x-large-breakpoint-below : $x-large-breakpoint - 1px;
// Other
//----------------------------------
$ls-login-bg-color-overlay: rgba(38 ,50 ,56,.6);
$ls-login-3-bg-color-overlay: rgba(0, 0 , 0, .35);
$headings-margin-bottom: 1.2rem;
$card-cap-bg: #fff;
$pace-loader-color : darken($ls-color-primary, 10%);