@leapdev/gui 0.2.265 → 1.0.1

package/dist/scss/4d/_variables-web.scss

@@ -1,647 +0,0 @@
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
-@import url('https://use.typekit.net/kax8yxy.css');
-
-:root {
-  --heading-font: 'gill-sans-nova', Helvetica Neue, Helvetica, Arial, sans-serif;
-  --body-font: 'Open Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
-  --border-color: #d6d6d6; // #BABCC2 used for Content App but Sirius is using #d6d6d6
-}
-
-$is-sirius:                    true !default;
-$is-dark-theme:                false !default;
-$enable-navbar-fixed-top:      true;
-$enable-transitions:           true;
-$enable-shadows:               true;
-$enable-caret:                 true;
-$enable-chevron:               true;
-
-//
-// Colors
-//
-$white:                         #FFFFFF;
-$gray-200:                      #e9eaec;
-$gray-300:                      #f8f8f8; // list group hover full color
-$gray-400:                      #b1b7be;
-$black:                         #131313;
-
-
-// ============================= NOTE ============================= //
-// This theme is copied from x1. Since 4D's interface uses native Windows
-// controls, some of the color values used on the current version are not
-// found on official branding hence the additional gray, blue, orange color maps
-
-// -- Grays -- //
-$gray-var-1:  #F6F6F6;  // Horizontal Tab bg
-$gray-var-2:  #F1F2F3;  // Body bg, Text input disabled bg , table hover
-$gray-var-3:  #E3E4E7;  // Table cell border color
-$gray-var-4:  #D6D7DA;  // Dropdown default bg
-$gray-var-5:  #DDDDDD;  // Fieldset heading underline
-$gray-var-6:  #C8C9CE;  // Status badge default bg
-$gray-var-7:  #ABADB3;  // Text input disabled border
-$gray-var-8:  #ADADAD;  // Dropdown default border
-$gray-var-9:  #BABCC2;  // Button Default border, Text input default border
-$gray-var-10: #6E7780;  // Pop-window control bg
-$gray-var-11: #131313;  // Text color, default checkbox,
-$gray-var-12: #cccccc;  // Dropdown border color
-
-// -- Blues -- //
-// @ $theme-primary: btn-primary bg, btn default/outline border hover
-$blue-var-1:  #DCEEF9;  // Btn default bg hover, Dropdown default hover bg
-$blue-var-2:  #CCE4F7;  // Checkbox active hover bg
-$blue-var-3:  #336BDA;  // Text input focus border, Checkbox hover border, Dropdown hover border
-$blue-var-4:  #142440;  // Btn-primary hover
-$blue-var-5:  #91c9f7;  // Dropdown menu item hover
-$blue-var-6:  #e5f3ff;  // Treeview hover
-$blue-var-7:  #cde8ff;  // Treeview active
-// $blue-var-6:  #D4E9FC;  // Treeview hover
-
-$text-muted:                    theme-color("info"); // text-muted
-$border-color:                  #d6d6d6;           // border-color
-$input-placeholder-color:       theme-color("info");
-//
-// Body
-//
-$body-color:                    theme-color("default");
-$body-bg:                       $white;
-
-//
-// Link
-//
-$link-color:                    theme-color("primary-lighter") !default;
-
-
-// Toggles or clickable areas
-$default-clickable-bg:          $blue-var-1 !default;
-$default-clickable-bg-hover:    theme-color("primary") !default;
-$default-clickable-border:      theme-color('primary-transparent') !default;
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1200px
-);
-
-$grid-gutter-width:           2rem;
-
-
-// Fonts
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// stylelint-disable value-keyword-case
-$font-family-base:
-  //TitleX Default Fonts
-  'Open Sans',
-  // Safari for OS X and iOS (San Francisco)
-  -apple-system,
-    // Chrome < 56 for OS X (San Francisco)
-  BlinkMacSystemFont,
-    // Windows
-  "Segoe UI",
-    // Android
-  "Roboto",
-    // Basic web fallback
-  "Helvetica Neue", Arial, sans-serif,
-    // Emoji fonts
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-//
-// Font Sizes
-//
-$font-size-base:              0.875rem;                //14px
-$font-size-lg:                1.0625rem;               //17px
-$font-size-sm:                0.8125rem;               //13px
-$font-size-xs:                0.750rem !default;       //12px
-
-$h1-font-size:                2rem;
-$h2-font-size:                1.75rem;
-$h3-font-size:                1.5rem;
-$h4-font-size:                1.25rem;
-$h5-font-size:                1rem;
-$h6-font-size:                $font-size-sm;
-
-$badge-padding-y:             .5rem;
-$badge-padding-x:             1rem;
-//
-// Sizes
-// This variable affects the `.h-*` and `.w-*` classes.
-//
-$sizes:(
-  20: 20%,
-  30: 30%,
-  40: 40%,
-  60: 60%,
-  70: 70%,
-  80: 80%,
-  85: 85%,
-  90: 90%,
-);
-
-$avatar-size-sm:             1.875rem;
-
-//
-// Font Weight
-//
-$font-weight-light:           300;
-$font-weight-normal:          400;
-$font-weight-medium:          500;
-$font-weight-bold:            600;
-$headings-font-weight:        $font-weight-normal;
-
-//
-// Z-index
-//
-// Fix Dropdown z-index when open it in Modal
-$zindex-dropdown:             1050;
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-$line-height-xs:              1 !default;
-$line-height-base:            1.5715;
-$line-height-lg:              1;
-
-$border-radius-sm:            0.25rem;
-$border-radius:               0.25rem;
-$border-radius-lg:            0.5rem;
-$border-radius-xl:            1rem !default;
-
-//
-// AG-Grid Icon Path
-//
-$icons-path:                  "~ag-grid-community/src/styles/ag-theme-material/icons/";
-
-// Buttons + Forms
-//
-$label-margin-bottom:         0.25rem        !default;
-$label-font-size:             0.8125rem      !default;
-$label-font-weight:           600            !default;
-$label-font-color:            theme-color('info') !default;
-$form-group-margin-bottom:    1rem           !default;
-
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-$input-disabled-bg:           $gray-var-2 !default;
-$input-color:                 theme-color('default') !default;
-$input-border-color:          $border-color;
-$input-focus-border-color:    theme-color('primary') !default;
-$input-readonly-border-color: $gray-var-7 !default;
-
-$input-padding-x:             0.750rem;
-$input-padding-y:             0.375rem;
-
-$input-padding-y-sm:          .25rem;
-$input-padding-x-sm:          1.25rem;
-
-$input-padding-y-lg:          0.6875rem !default;
-$input-padding-x-lg:          0.8125rem !default;
-
-$input-btn-font-size-xs:      $font-size-xs   !default;
-$input-btn-font-size-sm:      $font-size-sm   !default;
-$input-btn-font-size-lg:      $font-size-lg   !default;
-
-$input-btn-line-height-sm:    $line-height-xs;
-$input-btn-line-height-xs:    $line-height-xs !default;
-$input-height-inner-sm:       1.875rem; // From Bootstrap 4.1.3, form-control have a height
-$input-line-height-sm:        1.35;   // Fix Placeholder Bug on Safari;
-$btn-line-height-sm:          initial;  // Fix .btn-sm height when line-height: 1;
-
-
-$input-line-height:           1.5;
-$input-height:                36px !default;
-$input-height-lg:             2.25rem !default;
-
-
-$input-group-addon-bg:        $white;
-$input-group-btn-padding:     0.25rem;
-
-$input-btn-padding-y-xs:      0.5rem          !default;
-$input-btn-padding-x-xs:      1.5rem          !default;
-
-$input-btn-padding-y-sm:      0.375rem;
-$input-btn-padding-x-sm:      1.000rem;
-
-$input-btn-padding-y-lg:      1rem;
-$input-btn-padding-x-lg:      3rem;
-
-$input-btn-focus-width:       .15rem;
-$input-btn-focus-color:       mix(theme-color("primary"), $white, 22%);
-$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;
-
-$input-group-addon-bg:        $white;
-
-// disable inset form-control shadow while keep shadow for other components.
-$input-box-shadow:            inset 0 0 0 rgba($black, .000);
-$btn-box-shadow:              $input-box-shadow;
-$custom-select-box-shadow:    $input-box-shadow;
-
-// Default select
-//
-$select-bg:                   $gray-var-4 !default;
-$select-border-color:         $border-color !default;
-$select-border-focus-color:   theme-color("primary") !default;
-$select-shadow-focus-color:   #cdd3dc;
-
-// Default Range and Custom Range
-//
-$custom-range-track-bg:       $gray-var-4 !default;
-
-
-// Form Legend
-//
-$legend-font-size:            $font-size-base !default;
-$legend-lettercase:           uppercase !default;
-$legend-font-weight:          $font-weight-bold !default;
-$legend-border-gap:           0.75rem !default;
-$legend-border-color:         $gray-var-5 !default;
-
-// Custom Select Height
-//
-$custom-select-height-sm:    2rem;
-$custom-select-font-size-sm: $font-size-sm;
-
-// Custom Range
-$custom-range-track-box-shadow: none !default;
-
-//
-// Btn Overrides
-//
-$btn-font-weight:             $font-weight-normal;
-$btn-letter-spacing:          0.02em !default;
-$btn-disabled-opacity:        0.7;
-$btn-disabled-background:     theme-color("info");
-$btn-disabled-color:          white;
-$btn-focus-box-shadow:        none;
-$btn-active-box-shadow:       none;
-
-// Make Btn Padding larger then form-control
-$btn-padding-x:               1.5rem;
-$btn-padding-y:               0.375rem;
-
-// Default button and dropdown
-$btn-default-background:         $white;
-$btn-default-color:              theme-color('primary');
-$btn-default-border:             $gray-var-9;
-$btn-default-hover-background:   $default-clickable-bg;
-$btn-default-hover-border:       theme-color('primary');
-$btn-default-active-background:  $default-clickable-bg;
-$btn-default-active-border:      theme-color('primary');
-
-$btn-dropdown-background:        $gray-var-4;
-$btn-dropdown-color:             $gray-var-12;
-$btn-dropdown-border:            $gray-var-8;
-$btn-dropdown-hover-background:  $default-clickable-bg;
-$btn-dropdown-hover-border:      $blue-var-3;
-$btn-dropdown-active-background: $default-clickable-bg;
-$btn-dropdown-active-border:     $blue-var-3;
-
-$btn-dropdown-padding-x:         $input-padding-x;
-$btn-dropdown-padding-y:         $input-padding-y;
-$btn-dropdown-alignment:         left;
-
-// Light and Outline Light Button Override
-$btn-transparent-border-color:   theme-color('light-transparent');
-$btn-transparent-bg:             rgba(theme-color('light'),0.15);
-$btn-transparent-hover-bg:       rgba(theme-color('light'),0.25);
-
-
-//popover padding
-$popover-body-padding-y:      1rem;
-$popover-body-padding-x:      1rem;
-
-//
-// Tooltip
-//
-$tooltip-bg:                  theme-color('dark-secondary');
-$tooltip-font-size:           $font-size-xs;
-
-//
-// Badges
-//
-$badge-lg-font-size:          90%;
-$badge-font-size:             75%;
-$badge-padding-y:             0.375rem;
-$badge-padding-x:             1em;
-$badge-pill-padding-x:        0.5rem;
-$badge-font-weight:           $font-weight-normal;
-
-//
-// Breadcrumb
-//
-$breadcrumb-bg:               none;
-
-//
-// Modal
-//
-$modal-dialog-margin:            0rem; // Put 'rem' here to make sure `calc()` working
-$modal-dialog-margin-y-sm-up:    $modal-dialog-margin;
-
-$modal-content-box-shadow-xs:    0 1rem 2rem -0.5rem rgba(theme-color('dark'), .24);
-$modal-content-box-shadow-sm-up: $modal-content-box-shadow-xs;
-
-$modal-content-bg:               $body-bg;
-$modal-backdrop-bg:              theme-color('dark-secondary');
-$modal-backdrop-opacity:         0.6;
-
-$modal-header-border-color:      $border-color;
-
-$modal-inner-padding:            1rem 2rem;
-
-$modal-lg:                       56.25rem;
-$modal-md:                       37.50rem;
-$modal-sm:                       22.50rem;
-
-//
-// Cards
-//
-$card-border-radius:          $border-radius-lg;
-
-//
-// Close
-//
-$close-font-size:             $font-size-lg;
-
-//
-// Form Controls
-//
-
-$custom-select-chevron-color:                   $gray-var-11;
-$custom-select-chevron:                         str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='#{$custom-select-chevron-color}' fill-rule='evenodd' d='M4.24264069 3.53553391L7.77817459 0l.70710678.70710678-3.5355339 3.53553391-.70710678.70710678L0 .70710678.70710678 0 4.2426407 3.53553391z'/%3E%3C/svg%3E"), "#","%23");
-
-$input-disabled-bg:                             theme-color('light-transparent');
-$custom-control-indicator-bg:                   $white;
-$custom-control-indicator-bg-size:              cover;
-$custom-control-indicator-box-shadow:           none;
-
-$custom-control-indicator-focus-box-shadow:     none;
-
-$custom-control-indicator-checked-bg:           theme-color('secondary-lighter');
-$custom-control-indicator-active-bg:            theme-color('primary-transparent');
-$custom-control-indicator-disabled-bg:          $input-disabled-bg;
-$custom-checkbox-indicator-border-radius:       0;
-$custom-checkbox-indicator-indeterminate-color: theme-color('primary');
-$custom-checkbox-indicator-indeterminate-bg:    $custom-control-indicator-checked-bg;
-
-$custom-control-indicator-checked-disabled-bg:  $input-disabled-bg;
-
-$custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='#{$custom-checkbox-indicator-indeterminate-color}' x='3' y='7' width='10' height='2'/%3E%3C/svg%3E"), "#", "%23");
-
-$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='#{$custom-checkbox-indicator-indeterminate-color}' points='4 6 7 9 12 4 12 7 7 12 4 9'%3E%3C/polygon%3E%3C/svg%3E"), "#","%23");
-
-$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='#{$custom-checkbox-indicator-indeterminate-color}' cx='8' cy='8' r='3'%3E%3C/circle%3E%3C/svg%3E"), "#","%23");
-
-$custom-select-focus-box-shadow:                $input-btn-focus-box-shadow;
-$custom-select-disabled-bg:                     $input-disabled-bg;
-
-
-// Windows Native Option Controls
-$input-4d-options-dimension:                    1rem;
-$input-4d-options-top:                          0.1875rem;
-$input-4d-options-border-width:                 1px;
-$input-4d-options-to-text-whitespace:           $input-4d-options-dimension + .5;
-$input-4d-checkbox-border-radius:               0 !default;
-$input-4d-checkbox-default-border-color:        $border-color;
-$input-4d-checkbox-hover-boxshadow:             none;
-$input-4d-checkbox-hover-border-color:          $gray-var-10;
-$input-4d-checkbox-hover-text-color:            theme-color('primary');
-$input-4d-checkbox-checked-bg-color:            #fef7f0 !default;
-$input-4d-checkbox-checked-border-color:        $border-color;
-$input-4d-checkbox-active-bg-color:             rgba(0,96,172,.12);
-$input-4d-checkbox-active-border-color:         theme-color('primary');
-$input-4d-checkbox-active-text-color:           white;
-
-$input-4d-radio-tick-dimension:                 0.375rem;
-$input-4d-radio-default-border-color:           $border-color;
-$input-4d-radio-hover-border-color:             $gray-var-10;
-$input-4d-radio-hover-text-color:               theme-color('primary');
-$input-4d-radio-checked-bg-color:             #fef7f0 !default;
-$input-4d-radio-active-bg-color:                theme-color('primary');
-$input-4d-radio-active-border-color:            theme-color('primary');
-$input-4d-radio-active-text-color:              white;
-
-
-// Dropdown menu container and contents.
-//
-$dropdown-radius:                   $border-radius-sm;
-$dropdown-line-height:              28px;
-$dropdown-background:               #ffffff;
-$dropdown-max-width:                40rem !default;
-$dropdown-toggle-padding-x:         .25rem !default; // Custom padding for 4d
-$dropdown-padding-x:                0.125rem !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $gray-var-2 !default;
-$dropdown-divider-margin-y:         0.1875rem !default;
-$dropdown-link-active-color:        theme-color("secondary");
-$dropdown-link-active-bg:           transparent !default;
-
-$dropdown-item-padding-y:           0.775rem !default;
-$dropdown-item-padding-x:           .25rem !default;
-$dropdown-divider-padding-left:     1.875rem !default;
-$dropdown-header-color:             $gray-var-9 !default;
-
-$dropdown-check-icon-size:          10 !default;
-$custom-4d-check-icon:              str-replace(url("data:image/svg+xml,%3Csvg width='11' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7653793,1.24344828 L4.06317241,7.94565517 C4.00413793,8.00468966 3.90855172,8.00468966 3.84965517,7.94565517 L0.044137931,4.14 C-0.0147586207,4.08124138 -0.0147586207,3.98565517 0.044137931,3.92662069 L0.968827586,3.00193103 C1.02786207,2.94303448 1.12344828,2.94303448 1.18234483,3.00193103 L3.95655172,5.776 L9.62731034,0.105241379 C9.68648276,0.0463448276 9.7817931,0.0463448276 9.84082759,0.105241379 L10.7653793,1.02993103 C10.8244138,1.08882759 10.8244138,1.18427586 10.7653793,1.24344828 Z'/%3E%3C/svg%3E"), "#","%23");
-$custom-4d-check-icon-color:        $black;
-$dropdown-link-active-icon:         $custom-4d-check-icon;
-$dropdown-link-active-icon-bg:      theme-color("primary-secondary") !default;
-
-$caret-width:                       0.25rem;
-$chevron-width:                     0.375rem;
-
-//
-// Dropdown menu container and contents.
-//
-$dropdown-min-width:                10rem;
-$dropdown-padding-y:                .25rem;
-$dropdown-spacer:                   1px;
-$dropdown-border-color:             rgba($black, .1);
-$dropdown-divider-bg:               $border-color;
-$dropdown-box-shadow:               0 2px 5px rgba($black, .1);
-$dropdown-link-color:               theme-color("grey");
-$dropdown-link-hover-color:         theme-color("primary");
-$dropdown-link-hover-bg:            theme-color("primary-transparent");
-$dropdown-link-disabled-color:      theme-color("light");
-$dropdown-item-padding-x:           1.250rem;
-$caret-width:                       0.25rem;
-
-//
-// List Group
-//
-$list-group-bg:                     $gray-var-2;
-$list-group-border-color:           $gray-var-8;
-$list-group-item-padding-y:         0.625rem;
-$list-group-item-padding-x:         1rem;
-
-$list-group-active-color:           theme-color("default") !default;
-$list-group-active-border-color:    $gray-var-8;
-$list-group-hover-bg:               theme-color('primary-transparent') !default;
-$list-group-active-bg:              $default-clickable-bg;
-$list-group-disabled-color:         $text-muted;
-$list-group-action-active-bg:       $list-group-active-bg;
-$list-group-action-hover-bg:        $default-clickable-bg-hover !default;
-
-$list-group-action-color:           $black !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
-
-$list-group-action-active-color:    theme-color("default") !default;
-$list-group-action-active-bg:       $gray-200 !default;
-
-//
-// Pagination
-//
-$pagination-padding-x-sm:           .75rem;
-$pagination-padding-x-lg:           1.0rem;
-$pagination-line-height:            1.33;
-
-$pagination-disabled-color:         $text-muted;
-$pagination-border-color:           $border-color;
-$pagination-hover-border-color:     $pagination-border-color;
-$pagination-disabled-border-color:  $pagination-border-color;
-
-// Progress
-$progress-height:                   0.9375rem;
-$progress-bg:                       theme-color("primary-transparent");
-$progress-border-radius:            $border-radius-lg;
-$progress-box-shadow:               none;
-
-
-// Tables
-//
-$table-bg:                    $white !default;
-$table-cell-padding:          .625rem !default;
-$table-cell-padding-sm:       .2rem !default;
-$table-border-color:          $gray-var-3 !default;
-$table-thead-border-color:    $gray-var-5 !default;
-$table-thead-font-weight:     600 !default;
-$table-hover-color:           $body-color !default;
-$table-hover-bg:              $gray-var-2 !default;
-$th-sortable-hover-bg:        $default-clickable-bg !default;
-$th-sortable-active-bg:       $default-clickable-bg-hover !default;
-$cell-highlight-bg:           theme-color('secondary-lighter') !default;
-$cell-highlight-border-color: theme-color('secondary') !default;
-
-$table-dark-bg:               theme-color('primary');
-$table-dark-thead-bg:         theme-color('primary-darker');
-
-//Nav and Navbar
-//
-$opacity-translucent-lighten: rgba($white,0.09);
-$opacity-translucent-darken:  darken($body-bg,3%);
-$nav-tabs-bg:                 transparent;
-$nav-tabs-border-color:       $border-color;
-$nav-tabs-border-width:       0 !default;
-$nav-tabs-active-border-width:0 !default;
-$nav-tabs-link-font-size:     .8125rem !default;
-$nav-tabs-link-is-uppercase:  true;
-$nav-tabs-link-letter-spacing:0.01rem !default;
-$nav-tabs-link-font-weight:   600 !default;
-$nav-tabs-link-padding-x:     0.5rem !default;
-$nav-tabs-link-padding-y:     1rem !default;
-$nav-tabs-link-active-bg:     $body-bg !default;
-$nav-tabs-link-hover-bg:      $gray-200 !default;
-$nav-tabs-link-hover-border:  theme-color('primary') !default;
-$nav-tabs-link-active-bg:     transparent;
-$nav-tabs-link-active-color:  theme-color('secondary-darker') !default;
-$nav-tabs-link-active-border: theme-color('secondary-darker') !default;
-$nav-tabs-stacked-padding:    0.55rem 1.562rem !important;
-$nav-tabs-link-min-height:    auto;
-$nav-tabs-link-min-width:     auto;
-$nav-tabs-link-max-width:     auto;
-$navbar-nav-link-padding-x:   1rem;
-
-// Navbar dark
-$navbar-dark-color:           rgba($white, .8) !default;
-$navbar-dark-active-color:    rgba($white, .8) !default;
-$navbar-dark-hover-color:     rgba($white, 1) !default;
-$navbar-dark-active-bg:       transparent !default;
-$navbar-dark-hover-bg:        $opacity-translucent-lighten;
-
-// Navbar light
-$navbar-light-color:          $white !default;
-$navbar-light-hover-bg:       $opacity-translucent-darken;
-
-// Code
-$kbd-padding-y:                     0 !default;
-$kbd-padding-x:                     .2rem !default;
-
-// Tree View
-//
-$treeview-chevron-color:       $gray-var-8;
-$treeview-chevron-color-active:$gray-var-11;
-$treeview-chevron-color-focus: #1dd7f9;
-$treeview-container-padding:   0.125rem;
-$treeview-offset-left:         1.875rem !default;
-$treeview-toggle-padding:      0.3125rem;
-$treeview-chevron-width:       0.125rem;
-$treeview-icon-width:          0.8125rem;
-$treeview-icon-height:         1rem;
-$treeview-icon-spacer:         0.3125rem;
-$treeview-subtreeview-offset:  0.9375rem;
-$treeview-label-offset:        1.125rem;
-$treeview-node-hover-bg:       $blue-var-6;
-$treeview-node-active-bg:      $blue-var-7;
-$treeview-node-line-color:     $black;
-$treeview-folder-icon:         str-replace(url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='a'%3E%3Cstop stop-color='%23FFE897' offset='0%25'/%3E%3Cstop stop-color='%23FFE483' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='b'%3E%3Cstop stop-color='%23FFE897' offset='0%25'/%3E%3Cstop stop-color='%23FFE483' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23EDCA4A'%3E%3Cpath fill='url(%23a)' d='M.5.5h11v15H.5z'/%3E%3Cpath fill='url(%23b)' transform='matrix(1 0 0 -1 0 25)' d='M10.5 9.5h2v6h-2z'/%3E%3C/g%3E%3C/svg%3E"), "#", "%23");
-
-
-// Search Icon
-$search-icon-dimension:        0.625rem;
-$search-icon-close-hover:      theme-color("secondary");
-
-// Input Group Search
-//
-$input-search-btn-padding-x:   0;
-$input-search-btn-padding-y:   0.6875rem;
-$input-search-padding-offset:  $input-search-btn-padding-y + $search-icon-dimension + $input-btn-padding-x-lg;
-
-
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// stylelint-disable value-keyword-case
-$font-family-sans-serif:      'Open Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base:            $font-family-sans-serif !default;
-$font-family-heading:         $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
-
-// $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-// $font-size-lg:                $font-size-base * 1.25 !default;
-// $font-size-sm:                $font-size-base * .875 !default;
-
-// $font-weight-lighter:         lighter !default;
-// $font-weight-light:           300 !default;
-// $font-weight-normal:          400 !default;
-// $font-weight-bold:            700 !default;
-// $font-weight-bolder:          bolder !default;
-
-// $font-weight-base:            $font-weight-normal !default;
-// $line-height-base:            1.5 !default;
-
-// $h1-font-size:                $font-size-base * 2.5 !default;
-// $h2-font-size:                $font-size-base * 2 !default;
-// $h3-font-size:                $font-size-base * 1.75 !default;
-// $h4-font-size:                $font-size-base * 1.5 !default;
-// $h5-font-size:                $font-size-base * 1.25 !default;
-// $h6-font-size:                $font-size-base !default;
-
-// $headings-margin-bottom:      $spacer / 2 !default;
-// $headings-font-family:        null !default;
-// $headings-font-weight:        500 !default;
-// $headings-line-height:        1.2 !default;
-// $headings-color:              null !default;
-
-$display1-size:               3rem;
-$display2-size:               2.5rem;
-$display3-size:               2rem;
-$display4-size:               1.5rem;
-