_sass/theme/variables.scss in redeyed-jekyll-theme-0.1.2 vs _sass/theme/variables.scss in redeyed-jekyll-theme-0.1.3
- old
+ new
@@ -1,60 +1,751 @@
@charset "utf-8";
+//==================================================================
+// MAIN SCSS VARIABLES
+//==================================================================
-// FONTS
+// color-variables
+$blue: var(--blue);
+$indigo: var(--indigo);
+$purple: var(--purple);
+$pink: var(--pink);
+$red: var(--red);
+$orange: var(--orange);
+$yellow: var(--yellow);
+$green: var(--green);
+$teal: var(--teal);
+$cyan: var(--cyan);
+$black: var(--black);
+$white: var(--white);
+$smoke: var(--smoke);
+$gray-light: $gray-600;
+$gray-dark: $gray-800;
-$base-font-family: 'Cormorant Infant', serif !default;
-$base-font-weight: 400 !default;
-$base-font-size: 13px !default;
-$base-line-height: 1.2rem !default;
-$headings-font-family: 'Cormorant Unicase', serif !default;
-$headings-font-weight: 400 !default;
+// colors-map
+$colors: (
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "black": $black,
+ "white": $white,
+ "smoke": $smoke,
+ "gray-light": $gray-light,
+ "gray-dark": $gray-dark
+) !default;
-$code-font-family: 'Xanh Mono', monospace !default;
-$code-font-weight: 400 !default;
+// theme-color-variables
+$primary: var(--primary);
+$secondary: var(--secondary);
+$success: var(--success);
+$info: var(--info);
+$warning: var(--warning);
+$danger: var(--danger);
+$light: var(--light);
+$dark: var(--dark);
+$bright: var(--smoke);
+$subdued: var(--subdued);
-$spacing: 30px !default;
+// theme-colors map
+$theme-colors: (
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark,
+ "bright": $bright,
+ "subdued": $subdued,
+ "gray-light": $gray-light,
+ "gray-dark": $gray-dark
+) !default;
-// LINKS
-$link-decoration: 'none' !default;
-$link-hover-decoration: 'none' !default;
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: true !default;
+$enable-gradients: true !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
-// BREADCRUMBS
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
-$crumb-link-decoration: none !default;
-$crumb-hover-decoration: none !default;
+// FONT-TYPES
+$font-family-base: 'Cormorant Infant', serif !default;
+$font-family-alt: 'Alegreya', serif !default;
+$font-family-heading: 'Cormorant Unicase', serif !default;
+$font-family-heading-alt: 'Alegreya SC', serif !default;
+$font-family-code: 'Xanh Mono', monospace !default;
-// BORDERS
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: 13px !default; // browser default is typically 16px
+$font-size-base: 1rem !default;
-$border-width: 1px !default;
+$font-size-xs: $font-size-base * 0.625 !default;
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+$font-size-xl: $font-size-base * 1.5 !default;
-$border-radius: .45rem !default;
-$border-radius-sm: .1875rem !default;
-$border-radius-lg: .9375rem !default;
-$border-radius-pill: 1rem !default;
+$font-weight-base: 400;
-// CODE
+$line-height-base: 1.5rem !default;
+$line-height-sm: 1.25rem !default;
+$line-height-lg: 2rem !default;
-$code-font-height: .85rem !default;
+$spacing: 30px;
-// COPYRIGHT
-
-$copyright-height: 2.5rem !default;
-
-// FOOTER
-
-$footer-height: 5rem !default;
-
-// NAVBAR
-
-$navbar-height: 3rem !default;
-$navbar-padding-x: .5rem !default;
-$navbar-padding-y: .5rem !default;
-
-$navbar-search-max-width: 210px !default;
-
-// SIDEBAR
-$sidebar-width: 260px !default;
-$sidebar-width-sm: 210px !default;
-$sidebar-width-lg: 350px !default;
+//$border-color: var(--main-border-color) !default;
+//
+//// scss-docs-start border-radius-variables
+//$border-radius: .25rem !default;
+//$border-radius-sm: .2rem !default;
+//$border-radius-lg: .3rem !default;
+//$border-radius-pill: 50rem !default;
+//
+//// box-shadow-variables
+//$box-shadow: 0 .5rem 1rem rgba(var(--dark), .15) !default;
+//$box-shadow-sm: 0 .125rem .25rem rgba(var(--dark), .075) !default;
+//$box-shadow-lg: 0 1rem 3rem rgba(var(--dark), .175) !default;
+//$box-shadow-inset: inset 0 1px 2px rgba(var(--dark), .075) !default;
+//
+//$component-active-color: var(--component-active-color) !default;
+//$component-active-bg: var(--component-active-bg) !default;
+//
+//// scss-docs-start caret-variables
+//$caret-width: .3em !default;
+//$caret-vertical-align: $caret-width * .85 !default;
+//$caret-spacing: $caret-width * .85 !default;
+//
+//$transition-base: all .2s ease-in-out !default;
+//$transition-fade: opacity .15s linear !default;
+//// scss-docs-start collapse-transition
+//$transition-collapse: height .35s ease !default;
+//
+//// stylelint-disable function-disallowed-list
+//// scss-docs-start aspect-ratios
+//$aspect-ratios: (
+// "1x1": 100%,
+// "4x3": calc(3 / 4 * 100%),
+// "16x9": calc(9 / 16 * 100%),
+// "21x9": calc(9 / 21 * 100%)
+//) !default;
+//
+//// Typography
+////
+//// Font, line-height, and color for body text, headings, and more.
+//$font-family-base: 'Cormorant Infant', serif !default;
+//$font-family-alt: 'Alegreya', serif !default;
+//$font-family-heading1: 'Cormorant Unicase', serif !default;
+//$font-family-heading2: 'Alegreya SC', serif !default;
+//$font-family-code: 'Xanh Mono', monospace !default;
+//
+//// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+//// $font-size-base affects the font size of the body text
+//$font-size-root: 13px !default;
+//$font-size-base: 1rem !default;
+//$font-size-sm: $font-size-base * .875 !default;
+//$font-size-lg: $font-size-base * 1.25 !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;
+//$line-height-sm: 1.25 !default;
+//$line-height-lg: 2 !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;
+//
+//// scss-docs-start 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
+//) !default;
+//
+//// scss-docs-start headings-variables
+//$headings-margin-bottom: $spacer * .5 !default;
+//$headings-font-family: $font-family-heading1;
+//$headings-font-style: null !default;
+//$headings-font-weight: 700 !default;
+//$headings-line-height: 1.2 !default;
+//$headings-color: var(--heading-primary) !default;
+//$headings-alt-color: var(--heading-secondary) !default;
+//$subheading-color: var(--subheading) !default;
+//
+//// scss-docs-start display-headings
+//$display-font-sizes: (
+// 1: 5rem,
+// 2: 4.5rem,
+// 3: 4rem,
+// 4: 3.5rem,
+// 5: 3rem,
+// 6: 2.5rem
+//) !default;
+//
+//$display-font-weight: 400 !default;
+//$display-line-height: $headings-line-height !default;
+//
+//// type-variables
+//$lead-font-size: $font-size-base * 1.25 !default;
+//$lead-font-weight: 400 !default;
+//
+//$small-font-size: $font-size-base * 0.625 !default;
+//
+//$sub-sup-font-size: $font-size-base * 0.75 !default;
+//
+//$text-muted: var(--subdued);
+//
+//$initialism-font-size: $small-font-size !default;
+//
+//// blockquote
+//$blockquote-margin-y: $spacer !default;
+//$blockquote-font-size: $font-size-base * 1.25 !default;
+//$blockquote-footer-color: var(--secondary-bg) !default;
+//$blockquote-footer-font-size: $small-font-size !default;
+//
+//// hr
+//$hr-margin-y: $spacer !default;
+//$hr-color: inherit !default;
+//$hr-height: $border-width !default;
+//$hr-opacity: .25 !default;
+//
+//$legend-margin-bottom: .5rem !default;
+//$legend-font-size: 1.5rem !default;
+//$legend-font-weight: null !default;
+//
+//$mark-padding: .2em !default;
+//
+//$dt-font-weight: $font-weight-bold !default;
+//
+//$nested-kbd-font-weight: $font-weight-bold !default;
+//
+//$list-inline-padding: .5rem !default;
+//
+//$mark-bg: var(--tertiary-bg) !default;
+//
+//// Tables
+////
+//// Customizes the `.table` component with basic values, each used across all table variations.
+//$table-cell-padding-y: .5rem !default;
+//$table-cell-padding-x: .5rem !default;
+//$table-cell-padding-y-sm: .25rem !default;
+//$table-cell-padding-x-sm: .25rem !default;
+//
+//$table-cell-vertical-align: top !default;
+//
+//$table-color: $body-color !default;
+//$table-bg: transparent !default;
+//$table-accent-bg: lighten(var(--orange), 50%) !default;
+//
+//$table-th-font-weight: null !default;
+//
+//$table-striped-color: $table-color !default;
+//$table-striped-bg-factor: .05 !default;
+//$table-striped-bg: rgba(var(--table-row-bg1), $table-striped-bg-factor) !default;
+//
+//$table-active-color: $table-color !default;
+//$table-active-bg-factor: .1 !default;
+//$table-active-bg: rgba(var(--table-row-hover2), $table-active-bg-factor) !default;
+//
+//$table-hover-color: $table-color !default;
+//$table-hover-bg-factor: .075 !default;
+//$table-hover-bg: rgba(var(--table-row-hover1), $table-hover-bg-factor) !default;
+//
+//$table-border-factor: .1 !default;
+//$table-border-width: $border-width !default;
+//$table-border-color: $border-color !default;
+//
+//$table-striped-order: odd !default;
+//
+//$table-group-separator-color: currentColor !default;
+//
+//$table-caption-color: $text-muted !default;
+//
+//$table-bg-scale: -80% !default;
+//
+//// 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": $light,
+// "dark": $dark,
+//) !default;
+//
+//// Buttons + Forms
+////
+//// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+//
+//// scss-docs-start input-btn-variables
+//$input-btn-padding-y: .375rem !default;
+//$input-btn-padding-x: .75rem !default;
+//$input-btn-font-family: null !default;
+//$input-btn-font-size: $font-size-base !default;
+//$input-btn-line-height: $line-height-base !default;
+//
+//$input-btn-focus-width: .25rem !default;
+//$input-btn-focus-color-opacity: .25 !default;
+//$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+//$input-btn-focus-blur: 0 !default;
+//$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
+//
+//$input-btn-padding-y-sm: .25rem !default;
+//$input-btn-padding-x-sm: .5rem !default;
+//$input-btn-font-size-sm: $font-size-sm !default;
+//
+//$input-btn-padding-y-lg: .5rem !default;
+//$input-btn-padding-x-lg: 1rem !default;
+//$input-btn-font-size-lg: $font-size-lg !default;
+//
+//$input-btn-border-width: $border-width !default;
+//
+//// Buttons
+////
+//// For each of Bootstrap's buttons, define text, background, and border color.
+//
+//// scss-docs-start btn-variables
+//$btn-padding-y: $input-btn-padding-y !default;
+//$btn-padding-x: $input-btn-padding-x !default;
+//$btn-font-family: $input-btn-font-family !default;
+//$btn-font-size: $input-btn-font-size !default;
+//$btn-line-height: $input-btn-line-height !default;
+//$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+//
+//$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+//$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+//$btn-font-size-sm: $input-btn-font-size-sm !default;
+//
+//$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+//$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+//$btn-font-size-lg: $input-btn-font-size-lg !default;
+//
+//$btn-border-width: $input-btn-border-width !default;
+//
+//$btn-font-weight: $font-weight-normal !default;
+//$btn-box-shadow: inset 0 1px 0 rgba($light, .15), 0 1px 1px rgba($dark, .075) !default;
+//$btn-focus-width: $input-btn-focus-width !default;
+//$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+//$btn-disabled-opacity: .65 !default;
+//$btn-active-box-shadow: inset 0 3px 5px rgba($dark, .125) !default;
+//
+//$btn-link-color: $link-color !default;
+//$btn-link-hover-color: $link-hover-color !default;
+//$btn-link-disabled-color: var(--subdued) !default;
+//
+//// Allows for customizing button radius independently from global border radius
+//$btn-border-radius: $border-radius !default;
+//$btn-border-radius-sm: $border-radius-sm !default;
+//$btn-border-radius-lg: $border-radius-lg !default;
+//
+//$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+//
+//$btn-hover-bg-shade-amount: 15% !default;
+//$btn-hover-bg-tint-amount: 15% !default;
+//$btn-hover-border-shade-amount: 20% !default;
+//$btn-hover-border-tint-amount: 10% !default;
+//$btn-active-bg-shade-amount: 20% !default;
+//$btn-active-bg-tint-amount: 20% !default;
+//$btn-active-border-shade-amount: 25% !default;
+//$btn-active-border-tint-amount: 10% !default;
+//
+//// Forms
+//
+//// scss-docs-start form-text-variables
+//$form-text-margin-top: .25rem !default;
+//$form-text-font-size: $small-font-size !default;
+//$form-text-font-style: null !default;
+//$form-text-font-weight: null !default;
+//$form-text-color: $text-muted !default;
+//
+//// scss-docs-start form-label-variables
+//$form-label-margin-bottom: .5rem !default;
+//$form-label-font-size: null !default;
+//$form-label-font-style: null !default;
+//$form-label-font-weight: null !default;
+//$form-label-color: null !default;
+//
+//// scss-docs-start form-input-variables
+//$input-padding-y: $input-btn-padding-y !default;
+//$input-padding-x: $input-btn-padding-x !default;
+//$input-font-family: $input-btn-font-family !default;
+//$input-font-size: $input-btn-font-size !default;
+//$input-font-weight: $font-weight-base !default;
+//$input-line-height: $input-btn-line-height !default;
+//
+//$input-padding-y-sm: $input-btn-padding-y-sm !default;
+//$input-padding-x-sm: $input-btn-padding-x-sm !default;
+//$input-font-size-sm: $input-btn-font-size-sm !default;
+//
+//$input-padding-y-lg: $input-btn-padding-y-lg !default;
+//$input-padding-x-lg: $input-btn-padding-x-lg !default;
+//$input-font-size-lg: $input-btn-font-size-lg !default;
+//
+//$input-bg: var(--secondary-bg) !default;
+//$input-disabled-bg: var(--primary-bg) !default;
+//$input-disabled-border-color: null !default;
+//
+//$input-color: $body-color !default;
+//$input-border-color: var(--main-border-color) !default;
+//$input-border-width: $input-btn-border-width !default;
+//$input-box-shadow: $box-shadow-inset !default;
+//
+//$input-border-radius: $border-radius !default;
+//$input-border-radius-sm: $border-radius-sm !default;
+//$input-border-radius-lg: $border-radius-lg !default;
+//
+//$input-focus-bg: $input-bg !default;
+//$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+//$input-focus-color: $input-color !default;
+//$input-focus-width: $input-btn-focus-width !default;
+//$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+//
+//$input-placeholder-color: var(--subdued) !default;
+//$input-plaintext-color: $body-color !default;
+//
+//$input-height-border: $input-border-width * 2 !default;
+//
+//$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+//$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
+//$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
+//
+//$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+//$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+//$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+//
+//$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+//
+//// scss-docs-start form-check-variables
+//$form-check-input-width: 1em !default;
+//$form-check-min-height: $font-size-base * $line-height-base !default;
+//$form-check-padding-start: $form-check-input-width + .5em !default;
+//$form-check-margin-bottom: .125rem !default;
+//$form-check-label-color: null !default;
+//$form-check-label-cursor: null !default;
+//$form-check-transition: null !default;
+//
+//$form-check-input-active-filter: brightness(90%) !default;
+//
+//$form-check-input-bg: $input-bg !default;
+//$form-check-input-border: 1px solid rgba($black, .25) !default;
+//$form-check-input-border-radius: .25em !default;
+//$form-check-radio-border-radius: 50% !default;
+//$form-check-input-focus-border: $input-focus-border-color !default;
+//$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+//
+//$form-check-input-checked-color: $component-active-color !default;
+//$form-check-input-checked-bg-color: $component-active-bg !default;
+//$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+//$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+//$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+//
+//$form-check-input-indeterminate-color: $component-active-color !default;
+//$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+//$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+//$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+//
+//$form-check-input-disabled-opacity: .5 !default;
+//$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+//$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+//
+//$form-check-inline-margin-end: 1rem !default;
+//
+//// scss-docs-start form-switch-variables
+//$form-switch-color: var(--yellow) !default;
+//$form-switch-width: 2em !default;
+//$form-switch-padding-start: $form-switch-width + .5em !default;
+//$form-switch-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-color}'/></svg>") !default;
+//$form-switch-border-radius: $form-switch-width !default;
+//$form-switch-transition: background-position .15s ease-in-out !default;
+//
+//$form-switch-focus-color: $input-focus-border-color !default;
+//$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>") !default;
+//
+//$form-switch-checked-color: $component-active-color !default;
+//$form-switch-checked-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-checked-color}'/></svg>") !default;
+//$form-switch-checked-bg-position: right center !default;
+//
+//// scss-docs-start input-group-variables
+//$input-group-addon-padding-y: $input-padding-y !default;
+//$input-group-addon-padding-x: $input-padding-x !default;
+//$input-group-addon-font-weight: $input-font-weight !default;
+//$input-group-addon-color: $input-color !default;
+//$input-group-addon-bg: $input-bg !default;
+//$input-group-addon-border-color: $input-border-color !default;
+//
+//// scss-docs-start form-select-variables
+//$form-select-padding-y: $input-padding-y !default;
+//$form-select-padding-x: $input-padding-x !default;
+//$form-select-font-family: $input-font-family !default;
+//$form-select-font-size: $input-font-size !default;
+//$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+//$form-select-font-weight: $input-font-weight !default;
+//$form-select-line-height: $input-line-height !default;
+//$form-select-color: $input-color !default;
+//$form-select-bg: $input-bg !default;
+//$form-select-disabled-color: null !default;
+//$form-select-disabled-bg: var(--primary-bg) !default;
+//$form-select-disabled-border-color: $input-disabled-border-color !default;
+//$form-select-bg-position: right $form-select-padding-x center !default;
+//$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+//$form-select-indicator-color: $gray-600 !default;
+//$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+//
+//$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+//$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+//$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+//
+//$form-select-border-width: $input-border-width !default;
+//$form-select-border-color: $input-border-color !default;
+//$form-select-border-radius: $border-radius !default;
+//$form-select-box-shadow: $box-shadow-inset !default;
+//
+//$form-select-focus-border-color: $input-focus-border-color !default;
+//$form-select-focus-width: $input-focus-width !default;
+//$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+//
+//$form-select-padding-y-sm: $input-padding-y-sm !default;
+//$form-select-padding-x-sm: $input-padding-x-sm !default;
+//$form-select-font-size-sm: $input-font-size-sm !default;
+//
+//$form-select-padding-y-lg: $input-padding-y-lg !default;
+//$form-select-padding-x-lg: $input-padding-x-lg !default;
+//$form-select-font-size-lg: $input-font-size-lg !default;
+//
+//$form-select-transition: $input-transition !default;
+//
+//// scss-docs-start form-range-variables
+//$form-range-track-width: 100% !default;
+//$form-range-track-height: .5rem !default;
+//$form-range-track-cursor: pointer !default;
+//$form-range-track-bg: var(--secondary-bg) !default;
+//$form-range-track-border-radius: 1rem !default;
+//$form-range-track-box-shadow: $box-shadow-inset !default;
+//
+//$form-range-thumb-width: 1rem !default;
+//$form-range-thumb-height: $form-range-thumb-width !default;
+//$form-range-thumb-bg: $component-active-bg !default;
+//$form-range-thumb-border: 0 !default;
+//$form-range-thumb-border-radius: 1rem !default;
+//$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
+//$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+//$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+//$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+//$form-range-thumb-disabled-bg: var(--subdued) !default;
+//$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+//
+//// scss-docs-start form-file-variables
+//$form-file-button-color: $input-color !default;
+//$form-file-button-bg: $input-group-addon-bg !default;
+//$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+//
+//// scss-docs-start form-floating-variables
+//$form-floating-height: add(3.5rem, $input-height-border) !default;
+//$form-floating-line-height: 1.25 !default;
+//$form-floating-padding-x: $input-padding-x !default;
+//$form-floating-padding-y: 1rem !default;
+//$form-floating-input-padding-t: 1.625rem !default;
+//$form-floating-input-padding-b: .625rem !default;
+//$form-floating-label-opacity: .65 !default;
+//$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+//$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
+//
+//// Form validation
+//
+//// scss-docs-start form-feedback-variables
+//$form-feedback-margin-top: $form-text-margin-top !default;
+//$form-feedback-font-size: $form-text-font-size !default;
+//$form-feedback-font-style: $form-text-font-style !default;
+//$form-feedback-valid-color: $success !default;
+//$form-feedback-invalid-color: $danger !default;
+//
+//$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+//$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+//$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+//$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+//
+//// scss-docs-start form-validation-states
+//$form-validation-states: (
+// "valid": (
+// "color": $form-feedback-valid-color,
+// "icon": $form-feedback-icon-valid
+// ),
+// "invalid": (
+// "color": $form-feedback-invalid-color,
+// "icon": $form-feedback-icon-invalid
+// )
+//) !default;
+//
+//// Navs
+//
+//// scss-docs-start nav-variables
+//$nav-link-padding-y: .5rem !default;
+//$nav-link-padding-x: 1rem !default;
+//$nav-link-font-size: null !default;
+//$nav-link-font-weight: null !default;
+//$nav-link-color: $link-color !default;
+//$nav-link-hover-color: $link-hover-color !default;
+//$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+//$nav-link-disabled-color: var(--subdued) !default;
+//
+//$nav-tabs-border-color: var(--main-border-color) !default;
+//$nav-tabs-border-width: $border-width !default;
+//$nav-tabs-border-radius: $border-radius !default;
+//$nav-tabs-link-hover-border-color: $yellow $yellow $nav-tabs-border-color !default;
+//$nav-tabs-link-active-color: $orange !default;
+//$nav-tabs-link-active-bg: $body-bg !default;
+//$nav-tabs-link-active-border-color: $dark $dark $nav-tabs-link-active-bg !default;
+//
+//$nav-pills-border-radius: $border-radius !default;
+//$nav-pills-link-active-color: $component-active-color !default;
+//$nav-pills-link-active-bg: $component-active-bg !default;
+//
+//// Navbar
+//
+//// scss-docs-start navbar-variables
+//$navbar-padding-y: $spacer * .5 !default;
+//$navbar-padding-x: null !default;
+//
+//$navbar-nav-link-padding-x: .5rem !default;
+//
+//$navbar-brand-font-size: $font-size-lg !default;
+//// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+//$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+//$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+//$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
+//$navbar-brand-margin-end: 1rem !default;
+//
+//$navbar-toggler-padding-y: .25rem !default;
+//$navbar-toggler-padding-x: .75rem !default;
+//$navbar-toggler-font-size: $font-size-lg !default;
+//$navbar-toggler-border-radius: $btn-border-radius !default;
+//$navbar-toggler-focus-width: $btn-focus-width !default;
+//$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
+//
+//// scss-docs-start navbar-theme-variables
+//$navbar-dark-color: rgba($white, .55) !default;
+//$navbar-dark-hover-color: rgba($white, .75) !default;
+//$navbar-dark-active-color: $white !default;
+//$navbar-dark-disabled-color: rgba($white, .25) !default;
+//$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+//$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+//
+//$navbar-light-color: rgba($black, .55) !default;
+//$navbar-light-hover-color: rgba($black, .7) !default;
+//$navbar-light-active-color: rgba($black, .9) !default;
+//$navbar-light-disabled-color: rgba($black, .3) !default;
+//$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+//$navbar-light-toggler-border-color: rgba($black, .1) !default;
+//
+//$navbar-light-brand-color: $navbar-light-active-color !default;
+//$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+//$navbar-dark-brand-color: $navbar-dark-active-color !default;
+//$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+//
+//
+////// FONTS
+////
+////$base-font-family: 'Cormorant Infant', serif !default;
+////$base-font-weight: 400 !default;
+////$base-font-size: 13px !default;
+////$base-line-height: 1.2rem !default;
+////
+////$small-font-size: $base-font-size * 0.625 !default;
+////$large-font-size: $base-font-size * 1.375 !default;
+////
+////$base2-font-family: 'Alegreya', serif !default;
+////$base2-font-weight: 400 !default;
+////
+////$headings-font-family: 'Cormorant Unicase', serif !default;
+////$headings-font-weight: 700 !default;
+////
+////$headings2-font-family: 'Alegreya SC', serif !default;
+////$headings2-font-weight: 700 !default;
+////
+////$code-font-family: 'Xanh Mono', monospace !default;
+////$code-font-weight: 400 !default;
+////
+////$spacing: 30px !default;
+////
+////$content-width: 100%;
+////
+////// LINKS
+////
+////$link-decoration: 'none' !default;
+////$link-hover-decoration: 'none' !default;
+////
+////// BREADCRUMBS
+////
+////$crumb-link-decoration: none !default;
+////$crumb-hover-decoration: none !default;
+////
+////// BORDERS
+////
+////$border-width: 1px !default;
+////
+////$border-radius: .45rem !default;
+////$border-radius-sm: .1875rem !default;
+////$border-radius-lg: .9375rem !default;
+////$border-radius-pill: 1rem !default;
+////
+////// CODE
+////
+////$code-font-height: .85rem !default;
+////
+////// COPYRIGHT
+////
+////$copyright-height: 2.5rem !default;
+////
+////// FOOTER
+////
+////$footer-height: 5rem !default;
+////
+////// NAVBAR
+////
+////$navbar-height: 3rem !default;
+////$navbar-padding-x: .5rem !default;
+////$navbar-padding-y: .5rem !default;
+////
+////$navbar-search-max-width: 210px !default;
+////
+////// SIDEBAR
+////$sidebar-width: 260px !default;
+////$sidebar-width-sm: 210px !default;
+////$sidebar-width-lg: 350px !default;