245 lines
10 KiB
SCSS
245 lines
10 KiB
SCSS
// Variables
|
|
//
|
|
// Variables should follow the `$component-state-property-size` formula for consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
|
// (C) Custom variables for extended components of bootstrap only
|
|
//
|
|
// ? To change the layout colors you just need to change the $base and $body-bg colors and rest (border, card, font colors and etc...) will be adjust automatically.
|
|
// ? Use https://noeldelgado.github.io/shadowlord/ to select proper 💄 Color tints and shade for $black and $body-bg color.
|
|
// ? color-variables and theme-color-variables (branding colors) can be choose as per your preferences. We suggest you to use https://colors.eva.design/
|
|
// ! Light style use $base to generate the $gray shades.
|
|
// ! _variable-dark.scss file overrides _variable.scss file.
|
|
|
|
// * Colors
|
|
// *******************************************************************************
|
|
|
|
// scss-docs-start gray-color-variables
|
|
$white: #fff !default;
|
|
$black: #393a5a !default;
|
|
|
|
$base: #e6e6f1 !default; // (C)
|
|
$gray-25: rgba($base, 0.025) !default; // (C)
|
|
$gray-60: rgba($base, 0.06) !default; // (C)
|
|
$gray-80: rgba($base, 0.08) !default; // (C)
|
|
$gray-100: rgba($base, 0.1) !default;
|
|
$gray-200: rgba($base, 0.12) !default;
|
|
$gray-300: rgba($base, 0.3) !default;
|
|
$gray-400: rgba($base, 0.4) !default;
|
|
$gray-500: rgba($base, 0.5) !default;
|
|
$gray-600: rgba($base, 0.6) !default;
|
|
$gray-700: rgba($base, 0.7) !default;
|
|
$gray-800: rgba($base, 0.8) !default;
|
|
$gray-900: rgba($base, 0.9) !default;
|
|
// scss-docs-end gray-color-variables
|
|
|
|
// scss-docs-start gray-colors-map
|
|
$grays: (
|
|
'25': $gray-25,
|
|
'60': $gray-60,
|
|
'80': $gray-80
|
|
) !default;
|
|
// scss-docs-end gray-colors-map
|
|
|
|
// scss-docs-start color-variables
|
|
$blue: #007bff !default;
|
|
$indigo: #6610f2 !default;
|
|
$purple: #696cff !default;
|
|
$pink: #e83e8c !default;
|
|
$red: #ff3e1d !default;
|
|
$orange: #fd7e14 !default;
|
|
$yellow: #ffab00 !default;
|
|
$green: #71dd37 !default;
|
|
$teal: #20c997 !default;
|
|
$cyan: #03c3ec !default;
|
|
// scss-docs-end color-variables
|
|
|
|
// scss-docs-start theme-color-variables
|
|
$primary: $purple !default;
|
|
$secondary: #8592a3 !default;
|
|
$success: $green !default;
|
|
$info: $cyan !default;
|
|
$warning: $yellow !default;
|
|
$danger: $red !default;
|
|
$light: #494a5d !default;
|
|
$dark: #6b6c9d !default;
|
|
$gray: $gray-500 !default; // (C)
|
|
// scss-docs-end theme-color-variables
|
|
|
|
// scss-docs-start theme-colors-map
|
|
$theme-colors: (
|
|
'primary': $primary,
|
|
'secondary': $secondary,
|
|
'success': $success,
|
|
'info': $info,
|
|
'warning': $warning,
|
|
'danger': $danger,
|
|
'light': $light,
|
|
'dark': $dark,
|
|
'gray': $gray
|
|
) !default;
|
|
// scss-docs-end theme-colors-map
|
|
|
|
$color-scheme: 'dark' !default; // (C)
|
|
|
|
// * Body
|
|
// *******************************************************************************
|
|
|
|
$body-bg: #232333 !default;
|
|
$rgba-to-hex-bg: $black !default; // (C)
|
|
$body-color: rgba-to-hex($gray-700, $rgba-to-hex-bg) !default;
|
|
$rgba-to-hex-bg-inverted: rgb(160, 149, 149) !default; // (C)
|
|
|
|
// * Components
|
|
// *******************************************************************************
|
|
|
|
// scss-docs-start box-shadow-variables
|
|
$shadow-bg: #14141d !default; // (C)
|
|
$box-shadow: 0 0.1875rem 0.5rem 0 rgba($shadow-bg, 0.22) !default;
|
|
$box-shadow-xs: 0 0.0625rem 0.3175rem 0 rgba($shadow-bg, 0.18) !default;
|
|
$box-shadow-sm: 0 0.125rem 0.375rem 0 rgba($shadow-bg, 0.2) !default;
|
|
$box-shadow-lg: 0 0.25rem 0.75rem 0 rgba($shadow-bg, 0.24) !default;
|
|
$box-shadow-xl: 0 0.3125rem 1.375rem 0 rgba($shadow-bg, 0.26) !default;
|
|
// scss-docs-end box-shadow-variables
|
|
|
|
// $alert-bg-scale: -84% !default;
|
|
$alert-border-scale: -84% !default;
|
|
$alert-color-scale: 40% !default;
|
|
|
|
$border-color: rgba-to-hex($gray-200, $rgba-to-hex-bg) !default;
|
|
|
|
$floating-component-border-color: transparent !default; // (C)
|
|
$floating-component-shadow: $box-shadow !default; // (C)
|
|
|
|
// * Typography
|
|
// *******************************************************************************
|
|
$headings-color: rgba-to-hex($gray-900, $rgba-to-hex-bg) !default;
|
|
$text-muted: rgba-to-hex($gray-400, $rgba-to-hex-bg) !default;
|
|
$text-muted-hover: rgba-to-hex($gray-600, $rgba-to-hex-bg) !default; // (C)
|
|
|
|
$text-light: rgba-to-hex($gray-500, $rgba-to-hex-bg) !default; // (C)
|
|
$text-lighter: rgba-to-hex($gray-400, $rgba-to-hex-bg) !default; // (C)
|
|
$text-lightest: rgba-to-hex($gray-300, $rgba-to-hex-bg) !default; // (C)
|
|
|
|
// * Tables
|
|
// *******************************************************************************
|
|
|
|
$table-striped-bg-factor: 0.06 !default;
|
|
$table-striped-bg: rgba($base, $table-striped-bg-factor) !default;
|
|
$table-active-color: $body-color !default;
|
|
$table-active-bg-factor: 0.08 !default;
|
|
$table-active-bg: rgba($primary, $table-active-bg-factor) !default;
|
|
|
|
$table-hover-bg-factor: 0.06 !default;
|
|
$table-hover-bg: rgba($base, $table-hover-bg-factor) !default;
|
|
|
|
$table-border-color: $border-color !default;
|
|
$table-group-separator-color: $table-border-color !default;
|
|
|
|
$table-bg-scale: -84% !default;
|
|
|
|
// scss-docs-start table-loop
|
|
$table-variants: (
|
|
'primary': shift-color($primary, $table-bg-scale),
|
|
'secondary': shift-color($secondary, $table-bg-scale),
|
|
'success': shift-color($success, $table-bg-scale),
|
|
'info': shift-color($info, $table-bg-scale),
|
|
'warning': shift-color($warning, $table-bg-scale),
|
|
'danger': shift-color($danger, $table-bg-scale),
|
|
'light': rgba-to-hex($gray-900, $rgba-to-hex-bg),
|
|
'dark': $white
|
|
) !default;
|
|
// scss-docs-end table-loop
|
|
|
|
$component-active-bg: $primary !default;
|
|
|
|
// * Pagination
|
|
// *******************************************************************************
|
|
|
|
$pagination-border-color: rgba-to-hex(rgba($base, 0.22), $rgba-to-hex-bg) !default;
|
|
$pagination-disabled-border-color: rgba-to-hex(rgba($base, 0.22), $rgba-to-hex-bg) !default;
|
|
|
|
// * Cards
|
|
// *******************************************************************************
|
|
|
|
$card-bg: #2b2c40 !default;
|
|
$card-subtitle-color: rgba-to-hex(rgba($base, 0.55), $rgba-to-hex-bg) !default;
|
|
|
|
// * Accordion
|
|
// *******************************************************************************
|
|
|
|
$accordion-bg: $card-bg !default;
|
|
$accordion-border-color: $border-color !default;
|
|
|
|
$accordion-button-color: $headings-color !default;
|
|
|
|
// * Forms
|
|
// *******************************************************************************
|
|
|
|
$input-bg: transparent !default;
|
|
|
|
$input-disabled-border-color: rgba($base, 0.23) !default;
|
|
|
|
$input-border-hover-color: rgba-to-hex($gray-600, $rgba-to-hex-bg) !default; // (C)
|
|
|
|
$input-border-color: rgba-to-hex(rgba($base, 0.22), $rgba-to-hex-bg) !default;
|
|
|
|
$form-select-bg: $input-bg !default;
|
|
$form-select-indicator: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"><path d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="#{$base}" fill-opacity="0.9"/></svg>') !default;
|
|
|
|
$form-range-thumb-bg: $primary !default;
|
|
|
|
// * Navs
|
|
// *******************************************************************************
|
|
|
|
$nav-tabs-link-active-bg: $card-bg !default;
|
|
|
|
// * Navbar
|
|
// *******************************************************************************
|
|
|
|
$navbar-light-hover-color: #4e5155 !default;
|
|
$navbar-light-active-color: #4e5155 !default;
|
|
$navbar-light-disabled-color: rgba($black, 0.2) !default;
|
|
|
|
// * Dropdowns
|
|
// *******************************************************************************
|
|
|
|
$dropdown-bg: $card-bg !default;
|
|
|
|
// * Tooltips
|
|
// *******************************************************************************
|
|
$tooltip-bg: $base !default;
|
|
$tooltip-color: $card-bg !default;
|
|
|
|
// * Popovers
|
|
// *******************************************************************************
|
|
$popover-bg: $card-bg !default;
|
|
|
|
// * Toasts
|
|
// *******************************************************************************
|
|
$toast-background-color: $card-bg !default;
|
|
$toast-color: $body-color !default;
|
|
$toast-header-color: $toast-color !default;
|
|
|
|
// * Modals
|
|
// *******************************************************************************
|
|
|
|
$modal-content-bg: $card-bg !default;
|
|
$modal-backdrop-bg: #1d1d2a !default;
|
|
$modal-backdrop-opacity: 0.6 !default;
|
|
|
|
// * List group
|
|
// *******************************************************************************
|
|
|
|
$list-group-border-color: $border-color !default;
|
|
$list-group-item-bg-hover-scale: 6% !default; // (c)
|
|
$kbd-color: $dark !default;
|
|
|
|
// Config
|
|
$rtl-support: false !default;
|
|
$dark-style: true !default;
|
|
|
|
// * Chevron Icons
|
|
// ********************************************************************************
|
|
|
|
$chevron-up: "data:image/svg+xml,%3Csvg width='10px' height='6px' viewBox='0 0 10 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='0 4.57961362 1.23882951 5.71428571 5 2.26934419 8.76117049 5.71428571 10 4.57961362 5 0'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='⚙️-Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='31)-DataTables' transform='translate(-289.000000, -64.000000)'%3E%3Cg id='Table-Basic' transform='translate(0.000000, 52.000000)'%3E%3Cg id='Table-Header' transform='translate(19.000000, 10.000000)'%3E%3Cg id='Group' transform='translate(270.000000, 0.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.142857)'%3E%3Cuse fill='#{str-replace(#{rgba-to-hex($gray-500,$rgba-to-hex-bg)},'#', '%23')}' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='#{str-replace(#{rgba-to-hex($gray-500,$rgba-to-hex-bg)},'#', '%23')}' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
|
|
$chevron-down: "data:image/svg+xml,%3Csvg width='10px' height='6px' viewBox='0 0 10 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='8.76117049 0 5 3.44494152 1.23882951 0 0 1.1346721 5 5.71428571 10 1.1346721'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='⚙️-Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='31)-DataTables' transform='translate(-289.000000, -76.000000)'%3E%3Cg id='Table-Basic' transform='translate(0.000000, 52.000000)'%3E%3Cg id='Table-Header' transform='translate(19.000000, 10.000000)'%3E%3Cg id='Group' transform='translate(270.000000, 12.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.142857)'%3E%3Cuse fill='#{str-replace(#{rgba-to-hex($gray-500,$rgba-to-hex-bg)},'#', '%23')}' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.8' fill='#{str-replace(#{rgba-to-hex($gray-500,$rgba-to-hex-bg)},'#', '%23')}' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
|