diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_card.scss | 2 | ||||
| -rw-r--r-- | scss/_functions.scss | 53 | ||||
| -rw-r--r-- | scss/_grid.scss | 23 | ||||
| -rw-r--r-- | scss/_navbar.scss | 2 | ||||
| -rw-r--r-- | scss/_placeholders.scss | 51 | ||||
| -rw-r--r-- | scss/_reboot.scss | 20 | ||||
| -rw-r--r-- | scss/_root.scss | 42 | ||||
| -rw-r--r-- | scss/_toasts.scss | 4 | ||||
| -rw-r--r-- | scss/_utilities.scss | 39 | ||||
| -rw-r--r-- | scss/_variables.scss | 49 | ||||
| -rw-r--r-- | scss/bootstrap-grid.scss | 4 | ||||
| -rw-r--r-- | scss/bootstrap-reboot.scss | 6 | ||||
| -rw-r--r-- | scss/bootstrap-utilities.scss | 2 | ||||
| -rw-r--r-- | scss/bootstrap.scss | 3 | ||||
| -rw-r--r-- | scss/mixins/_grid.scss | 32 | ||||
| -rw-r--r-- | scss/mixins/_utilities.scss | 33 |
16 files changed, 285 insertions, 80 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index ed74c82bf..22890f5c9 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -66,7 +66,7 @@ .card-link { &:hover { - text-decoration: none; + text-decoration: if($link-hover-decoration == underline, none, null); } + .card-link { diff --git a/scss/_functions.scss b/scss/_functions.scss index f8e43702d..30539b393 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -32,6 +32,47 @@ } } +// Colors +@function to-rgb($value) { + @return red($value), green($value), blue($value); +} + +// stylelint-disable scss/dollar-variable-pattern +@function rgba-css-var($identifier, $target) { + @if $identifier == "body" and $target == "bg" { + @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + } @if $identifier == "body" and $target == "text" { + @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + } @else { + @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + } +} + +@function map-loop($map, $func, $args...) { + $_map: (); + + @each $key, $value in $map { + // allow to pass the $key and $value of the map as an function argument + $_args: (); + @each $arg in $args { + $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg))); + } + + $_map: map-merge($_map, ($key: call(get-function($func), $_args...))); + } + + @return $_map; +} +// stylelint-enable scss/dollar-variable-pattern + +@function varify($list) { + $result: null; + @each $entry in $list { + $result: append($result, var(--#{$variable-prefix}#{$entry}), space); + } + @return $result; +} + // Internal Bootstrap function to turn maps into its negative variant. // It prefixes the keys with `n` and makes the value negative. @function negativify-map($map) { @@ -191,14 +232,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return $value1 + $value2; } - @if type-of($value1) != number { - $value1: unquote("(") + $value1 + unquote(")"); - } - - @if type-of($value2) != number { - $value2: unquote("(") + $value2 + unquote(")"); - } - @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); } @@ -219,10 +252,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return $value1 - $value2; } - @if type-of($value1) != number { - $value1: unquote("(") + $value1 + unquote(")"); - } - @if type-of($value2) != number { $value2: unquote("(") + $value2 + unquote(")"); } diff --git a/scss/_grid.scss b/scss/_grid.scss index 13f21a3ff..27fd55847 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -12,29 +12,6 @@ } } -@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) { - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - - @include media-breakpoint-up($breakpoint, $breakpoints) { - @if $columns > 0 { - @for $i from 1 through $columns { - .g-col#{$infix}-#{$i} { - grid-column: auto / span $i; - } - } - - // `$columns - 1` because offsetting by the width of an entire row isn't possible - @for $i from 0 through ($columns - 1) { - .g-start#{$infix}-#{$i} { - grid-column-start: $i; - } - } - } - } - } -} - @if $enable-cssgrid { .grid { display: grid; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index a395ede65..001dfc988 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -203,7 +203,7 @@ bottom: 0; z-index: 1000; flex-grow: 1; - visibility: visible !important; /* stylelint-disable-line declaration-no-important */ + visibility: visible !important; // stylelint-disable-line declaration-no-important background-color: transparent; border-right: 0; border-left: 0; diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss new file mode 100644 index 000000000..2f647cc9b --- /dev/null +++ b/scss/_placeholders.scss @@ -0,0 +1,51 @@ +.placeholder { + display: inline-block; + min-height: 1em; + vertical-align: middle; + cursor: wait; + background-color: currentColor; + opacity: $placeholder-opacity-max; + + &.btn::before { + display: inline-block; + content: ""; + } +} + +// Sizing +.placeholder-xs { + min-height: .6em; +} + +.placeholder-sm { + min-height: .8em; +} + +.placeholder-lg { + min-height: 1.2em; +} + +// Animation +.placeholder-glow { + .placeholder { + animation: placeholder-glow 2s ease-in-out infinite; + } +} + +@keyframes placeholder-glow { + 50% { + opacity: $placeholder-opacity-min; + } +} + +.placeholder-wave { + mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); + mask-size: 200% 100%; + animation: placeholder-wave 2s linear infinite; +} + +@keyframes placeholder-wave { + 100% { + mask-position: -200% 0%; + } +} diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 352046988..79fedc6ca 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -26,7 +26,9 @@ // null by default, thus nothing is generated. :root { - font-size: $font-size-root; + @if $font-size-root != null { + font-size: var(--#{$variable-prefix}root-font-size); + } @if $enable-smooth-scroll { @media (prefers-reduced-motion: no-preference) { @@ -43,18 +45,20 @@ // 3. Prevent adjustments of font size after orientation changes in iOS. // 4. Change the default tap highlight to be completely transparent in iOS. +// scss-docs-start reboot-body-rules body { margin: 0; // 1 - font-family: $font-family-base; - @include font-size($font-size-base); - font-weight: $font-weight-base; - line-height: $line-height-base; - color: $body-color; - text-align: $body-text-align; - background-color: $body-bg; // 2 + font-family: var(--#{$variable-prefix}body-font-family); + @include font-size(var(--#{$variable-prefix}body-font-size)); + font-weight: var(--#{$variable-prefix}body-font-weight); + line-height: var(--#{$variable-prefix}body-line-height); + color: var(--#{$variable-prefix}body-color); + text-align: var(--#{$variable-prefix}body-text-align); + background-color: var(--#{$variable-prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 } +// scss-docs-end reboot-body-rules // Content grouping diff --git a/scss/_root.scss b/scss/_root.scss index 768d6343f..5e138e97b 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,16 +1,54 @@ :root { - // Custom variable values only support SassScript inside `#{}`. + // Note: Custom variable values only support SassScript inside `#{}`. + + // Colors + // + // Generate palettes for full colors, grays, and theme colors. + @each $color, $value in $colors { --#{$variable-prefix}#{$color}: #{$value}; } + @each $color, $value in $grays { + --#{$variable-prefix}gray-#{$color}: #{$value}; + } + @each $color, $value in $theme-colors { --#{$variable-prefix}#{$color}: #{$value}; } - // Use `inspect` for lists so that quoted items keep the quotes. + @each $color, $value in $theme-colors-rgb { + --#{$variable-prefix}#{$color}-rgb: #{$value}; + } + + --#{$variable-prefix}white-rgb: #{to-rgb($white)}; + --#{$variable-prefix}black-rgb: #{to-rgb($black)}; + --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)}; + + // Fonts + + // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$variable-prefix}gradient: #{$gradient}; + + // Root and body + // stylelint-disable custom-property-empty-line-before + // scss-docs-start root-body-variables + @if $font-size-root != null { + --#{$variable-prefix}root-font-size: #{$font-size-root}; + } + --#{$variable-prefix}body-font-family: #{$font-family-base}; + --#{$variable-prefix}body-font-size: #{$font-size-base}; + --#{$variable-prefix}body-font-weight: #{$font-weight-base}; + --#{$variable-prefix}body-line-height: #{$line-height-base}; + --#{$variable-prefix}body-color: #{$body-color}; + @if $body-text-align != null { + --#{$variable-prefix}body-text-align: #{$body-text-align}; + } + --#{$variable-prefix}body-bg: #{$body-bg}; + // scss-docs-end root-body-variables + // stylelint-enable custom-property-empty-line-before } diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 717aae576..0a2d6ec87 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -10,11 +10,11 @@ box-shadow: $toast-box-shadow; @include border-radius($toast-border-radius); - &:not(.showing):not(.show) { + &.showing { opacity: 0; } - &.hide { + &:not(.show) { display: none; } } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 74f8a3a01..960d6f1ad 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -514,32 +514,55 @@ $utilities: map-merge( "color": ( property: color, class: text, + local-vars: ( + "text-opacity": 1 + ), values: map-merge( - $theme-colors, + $utilities-text-colors, ( - "white": $white, - "body": $body-color, "muted": $text-muted, - "black-50": rgba($black, .5), - "white-50": rgba($white, .5), + "black-50": rgba($black, .5), // deprecated + "white-50": rgba($white, .5), // deprecated "reset": inherit, ) ) ), + "text-opacity": ( + css-var: true, + class: text-opacity, + values: ( + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), // scss-docs-end utils-color // scss-docs-start utils-bg-color "background-color": ( property: background-color, class: bg, + local-vars: ( + "bg-opacity": 1 + ), values: map-merge( - $theme-colors, + $utilities-bg-colors, ( - "body": $body-bg, - "white": $white, "transparent": transparent ) ) ), + "bg-opacity": ( + css-var: true, + class: bg-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), // scss-docs-end utils-bg-color "gradient": ( property: background-image, diff --git a/scss/_variables.scss b/scss/_variables.scss index 3a77eec4c..9262ca495 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -90,6 +90,10 @@ $theme-colors: ( ) !default; // scss-docs-end theme-colors-map +// scss-docs-start theme-colors-rgb +$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; +// scss-docs-end theme-colors-rgb + // 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: 4.5 !default; @@ -401,6 +405,38 @@ $body-bg: $white !default; $body-color: $gray-900 !default; $body-text-align: null !default; +// Utilities maps +// +// Extends the default `$theme-colors` maps to help create our utilities. + +// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign. +// scss-docs-start utilities-colors +$utilities-colors: $theme-colors-rgb !default; +// scss-docs-end utilities-colors + +// scss-docs-start utilities-text-colors +$utilities-text: map-merge( + $utilities-colors, + ( + "black": to-rgb($black), + "white": to-rgb($white), + "body": to-rgb($body-color) + ) +) !default; +$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; +// scss-docs-end utilities-text-colors + +// scss-docs-start utilities-bg-colors +$utilities-bg: map-merge( + $utilities-colors, + ( + "black": to-rgb($black), + "white": to-rgb($white), + "body": to-rgb($body-bg) + ) +) !default; +$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; +// scss-docs-end utilities-bg-colors // Links // @@ -814,7 +850,7 @@ $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: $white !default; +$input-bg: $body-bg !default; $input-disabled-bg: $gray-200 !default; $input-disabled-border-color: null !default; @@ -1131,7 +1167,7 @@ $dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-box-shadow: $box-shadow !default; $dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: shade-color($gray-900, 10%) !default; +$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default; $dropdown-link-hover-bg: $gray-200 !default; $dropdown-link-active-color: $component-active-color !default; @@ -1203,6 +1239,13 @@ $pagination-border-radius-lg: $border-radius-lg !default; // scss-docs-end pagination-variables +// Placeholders + +// scss-docs-start placeholders +$placeholder-opacity-max: .5 !default; +$placeholder-opacity-min: .2 !default; +// scss-docs-end placeholders + // Cards // scss-docs-start card-variables @@ -1252,7 +1295,7 @@ $accordion-button-focus-border-color: $input-focus-border-color !default; $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-icon-width: 1.25rem !default; -$accordion-icon-color: $accordion-color !default; +$accordion-icon-color: $accordion-button-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; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index bcd8c19cf..bef4ecaec 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v5.0.2 (https://getbootstrap.com/) + * Bootstrap Grid v5.1.1 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -18,6 +18,8 @@ $include-column-box-sizing: true !default; @import "vendor/rfs"; +@import "root"; + @import "containers"; @import "grid"; diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index 72444f6c1..f31cbafaf 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/) + * Bootstrap Reboot v5.1.1 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -8,8 +8,6 @@ @import "functions"; @import "variables"; -// Prevent the usage of custom properties since we don't add them to `:root` in reboot -$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default -$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default @import "mixins"; +@import "root"; @import "reboot"; diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss index ab2d0e701..6d80d3f3f 100644 --- a/scss/bootstrap-utilities.scss +++ b/scss/bootstrap-utilities.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/) + * Bootstrap Utilities v5.1.1 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index eb047a3f2..c9c9af234 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v5.0.2 (https://getbootstrap.com/) + * Bootstrap v5.1.1 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -43,6 +43,7 @@ @import "carousel"; @import "spinners"; @import "offcanvas"; +@import "placeholders"; // Helpers @import "helpers"; diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index ff6941c46..59cc56376 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -66,8 +66,8 @@ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { - // .row-cols defaults must all appear before .col overrides so they can be overridden. $infix: breakpoint-infix($breakpoint, $breakpoints); + @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { @@ -85,13 +85,7 @@ } } } - } - } - - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $breakpoints) { .col#{$infix}-auto { @include make-col-auto(); } @@ -130,3 +124,27 @@ } } } + +@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) { + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { + @if $columns > 0 { + @for $i from 1 through $columns { + .g-col#{$infix}-#{$i} { + grid-column: auto / span $i; + } + } + + // Start with `1` because `0` is and invalid value. + // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible. + @for $i from 1 through ($columns - 1) { + .g-start#{$infix}-#{$i} { + grid-column-start: $i; + } + } + } + } + } +} diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 4d2370a0b..e871b4233 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -41,25 +41,46 @@ } } + $is-css-var: map-get($utility, css-var); + $is-local-vars: map-get($utility, local-vars); $is-rtl: map-get($utility, rtl); @if $value != null { @if $is-rtl == false { /* rtl:begin:remove */ } - .#{$property-class + $infix + $property-class-modifier} { - @each $property in $properties { - #{$property}: $value if($enable-important-utilities, !important, null); + + @if $is-css-var { + .#{$property-class + $infix + $property-class-modifier} { + --#{$variable-prefix}#{$property-class}: #{$value}; } - } - @each $pseudo in $state { - .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + --#{$variable-prefix}#{$property-class}: #{$value}; + } + } + } @else { + .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { + @if $is-local-vars { + @each $local-var, $value in $is-local-vars { + --#{$variable-prefix}#{$local-var}: #{$value}; + } + } #{$property}: $value if($enable-important-utilities, !important, null); } } + + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + @each $property in $properties { + #{$property}: $value if($enable-important-utilities, !important, null); + } + } + } } + @if $is-rtl == false { /* rtl:end:remove */ } |