From 2ee5d6c7be0d560e5358bd3581c6f59a04fc8a58 Mon Sep 17 00:00:00 2001 From: mbrambilla Date: Fri, 31 Mar 2023 17:23:35 -0400 Subject: [PATCH 1/5] Update to `sass`, drop `node-sass` support Kind of a first pass, but it is working. - Switched from outgoing @import to using the @use and @forward - Had to break out some settings into new files, and consolidate the `$enable-*` into the `_settings-options.scss` file deal with loop. May want to revisit this. --- Gruntfile.js | 5 +- package.json | 2 +- scss/_forms.scss | 16 +- scss/_functions.scss | 12 +- scss/_mixins.scss | 56 +++--- scss/_settings-colors.scss | 55 ++++++ scss/_settings-encode.scss | 8 + scss/_settings-options.scss | 18 ++ scss/_settings.scss | 303 +++++++++++------------------ scss/_utilities.scss | 44 ++--- scss/component/_alert.scss | 59 +++--- scss/component/_animation.scss | 14 +- scss/component/_badge.scss | 45 +++-- scss/component/_breadcrumb.scss | 23 ++- scss/component/_button-group.scss | 64 +++--- scss/component/_card.scss | 266 ++++++++++++------------- scss/component/_caret.scss | 26 +-- scss/component/_close.scss | 19 +- scss/component/_container.scss | 24 ++- scss/component/_drag.scss | 19 +- scss/component/_dropdown.scss | 116 ++++++----- scss/component/_grid.scss | 25 ++- scss/component/_input-group.scss | 65 ++++--- scss/component/_jumbotron.scss | 25 ++- scss/component/_list.scss | 208 ++++++++++---------- scss/component/_loader.scss | 25 +-- scss/component/_media.scss | 9 +- scss/component/_modal.scss | 186 +++++++++--------- scss/component/_nav.scss | 93 +++++---- scss/component/_navbar.scss | 207 ++++++++++---------- scss/component/_offcanvas.scss | 97 ++++----- scss/component/_pagination.scss | 79 ++++---- scss/component/_placeholder.scss | 19 +- scss/component/_popover.scss | 150 +++++++------- scss/component/_progress.scss | 44 +++-- scss/component/_tooltip.scss | 88 +++++---- scss/core/_buttons.scss | 137 +++++++------ scss/core/_code.scss | 52 ++--- scss/core/_images.scss | 35 ++-- scss/core/_print.scss | 13 +- scss/core/_reboot.scss | 106 +++++----- scss/core/_root.scss | 22 ++- scss/core/_tables.scss | 121 ++++++------ scss/core/_typography.scss | 46 +++-- scss/figuration.scss | 82 ++++---- scss/forms/_form-check.scss | 191 +++++++++--------- scss/forms/_form-color.scss | 32 +-- scss/forms/_form-control.scss | 138 +++++++------ scss/forms/_form-file.scss | 121 ++++++------ scss/forms/_form-label.scss | 36 ++-- scss/forms/_form-layout.scss | 36 ++-- scss/forms/_form-range.scss | 55 +++--- scss/forms/_form-validation.scss | 10 +- scss/functions/_assert.scss | 15 +- scss/functions/_color-util.scss | 72 ++++--- scss/functions/_map-util.scss | 32 +-- scss/functions/_math.scss | 28 +-- scss/functions/_rem-calc.scss | 25 ++- scss/functions/_str-util.scss | 22 ++- scss/mixins/_alert.scss | 7 +- scss/mixins/_border.scss | 51 ++--- scss/mixins/_box-shadow.scss | 16 +- scss/mixins/_breakpoints.scss | 37 ++-- scss/mixins/_buttons.scss | 88 +++++---- scss/mixins/_caret.scss | 12 +- scss/mixins/_containers.scss | 4 +- scss/mixins/_divider.scss | 6 +- scss/mixins/_font-size.scss | 67 ++++--- scss/mixins/_forms.scss | 170 ++++++++-------- scss/mixins/_grid.scss | 49 +++-- scss/mixins/_lists.scss | 7 +- scss/mixins/_modal.scss | 12 +- scss/mixins/_pagination.scss | 12 +- scss/mixins/_reset-text.scss | 8 +- scss/mixins/_switch.scss | 14 +- scss/mixins/_tables.scss | 4 +- scss/mixins/_text-emphasis.scss | 13 +- scss/mixins/_transition.scss | 16 +- scss/utilities/_background.scss | 37 ++-- scss/utilities/_border.scss | 81 ++++---- scss/utilities/_clearfix.scss | 7 +- scss/utilities/_display.scss | 24 ++- scss/utilities/_embed.scss | 18 +- scss/utilities/_flex.scss | 30 +-- scss/utilities/_float.scss | 19 +- scss/utilities/_interaction.scss | 6 +- scss/utilities/_link.scss | 9 +- scss/utilities/_opacity.scss | 7 +- scss/utilities/_orientation.scss | 11 +- scss/utilities/_overflow.scss | 7 +- scss/utilities/_position.scss | 78 ++++---- scss/utilities/_screen-reader.scss | 35 ++-- scss/utilities/_shadow.scss | 11 +- scss/utilities/_sizing.scss | 15 +- scss/utilities/_spacing.scss | 46 +++-- scss/utilities/_stack.scss | 8 +- scss/utilities/_typography.scss | 94 +++++---- scss/utilities/_valign.scss | 12 +- scss/utilities/_visibility.scss | 9 +- scss/utilities/_vr.scss | 8 +- 100 files changed, 2797 insertions(+), 2309 deletions(-) create mode 100644 scss/_settings-colors.scss create mode 100644 scss/_settings-encode.scss diff --git a/Gruntfile.js b/Gruntfile.js index b065aa9fb4..822450fc9f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -27,10 +27,7 @@ module.exports = function(grunt) { var autoprefixer = require('autoprefixer'); var flexbugs = require('postcss-flexbugs-fixes'); var calc = require('postcss-calc'); - var sass = require('node-sass'); - if (process.env.DART_SASS === 'true') { - sass = require('sass'); - } + var sass = require('sass'); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), diff --git a/package.json b/package.json index 6921861b35..8cc8e80987 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,6 @@ "markdown-it": "^13.0.1", "markdown-it-anchor": "^8.6.6", "markdown-it-attrs": "^4.1.6", - "node-sass": "^8.0.0", "npm-run-all": "^4.1.5", "popper.js": "^1.16.1", "postcss": "^8.4.21", @@ -95,6 +94,7 @@ "postcss-flexbugs-fixes": "^5.0.2", "prismjs": "^1.29.0", "qunit": "^2.19.4", + "sass": "^1.60.0", "shelljs": "^0.8.5", "shx": "^0.3.4", "slugify": "^1.6.5", diff --git a/scss/_forms.scss b/scss/_forms.scss index 49b8ecfa88..46fff67dbf 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,8 +1,8 @@ -@import "forms/form-control"; -@import "forms/form-label"; -@import "forms/form-check"; -@import "forms/form-file"; -@import "forms/form-range"; -@import "forms/form-color"; -@import "forms/form-layout"; -@import "forms/form-validation"; +@use "forms/form-control"; +@use "forms/form-label"; +@use "forms/form-check"; +@use "forms/form-file"; +@use "forms/form-range"; +@use "forms/form-color"; +@use "forms/form-layout"; +@use "forms/form-validation"; diff --git a/scss/_functions.scss b/scss/_functions.scss index e88fd0d393..dac59dd36f 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -1,6 +1,6 @@ -@import "functions/math"; -@import "functions/assert"; -@import "functions/rem-calc"; -@import "functions/str-util"; -@import "functions/map-util"; -@import "functions/color-util"; +@use "functions/math"; +@use "functions/assert"; +@use "functions/rem-calc"; +@use "functions/str-util"; +@use "functions/map-util"; +@use "functions/color-util"; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 438e1a441e..f45330692d 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,36 +1,36 @@ // Toggles // Used in conjunction with global variables to enable certain theme features. -@import "mixins/box-shadow"; -@import "mixins/font-size"; -@import "mixins/gradients"; -@import "mixins/transition"; +@use "mixins/box-shadow"; +@use "mixins/font-size"; +@use "mixins/gradients"; +@use "mixins/transition"; // Utilities -@import "mixins/border"; -@import "mixins/breakpoints"; -@import "mixins/hover"; -@import "mixins/images"; -@import "mixins/screen-reader"; -@import "mixins/reset-text"; -@import "mixins/text-emphasis"; -@import "mixins/text-truncate"; -@import "mixins/visibility"; +@use "mixins/border"; +@use "mixins/breakpoints"; +@use "mixins/hover"; +@use "mixins/images"; +@use "mixins/screen-reader"; +@use "mixins/reset-text"; +@use "mixins/text-emphasis"; +@use "mixins/text-truncate"; +@use "mixins/visibility"; // Components -@import "mixins/alert"; -@import "mixins/backdrop"; -@import "mixins/buttons"; -@import "mixins/caret"; -@import "mixins/divider"; -@import "mixins/forms"; -@import "mixins/lists"; -@import "mixins/pagination"; -@import "mixins/switch"; -@import "mixins/tables"; -@import "mixins/modal"; +@use "mixins/alert"; +@use "mixins/backdrop"; +@use "mixins/buttons"; +@use "mixins/caret"; +@use "mixins/divider"; +@use "mixins/forms"; +@use "mixins/lists"; +@use "mixins/pagination"; +@use "mixins/switch"; +@use "mixins/tables"; +@use "mixins/modal"; // Layout -@import "mixins/clearfix"; -@import "mixins/containers"; -@import "mixins/grid"; -@import "mixins/float"; +@use "mixins/clearfix"; +@use "mixins/containers"; +@use "mixins/grid"; +@use "mixins/float"; diff --git a/scss/_settings-colors.scss b/scss/_settings-colors.scss new file mode 100644 index 0000000000..3be870a691 --- /dev/null +++ b/scss/_settings-colors.scss @@ -0,0 +1,55 @@ +// Contrast +// ==== +// Minimum contrast ratio - WCAG 2.1 level AA spec +// WCAG 2.1 values are 3, 4.5, or 7 +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$color-contrast-min-ratio: 4.5 !default; +$color-contrast-base-light: #fff !default; +$color-contrast-base-dark: #000 !default; + +// Palette +// ===== +// List of levels to build CSS out for each of the palette themes +// Valid levels 0-1000 +$palette-levels: 50 100 200 300 400 500 600 700 800 900 !default; + +// Percentage value per level to mix against white or black +// Darker levels (>500) get narrower step interval than lighter +// Values must be <= .2% +$palette-interval-light: .2% !default; +$palette-interval-dark: .15% !default; + + +// Palette levels for use in _mix-context-colors() to determine +// standardized contextual color mapping. +// Special values: +// - level < 0 = #fff +// - level > 1000 = #000 +$level-control: ( + "bg": 500, + "color": -1, + "border-color": 600, + "hover-bg": 600, + "hover-color": -1, + "hover-border-color": 700, + "active-bg": 700, + "active-color": -1, + "active-border-color": 700 +) !default; + +$level-context: ( + "bg": 100, + "color": 800, + "border-color": 200, + "hover-bg": 200, + "hover-color": 900, + "hover-border-color": 300, + "active-bg": 300, + "active-color": 900, + "active-border-color": 300 +) !default; + + +// Increase (or decrease with negative number) to alter color for the hover state of +// `.text-{color}-(palette-level}` utilities +$level-delta-hover-color: 100 !default; diff --git a/scss/_settings-encode.scss b/scss/_settings-encode.scss new file mode 100644 index 0000000000..f1720fbf5e --- /dev/null +++ b/scss/_settings-encode.scss @@ -0,0 +1,8 @@ +// Characters to encode for SVG data URLs, used by `encode-svg()` SCSS function +$encode-svg-chars: ( + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29") +) !default; diff --git a/scss/_settings-options.scss b/scss/_settings-options.scss index 33a96030c0..c7828616bf 100644 --- a/scss/_settings-options.scss +++ b/scss/_settings-options.scss @@ -1,3 +1,21 @@ +// Options +// ===== +// Quickly modify global styling by enabling or disabling optional features. +$enable-rounded: true !default; // true +$enable-shadows: false !default; // false +$enable-transitions: true !default; // true +$enable-transitions-reduced: true !default; // true +$enable-smooth-scroll: true !default; // true +$enable-grid-classes: true !default; // true +$enable-print-styles: true !default; // true +$enable-palette: true !default; // true +$enable-sizing: true !default; // true +$enable-bp-smallest: false !default; // false +$enable-rfs-fluid: false !default; // false +$enable-rfs-scale: false !default; // false +$enable-color-warnings: false !default; // false + + // Root CSS variables $enable-root: true !default; $enable-root-colors: true !default; diff --git a/scss/_settings.scss b/scss/_settings.scss index 4550f24a5c..d142778063 100644 --- a/scss/_settings.scss +++ b/scss/_settings.scss @@ -1,81 +1,19 @@ +@use "sass:map"; +@use "sass:math"; +@use "sass:string"; +@use "functions/assert"; +@use "functions/color-util"; +@use "functions/map-util"; +@use "functions/math" as functions-math; +@use "functions/rem-calc"; +@use "functions/str-util"; +@use "settings-colors"; +@use "settings-options"; + // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. // https://github.com/iconic/open-iconic -// Options -// ===== -// Quickly modify global styling by enabling or disabling optional features. -$enable-rounded: true !default; // true -$enable-shadows: false !default; // false -$enable-transitions: true !default; // true -$enable-transitions-reduced: true !default; // true -$enable-smooth-scroll: true !default; // true -$enable-grid-classes: true !default; // true -$enable-print-styles: true !default; // true -$enable-palette: true !default; // true -$enable-sizing: true !default; // true -$enable-bp-smallest: false !default; // false -$enable-rfs-fluid: false !default; // false -$enable-rfs-scale: false !default; // false -$enable-color-warnings: false !default; // false - - -// Characters to encode for SVG data URLs, used by `encode-svg()` SCSS function -$encode-svg-chars: ( - ("<", "%3c"), - (">", "%3e"), - ("#", "%23"), - ("(", "%28"), - (")", "%29") -) !default; - - -// Palette -// ===== -// List of levels to build CSS out for each of the palette themes -// Valid levels 0-1000 -$palette-levels: 50 100 200 300 400 500 600 700 800 900 !default; - -// Percentage value per level to mix against white or black -// Darker levels (>500) get narrower step interval than lighter -// Values must be <= .2% -$palette-interval-light: .2% !default; -$palette-interval-dark: .15% !default; - -// Palette levels for use in _mix-context-colors() to determine -// standardized contextual color mapping. -// Special values: -// level < 0 = #fff -// level > 1000 = #000 -$level-control: ( - "bg": 500, - "color": -1, - "border-color": 600, - "hover-bg": 600, - "hover-color": -1, - "hover-border-color": 700, - "active-bg": 700, - "active-color": -1, - "active-border-color": 700 -) !default; - -$level-context: ( - "bg": 100, - "color": 800, - "border-color": 200, - "hover-bg": 200, - "hover-color": 900, - "hover-border-color": 300, - "active-bg": 300, - "active-color": 900, - "active-border-color": 300 -) !default; - - -// Increase (or decrease with negative number) to alter color for the hover state of -// `.text-{color}-(palette-level}` utilities -$level-delta-hover-color: 100 !default; - // Colors // ===== @@ -91,16 +29,16 @@ $cyan: #1680a4 !default; $yellow: #f8c223 !default; // Base UI Scale -$uibase-50: palette($uibase, 50) !default; -$uibase-100: palette($uibase, 100) !default; -$uibase-200: palette($uibase, 200) !default; -$uibase-300: palette($uibase, 300) !default; -$uibase-400: palette($uibase, 400) !default; -$uibase-500: palette($uibase, 500) !default; -$uibase-600: palette($uibase, 600) !default; -$uibase-700: palette($uibase, 700) !default; -$uibase-800: palette($uibase, 800) !default; -$uibase-900: palette($uibase, 900) !default; +$uibase-50: color-util.palette($uibase, 50) !default; +$uibase-100: color-util.palette($uibase, 100) !default; +$uibase-200: color-util.palette($uibase, 200) !default; +$uibase-300: color-util.palette($uibase, 300) !default; +$uibase-400: color-util.palette($uibase, 400) !default; +$uibase-500: color-util.palette($uibase, 500) !default; +$uibase-600: color-util.palette($uibase, 600) !default; +$uibase-700: color-util.palette($uibase, 700) !default; +$uibase-800: color-util.palette($uibase, 800) !default; +$uibase-900: color-util.palette($uibase, 900) !default; // Color Variables $primary: $blue !default; @@ -109,8 +47,8 @@ $info: $cyan !default; $success: $green !default; $warning: $yellow !default; $danger: $red !default; -$light: palette($uibase, 50) !default; -$dark: palette($uibase, 800) !default; +$light: color-util.palette($uibase, 50) !default; +$dark: color-util.palette($uibase, 800) !default; // Base Color Map - used for generating contextual variants $base-colors: ( @@ -137,17 +75,10 @@ $palette-colors: ( "gray": $gray ) !default; -// Color Contrast -// ===== -// Minimum contrast ratio - WCAG 2.1 level AA spec -$color-contrast-min-ratio: 4.5 !default; -$color-contrast-base-light: $white !default; -$color-contrast-base-dark: $uibase-900 !default; - // Component Color Variants and Levels // ===== -$root-colors: map-merge($base-colors, $palette-colors) !default; +$root-colors: map.merge($base-colors, $palette-colors) !default; $alert-colors: $base-colors !default; $btn-colors: $base-colors !default; $btn-outline-colors: $base-colors !default; @@ -158,11 +89,11 @@ $utility-bgtext-colors: $base-colors !default; $utility-border-colors: $base-colors !default; $utility-text-colors: $base-colors !default; -$alert-levels: $level-context !default; -$btn-levels: $level-control !default; -$btn-outline-levels: $level-control !default; -$list-levels: $level-context !default; -$table-levels: $level-context !default; +$alert-levels: settings-colors.$level-context !default; +$btn-levels: settings-colors.$level-control !default; +$btn-outline-levels: settings-colors.$level-control !default; +$list-levels: settings-colors.$level-context !default; +$table-levels: settings-colors.$level-context !default; // Component Theme Initialization @@ -256,17 +187,17 @@ $border-widths: ( // If only one breakpoint is desired, use: $grid-breakpoints: (xs: 0); $grid-breakpoints: ( xs: 0, - sm: bp-to-em(576px), - md: bp-to-em(768px), - lg: bp-to-em(992px), - xl: bp-to-em(1200px) + sm: rem-calc.bp-to-em(576px), + md: rem-calc.bp-to-em(768px), + lg: rem-calc.bp-to-em(992px), + xl: rem-calc.bp-to-em(1200px) ) !default; // stylelint-disable-next-line scss/dollar-variable-default -$grid-breakpoints: map-sort-by-values($grid-breakpoints); +$grid-breakpoints: map-util.map-sort-by-values($grid-breakpoints); -@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); +@include assert.assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include assert.assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); // Component and utility breakpoints // ===== @@ -274,43 +205,43 @@ $grid-breakpoints: map-sort-by-values($grid-breakpoints); // of breakpoint keys based upon the master `$grid-breakpoints` map. // This way each the CSS for each of the items can be controlled and reduced as needed. // The items in the following lists *must* be in the keys for the `$grid-breakpoints` map. -$responsive-container-breakpoints: map-keys($grid-breakpoints) !default; -$responsive-gutter-breakpoints: map-keys($grid-breakpoints) !default; -$row-columns-breakpoints: map-keys($grid-breakpoints) !default; -$card-horizontal-breakpoints: map-keys($grid-breakpoints) !default; -$card-deck-breakpoints: map-keys($grid-breakpoints) !default; -$card-group-breakpoints: map-keys($grid-breakpoints) !default; -$card-columns-breakpoints: map-keys($grid-breakpoints) !default; -$navbar-expand-breakpoints: map-keys($grid-breakpoints) !default; -$offcanvas-breakpoints: map-keys($grid-breakpoints) !default; -$table-scroll-breakpoints: map-keys($grid-breakpoints) !default; -$modal-fullscreen-breakpoints: map-keys($grid-breakpoints) !default; -$utility-border-breakpoints: map-keys($grid-breakpoints) !default; -$utility-display-breakpoints: map-keys($grid-breakpoints) !default; -$utility-flex-breakpoints: map-keys($grid-breakpoints) !default; -$utility-float-breakpoints: map-keys($grid-breakpoints) !default; -$utility-position-breakpoints: map-keys($grid-breakpoints) !default; -$utility-sticky-top-breakpoints: map-keys($grid-breakpoints) !default; -$utility-sticky-bottom-breakpoints: map-keys($grid-breakpoints) !default; +$responsive-container-breakpoints: map.keys($grid-breakpoints) !default; +$responsive-gutter-breakpoints: map.keys($grid-breakpoints) !default; +$row-columns-breakpoints: map.keys($grid-breakpoints) !default; +$card-horizontal-breakpoints: map.keys($grid-breakpoints) !default; +$card-deck-breakpoints: map.keys($grid-breakpoints) !default; +$card-group-breakpoints: map.keys($grid-breakpoints) !default; +$card-columns-breakpoints: map.keys($grid-breakpoints) !default; +$navbar-expand-breakpoints: map.keys($grid-breakpoints) !default; +$offcanvas-breakpoints: map.keys($grid-breakpoints) !default; +$table-scroll-breakpoints: map.keys($grid-breakpoints) !default; +$modal-fullscreen-breakpoints: map.keys($grid-breakpoints) !default; +$utility-border-breakpoints: map.keys($grid-breakpoints) !default; +$utility-display-breakpoints: map.keys($grid-breakpoints) !default; +$utility-flex-breakpoints: map.keys($grid-breakpoints) !default; +$utility-float-breakpoints: map.keys($grid-breakpoints) !default; +$utility-position-breakpoints: map.keys($grid-breakpoints) !default; +$utility-sticky-top-breakpoints: map.keys($grid-breakpoints) !default; +$utility-sticky-bottom-breakpoints: map.keys($grid-breakpoints) !default; $utility-placement-breakpoints: "xs" !default; $utility-translate-breakpoints: "xs" !default; -$utility-screen-reader-breakpoints: map-keys($grid-breakpoints) !default; -$utility-spacing-breakpoints: map-keys($grid-breakpoints) !default; -$utility-text-align-breakpoints: map-keys($grid-breakpoints) !default; -$utility-text-size-breakpoints: map-keys($grid-breakpoints) !default; -$utility-valign-breakpoints: map-keys($grid-breakpoints) !default; +$utility-screen-reader-breakpoints: map.keys($grid-breakpoints) !default; +$utility-spacing-breakpoints: map.keys($grid-breakpoints) !default; +$utility-text-align-breakpoints: map.keys($grid-breakpoints) !default; +$utility-text-size-breakpoints: map.keys($grid-breakpoints) !default; +$utility-valign-breakpoints: map.keys($grid-breakpoints) !default; // Grid containers // ===== // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( - sm: rem(544px), - md: rem(720px), - lg: rem(960px), - xl: rem(1152px) + sm: rem-calc.rem(544px), + md: rem-calc.rem(720px), + lg: rem-calc.rem(960px), + xl: rem-calc.rem(1152px) ) !default; -@include _assert-ascending($container-max-widths, "$container-max-widths"); +@include assert.assert-ascending($container-max-widths, "$container-max-widths"); // Grid @@ -355,7 +286,7 @@ $body-text-align: null !default; // Style anchor elements $link-color: $primary !default; $link-decoration: underline !default; -$link-hover-color: palette($primary, 700) !default; +$link-hover-color: color-util.palette($primary, 700) !default; $link-hover-decoration: null !default; $link-stretch-pseudo-element: after !default; @@ -481,7 +412,7 @@ $responsive-font-size-generate-static: false !default; // Ratioed Responsive Typography // Fluidly scales font size ratio by viewport dimension. -$responsive-font-size-fluid-breakpoint: bp-to-em(1200px) !default; +$responsive-font-size-fluid-breakpoint: rem-calc.bp-to-em(1200px) !default; $responsive-font-size-fluid-factor: 5 !default; $responsive-font-size-fluid-two-dimensional: false !default; @@ -508,8 +439,8 @@ $component-action-color: $uibase-700 !default; $component-action-hover-color: $uibase-800 !default; $component-active-bg: $primary !default; -$component-active-color: color-if-contrast($white, $primary) !default; -$component-active-border-color: palette($primary, 600) !default; +$component-active-color: color-util.color-if-contrast($white, $primary) !default; +$component-active-border-color: color-util.palette($primary, 600) !default; $component-disabled-color: $uibase-300 !default; $component-disabled-bg: transparent !default; @@ -631,7 +562,7 @@ $thumbnail-box-shadow: 0 .0625rem .125rem rgba($black, .075) !default; // Fluid embed // ===== -$embed-fluid-default-ratio: percentage(divide(9, 16)) !default; +$embed-fluid-default-ratio: math.percentage(functions-math.divide(9, 16)) !default; $embed-fluid-aspect-ratios: ( "21x9": ( x: 21, @@ -656,7 +587,7 @@ $embed-fluid-aspect-ratios: ( $code-font-size: .875em !default; $code-padding-x: null !default; $code-padding-y: null !default; -$code-color: palette($red, 550) !default; +$code-color: color-util.palette($red, 550) !default; $code-bg: null !default; $code-border-radius: null !default; @@ -767,14 +698,14 @@ $btn-block-spacing-y: .25rem !default; $btn-icon-multiplier: .5 !default; $btn-default-bg: $white !default; -$btn-default-color: color-if-contrast($uibase-500, $btn-default-bg) !default; +$btn-default-color: color-util.color-if-contrast($uibase-500, $btn-default-bg) !default; $btn-default-border-color: $uibase-300 !default; $btn-default-focus-box-shadow-color: $component-active-bg !default; $btn-default-hover-bg: $uibase-50 !default; -$btn-default-hover-color: color-if-contrast($uibase-600, $btn-default-hover-bg) !default; +$btn-default-hover-color: color-util.color-if-contrast($uibase-600, $btn-default-hover-bg) !default; $btn-default-hover-border-color: $uibase-400 !default; $btn-default-active-bg: $uibase-200 !default; -$btn-default-active-color: color-if-contrast($btn-default-hover-color, $btn-default-active-bg) !default; +$btn-default-active-color: color-util.color-if-contrast($btn-default-hover-color, $btn-default-active-bg) !default; $btn-default-active-border-color: $uibase-400 !default; $btn-default-disabled-bg: $btn-default-bg !default; $btn-default-disabled-color: $btn-default-color !default; @@ -805,11 +736,11 @@ $input-color: $uibase-700 !default; $input-border-color: $uibase-200 !default; $input-border-width: $border-width !default; $input-border-radius: $border-radius !default; -$input-box-shadow: map-get($shadows, "i1") !default; +$input-box-shadow: map.get($shadows, "i1") !default; $input-focus-bg: $input-bg !default; $input-focus-color: $input-color !default; -$input-focus-border-color: palette($primary, 300) !default; +$input-focus-border-color: color-util.palette($primary, 300) !default; $input-focus-box-shadow-size: 0 0 0 .1875rem !default; $input-focus-box-shadow-alpha: .35 !default; $input-focus-box-shadow: $input-focus-box-shadow-size rgba($component-active-bg, $input-focus-box-shadow-alpha) !default; @@ -851,12 +782,12 @@ $form-check-label-disabled-opacity: .6 !default; // Form checkradio $form-checkradio-size: 1em !default; -$form-checkradio-gutter: add($form-checkradio-size, .375em) !default; +$form-checkradio-gutter: functions-math.add($form-checkradio-size, .375em) !default; $form-checkradio-bg: $white !default; $form-checkradio-border-width: $border-width !default; $form-checkradio-border-color: $uibase-300 !default; -$form-checkradio-box-shadow: map-get($shadows, "i1") !default; -$form-checkradio-icon-size: subtract($form-checkradio-size, .375em) !default; +$form-checkradio-box-shadow: map.get($shadows, "i1") !default; +$form-checkradio-icon-size: functions-math.subtract($form-checkradio-size, .375em) !default; $form-checkradio-focus-border-color: $input-focus-border-color !default; $form-checkradio-focus-box-shadow: $input-focus-box-shadow !default; @@ -864,28 +795,28 @@ $form-checkradio-focus-box-shadow: $input-focus-box-shadow !default; $form-checkradio-checked-bg: $primary !default; $form-checkradio-checked-color: $white !default; $form-checkradio-checked-border-color: $primary !default; -$form-checkradio-checked-box-shadow: map-get($shadows, "i1") !default; +$form-checkradio-checked-box-shadow: map.get($shadows, "i1") !default; $form-checkradio-checkbox-border-radius: .25rem !default; -$form-checkradio-checkbox-icon: encode-svg(url("data:image/svg+xml,")) !default; +$form-checkradio-checkbox-icon: str-util.encode-svg(url("data:image/svg+xml,")) !default; $form-checkradio-radio-border-radius: 50% !default; -$form-checkradio-radio-icon: encode-svg(url("data:image/svg+xml,")) !default; +$form-checkradio-radio-icon: str-util.encode-svg(url("data:image/svg+xml,")) !default; $form-checkradio-indeterminate-bg: $primary !default; $form-checkradio-indeterminate-border-color: $form-checkradio-indeterminate-bg !default; -$form-checkradio-indeterminate-icon: encode-svg(url("data:image/svg+xml,")) !default; +$form-checkradio-indeterminate-icon: str-util.encode-svg(url("data:image/svg+xml,")) !default; // Form switch $form-switch-width: 1.75em !default; -$form-switch-gutter: add($form-switch-width, .375em) !default; +$form-switch-gutter: functions-math.add($form-switch-width, .375em) !default; $form-switch-track-height: 1em !default; $form-switch-track-bg: $white !default; $form-switch-track-border-width: $input-border-width !default; $form-switch-track-border-color: $uibase-300 !default; $form-switch-track-border-radius: 1em !default; -$form-switch-track-box-shadow: map-get($shadows, "i1") !default; +$form-switch-track-box-shadow: map.get($shadows, "i1") !default; $form-switch-track-focus-bg: null !default; $form-switch-track-focus-border-color: $input-focus-border-color !default; @@ -895,7 +826,7 @@ $form-switch-track-checked-bg: $white !default; $form-switch-track-checked-border-color: $primary !default; $form-switch-track-checked-box-shadow: $form-switch-track-box-shadow !default; -$form-switch-thumb-offset: subtract(.25em, $form-switch-track-border-width) !default; +$form-switch-thumb-offset: functions-math.subtract(.25em, $form-switch-track-border-width) !default; $form-switch-thumb-width: .625em !default; $form-switch-thumb-height: .625em !default; $form-switch-thumb-bg: $uibase-300 !default; @@ -904,7 +835,7 @@ $form-switch-thumb-border-color: $form-switch-thumb-bg !default; $form-switch-thumb-border-radius: 50% !default; $form-switch-thumb-box-shadow: none !default; -$form-switch-thumb-focus-bg: palette($primary, 300) !default; +$form-switch-thumb-focus-bg: color-util.palette($primary, 300) !default; $form-switch-thumb-focus-border-color: $form-switch-thumb-focus-bg !default; $form-switch-thumb-focus-box-shadow: null !default; @@ -917,16 +848,16 @@ $form-select-indicator-offset: .375em !default; $form-select-indicator-width: .75em !default; $form-select-indicator-height: .75em !default; $form-select-indicator-color: rgba($uibase-700, .85) !default; -$form-select-indicator-image: encode-svg(url("data:image/svg+xml,")) !default; +$form-select-indicator-image: str-util.encode-svg(url("data:image/svg+xml,")) !default; $form-select-indicator-position: right $form-select-indicator-offset center !default; // Form file $form-file-button-bg: $uibase-50 !default; -$form-file-button-color: color-if-contrast($uibase-600, $form-file-button-bg) !default; +$form-file-button-color: color-util.color-if-contrast($uibase-600, $form-file-button-bg) !default; $form-file-button-font-family: $btn-font-family !default; $form-file-button-font-weight: $btn-font-weight !default; $form-file-button-hover-bg: $uibase-100 !default; -$form-file-button-hover-color: color-if-contrast($uibase-600, $form-file-button-hover-bg) !default; +$form-file-button-hover-color: color-util.color-if-contrast($uibase-600, $form-file-button-hover-bg) !default; $form-file-button-disabled-color: $component-disabled-color !default; $form-file-button-disabled-bg: $uibase-50 !default; $form-file-button-disabled-opacity: 1 !default; @@ -937,20 +868,20 @@ $form-range-track-cursor: pointer !default; $form-range-track-bg: $uibase-100 !default; $form-range-track-border: 0 !default; $form-range-track-border-radius: $form-range-track-height !default; -$form-range-track-box-shadow: map-get($shadows, "i1") !default; +$form-range-track-box-shadow: map.get($shadows, "i1") !default; $form-range-thumb-width: 1.125em !default; $form-range-thumb-height: $form-range-thumb-width !default; $form-range-thumb-bg: $primary !default; $form-range-thumb-border: 0 !default; $form-range-thumb-border-radius: 50% !default; -$form-range-thumb-box-shadow: map-get($shadows, "d1") !default; +$form-range-thumb-box-shadow: map.get($shadows, "d1") !default; $form-range-thumb-focus-box-shadow: $input-focus-box-shadow !default; $form-range-thumb-focus-box-shadow-width: .1875rem !default; -$form-range-thumb-active-bg: palette($primary, 600) !default; +$form-range-thumb-active-bg: color-util.palette($primary, 600) !default; $form-range-thumb-disabled-bg: $uibase-300 !default; -$form-range-height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2) !default; +$form-range-height: functions-math.add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2) !default; $form-range-min-width: 8rem !default; // Browser default seems to be 129px/~8rem for IE/Chrome/Safari // Form validation @@ -958,19 +889,19 @@ $form-range-min-width: 8rem !default; // Browser default seems to // Icons from OpenIconic: https://github.com/iconic/open-iconic $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $form-text-font-size !default; -$form-feedback-valid-color: map-get($base-colors, "success") !default; -$form-feedback-invalid-color: map-get($base-colors, "danger") !default; +$form-feedback-valid-color: map.get($base-colors, "success") !default; +$form-feedback-invalid-color: map.get($base-colors, "danger") !default; $form-feedback-icon-offset: .25em !default; $form-feedback-icon-width: 1em !default; $form-feedback-icon-height: 1em !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; -$form-feedback-icon-valid-image: encode-svg(url("data:image/svg+xml,")) !default; +$form-feedback-icon-valid-image: str-util.encode-svg(url("data:image/svg+xml,")) !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid-image: encode-svg(url("data:image/svg+xml,")) !default; +$form-feedback-icon-invalid-image: str-util.encode-svg(url("data:image/svg+xml,")) !default; -$form-feedback-select-icon-position: right add($form-feedback-icon-offset, add($form-select-indicator-width, $form-select-indicator-offset, false)) center !default; +$form-feedback-select-icon-position: right functions-math.add($form-feedback-icon-offset, functions-math.add($form-select-indicator-width, $form-select-indicator-offset, false)) center !default; $form-validation-states: ( "valid": ( @@ -1000,7 +931,7 @@ $progress-height: 1rem !default; $progress-font-size: ($font-size-base * .75) !default; $progress-bg: $uibase-100 !default; $progress-border-radius: $border-radius !default; -$progress-box-shadow: map-get($shadows, "i1") !default; +$progress-box-shadow: map.get($shadows, "i1") !default; $progress-bar-color: $white !default; $progress-bar-bg: $uibase-300 !default; $progress-bar-animation-timing: 1s linear infinite !default; @@ -1016,7 +947,7 @@ $breadcrumb-active-color: $uibase-700 !default; $breadcrumb-item-padding-x: .5rem !default; $breadcrumb-divider-color: $uibase-300 !default; -$breadcrumb-divider: quote("/") !default; +$breadcrumb-divider: string.quote("/") !default; // Pagination @@ -1068,12 +999,12 @@ $dropdown-color: $body-color !default; $dropdown-border-color: $component-border-color !default; $dropdown-border-width: $border-width !default; $dropdown-border-radius: $border-radius !default; -$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; +$dropdown-inner-border-radius: functions-math.subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-divider-width: $border-width !default; $dropdown-divider-color: $component-section-border-color !default; $dropdown-divider-spacer: .3125rem !default; $dropdown-divider-opacity: 1 !default; -$dropdown-box-shadow: map-get($shadows, "d2") !default; +$dropdown-box-shadow: map.get($shadows, "d2") !default; $dropdown-link-color: $component-action-color !default; $dropdown-link-hover-color: $component-action-hover-color !default; @@ -1236,7 +1167,7 @@ $card-border-color: $component-overlay-border-color !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; $card-box-shadow: null !default; -$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; +$card-inner-border-radius: functions-math.subtract($card-border-radius, $card-border-width) !default; $card-link-margin-left: 1.25rem !default; @@ -1266,14 +1197,14 @@ $card-columns-column-gap: 1.25rem !default; // Tooltips // ===== -$tooltip-max-width: rem(208px) !default; // 208px=>13rem +$tooltip-max-width: rem-calc.rem(208px) !default; // 208px=>13rem $tooltip-padding-y: .25rem !default; $tooltip-padding-x: .5rem !default; $tooltip-margin: .125rem !default; $tooltip-font-size: ($font-size-base * .875) !default; $tooltip-bg: $uibase-900 !default; -$tooltip-color: color-auto-contrast($uibase-900) !default; +$tooltip-color: color-util.color-auto-contrast($uibase-900) !default; $tooltip-opacity: .9 !default; $tooltip-border-radius: $border-radius !default; @@ -1294,12 +1225,12 @@ $tooltip-arrow-color: $tooltip-bg !default; $popover-font-size: .9375rem !default; $popover-bg: $component-bg !default; $popover-margin: .125rem !default; -$popover-max-width: rem(288px) !default; // 288px=>18rem +$popover-max-width: rem-calc.rem(288px) !default; // 288px=>18rem $popover-border-width: $border-width !default; $popover-border-color: $component-overlay-border-color !default; $popover-border-radius: .3125rem !default; -$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; -$popover-box-shadow: map-get($shadows, "d2") !default; +$popover-inner-border-radius: functions-math.subtract($popover-border-radius, $popover-border-width) !default; +$popover-box-shadow: map.get($shadows, "d2") !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: .75rem !default; @@ -1331,7 +1262,7 @@ $offcanvas-bg: $component-bg !default; $offcanvas-color: null !default; $offcanvas-border-color: $component-overlay-border-color !default; $offcanvas-border-width: $border-width !default; -$offcanvas-box-shadow: map-get($shadows, "d3") !default; +$offcanvas-box-shadow: map.get($shadows, "d3") !default; $offcanvas-backdrop-bg: $dark !default; $offcanvas-backdrop-opacity: .5 !default; @@ -1358,7 +1289,7 @@ $offcanvas-footer-color: null !default; $offcanvas-footer-border-color: $offcanvas-header-border-color !default; $offcanvas-footer-border-width: $offcanvas-header-border-width !default; -$offcanvas-horizontal-width: rem(400px) !default; // 400px=>25rem !default; +$offcanvas-horizontal-width: rem-calc.rem(400px) !default; // 400px=>25rem !default; $offcanvas-vertical-height: 33vh !default; $offcanvas-blocked-transition: transform .15s linear !default; @@ -1375,11 +1306,11 @@ $modal-content-bg: $component-bg !default; $modal-content-color: null !default; $modal-content-border-color: $component-overlay-border-color !default; $modal-content-border-width: $border-width !default; -$modal-content-box-shadow: map-get($shadows, "d3") !default; -$modal-content-bp-up-box-shadow: map-get($shadows, "d4") !default; +$modal-content-box-shadow: map.get($shadows, "d3") !default; +$modal-content-bp-up-box-shadow: map.get($shadows, "d4") !default; $modal-border-radius: .375rem !default; -$modal-inner-border-radius: subtract($modal-border-radius, $modal-content-border-width) !default; +$modal-inner-border-radius: functions-math.subtract($modal-border-radius, $modal-content-border-width) !default; $modal-backdrop-bg: $dark !default; $modal-backdrop-opacity: .5 !default; @@ -1406,9 +1337,9 @@ $modal-footer-color: null !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-footer-border-width: $modal-header-border-width !default; -$modal-sm: rem(304px) !default; // 304px=>19rem -$modal-md: rem(528px) !default; // 528px=>33rem -$modal-lg: rem(896px) !default; // 896px=>56rem +$modal-sm: rem-calc.rem(304px) !default; // 304px=>19rem +$modal-md: rem-calc.rem(528px) !default; // 528px=>33rem +$modal-lg: rem-calc.rem(896px) !default; // 896px=>56rem $modal-breakpoint: sm !default; // When to start scaling up modal width $modal-lg-breakpoint: lg !default; // The minimum breakpoint to allow `.modal-lg` diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 3046b1c53b..a71d320cff 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,22 +1,22 @@ -@import "utilities/background"; -@import "utilities/border"; -@import "utilities/clearfix"; -@import "utilities/display"; -@import "utilities/embed"; -@import "utilities/flex"; -@import "utilities/float"; -@import "utilities/interaction"; -@import "utilities/link"; -@import "utilities/opacity"; -@import "utilities/orientation"; -@import "utilities/overflow"; -@import "utilities/position"; -@import "utilities/screen-reader"; -@import "utilities/shadow"; -@import "utilities/sizing"; -@import "utilities/spacing"; -@import "utilities/stack"; -@import "utilities/typography"; -@import "utilities/valign"; -@import "utilities/visibility"; -@import "utilities/vr"; +@use "utilities/background"; +@use "utilities/border"; +@use "utilities/clearfix"; +@use "utilities/display"; +@use "utilities/embed"; +@use "utilities/flex"; +@use "utilities/float"; +@use "utilities/interaction"; +@use "utilities/link"; +@use "utilities/opacity"; +@use "utilities/orientation"; +@use "utilities/overflow"; +@use "utilities/position"; +@use "utilities/screen-reader"; +@use "utilities/shadow"; +@use "utilities/sizing"; +@use "utilities/spacing"; +@use "utilities/stack"; +@use "utilities/typography"; +@use "utilities/valign"; +@use "utilities/visibility"; +@use "utilities/vr"; diff --git a/scss/component/_alert.scss b/scss/component/_alert.scss index 77d5d9ade7..4ec9fb2231 100644 --- a/scss/component/_alert.scss +++ b/scss/component/_alert.scss @@ -1,28 +1,37 @@ -@if $enable-alert { +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "../functions/color-util"; +@use "../mixins/alert"; +@use "../mixins/border"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-alert { // Base styles .alert { position: relative; - padding: $alert-padding-y $alert-padding-x; - padding-right: ($alert-padding-x + ($alert-close-padding-x * 2)); - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; - @include border-radius($alert-border-radius); + padding: settings.$alert-padding-y settings.$alert-padding-x; + padding-right: (settings.$alert-padding-x + (settings.$alert-close-padding-x * 2)); + margin-bottom: settings.$alert-margin-bottom; + border: settings.$alert-border-width solid transparent; + @include border.border-radius(settings.$alert-border-radius); // Adjust close link position and color - @if $enable-alert-close { + @if settings-options.$enable-alert-close { .close { position: absolute; top: 0; right: 0; - z-index: $link-stretch-z-index + 1; - padding: $alert-close-padding-y $alert-close-padding-x; + z-index: settings.$link-stretch-z-index + 1; + padding: settings.$alert-close-padding-y settings.$alert-close-padding-x; } } } // Headings for larger alerts - @if $enable-alert-heading { + @if settings-options.$enable-alert-heading { .alert-heading { // Specified to prevent conflicts of changing $headings-color color: inherit; @@ -30,32 +39,32 @@ } // Provide class for links that match alerts - @if $enable-alert-link { + @if settings-options.$enable-alert-link { .alert-link { - font-weight: $alert-link-font-weight; + font-weight: settings.$alert-link-font-weight; } } // Theme generation - @if $enable-alert-colors { - @if (type-of($alert-colors) == "map" and length($alert-colors) != 0) { - $mixed-alert-themes: _mix-context-colors($alert-colors, $alert-levels); - $alert-themes: map-merge($mixed-alert-themes, $alert-themes); + @if settings-options.$enable-alert-colors { + @if (meta.type-of(settings.$alert-colors) == "map" and list.length(settings.$alert-colors) != 0) { + $mixed-alert-themes: color-util.mix-context-colors(settings.$alert-colors, settings.$alert-levels); + settings.$alert-themes: map.merge($mixed-alert-themes, settings.$alert-themes); } // Contextual modifiers - @if (type-of($alert-themes) == "map" and length($alert-themes) != 0) { - @each $theme, $colors in $alert-themes { - $alert-bg: map-get($colors, "bg"); - $alert-color: map-get($colors, "color"); - $alert-border: map-get($colors, "border-color"); - $alert-hover-color: map-get($colors, "hover-color"); + @if (meta.type-of(settings.$alert-themes) == "map" and list.length(settings.$alert-themes) != 0) { + @each $theme, $colors in settings.$alert-themes { + $alert-bg: map.get($colors, "bg"); + $alert-color: map.get($colors, "color"); + $alert-border: map.get($colors, "border-color"); + $alert-hover-color: map.get($colors, "hover-color"); - $alert-color: color-if-contrast($alert-color, $alert-bg); - $alert-hover-color: color-if-contrast($alert-hover-color, $alert-bg); + $alert-color: color-util.color-if-contrast($alert-color, $alert-bg); + $alert-hover-color: color-util.color-if-contrast($alert-hover-color, $alert-bg); .alert-#{$theme} { - @include alert-variant($alert-color, $alert-bg, $alert-border, $alert-hover-color); + @include alert.alert-variant($alert-color, $alert-bg, $alert-border, $alert-hover-color); } } } diff --git a/scss/component/_animation.scss b/scss/component/_animation.scss index 57f12e6940..08f3c89023 100644 --- a/scss/component/_animation.scss +++ b/scss/component/_animation.scss @@ -1,3 +1,7 @@ +@use "../mixins/transition"; +@use "../settings"; +@use "../settings-options"; + .lazy { opacity: 0; @@ -5,13 +9,13 @@ // before fading back in &.in { opacity: 1; - @include transition($transition-lazy-fade); + @include transition.transition(settings.$transition-lazy-fade); } } .fade { opacity: 0; - @include transition($transition-fade); + @include transition.transition(settings.$transition-fade); &.in { opacity: 1; @@ -28,15 +32,15 @@ height: 0; overflow: hidden; - @include transition($transition-collapse-y); + @include transition.transition(settings.$transition-collapse-y); // Horizontal collapse variant &.width { width: 0; height: auto; - @if $enable-transitions { - @include transition($transition-collapse-x); + @if settings-options.$enable-transitions { + @include transition.transition(settings.$transition-collapse-x); } } } diff --git a/scss/component/_badge.scss b/scss/component/_badge.scss index bf328ace09..89ce4659a2 100644 --- a/scss/component/_badge.scss +++ b/scss/component/_badge.scss @@ -1,38 +1,43 @@ -@if $enable-badge { +@use "../mixins/border"; +@use "../mixins/font-size"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-badge { // Base class .badge { display: inline-block; - padding: $badge-padding-y $badge-padding-x; - font-family: $badge-font-family; - @include font-size($badge-font-size); - font-weight: $badge-font-weight; - line-height: $badge-line-height; - color: $badge-color; + padding: settings.$badge-padding-y settings.$badge-padding-x; + font-family: settings.$badge-font-family; + @include font-size.font-size(settings.$badge-font-size); + font-weight: settings.$badge-font-weight; + line-height: settings.$badge-line-height; + color: settings.$badge-color; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: baseline; - background-color: $badge-bg; - border: $badge-border-width solid transparent; - @include border-radius($badge-border-radius); + background-color: settings.$badge-bg; + border: settings.$badge-border-width solid transparent; + @include border.border-radius(settings.$badge-border-radius); // Empty badges collapse automatically &:empty { display: none; } - @if $enable-badge-close { + @if settings-options.$enable-badge-close { .close { - padding-right: $badge-close-padding-x; - padding-left: $badge-close-padding-x; - margin-right: -$badge-close-padding-x; - @include font-size($badge-close-font-size); + padding-right: settings.$badge-close-padding-x; + padding-left: settings.$badge-close-padding-x; + margin-right: -(settings.$badge-close-padding-x); + @include font-size.font-size(settings.$badge-close-font-size); } } } // Quick fix for badges in buttons - @if $enable-btn { + @if settings-options.$enable-btn { .btn .badge { position: relative; top: -1px; @@ -40,19 +45,19 @@ } // Badge group - @if $enable-badge-group { + @if settings-options.$enable-badge-group { .badge-group { display: inline-flex; vertical-align: baseline; > .badge { &:not(:first-child) { - margin-left: -$badge-border-width; - @include border-start-radius(0); + margin-left: -(settings.$badge-border-width); + @include border.border-start-radius(0); } &:not(:last-child) { - @include border-end-radius(0); + @include border.border-end-radius(0); } } } diff --git a/scss/component/_breadcrumb.scss b/scss/component/_breadcrumb.scss index 8c1b81926f..4afe994686 100644 --- a/scss/component/_breadcrumb.scss +++ b/scss/component/_breadcrumb.scss @@ -1,23 +1,28 @@ -@if $enable-breadcrumb { +@use "../mixins/font-size"; +@use "../mixins/lists"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-breadcrumb { .breadcrumb { display: flex; flex-wrap: wrap; - margin-bottom: $breadcrumb-margin-bottom; - @include font-size($breadcrumb-font-size); - @include list-unstyled(); + margin-bottom: settings.$breadcrumb-margin-bottom; + @include font-size.font-size(settings.$breadcrumb-font-size); + @include lists.list-unstyled(); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: $breadcrumb-item-padding-x; + padding-left: settings.$breadcrumb-item-padding-x; &::before { float: left; // Suppress inline spacing and underlining of the separator - padding-right: $breadcrumb-item-padding-x; - color: $breadcrumb-divider-color; - content: $breadcrumb-divider; + padding-right: settings.$breadcrumb-item-padding-x; + color: settings.$breadcrumb-divider-color; + content: settings.$breadcrumb-divider; } } @@ -37,7 +42,7 @@ // stylelint-enable no-duplicate-selectors &.active { - color: $breadcrumb-active-color; + color: settings.$breadcrumb-active-color; } } } diff --git a/scss/component/_button-group.scss b/scss/component/_button-group.scss index 84635d6137..dd67c7aebe 100644 --- a/scss/component/_button-group.scss +++ b/scss/component/_button-group.scss @@ -1,4 +1,10 @@ -@if $enable-btn-group { +@forward "../core/buttons"; +@use "sass:map"; +@use "../mixins/border"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-btn-group { // Placeholder for buttons inside a button group %btn-group-btn-base { position: relative; @@ -12,7 +18,7 @@ position: relative; display: inline-flex; vertical-align: middle; // match .btn alignment - @include border-radius($btn-border-radius); + @include border.border-radius(settings.$btn-border-radius); > .btn { @extend %btn-group-btn-base; @@ -29,7 +35,7 @@ } } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check { flex: 1 1 auto; @@ -50,47 +56,47 @@ } } - @if $enable-btn-group-horizontal { + @if settings-options.$enable-btn-group-horizontal { .btn-group { @extend %btn-group-base; // Prevent double borders when buttons are next to each other %btn-group-btn-not-first-align { - margin-left: -$btn-border-width; + margin-left: -(settings.$btn-border-width); } > .btn:not(:first-child), > .btn-group:not(:first-child) { @extend %btn-group-btn-not-first-align; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check:not(:first-child) { @extend %btn-group-btn-not-first-align; } } // Reset rounded corners - @if $enable-rounded { + @if settings-options.$enable-rounded { %btn-group-btn-not-last-radius { - @include border-end-radius(0); + @include border.border-end-radius(0); } > .btn:not(:last-child):not(.btn-group-end), > .btn-group:not(:last-child) > .btn { @extend %btn-group-btn-not-last-radius; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check:not(:last-child) > .btn { @extend %btn-group-btn-not-last-radius; } } %btn-group-btn-not-first-radius { - @include border-start-radius(0); + @include border.border-start-radius(0); } > .btn:not(:first-child), > .btn-group:not(:first-child) > .btn { @extend %btn-group-btn-not-first-radius; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check:not(:first-child) > .btn { @extend %btn-group-btn-not-first-radius; } @@ -101,24 +107,24 @@ // Sizing // Remix the button sizing classes into new ones for easier manipulation - @if $enable-sizing { - @each $size, $dims in $btn-sizes { - @if $enable-btn-group-sizing { - $sz-border-radius: map-get($dims, "border-radius"); + @if settings-options.$enable-sizing { + @each $size, $dims in settings.$btn-sizes { + @if settings-options.$enable-btn-group-sizing { + $sz-border-radius: map.get($dims, "border-radius"); .btn-group-#{$size} { - @include border-radius($sz-border-radius); + @include border.border-radius($sz-border-radius); > .btn { @extend %btn-#{$size}; } } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { .btn-group-#{$size} > .btn-check > .btn { @extend %btn-#{$size}; } } - @if $enable-btn-icon { + @if settings-options.$enable-btn-icon { .btn-group-#{$size} > .btn-icon { @extend %btn-icon-#{$size} !optional; } @@ -127,7 +133,7 @@ } } - @if $enable-btn-group-vertical { + @if settings-options.$enable-btn-group-vertical { // Vertical button groups .btn-group-vertical { @extend %btn-group-base; @@ -145,7 +151,7 @@ > .btn-group > .btn { @extend %btn-group-vertical-btn-base; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check, > .btn-check > .btn { @extend %btn-group-vertical-btn-base; @@ -153,41 +159,41 @@ } %btn-group-vertical-btn-not-first-align { - margin-top: -$btn-border-width; + margin-top: -(settings.$btn-border-width); } > .btn ~ .btn, > .btn-group:not(:first-child) { @extend %btn-group-vertical-btn-not-first-align; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check:not(:first-child) { @extend %btn-group-vertical-btn-not-first-align; } } // Reset rounded corners - @if $enable-rounded { + @if settings-options.$enable-rounded { %btn-group-vertical-btn-not-last-radius { - @include border-bottom-radius(0); + @include border.border-bottom-radius(0); } > .btn:not(:last-child):not(.btn-group-end), > .btn-group:not(:last-child) > .btn { @extend %btn-group-vertical-btn-not-last-radius; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check:not(:last-child) > .btn { @extend %btn-group-vertical-btn-not-last-radius; } } %btn-group-vertical-btn-not-first-radius { - @include border-top-radius(0); + @include border.border-top-radius(0); } > .btn ~ .btn, > .btn-group:not(:first-child) > .btn { @extend %btn-group-vertical-btn-not-first-radius; } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { > .btn-check:not(:first-child) > .btn { @extend %btn-group-vertical-btn-not-first-radius; } @@ -197,13 +203,13 @@ } // Group multiple button groups together for a toolbar - @if $enable-btn-toolbar { + @if settings-options.$enable-btn-toolbar { .btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; - @if $enable-input-group { + @if settings-options.$enable-input-group { .input-group { width: auto; } diff --git a/scss/component/_card.scss b/scss/component/_card.scss index 6553524bb0..1971f22852 100644 --- a/scss/component/_card.scss +++ b/scss/component/_card.scss @@ -1,17 +1,23 @@ -@if $enable-card { +@use "../mixins/border"; +@use "../mixins/box-shadow"; +@use "../mixins/breakpoints"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-card { .card { position: relative; display: flex; flex-direction: column; min-width: 0; - height: $card-height; - margin-bottom: $card-margin-bottom; - color: $card-color; + height: settings.$card-height; + margin-bottom: settings.$card-margin-bottom; + color: settings.$card-color; word-wrap: break-word; - background-color: $card-bg; - border: $card-border-width solid $card-border-color; - @include border-radius($card-border-radius); - @include box-shadow($card-box-shadow); + background-color: settings.$card-bg; + border: settings.$card-border-width solid settings.$card-border-color; + @include border.border-radius(settings.$card-border-radius); + @include box-shadow.box-shadow(settings.$card-box-shadow); > hr { margin-right: 0; @@ -19,43 +25,43 @@ } } - @if $enable-card-body { + @if settings-options.$enable-card-body { .card-body { // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; // Set a min-height to keep IE in check with image stretching min-height: 1px; - padding: $card-padding-y $card-padding-x; + padding: settings.$card-padding-y settings.$card-padding-x; } } - @if $enable-card-title { + @if settings-options.$enable-card-title { .card-title { - margin-bottom: $card-title-margin-bottom; + margin-bottom: settings.$card-title-margin-bottom; } } - @if $enable-card-subtitle { + @if settings-options.$enable-card-subtitle { .card-subtitle { - margin-top: $card-subtitle-margin-top; + margin-top: settings.$card-subtitle-margin-top; margin-bottom: 0; } } - @if $enable-card-text { + @if settings-options.$enable-card-text { .card-text:last-child { margin-bottom: 0; } } - @if $enable-card-link { + @if settings-options.$enable-card-link { .card-link + .card-link { - margin-left: $card-link-margin-left; + margin-left: settings.$card-link-margin-left; } } - @if $enable-card-list { + @if settings-options.$enable-card-list { .card-list { margin-bottom: 0; @@ -65,16 +71,16 @@ } } &:first-child { - @include border-top-radius($card-inner-border-radius); + @include border.border-top-radius(settings.$card-inner-border-radius); > .list-item:first-child { border-top: 0; - @include border-top-radius($card-inner-border-radius); + @include border.border-top-radius(settings.$card-inner-border-radius); } } &:not(:first-child) { > .list-item:first-child { - @include border-top-radius(0); + @include border.border-top-radius(0); } } @@ -87,22 +93,22 @@ } } &:last-child { - @include border-bottom-radius($card-inner-border-radius); + @include border.border-bottom-radius(settings.$card-inner-border-radius); > .list-item:last-child { border-bottom: 0; - @include border-bottom-radius($card-inner-border-radius); + @include border.border-bottom-radius(settings.$card-inner-border-radius); } } &:not(:last-child) { > .list-item:last-child { - @include border-top-radius(0); + @include border.border-top-radius(0); } } } } - @if $enable-card-table { + @if settings-options.$enable-card-table { .card-table { &:last-child { margin-bottom: 0; @@ -111,79 +117,79 @@ } // Optional caps - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { - padding: $card-header-padding-y $card-header-padding-x; + padding: settings.$card-header-padding-y settings.$card-header-padding-x; margin-bottom: 0; // Removes the default margin-bottom of - color: $card-header-color; - background-color: $card-header-bg; - border-bottom: $card-header-border-width solid $card-header-border-color; + color: settings.$card-header-color; + background-color: settings.$card-header-bg; + border-bottom: settings.$card-header-border-width solid settings.$card-header-border-color; &:first-child { - @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + @include border.border-radius(settings.$card-inner-border-radius settings.$card-inner-border-radius 0 0); } } } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { - padding: $card-footer-padding-y $card-footer-padding-x; - color: $card-footer-color; - background-color: $card-footer-bg; - border-top: $card-footer-border-width solid $card-footer-border-color; + padding: settings.$card-footer-padding-y settings.$card-footer-padding-x; + color: settings.$card-footer-color; + background-color: settings.$card-footer-bg; + border-top: settings.$card-footer-border-width solid settings.$card-footer-border-color; &:last-child { - @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + @include border.border-radius(0 0 settings.$card-inner-border-radius settings.$card-inner-border-radius); } } } // Header navs - @if $enable-card-header-tabs { + @if settings-options.$enable-card-header-tabs { .card-header-tabs { - margin-right: $card-header-padding-x * -.5; - margin-bottom: -$card-header-padding-y; - margin-left: $card-header-padding-x * -.5; + margin-right: settings.$card-header-padding-x * -.5; + margin-bottom: -(settings.$card-header-padding-y); + margin-left: settings.$card-header-padding-x * -.5; border-bottom: 0; .nav-link.active { - @if $nav-tabs-active-bg != $card-bg { - background-color: $card-bg; - border-bottom-color: $card-bg; + @if settings.$nav-tabs-active-bg != settings.$card-bg { + background-color: settings.$card-bg; + border-bottom-color: settings.$card-bg; } - @if $nav-tabs-border-color != $card-header-border-color { - border-color: $card-header-border-color; + @if settings.$nav-tabs-border-color != settings.$card-header-border-color { + border-color: settings.$card-header-border-color; } - @if $nav-tabs-border-color != $card-header-border-color or $nav-tabs-active-bg != $card-bg { - border-bottom-color: $card-bg; + @if settings.$nav-tabs-border-color != settings.$card-header-border-color or settings.$nav-tabs-active-bg != settings.$card-bg { + border-bottom-color: settings.$card-bg; } } } } - @if $enable-card-header-pills { + @if settings-options.$enable-card-header-pills { .card-header-pills { - margin-right: $card-header-padding-x * -.5; - margin-left: $card-header-padding-x * -.5; + margin-right: settings.$card-header-padding-x * -.5; + margin-left: settings.$card-header-padding-x * -.5; } } // Card image overlay - @if $enable-card-img-overlay { + @if settings-options.$enable-card-img-overlay { .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; - padding: $card-img-overlay-padding; - @include border-radius($card-inner-border-radius); + padding: settings.$card-img-overlay-padding; + @include border.border-radius(settings.$card-inner-border-radius); } } // Card images - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img, .card-img-top, .card-img-bottom { @@ -191,19 +197,19 @@ min-height: 1px; // Stop stretch/white-space due to flexbox w/ images in IE } .card-img-top { - @include border-top-radius($card-inner-border-radius); + @include border.border-top-radius(settings.$card-inner-border-radius); } .card-img-bottom { - @include border-bottom-radius($card-inner-border-radius); + @include border.border-bottom-radius(settings.$card-inner-border-radius); } } // Horizontal Cards - @if $enable-card-horizontal { - @each $breakpoint in $card-horizontal-breakpoints { - $bprule: breakpoint-designator($breakpoint); + @if settings-options.$enable-card-horizontal { + @each $breakpoint in settings.$card-horizontal-breakpoints { + $bprule: breakpoints.breakpoint-designator($breakpoint); - @include media-breakpoint-up($breakpoint) { + @include breakpoints.media-breakpoint-up($breakpoint) { .card-horizontal#{$bprule}, .card-horizontal#{$bprule}-reverse { flex-flow: row wrap; @@ -226,41 +232,41 @@ padding-left: 0; } - @if $enable-rounded { - @each $breakpoint in $card-horizontal-breakpoints { - $bprule: breakpoint-designator($breakpoint); - $prev: breakpoint-prev($breakpoint, $grid-breakpoints); + @if settings-options.$enable-rounded { + @each $breakpoint in settings.$card-horizontal-breakpoints { + $bprule: breakpoints.breakpoint-designator($breakpoint); + $prev: breakpoints.breakpoint-prev($breakpoint, settings.$grid-breakpoints); // Skip smallest breakpoint - @if breakpoint-min($breakpoint, $grid-breakpoints) != null { - @include media-breakpoint-down($prev) { + @if breakpoints.breakpoint-min($breakpoint, settings.$grid-breakpoints) != null { + @include breakpoints.media-breakpoint-down($prev) { %card-hz-col-reset-top-#{$bprule} { - @include border-top-radius(0); + @include border.border-top-radius(0); } %card-hz-col-reset-bottom-#{$bprule} { - @include border-bottom-radius(0); + @include border.border-bottom-radius(0); } .card-horizontal#{$bprule}, .card-horizontal#{$bprule}-reverse { > .card-col:not(:first-child) { - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-hz-col-reset-top-#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-hz-col-reset-top-#{$bprule}; } } } > .card-col:not(:last-child) { - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-hz-col-reset-bottom-#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-bottom { @extend %card-hz-col-reset-bottom-#{$bprule}; } @@ -270,32 +276,32 @@ } } - @include media-breakpoint-up($breakpoint) { + @include breakpoints.media-breakpoint-up($breakpoint) { %card-hz-reset-top-start-#{$bprule} { - @include border-top-start-radius(0); + @include border.border-top-start-radius(0); } %card-hz-reset-bottom-start-#{$bprule} { - @include border-bottom-start-radius(0); + @include border.border-bottom-start-radius(0); } %card-hz-reset-top-end-#{$bprule} { - @include border-top-end-radius(0); + @include border.border-top-end-radius(0); } %card-hz-reset-bottom-end-#{$bprule} { - @include border-bottom-end-radius(0); + @include border.border-bottom-end-radius(0); } .card-horizontal#{$bprule} { > .card-col:not(:first-child) { - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-hz-reset-top-start-#{$bprule}; } } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-hz-reset-bottom-start-#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-hz-reset-top-start-#{$bprule}; } @@ -305,17 +311,17 @@ } } > .card-col:not(:last-child) { - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-hz-reset-top-end-#{$bprule}; } } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-hz-reset-bottom-end-#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-hz-reset-top-end-#{$bprule}; } @@ -327,17 +333,17 @@ } .card-horizontal#{$bprule}-reverse { > .card-col:not(:first-child) { - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-hz-reset-top-end-#{$bprule}; } } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-hz-reset-bottom-end-#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-hz-reset-top-end-#{$bprule}; } @@ -347,17 +353,17 @@ } } > .card-col:not(:last-child) { - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-hz-reset-top-start-#{$bprule}; } } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-hz-reset-bottom-start-#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-hz-reset-top-start-#{$bprule}; } @@ -375,29 +381,29 @@ // Card deck // 1. Individual cards have margin-bottom by default. // Replace with single margin on the deck. - @if $enable-card-deck { + @if settings-options.$enable-card-deck { %card-deck-base { display: flex; flex-direction: column; - margin-right: $card-deck-gutter * -.5; - margin-left: $card-deck-gutter * -.5; + margin-right: settings.$card-deck-gutter * -.5; + margin-left: settings.$card-deck-gutter * -.5; > .card { - margin-right: $card-deck-gutter * .5; - margin-left: $card-deck-gutter * .5; + margin-right: settings.$card-deck-gutter * .5; + margin-left: settings.$card-deck-gutter * .5; } } - @each $breakpoint in $card-deck-breakpoints { - $bprule: breakpoint-designator($breakpoint); + @each $breakpoint in settings.$card-deck-breakpoints { + $bprule: breakpoints.breakpoint-designator($breakpoint); - @if $bprule == "" or ($enable-card-deck-responsive and $bprule != "") { + @if $bprule == "" or (settings-options.$enable-card-deck-responsive and $bprule != "") { .card-deck#{$bprule} { @extend %card-deck-base; - @include media-breakpoint-up(#{$breakpoint}) { + @include breakpoints.media-breakpoint-up(#{$breakpoint}) { flex-flow: row wrap; - margin-bottom: $card-margin-bottom; // 1 + margin-bottom: settings.$card-margin-bottom; // 1 > .card { // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored @@ -414,22 +420,22 @@ // Card group // 1. Individual cards have margin-bottom by default, // Replace with single margin on the group. - @if $enable-card-group { + @if settings-options.$enable-card-group { %card-group-base { display: flex; flex-direction: column; } - @each $breakpoint in $card-group-breakpoints { - $bprule: breakpoint-designator($breakpoint); + @each $breakpoint in settings.$card-group-breakpoints { + $bprule: breakpoints.breakpoint-designator($breakpoint); - @if $bprule == "" or ($enable-card-group-responsive and $bprule != "") { + @if $bprule == "" or (settings-options.$enable-card-group-responsive and $bprule != "") { .card-group#{$bprule} { @extend %card-group-base; - @include media-breakpoint-up(#{$breakpoint}) { + @include breakpoints.media-breakpoint-up(#{$breakpoint}) { flex-flow: row wrap; - margin-bottom: $card-margin-bottom; // 1 + margin-bottom: settings.$card-margin-bottom; // 1 > .card { // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored @@ -442,64 +448,64 @@ } // Handle rounded corners - @if $enable-rounded { + @if settings-options.$enable-rounded { &:not(:last-child) { - @include border-end-radius(0); + @include border.border-end-radius(0); %card-group-reset-top-end#{$bprule} { - @include border-top-end-radius(0); + @include border.border-top-end-radius(0); } - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-group-reset-top-end#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-group-reset-top-end#{$bprule}; } } %card-group-reset-bottom-end#{$bprule} { - @include border-bottom-end-radius(0); + @include border.border-bottom-end-radius(0); } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-group-reset-bottom-end#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-bottom { @extend %card-group-reset-bottom-end#{$bprule}; } } } &:not(:first-child) { - @include border-start-radius(0); + @include border.border-start-radius(0); %card-group-reset-top-start#{$bprule} { - @include border-top-start-radius(0); + @include border.border-top-start-radius(0); } - @if $enable-card-header { + @if settings-options.$enable-card-header { .card-header { @extend %card-group-reset-top-start#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-top { @extend %card-group-reset-top-start#{$bprule}; } } %card-group-reset-bottom-start#{$bprule} { - @include border-bottom-start-radius(0); + @include border.border-bottom-start-radius(0); } - @if $enable-card-footer { + @if settings-options.$enable-card-footer { .card-footer { @extend %card-group-reset-bottom-start#{$bprule}; } } - @if $enable-card-img { + @if settings-options.$enable-card-img { .card-img-bottom { @extend %card-group-reset-bottom-start#{$bprule}; } @@ -514,21 +520,21 @@ } // Card columns - @if $enable-card-columns { - @each $breakpoint in $card-columns-breakpoints { - $bprule: breakpoint-designator($breakpoint); + @if settings-options.$enable-card-columns { + @each $breakpoint in settings.$card-columns-breakpoints { + $bprule: breakpoints.breakpoint-designator($breakpoint); - @if $bprule == "" or ($enable-card-columns-responsive and $bprule != "") { - @include media-breakpoint-up(#{$breakpoint}) { + @if $bprule == "" or (settings-options.$enable-card-columns-responsive and $bprule != "") { + @include breakpoints.media-breakpoint-up(#{$breakpoint}) { .card-columns#{$bprule} { - margin-bottom: $card-margin-bottom; - column-count: $card-columns-count; - column-gap: $card-columns-column-gap; + margin-bottom: settings.$card-margin-bottom; + column-count: settings.$card-columns-count; + column-gap: settings.$card-columns-column-gap; orphans: 1; widows: 1; > .card { - margin-top: $card-margin-bottom; + margin-top: settings.$card-margin-bottom; margin-bottom: 0; break-inside: avoid; backface-visibility: hidden; diff --git a/scss/component/_caret.scss b/scss/component/_caret.scss index 7cbfa78450..fa0f08d5a5 100644 --- a/scss/component/_caret.scss +++ b/scss/component/_caret.scss @@ -1,24 +1,28 @@ +@use "../mixins/caret"; +@use "../settings"; +@use "../settings-options"; + %caret-base { display: inline-block; - width: $caret-width; + width: settings.$caret-width; text-align: center; } %caret-after { - @include caret(null, null); + @include caret.caret(null, null); } -@if $enable-utility-caret { +@if settings-options.$enable-utility-caret { .caret { @extend %caret-base; &::after { @extend %caret-after; - @include caret-down($caret-border-width); + @include caret.caret-down(settings.$caret-border-width); } } .open > .caret { &::after { - @include caret-up($caret-border-width); + @include caret.caret-up(settings.$caret-border-width); } } @@ -27,12 +31,12 @@ &::after { @extend %caret-after; - @include caret-up($caret-border-width); + @include caret.caret-up(settings.$caret-border-width); } } .open > .caretup { &::after { - @include caret-down($caret-border-width); + @include caret.caret-down(settings.$caret-border-width); } } @@ -41,12 +45,12 @@ &::after { @extend %caret-after; - @include caret-start($caret-border-width); + @include caret.caret-start(settings.$caret-border-width); } } .open > .caretstart { &::after { - @include caret-end($caret-border-width); + @include caret.caret-end(settings.$caret-border-width); } } @@ -55,12 +59,12 @@ &::after { @extend %caret-after; - @include caret-end($caret-border-width); + @include caret.caret-end(settings.$caret-border-width); } } .open > .caretend { &::after { - @include caret-start($caret-border-width); + @include caret.caret-start(settings.$caret-border-width); } } } diff --git a/scss/component/_close.scss b/scss/component/_close.scss index 4207370e4f..ac27d1d7dc 100644 --- a/scss/component/_close.scss +++ b/scss/component/_close.scss @@ -1,21 +1,26 @@ -@if $enable-utility-close { +@use "../mixins/font-size"; +@use "../mixins/hover"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-utility-close { .close { - @include font-size($close-font-size); - font-weight: $close-font-weight; + @include font-size.font-size(settings.$close-font-size); + font-weight: settings.$close-font-weight; line-height: 1; color: inherit; text-decoration: none; - opacity: $close-opacity; + opacity: settings.$close-opacity; // Override anchor styling - @include hover-focus() { + @include hover.hover-focus() { color: inherit; text-decoration: none; } &:not(:disabled):not(.disabled) { - @include hover-focus() { - opacity: $close-hover-opacity; + @include hover.hover-focus() { + opacity: settings.$close-hover-opacity; } } } diff --git a/scss/component/_container.scss b/scss/component/_container.scss index a76fb666c5..16847ca761 100644 --- a/scss/component/_container.scss +++ b/scss/component/_container.scss @@ -1,27 +1,33 @@ +@use "sass:map"; +@use "../mixins/breakpoints"; +@use "../mixins/containers"; +@use "../settings"; +@use "../settings-options"; + // Container widths // Set the container width, and override it for fixed navbars in media queries. -@if $enable-container { +@if settings-options.$enable-container { // Single container class with breakpoint max-widths .container, // Fluid container - 100% wide on all breakpoints .container-fluid { - @include make-container(); + @include containers.make-container(); } } // Responsive containers // Containers that are 100% wide until a breakpoint -@if $enable-container { - @each $breakpoint in $responsive-container-breakpoints { - $rc-max-width: map-get($container-max-widths, $breakpoint); +@if settings-options.$enable-container { + @each $breakpoint in settings.$responsive-container-breakpoints { + $rc-max-width: map.get(settings.$container-max-widths, $breakpoint); @if $rc-max-width != null { .container-#{$breakpoint} { @extend .container-fluid; } - @include media-breakpoint-up($breakpoint) { + @include breakpoints.media-breakpoint-up($breakpoint) { %responsive-container-#{$breakpoint} { max-width: $rc-max-width; } @@ -31,15 +37,15 @@ @extend %responsive-container-#{$breakpoint}; } - @if $enable-container-responsive { + @if settings-options.$enable-container-responsive { // Extend each breakpoint which should be smaller or // equal to the current breakpoint $extend-breakpoint: true; - @each $name, $width in $grid-breakpoints { + @each $name, $width in settings.$grid-breakpoints { //@if (rem($rc-max-width) > rem($width) or $breakpoint == $name) { @if ($extend-breakpoint) { - $bprule: breakpoint-designator($name); + $bprule: breakpoints.breakpoint-designator($name); @if ($bprule != "") { .container#{$bprule} { @extend %responsive-container-#{$breakpoint}; diff --git a/scss/component/_drag.scss b/scss/component/_drag.scss index 80fa488b01..7ef7f85dac 100644 --- a/scss/component/_drag.scss +++ b/scss/component/_drag.scss @@ -1,15 +1,20 @@ -@if $enable-utility-drag { +@use "../mixins/font-size"; +@use "../mixins/hover"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-utility-drag { .drag { - @include font-size($drag-font-size); - font-weight: $drag-font-weight; + @include font-size.font-size(settings.$drag-font-size); + font-weight: settings.$drag-font-weight; line-height: 1; color: inherit; text-decoration: none; touch-action: none; - opacity: $drag-opacity; + opacity: settings.$drag-opacity; // Override anchor styling - @include hover-focus() { + @include hover.hover-focus() { color: inherit; text-decoration: none; } @@ -17,8 +22,8 @@ &:not(:disabled):not(.disabled) { cursor: move; - @include hover-focus() { - opacity: $drag-hover-opacity; + @include hover.hover-focus() { + opacity: settings.$drag-hover-opacity; } } } diff --git a/scss/component/_dropdown.scss b/scss/component/_dropdown.scss index 305b1e9ffa..a1ecc62d29 100644 --- a/scss/component/_dropdown.scss +++ b/scss/component/_dropdown.scss @@ -1,5 +1,15 @@ +@use "../functions/math"; +@use "../mixins/border"; +@use "../mixins/box-shadow"; +@use "../mixins/caret"; +@use "../mixins/divider"; +@use "../mixins/font-size"; +@use "../mixins/hover"; +@use "../settings"; +@use "../settings-options"; + // stylelint-disable selector-no-qualifying-type -@if $enable-dropdown { +@if settings-options.$enable-dropdown { // The dropdown wrapper (`
`) and submenu (`
    `) .dropdown, .dropdown-submenu { @@ -16,39 +26,39 @@ position: absolute; top: 100%; left: 0; - z-index: $zindex-dropdown; + z-index: settings.$zindex-dropdown; display: none; // none by default, but block on "open" of the menu - min-width: $dropdown-min-width; - padding: $dropdown-padding-y $dropdown-padding-x; - margin: $dropdown-spacer 0; // override default ul - @include font-size($dropdown-font-size); - line-height: $dropdown-line-height; - color: $dropdown-color; + min-width: settings.$dropdown-min-width; + padding: settings.$dropdown-padding-y settings.$dropdown-padding-x; + margin: settings.$dropdown-spacer 0; // override default ul + @include font-size.font-size(settings.$dropdown-font-size); + line-height: settings.$dropdown-line-height; + color: settings.$dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; pointer-events: auto; - background-color: $dropdown-bg; + background-color: settings.$dropdown-bg; background-clip: padding-box; - border: $dropdown-border-width solid $dropdown-border-color; - @include border-radius($dropdown-border-radius); - @include box-shadow($dropdown-box-shadow); + border: settings.$dropdown-border-width solid settings.$dropdown-border-color; + @include border.border-radius(settings.$dropdown-border-radius); + @include box-shadow.box-shadow(settings.$dropdown-box-shadow); &.open { display: block; } // Prevent item from overflowing when no horizontal menu padding - @if $dropdown-padding-y == 0 { + @if settings.$dropdown-padding-y == 0 { > dropdown-item:first-child, > li:first-child a, > li:first-child .dropdown-item { - @include border-top-radius($dropdown-inner-border-radius); + @include border.border-top-radius(settings.$dropdown-inner-border-radius); } > dropdown-item:last-child, > li:last-child a, > li:last-child .dropdown-item { - @include border-bottom-radius($dropdown-inner-border-radius); + @include border.border-bottom-radius(settings.$dropdown-inner-border-radius); } } } @@ -56,20 +66,20 @@ // Dropdown submenu additions .dropdown-submenu { > .dropdown-menu { - margin-top: subtract($dropdown-border-width, add($dropdown-spacer, $dropdown-padding-y, false)); + margin-top: math.subtract(settings.$dropdown-border-width, math.add(settings.$dropdown-spacer, settings.$dropdown-padding-y, false)); } > a, > .dropdown-item { &::after { position: absolute; - top: $dropdown-caret-spacer-y; - right: $dropdown-caret-spacer-x; - @include caret(end, $dropdown-caret-width, $dropdown-caret-color); + top: settings.$dropdown-caret-spacer-y; + right: settings.$dropdown-caret-spacer-x; + @include caret.caret(end, settings.$dropdown-caret-width, settings.$dropdown-caret-color); } &.active:not(:hover):not(:focus)::after { - @include caret-end($dropdown-caret-width, $dropdown-caret-active-color); + @include caret.caret-end(settings.$dropdown-caret-width, settings.$dropdown-caret-active-color); } } } @@ -89,65 +99,65 @@ .dropdown-item { display: block; width: 100%; // 1 - padding: $dropdown-item-padding-y $dropdown-item-padding-x; + padding: settings.$dropdown-item-padding-y settings.$dropdown-item-padding-x; margin: 0; clear: both; - font-weight: $font-weight-normal; - color: $dropdown-link-color; + font-weight: settings.$font-weight-normal; + color: settings.$dropdown-link-color; text-align: inherit; // 1 - text-decoration: if($link-decoration == none, null, none); + text-decoration: if(settings.$link-decoration == none, null, none); white-space: nowrap; // prevent links from randomly breaking onto new lines background: none; // 1 border: 0; // 1 &.active { - color: $dropdown-link-active-color; - background-color: $dropdown-link-active-bg; + color: settings.$dropdown-link-active-color; + background-color: settings.$dropdown-link-active-bg; } - @include hover-focus() { - color: $dropdown-link-hover-color; - text-decoration: if($link-hover-decoration == underline, none, null); - background-color: $dropdown-link-hover-bg; + @include hover.hover-focus() { + color: settings.$dropdown-link-hover-color; + text-decoration: if(settings.$link-hover-decoration == underline, none, null); + background-color: settings.$dropdown-link-hover-bg; } &.disabled, &:disabled { - color: $dropdown-link-disabled-color; + color: settings.$dropdown-link-disabled-color; text-decoration: none; pointer-events: none; - background-color: $dropdown-link-disabled-bg; + background-color: settings.$dropdown-link-disabled-bg; background-image: none; // Remove CSS gradient } } // Dropdown section headers - @if $enable-dropdown-header { + @if settings-options.$enable-dropdown-header { .dropdown-header { display: block; - padding: $dropdown-header-padding; + padding: settings.$dropdown-header-padding; margin-bottom: 0; - @include font-size($dropdown-header-font-size); - font-weight: $dropdown-header-font-weight; + @include font-size.font-size(settings.$dropdown-header-font-size); + font-weight: settings.$dropdown-header-font-weight; line-height: inherit; - color: $dropdown-header-color; + color: settings.$dropdown-header-color; white-space: nowrap; // as with > li > a } } // Dropdown non-interactive text item - @if $enable-dropdown-text { + @if settings-options.$enable-dropdown-text { .dropdown-text { display: block; - padding: $dropdown-item-padding-y $dropdown-item-padding-x; - color: $dropdown-text-color; + padding: settings.$dropdown-item-padding-y settings.$dropdown-item-padding-x; + color: settings.$dropdown-text-color; } } // Divider (basically an `
    `) within the dropdown - @if $enable-dropdown-divider { + @if settings-options.$enable-dropdown-divider { .dropdown-divider { - @include divider-h($dropdown-divider-color, $dropdown-divider-width, $dropdown-divider-spacer, $dropdown-divider-opacity); + @include divider.divider-h(settings.$dropdown-divider-color, settings.$dropdown-divider-width, settings.$dropdown-divider-spacer, settings.$dropdown-divider-opacity); } } @@ -161,7 +171,7 @@ right: 100%; left: auto; margin-top: 0; - margin-right: $dropdown-spacer; + margin-right: settings.$dropdown-spacer; } .dropdown-subalign-reverse { margin-right: 0; @@ -173,7 +183,7 @@ right: auto; left: 100%; margin-top: 0; - margin-left: $dropdown-spacer; + margin-left: settings.$dropdown-spacer; } .dropdown-subalign-forward { margin-left: 0; @@ -193,19 +203,19 @@ // Allow for dropdowns to go bottom up (aka, dropup menu) // Add .dropup onto the .dropdown-menu element - @if $enable-dropdown-dropup { + @if settings-options.$enable-dropdown-dropup { .dropup { top: auto; bottom: 100%; margin-top: 0; - margin-bottom: $dropdown-spacer; + margin-bottom: settings.$dropdown-spacer; .dropdown-submenu { > .dropdown-menu { top: auto; bottom: 0; margin-top: 0; - margin-bottom: subtract($dropdown-border-width, add($dropdown-spacer, $dropdown-padding-y, false)); + margin-bottom: math.subtract(settings.$dropdown-border-width, math.add(settings.$dropdown-spacer, settings.$dropdown-padding-y, false)); } } @@ -229,16 +239,16 @@ } } - @if $enable-dropdown-back { + @if settings-options.$enable-dropdown-back { // Backwards navigation item - extends a menu item .dropdown-back { position: relative; > button::before { position: absolute; - top: $dropdown-back-spacer-y; - left: $dropdown-back-spacer-x; - @include caret(start, $dropdown-back-width, $dropdown-back-color); + top: settings.$dropdown-back-spacer-y; + left: settings.$dropdown-back-spacer-x; + @include caret.caret(start, settings.$dropdown-back-width, settings.$dropdown-back-color); } } @@ -247,9 +257,9 @@ // This removes the need for overly convoluted CSS rules .dropdown-back-reverse { > a::before { - right: $dropdown-back-spacer-x; + right: settings.$dropdown-back-spacer-x; left: auto; - @include caret-end($dropdown-back-width, $dropdown-back-color); + @include caret.caret-end(settings.$dropdown-back-width, settings.$dropdown-back-color); } } } diff --git a/scss/component/_grid.scss b/scss/component/_grid.scss index 22e3cb68ac..14a10c7ba9 100644 --- a/scss/component/_grid.scss +++ b/scss/component/_grid.scss @@ -1,22 +1,27 @@ +@use "../mixins/breakpoints"; +@use "../mixins/grid"; +@use "../settings"; +@use "../settings-options"; + // Row // Rows contain columns. -@if $enable-grid-classes { +@if settings-options.$enable-grid-classes { .row { - @include make-row(); + @include grid.make-row(); > * { - @include make-col-ready(); + @include grid.make-col-ready(); } } } // Responsive gutters -@if $enable-grid-classes and $enable-grid-responsive-gutters { - @each $breakpoint in $responsive-gutter-breakpoints { - $bprule: breakpoint-designator($breakpoint); +@if settings-options.$enable-grid-classes and settings-options.$enable-grid-responsive-gutters { + @each $breakpoint in settings.$responsive-gutter-breakpoints { + $bprule: breakpoints.breakpoint-designator($breakpoint); - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - @each $key, $value in $gutters { + @include breakpoints.media-breakpoint-up($breakpoint, settings.$grid-breakpoints) { + @each $key, $value in settings.$gutters { .g#{$bprule}-#{$key}, .gx#{$bprule}-#{$key} { margin-right: $value * -.5; @@ -43,6 +48,6 @@ // Columns // Common styles for grid columns -@if $enable-grid-classes { - @include make-grid-columns(); +@if settings-options.$enable-grid-classes { + @include grid.make-grid-columns(); } diff --git a/scss/component/_input-group.scss b/scss/component/_input-group.scss index 7b157155ee..654955f5a1 100644 --- a/scss/component/_input-group.scss +++ b/scss/component/_input-group.scss @@ -1,4 +1,13 @@ -@if $enable-input-group { +@forward "../core/buttons"; +@forward "../forms/form-control"; +@forward "../forms/form-file"; +@use "sass:map"; +@use "../mixins/border"; +@use "../mixins/font-size"; +@use "../settings"; +@use "../settings-options"; + +@if settings-options.$enable-input-group { // Base styles .input-group { position: relative; @@ -6,7 +15,7 @@ flex-wrap: wrap; // For form validation feedback align-items: stretch; width: 100%; - @include border-radius($input-border-radius); + @include border.border-radius(settings.$input-border-radius); > .form-control, > .form-control-static, @@ -33,7 +42,7 @@ // Custom file inputs have more complex markup, // needing special overrides. - @if $enable-form-file { + @if settings-options.$enable-form-file { > .form-file { // Bring input back above label for drag and drop to work if // the custom file input is focused. @@ -55,15 +64,15 @@ display: flex; align-items: center; - &:not(:last-child) .form-file-label { @include border-end-radius(0); } - &:not(:first-child) .form-file-label { @include border-start-radius(0); } + &:not(:last-child) .form-file-label { @include border.border-end-radius(0); } + &:not(:first-child) .form-file-label { @include border.border-start-radius(0); } } } // Ensure buttons are always above inputs for more visually pleasing borders. // This isn't needed for `.input-group-text` since it shares the same border-color // as our inputs. - @if $enable-btn { + @if settings-options.$enable-btn { .btn { position: relative; z-index: 2; @@ -73,7 +82,7 @@ z-index: 4; } } - @if $enable-btn-check { + @if settings-options.$enable-btn-check { .btn-check-input:focus ~ .btn { z-index: 4; } @@ -84,33 +93,33 @@ // Textual addon item // Catch-all element for any text or radio/checkbox input you wish // to addon to an input. - @if $enable-input-group-text { + @if settings-options.$enable-input-group-text { .input-group-text { display: flex; align-items: center; - padding: $input-group-text-padding-y $input-group-text-padding-x; + padding: settings.$input-group-text-padding-y settings.$input-group-text-padding-x; margin-bottom: 0; // Allow use of