419 lines
11 KiB
SCSS
419 lines
11 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;
|
|
$blue-teal-gradient: linear-gradient(120deg, #556cdc, #128bfc, #18bef1);
|
|
$blue-teal-gradient-light: linear-gradient(
|
|
120deg,
|
|
rgba(0, 228, 208, 0.7),
|
|
rgba(89, 131, 232, 0.7)
|
|
);
|
|
|
|
$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
|
|
);
|
|
|
|
$theme-colors: (
|
|
primary: #2196f3,
|
|
secondary: #dde4eb,
|
|
success: #19d895,
|
|
info: #8862e0,
|
|
warning: #ffaf00,
|
|
danger: #ff0017,
|
|
light: #fbfbfb,
|
|
dark: #252c46
|
|
);
|
|
|
|
$theme-gradient-colors: (
|
|
primary: linear-gradient(to right, #da8cff, #9a55ff),
|
|
secondary: linear-gradient(to right, #e7ebf0, #868e96),
|
|
success: linear-gradient(to right, #84d9d2, #07cdae),
|
|
info: linear-gradient(to right, #90caf9, #047edf 99%),
|
|
warning: linear-gradient(to right, #f6e384, #ffd500),
|
|
danger: linear-gradient(to right, #ffbf96, #fe7096),
|
|
light: linear-gradient(to bottom, #f4f4f4, #e4e4e9),
|
|
dark: linear-gradient(89deg, #5e7188, #3e4b5b)
|
|
);
|
|
|
|
////////// COLOR SYSTEM //////////
|
|
|
|
////////// COLOR VARIABLES //////////
|
|
$content-bg: #f3f4fa;
|
|
$footer-bg: $content-bg;
|
|
$footer-color: color(dark);
|
|
$border-color: #dee2e6;
|
|
$circle-border: $white;
|
|
|
|
////////// 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-1: "Roboto", sans-serif;
|
|
|
|
$default-font-size: 0.875rem; // 14px as base font size
|
|
|
|
$text-muted: #6c7293;
|
|
$body-color: #343a40;
|
|
|
|
////////// FONT VARIABLES //////////
|
|
|
|
////////// SIDEBAR ////////
|
|
$sidebar-width-lg: 255px;
|
|
$sidebar-width-mini: 185px;
|
|
$sidebar-width-icon: 70px;
|
|
|
|
$sidebar-light-bg: #fff;
|
|
$sidebar-light-menu-color: #4a4a4a;
|
|
$sidebar-light-submenu-color: $sidebar-light-menu-color;
|
|
$sidebar-light-menu-active-bg: #fafbfc;
|
|
$sidebar-light-menu-active-color: theme-color(primary);
|
|
$sidebar-light-menu-hover-bg: $sidebar-light-menu-active-bg;
|
|
$sidebar-light-menu-hover-color: $sidebar-light-menu-color;
|
|
$sidebar-light-submenu-hover-bg: initial;
|
|
$sidebar-light-submenu-hover-color: #000;
|
|
$sidebar-light-icon-active-color: theme-color(success);
|
|
$sidebar-light-menu-icon-color: $sidebar-light-menu-color;
|
|
$sidebar-light-menu-arrow-color: #9e9da0;
|
|
$sidebar-light-menu-border-color: #c0bfcf;
|
|
$sidebar-light-category-color: #999999;
|
|
$sidebar-light-profile-name-color: #404852;
|
|
$sidebar-light-profile-title-color: #8d9498;
|
|
|
|
$sidebar-dark-bg: #252c46;
|
|
$sidebar-dark-menu-color: $white;
|
|
$sidebar-dark-menu-active-bg: #2e3657;
|
|
$sidebar-dark-menu-active-color: darken($white, 30%);
|
|
$sidebar-dark-menu-hover-bg: lighten($sidebar-dark-bg, 10%);
|
|
$sidebar-dark-menu-hover-color: color(white);
|
|
$sidebar-dark-submenu-color: $sidebar-dark-menu-color;
|
|
$sidebar-dark-submenu-hover-bg: initial;
|
|
$sidebar-dark-submenu-hover-color: darken($sidebar-dark-submenu-color, 30%);
|
|
$sidebar-dark-icon-bg: rgba(194, 244, 219, 0.12);
|
|
$sidebar-dark-icon-color: #33c92d;
|
|
$sidebar-dark-action-border: rgba(151, 151, 151, 0.27);
|
|
$sidebar-dark-menu-icon-color: #9f9ea3;
|
|
$sidebar-dark-menu-arrow-color: #9f9ea3;
|
|
|
|
$sidebar-dark-profile-name-color: $sidebar-dark-menu-color;
|
|
$sidebar-dark-profile-title-color: #8d9498;
|
|
|
|
$sidebar-menu-font-size: 12px;
|
|
$sidebar-menu-padding-y: 12px;
|
|
$sidebar-menu-padding-x: 2.25rem;
|
|
|
|
$sidebar-menu-padding: 16px 35px;
|
|
$sidebar-icon-size: 16px;
|
|
|
|
$sidebar-submenu-font-size: 0.75rem;
|
|
$sidebar-submenu-item-padding: 0.75rem 1rem 0.75rem 1rem;
|
|
$sidebar-submenu-padding: 0 0 0 4rem;
|
|
|
|
$sidebar-icon-font-size: 20px;
|
|
$sidebar-arrow-font-size: 0.625rem;
|
|
|
|
$sidebar-profile-bg: transparent;
|
|
$sidebar-profile-padding: 0.75rem 1.625rem 0.75rem 1.188rem;
|
|
|
|
$sidebar-mini-menu-padding: 0.8125rem 1rem 0.8125rem 1rem;
|
|
|
|
$sidebar-icon-only-menu-padding: 0.5rem 1.625rem 0.5rem 1.188rem;
|
|
$sidebar-icon-only-submenu-padding: 0 0 0 1.5rem;
|
|
|
|
$icon-only-collapse-width: 190px;
|
|
$icon-only-menu-bg-light: $sidebar-light-bg;
|
|
$icon-only-menu-bg-dark: $sidebar-dark-bg;
|
|
|
|
///////// SIDEBAR ////////
|
|
|
|
///////// NAVBAR ////////
|
|
|
|
$navbar-height: 63px;
|
|
$navbar-bg: linear-gradient(120deg, #2f78e9, #128bfc, #18bef1);
|
|
$navbar-menu-color: #fff;
|
|
$navbar-font-size: 12px;
|
|
$navbar-icon-font-size: 1.25rem;
|
|
$nvabar-brand-bg: #000000;
|
|
$nvabar-toggler-color: #8e94a9;
|
|
$navbar-search-bg: #eef0fa;
|
|
$nvabar-search-icon-color: #8e94a9;
|
|
$nav-dropdown-color: #111111;
|
|
$navbar-item-bg: #3f3f40;
|
|
$navbar-item-light-bg: #e6e5f2;
|
|
$light-color-icon-bg: #f2f2f2;
|
|
$nav-link-height: 52px;
|
|
|
|
///////// NAVBAR ////////
|
|
|
|
///////// BUTTONS ////////
|
|
|
|
$button-fixed-width: 120px;
|
|
$btn-padding-y: 0.4rem;
|
|
$btn-padding-x: 1rem;
|
|
$btn-line-height: 1;
|
|
$btn-padding-y-xs: 0.5rem;
|
|
$btn-padding-x-xs: 0.75rem;
|
|
$btn-padding-y-sm: 0.3rem;
|
|
$btn-padding-x-sm: 0.95rem;
|
|
$btn-padding-y-lg: 0.94rem;
|
|
$btn-padding-x-lg: 1.94rem;
|
|
$btn-font-size: 0.875rem;
|
|
$btn-font-size-xs: 0.625rem;
|
|
$btn-font-size-sm: 0.875rem;
|
|
$btn-font-size-lg: 0.875rem;
|
|
$btn-border-radius: 0.1875rem;
|
|
$btn-border-radius-xs: 0.1875rem;
|
|
$btn-border-radius-sm: 0.1875rem;
|
|
$btn-border-radius-lg: 0.1875rem;
|
|
$social-btn-padding: 13px;
|
|
$social-btn-icon-size: 1rem;
|
|
|
|
///////// BUTTONS ////////
|
|
|
|
////////// TOOLTIP VARIABLES //////////
|
|
|
|
//default styles
|
|
$tooltip-font-size: 0.75rem;
|
|
$tooltip-padding-y: 0.4rem;
|
|
$tooltip-padding-x: 0.75rem;
|
|
$tooltip-border-radius: 0.375rem;
|
|
|
|
////////// TOOLTIP VARIABLES //////////
|
|
|
|
///////// FORMS /////////
|
|
|
|
$input-bg: color(white);
|
|
$input-border-radius: 2px;
|
|
$input-placeholder-color: #b9b8b8;
|
|
$input-font-size: 0.75rem;
|
|
|
|
$input-padding-y: 0.875rem;
|
|
$input-padding-x: 1.375rem;
|
|
$input-line-height: 1;
|
|
|
|
$input-padding-y-xs: 0.5rem;
|
|
$input-padding-x-xs: 0.75rem;
|
|
|
|
$input-padding-y-sm: 0.5rem;
|
|
$input-padding-x-sm: 0.81rem;
|
|
|
|
$input-padding-y-lg: 0.94rem;
|
|
$input-padding-x-lg: 1.94rem;
|
|
|
|
$input-height: 2rem;
|
|
$input-height-sm: 1.75rem;
|
|
$input-height-lg: 3.312rem;
|
|
|
|
///////// FORMS /////////
|
|
|
|
//////// DROPDOWNS ///////
|
|
|
|
$dropdown-border-color: $border-color;
|
|
$dropdown-divider-bg: $border-color;
|
|
$dropdown-link-color: $body-color;
|
|
$dropdown-header-color: $body-color;
|
|
//////// DROPDOWNS ///////
|
|
|
|
//////// TABLES ////////
|
|
$table-accent-bg: rgba(0, 0, 0, 0.05);
|
|
$table-hover-bg: $content-bg;
|
|
$table-cell-padding: 0.9375rem;
|
|
$table-border-color: $border-color;
|
|
|
|
$table-inverse-bg: #2a2b32;
|
|
$table-inverse-color: color(white);
|
|
|
|
//////// TABLES ////////
|
|
|
|
////////// MEASUREMENT AND PROPERTY VARIABLES //////////
|
|
$card-bg: #fff;
|
|
$card-title-color: $body-color;
|
|
$border-property: 1px solid $border-color;
|
|
$border-property: 1px solid $border-color;
|
|
$card-spacing-y: 25px;
|
|
$card-padding-y: 1.88rem;
|
|
$card-padding-x: 1.81rem;
|
|
$card-border-radius: 3px;
|
|
$card-border-color: #e6e6e6;
|
|
$grid-gutter-width: 25px;
|
|
$action-transition-duration: 0.25s;
|
|
$action-transition-timing-function: ease;
|
|
$card-description-color: #76838f;
|
|
$card-bg-varient: #fff;
|
|
$card-shadow-color: 0px 0px 8px 6px rgba(0, 0, 0, 0.02);
|
|
$list-card-bg: $white;
|
|
////////// OTHER VARIABLES //////////
|
|
|
|
////////// BREAD CRUMBS VARIABLES //////////
|
|
|
|
// default styles
|
|
$breadcrumb-padding-y: 0.56rem;
|
|
$breadcrumb-padding-x: 1.13rem;
|
|
$breadcrumb-item-padding: 0.5rem;
|
|
$breadcrumb-margin-bottom: 1rem;
|
|
$breadcrumb-font-size: $default-font-size;
|
|
$breadcrumb-bg: transparent;
|
|
$breadcrumb-border-color: $border-color;
|
|
$breadcrumb-divider-color: $gray-600;
|
|
$breadcrumb-active-color: $gray-700;
|
|
$breadcrumb-divider: "/";
|
|
|
|
// custom styles
|
|
$breadcrumb-custom-padding-y: 0;
|
|
$breadcrumb-custom-padding-x: 0;
|
|
$breadcrumb-custom-item-padding-y: 0.56rem;
|
|
$breadcrumb-custom-item-padding-x: 10px;
|
|
$breadcrumb-custom-item-color: $black;
|
|
$breadcrumb-item-bg: #dbe3e6;
|
|
|
|
////////// BREAD CRUMBS VARIABLES //////////
|
|
|
|
////////// MODALS VARIABLES //////////
|
|
|
|
$modal-inner-padding: 0.937rem;
|
|
$modal-dialog-margin: 10px;
|
|
$modal-dialog-margin-y-sm-up: 30px;
|
|
$modal-title-line-height: $line-height-base;
|
|
$modal-content-bg: $content-bg;
|
|
$modal-content-box-shadow-xs: 0 3px 9px rgba($black, 0.5);
|
|
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black, 0.5);
|
|
|
|
$modal-backdrop-bg: $black;
|
|
$modal-backdrop-opacity: 0.5;
|
|
|
|
$modal-header-border-color: $border-color;
|
|
$modal-content-border-color: $border-color;
|
|
$modal-footer-border-color: $border-color;
|
|
|
|
$modal-header-border-width: $border-width;
|
|
$modal-content-border-width: $border-width;
|
|
$modal-footer-border-width: $border-width;
|
|
|
|
$modal-header-padding-x: 26px;
|
|
$modal-header-padding-y: 25px;
|
|
|
|
$modal-body-padding-x: 26px;
|
|
$modal-body-padding-y: 35px;
|
|
|
|
$modal-footer-padding-x: 31px;
|
|
$modal-footer-padding-y: 15px;
|
|
|
|
$modal-lg: 90%;
|
|
$modal-md: 500px;
|
|
$modal-sm: 300px;
|
|
$modal-transition: transform 0.4s ease;
|
|
|
|
////////// MODALS 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;
|
|
$text-gray: gray;
|
|
$circle-img-border: $white;
|
|
//////// TABS VARIABLES /////////
|
|
|
|
//////// CALENDAR //////////////
|
|
$fullcalendar-color: #a8b2b9;
|
|
//////// CALENDAR //////////////
|
|
|
|
///////// SETTINGS PANEL ////////
|
|
$settings-panel-width: 300px;
|
|
///////// SETTINGS PANEL ////////
|
|
|
|
////////// Vendor file asset path //////////
|
|
$mdi-font-path: "~@mdi/font/fonts";
|
|
$fa-font-path: "~font-awesome/fonts/";
|
|
$flag-icon-css-path: "~flag-icon-css/flags/";
|
|
$simple-line-font-path: "~simple-line-icons/fonts/";
|
|
|
|
///////// BOXED LAYOUT ///////
|
|
$boxed-container-width: 1200px;
|
|
$boxed-layout-bg: #c6c8ca;
|
|
///////// BOXED LAYOUT ///////
|
|
|
|
///////// TICKETS-TAB ///////
|
|
$tab-head-bg: darken(#f2edf3, 2%);
|
|
$accent-color: $white;
|
|
///////// TICKETS-TAB ///////
|
|
|
|
///////// LANDING PAGE ///////
|
|
$landing-bg: #1a142dfa;
|
|
$landing-bg-color: $white;
|
|
///////// LANDING PAGE ///////
|
|
|
|
///////// CHATS ///////
|
|
$chat-container-height: 100%;
|
|
$chat-bottom-btn: $white;
|
|
$form-focus-bg: $white;
|
|
///////// CHATS ///////
|
|
|
|
///////// KANBAN ///////
|
|
$private-btn-bg: #eae2ec;
|
|
///////// KANBAN ///////
|
|
|
|
$bullet-line-list-shape-bg: color(white) !default;
|
|
|
|
$card-mixed-danger: linear-gradient(to bottom, #d41459, #911a6c);
|
|
|
|
$survey-head-color: #a7afb7;
|
|
$list-border-bg: #e8e8e8;
|
|
|
|
$accordian-head-color: $black;
|
|
$datepicker-arrow-bg: #eef1f2;
|
|
|
|
$body-text-color: $body-color;
|