310 lines
7.7 KiB
SCSS
310 lines
7.7 KiB
SCSS
|
|
||
|
|
////////// COLOR SYSTEM //////////
|
||
|
|
|
||
|
|
$blue: #5E50F9;
|
||
|
|
$indigo: #6610f2;
|
||
|
|
$purple: #6a008a;
|
||
|
|
$pink: #E91E63;
|
||
|
|
$red: #f96868;
|
||
|
|
$orange: #f2a654;
|
||
|
|
$yellow: #f6e84e;
|
||
|
|
$green: #46c35f;
|
||
|
|
$teal: #58d8a3;
|
||
|
|
$cyan: #57c7d4;
|
||
|
|
$black: #000;
|
||
|
|
$white: #ffffff;
|
||
|
|
$white-smoke: #f2f7f8;
|
||
|
|
$violet: #41478a;
|
||
|
|
$darkslategray : #2e383e;
|
||
|
|
$dodger-blue : #3498db;
|
||
|
|
|
||
|
|
|
||
|
|
$colors: (
|
||
|
|
blue: $blue,
|
||
|
|
indigo: $indigo,
|
||
|
|
purple: $purple,
|
||
|
|
pink: $pink,
|
||
|
|
red: $red,
|
||
|
|
orange: $orange,
|
||
|
|
yellow: $yellow,
|
||
|
|
green: $green,
|
||
|
|
teal: $teal,
|
||
|
|
cyan: $cyan,
|
||
|
|
white: $white,
|
||
|
|
gray: #434a54,
|
||
|
|
gray-light: #aab2bd,
|
||
|
|
gray-lighter: #e8eff4,
|
||
|
|
gray-lightest: #e6e9ed,
|
||
|
|
gray-dark: #0f1531,
|
||
|
|
black: #000000
|
||
|
|
);
|
||
|
|
|
||
|
|
$blue: $blue;
|
||
|
|
$indigo: $indigo;
|
||
|
|
$purple: $purple;
|
||
|
|
$pink: $pink;
|
||
|
|
$red: $red;
|
||
|
|
$orange: $orange;
|
||
|
|
$yellow: $yellow;
|
||
|
|
$green: $green;
|
||
|
|
$teal: $teal;
|
||
|
|
$cyan: $cyan;
|
||
|
|
$white: $white;
|
||
|
|
$gray: #434a54;
|
||
|
|
$gray-light: #aab2bd;
|
||
|
|
$gray-lighter: #e8eff4;
|
||
|
|
$gray-lightest: #e6e9ed;
|
||
|
|
$gray-dark: #0f1531;
|
||
|
|
$black: #000000;
|
||
|
|
|
||
|
|
$theme-colors: (
|
||
|
|
primary: #248afd,
|
||
|
|
secondary: #a3a4a5,
|
||
|
|
success: #71c016,
|
||
|
|
info: #68afff,
|
||
|
|
warning: #f5a623,
|
||
|
|
danger: #ff4747,
|
||
|
|
light: #f8f9fa,
|
||
|
|
dark: #282f3a
|
||
|
|
);
|
||
|
|
|
||
|
|
$primary: #248afd;
|
||
|
|
$secondary: #a3a4a5;
|
||
|
|
$success: #71c016;
|
||
|
|
$info: #68afff;
|
||
|
|
$warning: #f5a623;
|
||
|
|
$danger: #ff4747;
|
||
|
|
$light: #f8f9fa;
|
||
|
|
$dark: #282f3a;
|
||
|
|
|
||
|
|
$theme-gradient-colors: (
|
||
|
|
primary: linear-gradient(230deg, #759bff, #843cf6),
|
||
|
|
secondary: linear-gradient(to right, #e7ebf0, #868e96),
|
||
|
|
success: linear-gradient(45deg, #7bffce, #30c93e),
|
||
|
|
info: linear-gradient(to bottom, #0e4cfd, #6a8eff),
|
||
|
|
warning: linear-gradient(135deg, #ffc480, #ff763b),
|
||
|
|
danger: linear-gradient(316deg, #fc5286, #fbaaa2),
|
||
|
|
light: linear-gradient(to right, #cfd9df 0%, #e2ebf0 100%),
|
||
|
|
dark: linear-gradient(to right, #7d7979 0%, #000000 100%)
|
||
|
|
);
|
||
|
|
|
||
|
|
////////// COLOR SYSTEM //////////
|
||
|
|
|
||
|
|
////////// COLOR VARIABLES //////////
|
||
|
|
$content-bg: #dddce1;
|
||
|
|
$border-color: #c9ccd7;
|
||
|
|
|
||
|
|
////////// COLOR VARIABLES //////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
////////// SOCIAL COLORS //////////
|
||
|
|
|
||
|
|
$social-colors: (
|
||
|
|
twitter: #2caae1,
|
||
|
|
facebook: #3b579d,
|
||
|
|
google: #dc4a38,
|
||
|
|
linkedin: #0177b5,
|
||
|
|
pinterest: #cc2127,
|
||
|
|
youtube: #e52d27,
|
||
|
|
github: #333333,
|
||
|
|
behance: #1769ff,
|
||
|
|
dribbble: #ea4c89,
|
||
|
|
reddit: #ff4500
|
||
|
|
);
|
||
|
|
|
||
|
|
////////// SOCIAL COLORS //////////
|
||
|
|
|
||
|
|
////////// FONTS//
|
||
|
|
|
||
|
|
$type: 'Roboto', sans-serif;
|
||
|
|
|
||
|
|
$default-font-size: .875rem; // 14px as base font size
|
||
|
|
|
||
|
|
$text-muted: #686868;
|
||
|
|
$body-color: #000;
|
||
|
|
|
||
|
|
////////// FONT VARIABLES //////////
|
||
|
|
|
||
|
|
///////// FOOTER ////////
|
||
|
|
$footer-height: 75px;
|
||
|
|
$footer-bg: $content-bg;
|
||
|
|
$footer-color: color(dark);
|
||
|
|
///////// FOOTER ////////
|
||
|
|
|
||
|
|
///////// BUTTONS ////////
|
||
|
|
|
||
|
|
$button-fixed-width: 150px;
|
||
|
|
$btn-padding-y: .875rem;
|
||
|
|
$btn-padding-x: 1.5rem;
|
||
|
|
$btn-line-height: 1;
|
||
|
|
|
||
|
|
$btn-padding-y-xs: .5rem;
|
||
|
|
$btn-padding-x-xs: .75rem;
|
||
|
|
|
||
|
|
$btn-padding-y-sm: .50rem;
|
||
|
|
$btn-padding-x-sm: .81rem;
|
||
|
|
|
||
|
|
$btn-padding-y-lg: 1rem;
|
||
|
|
$btn-padding-x-lg: 3rem;
|
||
|
|
|
||
|
|
$btn-font-size: .875rem;
|
||
|
|
$btn-font-size-xs: .625rem;
|
||
|
|
$btn-font-size-sm: .875rem;
|
||
|
|
$btn-font-size-lg: .875rem;
|
||
|
|
|
||
|
|
$btn-border-radius: .1875rem;
|
||
|
|
$btn-border-radius-xs: .1875rem;
|
||
|
|
$btn-border-radius-sm: .1875rem;
|
||
|
|
$btn-border-radius-lg: .1875rem;
|
||
|
|
|
||
|
|
///////// BUTTONS ////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
///////// FORMS /////////
|
||
|
|
|
||
|
|
$input-bg: color(white);
|
||
|
|
$input-border-radius: 2px;
|
||
|
|
$input-placeholder-color: #c9c8c8;
|
||
|
|
$input-font-size: .875rem;
|
||
|
|
|
||
|
|
$input-height : 2.875rem;
|
||
|
|
$input-height-sm : 2.25rem;
|
||
|
|
$input-height-lg : 3.5rem;
|
||
|
|
|
||
|
|
$input-padding-y: .875rem;
|
||
|
|
$input-padding-x: 1.375rem;
|
||
|
|
$input-line-height: 1;
|
||
|
|
|
||
|
|
$input-padding-y-xs: .5rem;
|
||
|
|
$input-padding-x-xs: .75rem;
|
||
|
|
|
||
|
|
$input-padding-y-sm: .50rem;
|
||
|
|
$input-padding-x-sm: .81rem;
|
||
|
|
|
||
|
|
$input-padding-y-lg: .94rem;
|
||
|
|
$input-padding-x-lg: 1.94rem;
|
||
|
|
|
||
|
|
///////// FORMS /////////
|
||
|
|
|
||
|
|
//////// DROPDOWNS ///////
|
||
|
|
|
||
|
|
$dropdown-border-color: $border-color;
|
||
|
|
$dropdown-divider-bg: $border-color;
|
||
|
|
$dropdown-link-color: $body-color;
|
||
|
|
$dropdown-header-color: $body-color;
|
||
|
|
$dropdown-link-hover-bg: #eaeaf1;
|
||
|
|
//////// DROPDOWNS ///////
|
||
|
|
|
||
|
|
//////// TABLES ////////
|
||
|
|
|
||
|
|
$table-accent-bg: transparent;
|
||
|
|
$table-hover-bg: #eaeaf1;
|
||
|
|
$table-cell-padding: 1.25rem .9375rem;
|
||
|
|
$table-border-color: $border-color;
|
||
|
|
|
||
|
|
$table-inverse-bg: #2a2b32;
|
||
|
|
$table-inverse-color: color(white);
|
||
|
|
|
||
|
|
//////// TABLES ////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
////////// MEASUREMENT AND PROPERTY VARIABLES //////////
|
||
|
|
|
||
|
|
$border-property: 1px solid $border-color;
|
||
|
|
$card-spacing-y: 1.875rem;
|
||
|
|
$card-padding-y: 1.25rem;
|
||
|
|
$card-padding-x: 1.437rem;
|
||
|
|
$card-border-radius: 0;
|
||
|
|
$card-border-color: #e3e3e3;
|
||
|
|
$card-box-shadow: 4px 8px 9px -2px #c7c5d8;
|
||
|
|
$card-title-color: #787878;
|
||
|
|
$card-description-color: #76838f;
|
||
|
|
$grid-gutter-width: 30px;
|
||
|
|
$action-transition-duration: 0.25s;
|
||
|
|
$action-transition-timing-function: ease;
|
||
|
|
////////// OTHER VARIABLES //////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
///////// TABS VARIABLES //////////
|
||
|
|
$nav-tabs-border-color: #ebedf2;
|
||
|
|
$nav-tabs-link-bg: #f6f8fa;
|
||
|
|
$nav-tabs-link-color: #000000;
|
||
|
|
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color;
|
||
|
|
$nav-tabs-link-active-color: $body-color;
|
||
|
|
$nav-tabs-link-active-bg: $white;
|
||
|
|
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-active-bg;
|
||
|
|
$nav-pills-custom-bg: #fcfcfd;
|
||
|
|
//////// TABS VARIABLES /////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
///////////////////////////////////////////////////////////////////////////////////////////////
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
////////// SIDEBAR ////////
|
||
|
|
$sidebar-width-lg: 237px;
|
||
|
|
$sidebar-width-mini: 185px;
|
||
|
|
$sidebar-width-icon: 70px;
|
||
|
|
|
||
|
|
$sidebar-light-bg: $content-bg;
|
||
|
|
$sidebar-light-menu-color: #787878;
|
||
|
|
$sidebar-light-submenu-color: #656565;
|
||
|
|
$sidebar-light-menu-active-bg: initial;
|
||
|
|
$sidebar-light-menu-active-color: $primary;
|
||
|
|
$sidebar-light-menu-hover-bg: #e8e7ec;
|
||
|
|
$sidebar-light-menu-hover-color: #56595a;
|
||
|
|
$sidebar-light-submenu-hover-color: $black;
|
||
|
|
$sidebar-light-submenu-active-color: $black;
|
||
|
|
$sidebar-light-menu-icon-color: $sidebar-light-menu-color;
|
||
|
|
$sidebar-light-menu-arrow-color: #686868;
|
||
|
|
$sidebar-light-profile-name-color: #404852;
|
||
|
|
$sidebar-light-profile-title-color: #8d9498;
|
||
|
|
|
||
|
|
|
||
|
|
$sidebar-menu-font-size: .875rem;
|
||
|
|
$sidebar-menu-padding-left: 1rem;
|
||
|
|
$sidebar-menu-padding-right: 1.937rem;
|
||
|
|
$sidebar-menu-padding-top: .75rem;
|
||
|
|
$sidebar-menu-padding-bottom: .75rem;
|
||
|
|
|
||
|
|
$sidebar-submenu-padding: .25rem 0 0 3.07rem;
|
||
|
|
$sidebar-submenu-font-size: .875rem;
|
||
|
|
$sidebar-submenu-item-padding: .7rem 1rem;
|
||
|
|
|
||
|
|
$sidebar-icon-font-size: 1rem;
|
||
|
|
$sidebar-arrow-font-size: .625rem;
|
||
|
|
|
||
|
|
$sidebar-profile-bg: transparent;
|
||
|
|
$sidebar-profile-padding: 0 1.625rem 2.25rem 1.188rem;
|
||
|
|
|
||
|
|
$sidebar-mini-menu-padding: .8125rem 1rem .8125rem 1rem;
|
||
|
|
|
||
|
|
$sidebar-icon-only-menu-padding: .5rem 1.625rem .5rem 1.188rem;
|
||
|
|
$sidebar-icon-only-submenu-padding: 0 0 0 1.5rem;
|
||
|
|
|
||
|
|
$sidebar-box-shadow: 6px 16px 31px -18px #b7bcd1;
|
||
|
|
|
||
|
|
$rtl-sidebar-submenu-padding: 0 4.5rem 0 0;
|
||
|
|
|
||
|
|
$icon-only-collapse-width: 190px;
|
||
|
|
$icon-only-menu-bg-light: $sidebar-light-bg;
|
||
|
|
|
||
|
|
///////// SIDEBAR ////////
|
||
|
|
|
||
|
|
|
||
|
|
///////// NAVBAR ////////
|
||
|
|
|
||
|
|
$navbar-default-bg: $white;
|
||
|
|
$navbar-box-shadow: 0 5px 21px -5px #cdd1e1;
|
||
|
|
$navbar-height: 70px;
|
||
|
|
$navbar-menu-color: #9b9b9b;
|
||
|
|
$navbar-font-size: 1rem;
|
||
|
|
$navbar-icon-font-size: .9375rem;
|
||
|
|
|
||
|
|
///////// NAVBAR ////////
|
||
|
|
$buy-nowbanner-padding-top:60px;
|