Ümit Tunç
617 lines
21 KiB
SCSS
617 lines
21 KiB
SCSS
// Variables
|
|
// Bootstrap variable overrides by theme author
|
|
|
|
// Color system
|
|
|
|
$white: #fff;
|
|
$gray-100: #f7f8f9;
|
|
$gray-200: #f0f1f3;
|
|
$gray-300: #dfe0e5;
|
|
$gray-400: #d0d4d9;
|
|
$gray-500: #a1a1a8;
|
|
$gray-600: #595d69;
|
|
$gray-700: #29292e;
|
|
$gray-800: #191a1f;
|
|
$gray-900: #0f0f10;
|
|
$black: #000;
|
|
|
|
$blue: #007bff;
|
|
$indigo: #6610f2;
|
|
$purple: #6f42c1;
|
|
$pink: #e83e8c;
|
|
$red: #d6293e;
|
|
$orange: #fd7e14;
|
|
$yellow: #f7c32e;
|
|
$green: #0cbc87;
|
|
$teal: #20c997;
|
|
$cyan: #4f9ef8;
|
|
|
|
$primary: #2163e8;
|
|
$secondary: $gray-600;
|
|
$success: $green;
|
|
$info: $cyan;
|
|
$warning: $yellow;
|
|
$danger: $red;
|
|
$light: $gray-100;
|
|
$dark: $gray-800;
|
|
$dark-gray: $gray-800; // Will be light in dark mode
|
|
$light-gray: $gray-600; // Will be light in dark mode
|
|
|
|
// theme colors map
|
|
$theme-colors: (
|
|
"primary": $primary,
|
|
"secondary": $secondary,
|
|
"success": $success,
|
|
"info": $info,
|
|
"warning": $warning,
|
|
"danger": $danger,
|
|
"light": $light,
|
|
"dark": $dark
|
|
);
|
|
// scss-docs-end theme-colors-map
|
|
|
|
// scss-docs-start theme-colors-rgb
|
|
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
|
|
|
|
$soft-alpha: .1;
|
|
|
|
// theme soft colors map
|
|
// $theme-soft-colors: (
|
|
// "white-soft": rgba($white, $soft-alpha + 0.2),
|
|
// "primary-soft": rgba($primary, $soft-alpha),
|
|
// "secondary-soft": rgba($secondary, $soft-alpha),
|
|
// "success-soft": rgba($success, $soft-alpha),
|
|
// "info-soft": rgba($info, $soft-alpha),
|
|
// "warning-soft": rgba($warning, $soft-alpha + 0.05),
|
|
// "danger-soft": rgba($danger, $soft-alpha),
|
|
// "light-soft": rgba($light, $soft-alpha),
|
|
// "dark-soft": rgba($dark, $soft-alpha)
|
|
// );
|
|
|
|
// The contrast ratio to reach against white
|
|
$min-contrast-ratio: 2;
|
|
|
|
// Options
|
|
//
|
|
// Quickly modify global styling
|
|
|
|
$enable-negative-margins: true;
|
|
|
|
// Prefix for :root CSS variables
|
|
|
|
$variable-prefix: bs- ; // Deprecated in v5.2.0 for the shorter `$prefix`
|
|
$prefix: $variable-prefix;
|
|
|
|
// Spacers
|
|
|
|
$spacer: 1rem;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * .25,
|
|
2: $spacer * .5,
|
|
3: $spacer,
|
|
4: $spacer * 2,
|
|
5: $spacer * 3,
|
|
);
|
|
|
|
|
|
// Body
|
|
|
|
$body-bg: $white;
|
|
$body-color: $gray-600;
|
|
|
|
// Links
|
|
|
|
$link-color: $primary;
|
|
$link-decoration: none;
|
|
$link-shade-percentage: 20%;
|
|
$link-hover-color: shift-color($link-color, $link-shade-percentage);
|
|
$link-hover-decoration: null;
|
|
|
|
// Grid breakpoints extend
|
|
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1400px
|
|
);
|
|
|
|
// Define the maximum width of `.container`
|
|
|
|
$container-max-widths: (
|
|
sm: 96%,
|
|
md: 94%,
|
|
lg: 94%,
|
|
xl: 1140px,
|
|
xxl: 1200px
|
|
);
|
|
|
|
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
|
|
|
// Specify the width of the gutters.
|
|
|
|
$grid-gutter-width: 1.875rem; // 30px
|
|
|
|
// Container padding
|
|
|
|
$container-padding-x: $grid-gutter-width;
|
|
|
|
// Components
|
|
$border-style: solid;
|
|
$border-width: 1px;
|
|
$border-color: rgba($black, .1);
|
|
|
|
$border-radius: .25rem;
|
|
$border-radius-sm: .2rem;
|
|
$border-radius-lg: .7rem;
|
|
$border-radius-xl: 1rem;
|
|
$border-radius-2xl: 2rem;
|
|
|
|
$box-shadow: 0px 0px 20px rgba(83, 88, 93, .15);
|
|
$box-shadow-sm: 0 .125rem .25rem rgba(83, 88, 93, .15);
|
|
$box-shadow-lg: 0 1rem 3rem rgba(83, 88, 93, .15);
|
|
|
|
$component-active-color: $white;
|
|
$component-active-bg: $primary;
|
|
|
|
$transition-base: all .3s ease-in-out;
|
|
|
|
|
|
// Fonts
|
|
//
|
|
// Font Families
|
|
|
|
$font-family-base: 'Rubik', sans-serif;
|
|
$font-family-heading: 'Nunito Sans', sans-serif;
|
|
|
|
// Font Sizes
|
|
|
|
$font-size-xs: .8125rem;
|
|
$font-size-base: 0.9375rem;
|
|
$font-size-lg: $font-size-base * 1.25;
|
|
$font-size-sm: $font-size-base * .875;
|
|
|
|
$font-weight-light: 400;
|
|
$font-weight-normal: 500;
|
|
$font-weight-bold: 700;
|
|
|
|
// Line Height
|
|
|
|
$line-height-base: 1.5;
|
|
$line-height-sm: 1.25;
|
|
$line-height-lg: 2;
|
|
|
|
// Headings
|
|
|
|
$h1-font-size: $font-size-base * 2.5;
|
|
$h2-font-size: $font-size-base * 2;
|
|
$h3-font-size: $font-size-base * 1.75;
|
|
$h4-font-size: $font-size-base * 1.5;
|
|
$h5-font-size: $font-size-base * 1.25;
|
|
$h6-font-size: $font-size-base;
|
|
|
|
// font sizes
|
|
$font-sizes: (
|
|
1: $h1-font-size,
|
|
2: $h2-font-size,
|
|
3: $h3-font-size,
|
|
4: $h4-font-size,
|
|
5: $h5-font-size,
|
|
6: $h6-font-size
|
|
);
|
|
|
|
$headings-margin-bottom: .5rem;
|
|
$headings-font-family: $font-family-heading;
|
|
$headings-font-weight: $font-weight-bold;
|
|
$headings-line-height: $line-height-sm;
|
|
$headings-color: $gray-800;
|
|
|
|
// display headings
|
|
$display-font-sizes: (
|
|
1: 5rem,
|
|
2: 4.5rem,
|
|
3: 4rem,
|
|
4: 3.5rem,
|
|
5: 3rem,
|
|
6: 2.5rem
|
|
);
|
|
|
|
$display-font-weight: $font-weight-bold;
|
|
$display-line-height: $headings-line-height;
|
|
|
|
$lead-font-size: $font-size-base * 1.25;
|
|
$lead-font-weight: $font-weight-light;
|
|
|
|
$small-font-size: .875em;
|
|
|
|
$text-muted: $gray-400;
|
|
|
|
$hr-color: $gray-500;
|
|
|
|
// Buttons + Forms
|
|
|
|
$input-btn-padding-y: .5rem;
|
|
$input-btn-padding-x: 1rem;
|
|
$input-btn-font-size: $font-size-base;
|
|
$input-btn-line-height: $line-height-base;
|
|
|
|
$input-btn-focus-width: 0;
|
|
$input-btn-focus-color: rgba($component-active-bg, .25);
|
|
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
|
|
|
|
$input-btn-padding-y-sm: .4rem;
|
|
$input-btn-padding-x-sm: .8rem;
|
|
$input-btn-font-size-sm: $font-size-xs;
|
|
$input-btn-line-height-sm: $line-height-sm;
|
|
|
|
$input-btn-padding-y-lg: .8rem;
|
|
$input-btn-padding-x-lg: 1.5rem;
|
|
$input-btn-font-size-lg: 1rem;
|
|
$input-btn-line-height-lg: $line-height-lg;
|
|
|
|
$input-btn-border-width: $border-width;
|
|
|
|
// Buttons
|
|
|
|
$btn-padding-y: $input-btn-padding-y;
|
|
$btn-padding-x: $input-btn-padding-x;
|
|
$btn-font-size: $input-btn-font-size;
|
|
$btn-line-height: $input-btn-line-height;
|
|
|
|
$btn-padding-y-sm: $input-btn-padding-y-sm;
|
|
$btn-padding-x-sm: $input-btn-padding-x-sm;
|
|
$btn-font-size-sm: $input-btn-font-size-sm;
|
|
$btn-line-height-sm: $input-btn-line-height-sm;
|
|
|
|
$btn-padding-y-lg: $input-btn-padding-y-lg;
|
|
$btn-padding-x-lg: $input-btn-padding-x-lg;
|
|
$btn-font-size-lg: $input-btn-font-size-lg;
|
|
$btn-line-height-lg: $input-btn-line-height-lg;
|
|
|
|
$btn-border-width: $input-btn-border-width;
|
|
|
|
$btn-font-weight: $font-weight-normal;
|
|
$btn-box-shadow: none;
|
|
$btn-focus-width: $input-btn-focus-width;
|
|
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
$btn-disabled-opacity: .65;
|
|
$btn-active-box-shadow: none;
|
|
|
|
$btn-link-color: var(--#{$prefix}link-color);
|
|
$btn-link-hover-color: var(--#{$prefix}link-hover-color);
|
|
$btn-link-disabled-color: $gray-400;
|
|
|
|
// Button border radius
|
|
|
|
$btn-border-radius: $border-radius;
|
|
$btn-border-radius-sm: $border-radius-sm;
|
|
$btn-border-radius-lg: $border-radius-sm;
|
|
|
|
$btn-transition: $transition-base;
|
|
|
|
// Forms
|
|
|
|
$input-padding-y: $input-btn-padding-y;
|
|
$input-padding-x: $input-btn-padding-x;
|
|
$input-font-size: $input-btn-font-size;
|
|
$input-line-height: $input-btn-line-height;
|
|
|
|
$input-padding-y-sm: $input-btn-padding-y-sm;
|
|
$input-padding-x-sm: $input-btn-padding-x-sm;
|
|
$input-font-size-sm: $input-btn-font-size-sm;
|
|
$input-line-height-sm: $input-btn-line-height-sm;
|
|
|
|
$input-padding-y-lg: $input-btn-padding-y-lg;
|
|
$input-padding-x-lg: $input-btn-padding-x-lg;
|
|
$input-font-size-lg: $input-btn-font-size-lg;
|
|
$input-line-height-lg: $input-btn-line-height-lg;
|
|
|
|
$input-bg: $white;
|
|
$input-disabled-bg: $gray-200;
|
|
$input-disabled-border-color: $input-border-color;
|
|
|
|
$input-color: $gray-700;
|
|
$input-border-color: $gray-300;
|
|
$input-border-width: $input-btn-border-width;
|
|
$input-box-shadow: none;
|
|
|
|
$input-border-radius: $border-radius;
|
|
$input-border-radius-sm: $border-radius-sm;
|
|
$input-border-radius-lg: $border-radius-sm;
|
|
|
|
$input-focus-bg: $white;
|
|
$input-focus-border-color: $primary;
|
|
$input-focus-color: $input-color;
|
|
$input-focus-width: $input-border-width;
|
|
$input-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
|
|
$input-placeholder-color: $gray-500;
|
|
|
|
$input-height-border: $input-border-width * 2;
|
|
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
|
|
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
|
|
$input-height-lg: add($input-line-height-sm * 1em, add($input-padding-y-lg * 2, $input-height-border, false));
|
|
|
|
$form-check-input-bg: $body-bg;
|
|
$form-check-input-border: 1px solid rgba(0, 0, 0, .25);
|
|
$form-check-input-border-radius: .25em;
|
|
$form-check-radio-border-radius: 50%;
|
|
$form-check-input-focus-border: $input-focus-border-color;
|
|
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
|
|
$form-check-input-checked-color: $component-active-color;
|
|
$form-check-input-checked-bg-color: $component-active-bg;
|
|
$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
|
|
|
|
$form-check-input-indeterminate-color: $component-active-color;
|
|
$form-check-input-indeterminate-bg-color: $component-active-bg;
|
|
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
|
|
|
|
$form-switch-focus-color: $input-focus-border-color;
|
|
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
|
|
|
|
$form-select-padding-y: $input-padding-y;
|
|
$form-select-padding-x: $input-padding-x;
|
|
$form-select-font-size: $input-font-size;
|
|
$form-select-font-weight: $input-font-weight;
|
|
$form-select-line-height: $input-line-height;
|
|
$form-select-color: $input-color;
|
|
$form-select-border-radius: $border-radius;
|
|
|
|
$form-select-focus-border-color: $input-focus-border-color;
|
|
$form-select-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
|
|
$form-select-disabled-border-color: $input-disabled-border-color;
|
|
|
|
$form-range-thumb-bg: $component-active-bg;
|
|
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
|
|
$form-range-thumb-disabled-bg: $gray-500;
|
|
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
|
|
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
|
|
|
|
$form-text-color: $body-color;
|
|
|
|
// Z-index
|
|
$zindex-header: $zindex-sticky;
|
|
|
|
// Navs
|
|
|
|
$nav-link-padding-y: .25rem;
|
|
$nav-link-padding-x: .75rem;
|
|
$nav-link-font-size: null;
|
|
$nav-link-font-weight: null;
|
|
$nav-link-color: var(--#{$prefix}body-color);
|
|
$nav-link-hover-color: null;
|
|
$nav-link-disabled-color: $gray-500 !important;
|
|
|
|
$nav-tabs-border-color: $border-color;
|
|
$nav-tabs-border-width: $border-width;
|
|
$nav-tabs-border-radius: $border-radius;
|
|
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
|
|
$nav-tabs-link-active-color: $gray-700;
|
|
$nav-tabs-link-active-bg: $body-bg;
|
|
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
|
|
|
|
$nav-pills-border-radius: $border-radius;
|
|
$nav-pills-link-color: $nav-link-color;
|
|
$nav-pills-link-active-color: $component-active-color;
|
|
$nav-pills-link-active-bg: $component-active-bg;
|
|
|
|
// Navbar
|
|
|
|
$navbar-padding-y: 0;
|
|
$navbar-padding-x: 0;
|
|
|
|
$navbar-nav-link-padding-x: 1rem;
|
|
$navbar-nav-link-font-size: $font-size-base;
|
|
$navbar-nav-link-font-weight: $font-weight-normal;
|
|
$navbar-nav-link-text-transform: capitalize;
|
|
|
|
$navbar-brand-height: 30px; //Logo height
|
|
$navbar-brand-padding-y: 30px;
|
|
$nav-link-line-height: $navbar-brand-padding-y * 2 + $navbar-brand-height;
|
|
|
|
$sticky-navbar-brand-height: 22px; //sticky Logo height
|
|
$sticky-navbar-brand-padding-y: 14px;
|
|
$sticky-nav-link-line-height: $sticky-navbar-brand-padding-y * 2 + $sticky-navbar-brand-height;
|
|
|
|
$mobile-navbar-brand-height: 22px; //mobile Logo height
|
|
$mobile-navbar-brand-padding-y: 20px;
|
|
|
|
$navbar-toggler-padding-x: 0;
|
|
$navbar-toggler-focus-width: $btn-focus-width;
|
|
|
|
$navbar-dark-color: $white;
|
|
$navbar-dark-hover-color: $primary !important;
|
|
$navbar-dark-active-color: $primary !important;
|
|
$navbar-dark-disabled-color: rgba($white, .25);
|
|
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
|
|
|
|
$navbar-light-color: $gray-600;
|
|
$navbar-light-hover-color: $primary;
|
|
$navbar-light-active-color: $primary;
|
|
$navbar-light-disabled-color: rgba($black, .3);
|
|
$navbar-light-toggler-border-color: rgba($black, .1);
|
|
|
|
$navbar-primary-color: $white;
|
|
$navbar-text-primary-hover-color: $gray-800;
|
|
$navbar-primary-active-color: $gray-800;
|
|
$navbar-primary-disabled-color: rgba($white, .25);
|
|
$navbar-primary-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
|
|
|
|
// Dropdowns
|
|
|
|
$dropdown-min-width: 15rem;
|
|
$dropdown-padding-y: 1rem;
|
|
$dropdown-spacer: 0;
|
|
$dropdown-font-size: $font-size-base;
|
|
$dropdown-color: $body-color;
|
|
$dropdown-bg: $white;
|
|
$dropdown-border-color: var(--#{$prefix}border-color);
|
|
$dropdown-border-radius: $border-radius;
|
|
$dropdown-border-width: 0;
|
|
|
|
$dropdown-divider-bg: $gray-200;
|
|
$dropdown-divider-margin-y: $spacer * .5;
|
|
$dropdown-box-shadow: 0px 20px 30px rgba(83, 88, 93, 0.05), 0px 0px 30px rgba(83, 88, 93, 0.10);
|
|
|
|
$dropdown-link-color: $gray-600;
|
|
$dropdown-link-hover-color: $primary;
|
|
$dropdown-link-hover-bg: transparent;
|
|
|
|
$dropdown-link-active-color: $primary;
|
|
$dropdown-link-active-bg: $dropdown-link-hover-bg;
|
|
|
|
$dropdown-link-disabled-color: $gray-600;
|
|
|
|
$dropdown-item-font-weight: $font-weight-light;
|
|
|
|
$dropdown-item-padding-y: .40rem;
|
|
$dropdown-item-padding-x: 2rem;
|
|
|
|
$dropdown-header-color: $gray-800;
|
|
$dropdown-header-font-size: $font-size-base;
|
|
$dropdown-header-font-weight: $font-weight-bold;
|
|
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
|
|
|
|
$dropdown-dark-color: $gray-300;
|
|
$dropdown-dark-bg: $gray-800;
|
|
$dropdown-dark-border-color: $dropdown-border-color;
|
|
$dropdown-dark-divider-bg: rgba($white, .10);
|
|
$dropdown-dark-link-color: $dropdown-dark-color;
|
|
$dropdown-dark-link-hover-color: $white;
|
|
$dropdown-dark-link-hover-bg: $dropdown-link-hover-bg;
|
|
$dropdown-dark-link-active-color: $dropdown-link-active-color;
|
|
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
|
|
$dropdown-dark-link-disabled-color: $gray-500;
|
|
$dropdown-dark-header-color: $gray-500;
|
|
|
|
// Pagination
|
|
|
|
$pagination-padding-y: .7rem;
|
|
$pagination-padding-x: 1rem;
|
|
$pagination-padding-y-sm: .25rem;
|
|
$pagination-padding-x-sm: .5rem;
|
|
$pagination-padding-y-lg: .75rem;
|
|
$pagination-padding-x-lg: 1.5rem;
|
|
|
|
$pagination-color: var(--#{$prefix}gray-600);
|
|
$pagination-bg: $white;
|
|
$pagination-border-width: $border-width;
|
|
$pagination-border-radius: $border-radius;
|
|
$pagination-border-color: $gray-300;
|
|
|
|
$pagination-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
$pagination-focus-outline: 0;
|
|
$pagination-focus-color: var(--#{$prefix}link-hover-color);
|
|
$pagination-focus-bg: $gray-200;
|
|
|
|
$pagination-hover-color: var(--#{$prefix}white);
|
|
$pagination-hover-bg: $primary;
|
|
$pagination-hover-border-color: $primary;
|
|
|
|
$pagination-active-color: $component-active-color;
|
|
$pagination-active-bg: $component-active-bg;
|
|
$pagination-active-border-color: $pagination-active-bg;
|
|
|
|
$pagination-disabled-color: $gray-400;
|
|
$pagination-disabled-bg: $white;
|
|
$pagination-disabled-border-color: $gray-300;
|
|
|
|
// table
|
|
|
|
$table-group-separator-color: $gray-500;
|
|
|
|
// Cards
|
|
|
|
$card-spacer-y: .75rem;
|
|
$card-spacer-x: 1.25rem;
|
|
$card-border-radius: $border-radius-lg;
|
|
$card-border-width: 0;
|
|
$card-border-color: var(--#{$prefix}border-color);
|
|
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
|
|
$card-cap-bg: $white;
|
|
|
|
$card-img-overlay-padding: 1.25rem;
|
|
|
|
$card-group-margin: $grid-gutter-width * .5;
|
|
|
|
// Accordion
|
|
$accordion-color: var(--#{$prefix}body-color);
|
|
$accordion-button-active-bg: tint-color($component-active-bg, 90%);
|
|
$accordion-button-active-color: shade-color($primary, 10%);
|
|
|
|
$accordion-button-focus-border-color: none;
|
|
$accordion-button-focus-box-shadow: $btn-focus-box-shadow;
|
|
$accordion-icon-color: $accordion-color;
|
|
$accordion-icon-active-color: $accordion-button-active-color;
|
|
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
|
$accordion-button-active-icon-white: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$white}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
|
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
|
|
|
// Tooltips
|
|
|
|
$tooltip-font-size: 11px;
|
|
|
|
// Badges
|
|
|
|
$badge-font-weight: $font-weight-light;
|
|
$badge-font-size: 0.85em;
|
|
$badge-border-radius: $border-radius;
|
|
|
|
// Modals popup
|
|
|
|
$modal-content-border-width: 0;
|
|
$modal-content-border-radius: $border-radius;
|
|
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
|
|
|
|
// Progress bars
|
|
|
|
$progress-bg: $border-color;
|
|
|
|
// List group
|
|
|
|
$list-group-color: $gray-600;
|
|
$list-group-bg: transparent;
|
|
$list-group-border-radius: $border-radius;
|
|
$list-group-active-color: $component-active-color;
|
|
$list-group-active-bg: $component-active-bg;
|
|
$list-group-active-border-color: $list-group-active-bg;
|
|
|
|
// Breadcrumbs
|
|
|
|
$breadcrumb-padding-y: .5rem;
|
|
$breadcrumb-padding-x: 0;
|
|
$breadcrumb-item-padding-x: .8rem;
|
|
|
|
$breadcrumb-bg: transparent;
|
|
$breadcrumb-divider-color: $gray-500;
|
|
$breadcrumb-active-color: $gray-500;
|
|
$breadcrumb-divider: quote("/");
|
|
$breadcrumb-divider-flipped: $breadcrumb-divider;
|
|
|
|
// Close
|
|
|
|
$btn-close-focus-shadow: $input-btn-focus-box-shadow;
|
|
|
|
// Offcanvas
|
|
|
|
$offcanvas-padding-x: $grid-gutter-width;
|
|
|
|
// Code
|
|
|
|
$kbd-bg: $dark-gray;
|
|
$kbd-color: var(--#{$prefix}white);
|
|
|
|
// Avatar
|
|
|
|
$avatar-size-base: 3rem;
|
|
$avatar-size-xs: 2.1875rem;
|
|
$avatar-size-sm: 2.5rem;
|
|
$avatar-size-lg: 4rem;
|
|
$avatar-size-xl: 5.125rem;
|
|
$avatar-size-xxl: 8rem;
|
|
$avatar-size-xxxl: 11rem; |