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))
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
+}
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', {
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";
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;