diff --git a/src/assets/styles/bootstrap/_accordion.scss b/src/assets/styles/bootstrap/_accordion.scss
index ae1ca0fb..fc62ceb8 100644
--- a/src/assets/styles/bootstrap/_accordion.scss
+++ b/src/assets/styles/bootstrap/_accordion.scss
@@ -58,7 +58,6 @@
}
.accordion-item {
- margin-bottom: -$accordion-border-width;
background-color: $accordion-bg;
border: $accordion-border-width solid $accordion-border-color;
@@ -70,9 +69,12 @@
}
}
+ &:not(:first-of-type) {
+ border-top: 0;
+ }
+
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
- margin-bottom: 0;
@include border-bottom-radius($accordion-border-radius);
.accordion-button {
diff --git a/src/assets/styles/bootstrap/_card.scss b/src/assets/styles/bootstrap/_card.scss
index b9a0a81f..22890f5c 100644
--- a/src/assets/styles/bootstrap/_card.scss
+++ b/src/assets/styles/bootstrap/_card.scss
@@ -13,6 +13,7 @@
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
+ @include box-shadow($card-box-shadow);
> hr {
margin-right: 0;
@@ -55,7 +56,7 @@
}
.card-subtitle {
- margin-top: -$card-title-spacer-y * 0.5;
+ margin-top: -$card-title-spacer-y * .5;
margin-bottom: 0;
}
@@ -65,7 +66,7 @@
.card-link {
&:hover {
- text-decoration: none;
+ text-decoration: if($link-hover-decoration == underline, none, null);
}
+ .card-link {
@@ -106,9 +107,9 @@
//
.card-header-tabs {
- margin-right: -$card-cap-padding-x * 0.5;
+ margin-right: -$card-cap-padding-x * .5;
margin-bottom: -$card-cap-padding-y;
- margin-left: -$card-cap-padding-x * 0.5;
+ margin-left: -$card-cap-padding-x * .5;
border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg {
@@ -120,8 +121,8 @@
}
.card-header-pills {
- margin-right: -$card-cap-padding-x * 0.5;
- margin-left: -$card-cap-padding-x * 0.5;
+ margin-right: -$card-cap-padding-x * .5;
+ margin-left: -$card-cap-padding-x * .5;
}
// Card image
diff --git a/src/assets/styles/bootstrap/_carousel.scss b/src/assets/styles/bootstrap/_carousel.scss
index 52aefb4e..3d8fb15a 100644
--- a/src/assets/styles/bootstrap/_carousel.scss
+++ b/src/assets/styles/bootstrap/_carousel.scss
@@ -202,9 +202,9 @@
.carousel-caption {
position: absolute;
- right: (100% - $carousel-caption-width) * 0.5;
+ right: (100% - $carousel-caption-width) * .5;
bottom: $carousel-caption-spacer;
- left: (100% - $carousel-caption-width) * 0.5;
+ left: (100% - $carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;
diff --git a/src/assets/styles/bootstrap/_dropdown.scss b/src/assets/styles/bootstrap/_dropdown.scss
index 209843fa..adc11432 100644
--- a/src/assets/styles/bootstrap/_dropdown.scss
+++ b/src/assets/styles/bootstrap/_dropdown.scss
@@ -16,7 +16,6 @@
// The dropdown menu
.dropdown-menu {
position: absolute;
- top: 100%;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
min-width: $dropdown-min-width;
@@ -33,6 +32,7 @@
@include box-shadow($dropdown-box-shadow);
&[data-bs-popper] {
+ top: 100%;
left: 0;
margin-top: $dropdown-spacer;
}
@@ -50,8 +50,8 @@
--bs-position: start;
&[data-bs-popper] {
- right: auto #{"/* rtl:ignore */"};
- left: 0 #{"/* rtl:ignore */"};
+ right: auto;
+ left: 0;
}
}
@@ -59,8 +59,8 @@
--bs-position: end;
&[data-bs-popper] {
- right: 0 #{"/* rtl:ignore */"};
- left: auto #{"/* rtl:ignore */"};
+ right: 0;
+ left: auto;
}
}
}
@@ -83,15 +83,12 @@
}
.dropend {
- .dropdown-menu {
+ .dropdown-menu[data-bs-popper] {
top: 0;
right: auto;
left: 100%;
-
- &[data-bs-popper] {
- margin-top: 0;
- margin-left: $dropdown-spacer;
- }
+ margin-top: 0;
+ margin-left: $dropdown-spacer;
}
.dropdown-toggle {
@@ -103,15 +100,12 @@
}
.dropstart {
- .dropdown-menu {
+ .dropdown-menu[data-bs-popper] {
top: 0;
right: 100%;
left: auto;
-
- &[data-bs-popper] {
- margin-top: 0;
- margin-right: $dropdown-spacer;
- }
+ margin-top: 0;
+ margin-right: $dropdown-spacer;
}
.dropdown-toggle {
diff --git a/src/assets/styles/bootstrap/_functions.scss b/src/assets/styles/bootstrap/_functions.scss
index bd31abe9..e0039550 100644
--- a/src/assets/styles/bootstrap/_functions.scss
+++ b/src/assets/styles/bootstrap/_functions.scss
@@ -4,8 +4,6 @@
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
-@use "sass:math";
-
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@@ -34,6 +32,41 @@
}
}
+// Colors
+@function to-rgb($value) {
+ @return red($value), green($value), blue($value);
+}
+
+@function rgba-css-var($identifier, $target) {
+ @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@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) {
@@ -57,6 +90,16 @@
@return $result;
}
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+ $merged-maps: ();
+
+ @each $map in $maps {
+ $merged-maps: map-merge($merged-maps, $map);
+ }
+ @return $merged-maps;
+}
+
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
@@ -97,7 +140,7 @@
// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168
-// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@@ -125,7 +168,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
- @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}
// Return WCAG2.0 relative luminance
@@ -139,7 +182,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
);
@each $name, $value in $rgb {
- $value: if(math.div($value, 255) < .03928, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
+ $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@@ -203,5 +246,51 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $value1 - $value2;
}
+ @if type-of($value2) != number {
+ $value2: unquote("(") + $value2 + unquote(")");
+ }
+
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
diff --git a/src/assets/styles/bootstrap/_grid.scss b/src/assets/styles/bootstrap/_grid.scss
index 5686f31f..27fd5584 100644
--- a/src/assets/styles/bootstrap/_grid.scss
+++ b/src/assets/styles/bootstrap/_grid.scss
@@ -12,6 +12,17 @@
}
}
+@if $enable-cssgrid {
+ .grid {
+ display: grid;
+ grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
+ grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+ gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+
+ @include make-cssgrid();
+ }
+}
+
// Columns
//
diff --git a/src/assets/styles/bootstrap/_helpers.scss b/src/assets/styles/bootstrap/_helpers.scss
index 8f566d12..4a989f5a 100644
--- a/src/assets/styles/bootstrap/_helpers.scss
+++ b/src/assets/styles/bootstrap/_helpers.scss
@@ -2,6 +2,8 @@
@import "helpers/colored-links";
@import "helpers/ratio";
@import "helpers/position";
+@import "helpers/stacks";
@import "helpers/visually-hidden";
@import "helpers/stretched-link";
@import "helpers/text-truncation";
+@import "helpers/vr";
diff --git a/src/assets/styles/bootstrap/_images.scss b/src/assets/styles/bootstrap/_images.scss
index 02ad4c36..3d6a1014 100644
--- a/src/assets/styles/bootstrap/_images.scss
+++ b/src/assets/styles/bootstrap/_images.scss
@@ -32,7 +32,7 @@
}
.figure-img {
- margin-bottom: $spacer * 0.5;
+ margin-bottom: $spacer * .5;
line-height: 1;
}
diff --git a/src/assets/styles/bootstrap/_list-group.scss b/src/assets/styles/bootstrap/_list-group.scss
index 2193168c..dcd61d2b 100644
--- a/src/assets/styles/bootstrap/_list-group.scss
+++ b/src/assets/styles/bootstrap/_list-group.scss
@@ -163,12 +163,12 @@
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
- $list-group-background: shift-color($value, $list-group-item-bg-scale);
- $list-group-color: shift-color($value, $list-group-item-color-scale);
- @if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
- $list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
+ $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
+ $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
+ @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
+ $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
- @include list-group-item-variant($state, $list-group-background, $list-group-color);
+ @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
// scss-docs-end list-group-modifiers
diff --git a/src/assets/styles/bootstrap/_mixins.scss b/src/assets/styles/bootstrap/_mixins.scss
index 7b06cd81..af1f74f7 100644
--- a/src/assets/styles/bootstrap/_mixins.scss
+++ b/src/assets/styles/bootstrap/_mixins.scss
@@ -10,6 +10,7 @@
// Helpers
@import "mixins/breakpoints";
+@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/visually-hidden";
@@ -21,6 +22,7 @@
// Components
@import "mixins/alert";
+@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
diff --git a/src/assets/styles/bootstrap/_modal.scss b/src/assets/styles/bootstrap/_modal.scss
index 2958e571..21e1258f 100644
--- a/src/assets/styles/bootstrap/_modal.scss
+++ b/src/assets/styles/bootstrap/_modal.scss
@@ -4,18 +4,6 @@
// .modal-content - actual modal w/ bg and corners and stuff
-@use "sass:math";
-
-.modal-open {
- // Kill the scroll on the body
- overflow: hidden;
-
- .modal {
- overflow-x: hidden;
- overflow-y: auto;
- }
-}
-
// Container that the modal scrolls within
.modal {
position: fixed;
@@ -25,7 +13,8 @@
display: none;
width: 100%;
height: 100%;
- overflow: hidden;
+ overflow-x: hidden;
+ overflow-y: auto;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
@@ -96,17 +85,7 @@
// Modal background
.modal-backdrop {
- position: fixed;
- top: 0;
- left: 0;
- z-index: $zindex-modal-backdrop;
- width: 100vw;
- height: 100vh;
- background-color: $modal-backdrop-bg;
-
- // Fade for backdrop
- &.fade { opacity: 0; }
- &.show { opacity: $modal-backdrop-opacity; }
+ @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
}
// Modal header
@@ -121,8 +100,8 @@
@include border-top-radius($modal-content-inner-border-radius);
.btn-close {
- padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
- margin: math.div($modal-header-padding-y, -2) math.div($modal-header-padding-x, -2) math.div($modal-header-padding-y, -2) auto;
+ padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
+ margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
}
}
@@ -149,7 +128,7 @@
flex-shrink: 0;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
- padding: $modal-inner-padding - $modal-footer-margin-between * 0.5;
+ padding: $modal-inner-padding - $modal-footer-margin-between * .5;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius);
@@ -157,19 +136,10 @@
// This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * {
- margin: $modal-footer-margin-between * 0.5;
+ margin: $modal-footer-margin-between * .5;
}
}
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
- position: absolute;
- top: -9999px;
- width: 50px;
- height: 50px;
- overflow: scroll;
-}
-
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
diff --git a/src/assets/styles/bootstrap/_nav.scss b/src/assets/styles/bootstrap/_nav.scss
index f8b41635..3da71e93 100644
--- a/src/assets/styles/bootstrap/_nav.scss
+++ b/src/assets/styles/bootstrap/_nav.scss
@@ -71,7 +71,6 @@
&:hover,
&:focus {
border-color: $nav-tabs-link-hover-border-color;
- //background: $nav-tabs-link-hover-bg;
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
}
diff --git a/src/assets/styles/bootstrap/_navbar.scss b/src/assets/styles/bootstrap/_navbar.scss
index 2ccef11b..001dfc98 100644
--- a/src/assets/styles/bootstrap/_navbar.scss
+++ b/src/assets/styles/bootstrap/_navbar.scss
@@ -193,13 +193,42 @@
.navbar-toggler {
display: none;
}
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .offcanvas {
+ position: inherit;
+ bottom: 0;
+ z-index: 1000;
+ flex-grow: 1;
+ visibility: visible !important; // stylelint-disable-line declaration-no-important
+ background-color: transparent;
+ border-right: 0;
+ border-left: 0;
+ @include transition(none);
+ transform: none;
+ }
+ .offcanvas-top,
+ .offcanvas-bottom {
+ height: auto;
+ border-top: 0;
+ border-bottom: 0;
+ }
+
+ .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ }
}
}
}
}
// scss-docs-end navbar-expand-loop
-
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
diff --git a/src/assets/styles/bootstrap/_offcanvas.scss b/src/assets/styles/bootstrap/_offcanvas.scss
index 00a60528..a089c2a0 100644
--- a/src/assets/styles/bootstrap/_offcanvas.scss
+++ b/src/assets/styles/bootstrap/_offcanvas.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
.offcanvas {
position: fixed;
bottom: 0;
@@ -16,14 +14,21 @@
@include transition(transform $offcanvas-transition-duration ease-in-out);
}
+.offcanvas-backdrop {
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}
+
.offcanvas-header {
display: flex;
+ align-items: center;
justify-content: space-between;
padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close {
- padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
- margin: math.div($offcanvas-padding-y, -2) math.div($offcanvas-padding-x, -2) math.div($offcanvas-padding-y, -2) auto;
+ padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
+ margin-top: $offcanvas-padding-y * -.5;
+ margin-right: $offcanvas-padding-x * -.5;
+ margin-bottom: $offcanvas-padding-y * -.5;
}
}
@@ -54,6 +59,16 @@
transform: translateX(100%);
}
+.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: $offcanvas-vertical-height;
+ max-height: 100%;
+ border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+ transform: translateY(-100%);
+}
+
.offcanvas-bottom {
right: 0;
left: 0;
@@ -66,14 +81,3 @@
.offcanvas.show {
transform: none;
}
-
-.offcanvas-backdrop::before {
- position: fixed;
- top: 0;
- left: 0;
- z-index: $zindex-offcanvas - 1;
- width: 100vw;
- height: 100vh;
- content: "";
- background-color: $offcanvas-body-backdrop-color;
-}
diff --git a/src/assets/styles/bootstrap/_placeholders.scss b/src/assets/styles/bootstrap/_placeholders.scss
new file mode 100644
index 00000000..2f647cc9
--- /dev/null
+++ b/src/assets/styles/bootstrap/_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/src/assets/styles/bootstrap/_popover.scss b/src/assets/styles/bootstrap/_popover.scss
index 12f1a943..3b8208e1 100644
--- a/src/assets/styles/bootstrap/_popover.scss
+++ b/src/assets/styles/bootstrap/_popover.scss
@@ -40,13 +40,13 @@
&::before {
bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-color;
}
}
@@ -60,13 +60,13 @@
&::before {
left: 0;
- border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: $popover-border-width;
- border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-color;
}
}
@@ -78,13 +78,13 @@
&::before {
top: 0;
- border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: $popover-border-width;
- border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-color;
}
}
@@ -96,7 +96,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
- margin-left: -$popover-arrow-width * 0.5;
+ margin-left: -$popover-arrow-width * .5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@@ -110,13 +110,13 @@
&::before {
right: 0;
- border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: $popover-border-width;
- border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
@@ -144,7 +144,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
- border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+ border-bottom: $popover-border-width solid $popover-border-color;
@include border-top-radius($popover-inner-border-radius);
&:empty {
diff --git a/src/assets/styles/bootstrap/_reboot.scss b/src/assets/styles/bootstrap/_reboot.scss
index 35204698..80bfffb6 100644
--- a/src/assets/styles/bootstrap/_reboot.scss
+++ b/src/assets/styles/bootstrap/_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/src/assets/styles/bootstrap/_root.scss b/src/assets/styles/bootstrap/_root.scss
index 768d6343..189b2b3b 100644
--- a/src/assets/styles/bootstrap/_root.scss
+++ b/src/assets/styles/bootstrap/_root.scss
@@ -1,16 +1,53 @@
: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-rgb: #{to-rgb($body-color)};
+
+ // 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/src/assets/styles/bootstrap/_spinners.scss b/src/assets/styles/bootstrap/_spinners.scss
index 8e19bae5..a4a2c77c 100644
--- a/src/assets/styles/bootstrap/_spinners.scss
+++ b/src/assets/styles/bootstrap/_spinners.scss
@@ -12,7 +12,7 @@
display: inline-block;
width: $spinner-width;
height: $spinner-height;
- vertical-align: text-bottom;
+ vertical-align: $spinner-vertical-align;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
// stylelint-disable-next-line property-disallowed-list
@@ -46,7 +46,7 @@
display: inline-block;
width: $spinner-width;
height: $spinner-height;
- vertical-align: text-bottom;
+ vertical-align: $spinner-vertical-align;
background-color: currentColor;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
diff --git a/src/assets/styles/bootstrap/_tables.scss b/src/assets/styles/bootstrap/_tables.scss
index 50368293..92556ba0 100644
--- a/src/assets/styles/bootstrap/_tables.scss
+++ b/src/assets/styles/bootstrap/_tables.scss
@@ -4,6 +4,7 @@
.table {
--#{$variable-prefix}table-bg: #{$table-bg};
+ --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
--#{$variable-prefix}table-active-color: #{$table-active-color};
diff --git a/src/assets/styles/bootstrap/_toasts.scss b/src/assets/styles/bootstrap/_toasts.scss
index 93122c54..0a2d6ec8 100644
--- a/src/assets/styles/bootstrap/_toasts.scss
+++ b/src/assets/styles/bootstrap/_toasts.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
.toast {
width: $toast-max-width;
max-width: 100%;
@@ -12,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;
}
}
@@ -42,7 +40,7 @@
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
.btn-close {
- margin-right: math.div($toast-padding-x, -2);
+ margin-right: $toast-padding-x * -.5;
margin-left: $toast-padding-x;
}
}
diff --git a/src/assets/styles/bootstrap/_tooltip.scss b/src/assets/styles/bootstrap/_tooltip.scss
index a175e707..75ff0783 100644
--- a/src/assets/styles/bootstrap/_tooltip.scss
+++ b/src/assets/styles/bootstrap/_tooltip.scss
@@ -37,7 +37,7 @@
&::before {
top: -1px;
- border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-top-color: $tooltip-arrow-color;
}
}
@@ -53,7 +53,7 @@
&::before {
right: -1px;
- border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
+ border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-right-color: $tooltip-arrow-color;
}
}
@@ -67,7 +67,7 @@
&::before {
bottom: -1px;
- border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
+ border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
@@ -83,7 +83,7 @@
&::before {
left: -1px;
- border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
+ border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
diff --git a/src/assets/styles/bootstrap/_transitions.scss b/src/assets/styles/bootstrap/_transitions.scss
index 2905df45..bfb26aa8 100644
--- a/src/assets/styles/bootstrap/_transitions.scss
+++ b/src/assets/styles/bootstrap/_transitions.scss
@@ -17,5 +17,11 @@
height: 0;
overflow: hidden;
@include transition($transition-collapse);
+
+ &.collapse-horizontal {
+ width: 0;
+ height: auto;
+ @include transition($transition-collapse-width);
+ }
}
// scss-docs-end collapse-classes
diff --git a/src/assets/styles/bootstrap/_utilities.scss b/src/assets/styles/bootstrap/_utilities.scss
index 3c927cf5..960d6f1a 100644
--- a/src/assets/styles/bootstrap/_utilities.scss
+++ b/src/assets/styles/bootstrap/_utilities.scss
@@ -24,6 +24,19 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-float
+ // Opacity utilities
+ // scss-docs-start utils-opacity
+ "opacity": (
+ property: opacity,
+ values: (
+ 0: 0,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1,
+ )
+ ),
+ // scss-docs-end utils-opacity
// scss-docs-start utils-overflow
"overflow": (
property: overflow,
@@ -501,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/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index 9533508f..57aa9b7d 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -93,7 +93,6 @@ $danger: $red !default;
$light: #DFDFDF !default;
$dark: rgba(28,28,32,.9803921568627451) !default;
$light-dark: $gray-800 !default;
-
// scss-docs-end theme-color-variables
$bg-tertiary-split-background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%) !default;
@@ -131,6 +130,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;
@@ -239,6 +242,126 @@ $cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-200,
+ "purple-200": $purple-100,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
// fusv-enable
// Characters which are escaped by the escape-svg function
@@ -262,10 +385,11 @@ $enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
+$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
-$enable-negative-margins: true !default;
+$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
@@ -291,8 +415,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
$spacer: 1rem !default;
$spacers: (
0: 0,
- 1: $spacer * 0.25,
- 2: $spacer * 0.5,
+ 1: $spacer * .25,
+ 2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
@@ -326,6 +450,28 @@ $body-bg: $black !default;
$body-color: $white !default;
$body-text-align: null !default;
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// scss-docs-start utilities-colors
+$utilities-colors: map-merge(
+ $theme-colors-rgb,
+ (
+ "black": to-rgb($black),
+ "white": to-rgb($white),
+ "body": to-rgb($body-color)
+ )
+) !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !default;
+// scss-docs-end utilities-bg-colors
// Links
//
@@ -390,13 +536,13 @@ $container-max-widths: (
$grid-columns: 12 !default;
$grid-gutter-width: 16px !default;
-$grid-row-columns: 18 !default;
+$grid-row-columns: 18 !default; //6
$gutters: $spacers !default;
// Container padding
-$container-padding-x: $grid-gutter-width * 0.5 !default;
+$container-padding-x: $grid-gutter-width * .5 !default;
// Components
@@ -443,6 +589,7 @@ $transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
@@ -468,8 +615,8 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
-// $font-size-base effects the font size of the body text
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
$font-size-root: null !default;
$font-size-base: .9rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875 !default;
@@ -512,7 +659,7 @@ $font-sizes: (
// scss-docs-end font-sizes
// scss-docs-start headings-variables
-$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
@@ -554,7 +701,7 @@ $blockquote-footer-font-size: $small-font-size !default;
$hr-margin-y: $spacer !default;
$hr-color: rgba($white, 0.1) !default;
$hr-height: $border-width !default;
-$hr-opacity: 0.5 !default;
+$hr-opacity: .5 !default;
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
@@ -586,6 +733,7 @@ $table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: transparent !default;
+$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
@@ -769,13 +917,15 @@ $input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.5) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
// scss-docs-end form-input-variables
// scss-docs-start form-check-variables
@@ -790,7 +940,7 @@ $form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
-$form-check-input-border: 1px solid rgba(0, 0, 0, .25) !default;
+$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
@@ -877,6 +1027,8 @@ $form-select-font-size-sm: $input-font-size-sm !default;
$form-select-padding-y-lg: $input-padding-y-lg !default;
$form-select-padding-x-lg: $input-padding-x-lg !default;
$form-select-font-size-lg: $input-font-size-lg !default;
+
+$form-select-transition: $input-transition !default;
// scss-docs-end form-select-variables
// scss-docs-start form-range-variables
@@ -908,6 +1060,7 @@ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
@@ -954,9 +1107,10 @@ $form-validation-states: (
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
-$zindex-offcanvas: 1040 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
$zindex-modal-backdrop: 1050 !default;
-$zindex-modal: 1060 !default;
+$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
// scss-docs-end zindex-stack
@@ -993,7 +1147,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
// scss-docs-start navbar-variables
-$navbar-padding-y: $spacer * 0.5 !default;
+$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
@@ -1002,7 +1156,7 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
@@ -1052,7 +1206,7 @@ $dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
@@ -1064,7 +1218,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-500 !default;
-$dropdown-item-padding-y: $spacer * 0.25 !default;
+$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
@@ -1128,17 +1282,25 @@ $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
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
-$card-title-spacer-y: $spacer * 0.5 !default;
+$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !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-cap-padding-y: $card-spacer-y * 0.5 !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
@@ -1146,7 +1308,7 @@ $card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-img-overlay-padding: $spacer !default;
-$card-group-margin: $grid-gutter-width * 0.5 !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
// Accordion
@@ -1176,10 +1338,10 @@ $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;
+$accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,") !default;
$accordion-button-active-icon: url("data:image/svg+xml,") !default;
@@ -1194,8 +1356,8 @@ $tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default;
-$tooltip-padding-y: $spacer * 0.25 !default;
-$tooltip-padding-x: $spacer * 0.5 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
@@ -1211,7 +1373,7 @@ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-start tooltip-feedback-variables
+// scss-docs-end tooltip-feedback-variables
// Popovers
@@ -1361,7 +1523,7 @@ $list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
-$list-group-item-padding-y: $spacer * 0.5 !default;
+$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;
@@ -1460,6 +1622,7 @@ $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-animation-speed: .75s !default;
@@ -1500,8 +1663,9 @@ $offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default;
-$offcanvas-body-backdrop-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables
// Code
diff --git a/src/assets/styles/bootstrap/bootstrap-grid.scss b/src/assets/styles/bootstrap/bootstrap-grid.scss
index 8116a0ff..2c68fbbf 100644
--- a/src/assets/styles/bootstrap/bootstrap-grid.scss
+++ b/src/assets/styles/bootstrap/bootstrap-grid.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.1.0 (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/src/assets/styles/bootstrap/bootstrap-reboot.scss b/src/assets/styles/bootstrap/bootstrap-reboot.scss
index 3eff8820..0c4bbe58 100644
--- a/src/assets/styles/bootstrap/bootstrap-reboot.scss
+++ b/src/assets/styles/bootstrap/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.1.0 (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/src/assets/styles/bootstrap/bootstrap-utilities.scss b/src/assets/styles/bootstrap/bootstrap-utilities.scss
index 9331d809..297e825f 100644
--- a/src/assets/styles/bootstrap/bootstrap-utilities.scss
+++ b/src/assets/styles/bootstrap/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.1.0 (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/src/assets/styles/bootstrap/bootstrap.scss b/src/assets/styles/bootstrap/bootstrap.scss
index 1a975a3d..e42b4b45 100644
--- a/src/assets/styles/bootstrap/bootstrap.scss
+++ b/src/assets/styles/bootstrap/bootstrap.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
+ * Bootstrap v5.1.0 (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/src/assets/styles/bootstrap/forms/_floating-labels.scss b/src/assets/styles/bootstrap/forms/_floating-labels.scss
index 8b2e2b8e..2f429548 100644
--- a/src/assets/styles/bootstrap/forms/_floating-labels.scss
+++ b/src/assets/styles/bootstrap/forms/_floating-labels.scss
@@ -4,7 +4,7 @@
> .form-control,
> .form-select {
height: $form-floating-height;
- padding: $form-floating-padding-y $form-floating-padding-x;
+ line-height: $form-floating-line-height;
}
> label {
@@ -21,6 +21,8 @@
// stylelint-disable no-duplicate-selectors
> .form-control {
+ padding: $form-floating-padding-y $form-floating-padding-x;
+
&::placeholder {
color: transparent;
}
diff --git a/src/assets/styles/bootstrap/forms/_form-check.scss b/src/assets/styles/bootstrap/forms/_form-check.scss
index 501e8bb4..6321b410 100644
--- a/src/assets/styles/bootstrap/forms/_form-check.scss
+++ b/src/assets/styles/bootstrap/forms/_form-check.scss
@@ -17,7 +17,7 @@
.form-check-input {
width: $form-check-input-width;
height: $form-check-input-width;
- margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
+ margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
background-repeat: no-repeat;
diff --git a/src/assets/styles/bootstrap/forms/_form-control.scss b/src/assets/styles/bootstrap/forms/_form-control.scss
index 9728b91f..96423c53 100644
--- a/src/assets/styles/bootstrap/forms/_form-control.scss
+++ b/src/assets/styles/bootstrap/forms/_form-control.scss
@@ -199,7 +199,7 @@ textarea {
// stylelint-enable selector-no-qualifying-type
.form-control-color {
- max-width: 3rem;
+ width: $form-color-width;
height: auto; // Override fixed browser height
padding: $input-padding-y;
diff --git a/src/assets/styles/bootstrap/forms/_form-range.scss b/src/assets/styles/bootstrap/forms/_form-range.scss
index 2a0f6571..6de42132 100644
--- a/src/assets/styles/bootstrap/forms/_form-range.scss
+++ b/src/assets/styles/bootstrap/forms/_form-range.scss
@@ -27,7 +27,7 @@
&::-webkit-slider-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
- margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
+ margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
diff --git a/src/assets/styles/bootstrap/forms/_form-select.scss b/src/assets/styles/bootstrap/forms/_form-select.scss
index 15d5061a..4506a979 100644
--- a/src/assets/styles/bootstrap/forms/_form-select.scss
+++ b/src/assets/styles/bootstrap/forms/_form-select.scss
@@ -7,6 +7,8 @@
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+ // stylelint-disable-next-line property-no-vendor-prefix
+ -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
font-family: $form-select-font-family;
@include font-size($form-select-font-size);
font-weight: $form-select-font-weight;
@@ -20,6 +22,7 @@
border: $form-select-border-width solid $form-select-border-color;
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);
+ @include transition($form-select-transition);
appearance: none;
&:focus {
diff --git a/src/assets/styles/bootstrap/helpers/_stacks.scss b/src/assets/styles/bootstrap/helpers/_stacks.scss
new file mode 100644
index 00000000..6cd237ae
--- /dev/null
+++ b/src/assets/styles/bootstrap/helpers/_stacks.scss
@@ -0,0 +1,15 @@
+// scss-docs-start stacks
+.hstack {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ align-self: stretch;
+}
+
+.vstack {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-self: stretch;
+}
+// scss-docs-end stacks
diff --git a/src/assets/styles/bootstrap/helpers/_vr.scss b/src/assets/styles/bootstrap/helpers/_vr.scss
new file mode 100644
index 00000000..37f86477
--- /dev/null
+++ b/src/assets/styles/bootstrap/helpers/_vr.scss
@@ -0,0 +1,8 @@
+.vr {
+ display: inline-block;
+ align-self: stretch;
+ width: 1px;
+ min-height: 1em;
+ background-color: currentColor;
+ opacity: $hr-opacity;
+}
diff --git a/src/assets/styles/bootstrap/mixins/_backdrop.scss b/src/assets/styles/bootstrap/mixins/_backdrop.scss
new file mode 100644
index 00000000..9705ae9e
--- /dev/null
+++ b/src/assets/styles/bootstrap/mixins/_backdrop.scss
@@ -0,0 +1,14 @@
+// Shared between modals and offcanvases
+@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: $zindex;
+ width: 100vw;
+ height: 100vh;
+ background-color: $backdrop-bg;
+
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+ &.show { opacity: $backdrop-opacity; }
+}
diff --git a/src/assets/styles/bootstrap/mixins/_buttons.scss b/src/assets/styles/bootstrap/mixins/_buttons.scss
index 618a9ac3..b6749966 100644
--- a/src/assets/styles/bootstrap/mixins/_buttons.scss
+++ b/src/assets/styles/bootstrap/mixins/_buttons.scss
@@ -11,7 +11,7 @@
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
- $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
@@ -20,7 +20,7 @@
) {
color: $color;
@include gradient-bg($background);
- border-color: $btn-border-colour;
+ border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
diff --git a/src/assets/styles/bootstrap/mixins/_color-scheme.scss b/src/assets/styles/bootstrap/mixins/_color-scheme.scss
new file mode 100644
index 00000000..90497aa0
--- /dev/null
+++ b/src/assets/styles/bootstrap/mixins/_color-scheme.scss
@@ -0,0 +1,7 @@
+// scss-docs-start mixin-color-scheme
+@mixin color-scheme($name) {
+ @media (prefers-color-scheme: #{$name}) {
+ @content;
+ }
+}
+// scss-docs-end mixin-color-scheme
diff --git a/src/assets/styles/bootstrap/mixins/_forms.scss b/src/assets/styles/bootstrap/mixins/_forms.scss
index a1e0849d..dc5bdb0b 100644
--- a/src/assets/styles/bootstrap/mixins/_forms.scss
+++ b/src/assets/styles/bootstrap/mixins/_forms.scss
@@ -88,10 +88,13 @@
border-color: $color;
@if $enable-validation-icons {
- padding-right: $form-select-feedback-icon-padding-end;
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
- background-position: $form-select-bg-position, $form-select-feedback-icon-position;
- background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+ &:not([multiple]):not([size]),
+ &:not([multiple])[size="1"] {
+ padding-right: $form-select-feedback-icon-padding-end;
+ background-image: escape-svg($form-select-indicator), escape-svg($icon);
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+ }
}
&:focus {
@@ -127,7 +130,14 @@
.input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) {
- z-index: 3;
+ @if $state == "valid" {
+ z-index: 1;
+ } @else if $state == "invalid" {
+ z-index: 2;
+ }
+ &:focus {
+ z-index: 3;
+ }
}
}
}
diff --git a/src/assets/styles/bootstrap/mixins/_grid.scss b/src/assets/styles/bootstrap/mixins/_grid.scss
index 1672bdd6..59cc5637 100644
--- a/src/assets/styles/bootstrap/mixins/_grid.scss
+++ b/src/assets/styles/bootstrap/mixins/_grid.scss
@@ -1,17 +1,15 @@
-/// Grid system
+// Grid system
//
// Generate semantic grid columns with these mixins.
-@use "sass:math";
-
@mixin make-row($gutter: $grid-gutter-width) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
- margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
- margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+ margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -23,14 +21,20 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
- padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
- padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+ padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y);
}
-@mixin make-col($size, $columns: $grid-columns) {
- flex: 0 0 auto;
- width: percentage(math.div($size, $columns));
+@mixin make-col($size: false, $columns: $grid-columns) {
+ @if $size {
+ flex: 0 0 auto;
+ width: percentage(divide($size, $columns));
+
+ } @else {
+ flex: 1 1 0;
+ max-width: 100%;
+ }
}
@mixin make-col-auto() {
@@ -39,7 +43,7 @@
}
@mixin make-col-offset($size, $columns: $grid-columns) {
- $num: math.div($size, $columns);
+ $num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
@@ -51,7 +55,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
- width: math.div(100%, $count);
+ width: divide(100%, $count);
}
}
@@ -120,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/src/assets/styles/bootstrap/mixins/_utilities.scss b/src/assets/styles/bootstrap/mixins/_utilities.scss
index 4d2370a0..e871b423 100644
--- a/src/assets/styles/bootstrap/mixins/_utilities.scss
+++ b/src/assets/styles/bootstrap/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);
- }
- }
- @each $pseudo in $state {
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+ @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} {
+ --#{$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 */
}
diff --git a/src/assets/styles/bootstrap/vendor/_rfs.scss b/src/assets/styles/bootstrap/vendor/_rfs.scss
index 02fe6bf6..7e9a6c7a 100644
--- a/src/assets/styles/bootstrap/vendor/_rfs.scss
+++ b/src/assets/styles/bootstrap/vendor/_rfs.scss
@@ -4,13 +4,11 @@
//
// Automated responsive values for font sizes, paddings, margins and much more
//
-// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
+// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
// Configuration
// Base value
-@use "sass:math";
-
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;
@@ -54,12 +52,54 @@ $enable-rfs: true !default;
// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
- $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1);
+ $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
- $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + math.div(1, $rfs-rem-value));
+ $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
@@ -67,14 +107,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
+ $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
// Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
@@ -166,11 +206,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@if $unit == px {
// Convert to rem if needed
- $val: $val + ' ' + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value);
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
}
@else if $unit == rem {
// Convert to px if needed
- $val: $val + ' ' + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+ $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
}
@else {
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@@ -207,21 +247,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@else {
// Remove unit from $value for calculations
- $value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value)));
+ $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
// Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs {
- $val: $val + ' ' + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
- $value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor);
+ $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
// Base value formatting
- $min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
+ $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
// Use negative value if needed
$min-width: if($value < 0, -$min-width, $min-width);
@@ -230,7 +270,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
- $variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+ $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
diff --git a/src/assets/styles/fontawesome/_icons.scss b/src/assets/styles/fontawesome/_icons.scss
index fa3ac073..f8dc0a08 100644
--- a/src/assets/styles/fontawesome/_icons.scss
+++ b/src/assets/styles/fontawesome/_icons.scss
@@ -10,7 +10,6 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-address-card:before { content: fa-content($fa-var-address-card); }
.#{$fa-css-prefix}-adjust:before { content: fa-content($fa-var-adjust); }
.#{$fa-css-prefix}-adn:before { content: fa-content($fa-var-adn); }
-.#{$fa-css-prefix}-adobe:before { content: fa-content($fa-var-adobe); }
.#{$fa-css-prefix}-adversal:before { content: fa-content($fa-var-adversal); }
.#{$fa-css-prefix}-affiliatetheme:before { content: fa-content($fa-var-affiliatetheme); }
.#{$fa-css-prefix}-air-freshener:before { content: fa-content($fa-var-air-freshener); }
@@ -274,6 +273,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-cloud-sun:before { content: fa-content($fa-var-cloud-sun); }
.#{$fa-css-prefix}-cloud-sun-rain:before { content: fa-content($fa-var-cloud-sun-rain); }
.#{$fa-css-prefix}-cloud-upload-alt:before { content: fa-content($fa-var-cloud-upload-alt); }
+.#{$fa-css-prefix}-cloudflare:before { content: fa-content($fa-var-cloudflare); }
.#{$fa-css-prefix}-cloudscale:before { content: fa-content($fa-var-cloudscale); }
.#{$fa-css-prefix}-cloudsmith:before { content: fa-content($fa-var-cloudsmith); }
.#{$fa-css-prefix}-cloudversify:before { content: fa-content($fa-var-cloudversify); }
@@ -605,6 +605,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-grip-vertical:before { content: fa-content($fa-var-grip-vertical); }
.#{$fa-css-prefix}-gripfire:before { content: fa-content($fa-var-gripfire); }
.#{$fa-css-prefix}-grunt:before { content: fa-content($fa-var-grunt); }
+.#{$fa-css-prefix}-guilded:before { content: fa-content($fa-var-guilded); }
.#{$fa-css-prefix}-guitar:before { content: fa-content($fa-var-guitar); }
.#{$fa-css-prefix}-gulp:before { content: fa-content($fa-var-gulp); }
.#{$fa-css-prefix}-h-square:before { content: fa-content($fa-var-h-square); }
@@ -663,6 +664,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-hips:before { content: fa-content($fa-var-hips); }
.#{$fa-css-prefix}-hire-a-helper:before { content: fa-content($fa-var-hire-a-helper); }
.#{$fa-css-prefix}-history:before { content: fa-content($fa-var-history); }
+.#{$fa-css-prefix}-hive:before { content: fa-content($fa-var-hive); }
.#{$fa-css-prefix}-hockey-puck:before { content: fa-content($fa-var-hockey-puck); }
.#{$fa-css-prefix}-holly-berry:before { content: fa-content($fa-var-holly-berry); }
.#{$fa-css-prefix}-home:before { content: fa-content($fa-var-home); }
@@ -706,8 +708,10 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-infinity:before { content: fa-content($fa-var-infinity); }
.#{$fa-css-prefix}-info:before { content: fa-content($fa-var-info); }
.#{$fa-css-prefix}-info-circle:before { content: fa-content($fa-var-info-circle); }
+.#{$fa-css-prefix}-innosoft:before { content: fa-content($fa-var-innosoft); }
.#{$fa-css-prefix}-instagram:before { content: fa-content($fa-var-instagram); }
.#{$fa-css-prefix}-instagram-square:before { content: fa-content($fa-var-instagram-square); }
+.#{$fa-css-prefix}-instalod:before { content: fa-content($fa-var-instalod); }
.#{$fa-css-prefix}-intercom:before { content: fa-content($fa-var-intercom); }
.#{$fa-css-prefix}-internet-explorer:before { content: fa-content($fa-var-internet-explorer); }
.#{$fa-css-prefix}-invision:before { content: fa-content($fa-var-invision); }
@@ -881,6 +885,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-nutritionix:before { content: fa-content($fa-var-nutritionix); }
.#{$fa-css-prefix}-object-group:before { content: fa-content($fa-var-object-group); }
.#{$fa-css-prefix}-object-ungroup:before { content: fa-content($fa-var-object-ungroup); }
+.#{$fa-css-prefix}-octopus-deploy:before { content: fa-content($fa-var-octopus-deploy); }
.#{$fa-css-prefix}-odnoklassniki:before { content: fa-content($fa-var-odnoklassniki); }
.#{$fa-css-prefix}-odnoklassniki-square:before { content: fa-content($fa-var-odnoklassniki-square); }
.#{$fa-css-prefix}-oil-can:before { content: fa-content($fa-var-oil-can); }
@@ -927,6 +932,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-people-arrows:before { content: fa-content($fa-var-people-arrows); }
.#{$fa-css-prefix}-people-carry:before { content: fa-content($fa-var-people-carry); }
.#{$fa-css-prefix}-pepper-hot:before { content: fa-content($fa-var-pepper-hot); }
+.#{$fa-css-prefix}-perbyte:before { content: fa-content($fa-var-perbyte); }
.#{$fa-css-prefix}-percent:before { content: fa-content($fa-var-percent); }
.#{$fa-css-prefix}-percentage:before { content: fa-content($fa-var-percentage); }
.#{$fa-css-prefix}-periscope:before { content: fa-content($fa-var-periscope); }
@@ -1295,7 +1301,6 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-trash-restore-alt:before { content: fa-content($fa-var-trash-restore-alt); }
.#{$fa-css-prefix}-tree:before { content: fa-content($fa-var-tree); }
.#{$fa-css-prefix}-trello:before { content: fa-content($fa-var-trello); }
-.#{$fa-css-prefix}-tripadvisor:before { content: fa-content($fa-var-tripadvisor); }
.#{$fa-css-prefix}-trophy:before { content: fa-content($fa-var-trophy); }
.#{$fa-css-prefix}-truck:before { content: fa-content($fa-var-truck); }
.#{$fa-css-prefix}-truck-loading:before { content: fa-content($fa-var-truck-loading); }
@@ -1317,6 +1322,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-umbraco:before { content: fa-content($fa-var-umbraco); }
.#{$fa-css-prefix}-umbrella:before { content: fa-content($fa-var-umbrella); }
.#{$fa-css-prefix}-umbrella-beach:before { content: fa-content($fa-var-umbrella-beach); }
+.#{$fa-css-prefix}-uncharted:before { content: fa-content($fa-var-uncharted); }
.#{$fa-css-prefix}-underline:before { content: fa-content($fa-var-underline); }
.#{$fa-css-prefix}-undo:before { content: fa-content($fa-var-undo); }
.#{$fa-css-prefix}-undo-alt:before { content: fa-content($fa-var-undo-alt); }
@@ -1368,6 +1374,8 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-venus:before { content: fa-content($fa-var-venus); }
.#{$fa-css-prefix}-venus-double:before { content: fa-content($fa-var-venus-double); }
.#{$fa-css-prefix}-venus-mars:before { content: fa-content($fa-var-venus-mars); }
+.#{$fa-css-prefix}-vest:before { content: fa-content($fa-var-vest); }
+.#{$fa-css-prefix}-vest-patches:before { content: fa-content($fa-var-vest-patches); }
.#{$fa-css-prefix}-viacoin:before { content: fa-content($fa-var-viacoin); }
.#{$fa-css-prefix}-viadeo:before { content: fa-content($fa-var-viadeo); }
.#{$fa-css-prefix}-viadeo-square:before { content: fa-content($fa-var-viadeo-square); }
@@ -1398,6 +1406,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-walking:before { content: fa-content($fa-var-walking); }
.#{$fa-css-prefix}-wallet:before { content: fa-content($fa-var-wallet); }
.#{$fa-css-prefix}-warehouse:before { content: fa-content($fa-var-warehouse); }
+.#{$fa-css-prefix}-watchman-monitoring:before { content: fa-content($fa-var-watchman-monitoring); }
.#{$fa-css-prefix}-water:before { content: fa-content($fa-var-water); }
.#{$fa-css-prefix}-wave-square:before { content: fa-content($fa-var-wave-square); }
.#{$fa-css-prefix}-waze:before { content: fa-content($fa-var-waze); }
@@ -1423,6 +1432,7 @@ readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-wine-glass-alt:before { content: fa-content($fa-var-wine-glass-alt); }
.#{$fa-css-prefix}-wix:before { content: fa-content($fa-var-wix); }
.#{$fa-css-prefix}-wizards-of-the-coast:before { content: fa-content($fa-var-wizards-of-the-coast); }
+.#{$fa-css-prefix}-wodu:before { content: fa-content($fa-var-wodu); }
.#{$fa-css-prefix}-wolf-pack-battalion:before { content: fa-content($fa-var-wolf-pack-battalion); }
.#{$fa-css-prefix}-won-sign:before { content: fa-content($fa-var-won-sign); }
.#{$fa-css-prefix}-wordpress:before { content: fa-content($fa-var-wordpress); }
diff --git a/src/assets/styles/fontawesome/_larger.scss b/src/assets/styles/fontawesome/_larger.scss
index ae643dd4..27c2ad5f 100644
--- a/src/assets/styles/fontawesome/_larger.scss
+++ b/src/assets/styles/fontawesome/_larger.scss
@@ -2,11 +2,9 @@
// -------------------------
// makes the font 33% larger relative to the icon container
-@use "sass:math";
-
.#{$fa-css-prefix}-lg {
- font-size: math.div(4em, 3);
- line-height: (3em * 0.25);
+ font-size: (4em / 3);
+ line-height: (3em / 4);
vertical-align: -.0667em;
}
diff --git a/src/assets/styles/fontawesome/_list.scss b/src/assets/styles/fontawesome/_list.scss
index df6d4a23..8ebf3333 100644
--- a/src/assets/styles/fontawesome/_list.scss
+++ b/src/assets/styles/fontawesome/_list.scss
@@ -3,7 +3,7 @@
.#{$fa-css-prefix}-ul {
list-style-type: none;
- margin-left: $fa-li-width * 5*0.25;
+ margin-left: $fa-li-width * 5/4;
padding-left: 0;
> li { position: relative; }
diff --git a/src/assets/styles/fontawesome/_variables.scss b/src/assets/styles/fontawesome/_variables.scss
index d3a44abc..2aea6593 100644
--- a/src/assets/styles/fontawesome/_variables.scss
+++ b/src/assets/styles/fontawesome/_variables.scss
@@ -1,17 +1,15 @@
// Variables
// --------------------------
-@use "sass:math";
-
$fa-font-path: "../../webfonts" !default;
$fa-font-size-base: 16px !default;
$fa-font-display: block !default;
$fa-css-prefix: fa !default;
-$fa-version: "5.14.0" !default;
+$fa-version: "5.15.4" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: 2em !default;
-$fa-fw-width: math.div(20em, 16);
+$fa-fw-width: 1.25em;
$fa-primary-opacity: 1 !default;
$fa-secondary-opacity: .4 !default;
@@ -29,7 +27,6 @@ $fa-var-address-book: \f2b9;
$fa-var-address-card: \f2bb;
$fa-var-adjust: \f042;
$fa-var-adn: \f170;
-$fa-var-adobe: \f778;
$fa-var-adversal: \f36a;
$fa-var-affiliatetheme: \f36b;
$fa-var-air-freshener: \f5d0;
@@ -293,6 +290,7 @@ $fa-var-cloud-showers-heavy: \f740;
$fa-var-cloud-sun: \f6c4;
$fa-var-cloud-sun-rain: \f743;
$fa-var-cloud-upload-alt: \f382;
+$fa-var-cloudflare: \e07d;
$fa-var-cloudscale: \f383;
$fa-var-cloudsmith: \f384;
$fa-var-cloudversify: \f385;
@@ -624,6 +622,7 @@ $fa-var-grip-lines-vertical: \f7a5;
$fa-var-grip-vertical: \f58e;
$fa-var-gripfire: \f3ac;
$fa-var-grunt: \f3ad;
+$fa-var-guilded: \e07e;
$fa-var-guitar: \f7a6;
$fa-var-gulp: \f3ae;
$fa-var-h-square: \f0fd;
@@ -682,6 +681,7 @@ $fa-var-hippo: \f6ed;
$fa-var-hips: \f452;
$fa-var-hire-a-helper: \f3b0;
$fa-var-history: \f1da;
+$fa-var-hive: \e07f;
$fa-var-hockey-puck: \f453;
$fa-var-holly-berry: \f7aa;
$fa-var-home: \f015;
@@ -725,8 +725,10 @@ $fa-var-industry: \f275;
$fa-var-infinity: \f534;
$fa-var-info: \f129;
$fa-var-info-circle: \f05a;
+$fa-var-innosoft: \e080;
$fa-var-instagram: \f16d;
$fa-var-instagram-square: \e055;
+$fa-var-instalod: \e081;
$fa-var-intercom: \f7af;
$fa-var-internet-explorer: \f26b;
$fa-var-invision: \f7b0;
@@ -900,6 +902,7 @@ $fa-var-ns8: \f3d5;
$fa-var-nutritionix: \f3d6;
$fa-var-object-group: \f247;
$fa-var-object-ungroup: \f248;
+$fa-var-octopus-deploy: \e082;
$fa-var-odnoklassniki: \f263;
$fa-var-odnoklassniki-square: \f264;
$fa-var-oil-can: \f613;
@@ -946,6 +949,7 @@ $fa-var-penny-arcade: \f704;
$fa-var-people-arrows: \e068;
$fa-var-people-carry: \f4ce;
$fa-var-pepper-hot: \f816;
+$fa-var-perbyte: \e083;
$fa-var-percent: \f295;
$fa-var-percentage: \f541;
$fa-var-periscope: \f3da;
@@ -1314,7 +1318,6 @@ $fa-var-trash-restore: \f829;
$fa-var-trash-restore-alt: \f82a;
$fa-var-tree: \f1bb;
$fa-var-trello: \f181;
-$fa-var-tripadvisor: \f262;
$fa-var-trophy: \f091;
$fa-var-truck: \f0d1;
$fa-var-truck-loading: \f4de;
@@ -1336,6 +1339,7 @@ $fa-var-uikit: \f403;
$fa-var-umbraco: \f8e8;
$fa-var-umbrella: \f0e9;
$fa-var-umbrella-beach: \f5ca;
+$fa-var-uncharted: \e084;
$fa-var-underline: \f0cd;
$fa-var-undo: \f0e2;
$fa-var-undo-alt: \f2ea;
@@ -1387,6 +1391,8 @@ $fa-var-vector-square: \f5cb;
$fa-var-venus: \f221;
$fa-var-venus-double: \f226;
$fa-var-venus-mars: \f228;
+$fa-var-vest: \e085;
+$fa-var-vest-patches: \e086;
$fa-var-viacoin: \f237;
$fa-var-viadeo: \f2a9;
$fa-var-viadeo-square: \f2aa;
@@ -1417,6 +1423,7 @@ $fa-var-vuejs: \f41f;
$fa-var-walking: \f554;
$fa-var-wallet: \f555;
$fa-var-warehouse: \f494;
+$fa-var-watchman-monitoring: \e087;
$fa-var-water: \f773;
$fa-var-wave-square: \f83e;
$fa-var-waze: \f83f;
@@ -1442,6 +1449,7 @@ $fa-var-wine-glass: \f4e3;
$fa-var-wine-glass-alt: \f5ce;
$fa-var-wix: \f5cf;
$fa-var-wizards-of-the-coast: \f730;
+$fa-var-wodu: \e088;
$fa-var-wolf-pack-battalion: \f514;
$fa-var-won-sign: \f159;
$fa-var-wordpress: \f19a;
diff --git a/src/assets/styles/fontawesome/brands.scss b/src/assets/styles/fontawesome/brands.scss
index 1cbe51b6..16af9964 100644
--- a/src/assets/styles/fontawesome/brands.scss
+++ b/src/assets/styles/fontawesome/brands.scss
@@ -1,5 +1,5 @@
/*!
- * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
diff --git a/src/assets/styles/fontawesome/fontawesome.scss b/src/assets/styles/fontawesome/fontawesome.scss
index 85898757..466d26c6 100644
--- a/src/assets/styles/fontawesome/fontawesome.scss
+++ b/src/assets/styles/fontawesome/fontawesome.scss
@@ -1,5 +1,5 @@
/*!
- * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
diff --git a/src/assets/styles/fontawesome/regular.scss b/src/assets/styles/fontawesome/regular.scss
index 7e0d6373..14b6cb3d 100644
--- a/src/assets/styles/fontawesome/regular.scss
+++ b/src/assets/styles/fontawesome/regular.scss
@@ -1,5 +1,5 @@
/*!
- * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
diff --git a/src/assets/styles/fontawesome/solid.scss b/src/assets/styles/fontawesome/solid.scss
index 909a1eb5..56f1ead9 100644
--- a/src/assets/styles/fontawesome/solid.scss
+++ b/src/assets/styles/fontawesome/solid.scss
@@ -1,5 +1,5 @@
/*!
- * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
diff --git a/src/assets/styles/fontawesome/v4-shims.scss b/src/assets/styles/fontawesome/v4-shims.scss
index 6e348167..20d627a1 100644
--- a/src/assets/styles/fontawesome/v4-shims.scss
+++ b/src/assets/styles/fontawesome/v4-shims.scss
@@ -1,5 +1,5 @@
/*!
- * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
diff --git a/src/assets/webfonts/fa-brands-400.eot b/src/assets/webfonts/fa-brands-400.eot
index 54ad8d72..cba6c6cc 100644
Binary files a/src/assets/webfonts/fa-brands-400.eot and b/src/assets/webfonts/fa-brands-400.eot differ
diff --git a/src/assets/webfonts/fa-brands-400.svg b/src/assets/webfonts/fa-brands-400.svg
index 2c8659c1..b9881a43 100644
--- a/src/assets/webfonts/fa-brands-400.svg
+++ b/src/assets/webfonts/fa-brands-400.svg
@@ -1,16 +1,12 @@
-