From afeed6ec35f26d78b7a3ea6c02d562e607920d5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 2 Feb 2021 11:56:35 +0200 Subject: [PATCH 1/5] Remove local vendor styles. --- src/scss/volt/_variables.scss | 2519 ++++++++--------- .../{_reboot.scss => components/_body.scss} | 60 +- src/scss/volt/vendor/_datepicker.scss | 444 --- src/scss/volt/vendor/_headroom.scss | 52 - src/scss/volt/vendor/_nouislider.scss | 498 ---- src/scss/volt/vendor/_prism.scss | 140 - src/scss/volt/vendor/chartist/_chartist.scss | 252 -- .../chartist/settings/_chartist-settings.scss | 89 - 8 files changed, 1273 insertions(+), 2781 deletions(-) rename src/scss/volt/{_reboot.scss => components/_body.scss} (88%) mode change 100755 => 100644 delete mode 100644 src/scss/volt/vendor/_datepicker.scss delete mode 100755 src/scss/volt/vendor/_headroom.scss delete mode 100755 src/scss/volt/vendor/_nouislider.scss delete mode 100644 src/scss/volt/vendor/_prism.scss delete mode 100755 src/scss/volt/vendor/chartist/_chartist.scss delete mode 100755 src/scss/volt/vendor/chartist/settings/_chartist-settings.scss diff --git a/src/scss/volt/_variables.scss b/src/scss/volt/_variables.scss index c3ba17e..e0945d2 100644 --- a/src/scss/volt/_variables.scss +++ b/src/scss/volt/_variables.scss @@ -6,315 +6,300 @@ // Color system // Shades of grey -$white: #ffffff; -$gray-100: #F9FAFB; -$gray-200: #F3F4F6; -$gray-300: #E5E7EB; -$gray-400: #D1D5DB; -$gray-500: #9CA3AF; -$gray-600: #6B7280; -$gray-700: #4B5563; -$gray-800: #374151; -$gray-900: #29313d; -$dark : #262B40; -$black : #2e3650; +$white : #ffffff !default; +$gray-100: #F9FAFB !default; +$gray-200: #F3F4F6 !default; +$gray-300: #E5E7EB !default; +$gray-400: #D1D5DB !default; +$gray-500: #9CA3AF !default; +$gray-600: #6B7280 !default; +$gray-700: #4B5563 !default; +$gray-800: #374151 !default; +$gray-900: #29313d !default; +$dark : #262B40 !default; +$black : #2e3650 !default; // fusv-disable -$grays: ( - "100": $gray-100, - "200": $gray-200, - "300": $gray-300, - "400": $gray-400, - "500": $gray-500, - "600": $gray-600, - "700": $gray-700, - "800": $gray-800, - "900": $gray-900 -); +$grays: ("100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900) !default; // fusv-enable // Generic colors -$blue: #0948B3; -$indigo: #31316A; -$purple: #8965e0; -$pink: #C96480; -$red: #FA5252; -$orange: #FF9F89; -$brown: #b9a084; -$yellow: #f5b759; -$yellow-alt:#fde9ca; -$green: #05A677; -$teal: #1E90FF; -$cyan: #63b1bd; -$soft-indigo:#f5e8ff; -$soft-green: #2CA58D; +$blue : #0948B3 !default; +$indigo : #31316A !default; +$purple : #8965e0 !default; +$pink : #C96480 !default; +$red : #FA5252 !default; +$orange : #FF9F89 !default; +$brown : #b9a084 !default; +$yellow : #f5b759 !default; +$yellow-alt :#fde9ca !default; +$green : #05A677 !default; +$teal : #1E90FF !default; +$cyan : #63b1bd !default; +$soft-indigo:#f5e8ff !default; +$soft-green : #2CA58D !default; // scss-docs-start colors-map -$colors: ( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 -); +$colors: ("blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800) !default; // scss-docs-end colors-map // Color scheme -$primary: #262B40; -$secondary: #f3b773; -$tertiary: #2CA58D; +$primary : #262B40 !default; +$secondary: #f3b773 !default; +$tertiary : #2CA58D !default; // Series names and colors. This can be extended or customized as desired. Just add more series and colors. -$ct-series-names: (a, b, c, d, e, f, g) !default; -$ct-series-colors: ( - #262B40, - #F8BD7A, - #2CA58D, - #31316A, - #C96480, - #ffffff, - #F8BD7A, - -); +$ct-series-names: (a, b, c, d, e, f, g) !default !default; +$ct-series-colors: (#262B40, + #F8BD7A, + #2CA58D, + #31316A, + #C96480, + #ffffff, + #F8BD7A, + +) !default; // Mobile landing color scheme -$primary-app: #EBF4F6; -$secondary-app: #424AA0; - -$success: $green; -$info: $blue; -$warning: $yellow; -$danger: $red; -$gray: $gray-900; -$light: $gray-400; -$lighten: $gray-300; -$soft: $gray-200; -$dark: $dark; +$primary-app : #EBF4F6 !default; +$secondary-app: #424AA0 !default; + +$success: $green !default; +$info : $blue !default; +$warning: $yellow !default; +$danger : $red !default; +$gray : $gray-900 !default; +$light : $gray-400 !default; +$lighten: $gray-300 !default; +$soft : $gray-200 !default; +$dark : $dark !default; // Brands colors -$facebook: #3b5999; -$twitter: #1da1f2; -$google: #DB4337; -$instagram: #e4405f; -$pinterest: #bd081c; -$youtube: #cd201f; -$slack: #3aaf85; -$dribbble: #ea4c89; -$github: #222222; -$dropbox: #1E90FF; -$twitch: #4B367C; -$paypal: #ecb32c; -$behance: #0057ff; -$reddit: #E84422; +$facebook : #3b5999 !default; +$twitter : #1da1f2 !default; +$google : #DB4337 !default; +$instagram: #e4405f !default; +$pinterest: #bd081c !default; +$youtube : #cd201f !default; +$slack : #3aaf85 !default; +$dribbble : #ea4c89 !default; +$github : #222222 !default; +$dropbox : #1E90FF !default; +$twitch : #4B367C !default; +$paypal : #ecb32c !default; +$behance : #0057ff !default; +$reddit : #E84422 !default; // Brand colors -$brand-colors: (); -$brand-colors: map-merge(( - "facebook": $facebook, - "twitter": $twitter, - "google": $google, - "instagram": $instagram, - "pinterest": $pinterest, - "youtube": $youtube, - "slack": $slack, - "dribbble": $dribbble, - "dropbox": $dropbox, - "twitch": $twitch, - "paypal": $paypal, - "behance": $behance, - "reddit" : $reddit, - "github": $github -), $brand-colors); +$brand-colors: ("facebook": $facebook, + "twitter": $twitter, + "google": $google, + "instagram": $instagram, + "pinterest": $pinterest, + "youtube": $youtube, + "slack": $slack, + "dribbble": $dribbble, + "dropbox": $dropbox, + "twitch": $twitch, + "paypal": $paypal, + "behance": $behance, + "reddit" : $reddit, + "github": $github) !default; // Theme colors -$theme-colors: (); -$theme-colors: map-merge(( - "primary": $primary, - "secondary": $secondary, - "tertiary": $tertiary, - "dark": $dark, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "white": $white, - "black": $black, - "pink": $pink, - "indigo": $indigo, - "purple": $purple, - "gray-100": $gray-100, - "gray-200": $gray-200, - "gray-300": $gray-300, - "gray-400": $gray-400, - "gray-500": $gray-500, - "gray-600": $gray-600, - "gray-700": $gray-700, - "gray-800": $gray-800, - "facebook": $facebook, - "twitter": $twitter, - "github": $github -), $theme-colors); +$theme-colors: ("primary": $primary, + "secondary": $secondary, + "tertiary": $tertiary, + "dark": $dark, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "white": $white, + "black": $black, + "pink": $pink, + "indigo": $indigo, + "purple": $purple, + "gray-100": $gray-100, + "gray-200": $gray-200, + "gray-300": $gray-300, + "gray-400": $gray-400, + "gray-500": $gray-500, + "gray-600": $gray-600, + "gray-700": $gray-700, + "gray-800": $gray-800, + "facebook": $facebook, + "twitter": $twitter, + "github": $github) !default; // Navbar colors -$navbar-colors: (); -$navbar-colors: map-merge(( - "primary": $primary, -), $theme-colors); - +$navbar-colors: ("primary": $primary, +) !default; // Set a specific jump point for requesting color jumps -$theme-color-interval: 8%; +$theme-color-interval: 8% !default; // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 3; +$min-contrast-ratio: 3 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: $dark; -$color-contrast-light: $white; +$color-contrast-dark : $dark !default; +$color-contrast-light: $white !default; // fusv-disable -$blue-100: tint-color($blue, 8); -$blue-200: tint-color($blue, 6); -$blue-300: tint-color($blue, 4); -$blue-400: tint-color($blue, 2); -$blue-500: $blue; -$blue-600: shade-color($blue, 2); -$blue-700: shade-color($blue, 4); -$blue-800: shade-color($blue, 6); -$blue-900: shade-color($blue, 8); - -$indigo-100: tint-color($indigo, 8); -$indigo-200: tint-color($indigo, 6); -$indigo-300: tint-color($indigo, 4); -$indigo-400: tint-color($indigo, 2); -$indigo-500: $indigo; -$indigo-600: shade-color($indigo, 2); -$indigo-700: shade-color($indigo, 4); -$indigo-800: shade-color($indigo, 6); -$indigo-900: shade-color($indigo, 8); - -$purple-100: tint-color($purple, 8); -$purple-200: tint-color($purple, 6); -$purple-300: tint-color($purple, 4); -$purple-400: tint-color($purple, 2); -$purple-500: $purple; -$purple-600: shade-color($purple, 2); -$purple-700: shade-color($purple, 4); -$purple-800: shade-color($purple, 6); -$purple-900: shade-color($purple, 8); - -$pink-100: tint-color($pink, 8); -$pink-200: tint-color($pink, 6); -$pink-300: tint-color($pink, 4); -$pink-400: tint-color($pink, 2); -$pink-500: $pink; -$pink-600: shade-color($pink, 2); -$pink-700: shade-color($pink, 4); -$pink-800: shade-color($pink, 6); -$pink-900: shade-color($pink, 8); - -$red-100: tint-color($red, 8); -$red-200: tint-color($red, 6); -$red-300: tint-color($red, 4); -$red-400: tint-color($red, 2); -$red-500: $red; -$red-600: shade-color($red, 2); -$red-700: shade-color($red, 4); -$red-800: shade-color($red, 6); -$red-900: shade-color($red, 8); - -$orange-100: tint-color($orange, 8); -$orange-200: tint-color($orange, 6); -$orange-300: tint-color($orange, 4); -$orange-400: tint-color($orange, 2); -$orange-500: $orange; -$orange-600: shade-color($orange, 2); -$orange-700: shade-color($orange, 4); -$orange-800: shade-color($orange, 6); -$orange-900: shade-color($orange, 8); - -$yellow-100: tint-color($yellow, 8); -$yellow-200: tint-color($yellow, 6); -$yellow-300: tint-color($yellow, 4); -$yellow-400: tint-color($yellow, 2); -$yellow-500: $yellow; -$yellow-600: shade-color($yellow, 2); -$yellow-700: shade-color($yellow, 4); -$yellow-800: shade-color($yellow, 6); -$yellow-900: shade-color($yellow, 8); - -$green-100: tint-color($green, 8); -$green-200: tint-color($green, 6); -$green-300: tint-color($green, 4); -$green-400: tint-color($green, 2); -$green-500: $green; -$green-600: shade-color($green, 2); -$green-700: shade-color($green, 4); -$green-800: shade-color($green, 6); -$green-900: shade-color($green, 8); - -$teal-100: tint-color($teal, 8); -$teal-200: tint-color($teal, 6); -$teal-300: tint-color($teal, 4); -$teal-400: tint-color($teal, 2); -$teal-500: $teal; -$teal-600: shade-color($teal, 2); -$teal-700: shade-color($teal, 4); -$teal-800: shade-color($teal, 6); -$teal-900: shade-color($teal, 8); - -$cyan-100: tint-color($cyan, 8); -$cyan-200: tint-color($cyan, 6); -$cyan-300: tint-color($cyan, 4); -$cyan-400: tint-color($cyan, 2); -$cyan-500: $cyan; -$cyan-600: shade-color($cyan, 2); -$cyan-700: shade-color($cyan, 4); -$cyan-800: shade-color($cyan, 6); -$cyan-900: shade-color($cyan, 8); +$blue-100: tint-color($blue, 8) !default; +$blue-200: tint-color($blue, 6) !default; +$blue-300: tint-color($blue, 4) !default; +$blue-400: tint-color($blue, 2) !default; +$blue-500: $blue !default; +$blue-600: shade-color($blue, 2) !default; +$blue-700: shade-color($blue, 4) !default; +$blue-800: shade-color($blue, 6) !default; +$blue-900: shade-color($blue, 8) !default; + +$indigo-100: tint-color($indigo, 8) !default; +$indigo-200: tint-color($indigo, 6) !default; +$indigo-300: tint-color($indigo, 4) !default; +$indigo-400: tint-color($indigo, 2) !default; +$indigo-500: $indigo !default; +$indigo-600: shade-color($indigo, 2) !default; +$indigo-700: shade-color($indigo, 4) !default; +$indigo-800: shade-color($indigo, 6) !default; +$indigo-900: shade-color($indigo, 8) !default; + +$purple-100: tint-color($purple, 8) !default; +$purple-200: tint-color($purple, 6) !default; +$purple-300: tint-color($purple, 4) !default; +$purple-400: tint-color($purple, 2) !default; +$purple-500: $purple !default; +$purple-600: shade-color($purple, 2) !default; +$purple-700: shade-color($purple, 4) !default; +$purple-800: shade-color($purple, 6) !default; +$purple-900: shade-color($purple, 8) !default; + +$pink-100: tint-color($pink, 8) !default; +$pink-200: tint-color($pink, 6) !default; +$pink-300: tint-color($pink, 4) !default; +$pink-400: tint-color($pink, 2) !default; +$pink-500: $pink !default; +$pink-600: shade-color($pink, 2) !default; +$pink-700: shade-color($pink, 4) !default; +$pink-800: shade-color($pink, 6) !default; +$pink-900: shade-color($pink, 8) !default; + +$red-100: tint-color($red, 8) !default; +$red-200: tint-color($red, 6) !default; +$red-300: tint-color($red, 4) !default; +$red-400: tint-color($red, 2) !default; +$red-500: $red !default; +$red-600: shade-color($red, 2) !default; +$red-700: shade-color($red, 4) !default; +$red-800: shade-color($red, 6) !default; +$red-900: shade-color($red, 8) !default; + +$orange-100: tint-color($orange, 8) !default; +$orange-200: tint-color($orange, 6) !default; +$orange-300: tint-color($orange, 4) !default; +$orange-400: tint-color($orange, 2) !default; +$orange-500: $orange !default; +$orange-600: shade-color($orange, 2) !default; +$orange-700: shade-color($orange, 4) !default; +$orange-800: shade-color($orange, 6) !default; +$orange-900: shade-color($orange, 8) !default; + +$yellow-100: tint-color($yellow, 8) !default; +$yellow-200: tint-color($yellow, 6) !default; +$yellow-300: tint-color($yellow, 4) !default; +$yellow-400: tint-color($yellow, 2) !default; +$yellow-500: $yellow !default; +$yellow-600: shade-color($yellow, 2) !default; +$yellow-700: shade-color($yellow, 4) !default; +$yellow-800: shade-color($yellow, 6) !default; +$yellow-900: shade-color($yellow, 8) !default; + +$green-100: tint-color($green, 8) !default; +$green-200: tint-color($green, 6) !default; +$green-300: tint-color($green, 4) !default; +$green-400: tint-color($green, 2) !default; +$green-500: $green !default; +$green-600: shade-color($green, 2) !default; +$green-700: shade-color($green, 4) !default; +$green-800: shade-color($green, 6) !default; +$green-900: shade-color($green, 8) !default; + +$teal-100: tint-color($teal, 8) !default; +$teal-200: tint-color($teal, 6) !default; +$teal-300: tint-color($teal, 4) !default; +$teal-400: tint-color($teal, 2) !default; +$teal-500: $teal !default; +$teal-600: shade-color($teal, 2) !default; +$teal-700: shade-color($teal, 4) !default; +$teal-800: shade-color($teal, 6) !default; +$teal-900: shade-color($teal, 8) !default; + +$cyan-100: tint-color($cyan, 8) !default; +$cyan-200: tint-color($cyan, 6) !default; +$cyan-300: tint-color($cyan, 4) !default; +$cyan-400: tint-color($cyan, 2) !default; +$cyan-500: $cyan !default; +$cyan-600: shade-color($cyan, 2) !default; +$cyan-700: shade-color($cyan, 4) !default; +$cyan-800: shade-color($cyan, 6) !default; +$cyan-900: shade-color($cyan, 8) !default; // fusv-enable // Characters which are escaped by the escape-svg function -$escaped-characters: ( - ("<","%3c"), - (">","%3e"), - ("#","%23"), - ("(","%28"), - (")","%29"), -); +$escaped-characters: (("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), +) !default; // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true; -$enable-rounded: true; -$enable-shadows: true; -$enable-gradients: false; -$enable-transitions: true; -$enable-reduced-motion: true; -$enable-grid-classes: true; -$enable-button-pointers: true; -$enable-rfs: true; -$enable-validation-icons: true; -$enable-negative-margins: true; -$enable-deprecation-messages: true; -$enable-important-utilities: true; +$enable-caret : true !default; +$enable-rounded : true !default; +$enable-shadows : true !default; +$enable-gradients : false !default; +$enable-transitions : true !default; +$enable-reduced-motion : true !default; +$enable-grid-classes : true !default; +$enable-button-pointers : true !default; +$enable-rfs : true !default; +$enable-validation-icons : true !default; +$enable-negative-margins : true !default; +$enable-deprecation-messages: true !default; +$enable-important-utilities : true !default; // Gradient // // The gradient which is added to components if `$enable-gradients` is `true` // This gradient is also added to elements with `.bg-gradient` -$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); +$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; // Spacing // @@ -322,57 +307,55 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -$spacer: 1rem; -$spacers: ( - 0: 0, -1: $spacer / 4, - 2: $spacer / 2, - 3: $spacer, - 4: $spacer * 1.5, - 5: $spacer * 3, - 6: ($spacer * 5), - 7: ($spacer * 8), - 8: ($spacer * 10), - 9: ($spacer * 11), - 10: ($spacer * 14), - 11: ($spacer * 16), - 12: ($spacer * 20), - 'sm': ($spacer * 1), - 'md': ($spacer * 2), - 'lg': ($spacer * 4), - 'xl': ($spacer * 8) -); - -$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null); +$spacer: 1rem !default; +$spacers: (0: 0, + 1: $spacer / 4, + 2: $spacer / 2, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, + 6: ($spacer * 5), + 7: ($spacer * 8), + 8: ($spacer * 10), + 9: ($spacer * 11), + 10: ($spacer * 14), + 11: ($spacer * 16), + 12: ($spacer * 20), + 'sm': ($spacer * 1), + 'md': ($spacer * 2), + 'lg': ($spacer * 4), + 'xl': ($spacer * 8)) !default; + +$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; // Body // // Settings for the `` element. -$body-bg: $gray-100; -$body-color: $gray-900; -$body-text-align: null; +$body-bg : $gray-100 !default; +$body-color : $gray-900 !default; +$body-text-align: null !default; // Links // // Style anchor elements. -$link-color: $primary; -$link-decoration: none; -$link-hover-color: darken($link-color, 50%); -$link-hover-decoration: none; +$link-color : $primary !default; +$link-decoration : none !default; +$link-hover-color : darken($link-color, 50%) !default; +$link-hover-decoration : none !default; // Darken percentage for links with `.text-*` class (e.g. `.text-success`) -$emphasized-link-hover-darken-percentage: 10%; +$emphasized-link-hover-darken-percentage: 10% !default; -$stretched-link-pseudo-element: after; -$stretched-link-z-index: 1; +$stretched-link-pseudo-element: after !default; +$stretched-link-z-index : 1 !default; // Paragraphs // // Style p element. -$paragraph-margin-bottom: 1rem; +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints @@ -381,117 +364,96 @@ $paragraph-margin-bottom: 1rem; // adapting to different screen sizes, for use in media queries. // scss-docs-start grid-breakpoints -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px -); +$grid-breakpoints: (xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px) !default; // scss-docs-end grid-breakpoints -@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); - - // Grid containers // // Define the maximum width of `.container` for different screen sizes. // scss-docs-start container-max-widths -$container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px -); +$container-max-widths: (sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px) !default; // scss-docs-end container-max-widths -@include _assert-ascending($container-max-widths, "$container-max-widths"); - - // Grid columns // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12; -$grid-gutter-width: 1.5rem; -$grid-row-columns: 6; +$grid-columns : 12 !default; +$grid-gutter-width: 1.5rem !default; +$grid-row-columns : 6 !default; -$gutters: $spacers; +$gutters: $spacers !default; // Container padding -$container-padding-x: 2rem; +$container-padding-x: 2rem !default; // Components // // Define common padding and border radius sizes and more. -$border-width: .0625rem; -$border-width-md: 0.125rem; -$border-width-lg: 0.25rem; -$border-width-xl: 0.375rem; -$border-color-white: $white; -$border-color: $gray-300; +$border-width : .0625rem !default; +$border-width-md : 0.125rem !default; +$border-width-lg : 0.25rem !default; +$border-width-xl : 0.375rem !default; +$border-color-white: $white !default; +$border-color : $gray-300 !default; -$border-radius: 1rem; -$border-radius-sm: .6rem; -$border-radius-lg: 2.25rem; -$border-radius-xl: 3rem; -$border-radius-pill: 50rem; -$circle-radius: 50%; +$border-radius : 1rem !default; +$border-radius-sm : .6rem !default; +$border-radius-lg : 2.25rem !default; +$border-radius-xl : 3rem !default; +$border-radius-pill: 50rem !default; +$circle-radius : 50% !default; -$component-active-color: $white; -$component-active-bg: $primary; -$component-active-border-color: $primary; +$component-active-color : $white !default; +$component-active-bg : $primary !default; +$component-active-border-color: $primary !default; -$component-hover-color: $gray-300; -$component-hover-bg: $gray-300; -$component-hover-border-color: $gray-300; +$component-hover-color : $gray-300 !default; +$component-hover-bg : $gray-300 !default; +$component-hover-border-color: $gray-300 !default; -$rounded-pill: 50rem; +$rounded-pill: 50rem !default; -$box-shadow: 0 .5rem 1rem rgba($black, .15); -$box-shadow-sm: 0 2px 5px rgba(140,152,164,.2); -$box-shadow-lg: 0 1rem 3rem rgba($black, .175); -$box-shadow-inset: inset 0 1px 2px rgba($black, .075); +$box-shadow : 0 .5rem 1rem rgba($black, .15) !default; +$box-shadow-sm : 0 2px 5px rgba(140, 152, 164, .2) !default; +$box-shadow-lg : 0 1rem 3rem rgba($black, .175) !default; +$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; -$component-active-color: $white; -$component-active-bg: $primary; +$component-active-color: $white !default; +$component-active-bg : $primary !default; -$caret-width: .3em; -$caret-vertical-align: $caret-width * .85; -$caret-spacing: $caret-width * .85; +$caret-width : .3em !default; +$caret-vertical-align: $caret-width * .85 !default; +$caret-spacing : $caret-width * .85 !default; -$transition-base: all .2s ease; -$transition-transform: transform .2s ease; -$transition-fade: opacity .15s linear; -$transition-collapse: height .35s ease; -$transition-tabs: all 0.2s; +$transition-base : all .2s ease !default; +$transition-transform: transform .2s ease !default; +$transition-fade : opacity .15s linear !default; +$transition-collapse : height .35s ease !default; +$transition-tabs : all 0.2s !default; // scss-docs-start embed-responsive-aspect-ratios -$embed-responsive-aspect-ratios: ( - "21by9": ( - x: 21, - y: 9 - ), - "16by9": ( - x: 16, - y: 9 - ), - "4by3": ( - x: 4, - y: 3 - ), - "1by1": ( - x: 1, - y: 1 - ) -); +$embed-responsive-aspect-ratios: ("21by9": (x: 21, + y: 9), + "16by9": (x: 16, + y: 9), + "4by3": (x: 4, + y: 3), + "1by1": (x: 1, + y: 1)) !default; // scss-docs-end embed-responsive-aspect-ratios // Typography @@ -499,110 +461,109 @@ $embed-responsive-aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // font awesome -$fontawesome-webfonts-path: '../vendor/font-awesome/webfonts'; -$font-awesome-5: 'Font Awesome 5 Free'; +$fontawesome-webfonts-path: '../vendor/font-awesome/webfonts' !default; +$font-awesome-5 : 'Font Awesome 5 Free' !default; // stylelint-disable value-keyword-case -$font-family-sans-serif: 'Nunito Sans', sans-serif; +$font-family-sans-serif: 'Nunito Sans', +sans-serif !default; // stylelint-enable value-keyword-case -$font-family-base: var(--bs-font-sans-serif); -$font-family-code: var(--bs-font-monospace); +$font-family-base: var(--bs-font-sans-serif) !default; +$font-family-code: var(--bs-font-monospace) !default; // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins // $font-size-base effects the font size of the body text -$font-size-root: null; -$font-size-base: 1rem; // Assumes the browser default, typically `16px` -$font-size-xs: ($font-size-base * .75); -$font-size-sm: ($font-size-base * .875); -$font-size-md: ($font-size-base * 1); -$font-size-lg: ($font-size-base * 1.25); -$font-size-xl: ($font-size-base * 1.5); -$font-size-xxl: ($font-size-base * 2); - -$font-weight-lighter: lighter; -$font-weight-light: 300; -$font-weight-normal: 400; -$font-weight-bold: 600; -$font-weight-bolder: bolder; - -$font-weight-base: $font-weight-normal; - -$line-height-base: 1.5; -$line-height-sm: 1.25; -$line-height-lg: 2; - -$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; - -$headings-margin-bottom: $spacer / 2; -$headings-font-family: null; -$headings-font-style: null; -$headings-font-weight: $font-weight-bold; -$headings-line-height: 1.3; -$headings-color: $dark; +$font-size-root: null !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-xs : ($font-size-base * .75) !default; +$font-size-sm : ($font-size-base * .875) !default; +$font-size-md : ($font-size-base * 1) !default; +$font-size-lg : ($font-size-base * 1.25) !default; +$font-size-xl : ($font-size-base * 1.5) !default; +$font-size-xxl : ($font-size-base * 2) !default; + +$font-weight-lighter: lighter !default; +$font-weight-light : 300 !default; +$font-weight-normal : 400 !default; +$font-weight-bold : 600 !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; + +$headings-margin-bottom: $spacer / 2 !default; +$headings-font-family : null !default; +$headings-font-style : null !default; +$headings-font-weight : $font-weight-bold !default; +$headings-line-height : 1.3 !default; +$headings-color : $dark !default; // Display headings -$display1-size: 5rem; -$display2-size: 3.5rem; -$display3-size: 2.5rem; -$display4-size: 1.875rem; +$display1-size: 5rem !default; +$display2-size: 3.5rem !default; +$display3-size: 2.5rem !default; +$display4-size: 1.875rem !default; // scss-docs-start display-headings -$display-font-sizes: ( - 1: 5rem, - 2: 3.5rem, - 3: 2.5rem, - 4: 1.875rem, - 5: 1.2rem, - 6: 1rem -); - -$display-font-weight: $font-weight-bold; -$display-line-height: $headings-line-height; +$display-font-sizes: (1: 5rem, + 2: 3.5rem, + 3: 2.5rem, + 4: 1.875rem, + 5: 1.2rem, + 6: 1rem) !default; + +$display-font-weight: $font-weight-bold !default; +$display-line-height: $headings-line-height !default; // scss-docs-end display-headings -$paragraph-font-size: 1rem; -$paragraph-font-weight: 300; -$paragraph-line-height: 1.6; +$paragraph-font-size : 1rem !default; +$paragraph-font-weight: 300 !default; +$paragraph-line-height: 1.6 !default; -$lead-font-size: $font-size-base * 1.25; -$lead-font-weight: 300; +$lead-font-size : $font-size-base * 1.25 !default; +$lead-font-weight: 300 !default; -$small-font-size: .875em; +$small-font-size: .875em !default; -$sub-sup-font-size: .75em; +$sub-sup-font-size: .75em !default; -$text-muted: #58677d; +$text-muted: #58677d !default; -$initialism-font-size: $small-font-size; +$initialism-font-size: $small-font-size !default; -$blockquote-margin-y: $spacer; -$blockquote-font-size: $font-size-base * 1.25; -$blockquote-footer-color: $gray-600; -$blockquote-footer-font-size: $small-font-size; +$blockquote-margin-y : $spacer !default; +$blockquote-font-size : $font-size-base * 1.25 !default; +$blockquote-footer-color : $gray-600 !default; +$blockquote-footer-font-size: $small-font-size !default; -$hr-margin-y: $spacer; -$hr-color: inherit; -$hr-height: $border-width; -$hr-opacity: .25; +$hr-margin-y: $spacer !default; +$hr-color : inherit !default; +$hr-height : $border-width !default; +$hr-opacity : .25 !default; -$legend-margin-bottom: .5rem; -$legend-font-size: 1.5rem; -$legend-font-weight: null; +$legend-margin-bottom: .5rem !default; +$legend-font-size : 1.5rem !default; +$legend-font-weight : null !default; -$mark-padding: .2em; +$mark-padding: .2em !default; -$dt-font-weight: $font-weight-bold; +$dt-font-weight: $font-weight-bold !default; -$nested-kbd-font-weight: $font-weight-bold; +$nested-kbd-font-weight: $font-weight-bold !default; -$list-inline-padding: .5rem; +$list-inline-padding: .5rem !default; -$mark-bg: #fcf8e3; +$mark-bg: #fcf8e3 !default; // Tables @@ -610,448 +571,452 @@ $mark-bg: #fcf8e3; // Customizes the `.table` component with basic values, each used across all table variations. // scss-docs-start table-variables -$table-cell-padding-y: .75rem; -$table-cell-padding-x: .5rem; -$table-cell-padding-y-sm: .25rem; -$table-cell-padding-x-sm: .25rem; +$table-cell-padding-y : .75rem !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; +$table-cell-vertical-align: top !default; -$table-color: $body-color; -$table-bg: transparent; +$table-color: $body-color !default; +$table-bg : transparent !default; -$table-striped-color: $table-color; -$table-striped-bg-factor: .05; -$table-striped-bg: rgba($black, $table-striped-bg-factor); +$table-striped-color : $table-color !default; +$table-striped-bg-factor: .05 !default; +$table-striped-bg : rgba($black, $table-striped-bg-factor) !default; -$table-active-color: $table-color; -$table-active-bg-factor: .1; -$table-active-bg: rgba($black, $table-active-bg-factor); +$table-active-color : $table-color !default; +$table-active-bg-factor: .1 !default; +$table-active-bg : rgba($black, $table-active-bg-factor) !default; -$table-hover-color: $table-color; -$table-hover-bg-factor: .075; -$table-hover-bg: rgba($black, $table-hover-bg-factor); +$table-hover-color : $table-color !default; +$table-hover-bg-factor: .075 !default; +$table-hover-bg : rgba($black, $table-hover-bg-factor) !default; -$table-border-factor: .1; -$table-border-width: $border-width; -$table-border-color: $border-color; +$table-border-factor: .1 !default; +$table-border-width : $border-width !default; +$table-border-color : $border-color !default; -$table-striped-order: odd; +$table-striped-order: odd !default; -$table-group-seperator-color: $light; +$table-group-seperator-color: $light !default; -$table-caption-color: $text-muted; +$table-caption-color: $text-muted !default; -$table-bg-scale: -80%; +$table-bg-scale: -80% !default; -$table-head-spacer-y: .75rem; -$table-head-spacer-x: 1rem; -$table-head-font-size: .75rem; -$table-head-text-transform: uppercase; -$table-body-font-size: $font-size-sm; +$table-head-spacer-y : .75rem !default; +$table-head-spacer-x : 1rem !default; +$table-head-font-size : .75rem !default; +$table-head-text-transform: uppercase !default; +$table-body-font-size : $font-size-sm !default; -$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, -); +$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; // Accordion -$accordion-padding-y: 1rem; -$accordion-padding-x: 1.25rem; -$accordion-color: $body-color; -$accordion-bg: transparent; -$accordion-border-width: $border-width; -$accordion-border-color: $gray-400; -$accordion-border-radius: $border-radius; - -$accordion-body-padding-y: $accordion-padding-y; -$accordion-body-padding-x: $accordion-padding-x; - -$accordion-button-padding-y: $accordion-padding-y; -$accordion-button-padding-x: $accordion-padding-x; -$accordion-button-color: $accordion-color; -$accordion-button-bg: $accordion-bg; -$accordion-button-active-bg: $light; -$accordion-button-active-color: shade-color($primary, 10%); - - -$accordion-icon-width: 1.25rem !default; -$accordion-icon-color: $accordion-color !default; -$accordion-icon-active-color: $accordion-button-active-color !default; -$accordion-icon-transition: transform .2s ease-in-out !default; -$accordion-icon-transform: rotate(180deg) !default; - -$accordion-button-icon: url("data:image/svg+xml,") !default; -$accordion-button-active-icon: url("data:image/svg+xml,") !default; +$accordion-padding-y : 1rem !default; +$accordion-padding-x : 1.25rem !default; +$accordion-color : $body-color !default; +$accordion-bg : transparent !default; +$accordion-border-width : $border-width !default; +$accordion-border-color : $gray-400 !default; +$accordion-border-radius: $border-radius !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y : $accordion-padding-y !default; +$accordion-button-padding-x : $accordion-padding-x !default; +$accordion-button-color : $accordion-color !default; +$accordion-button-bg : $accordion-bg !default; +$accordion-button-active-bg : $light !default; +$accordion-button-active-color: shade-color($primary, 10%) !default; + + +$accordion-icon-width : 1.25rem !default !default; +$accordion-icon-color : $accordion-color !default !default; +$accordion-icon-active-color: $accordion-button-active-color !default !default; +$accordion-icon-transition : transform .2s ease-in-out !default !default; +$accordion-icon-transform : rotate(180deg) !default !default; + +$accordion-button-icon : url("data:image/svg+xml,") !default !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: .55rem; -$input-btn-padding-x: .75rem; -$input-btn-font-family: null; -$input-btn-font-size: $font-size-base; -$input-btn-line-height: $line-height-base; +$input-btn-padding-y : .55rem !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: .2rem; -$input-btn-focus-color-opacity: .2; -$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity); -$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color; +$input-btn-focus-width : .2rem !default; +$input-btn-focus-color-opacity: .2 !default; +$input-btn-focus-color : rgba($component-active-bg, $input-btn-focus-color-opacity) !default; +$input-btn-focus-box-shadow : 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; -$input-btn-padding-y-sm: .25rem; -$input-btn-padding-x-sm: .5rem; -$input-btn-font-size-sm: $font-size-sm; +$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; -$input-btn-padding-x-lg: 1rem; -$input-btn-font-size-lg: $font-size-lg; +$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; +$input-btn-border-width: $border-width !default; -$shadow-input: $box-shadow; -$shadow-input-focus: .1rem .1rem 0 rgba($gray-200,.5); +$shadow-input : $box-shadow !default; +$shadow-input-focus: .1rem .1rem 0 rgba($gray-200, .5) !default; // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. -$btn-padding-y: $input-btn-padding-y; -$btn-padding-x: $input-btn-padding-x; -$btn-font-family: $input-btn-font-family; -$btn-font-size: $input-btn-font-size; -$btn-line-height: $input-btn-line-height; -$btn-white-space: null; // Set to `nowrap` to prevent text wrapping +$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; -$btn-padding-x-sm: $input-btn-padding-x-sm; -$btn-font-size-sm: $input-btn-font-size-sm; +$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; -$btn-padding-x-lg: $input-btn-padding-x-lg; -$btn-font-size-lg: $input-btn-font-size-lg; +$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; +$btn-border-width: $input-btn-border-width !default; -$btn-font-weight: $font-weight-bold; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075); -$btn-focus-width: $input-btn-focus-width; -$btn-focus-box-shadow: $input-btn-focus-box-shadow; -$btn-disabled-opacity: .65; -$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); +$btn-font-weight: $font-weight-bold !default; +$btn-box-shadow : inset 0 1px 0 rgba($white, .15), +0 1px 1px rgba($black, .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($black, .125) !default; -$btn-link-color: $link-color; -$btn-link-hover-color: $link-hover-color; -$btn-link-disabled-color: $gray-600; +$btn-link-color : $link-color !default; +$btn-link-hover-color : $link-hover-color !default; +$btn-link-disabled-color: $gray-600 !default; -$btn-block-spacing-y: .5rem; +$btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius; -$btn-border-radius-sm: $border-radius; -$btn-border-radius-lg: $border-radius; +$btn-border-radius : $border-radius !default; +$btn-border-radius-sm: $border-radius !default; +$btn-border-radius-lg: $border-radius !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; +$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; // Forms -$form-text-margin-top: .25rem; -$form-text-font-size: $small-font-size; -$form-text-font-style: null; -$form-text-font-weight: null; -$form-text-color: $text-muted; - -$form-label-margin-bottom: .5rem; -$form-label-font-size: null; -$form-label-font-style: null; -$form-label-font-weight: null; -$form-label-color: null; - -$input-padding-y: $input-btn-padding-y; -$input-padding-x: $input-btn-padding-x; -$inpu-lg-padding-y: 1rem; -$input-font-family: $input-btn-font-family; -$input-font-size: $input-btn-font-size; -$input-font-weight: $font-weight-base; -$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-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-bg: $gray-100; -$input-disabled-bg: $gray-200; -$input-disabled-border-color: null; - -$input-color: $gray-700; -$input-border-color: $gray-400; -$input-border-width: $input-btn-border-width; -$input-box-shadow: $box-shadow-inset; - -$input-border-radius: $border-radius; -$input-border-radius-sm: $border-radius; -$input-border-radius-lg: $border-radius; - -$input-focus-bg: $input-bg; -$input-focus-border-color: lighten($component-active-bg, 25%); -$input-focus-color: $input-color; -$input-focus-width: $input-btn-focus-width; -$input-focus-box-shadow: $input-btn-focus-box-shadow; - -$input-placeholder-color: $gray-600; -$input-plaintext-color: $body-color; - -$input-height-border: $input-border-width * 2; - -$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2); -$input-height-inner-half: add($input-line-height * .5em, $input-padding-y); -$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2); - -$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)); -$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)); -$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)); -$input-height-xl: calc(#{$input-line-height * 1.5em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}); - -$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; +$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; + +$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; + +$input-padding-y : $input-btn-padding-y !default; +$input-padding-x : $input-btn-padding-x !default; +$inpu-lg-padding-y: 1rem !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 : $gray-100 !default; +$input-disabled-bg : $gray-200 !default; +$input-disabled-border-color: null !default; + +$input-color : $gray-700 !default; +$input-border-color: $gray-400 !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 !default; +$input-border-radius-lg: $border-radius !default; + +$input-focus-bg : $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !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: $gray-600 !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 / 2) !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-height-xl: calc(#{$input-line-height * 1.5em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; + +$input-transition: border-color .15s ease-in-out, +box-shadow .15s ease-in-out !default; // Custom forms -$custom-control-gutter: 1.75rem; -$custom-control-spacer-x: 1rem; -$custom-control-line-height: 1; -$custom-control-indicator-size: 1.25rem; +$custom-control-gutter : 1.75rem !default; +$custom-control-spacer-x : 1rem !default; +$custom-control-line-height : 1 !default; +$custom-control-indicator-size: 1.25rem !default; -$custom-control-bg: $gray-400; -$custom-control-indicator-bg: $white; -$custom-control-border-width: $border-width; -$custom-control-border-color: $input-border-color; -$custom-control-box-shadow: none; +$custom-control-bg : $gray-400 !default; +$custom-control-indicator-bg: $white !default; +$custom-control-border-width: $border-width !default; +$custom-control-border-color: $input-border-color !default; +$custom-control-box-shadow : none !default; -$custom-control-indicator-hover-color: $component-hover-color; -$custom-control-indicator-hover-bg: $primary; -$custom-control-indicator-hover-border-color: $component-hover-border-color; +$custom-control-indicator-hover-color : $component-hover-color !default; +$custom-control-indicator-hover-bg : $primary !default; +$custom-control-indicator-hover-border-color: $component-hover-border-color !default; -$custom-control-indicator-active-color: $component-active-color; -$custom-control-indicator-active-border-color: $component-active-border-color; +$custom-control-indicator-active-color : $component-active-color !default; +$custom-control-indicator-active-border-color: $component-active-border-color !default; -$custom-control-indicator-checked-color: $component-active-color; -$custom-control-indicator-checked-bg: $primary; -$custom-control-indicator-checked-border-color: $primary; -$custom-control-indicator-checked-disabled-bg: rgba($primary, .7); -$custom-control-indicator-border-width: 1px; +$custom-control-indicator-checked-color : $component-active-color !default; +$custom-control-indicator-checked-bg : $primary !default; +$custom-control-indicator-checked-border-color: $primary !default; +$custom-control-indicator-checked-disabled-bg : rgba($primary, .7) !default; +$custom-control-indicator-border-width : 1px !default; -$custom-control-indicator-disabled-bg: $gray-200; -$custom-control-label-disabled-color: $gray-800; +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color : $gray-800 !default; -$custom-checkbox-bg: $gray-400; -$custom-checkbox-checked-bg: $primary; -$custom-checkbox-disabled-checked-bg: rgba($primary, .7); -$custom-checkbox-indicator-border-radius: $border-radius-xl; -$custom-checkbox-indicator-border-width: $border-width-md; -$custom-checkbox-indicator-icon-checked: $font-awesome-5; -$square-checkbox-indicator-border-radius: 3px; +$custom-checkbox-bg : $gray-400 !default; +$custom-checkbox-checked-bg : $primary !default; +$custom-checkbox-disabled-checked-bg : rgba($primary, .7) !default; +$custom-checkbox-indicator-border-radius: $border-radius-xl !default; +$custom-checkbox-indicator-border-width : $border-width-md !default; +$custom-checkbox-indicator-icon-checked : $font-awesome-5 !default; +$square-checkbox-indicator-border-radius: 3px !default; -$custom-toggle-slider-bg: $gray-400; -$custom-toggle-slider-indicator-bg: $white; -$custom-toggle-checked-bg: $primary; -$custom-toggle-disabled-bg: $gray-200; -$custom-toggle-disabled-checked-bg: rgba($primary, .7); -$custom-toggle-border-radius: .8rem; +$custom-toggle-slider-bg : $gray-400 !default; +$custom-toggle-slider-indicator-bg: $white !default; +$custom-toggle-checked-bg : $primary !default; +$custom-toggle-disabled-bg : $gray-200 !default; +$custom-toggle-disabled-checked-bg: rgba($primary, .7) !default; +$custom-toggle-border-radius : .8rem !default; -$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}); +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; -$custom-checkbox-disabled-checked-color: $gray-800; +$custom-checkbox-disabled-checked-color: $gray-800 !default; -$form-check-input-width: 1.125em; -$form-check-min-height: $font-size-base * $line-height-base; -$form-check-padding-left: $form-check-input-width + .5em; -$form-check-margin-bottom: .125rem; -$form-check-label-color: null; -$form-check-label-cursor: null; -$form-check-transition: background-color .2s ease-in-out, background-position .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out; +$form-check-input-width : 1.125em !default; +$form-check-min-height : $font-size-base * $line-height-base !default; +$form-check-padding-left : $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 : background-color .2s ease-in-out, +background-position .2s ease-in-out, +border-color .2s ease-in-out, +box-shadow .2s ease-in-out !default; -$form-check-input-active-filter: brightness(90%); +$form-check-input-active-filter: brightness(90%) !default; -$form-check-input-bg: $body-bg; -$form-check-input-border: 1px solid $input-border-color; -$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-bg : $body-bg !default; +$form-check-input-border : 1px solid $input-border-color !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; -$form-check-input-checked-bg-color: $component-active-bg; -$form-check-input-checked-border-color: $form-check-input-checked-bg-color; -$form-check-input-checked-bg-image: url("data:image/svg+xml,"); -$form-check-radio-checked-bg-image: url("data:image/svg+xml,"); +$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,") !default; +$form-check-radio-checked-bg-image : url("data:image/svg+xml,") !default; -$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-check-input-indeterminate-bg-image: url("data:image/svg+xml,"); +$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,") !default; -$form-switch-color: $gray-600; -$form-switch-width: 2.25em; -$form-switch-padding-left: $form-switch-width + .5em; -$form-switch-bg-image: url("data:image/svg+xml,"); -$form-switch-border-radius: $form-switch-width; +$form-switch-color : $gray-600 !default; +$form-switch-width : 2.25em !default; +$form-switch-padding-left : $form-switch-width+.5em !default; +$form-switch-bg-image : url("data:image/svg+xml,") !default; +$form-switch-border-radius: $form-switch-width !default; -$form-switch-focus-color: $input-focus-border-color; -$form-switch-focus-bg-image: url("data:image/svg+xml,"); +$form-switch-focus-color : $input-focus-border-color !default; +$form-switch-focus-bg-image: url("data:image/svg+xml,") !default; -$form-switch-checked-color: $component-active-color; -$form-switch-checked-bg-image: url("data:image/svg+xml,"); -$form-switch-checked-bg-position: right center; +$form-switch-checked-color : $component-active-color !default; +$form-switch-checked-bg-image : url("data:image/svg+xml,") !default; +$form-switch-checked-bg-position: right center !default; -$form-check-inline-margin-right: 1rem; +$form-check-inline-margin-right: 1rem !default; -$input-group-addon-color: $input-color; -$input-group-addon-border-color: $input-border-color; +$input-group-addon-color : $input-color !default; +$input-group-addon-border-color: $input-border-color !default; // Input groups -$input-group-addon-color: $input-placeholder-color; -$input-group-addon-bg: $gray-200; -$input-group-addon-border-color: $input-border-color; - -$input-group-addon-focus-color: $input-focus-color; -$input-group-addon-focus-bg: $input-focus-bg; -$input-group-addon-focus-border-color: $input-border-color; - -$form-select-padding-y: $input-padding-y; -$form-select-padding-x: $input-padding-x; -$form-select-font-family: $input-font-family; -$form-select-font-size: $input-font-size; -$form-select-height: $input-height; -$form-select-indicator-padding: 1rem; // Extra padding to account for the presence of the background-image based indicator -$form-select-font-weight: $input-font-weight; -$form-select-line-height: $input-line-height; -$form-select-color: $input-color; -$form-select-disabled-color: $gray-600; -$form-select-bg: $input-bg; -$form-select-disabled-bg: $gray-200; -$form-select-disabled-border-color: $input-disabled-border-color; -$form-select-bg-position: right $form-select-padding-x center; -$form-select-bg-size: 16px 12px; // In pixels because image dimensions -$form-select-indicator-color: $gray-800; -$form-select-indicator: url("data:image/svg+xml,"); - -$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding); -$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding); -$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half; - -$form-select-border-width: $input-border-width; -$form-select-border-color: $input-border-color; -$form-select-border-radius: $border-radius; -$form-select-box-shadow: $box-shadow-inset; - -$form-select-focus-border-color: $input-focus-border-color; -$form-select-focus-width: $input-focus-width; -$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color; - -$form-select-padding-y-sm: $input-padding-y-sm; -$form-select-padding-x-sm: $input-padding-x-sm; -$form-select-font-size-sm: $input-font-size-sm; -$form-select-height-sm: $input-height-sm; - -$form-select-padding-y-lg: $input-padding-y-lg; -$form-select-padding-x-lg: $input-padding-x-lg; -$form-select-font-size-lg: $input-font-size-lg; -$form-select-height-lg: $input-height-lg; - -$form-range-track-width: 100%; -$form-range-track-height: .5rem; -$form-range-track-cursor: pointer; -$form-range-track-bg: $gray-300; -$form-range-track-border-radius: 1rem; -$form-range-track-box-shadow: $box-shadow-inset; - -$form-range-thumb-width: 1rem; -$form-range-thumb-height: $form-range-thumb-width; -$form-range-thumb-bg: $component-active-bg; -$form-range-thumb-border: 0; -$form-range-thumb-border-radius: 1rem; -$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-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge -$form-range-thumb-active-bg: lighten($component-active-bg, 35%); -$form-range-thumb-disabled-bg: $gray-500; -$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; - -$form-file-height: $input-height; -$form-file-focus-border-color: $input-focus-border-color; -$form-file-focus-box-shadow: $input-focus-box-shadow; -$form-file-disabled-bg: $input-disabled-bg; -$form-file-disabled-border-color: $input-disabled-border-color; - -$form-file-padding-y: $input-padding-y; -$form-file-padding-x: $input-padding-x; -$form-file-line-height: $input-line-height; -$form-file-font-family: $input-font-family; -$form-file-font-weight: $input-font-weight; -$form-file-color: $input-color; -$form-file-bg: $input-bg; -$form-file-border-width: $input-border-width; -$form-file-border-color: $input-border-color; -$form-file-border-radius: $input-border-radius; -$form-file-box-shadow: $input-box-shadow; -$form-file-button-color: $form-file-color; -$form-file-button-bg: $input-group-addon-bg; - -$form-file-padding-y-sm: $input-padding-y-sm; -$form-file-padding-x-sm: $input-padding-x-sm; -$form-file-font-size-sm: $input-font-size-sm; -$form-file-height-sm: $input-height-sm; - -$form-file-padding-y-lg: $input-padding-y-lg; -$form-file-padding-x-lg: $input-padding-x-lg; -$form-file-font-size-lg: $input-font-size-lg; -$form-file-height-lg: $input-height-lg; - -$input-muted-bg: $gray-100; -$input-placeholder-color: $gray-800; -$input-focus-placeholder-color: $gray-800; +$input-group-addon-color : $input-placeholder-color !default; +$input-group-addon-bg : $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; + +$input-group-addon-focus-color : $input-focus-color !default; +$input-group-addon-focus-bg : $input-focus-bg !default; +$input-group-addon-focus-border-color: $input-border-color !default; + +$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-height : $input-height !default; +$form-select-indicator-padding : 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$form-select-font-weight : $input-font-weight !default; +$form-select-line-height : $input-line-height !default; +$form-select-color : $input-color !default; +$form-select-disabled-color : $gray-600 !default; +$form-select-bg : $input-bg !default; +$form-select-disabled-bg : $gray-200 !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-800 !default; +$form-select-indicator : url("data:image/svg+xml,") !default; + +$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default; +$form-select-feedback-icon-position : center right ($form-select-padding-x + $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-height-sm : $input-height-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-height-lg : $input-height-lg !default; + +$form-range-track-width : 100% !default; +$form-range-track-height : .5rem !default; +$form-range-track-cursor : pointer !default; +$form-range-track-bg : $gray-300 !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 : lighten($component-active-bg, 35%) !default; +$form-range-thumb-disabled-bg : $gray-500 !default; +$form-range-thumb-transition : background-color .15s ease-in-out, +border-color .15s ease-in-out, +box-shadow .15s ease-in-out !default; + +$form-file-height : $input-height !default; +$form-file-focus-border-color : $input-focus-border-color !default; +$form-file-focus-box-shadow : $input-focus-box-shadow !default; +$form-file-disabled-bg : $input-disabled-bg !default; +$form-file-disabled-border-color: $input-disabled-border-color !default; + +$form-file-padding-y : $input-padding-y !default; +$form-file-padding-x : $input-padding-x !default; +$form-file-line-height : $input-line-height !default; +$form-file-font-family : $input-font-family !default; +$form-file-font-weight : $input-font-weight !default; +$form-file-color : $input-color !default; +$form-file-bg : $input-bg !default; +$form-file-border-width : $input-border-width !default; +$form-file-border-color : $input-border-color !default; +$form-file-border-radius: $input-border-radius !default; +$form-file-box-shadow : $input-box-shadow !default; +$form-file-button-color : $form-file-color !default; +$form-file-button-bg : $input-group-addon-bg !default; + +$form-file-padding-y-sm: $input-padding-y-sm !default; +$form-file-padding-x-sm: $input-padding-x-sm !default; +$form-file-font-size-sm: $input-font-size-sm !default; +$form-file-height-sm : $input-height-sm !default; + +$form-file-padding-y-lg: $input-padding-y-lg !default; +$form-file-padding-x-lg: $input-padding-x-lg !default; +$form-file-font-size-lg: $input-font-size-lg !default; +$form-file-height-lg : $input-height-lg !default; + +$input-muted-bg : $gray-100 !default; +$input-placeholder-color : $gray-800 !default; +$input-focus-placeholder-color: $gray-800 !default; // Form validation -$form-feedback-margin-top: $form-text-margin-top; -$form-feedback-font-size: $form-text-font-size; -$form-feedback-font-style: $form-text-font-style; -$form-feedback-valid-color: $success; -$form-feedback-invalid-color: $danger; +$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; -$form-feedback-icon-valid: url("data:image/svg+xml,"); -$form-feedback-icon-invalid-color: $form-feedback-invalid-color; -$form-feedback-icon-invalid: url("data:image/svg+xml,"); +$form-feedback-icon-valid-color : $form-feedback-valid-color !default; +$form-feedback-icon-valid : url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid : url("data:image/svg+xml,") !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 - ) -); +$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; // scss-docs-end form-validation-states // Z-index master list @@ -1060,624 +1025,626 @@ $form-validation-states: ( // of components dependent on the z-axis and are designed to all work together. // scss-docs-start zindex-stack -$zindex-dropdown: 1000; -$zindex-sticky: 1020; -$zindex-fixed: 1030; -$zindex-modal-backdrop: 1040; -$zindex-modal: 1050; -$zindex-popover: 1060; -$zindex-tooltip: 1070; +$zindex-dropdown : 1000 !default; +$zindex-sticky : 1020 !default; +$zindex-fixed : 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal : 1050 !default; +$zindex-popover : 1060 !default; +$zindex-tooltip : 1070 !default; // scss-docs-end zindex-stack // No UI Slider -$noui-target-bg: $gray-400; -$noui-target-thickness: 5px; -$noui-target-border-radius: 5px; -$noui-target-border-color: 0; -$noui-target-box-shadow: inset $box-shadow-sm; -$noui-box-shadow: $box-shadow-sm; -$noui-slider-connect-bg: $primary; -$noui-slider-connect-disabled-bg: $gray-200; -$noui-handle-active-shadow: 0 0 0 0.2rem rgba(69, 77, 103, 0.5); -$noui-handle-width: 15px; -$noui-handle-bg: $primary; -$noui-handle-border: 0; -$noui-handle-border-radius: $border-radius; -$noui-origin-border-radius: $circle-radius; +$noui-target-bg : $gray-400 !default; +$noui-target-thickness : 5px !default; +$noui-target-border-radius : 5px !default; +$noui-target-border-color : 0 !default; +$noui-target-box-shadow : inset $box-shadow-sm !default; +$noui-box-shadow : $box-shadow-sm !default; +$noui-slider-connect-bg : $primary !default; +$noui-slider-connect-disabled-bg: $gray-200 !default; +$noui-handle-active-shadow : 0 0 0 0.2rem rgba(69, 77, 103, 0.5) !default; +$noui-handle-width : 15px !default; +$noui-handle-bg : $primary !default; +$noui-handle-border : 0 !default; +$noui-handle-border-radius : $border-radius !default; +$noui-origin-border-radius : $circle-radius !default; // Navs -$nav-link-padding-y: .5rem; -$nav-link-padding-x: 1rem; -$nav-link-color: $gray-800; -$nav-link-hover-color: $secondary; -$nav-link-active-color: $gray-800; -$nav-link-shadow: none; -$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; -$nav-link-disabled-color: $gray-600; - -$nav-tabs-border-color: $light; -$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: $light; -$nav-tabs-link-active-border-color: $light; - -$nav-pills-padding-y: .75rem; -$nav-pills-padding-x: .85rem; - -$nav-pills-space-x: 1rem; -$nav-pills-border-circle: 50%; - -$nav-pills-bg: $white; -$nav-pills-border-width: 1px; -$nav-pills-border-color: $light; -$nav-pills-border-radius: $border-radius; - -$nav-pills-link-hover-color: $primary; -$nav-pills-link-active-color: $primary; -$nav-pills-active-border-color: $gray-300; -$nav-pills-link-active-bg: #f8f8f8; +$nav-link-padding-y : .5rem !default; +$nav-link-padding-x : 1rem !default; +$nav-link-color : $gray-800 !default; +$nav-link-hover-color : $secondary !default; +$nav-link-active-color: $gray-800 !default; +$nav-link-shadow : none !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: $gray-600 !default; + +$nav-tabs-border-color : $light !default; +$nav-tabs-border-width : $border-width !default; +$nav-tabs-border-radius : $border-radius !default; +$nav-tabs-link-hover-border-color : $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color : $gray-700 !default; +$nav-tabs-link-active-bg : $light !default; +$nav-tabs-link-active-border-color: $light !default; + +$nav-pills-padding-y: .75rem !default; +$nav-pills-padding-x: .85rem !default; + +$nav-pills-space-x : 1rem !default; +$nav-pills-border-circle: 50% !default; + +$nav-pills-bg : $white !default; +$nav-pills-border-width : 1px !default; +$nav-pills-border-color : $light !default; +$nav-pills-border-radius: $border-radius !default; + +$nav-pills-link-hover-color : $primary !default; +$nav-pills-link-active-color : $primary !default; +$nav-pills-active-border-color: $gray-300 !default; +$nav-pills-link-active-bg : #f8f8f8 !default; // Owl navs -$owl-nav-color: $gray-600; -$owl-nav-color-hover: $gray-900; -$owl-nav-font-size: $font-size-xxl; -$owl-nav-rounded: 3px; -$owl-nav-margin: 5px; -$owl-nav-padding: 4px 7px; -$owl-nav-background: $gray-400; -$owl-nav-background-hover: $gray-800; -$owl-nav-disabled-opacity: 0.5; +$owl-nav-color : $gray-600 !default; +$owl-nav-color-hover : $gray-900 !default; +$owl-nav-font-size : $font-size-xxl !default; +$owl-nav-rounded : 3px !default; +$owl-nav-margin : 5px !default; +$owl-nav-padding : 4px 7px !default; +$owl-nav-background : $gray-400 !default; +$owl-nav-background-hover: $gray-800 !default; +$owl-nav-disabled-opacity: 0.5 !default; // Owl dots -$owl-dot-width: 10px; -$owl-dot-height: 10px; -$owl-dot-rounded: $circle-radius; -$owl-dot-margin: 5px 5px; -$owl-dot-border-width: 2px; -$owl-dot-background: $gray-400; -$owl-dot-background-active: $gray-800; +$owl-dot-width : 10px !default; +$owl-dot-height : 10px !default; +$owl-dot-rounded : $circle-radius !default; +$owl-dot-margin : 5px 5px !default; +$owl-dot-border-width : 2px !default; +$owl-dot-background : $gray-400 !default; +$owl-dot-background-active: $gray-800 !default; // Navbar -$navbar-padding-y: 1rem; -$navbar-padding-x: null; +$navbar-padding-y: 1rem !default; +$navbar-padding-x: null !default; -$navbar-nav-link-padding-x: .8rem; +$navbar-nav-link-padding-x: .8rem !default; -$navbar-brand-font-size: $font-size-lg; +$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 * 4; -$navbar-brand-height: $navbar-brand-font-size * $line-height-base; -$navbar-brand-padding-y: 0; -$navbar-brand-margin-right: 1rem; - -$navbar-toggler-padding-y: .4rem; -$navbar-toggler-padding-x: .6rem; -$navbar-toggler-font-size: $font-size-lg; -$navbar-toggler-border-radius: $btn-border-radius; -$navbar-toggler-focus-width: $btn-focus-width; -$navbar-toggler-transition: box-shadow .15s ease-in-out; - -$navbar-dark-color: rgba($white, 0.9); -$navbar-dark-hover-color: rgba($white, 1); -$navbar-dark-active-color: $white; -$navbar-dark-disabled-color: rgba($white, .9); -$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,"); -$navbar-dark-toggler-border-color: rgba($white, .1); - -$navbar-light-color: rgba($black, .9); -$navbar-light-hover-color: rgba($black, 1); -$navbar-light-active-color: rgba($black, 1); -$navbar-light-disabled-color: rgba($black, .9); -$navbar-light-toggler-icon-bg: url("data:image/svg+xml,"); -$navbar-light-toggler-border-color: rgba($black, .1); - -$navbar-light-brand-color: $navbar-light-active-color; -$navbar-light-brand-hover-color: $navbar-light-active-color; -$navbar-dark-brand-color: $navbar-dark-active-color; -$navbar-dark-brand-hover-color: $navbar-dark-active-color; +$nav-link-height : $font-size-base * $line-height-base+$nav-link-padding-y * 4 !default; +$navbar-brand-height : $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y : 0 !default; +$navbar-brand-margin-right: 1rem !default; + +$navbar-toggler-padding-y : .4rem !default; +$navbar-toggler-padding-x : .6rem !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; + +$navbar-dark-color : rgba($white, 0.9) !default; +$navbar-dark-hover-color : rgba($white, 1) !default; +$navbar-dark-active-color : $white !default; +$navbar-dark-disabled-color : rgba($white, .9) !default; +$navbar-dark-toggler-icon-bg : url("data:image/svg+xml,") !default; +$navbar-dark-toggler-border-color: rgba($white, .1) !default; + +$navbar-light-color : rgba($black, .9) !default; +$navbar-light-hover-color : rgba($black, 1) !default; +$navbar-light-active-color : rgba($black, 1) !default; +$navbar-light-disabled-color : rgba($black, .9) !default; +$navbar-light-toggler-icon-bg : url("data:image/svg+xml,") !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; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 10rem; -$dropdown-padding-y: .5rem; -$dropdown-spacer: .125rem; -$dropdown-font-size: 1rem; -$dropdown-item-font-weight: $font-weight-light; -$dropdown-item-hover-color: $gray-900; +$dropdown-min-width : 10rem !default; +$dropdown-padding-y : .5rem !default; +$dropdown-spacer : .125rem !default; +$dropdown-font-size : 1rem !default; +$dropdown-item-font-weight: $font-weight-light !default; +$dropdown-item-hover-color: $gray-900 !default; -$dropdown-color: $body-color; -$dropdown-bg: $white; -$dropdown-border-color: $light; -$dropdown-border-radius: $border-radius; -$dropdown-border-width: $border-width; -$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width); -$dropdown-divider-bg: $gray-200; -$dropdown-divider-margin-y: $spacer / 2; -$dropdown-box-shadow: $box-shadow; +$dropdown-color : $body-color !default; +$dropdown-bg : $white !default; +$dropdown-border-color : $light !default; +$dropdown-border-radius : $border-radius !default; +$dropdown-border-width : $border-width !default; +$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; +$dropdown-divider-bg : $gray-200 !default; +$dropdown-divider-margin-y : $spacer / 2 !default; +$dropdown-box-shadow : $box-shadow !default; -$dropdown-link-color: $gray-900; -$dropdown-link-hover-color: darken($gray-900, 5%); -$dropdown-link-hover-bg: $gray-200; +$dropdown-link-color : $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg : $gray-200 !default; -$dropdown-link-active-color: $gray-900; -$dropdown-link-active-bg: $gray-400; +$dropdown-link-active-color: $gray-900 !default; +$dropdown-link-active-bg : $gray-400 !default; -$dropdown-link-disabled-color: $gray-600; +$dropdown-link-disabled-color: $gray-600 !default; -$dropdown-item-padding-y: $spacer / 4; -$dropdown-item-padding-x: $spacer; +$dropdown-item-padding-y: $spacer / 4 !default; +$dropdown-item-padding-x: $spacer !default; -$dropdown-header-color: $gray-900; -$dropdown-header-font-weight: $font-weight-bold; -$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x; +$dropdown-header-color : $gray-900 !default; +$dropdown-header-font-weight: $font-weight-bold !default; +$dropdown-header-padding : $dropdown-padding-y $dropdown-item-padding-x !default; // Pagination -$pagination-padding-y: .375rem; -$pagination-padding-x: .75rem; -$pagination-padding-y-sm: .25rem; -$pagination-padding-x-sm: .5rem; -$pagination-padding-y-lg: .75rem; -$pagination-padding-x-lg: 1.5rem; +$pagination-padding-y : .375rem !default; +$pagination-padding-x : .75rem !default; +$pagination-padding-y-sm: .25rem !default; +$pagination-padding-x-sm: .5rem !default; +$pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; -$pagination-color: $link-color; -$pagination-bg: $white; -$pagination-border-width: $border-width; -$pagination-border-radius: $border-radius; -$pagination-margin-left: -$pagination-border-width; -$pagination-border-color: $light; +$pagination-color : $link-color !default; +$pagination-bg : $white !default; +$pagination-border-width : $border-width !default; +$pagination-border-radius: $border-radius !default; +$pagination-margin-left : -$pagination-border-width !default; +$pagination-border-color : $light !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow; -$pagination-focus-outline: 0; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline : 0 !default; -$pagination-hover-color: $link-hover-color; -$pagination-hover-bg: $gray-200; -$pagination-hover-border-color: $gray-300; +$pagination-hover-color : $link-hover-color !default; +$pagination-hover-bg : $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-active-color: $component-active-color; -$pagination-active-bg: $component-active-bg; -$pagination-active-border-color: $pagination-active-bg; +$pagination-active-color : $component-active-color !default; +$pagination-active-bg : $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; -$pagination-disabled-color: $gray-600; -$pagination-disabled-bg: $white; -$pagination-disabled-border-color: $gray-300; +$pagination-disabled-color : $gray-600 !default; +$pagination-disabled-bg : $white !default; +$pagination-disabled-border-color: $gray-300 !default; // Cards -$card-spacer-y: 1.25rem; -$card-spacer-x: 1.5rem; -$card-social-padding: .25rem .375rem; -$card-title-spacer-y: .875rem; -$card-border-width: $border-width; -$card-border-radius: $border-radius; -$card-border-color: rgba($black, .125); -$card-inner-border-radius: subtract($card-border-radius, $card-border-width); -$card-cap-padding-y: 1.25rem; -$card-cap-padding-x: $card-spacer-x; -$card-cap-bg: rgba($black, .03); -$card-cap-color: null; -$card-height: null; -$card-color: null; -$card-bg: $white; - -$card-img-overlay-padding: $spacer; - -$card-group-margin: $grid-gutter-width / 2; -$transition-bezier-card: cubic-bezier(0.34, 1.45, 0.7, 1); +$card-spacer-y : 1.25rem !default; +$card-spacer-x : 1.5rem !default; +$card-social-padding : .25rem .375rem !default; +$card-title-spacer-y : .875rem !default; +$card-border-width : $border-width !default; +$card-border-radius : $border-radius !default; +$card-border-color : rgba($black, .125) !default; +$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; +$card-cap-padding-y : 1.25rem !default; +$card-cap-padding-x : $card-spacer-x !default; +$card-cap-bg : rgba($black, .03) !default; +$card-cap-color : null !default; +$card-height : null !default; +$card-color : null !default; +$card-bg : $white !default; + +$card-img-overlay-padding: $spacer !default; + +$card-group-margin : $grid-gutter-width / 2 !default; +$transition-bezier-card: cubic-bezier(0.34, 1.45, 0.7, 1) !default; //Timelines -$timeline-font-size: $font-size-xxl; -$timeline-font-color: $body-color; -$timeline-border-color: $light; -$timeline-border-color-dark: $gray-500; -$timeline-background-color: $white; -$timeline-line-height: 3; -$timeline-border-width: $border-width; -$timeline-circle-radius: 50%; -$timeline-spacer-y: 1.25rem; -$timeline-spacer-x: 2.75rem; +$timeline-font-size : $font-size-xxl !default; +$timeline-font-color : $body-color !default; +$timeline-border-color : $light !default; +$timeline-border-color-dark: $gray-500 !default; +$timeline-background-color : $white !default; +$timeline-line-height : 3 !default; +$timeline-border-width : $border-width !default; +$timeline-circle-radius : 50% !default; +$timeline-spacer-y : 1.25rem !default; +$timeline-spacer-x : 2.75rem !default; // Icon -$icon-box-padding: 1rem; -$icon-shape: 4.5rem; -$icon-shape-xs: 2rem; -$icon-shape-sm: 3rem; -$icon-shape-lg: 5.5rem; -$icon-shape-img: 5.5rem; -$icon-shape-bordered: 5rem; -$icon-size: 2rem; -$icon-size-xs: .875rem; -$icon-size-sm: 1.25rem; -$icon-size-md: 1.875rem; -$icon-size-lg: 2.75rem; -$icon-size-xl: 4.5rem; +$icon-box-padding : 1rem !default; +$icon-shape : 4.5rem !default; +$icon-shape-xs : 2rem !default; +$icon-shape-sm : 3rem !default; +$icon-shape-lg : 5.5rem !default; +$icon-shape-img : 5.5rem !default; +$icon-shape-bordered: 5rem !default; +$icon-size : 2rem !default; +$icon-size-xs : .875rem !default; +$icon-size-sm : 1.25rem !default; +$icon-size-md : 1.875rem !default; +$icon-size-lg : 2.75rem !default; +$icon-size-xl : 4.5rem !default; // Steps -$step-number-size: 12rem; -$step-shape-size: 7rem; -$step-border-width: $border-width-md; -$step-icon-size: $icon-size-xl; +$step-number-size : 12rem !default; +$step-shape-size : 7rem !default; +$step-border-width: $border-width-md !default; +$step-icon-size : $icon-size-xl !default; // Tooltips -$tooltip-font-size: $font-size-sm; -$tooltip-max-width: 200px; -$tooltip-color: $white; -$tooltip-bg: $dark; -$tooltip-border-radius: $border-radius; -$tooltip-opacity: .99; -$tooltip-padding-y: .75rem; -$tooltip-padding-x: .55rem; -$tooltip-margin: 2rem; +$tooltip-font-size : $font-size-sm !default; +$tooltip-max-width : 200px !default; +$tooltip-color : $white !default; +$tooltip-bg : $dark !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity : .99 !default; +$tooltip-padding-y : .75rem !default; +$tooltip-padding-x : .55rem !default; +$tooltip-margin : 2rem !default; -$tooltip-arrow-width: .8rem; -$tooltip-arrow-height: .4rem; -$tooltip-arrow-color: $tooltip-bg; +$tooltip-arrow-width : .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color : $tooltip-bg !default; // Form tooltips must come after regular tooltips -$form-feedback-tooltip-padding-y: $tooltip-padding-y; -$form-feedback-tooltip-padding-x: $tooltip-padding-x; -$form-feedback-tooltip-font-size: $tooltip-font-size; -$form-feedback-tooltip-line-height: null; -$form-feedback-tooltip-opacity: $tooltip-opacity; -$form-feedback-tooltip-border-radius: $tooltip-border-radius; +$form-feedback-tooltip-padding-y : $tooltip-padding-y !default; +$form-feedback-tooltip-padding-x : $tooltip-padding-x !default; +$form-feedback-tooltip-font-size : $tooltip-font-size !default; +$form-feedback-tooltip-line-height : null !default; +$form-feedback-tooltip-opacity : $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; // Popovers -$popover-font-size: $font-size-sm; -$popover-bg: $white; -$popover-max-width: 276px; -$popover-border-width: $border-width; -$popover-border-color: rgba($black, .2); -$popover-border-radius: $border-radius-lg; -$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width); -$popover-box-shadow: $box-shadow; +$popover-font-size : $font-size-sm !default; +$popover-bg : $white !default; +$popover-max-width : 276px !default; +$popover-border-width : $border-width !default; +$popover-border-color : rgba($black, .2) !default; +$popover-border-radius : $border-radius-lg !default; +$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; +$popover-box-shadow : $box-shadow !default; -$popover-header-bg: darken($popover-bg, 3%); -$popover-header-color: $headings-color; -$popover-header-padding-y: .5rem; -$popover-header-padding-x: $spacer; +$popover-header-bg : darken($popover-bg, 3%) !default; +$popover-header-color : $headings-color !default; +$popover-header-padding-y: .5rem !default; +$popover-header-padding-x: $spacer !default; -$popover-body-color: $body-color; -$popover-body-padding-y: $spacer; -$popover-body-padding-x: $spacer; +$popover-body-color : $body-color !default; +$popover-body-padding-y: $spacer !default; +$popover-body-padding-x: $spacer !default; -$popover-arrow-width: 1rem; -$popover-arrow-height: .5rem; -$popover-arrow-color: $popover-bg; +$popover-arrow-width : 1rem !default; +$popover-arrow-height: .5rem !default; +$popover-arrow-color : $popover-bg !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05); +$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; // Toasts -$toast-max-width: 350px; -$toast-padding-x: .75rem; -$toast-padding-y: .25rem; -$toast-font-size: .875rem; -$toast-color: null; -$toast-background-color: rgba($white, .85); -$toast-border-width: 1px; -$toast-border-color: rgba(0, 0, 0, .1); -$toast-border-radius: $border-radius; -$toast-box-shadow: $box-shadow; +$toast-max-width : 350px !default; +$toast-padding-x : .75rem !default; +$toast-padding-y : .25rem !default; +$toast-font-size : .875rem !default; +$toast-color : null !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width : 1px !default; +$toast-border-color : rgba(0, 0, 0, .1) !default; +$toast-border-radius : $border-radius !default; +$toast-box-shadow : $box-shadow !default; -$toast-header-color: $gray-600; -$toast-header-background-color: rgba($white, .85); -$toast-header-border-color: rgba(0, 0, 0, .05); +$toast-header-color : $gray-600 !default; +$toast-header-background-color: rgba($white, .85) !default; +$toast-header-border-color : rgba(0, 0, 0, .05) !default; // Badges -$badge-font-size: .75em; -$badge-font-weight: $font-weight-bolder; -$badge-padding-y: .1rem; -$badge-padding-x: .4rem; -$badge-color: $white; -$badge-border-radius: $border-radius; +$badge-font-size : .75em !default; +$badge-font-weight : $font-weight-bolder !default; +$badge-padding-y : .1rem !default; +$badge-padding-x : .4rem !default; +$badge-color : $white !default; +$badge-border-radius: $border-radius !default; -$badge-pill-padding-x: .875em; -$badge-pill-border-radius: 10rem; +$badge-pill-padding-x : .875em !default; +$badge-pill-border-radius: 10rem !default; -$badge-circle-size: 2rem; +$badge-circle-size: 2rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: $spacer; +$modal-inner-padding: $spacer !default; // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding -$modal-footer-margin-between: .5rem; - -$modal-dialog-margin: .5rem; -$modal-dialog-margin-y-sm-up: 1.75rem; - -$modal-title-line-height: $line-height-base; - -$modal-content-color: null; -$modal-content-bg: $white; -$modal-content-border-color: rgba($black, .2); -$modal-content-border-width: $border-width; -$modal-content-border-radius: $border-radius; -$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width); -$modal-content-box-shadow-xs: $box-shadow-sm; -$modal-content-box-shadow-sm-up: $box-shadow; - -$modal-backdrop-bg: $black; -$modal-backdrop-opacity: .5; -$modal-header-border-color: $border-color; -$modal-footer-border-color: $modal-header-border-color; -$modal-header-border-width: $modal-content-border-width; -$modal-footer-border-width: $modal-header-border-width; -$modal-header-padding-y: $modal-inner-padding; -$modal-header-padding-x: $modal-inner-padding; -$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility - -$modal-sm: 300px; -$modal-md: 500px; -$modal-lg: 800px; -$modal-xl: 1140px; - -$modal-fade-transform: translate(0, -50px); -$modal-show-transform: none; -$modal-transition: transform .3s ease-out; -$modal-scale-transform: scale(1.02); +$modal-footer-margin-between: .5rem !default; + +$modal-dialog-margin : .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; + +$modal-title-line-height: $line-height-base !default; + +$modal-content-color : null !default; +$modal-content-bg : $white !default; +$modal-content-border-color : rgba($black, .2) !default; +$modal-content-border-width : $border-width !default; +$modal-content-border-radius : $border-radius !default; +$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; +$modal-content-box-shadow-xs : $box-shadow-sm !default; +$modal-content-box-shadow-sm-up : $box-shadow !default; + +$modal-backdrop-bg : $black !default; +$modal-backdrop-opacity : .5 !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding-y : $modal-inner-padding !default; +$modal-header-padding-x : $modal-inner-padding !default; +$modal-header-padding : $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility + +$modal-sm: 300px !default; +$modal-md: 500px !default; +$modal-lg: 800px !default; +$modal-xl: 1140px !default; + +$modal-fade-transform : translate(0, -50px) !default; +$modal-show-transform : none !default; +$modal-transition : transform .3s ease-out !default; +$modal-scale-transform: scale(1.02) !default; // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: $spacer; -$alert-padding-x: $spacer; -$alert-margin-bottom: 1rem; -$alert-border-radius: $border-radius; -$alert-link-font-weight: $font-weight-bold; -$alert-border-width: $border-width; -$alert-icon-font-size: 2rem; -$alert-link-color: $white; +$alert-padding-y : $spacer !default; +$alert-padding-x : $spacer !default; +$alert-margin-bottom : 1rem !default; +$alert-border-radius : $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width : $border-width !default; +$alert-icon-font-size : 2rem !default; +$alert-link-color : $white !default; -$alert-bg-level: -10 !default; -$alert-border-level: -9 !default; -$alert-color-level: 10 !default; +$alert-bg-level : -10 !default !default; +$alert-border-level: -9 !default !default; +$alert-color-level : 10 !default !default; // Progress bars -$progress-height: 1rem; -$progress-font-size: $font-size-base * .75; -$progress-bg: $gray-200; -$progress-border-radius: $border-radius; -$progress-box-shadow: $box-shadow-inset; -$progress-bar-color: $white; -$progress-bar-bg: $dark; -$progress-bar-animation-timing: 1s linear infinite; -$progress-bar-transition: width .6s ease; +$progress-height : 1rem !default; +$progress-font-size : $font-size-base * .75 !default; +$progress-bg : $gray-200 !default; +$progress-border-radius : $border-radius !default; +$progress-box-shadow : $box-shadow-inset !default; +$progress-bar-color : $white !default; +$progress-bar-bg : $dark !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition : width .6s ease !default; -$progress-xl-size: .8rem; -$progress-lg-size: .6rem; -$progress-sm-size: .2rem; +$progress-xl-size: .8rem !default; +$progress-lg-size: .6rem !default; +$progress-sm-size: .2rem !default; // List group -$list-group-color: null; -$list-group-bg: $white; -$list-group-border-color: rgba($black, .125); -$list-group-border-width: $border-width; -$list-group-border-radius: $border-radius; +$list-group-color : null !default; +$list-group-bg : $white !default; +$list-group-border-color : rgba($black, .125) !default; +$list-group-border-width : $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-sm-item-padding-y: .625rem; -$list-group-sm-item-padding-x: .875rem; +$list-group-sm-item-padding-y: .625rem !default; +$list-group-sm-item-padding-x: .875rem !default; -$list-group-item-padding-y: $spacer / 2; -$list-group-item-padding-x: $spacer; -$list-group-item-bg-level: -9; -$list-group-item-color-level: 6; -$list-group-item-border-radius: $border-radius; +$list-group-item-padding-y : $spacer / 2 !default; +$list-group-item-padding-x : $spacer !default; +$list-group-item-bg-level : -9 !default; +$list-group-item-color-level : 6 !default; +$list-group-item-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-100; -$list-group-active-color: $component-active-color; -$list-group-active-bg: $component-active-bg; -$list-group-active-border-color: $list-group-active-bg; +$list-group-hover-bg : $gray-100 !default; +$list-group-active-color : $component-active-color !default; +$list-group-active-bg : $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-disabled-color: $gray-600; -$list-group-disabled-bg: $list-group-bg; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg : $list-group-bg !default; -$list-group-action-color: $gray-700; -$list-group-action-hover-color: $list-group-action-color; +$list-group-action-color : $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; -$list-group-action-active-color: $body-color; -$list-group-action-active-bg: $gray-200; +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg : $gray-200 !default; // Image thumbnails -$thumbnail-padding: .25rem; -$thumbnail-bg: $body-bg; -$thumbnail-border-width: $border-width; -$thumbnail-border-color: $gray-300; -$thumbnail-border-radius: $border-radius; -$thumbnail-box-shadow: $box-shadow-sm; +$thumbnail-padding : .25rem !default; +$thumbnail-bg : $body-bg !default; +$thumbnail-border-width : $border-width !default; +$thumbnail-border-color : $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow : $box-shadow-sm !default; // Figures -$figure-caption-font-size: $small-font-size; -$figure-caption-color: $gray-600; +$figure-caption-font-size: $small-font-size !default; +$figure-caption-color : $gray-600 !default; // Breadcrumbs -$breadcrumb-font-size: null; -$breadcrumb-padding-y: $spacer / 2; -$breadcrumb-padding-x: $spacer; -$breadcrumb-item-padding-x: .5rem; -$breadcrumb-margin-bottom: 1rem; -$breadcrumb-bg: $gray-200; -$breadcrumb-divider-color: $gray-600; -$breadcrumb-active-color: $gray-600; -$breadcrumb-divider: quote("/"); -$breadcrumb-border-radius: $border-radius; - -$breadcrumb-active-color: $white; -$breadcrumb-divider-color: $gray-700; -$breadcrumb-item-color: $gray-700; -$breadcrumb-font-weight: $font-weight-normal; -$breadcrumb-active-font-weight: $font-weight-normal; -$breadcrumb-item-light-color: $white; -$breadcrumb-divider-light-color: $white; +$breadcrumb-font-size : null !default; +$breadcrumb-padding-y : $spacer / 2 !default; +$breadcrumb-padding-x : $spacer !default; +$breadcrumb-item-padding-x: .5rem !default; +$breadcrumb-margin-bottom : 1rem !default; +$breadcrumb-bg : $gray-200 !default; +$breadcrumb-divider-color : $gray-600 !default; +$breadcrumb-active-color : $gray-600 !default; +$breadcrumb-divider : quote("/") !default; +$breadcrumb-border-radius : $border-radius !default; + +$breadcrumb-active-color : $white !default; +$breadcrumb-divider-color : $gray-700 !default; +$breadcrumb-item-color : $gray-700 !default; +$breadcrumb-font-weight : $font-weight-normal !default; +$breadcrumb-active-font-weight : $font-weight-normal !default; +$breadcrumb-item-light-color : $white !default; +$breadcrumb-divider-light-color: $white !default; // Carousel -$carousel-control-color: $white; -$carousel-control-width: 15%; -$carousel-control-opacity: .5; -$carousel-control-hover-opacity: .9; -$carousel-control-transition: opacity .15s ease; +$carousel-control-color : $white !default; +$carousel-control-width : 15% !default; +$carousel-control-opacity : .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition : opacity .15s ease !default; -$carousel-indicator-width: 30px; -$carousel-indicator-height: 3px; -$carousel-indicator-hit-area-height: 10px; -$carousel-indicator-spacer: 3px; -$carousel-indicator-opacity: .5; -$carousel-indicator-active-bg: $white; -$carousel-indicator-active-opacity: 1; -$carousel-indicator-transition: opacity .6s ease; +$carousel-indicator-width : 30px !default; +$carousel-indicator-height : 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer : 3px !default; +$carousel-indicator-opacity : .5 !default; +$carousel-indicator-active-bg : $white !default; +$carousel-indicator-active-opacity : 1 !default; +$carousel-indicator-transition : opacity .6s ease !default; -$carousel-caption-width: 70%; -$carousel-caption-color: $white; -$carousel-caption-padding-y: 1.25rem; -$carousel-caption-spacer: 1.25rem; +$carousel-caption-width : 70% !default; +$carousel-caption-color : $white !default; +$carousel-caption-padding-y: 1.25rem !default; +$carousel-caption-spacer : 1.25rem !default; -$carousel-control-icon-width: 20px; +$carousel-control-icon-width: 20px !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,"); -$carousel-control-next-icon-bg: url("data:image/svg+xml,"); +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; -$carousel-transition-duration: .6s; -$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-transition-duration: .6s !default; +$carousel-transition : transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) // Spinners -$spinner-width: 2rem; -$spinner-height: $spinner-width; -$spinner-border-width: .25em; -$spinner-animation-speed: .75s; +$spinner-width : 2rem !default; +$spinner-height : $spinner-width !default; +$spinner-border-width : .25em !default; +$spinner-animation-speed: .75s !default; -$spinner-width-sm: 1.2rem; -$spinner-height-sm: $spinner-width-sm; -$spinner-border-width-sm: .2em; +$spinner-width-sm : 1.2rem !default; +$spinner-height-sm : $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; // Datepicker -$datepicker-border-radius: $border-radius-sm; -$datepicker-dropdown-padding: 20px 22px; +$datepicker-border-radius : $border-radius-sm !default; +$datepicker-dropdown-padding: 20px 22px !default; -$datepicker-cell-transition: $transition-base; -$datepicker-cell-hover-background: lighten($gray-400, 55%); -$datepicker-cell-border-radius: 50%; -$datepicker-cell-width: 36px; -$datepicker-cell-height: 36px; +$datepicker-cell-transition : $transition-base !default; +$datepicker-cell-hover-background: lighten($gray-400, 55%) !default; +$datepicker-cell-border-radius : 50% !default; +$datepicker-cell-width : 36px !default; +$datepicker-cell-height : 36px !default; -$datepicker-disabled-cell-color: $gray-300; -$datepicker-disabled-old-new-color: $gray-500; +$datepicker-disabled-cell-color : $gray-300 !default; +$datepicker-disabled-old-new-color: $gray-500 !default; -$datepicker-header-cell-border-radius: $border-radius-sm; +$datepicker-header-cell-border-radius: $border-radius-sm !default; -$datepicker-active-color: $white; -$datepicker-active-background: $secondary; -$datepicker-active-box-shadow: none; +$datepicker-active-color : $white !default; +$datepicker-active-background: $secondary !default; +$datepicker-active-box-shadow: none !default; -$datepicker-range-background: $secondary; -$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%); -$datepicker-range-color: $white; -$datepicker-range-highlighted-bg: $gray-200; +$datepicker-range-background : $secondary !default; +$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%) !default; +$datepicker-range-color : $white !default; +$datepicker-range-highlighted-bg : $gray-200 !default; -$datepicker-dropdown-border: lighten($gray-400, 40%); -$datepicker-dropdown-bg: $white; -$datepicker-highlighted-bg: $datepicker-active-background; +$datepicker-dropdown-border: lighten($gray-400, 40%) !default; +$datepicker-dropdown-bg : $white !default; +$datepicker-highlighted-bg : $datepicker-active-background !default; // Close -$close-bg: transparent; -$close-hover-bg: transparent; -$close-color: rgba(0, 0, 0, .6); -$close-hover-color: rgba(0, 0, 0, .9); -$close-font-size: $font-size-base * 1.5; -$close-font-weight: $font-weight-bold; -$close-color: $black; -$close-text-shadow: 0 1px 0 $white; +$close-bg : transparent !default; +$close-hover-bg : transparent !default; +$close-color : rgba(0, 0, 0, .6) !default; +$close-hover-color: rgba(0, 0, 0, .9) !default; +$close-font-size : $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color : $black !default; +$close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: $small-font-size; -$code-color: $pink; +$code-font-size: $small-font-size !default; +$code-color : $pink !default; -$kbd-padding-y: .2rem; -$kbd-padding-x: .4rem; -$kbd-font-size: $code-font-size; -$kbd-color: $white; -$kbd-bg: $gray-900; +$kbd-padding-y: .2rem !default; +$kbd-padding-x: .4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color : $white !default; +$kbd-bg : $gray-900 !default; -$pre-color: null; +$pre-color: null !default; // Avatars -$avatar-sm-y: 1.5rem; -$avatar-sm-x: 1.5rem; +$avatar-sm-y: 1.5rem !default; +$avatar-sm-x: 1.5rem !default; -$avatar-md-y: 2rem; -$avatar-md-x: 2rem; +$avatar-md-y: 2rem !default; +$avatar-md-x: 2rem !default; -$avatar-lg-y: 3rem; -$avatar-lg-x: 3rem; +$avatar-lg-y: 3rem !default; +$avatar-lg-x: 3rem !default; -$user-avatar-height:2.5rem; -$user-avatar-width: 2.5rem; +$user-avatar-height:2.5rem !default; +$user-avatar-width : 2.5rem !default; -$user-avatar-height-xs:1.5rem; -$user-avatar-width-xs: 1.5rem; +$user-avatar-height-xs:1.5rem !default; +$user-avatar-width-xs : 1.5rem !default; -$user-avatar-height-lg:3.5rem; -$user-avatar-width-lg:3.5rem; +$user-avatar-height-lg:3.5rem !default; +$user-avatar-width-lg :3.5rem !default; -$user-avatar-height-xl:4.5rem; -$user-avatar-width-xl:4.5rem; +$user-avatar-height-xl:4.5rem !default; +$user-avatar-width-xl :4.5rem !default; -$user-avatar-height-xxl:10rem; -$user-avatar-width-xxl:10rem; +$user-avatar-height-xxl:10rem !default; +$user-avatar-width-xxl :10rem !default; // Footer -$footer-link-font-size: .85rem; -$footer-bg: theme-color("secondary"); -$footer-color: $gray-600; -$footer-link-color: $gray-600; -$footer-link-hover-color: $gray-700; -$footer-heading-color: $gray-600; -$footer-heading-font-size: $font-size-sm; -$padding-footer-sm: .125rem ; -$padding-footer: .375rem ; -$padding-footer-md: .625rem ; -$padding-footer-general: .9375rem; -$padding-footer-big: 1.5rem; +$footer-link-font-size : .85rem !default; +$footer-bg : theme-color("secondary") !default; +$footer-color : $gray-600 !default; +$footer-link-color : $gray-600 !default; +$footer-link-hover-color : $gray-700 !default; +$footer-heading-color : $gray-600 !default; +$footer-heading-font-size: $font-size-sm !default; +$padding-footer-sm : .125rem !default; +$padding-footer : .375rem !default; +$padding-footer-md : .625rem !default; +$padding-footer-general : .9375rem !default; +$padding-footer-big : 1.5rem !default; \ No newline at end of file diff --git a/src/scss/volt/_reboot.scss b/src/scss/volt/components/_body.scss old mode 100755 new mode 100644 similarity index 88% rename from src/scss/volt/_reboot.scss rename to src/scss/volt/components/_body.scss index 206e506..002688a --- a/src/scss/volt/_reboot.scss +++ b/src/scss/volt/components/_body.scss @@ -1,31 +1,31 @@ -iframe { - border: 0; -} - -figcaption, -figure, -main { - display: block; - margin: 0; -} - -main { - overflow: hidden; -} - -img { - max-width: 100%; -} - -strong{ - font-weight: $font-weight-bold; -} - -button:focus { - outline: 0; -} - -label{ - font-weight: $font-weight-bold; - margin-bottom:.5rem; +iframe { + border: 0; +} + +figcaption, +figure, +main { + display: block; + margin: 0; +} + +main { + overflow: hidden; +} + +img { + max-width: 100%; +} + +strong{ + font-weight: $font-weight-bold; +} + +button:focus { + outline: 0; +} + +label { + font-weight: $font-weight-bold; + margin-bottom:.5rem; } \ No newline at end of file diff --git a/src/scss/volt/vendor/_datepicker.scss b/src/scss/volt/vendor/_datepicker.scss deleted file mode 100644 index f4b2c5e..0000000 --- a/src/scss/volt/vendor/_datepicker.scss +++ /dev/null @@ -1,444 +0,0 @@ -//== foundational variables ==// -$black: hsl(0, 0%, 4%) !default; -$white: hsl(0, 0%, 100%) !default; -$light: hsl(0, 0%, 96%) !default; // white-ter -$dark: hsl(0, 0%, 21%) !default; // grey-darker -$link: $primary; // blue - -$grey-dark: lighten($black, 25%) !default; -$grey-light: darken($light, 25%) !default; -$grey-lighter: darken($light, 10%) !default; - -//== datepicker variables ==// -$dp-background-color: $white !default; -$dp-border-color: $grey-lighter !default; -$dp-border-radius: 4px !default; -$dp-border-radius-small: 2px !default; -$dp-line-height-base: 1.5 !default; -$dp-font-size-normal: 1rem !default; -$dp-font-size-small: 0.75rem !default; -$dp-font-weight-semibold: 600 !default; -$dp-font-weight-bold: 700 !default; -$dp-dropdown-offset: 4px !default; -$dp-dropdown-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default; -$dp-dropdown-z: 20 !default; - -$dp-title-background-color: $light !default; - -$dp-cell-size-base: 2.25rem !default; -$dp-cell-focus-background-color: darken($light, 5%) !default; -$dp-cell-prevnext-color: hsl(0, 0%, 48%) !default; // grey -$dp-cell-disabled-color: $grey-lighter !default; -$dp-cell-selected-background-color: $link !default; -$dp-cell-selected-color: #fff !default; // link(blue)-invert -$dp-cell-selected-font-weight: 600 !default; -$dp-cell-today-background-color: hsl(171, 100%, 41%) !default; // turquoise (primary) -$dp-cell-today-color: #fff !default; // turquoise-invert -$dp-cell-highlighted-background-color: $light !default; -$dp-range-start-end-background-color: $grey-light !default; -$dp-range-start-end-color: $dp-cell-selected-color !default; -$dp-range-background-color: $grey-lighter !default; -$dp-range-today-background-color: $dp-cell-today-background-color !default; -$dp-week-color: $grey-light !default; - -$dp-footer-background-color: $light !default; - -$dp-input-in-edit-border-color: darken($link, 5%) !default; -$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default; - -//== non-configurable variables ==// -$dp-cell-shrink-threshold: $dp-cell-size-base * 10; // = 8 * 1.25 -$dp-cell-shrinked-width: $dp-cell-size-base * 7 / 8; - -//== mixins ==// - -@mixin dp-header-button-common { - border-color: transparent; - font-weight: bold; - } - - @mixin dp-footer-button-common { - margin: calc(0.375rem - 1px) 0.375rem; - border-radius: $dp-border-radius-small; - width: 100%; - font-size: $dp-font-size-small; - } - - -//== styles ==// -.datepicker { - display: none; - - &.active { - display: block; - } -} - -.datepicker-dropdown { - position: absolute; - top: 0; - left: 0; - z-index: $dp-dropdown-z; - padding-top: $dp-dropdown-offset; - - &.datepicker-orient-top { - padding-top: 0; - padding-bottom: $dp-dropdown-offset; - } -} - -.datepicker-picker { - display: inline-block; - border-radius: $dp-border-radius; - background-color: $dp-background-color; - - .datepicker-dropdown & { - box-shadow: $dp-dropdown-shadow; - } - - span { - display: block; - flex: 1; - border: 0; - border-radius: $dp-border-radius; - cursor: default; - text-align: center; - -webkit-touch-callout: none; - user-select: none; - } -} - -.datepicker-main { - padding: 2px; -} - -.datepicker-footer { - box-shadow: inset 0 1px 1px rgba($black, 0.1); - background-color: $dp-footer-background-color; -} - -%flex-container { - display: flex; -} - -%flex-wrap { - flex-wrap: wrap; -} - -%flex-basis-day { - flex-basis: percentage(1 / 7); -} - -%flex-basis-month-year { - flex-basis: 25%; -} - -%datepicker-cell-height { - height: $dp-cell-size-base; - line-height: $dp-cell-size-base; -} - -.datepicker-title { - box-shadow: inset 0 -1px 1px rgba($black, 0.1); - background-color: $dp-title-background-color; - padding: 0.375rem 0.75rem; - text-align: center; - font-weight: $dp-font-weight-bold; -} - -.datepicker-controls { - @extend %flex-container; - - .datepicker-header & { - padding: 2px 2px 0; - } - - @if mixin-exists(dp-button) { - @include dp-button; - } @else { - .button { - $button-color: $dark; - $button-background-color: $white; - - $button-border-color: $grey-lighter; - $button-border-width: 1px; - - $button-padding-vertical: calc(0.375em - #{$button-border-width}); - $button-padding-horizontal: 0.75em; - - $button-hover-color: $dark; // link-hover - $button-hover-border-color: $grey-light; // link-hover-border - - $button-focus-color: $dark; // link-focus - $button-focus-border-color: $link; // link-focus-border - $button-focus-box-shadow-size: 0 0 0 0.125em; - $button-focus-box-shadow-color: rgba($link, 0.25); - - $button-active-color: $dark; // link-active - $button-active-border-color: $grey-dark; // link-active-border - - display: inline-flex; - position: relative; - align-items: center; - justify-content: center; - margin: 0; - border: $button-border-width solid $button-border-color; - border-radius: $dp-border-radius; // control-radius - box-shadow: none; - background-color: $button-background-color; - cursor: pointer; - padding: $button-padding-vertical $button-padding-horizontal; - height: 2.25em; // control-height - vertical-align: top; - text-align: center; - line-height: $dp-line-height-base; // control-line-height - white-space: nowrap; - color: $button-color; - font-size: $dp-font-size-normal; // size-normal - - &:focus, - &:active { - outline: none; - } - - &:hover { - border-color: $button-hover-border-color; - color: $button-hover-color; - } - - &:focus { - border-color: $button-focus-border-color; - color: $button-focus-color; - - &:not(:active) { - box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; - } - } - - &:active { - border-color: $button-active-border-color; - color: $button-active-color; - } - - &[disabled] { - cursor: not-allowed; - } - - .datepicker-header & { - @include dp-header-button-common; - - &:hover { - background-color: darken($white, 2.5%); - } - - &:focus { - &:not(:active) { - box-shadow: 0 0 0 0.125em rgba($white, 0.25); - } - } - - &:active { - background-color: darken($white, 5%); - } - - &[disabled] { - box-shadow: none; - } - } - - .datepicker-footer & { - @include dp-footer-button-common; - } - } - } - - .view-switch { - flex: auto; - } - - .prev-btn, - .next-btn { - padding-right: 0.375rem; - padding-left: 0.375rem; - width: $dp-cell-size-base; - - &.disabled { - visibility: hidden; - } - } -} - -.datepicker-view { - @extend %flex-container; - - .days-of-week { - @extend %flex-container; - } - - .dow { - @extend %flex-basis-day; - height: $dp-font-size-normal * $dp-line-height-base; - line-height: $dp-font-size-normal * $dp-line-height-base; - font-size: ($dp-font-size-small + $dp-font-size-normal) / 2; - font-weight: $dp-font-weight-bold; - } - - .week { - @extend %datepicker-cell-height; - width: $dp-cell-size-base; - color: $dp-week-color; - font-size: $dp-font-size-small; - - @media (max-width: $dp-cell-shrink-threshold) { - width: $dp-cell-shrinked-width; - } - } -} - -.datepicker-grid { - @extend %flex-container; - @extend %flex-wrap; - - width: $dp-cell-size-base * 7; - - @media (max-width: $dp-cell-shrink-threshold) { - .calendar-weeks + .days & { - width: $dp-cell-shrinked-width * 7; - } - } -} - -.datepicker-cell { - @extend %datepicker-cell-height; - - &:not(.disabled):hover { - background-color: darken($dp-background-color, 2.5%); - cursor: pointer; - } - - &.focused:not(.selected) { - background-color: $dp-cell-focus-background-color; - } - - &.selected { - &, - &:hover { - background-color: $dp-cell-selected-background-color; - color: $dp-cell-selected-color; - font-weight: $dp-cell-selected-font-weight; - } - } - - &.disabled { - color: $dp-cell-disabled-color; - } - - &.prev, - &.next { - &:not(.disabled) { - color: $dp-cell-prevnext-color; - } - } - - &.highlighted:not(.selected):not(.range):not(.today) { - border-radius: 0; - background-color: $dp-cell-highlighted-background-color; - - &:not(.disabled):hover { - background-color: darken($dp-cell-highlighted-background-color, 2.5%); - } - - &.focused { - background-color: $dp-cell-focus-background-color; - } - } - - &.today { - &:not(.selected) { - background-color: $dp-cell-today-background-color; - - &:not(.disabled) { - color: $dp-cell-today-color; - } - } - - &.focused:not(.selected) { - background-color: darken($dp-cell-today-background-color, 2.5%); - } - } - - &%range-start-end-common { - background-color: $dp-range-start-end-background-color; - color: $dp-range-start-end-color; - } - - &%range-start-end-focused-common { - background-color: darken($dp-range-start-end-background-color, 2.5%); - } - - &.range-start { - border-radius: $dp-border-radius 0 0 $dp-border-radius; - - &:not(.selected) { - @extend %range-start-end-common; - } - - &.focused:not(.selected) { - @extend %range-start-end-focused-common; - } - } - - &.range-end { - border-radius: 0 $dp-border-radius $dp-border-radius 0; - - &:not(.selected) { - @extend %range-start-end-common; - } - - &.focused:not(.selected) { - @extend %range-start-end-focused-common; - } - } - - &.range { - border-radius: 0; - background-color: $dp-range-background-color; - - &:not(.disabled):not(.focused):not(.today):hover { - background-color: darken($dp-range-background-color, 2.5%); - } - - &.disabled { - color: darken($dp-range-background-color, 10%); - } - - &.focused { - background-color: darken($dp-range-background-color, 5%); - } - - @if $dp-range-today-background-color != $dp-cell-today-background-color { - &.today { - background-color: $dp-range-today-background-color; - } - } - } - - .datepicker-view .days & { - @extend %flex-basis-day; - } - - .datepicker-view.datepicker-grid & { - @extend %flex-basis-month-year; - height: $dp-cell-size-base * 2; - line-height: $dp-cell-size-base * 2; - } -} - -.datepicker-input.in-edit { - border-color: $dp-input-in-edit-border-color; - - &:focus, - &:active { - box-shadow: $dp-input-in-edit-focus-box-shadow-size rgba($dp-input-in-edit-border-color, 0.2); - } -} diff --git a/src/scss/volt/vendor/_headroom.scss b/src/scss/volt/vendor/_headroom.scss deleted file mode 100755 index 5b4881e..0000000 --- a/src/scss/volt/vendor/_headroom.scss +++ /dev/null @@ -1,52 +0,0 @@ - -.headroom { - will-change: transform; - background-color: inherit; - @include transition($transition-base); -} -.headroom--pinned { - @extend .position-fixed; - transform: translateY(0%); -} -.headroom--unpinned { - @extend .position-fixed; - transform: translateY(-100%); -} - -.headroom--not-top { - padding-top: 1rem; - padding-bottom: 1rem; - - @each $color, $value in $theme-colors { - &.navbar-theme-#{$color} { - background-color: $value; - - .navbar-brand-light { - display: none; - } - .navbar-brand-dark { - display: block; - } - - .nav-link { - color: $navbar-dark-color; - - &:hover { - color: $navbar-dark-hover-color; - } - } - } - } - - &.navbar-light { - .navbar-nav > .nav-item.show > .nav-link, - .navbar-nav > .nav-item > .nav-link:focus, - .nav-item .nav-link > span { - color: $white; - } - - .navbar-toggler-icon { - background-image: $navbar-dark-toggler-icon-bg; - } - } -} \ No newline at end of file diff --git a/src/scss/volt/vendor/_nouislider.scss b/src/scss/volt/vendor/_nouislider.scss deleted file mode 100755 index 5245bc6..0000000 --- a/src/scss/volt/vendor/_nouislider.scss +++ /dev/null @@ -1,498 +0,0 @@ -// Original styles -.noUi-target, -.noUi-target * { - -webkit-touch-callout: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-user-select: none; - touch-action: none; - user-select: none; - box-sizing: border-box; -} - -.noUi-target { - position: relative; - direction: ltr; -} - -.noUi-base, -.noUi-connects { - width: 100%; - height: 100%; - position: relative; - z-index: 1; -} - -/* Wrapper for all connect elements. - */ - -.noUi-connects { - overflow: hidden; - z-index: 0; -} - -.noUi-connect, -.noUi-origin { - will-change: transform; - position: absolute; - z-index: 1; - top: 0; - left: 0; - height: 100%; - width: 100%; - transform-origin: 0 0; -} - - -html:not([dir="rtl"]) .noUi-horizontal .noUi-origin { - left: auto; - right: 0; -} - -.noUi-vertical .noUi-origin { - width: 0; -} - -.noUi-horizontal .noUi-origin { - height: 0; -} - -.noUi-handle { - position: absolute; -} - -.noUi-state-tap .noUi-connect, -.noUi-state-tap .noUi-origin { - transition: transform .3s; -} - -.noUi-state-drag * { - cursor: inherit !important; -} - -.noUi-horizontal { - height: $noui-target-thickness; -} - -.noUi-horizontal .noUi-handle { - left: -17px; - top: -10px; -} - -.noUi-vertical { - width: $noui-target-thickness; - height: 340px; -} - -.noUi-vertical .noUi-handle { - width: 18px; - height: 34px; - left: -6px; - top: -17px; -} - -html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { - right: -17px; - left: auto; -} - -.noUi-connects { - border-radius: 3px; -} - -.noUi-connect { - background: $noui-slider-connect-bg; -} - -.noUi-draggable { - cursor: ew-resize; -} - -.noUi-vertical .noUi-draggable { - cursor: ns-resize; -} - -.noUi-handle { - border: 1px solid $gray-100; - border-radius: 3px; - background: $white; - cursor: default; - outline: none; - // Change the cursor to a grab hand on hover. - &:hover { - cursor: grab; - cursor: -webkit-grab; - cursor:-moz-grab; - background-color: $light; - } - - // Change the cursor to a grabbing hand on active. - &:active { - cursor: grabbing; - cursor: -webkit-grabbing; - cursor:-moz-grabbing; - background-color: $light; - @include box-shadow($noui-handle-active-shadow); - } - - &:focus{ - @include box-shadow($noui-handle-active-shadow); - background-color: $light; - } -} - -.noUi-active { - outline: none; - //box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; -} - - -/* Disabled state; - */ - -[disabled] .noUi-connect { - background: $gray-400; -} - -[disabled].noUi-target, -[disabled].noUi-handle, -[disabled] .noUi-handle { - cursor: not-allowed; -} - - -/* Base; - * - */ - -.noUi-pips, -.noUi-pips * { - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.noUi-pips { - position: absolute; - color: $gray-800; - font-size: $font-size-xs; -} - - -/* Values; - * - */ - -.noUi-value { - margin-top: 5px; - position: absolute; - white-space: nowrap; - text-align: center; -} - -.noUi-value-sub { - color: $gray-400; - font-size: $font-size-xs; -} - - -/* Markings; - * - */ - -.noUi-marker { - position: absolute; - background: $gray-800; -} - -.noUi-marker-sub { - background: $gray-800; -} - -.noUi-marker-large { - background: $gray-800; -} - - -/* Horizontal layout; - * - */ - -.noUi-pips-horizontal { - padding: 12px 0; - height: auto; - top: 100%; - left: 0; - width: 100%; -} - -.noUi-value-horizontal { - transform: translate(-50%, 50%); -} - -.noUi-rtl .noUi-value-horizontal { - transform: translate(50%, 50%); -} - -.noUi-marker-horizontal.noUi-marker { - margin-left: -1px; - width: 2px; - height: 5px; -} - -.noUi-marker-horizontal.noUi-marker-sub { - height: 10px; -} - -.noUi-marker-horizontal.noUi-marker-large { - height: 12px; -} - - -/* Vertical layout; - * - */ - -.noUi-pips-vertical { - padding: 0 10px; - height: 100%; - top: 0; - left: 100%; -} - -.noUi-value-vertical { - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%, 0); - padding-left: 25px; -} - -.noUi-rtl .noUi-value-vertical { - -webkit-transform: translate(0, 50%); - transform: translate(0, 50%); -} - -.noUi-marker-vertical.noUi-marker { - width: 5px; - height: 2px; - margin-top: -1px; -} - -.noUi-marker-vertical.noUi-marker-sub { - width: 10px; -} - -.noUi-marker-vertical.noUi-marker-large { - width: 15px; -} - -.noUi-tooltip { - background: $white; - color: $gray-800; - font-size: $font-size-xs; - font-weight: $font-weight-normal; - display: block; - position: absolute; - padding: 5px 10px; - text-align: center; - white-space: nowrap; - @include border-radius($border-radius); - border: $border-width solid $light; -} - -.noUi-horizontal .noUi-tooltip { - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - left: 50%; - bottom: 30px; -} - -.noUi-vertical .noUi-tooltip { - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); - top: 50%; - right: 120%; -} - - -// Custom styles - -.noUi-target { - background: $noui-target-bg; - border-radius: $noui-target-border-radius; - border: 0; - box-shadow: $noui-target-box-shadow; - margin: 15px 0; - cursor: pointer; -} - -.noUi-horizontal { - height: $noui-target-thickness; -} - -html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { - right: -10px; -} - -.noUi-vertical { - width: $noui-target-thickness; -} - -.noUi-connect { - background: $noui-handle-bg; - box-shadow: none; -} - -.noUi-handle { - position: absolute; - border: 1px solid $primary; - border-radius: 50%; - width: 23px; - height: 23px; - @include box-shadow($noui-box-shadow); - background: $white; - transition: all 150ms cubic-bezier(.17,.01,.28,1.06); -} - -.noUi-vertical .noUi-handle { - border: 1px solid $gray-700; - border-radius: 3px; - background: $white; - cursor: default; - box-shadow: inset 0 0 1px $white, inset 0 1px 7px $gray-100, 0 3px 6px -3px $gray-200; - outline: none; - // Change the cursor to a grab hand on hover. - &:hover { - cursor: grab; - cursor: -webkit-grab; - cursor:-moz-grab; - background-color: $light; - } - - // Change the cursor to a grabbing hand on active. - &:active { - cursor: grabbing; - cursor: -webkit-grabbing; - cursor:-moz-grabbing; - background-color: $light; - @include box-shadow($noui-handle-active-shadow); - } - - &:focus{ - @include box-shadow($noui-handle-active-shadow); - background-color: $light; - } -} - - -.noUi-horizontal .noUi-handle.noUi-active, -.noUi-vertical .noUi-handle.noUi-active { - transform: scale(1.2); -} - -.noUi-horizontal .noUi-active, -.noUi-vertical .noUi-active { - //box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1); -} - -.input-slider--cyan .noUi-connect { - background: $cyan; -} - -.input-slider--cyan.noUi-horizontal .noUi-handle, -.input-slider--cyan.noUi-vertical .noUi-handle { - background-color: $cyan; -} - -.input-slider--red .noUi-connect { - background: $red; -} - -.input-slider--red.noUi-horizontal .noUi-handle, -.input-slider--red.noUi-vertical .noUi-handle { - background-color: $red; -} - -.input-slider--green .noUi-connect { - background: $green; -} - -.input-slider--green.noUi-horizontal .noUi-handle, -.input-slider--green.noUi-vertical .noUi-handle { - background-color: $green; -} - -.input-slider--yellow .noUi-connect { - background: $yellow; -} - -.input-slider--yellow.noUi-horizontal .noUi-handle, -.input-slider--yellow.noUi-vertical .noUi-handle { - background-color: $yellow; -} - -.input-slider--pink .noUi-connect { - background: $pink; -} - -.input-slider--pink.noUi-horizontal .noUi-handle, -.input-slider--pink.noUi-vertical .noUi-handle { - background-color: $pink; -} -/* Disabled state */ -[disabled] .noUi-connect, -[disabled].noUi-connect { - background: $noui-slider-connect-disabled-bg; -} - -[disabled] .noUi-handle, -[disabled].noUi-origin { - cursor: not-allowed; -} - -/* Range slider value labels */ -.range-slider-value { - font-size: $font-size-xs; - font-weight: 500; - background-color: rgba($dark, .7); - color: color-yiq($dark); - border-radius: 10px; - padding: .4em .8em .3em .85em; -} - -.range-slider-wrapper .upper-info { - font-weight: 400; - margin-bottom: 5px; -} - -.input-slider-value-output { - background: $dark; - color: $white; - padding: 4px 8px; - position: relative; - top: 12px; - font-size: 11px; - border-radius: 2px; -} - -.input-slider-value-output:after { - bottom: 100%; - left: 10px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: $dark; - border-bottom-color: #333; - border-width: 4px; - margin-left: -4px; -} - -.input-slider-value-output.left:after { - left: 10px; - right: auto; -} - -.input-slider-value-output.right:after { - right: 10px; - left: auto; -} diff --git a/src/scss/volt/vendor/_prism.scss b/src/scss/volt/vendor/_prism.scss deleted file mode 100644 index b173f3f..0000000 --- a/src/scss/volt/vendor/_prism.scss +++ /dev/null @@ -1,140 +0,0 @@ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - - code[class*="language-"], - pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, - code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; - } - - pre[class*="language-"]::selection, pre[class*="language-"] ::selection, - code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; - } - - @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } - } - - /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - } - - :not(pre) > code[class*="language-"], - pre[class*="language-"] { - background: #f5f2f0; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: slategray; - } - - .token.punctuation { - color: #999; - } - - .namespace { - opacity: .7; - } - - .token.property, - .token.tag, - .token.boolean, - .token.number, - .token.constant, - .token.symbol, - .token.deleted { - color: #905; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - color: #690; - } - - .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); - } - - .token.atrule, - .token.attr-value, - .token.keyword { - color: #07a; - } - - .token.function, - .token.class-name { - color: #DD4A68; - } - - .token.regex, - .token.important, - .token.variable { - color: #e90; - } - - .token.important, - .token.bold { - font-weight: bold; - } - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - \ No newline at end of file diff --git a/src/scss/volt/vendor/chartist/_chartist.scss b/src/scss/volt/vendor/chartist/_chartist.scss deleted file mode 100755 index d800d77..0000000 --- a/src/scss/volt/vendor/chartist/_chartist.scss +++ /dev/null @@ -1,252 +0,0 @@ -@import "settings/chartist-settings"; - -@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { - display: block; - position: relative; - width: $width; - - &:before { - display: block; - float: left; - content: ""; - width: 0; - height: 0; - padding-bottom: $ratio * 100%; - } - - &:after { - content: ""; - display: table; - clear: both; - } - - > svg { - display: block; - position: absolute; - top: 0; - left: 0; - } -} - -@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { - -webkit-box-align: $ct-text-align; - -webkit-align-items: $ct-text-align; - -ms-flex-align: $ct-text-align; - align-items: $ct-text-align; - -webkit-box-pack: $ct-text-justify; - -webkit-justify-content: $ct-text-justify; - -ms-flex-pack: $ct-text-justify; - justify-content: $ct-text-justify; - // Fallback to text-align for non-flex browsers - @if($ct-text-justify == 'flex-start') { - text-align: left; - } @else if ($ct-text-justify == 'flex-end') { - text-align: right; - } @else { - text-align: center; - } -} - -@mixin ct-flex() { - // Fallback to block - display: block; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} - -@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { - fill: $ct-text-color; - color: $ct-text-color; - font-size: $ct-text-size; - line-height: $ct-text-line-height; - font-weight: $ct-font-weight; -} - -@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { - stroke: $ct-grid-color; - stroke-width: $ct-grid-width; - - @if ($ct-grid-dasharray) { - stroke-dasharray: $ct-grid-dasharray; - } -} - -@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { - stroke-width: $ct-point-size; - stroke-linecap: $ct-point-shape; -} - -@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { - fill: none; - stroke-width: $ct-line-width; - - @if ($ct-line-dasharray) { - stroke-dasharray: $ct-line-dasharray; - } -} - -@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { - stroke: none; - fill-opacity: $ct-area-opacity; -} - -@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { - fill: none; - stroke-width: $ct-bar-width; -} - -@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { - fill: none; - stroke-width: $ct-donut-width; -} - -@mixin ct-chart-series-color($color) { - .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { - stroke: $color; - } - - .#{$ct-class-slice-pie}, .#{$ct-class-slice-donut-solid}, .#{$ct-class-area} { - fill: $color; - } -} - -@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { - - .#{$ct-class-label} { - @include ct-chart-label($ct-text-color, $ct-text-size); - } - - .#{$ct-class-chart-line} .#{$ct-class-label}, - .#{$ct-class-chart-bar} .#{$ct-class-label} { - @include ct-flex(); - } - - .#{$ct-class-chart-pie} .#{$ct-class-label}, - .#{$ct-class-chart-donut} .#{$ct-class-label} { - dominant-baseline: central; - } - - .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { - @include ct-align-justify(flex-end, flex-start); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { - @include ct-align-justify(flex-start, flex-start); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { - @include ct-align-justify(flex-end, flex-end); - // Fallback for browsers that don't support foreignObjects - text-anchor: end; - } - - .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { - @include ct-align-justify(flex-end, flex-start); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { - @include ct-align-justify(flex-end, center); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { - @include ct-align-justify(flex-start, center); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { - @include ct-align-justify(flex-end, flex-start); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { - @include ct-align-justify(flex-start, flex-start); - // Fallback for browsers that don't support foreignObjects - text-anchor: start; - } - - .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { - //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); - @include ct-align-justify(center, flex-end); - // Fallback for browsers that don't support foreignObjects - text-anchor: end; - } - - .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { - @include ct-align-justify(center, flex-start); - // Fallback for browsers that don't support foreignObjects - text-anchor: end; - } - - .#{$ct-class-grid} { - @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); - } - - .#{$ct-class-grid-background} { - fill: $ct-grid-background-fill; - } - - .#{$ct-class-point} { - @include ct-chart-point($ct-point-size, $ct-point-shape); - } - - .#{$ct-class-line} { - @include ct-chart-line($ct-line-width); - } - - .#{$ct-class-area} { - @include ct-chart-area(); - } - - .#{$ct-class-bar} { - @include ct-chart-bar($ct-bar-width); - } - - .#{$ct-class-slice-donut} { - @include ct-chart-donut($ct-donut-width); - } - - @if $ct-include-colored-series { - @for $i from 0 to length($ct-series-names) { - .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { - $color: nth($ct-series-colors, $i + 1); - - @include ct-chart-series-color($color); - } - } - } -} - -@if $ct-include-classes { - @include ct-chart(); - - @if $ct-include-alternative-responsive-containers { - @for $i from 0 to length($ct-scales-names) { - .#{nth($ct-scales-names, $i + 1)} { - @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); - } - } - } -} - - -//Label color Fix for pie chart - -.ct-chart-pie .ct-label, .ct-chart-donut .ct-label { - color: #ffffff; - fill: #ffffff; - font-size: $font-size-base; - font-weight: $font-weight-bold; -} \ No newline at end of file diff --git a/src/scss/volt/vendor/chartist/settings/_chartist-settings.scss b/src/scss/volt/vendor/chartist/settings/_chartist-settings.scss deleted file mode 100755 index 1b88e67..0000000 --- a/src/scss/volt/vendor/chartist/settings/_chartist-settings.scss +++ /dev/null @@ -1,89 +0,0 @@ -// Scales for responsive SVG containers -$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; -$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; - -// Class names to be used when generating CSS -$ct-class-chart: ct-chart !default; -$ct-class-chart-line: ct-chart-line !default; -$ct-class-chart-bar: ct-chart-bar !default; -$ct-class-horizontal-bars: ct-horizontal-bars !default; -$ct-class-chart-pie: ct-chart-pie !default; -$ct-class-chart-donut: ct-chart-donut !default; -$ct-class-label: ct-label !default; -$ct-class-series: ct-series !default; -$ct-class-line: ct-line !default; -$ct-class-point: ct-point !default; -$ct-class-area: ct-area !default; -$ct-class-bar: ct-bar !default; -$ct-class-slice-pie: ct-slice-pie !default; -$ct-class-slice-donut: ct-slice-donut !default; -$ct-class-slice-donut-solid: ct-slice-donut-solid !default; -$ct-class-grid: ct-grid !default; -$ct-class-grid-background: ct-grid-background !default; -$ct-class-vertical: ct-vertical !default; -$ct-class-horizontal: ct-horizontal !default; -$ct-class-start: ct-start !default; -$ct-class-end: ct-end !default; - -// Container ratio -$ct-container-ratio: (1/1.618) !default; - -// Text styles for labels -$ct-text-color: $gray-700 !default; -$ct-text-size: 0.75rem !default; -$ct-text-align: flex-start !default; -$ct-text-justify: flex-start !default; -$ct-text-line-height: 1; -$ct-font-weight:$font-weight-normal; - -// Grid styles -$ct-grid-color: $gray-400 !default; -$ct-grid-dasharray: 1px !default; -$ct-grid-width: 1px !default; -$ct-grid-background-fill: none !default; - -// Line chart properties -$ct-line-width: 3px !default; -$ct-line-dasharray: false !default; -$ct-point-size: 10px !default; -// Line chart point, can be either round or square -$ct-point-shape: round !default; -// Area fill transparency between 0 and 1 -$ct-area-opacity: 0.1 !default; - -// Bar chart bar width -$ct-bar-width: 7px !default; - -// Donut width (If donut width is to big it can cause issues where the shape gets distorted) -$ct-donut-width: 50px !default; - -// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you -// should set this property to false -$ct-include-classes: true !default; - -// If this is set to true the CSS will contain colored series. You can extend or change the color with the -// properties below -$ct-include-colored-series: $ct-include-classes !default; - -// If set to true this will include all responsive container variations using the scales defined at the top of the script -$ct-include-alternative-responsive-containers: $ct-include-classes !default; - -// Series names and colors. This can be extended or customized as desired. Just add more series and colors. -$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; -$ct-series-colors: ( - #FA5252, - #11AB7C, - #f5b759, - #005AD4, - #1E90FF, - #59922b, - #0544d3, - #6b0392, - #f05b4f, - #dda458, - #eacf7d, - #86797d, - #b2c326, - #6188e2, - #a748ca -) !default; From d513dd12607f3abec7c52a81dcf9b62a6c6e3969 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 2 Feb 2021 11:56:51 +0200 Subject: [PATCH 2/5] Improve imports. --- src/scss/custom/_variables.scss | 1 + src/scss/volt.scss | 59 +++++++++++++++++++++++++++------ src/scss/volt/_components.scss | 1 + 3 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 src/scss/custom/_variables.scss diff --git a/src/scss/custom/_variables.scss b/src/scss/custom/_variables.scss new file mode 100644 index 0000000..c094802 --- /dev/null +++ b/src/scss/custom/_variables.scss @@ -0,0 +1 @@ +// $primary: blue; diff --git a/src/scss/volt.scss b/src/scss/volt.scss index 2f52f44..011aaa4 100755 --- a/src/scss/volt.scss +++ b/src/scss/volt.scss @@ -1,7 +1,7 @@ /* ========================================================= -* Volt Free - Bootstrap 5 Dashboard +* Volt - Free Bootstrap 5 Dashboard ========================================================= * Product Page: https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard @@ -17,25 +17,64 @@ @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700&display=swap'); -// Bootstrap mixins and functions -@import "../../node_modules/bootstrap/scss/mixins"; -@import "../../node_modules/bootstrap/scss/functions"; +// update variables here +@import "custom/variables"; -// Change variables here +@import "../../node_modules/bootstrap/scss/functions"; @import "volt/variables"; +// Third party +@import '../../node_modules/vanillajs-datepicker/sass/datepicker.scss'; +@import "../../node_modules/chartist/dist/scss/chartist.scss"; + // Bootstrap -@import "../../node_modules/bootstrap/scss/bootstrap"; +@import "../../node_modules/bootstrap/scss/variables"; +@import "../../node_modules/bootstrap/scss/mixins"; +@import "../../node_modules/bootstrap/scss/utilities"; + +// Bootstrap Layout & components +@import "../../node_modules/bootstrap/scss/root"; +@import "../../node_modules/bootstrap/scss/reboot"; +@import "../../node_modules/bootstrap/scss/type"; +@import "../../node_modules/bootstrap/scss/images"; +@import "../../node_modules/bootstrap/scss/containers"; +@import "../../node_modules/bootstrap/scss/grid"; +@import "../../node_modules/bootstrap/scss/tables"; +@import "../../node_modules/bootstrap/scss/forms"; +@import "../../node_modules/bootstrap/scss/buttons"; +@import "../../node_modules/bootstrap/scss/transitions"; +@import "../../node_modules/bootstrap/scss/dropdown"; +@import "../../node_modules/bootstrap/scss/button-group"; +@import "../../node_modules/bootstrap/scss/nav"; +@import "../../node_modules/bootstrap/scss/navbar"; +@import "../../node_modules/bootstrap/scss/card"; +@import "../../node_modules/bootstrap/scss/accordion"; +@import "../../node_modules/bootstrap/scss/breadcrumb"; +@import "../../node_modules/bootstrap/scss/pagination"; +@import "../../node_modules/bootstrap/scss/badge"; +@import "../../node_modules/bootstrap/scss/alert"; +@import "../../node_modules/bootstrap/scss/progress"; +@import "../../node_modules/bootstrap/scss/list-group"; +@import "../../node_modules/bootstrap/scss/close"; +@import "../../node_modules/bootstrap/scss/toasts"; +@import "../../node_modules/bootstrap/scss/modal"; +@import "../../node_modules/bootstrap/scss/tooltip"; +@import "../../node_modules/bootstrap/scss/popover"; +@import "../../node_modules/bootstrap/scss/carousel"; +@import "../../node_modules/bootstrap/scss/spinners"; + +// Helpers +@import "../../node_modules/bootstrap/scss/helpers"; -// Vendor -@import "volt/vendor"; +// Utilities +@import "../../node_modules/bootstrap/scss/utilities/api"; +// scss-docs-end import-stack // volt mixins & functions @import "volt/mixins"; @import "volt/functions"; // Utilities -@import "volt/reboot"; @import "volt/utilities"; // Layout @@ -44,4 +83,4 @@ // Components @import "volt/components"; -// write your custom styles here! \ No newline at end of file +// write your custom styles here! diff --git a/src/scss/volt/_components.scss b/src/scss/volt/_components.scss index 20aba59..c14b919 100644 --- a/src/scss/volt/_components.scss +++ b/src/scss/volt/_components.scss @@ -1,3 +1,4 @@ +@import "components/body"; @import "components/accordions"; @import "components/alerts"; @import "components/avatars"; From 7e078cf690e424d02ff9fa84acea314b21214a9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 2 Feb 2021 11:56:58 +0200 Subject: [PATCH 3/5] Fix responsive issue. --- src/pages/transactions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/transactions.html b/src/pages/transactions.html index 41ffdd9..5d7ca90 100644 --- a/src/pages/transactions.html +++ b/src/pages/transactions.html @@ -435,7 +435,7 @@

All Orders

-
Showing 5 out of 25 entries
+
Showing 5 out of 25 entries
@@include('./dashboard/_footer.html', { From 25a10cdb2b6b2870fbf3c2eac091da372af13b39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 2 Feb 2021 11:57:17 +0200 Subject: [PATCH 4/5] Gulpfile should look for changes in the new custom folder in SCSS. --- gulpfile.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 8f035ad..a14344e 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -73,7 +73,7 @@ const paths = { // Compile SCSS gulp.task('scss', function () { - return gulp.src([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/volt.scss']) + return gulp.src([paths.src.scss + '/custom/**/*.scss', paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/volt.scss']) .pipe(wait(500)) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) @@ -127,7 +127,7 @@ gulp.task('serve', gulp.series('scss', 'html', 'index', 'assets', 'vendor', func server: paths.temp.base }); - gulp.watch([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/volt.scss'], gulp.series('scss')); + gulp.watch([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/custom/**/*.scss', paths.src.scss + '/volt.scss'], gulp.series('scss')); gulp.watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], gulp.series('html', 'index')); gulp.watch([paths.src.assets], gulp.series('assets')); gulp.watch([paths.src.vendor], gulp.series('vendor')); @@ -193,7 +193,7 @@ gulp.task('clean:dev', function () { // Compile and copy scss/css gulp.task('copy:dist:css', function () { - return gulp.src([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/volt.scss']) + return gulp.src([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/custom/**/*.scss', paths.src.scss + '/volt.scss']) .pipe(wait(500)) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) @@ -205,7 +205,7 @@ gulp.task('copy:dist:css', function () { }); gulp.task('copy:dev:css', function () { - return gulp.src([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/volt.scss']) + return gulp.src([paths.src.scss + '/volt/**/*.scss', paths.src.scss + '/custom/**/*.scss', paths.src.scss + '/volt.scss']) .pipe(wait(500)) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) From 5b9f64bca041a2bf51d21eb584f71ec2ed023fee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 2 Feb 2021 11:58:22 +0200 Subject: [PATCH 5/5] Bump to v1.3.1. --- package-lock.json | 34 +++++++++++++++++----------------- package.json | 4 ++-- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index cba8fe4..558c22a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "volt-premium-bootstrap-5-dashboard", - "version": "1.2.0", + "name": "@themesberg/volt-bootstrap-5-dashboard", + "version": "1.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -716,16 +716,16 @@ } }, "browserslist": { - "version": "4.16.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz", - "integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==", + "version": "4.16.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz", + "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001173", + "caniuse-lite": "^1.0.30001181", "colorette": "^1.2.1", - "electron-to-chromium": "^1.3.634", + "electron-to-chromium": "^1.3.649", "escalade": "^3.1.1", - "node-releases": "^1.1.69" + "node-releases": "^1.1.70" } }, "bs-recipes": { @@ -825,9 +825,9 @@ "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=" }, "caniuse-lite": { - "version": "1.0.30001181", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz", - "integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==", + "version": "1.0.30001183", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz", + "integrity": "sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==", "dev": true }, "caseless": { @@ -1455,9 +1455,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.649", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.649.tgz", - "integrity": "sha512-ojGDupQ3UMkvPWcTICe4JYe17+o9OLiFMPoduoR72Zp2ILt1mRVeqnxBEd6s/ptekrnsFU+0A4lStfBe/wyG/A==", + "version": "1.3.650", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.650.tgz", + "integrity": "sha512-j6pRuNylFBbroG6NB8Lw/Im9oDY74s2zWHBP5TmdYg73cBuL6cz//SMgolVa0gIJk/DSL+kO7baJ1DSXW1FUZg==", "dev": true }, "emoji-regex": { @@ -5954,9 +5954,9 @@ } }, "source-map-url": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", - "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz", + "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==", "dev": true }, "sparkles": { diff --git a/package.json b/package.json index 8d1ac0c..3dab20d 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@themesberg/volt-bootstrap-5-dashboard", - "version": "1.3.0", + "version": "1.3.1", "description": "Volt - Bootstrap 5 Dashboard", "main": "gulpfile.js", "author": "Themesberg", @@ -61,4 +61,4 @@ "vanillajs-datepicker": "^1.0.3", "waypoints": "4.0.1" } -} \ No newline at end of file +}