744 lines
26 KiB
SCSS
744 lines
26 KiB
SCSS
/* prettier-ignore */
|
|
@use 'sass:math';
|
|
@import 'colors';
|
|
|
|
// Options
|
|
//
|
|
// Quickly modify global styling by enabling or disabling optional features.
|
|
$enable-shadows: true !default;
|
|
$enable-negative-margins: true !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Spacing
|
|
//----------------------------------------------
|
|
$spacer: 1rem !default;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * 0.25,
|
|
2: $spacer * 0.5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 2,
|
|
6: $spacer * 2.5,
|
|
7: $spacer * 3,
|
|
8: $spacer * 3.5,
|
|
9: $spacer * 4,
|
|
10: $spacer * 4.5,
|
|
11: $spacer * 5,
|
|
12: $spacer * 6,
|
|
13: $spacer * 6.5,
|
|
14: $spacer * 7,
|
|
15: $spacer * 7.5
|
|
) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Link
|
|
//-----------------------------------------------*/
|
|
$link-decoration: none !default;
|
|
$link-hover-decoration: underline !default;
|
|
$link-hover-color: $primary-text-emphasis !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Grid Breakpoints
|
|
//-----------------------------------------------*/
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1540px
|
|
) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Grid containers
|
|
//-----------------------------------------------*/
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1184px,
|
|
xxl: 1678px
|
|
) !default;
|
|
|
|
// phoenix specific variable
|
|
$container-small-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1216px
|
|
) !default;
|
|
|
|
$container-medium-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1216px,
|
|
xxl: 1400px
|
|
) !default;
|
|
|
|
$bg-opacities: (
|
|
10: 0.1,
|
|
25: 0.25,
|
|
50: 0.5,
|
|
75: 0.75,
|
|
85: 0.85,
|
|
// new
|
|
100: 1
|
|
) !default;
|
|
|
|
$text-opacities: (
|
|
25: 0.25,
|
|
50: 0.5,
|
|
75: 0.75,
|
|
85: 0.85,
|
|
100: 1
|
|
) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Grid Collumn
|
|
//-----------------------------------------------*/
|
|
$grid-gutter-width: 2rem !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Border radious
|
|
//-----------------------------------------------*/
|
|
$border-radius: 0.375rem !default;
|
|
$border-radius-sm: 0.25rem !default;
|
|
$border-radius-lg: 0.5rem !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Shadow
|
|
//-----------------------------------------------*/
|
|
$box-shadow: 0px 2px 4px -2px rgba(36, 40, 46, 0.08) !default;
|
|
|
|
// phoenix specific variable
|
|
$box-shadow-gray-400: 0px 4px 8px -6px rgba(36, 40, 46, 0.03),
|
|
0px 16px 8px -4px rgba(36, 40, 46, 0.03) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Fonts Families
|
|
//-----------------------------------------------*/
|
|
$font-family-sans-serif: 'Nunito Sans', -apple-system, BlinkMacSystemFont,
|
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
|
|
'Segoe UI Emoji', 'Segoe UI Symbol' !default;
|
|
$font-family-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas,
|
|
'Liberation Mono', 'Courier New', monospace !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Fonts
|
|
//-----------------------------------------------*/
|
|
$type-scale: 1.25 !default; // phoenix spesific variable
|
|
|
|
$font-size-base: 1rem !default;
|
|
$font-size-sm: $font-size-base * 0.875 !default;
|
|
$font-size-lg: $font-size-base * 1.2 !default;
|
|
|
|
$font-sizes: (
|
|
1: pow($type-scale, 7) * $font-size-base,
|
|
// 76.29px
|
|
2: pow($type-scale, 6) * $font-size-base,
|
|
// 61.04px
|
|
3: pow($type-scale, 5) * $font-size-base,
|
|
// 48.83px
|
|
4: pow($type-scale, 4) * $font-size-base,
|
|
// 39.06px
|
|
5: pow($type-scale, 3) * $font-size-base,
|
|
// 31.25px
|
|
6: pow($type-scale, 2) * $font-size-base,
|
|
//25px
|
|
7: pow($type-scale, 1) * $font-size-base,
|
|
//20px
|
|
8: $font-size-base,
|
|
// 16px
|
|
9: math.div(1, $type-scale) * $font-size-base,
|
|
// 12.80px
|
|
10: math.div(1, pow($type-scale, 2)) * $font-size-base,
|
|
// 10.24px
|
|
11: math.div(1, pow($type-scale, 3)) * $font-size-base,
|
|
// 8.19px
|
|
) !default;
|
|
|
|
$font-weight-thin: 100 !default;
|
|
$font-weight-lighter: 200 !default;
|
|
$font-weight-light: 300 !default;
|
|
$font-weight-normal: 400 !default;
|
|
$font-weight-medium: 500 !default;
|
|
$font-weight-semibold: 600 !default;
|
|
$font-weight-bold: 700 !default;
|
|
$font-weight-bolder: 800 !default;
|
|
$font-weight-black: 900 !default;
|
|
|
|
$line-height-base: 1.49 !default;
|
|
$line-height-sm: 1.2 !default;
|
|
$line-height-lg: 1.4 !default;
|
|
|
|
$h1-font-size: map_get($font-sizes, 4) !default;
|
|
$h2-font-size: map_get($font-sizes, 5) !default;
|
|
$h3-font-size: map_get($font-sizes, 6) !default;
|
|
$h4-font-size: map_get($font-sizes, 7) !default;
|
|
$h5-font-size: map_get($font-sizes, 8) !default;
|
|
$h6-font-size: map_get($font-sizes, 9) !default;
|
|
|
|
// scss-docs-start headings-variables
|
|
$headings-margin-bottom: map-get($spacers, 1) !default;
|
|
// $headings-font-family: $font-family-sans-serif !default;
|
|
$headings-font-weight: $font-weight-bold !default;
|
|
$headings-line-height: 1 !default;
|
|
$headings-color: var(--#{$prefix}emphasis-color) !default;
|
|
// scss-docs-end headings-variables
|
|
|
|
// scss-docs-start display-headings
|
|
$display-font-sizes: (
|
|
1: map_get($font-sizes, 1),
|
|
2: map_get($font-sizes, 2),
|
|
3: map_get($font-sizes, 3),
|
|
4: map_get($font-sizes, 4),
|
|
5: map_get($font-sizes, 5),
|
|
6: map_get($font-sizes, 6)
|
|
) !default;
|
|
|
|
$display-font-weight: $font-weight-normal !default;
|
|
// scss-docs-end display-headings
|
|
|
|
// scss-docs-start type-variables
|
|
$lead-font-size: map-get($font-sizes, 7) !default;
|
|
$lead-font-weight: $font-weight-semibold !default;
|
|
|
|
$small-font-size: 75% !default;
|
|
|
|
$blockquote-font-size: $font-size-lg !default;
|
|
|
|
$hr-color: var(--#{$prefix}border-color-translucent) !default;
|
|
$hr-opacity: 1 !default;
|
|
// scss-docs-end type-variables
|
|
|
|
//*-----------------------------------------------
|
|
//| Tables
|
|
//-----------------------------------------------*/
|
|
$table-color: var(--#{$prefix}body-color) !default;
|
|
$table-cell-padding-y: 1rem !default;
|
|
$table-bg: transparent !default;
|
|
$table-th-font-weight: $font-weight-bolder !default;
|
|
$table-active-bg: rgba(var(--#{$prefix}quaternary-bg-rgb), 0.4) !default;
|
|
|
|
$table-striped-color: var(--#{$prefix}body-highlight-color) !default;
|
|
$table-striped-bg: rgba(var(--#{$prefix}quaternary-bg-rgb), 0.2) !default;
|
|
|
|
$table-hover-color: var(--#{$prefix}emphasis-color) !default;
|
|
$table-hover-bg: rgba(var(--#{$prefix}primary-dark-rgb), 0.07) !default;
|
|
|
|
$table-border-color: var(--#{$prefix}border-color-translucent);
|
|
|
|
$table-striped-order: even !default;
|
|
|
|
$table-group-separator-color: inherit !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Buttons and Forms
|
|
//-----------------------------------------------*/
|
|
|
|
// scss-docs-start input-btn-variables
|
|
$input-btn-padding-y: 0.625rem !default;
|
|
$input-btn-padding-x: 1.5rem !default;
|
|
|
|
$input-btn-focus-blur: 0 !default;
|
|
|
|
$input-btn-padding-y-sm: 0.5rem !default;
|
|
$input-btn-padding-x-sm: 1rem !default;
|
|
$input-btn-font-size-sm: map-get($font-sizes, 9) !default;
|
|
|
|
$input-btn-padding-y-lg: 0.875rem !default;
|
|
$input-btn-padding-x-lg: 1.5rem !default;
|
|
$input-btn-font-size-lg: map-get($font-sizes, 8) !default;
|
|
// scss-docs-end input-btn-variables
|
|
|
|
// buttons
|
|
//
|
|
|
|
// scss-docs-start btn-variables
|
|
$btn-line-height: 1.2 !default;
|
|
|
|
$input-btn-font-size: map-get($font-sizes, 9) !default;
|
|
$btn-font-weight: $font-weight-bold !default;
|
|
|
|
$btn-box-shadow: initial !default;
|
|
|
|
$btn-focus-width: 0 !default;
|
|
$btn-focus-box-shadow: 0 0 0 0.25rem transparent !default;
|
|
$btn-disabled-opacity: 0.3 !default;
|
|
$btn-active-box-shadow: initial !default;
|
|
|
|
$btn-link-disabled-color: $gray-400 !default;
|
|
|
|
$btn-border-radius-sm: $border-radius !default;
|
|
$btn-border-radius-lg: $border-radius !default;
|
|
// scss-docs-end btn-variables
|
|
|
|
// Forms
|
|
//
|
|
// scss-docs-start form-label-variables
|
|
$form-label-font-size: map-get($font-sizes, 10) !default;
|
|
$form-label-font-weight: $font-weight-bold !default;
|
|
$form-label-color: var(--#{$prefix}tertiary-color) !default;
|
|
// scss-docs-end form-label-variables
|
|
|
|
// scss-docs-start form-input-variables
|
|
$input-padding-y: 0.5rem !default;
|
|
$input-padding-x: 1rem !default;
|
|
$input-font-weight: $font-weight-semibold !default;
|
|
|
|
$input-padding-y-sm: 0.375rem !default;
|
|
|
|
$input-padding-y-lg: 0.75rem !default;
|
|
$input-padding-x-lg: 1rem !default;
|
|
|
|
$input-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
$input-disabled-color: var(--#{$prefix}quaternary-color) !default;
|
|
$input-disabled-bg: rgba(var(--#{$prefix}gray-100-rgb), 0.7) !default;
|
|
|
|
$input-color: var(--#{$prefix}body-color) !default;
|
|
$input-border-color: var(--#{$prefix}border-color) !default;
|
|
$input-box-shadow: inset 0 1px 2px transparent !default;
|
|
|
|
$input-border-radius-sm: $border-radius !default;
|
|
$input-border-radius-lg: $border-radius !default;
|
|
|
|
$input-focus-border-color: $primary !default;
|
|
$input-focus-box-shadow: inset 0 0 0 30px var(--#{$prefix}emphasis-bg),
|
|
0 0 0 0.25rem rgba(var(--#{$prefix}primary-rgb), 0.25) !default;
|
|
|
|
$input-placeholder-color: rgba(
|
|
var(--#{$prefix}quaternary-color-rgb),
|
|
0.8
|
|
) !default; // scss-docs-end form-input-variables
|
|
|
|
// scss-docs-start form-check-variables
|
|
$form-check-margin-bottom: 0.34375rem !default;
|
|
$form-check-label-color: $form-label-color !default;
|
|
$form-check-input-border: 1px solid var(--#{$prefix}border-color) !default;
|
|
|
|
// scss-docs-end form-check-variables
|
|
|
|
// scss-docs-start form-switch-variables
|
|
$form-switch-color: $white !default;
|
|
$form-switch-focus-color: $white !default;
|
|
// scss-docs-end form-switch-variables
|
|
|
|
// scss-docs-start input-group-variables
|
|
$input-group-addon-bg: var(--#{$prefix}input-group-addon-bg-global) !default;
|
|
// scss-docs-end input-group-variables
|
|
|
|
// scss-docs-start form-select-variables
|
|
$form-select-indicator-padding: 2.5rem !default;
|
|
$form-select-disabled-bg: $input-disabled-bg !default;
|
|
$form-select-box-shadow: $input-box-shadow !default;
|
|
$form-select-indicator: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03NS4zNDggMTI3LjE5MkM3Mi40MzgxIDEyNy4xOTIgNjkuODUxNCAxMjYuMjIyIDY3LjkxMTUgMTI0LjI4Mkw1LjgzMjE1IDYyLjIwMjNDMS42Mjg4NyA1OC4zMjIzIDEuNjI4ODcgNTEuNTMyNCA1LjgzMjE1IDQ3LjY1MjVDOS43MTIxMSA0My40NDkyIDE2LjUwMiA0My40NDkyIDIwLjM4MiA0Ny42NTI1TDc1LjM0OCAxMDIuMjk1TDEyOS45OTEgNDcuNjUyNUMxMzMuODcxIDQzLjQ0OTIgMTQwLjY2MSA0My40NDkyIDE0NC41NDEgNDcuNjUyNUMxNDguNzQ0IDUxLjUzMjQgMTQ4Ljc0NCA1OC4zMjIzIDE0NC41NDEgNjIuMjAyM0w4Mi40NjEzIDEyNC4yODJDODAuNTIxMyAxMjYuMjIyIDc3LjkzNDcgMTI3LjE5MiA3NS4zNDggMTI3LjE5MloiIGZpbGw9IiMzMTM3NEEiLz4KPC9zdmc+Cg==') !default;
|
|
$form-select-bg-size: 9px 12px !default;
|
|
// scss-docs-end form-select-variables
|
|
|
|
// scss-docs-start form-range-variables
|
|
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
// scss-docs-end form-range-variables
|
|
|
|
// scss-docs-start form-floating-variables
|
|
$form-floating-height: add(2.875rem, 2px) !default;
|
|
$form-floating-input-padding-t: 22.5px !default;
|
|
$form-floating-input-padding-b: 9.5px !default;
|
|
$form-floating-label-transform: scale(0.85) translateY(-0.4rem)
|
|
translateX(0.15rem) !default;
|
|
// scss-docs-end form-floating-variables
|
|
|
|
//*-----------------------------------------------
|
|
//| Z-index
|
|
//-----------------------------------------------*/
|
|
$zindex-levels: (
|
|
n1: -1,
|
|
0: 0,
|
|
1: 1,
|
|
2: 2,
|
|
3: 3,
|
|
4: 4,
|
|
5: 5
|
|
) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Nav-tabs
|
|
//-----------------------------------------------*/
|
|
$nav-tabs-border-width: 2px !default;
|
|
$nav-underline-link-active-color: var(--#{$prefix}primary) !default;
|
|
|
|
// nav-pills
|
|
$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
|
|
$nav-pills-link-active-bg: transparent !default;
|
|
$nav-pills-border-radius: var(--#{$prefix}border-radius-pill) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Navbar
|
|
//-----------------------------------------------*/
|
|
$navbar-padding-y: map_get($spacers, 2) !default;
|
|
$navbar-padding-x: map_get($spacers, 4) !default;
|
|
|
|
$navbar-brand-font-size: map_get($font-sizes, 5) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Navigation
|
|
//-----------------------------------------------*/
|
|
|
|
$navbar-font-size: $font-size-base * 0.8 !default; // phoenix specific variable
|
|
|
|
$navbar-light-hover-color: rgba(
|
|
var(--#{$prefix}emphasis-color-rgb),
|
|
0.9
|
|
) !default;
|
|
$navbar-light-disabled-color: rgba(
|
|
var(--#{$prefix}emphasis-color-rgb),
|
|
0.25
|
|
) !default;
|
|
$navbar-light-toggler-icon-bg: str-replace(
|
|
url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#9da9bb' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M0 6h30M0 14h30M0 22h30'/%3E%3C/svg%3E"),
|
|
'#',
|
|
'%23'
|
|
) !default;
|
|
|
|
$navbar-dark-color: rgba($white, 0.7) !default;
|
|
$navbar-dark-hover-color: rgba($white, 0.9) !default;
|
|
$navbar-dark-toggler-icon-bg: str-replace(
|
|
url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#9da9bb' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M0 6h30M0 14h30M0 22h30'/%3E%3C/svg%3E"),
|
|
'#',
|
|
'%23'
|
|
) !default;
|
|
|
|
// phoenix specific variable
|
|
$navbar-top-slim-height: 1.7rem !default;
|
|
$navbar-top-height: var(--#{$prefix}navbar-top-height) !default;
|
|
$standard-nav-height: 3.5625rem !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Dropdowns | Dropdown menu container and contents.
|
|
//-----------------------------------------------*/
|
|
$dropdown-padding-y: map_get($spacers, 3) !default;
|
|
$dropdown-font-size: $navbar-font-size !default;
|
|
|
|
// $dropdown-color: var(--#{$prefix}tertiary-color) !default;
|
|
$dropdown-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
$dropdown-border-color: var(--#{$prefix}border-color) !default;
|
|
$dropdown-divider-bg: var(--#{$prefix}border-color) !default;
|
|
|
|
$dropdown-link-color: var(--#{$prefix}dropdown-link-color-global) !default;
|
|
$dropdown-link-hover-color: var(
|
|
--#{$prefix}dropdown-link-hover-color-global
|
|
) !default;
|
|
$dropdown-link-hover-bg: var(--#{$prefix}secondary-bg) !default;
|
|
$dropdown-link-disabled-color: $gray-100 !default;
|
|
|
|
$dropdown-item-padding-y: map_get($spacers, 2) !default;
|
|
$dropdown-item-padding-x: map_get($spacers, 3) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Pagination
|
|
//-----------------------------------------------*/
|
|
$pagination-padding-y: 0.5rem !default;
|
|
|
|
$pagination-font-size: map-get($font-sizes, 9) !default;
|
|
|
|
$pagination-color: var(--#{$prefix}secondary-color) !default;
|
|
$pagination-bg: transparent !default;
|
|
$pagination-border-width: 0 !default;
|
|
|
|
$pagination-hover-color: var(--#{$prefix}primary) !default;
|
|
$pagination-hover-bg: var(--#{$prefix}secondary-bg) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Cards
|
|
//-----------------------------------------------*/
|
|
$card-spacer-y: map-get($spacers, 4) !default;
|
|
$card-spacer-x: map-get($spacers, 4) !default;
|
|
$card-title-spacer-y: $spacer !default;
|
|
$card-title-color: $headings-color !default;
|
|
$card-border-radius: $border-radius-lg !default;
|
|
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
$card-cap-bg: transparent !default;
|
|
$card-cap-padding-y: $card-spacer-y !default;
|
|
$card-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Accordion
|
|
//-----------------------------------------------*/
|
|
$accordion-padding-y: map-get($spacers, 2) !default;
|
|
$accordion-padding-x: 0 !default;
|
|
$accordion-bg: transparent !default;
|
|
$accordion-color: var(--#{$prefix}body-highlight-color) !default;
|
|
|
|
$accordion-border-radius: 0 !default;
|
|
$accordion-border-width: 0 !default;
|
|
|
|
$accordion-button-color: var(--#{$prefix}primary) !default;
|
|
$accordion-button-active-color: var(--#{$prefix}emphasis-color) !default;
|
|
$accordion-button-active-bg: transparent !default;
|
|
|
|
$accordion-icon-color: $primary !default;
|
|
$accordion-icon-active-color: $primary !default;
|
|
|
|
$accordion-button-icon: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 900 900'%3E%3Cpath fill='#{$accordion-icon-color}' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E") !default;
|
|
$accordion-button-active-icon: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 900 900'%3E%3Cpath fill='#{$accordion-icon-active-color}' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E") !default;
|
|
|
|
// /*-----------------------------------------------
|
|
//| Tooltip
|
|
//-----------------------------------------------*/
|
|
$tooltip-font-size: map-get($font-sizes, 9) !default;
|
|
$tooltip-padding-y: 0.5rem !default;
|
|
|
|
$tooltip-color: $white;
|
|
$tooltip-bg: $gray-1000 !default;
|
|
|
|
$tooltip-border-radius: $border-radius-sm !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Popover
|
|
//-----------------------------------------------*/
|
|
$popover-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
$popover-border-color: var(--#{$prefix}border-color) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Toast
|
|
//-----------------------------------------------*/
|
|
$toast-font-size: $font-size-base !default;
|
|
$toast-padding-x: 0 !default;
|
|
$toast-padding-y: map-get($spacers, 3) !default;
|
|
$toast-box-shadow: $box-shadow-gray-400 !default;
|
|
$toast-background-color: rgba(var(--#{$prefix}emphasis-bg-rgb), 0.85) !default;
|
|
$toast-border-color: var(--#{$prefix}border-color) !default;
|
|
|
|
$toast-header-color: var(--#{$prefix}secondary-color) !default;
|
|
$toast-header-background-color: transparent !default;
|
|
$toast-header-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Badge
|
|
//-----------------------------------------------*/
|
|
$badge-padding-y: 0.355555em !default;
|
|
$badge-padding-x: 0.711111em !default;
|
|
$badge-border-radius: $border-radius-sm !default;
|
|
|
|
// /*-----------------------------------------------
|
|
//| Modal
|
|
//-----------------------------------------------*/
|
|
$modal-content-border-radius: $border-radius !default;
|
|
$modal-content-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
$modal-content-border-color: transparent !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Alert
|
|
//-----------------------------------------------*/
|
|
$alert-padding-y: map-get($spacers, 4) !default;
|
|
$alert-padding-x: map-get($spacers, 4) !default;
|
|
$alert-border-radius: map-get($spacers, 2) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Progress
|
|
//-----------------------------------------------*/
|
|
$progress-height: 0.313rem !default;
|
|
$progress-border-radius: $border-radius-lg !default;
|
|
$progress-box-shadow: initial !default;
|
|
$progress-bg: var(--#{$prefix}secondary-bg) !default;
|
|
|
|
///*-----------------------------------------------
|
|
//| List Group
|
|
//-----------------------------------------------*/
|
|
$list-group-color: var(--#{$prefix}secondary-color) !default;
|
|
$list-group-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
$list-group-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
$list-group-disabled-color: var(--#{$prefix}quaternary-color) !default;
|
|
$list-group-hover-bg: var(--#{$prefix}body-highlight-bg) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Thumbnail
|
|
//-----------------------------------------------*/
|
|
$thumbnail-bg: var(--#{$prefix}emphasis-bg) !default;
|
|
|
|
// /*-----------------------------------------------
|
|
//| Breadcrumbs
|
|
//-----------------------------------------------*/
|
|
$breadcrumb-font-size: map-get($font-sizes, 9) !default;
|
|
$breadcrumb-item-padding-x: map-get($spacers, 2) !default;
|
|
$breadcrumb-active-color: var(--#{$prefix}body-color) !default;
|
|
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='6' fill='#{$gray-600}' viewBox='0 0 256 480'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E") !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Carousel
|
|
//-----------------------------------------------*/
|
|
$carousel-transition-duration: 0.8s !default;
|
|
$carousel-indicator-active-bg: $primary !default;
|
|
|
|
// /*-----------------------------------------------
|
|
//| Spinner
|
|
//-----------------------------------------------*/
|
|
$spinner-width-sm: 1.35rem !default;
|
|
$spinner-height-sm: $spinner-width-sm !default;
|
|
|
|
// close
|
|
// phoenix specific variable
|
|
$btn-close-darken-nav-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ffffff'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
|
|
// $btn-close-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ffffff'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Offcanvas
|
|
//-----------------------------------------------*/
|
|
$offcanvas-horizontal-width: 458px !default;
|
|
$offcanvas-bg-color: var(--#{$prefix}emphasis-bg) !default;
|
|
|
|
// gutters
|
|
$gutters: map-merge(
|
|
$spacers,
|
|
(
|
|
card: $card-spacer-x * 2
|
|
)
|
|
) !default;
|
|
|
|
//*---------------------------------------------------------------------------
|
|
//| Phoenix specific components
|
|
//----------------------------------------------------------------------------*/
|
|
|
|
//*-----------------------------------------------
|
|
//| Viewport Heights & Widths
|
|
//----------------------------------------------
|
|
$viewport-heights: (
|
|
50: 50vh,
|
|
100: 100vh
|
|
) !default;
|
|
|
|
$sizes: (
|
|
25: 25%,
|
|
30: 30%,
|
|
50: 50%,
|
|
60: 60%,
|
|
70: 70%,
|
|
75: 75%,
|
|
100: 100%,
|
|
auto: auto
|
|
) !default;
|
|
|
|
// /*-----------------------------------------------
|
|
//| Footer
|
|
//-----------------------------------------------*/
|
|
$footer-height: 4rem !default;
|
|
|
|
// /*-----------------------------------------------
|
|
//| Avatar
|
|
//-----------------------------------------------*/
|
|
$avatars-dimension: (
|
|
's': toRem(24),
|
|
'm': toRem(32),
|
|
'l': toRem(40),
|
|
'xl': toRem(48),
|
|
'2xl': toRem(56),
|
|
'3xl': toRem(72),
|
|
'4xl': toRem(96),
|
|
'5xl': toRem(150)
|
|
) !default;
|
|
$avatars-placeholder-bg: var(--#{$prefix}secondary-bg) !default;
|
|
$avatars-status-border-color: var(--#{$prefix}emphasis-bg) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Scrollbar
|
|
//-----------------------------------------------*/
|
|
$scrollbar-bg: var(--#{$prefix}scrollbar-bg) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Layout
|
|
//-----------------------------------------------*/
|
|
$content-padding-x: map-get($spacers, 6) !default;
|
|
$content-padding-top: calc($navbar-top-height + 2rem) !default;
|
|
$content-padding-bottom: 6.375rem !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Plugins color variables
|
|
//-----------------------------------------------*/
|
|
|
|
$data-table-pagination-button-color: $black !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Navbar Vertical
|
|
//-----------------------------------------------*/
|
|
|
|
$navbar-vertical-breakpoints: mapReverse($grid-breakpoints) !default;
|
|
$navbar-vertical-width: 15.875rem !default;
|
|
$navbar-vertical-icon-width: 1rem !default;
|
|
|
|
$navbar-vertical-link-font-size: map-get($font-sizes, 9) !default;
|
|
$navbar-vertical-link-padding-y: 0.35rem !default;
|
|
|
|
$navbar-vertical-dropdown-font-size: 0.8125rem !default;
|
|
$navbar-vertical-dropdown-link-padding-x: map-get($spacers, 2) !default;
|
|
$navbar-vertical-dropdown-link-padding-y: map-get($spacers, 1) !default;
|
|
|
|
$navbar-vertical-footer-height: $footer-height !default;
|
|
$navbar-footer-border-color: var(
|
|
--#{$prefix}navbar-footer-border-color
|
|
) !default;
|
|
$navbar-vertical-height: calc(100vh - $navbar-top-height) !default;
|
|
|
|
$navbar-vertical-content-height: calc(
|
|
100vh - var(--#{$prefix}navbar-top-height) - $navbar-vertical-footer-height
|
|
) !default;
|
|
$navbar-vertical-content-padding-x: map-get($spacers, 2) !default;
|
|
$navbar-vertical-content-padding-y: map-get($spacers, 3) !default;
|
|
$navbar-vertical-label-font-size: map-get($font-sizes, 10) !default;
|
|
|
|
$navbar-vertical-collapse-width: 4rem !default;
|
|
$navbar-vertical-link-collapse-padding-x: 1.5rem !default;
|
|
$navbar-vertical-collapse-padding-x: 2.5rem !default;
|
|
$navbar-vertical-hover-width: 12.625rem !default;
|
|
$navbar-vertical-collapsed-hover-shadow: 0.625rem 0 0.625rem -0.5625rem var(--#{$prefix}navbar-vertical-collapsed-hover-shadow-color) !default;
|
|
|
|
$navbar-vertical-border-color: var(
|
|
--#{$prefix}navbar-vertical-border-color
|
|
) !default;
|
|
$navbar-vertical-bg-color: var(--#{$prefix}navbar-vertical-bg-color) !default;
|
|
$navbar-vertical-label-color: var(
|
|
--#{$prefix}navbar-vertical-label-color
|
|
) !default;
|
|
$navbar-vertical-link-color: var(
|
|
--#{$prefix}navbar-vertical-link-color
|
|
) !default;
|
|
$navbar-vertical-link-hover-color: var(
|
|
--#{$prefix}navbar-vertical-link-hover-color
|
|
) !default;
|
|
$navbar-vertical-link-hover-bg: var(
|
|
--#{$prefix}navbar-vertical-link-hover-bg
|
|
) !default;
|
|
$navbar-vertical-link-active-color: var(
|
|
--#{$prefix}navbar-vertical-link-active-color
|
|
) !default;
|
|
$navbar-vertical-link-disable-color: var(
|
|
--#{$prefix}navbar-vertical-link-disable-color
|
|
) !default;
|
|
|
|
$navbar-vertical-collapsed-menu-bg: var(
|
|
--#{$prefix}navbar-vertical-collapsed-menu-bg
|
|
) !default;
|
|
$navbar-vertical-hr-color: var(--#{$prefix}navbar-vertical-hr-color) !default;
|
|
$navbar-vertical-dropdown-indicator-color: var(
|
|
--#{$prefix}navbar-vertical-dropdown-indicator-color
|
|
) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Navbar Top
|
|
//-----------------------------------------------*/
|
|
$navbar-top-link-padding-start: 1.125rem !default;
|
|
$navbar-top-link-padding-end: 1.5rem !default;
|
|
$navbar-top-link-color: var(--#{$prefix}navbar-top-link-color) !default;
|
|
|
|
//*-----------------------------------------------
|
|
//| Navbar dual
|
|
//-----------------------------------------------*/
|
|
$dual-nav-border-color: map-get($grays, '200') !default;
|
|
$dual-nav-first-layer-bg: map-get($grays, '100') !default;
|
|
|
|
// scss-docs-start treeview-variables
|
|
$treeview-transition-collapse: height 0.15s ease !default;
|
|
$treeview-row-bg-odd: var(--#{$prefix}secondary-bg) !default;
|
|
$treeview-row-bg-even: var(--#{$prefix}light) !default;
|
|
// scss-docs-end treeview-variables
|