duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Bootstrap / RoomTools WidgetView / Loading Text

Browse Source
This commit is contained in:
duckietm 2024-03-05 13:12:12 +01:00
parent a8c9667d69
commit 8baad70c56
52 changed files with 1513 additions and 892 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/styles/bootstrap/_accordion.scss
View File

@ -93,7 +93,6 @@
padding: $accordion-body-padding-y $accordion-body-padding-x; padding: $accordion-body-padding-y $accordion-body-padding-x;
} }
// Flush accordion items // Flush accordion items
// //
// Remove borders and border-radius to keep accordion items edge-to-edge. // Remove borders and border-radius to keep accordion items edge-to-edge.
@ -108,8 +107,12 @@
border-left: 0; border-left: 0;
@include border-radius(0); @include border-radius(0);
&:first-child { border-top: 0; } &:first-child {
&:last-child { border-bottom: 0; } border-top: 0;
}
&:last-child {
border-bottom: 0;
}
.accordion-button { .accordion-button {
@include border-radius(0); @include border-radius(0);

5
src/assets/styles/bootstrap/_alert.scss
View File

@ -1,3 +1,4 @@
@use 'sass:math';
// //
// Base styles // Base styles
// //
@ -21,7 +22,6 @@
font-weight: $alert-link-font-weight; font-weight: $alert-link-font-weight;
} }
// Dismissible alerts // Dismissible alerts
// //
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
@ -39,7 +39,6 @@
} }
} }
// scss-docs-start alert-modifiers // scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert. // Generate contextual modifier classes for colorizing the alert.
@ -48,7 +47,7 @@
$alert-border: shift-color($value, $alert-border-scale); $alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale); $alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); $alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
} }
.alert-#{$state} { .alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color); @include alert-variant($alert-background, $alert-border, $alert-color);

9
src/assets/styles/bootstrap/_breadcrumb.scss
View File

@ -18,7 +18,14 @@
float: left; // Suppress inline spacings and underlining of the separator float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding-x; padding-right: $breadcrumb-item-padding-x;
color: $breadcrumb-divider-color; color: $breadcrumb-divider-color;
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; content: var(
--#{$variable-prefix}breadcrumb-divider,
escape-svg($breadcrumb-divider)
)
#{"/* rtl:"} var(
--#{$variable-prefix}breadcrumb-divider,
escape-svg($breadcrumb-divider-flipped)
) #{"*/"};
} }
} }

23
src/assets/styles/bootstrap/_button-group.scss
View File

@ -61,17 +61,20 @@
// //
// Remix the default button sizing classes into new ones for easier manipulation. // Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; } .btn-group-sm > .btn {
.btn-group-lg > .btn { @extend .btn-lg; } @extend .btn-sm;
}
.btn-group-lg > .btn {
@extend .btn-lg;
}
// //
// Split button dropdowns // Split button dropdowns
// //
.dropdown-toggle-split { .dropdown-toggle-split {
padding-right: $btn-padding-x * .75; padding-right: $btn-padding-x * 0.75;
padding-left: $btn-padding-x * .75; padding-left: $btn-padding-x * 0.75;
&::after, &::after,
.dropup &::after, .dropup &::after,
@ -85,16 +88,15 @@
} }
.btn-sm + .dropdown-toggle-split { .btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75; padding-right: $btn-padding-x-sm * 0.75;
padding-left: $btn-padding-x-sm * .75; padding-left: $btn-padding-x-sm * 0.75;
} }
.btn-lg + .dropdown-toggle-split { .btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75; padding-right: $btn-padding-x-lg * 0.75;
padding-left: $btn-padding-x-lg * .75; padding-left: $btn-padding-x-lg * 0.75;
} }
// The clickable button for toggling the menu // The clickable button for toggling the menu
// Set the same inset shadow as the :active state // Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle { .btn-group.show .dropdown-toggle {
@ -106,7 +108,6 @@
} }
} }
// //
// Vertical button groups // Vertical button groups
// //

131
src/assets/styles/bootstrap/_buttons.scss
View File

@ -16,7 +16,12 @@
user-select: none; user-select: none;
background-color: transparent; background-color: transparent;
border: $btn-border-width solid transparent; border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); @include button-size(
$btn-padding-y,
$btn-padding-x,
$btn-font-size,
$btn-border-radius
);
@include transition($btn-transition); @include transition($btn-transition);
&:hover { &:hover {
@ -50,7 +55,6 @@
} }
} }
// //
// Alternate buttons // Alternate buttons
// //
@ -69,7 +73,6 @@
} }
// scss-docs-end btn-variant-loops // scss-docs-end btn-variant-loops
// //
// Link buttons // Link buttons
// //
@ -102,15 +105,131 @@
// No need for an active state here // No need for an active state here
} }
// //
// Button Sizes // Button Sizes
// //
.btn-toggle {
border-image-source: url("@/assets/images/buttons/toggle_bg.png");
border-image-slice: 6 6 6 6 fill;
border-image-width: 6px 6px 6px 6px;
cursor: pointer;
.toggle-icon {
background-repeat: no-repeat;
width: 6px;
height: 8px;
&.left {
background-image: url("@/assets/images/buttons/toggle_left.png");
}
&.right {
background-image: url("@/assets/images/buttons/toggle_right.png");
}
}
}
.infostand-buttons {
border-image-source: url(@/assets/images/room/infostand_buttons.png);
border-image-slice: 3 3 3 3 fill;
border-image-width: 3px 3px 3px 3px;
font-size: 9px;
color: #ffffff;
height: 25px;
margin-top: 5px;
&:hover {
border-image-source: url(@/assets/images/room/infostand_buttons_hover.png);
}
&:active {
border-image-source: url(@/assets/images/room/infostand_buttons_active.png);
}
}
.volter-bold-button {
border-image-source: url(@/assets/images/buttons/volter_bold_btn.png);
border-image-slice: 6 6 6 6 fill;
border-image-width: 6px 6px 6px 6px;
font-size: 9px;
height: 20px;
margin-top: 5px;
&:hover {
border-image-source: url(@/assets/images/buttons/volter_bold_btn_hover.png);
}
&:active {
border-image-source: url(@/assets/images/buttons/volter_bold_btn_active.png);
}
}
.volter-button {
border-image-source: url(@/assets/images/buttons/volter_normal_btn.png);
border-image-slice: 4 4 4 4 fill;
border-image-width: 4px 4px 4px 4px;
font-size: 9px;
height: 20px;
margin-top: 5px;
&:hover {
border-image-source: url(@/assets/images/buttons/volter_normal_btn_hover.png);
}
&:active {
border-image-source: url(@/assets/images/buttons/volter_normal_btn_active.png);
}
&.active {
border-image-source: url(@/assets/images/buttons/volter_normal_btn_active.png);
}
}
.notification-buttons {
border-image-source: url(@/assets/images/room/infostand_buttons.png);
border-image-slice: 3 3 3 3 fill;
border-image-width: 3px 3px 3px 3px;
color: #ffffff;
height: 25px;
font-size: 13px;
padding: 0;
border-radius: 13px;
&:hover {
border-image-source: url(@/assets/images/room/infostand_buttons_hover.png);
}
&:active {
border-image-source: url(@/assets/images/room/infostand_buttons_active.png);
}
}
.notification-text-link {
font-size: 13px;
}
.gift-color-btn {
outline: 1px solid #000;
border: 3px solid #fff;
min-height: 22px;
min-width: 23px;
}
.btn-lg { .btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); @include button-size(
$btn-padding-y-lg,
$btn-padding-x-lg,
$btn-font-size-lg,
$btn-border-radius-lg
);
} }
.btn-sm { .btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); @include button-size(
$btn-padding-y-sm,
$btn-padding-x-sm,
$btn-font-size-sm,
$btn-border-radius-sm
);
} }

22
src/assets/styles/bootstrap/_card.scss
View File

@ -29,7 +29,7 @@
@include border-top-radius($card-inner-border-radius); @include border-top-radius($card-inner-border-radius);
} }
&:last-child { &:last-child {
border-bottom-width: 0; border-bottom-width: 0;
@include border-bottom-radius($card-inner-border-radius); @include border-bottom-radius($card-inner-border-radius);
} }
@ -56,7 +56,7 @@
} }
.card-subtitle { .card-subtitle {
margin-top: -$card-title-spacer-y * .5; margin-top: -$card-title-spacer-y * 0.5;
margin-bottom: 0; margin-bottom: 0;
} }
@ -86,7 +86,9 @@
border-bottom: $card-border-width solid $card-border-color; border-bottom: $card-border-width solid $card-border-color;
&:first-child { &:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); @include border-radius(
$card-inner-border-radius $card-inner-border-radius 0 0
);
} }
} }
@ -97,19 +99,20 @@
border-top: $card-border-width solid $card-border-color; border-top: $card-border-width solid $card-border-color;
&:last-child { &:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); @include border-radius(
0 0 $card-inner-border-radius $card-inner-border-radius
);
} }
} }
// //
// Header navs // Header navs
// //
.card-header-tabs { .card-header-tabs {
margin-right: -$card-cap-padding-x * .5; margin-right: -$card-cap-padding-x * 0.5;
margin-bottom: -$card-cap-padding-y; margin-bottom: -$card-cap-padding-y;
margin-left: -$card-cap-padding-x * .5; margin-left: -$card-cap-padding-x * 0.5;
border-bottom: 0; border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg { @if $nav-tabs-link-active-bg != $card-bg {
@ -121,8 +124,8 @@
} }
.card-header-pills { .card-header-pills {
margin-right: -$card-cap-padding-x * .5; margin-right: -$card-cap-padding-x * 0.5;
margin-left: -$card-cap-padding-x * .5; margin-left: -$card-cap-padding-x * 0.5;
} }
// Card image // Card image
@ -152,7 +155,6 @@
@include border-bottom-radius($card-inner-border-radius); @include border-bottom-radius($card-inner-border-radius);
} }
// //
// Card groups // Card groups
// //

19
src/assets/styles/bootstrap/_carousel.scss
View File

@ -55,7 +55,6 @@
/* rtl:end:ignore */ /* rtl:end:ignore */
// //
// Alternate transitions // Alternate transitions
// //
@ -82,7 +81,6 @@
} }
} }
// //
// Left/right controls for nav // Left/right controls for nav
// //
@ -117,11 +115,19 @@
} }
.carousel-control-prev { .carousel-control-prev {
left: 0; left: 0;
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null); background-image: if(
$enable-gradients,
linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)),
null
);
} }
.carousel-control-next { .carousel-control-next {
right: 0; right: 0;
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null); background-image: if(
$enable-gradients,
linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)),
null
);
} }
// Icons for within // Icons for within
@ -195,16 +201,15 @@
} }
} }
// Optional captions // Optional captions
// //
// //
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: (100% - $carousel-caption-width) * .5; right: (100% - $carousel-caption-width) * 0.5;
bottom: $carousel-caption-spacer; bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5; left: (100% - $carousel-caption-width) * 0.5;
padding-top: $carousel-caption-padding-y; padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color; color: $carousel-caption-color;

3
src/assets/styles/bootstrap/_close.scss
View File

@ -9,7 +9,8 @@
height: $btn-close-height; height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x; padding: $btn-close-padding-y $btn-close-padding-x;
color: $btn-close-color; color: $btn-close-color;
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements background: transparent escape-svg($btn-close-bg) center / $btn-close-width
auto no-repeat; // include transparent for button elements
border: 0; // for button elements border: 0; // for button elements
@include border-radius(); @include border-radius();
opacity: $btn-close-opacity; opacity: $btn-close-opacity;

1
src/assets/styles/bootstrap/_dropdown.scss
View File

@ -116,7 +116,6 @@
} }
} }
// Dividers (basically an `<hr>`) within the dropdown // Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider { .dropdown-divider {
height: 0; height: 0;

138
src/assets/styles/bootstrap/_functions.scss
View File

@ -1,3 +1,4 @@
@use 'sass:math';
// Bootstrap functions // Bootstrap functions
// //
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins. // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@ -38,7 +39,10 @@
} }
@function rgba-css-var($identifier, $target) { @function rgba-css-var($identifier, $target) {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity)); @return rgba(
var(--#{$variable-prefix}#{$identifier}-rgb),
var(--#{$variable-prefix}#{$target}-opacity)
);
} }
// stylelint-disable scss/dollar-variable-pattern // stylelint-disable scss/dollar-variable-pattern
@ -49,10 +53,18 @@
// allow to pass the $key and $value of the map as an function argument // allow to pass the $key and $value of the map as an function argument
$_args: (); $_args: ();
@each $arg in $args { @each $arg in $args {
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg))); $_args: append(
$_args,
if($arg == "$key", $key, if($arg == "$value", $value, $arg))
);
} }
$_map: map-merge($_map, ($key: call(get-function($func), $_args...))); $_map: map-merge(
$_map,
(
$key: call(get-function($func), $_args...),
)
);
} }
@return $_map; @return $_map;
@ -84,7 +96,12 @@
$result: (); $result: ();
@each $key, $value in $map { @each $key, $value in $map {
@if (index($values, $key) != null) { @if (index($values, $key) != null) {
$result: map-merge($result, ($key: $value)); $result: map-merge(
$result,
(
$key: $value,
)
);
} }
} }
@return $result; @return $result;
@ -112,7 +129,12 @@
$index: str-index($string, $search); $index: str-index($string, $search);
@if $index { @if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); @return str-slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
);
} }
@return $string; @return $string;
@ -142,9 +164,37 @@
// A list of pre-calculated numbers of pow(divide((divide($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 // 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; $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025
0.0027 0.003 0.0033 0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065
0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013
0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222
0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343
0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497
0.0513 0.0529 0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685
0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844 0.0865 0.0887 0.0908
0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117
0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147
0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812
0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195
0.2232 0.227 0.2307 0.2346 0.2384 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623
0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095
0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613
0.3663 0.3712 0.3763 0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179
0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564 0.4621 0.4678 0.4735 0.4793
0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457
0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172
0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939
0.7011 0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758
0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308 0.8388 0.8469 0.855 0.8632
0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956
0.9647 0.9734 0.9823 0.9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) { @function color-contrast(
$background,
$color-contrast-dark: $color-contrast-dark,
$color-contrast-light: $color-contrast-light,
$min-contrast-ratio: $min-contrast-ratio
) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black; $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$max-ratio: 0; $max-ratio: 0;
$max-ratio-color: null; $max-ratio-color: null;
@ -168,7 +218,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$l1: luminance($background); $l1: luminance($background);
$l2: luminance(opaque($background, $foreground)); $l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); @return if(
$l1 > $l2,
divide($l1 + 0.05, $l2 + 0.05),
divide($l2 + 0.05, $l1 + 0.05)
);
} }
// Return WCAG2.0 relative luminance // Return WCAG2.0 relative luminance
@ -178,15 +232,25 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$rgb: ( $rgb: (
"r": red($color), "r": red($color),
"g": green($color), "g": green($color),
"b": blue($color) "b": blue($color),
); );
@each $name, $value in $rgb { @each $name, $value in $rgb {
$value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1)); $value: if(
$rgb: map-merge($rgb, ($name: $value)); divide($value, 255) < 0.03928,
divide(divide($value, 255), 12.92),
nth($_luminance-list, $value + 1)
);
$rgb: map-merge(
$rgb,
(
$name: $value,
)
);
} }
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722); @return (map-get($rgb, "r") * 0.2126) + (map-get($rgb, "g") * 0.7152) +
(map-get($rgb, "b") * 0.0722);
} }
// Return opaque color // Return opaque color
@ -208,7 +272,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
// Shade the color if the weight is positive, else tint it // Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) { @function shift-color($color, $weight) {
@return if($weight * 1% > 0, shade-color($color, $weight), tint-color($color, -$weight)); @return if(
$weight * 1% > 0,
shade-color($color, $weight),
tint-color($color, -$weight)
);
} }
// scss-docs-end color-functions // scss-docs-end color-functions
@ -222,11 +290,20 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $value1; @return $value1;
} }
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { @if type-of($value1) ==
number and
type-of($value2) ==
number and
comparable($value1, $value2)
{
@return $value1 + $value2; @return $value1 + $value2;
} }
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); @return if(
$return-calc == true,
calc(#{$value1} + #{$value2}),
$value1 + unquote(" + ") + $value2
);
} }
@function subtract($value1, $value2, $return-calc: true) { @function subtract($value1, $value2, $return-calc: true) {
@ -242,7 +319,12 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $value1; @return $value1;
} }
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { @if type-of($value1) ==
number and
type-of($value2) ==
number and
comparable($value1, $value2)
{
@return $value1 - $value2; @return $value1 - $value2;
} }
@ -250,13 +332,21 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$value2: unquote("(") + $value2 + unquote(")"); $value2: unquote("(") + $value2 + unquote(")");
} }
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); @return if(
$return-calc == true,
calc(#{$value1} - #{$value2}),
$value1 + unquote(" - ") + $value2
);
} }
@function divide($dividend, $divisor, $precision: 10) { @function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); $sign: if(
$dividend: abs($dividend); $dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0,
$divisor: abs($divisor); 1,
-1
);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
@if $dividend == 0 { @if $dividend == 0 {
@return 0; @return 0;
} }
@ -273,7 +363,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$quotient: $quotient + 1; $quotient: $quotient + 1;
} }
$result: $result * 10 + $quotient; $result: $result * 10 + $quotient;
$factor: $factor * .1; $factor: $factor * 0.1;
$remainder: $remainder * 10; $remainder: $remainder * 10;
$precision: $precision - 1; $precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) { @if ($precision < 0 and $remainder >= $divisor * 5) {
@ -287,9 +377,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
"px": 1px, "px": 1px,
"rem": 1rem, "rem": 1rem,
"em": 1em, "em": 1em,
"%": 1% "%": 1%,
); );
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) { @if (
$dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)
) {
$result: $result * map-get($unit-map, $dividend-unit); $result: $result * map-get($unit-map, $dividend-unit);
} }
@return $result; @return $result;

3
src/assets/styles/bootstrap/_images.scss
View File

@ -9,7 +9,6 @@
@include img-fluid(); @include img-fluid();
} }
// Image thumbnails // Image thumbnails
.img-thumbnail { .img-thumbnail {
padding: $thumbnail-padding; padding: $thumbnail-padding;
@ -32,7 +31,7 @@
} }
.figure-img { .figure-img {
margin-bottom: $spacer * .5; margin-bottom: $spacer * 0.5;
line-height: 1; line-height: 1;
} }

19
src/assets/styles/bootstrap/_list-group.scss
View File

@ -1,3 +1,4 @@
@use 'sass:math';
// Base class // Base class
// //
// Easily usable on <ul>, <ol>, or <div>. // Easily usable on <ul>, <ol>, or <div>.
@ -23,7 +24,6 @@
} }
} }
// Interactive list items // Interactive list items
// //
// Use anchor or button elements instead of `li`s or `div`s to create interactive // Use anchor or button elements instead of `li`s or `div`s to create interactive
@ -49,7 +49,6 @@
} }
} }
// Individual list items // Individual list items
// //
// Use on `li`s or `div`s within the `.list-group` parent. // Use on `li`s or `div`s within the `.list-group` parent.
@ -96,7 +95,6 @@
} }
} }
// Horizontal // Horizontal
// //
// Change the layout of list group items from vertical (default) to horizontal. // Change the layout of list group items from vertical (default) to horizontal.
@ -137,7 +135,6 @@
} }
} }
// Flush list items // Flush list items
// //
// Remove borders and border-radius to keep list group items edge-to-edge. Most // Remove borders and border-radius to keep list group items edge-to-edge. Most
@ -155,7 +152,6 @@
} }
} }
// scss-docs-start list-group-modifiers // scss-docs-start list-group-modifiers
// List group contextual variants // List group contextual variants
// //
@ -165,10 +161,17 @@
@each $state, $value in $theme-colors { @each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-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); $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) { @if (
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale)); 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), math.abs($list-group-item-color-scale));
} }
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color); @include list-group-item-variant(
$state,
$list-group-variant-bg,
$list-group-variant-color
);
} }
// scss-docs-end list-group-modifiers // scss-docs-end list-group-modifiers

24
src/assets/styles/bootstrap/_modal.scss
View File

@ -3,7 +3,6 @@
// .modal-dialog - positioning shell for the actual modal // .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff // .modal-content - actual modal w/ bg and corners and stuff
// Container that the modal scrolls within // Container that the modal scrolls within
.modal { .modal {
position: fixed; position: fixed;
@ -85,7 +84,11 @@
// Modal background // Modal background
.modal-backdrop { .modal-backdrop {
@include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity); @include overlay-backdrop(
$zindex-modal-backdrop,
$modal-backdrop-bg,
$modal-backdrop-opacity
);
} }
// Modal header // Modal header
@ -100,8 +103,9 @@
@include border-top-radius($modal-content-inner-border-radius); @include border-top-radius($modal-content-inner-border-radius);
.btn-close { .btn-close {
padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5); padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto; margin: ($modal-header-padding-y * -0.5) ($modal-header-padding-x * -0.5)
($modal-header-padding-y * -0.5) auto;
} }
} }
@ -128,7 +132,7 @@
flex-shrink: 0; flex-shrink: 0;
align-items: center; // vertically center align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items 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 * .5; padding: $modal-inner-padding - $modal-footer-margin-between * 0.5;
border-top: $modal-footer-border-width solid $modal-footer-border-color; border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius); @include border-bottom-radius($modal-content-inner-border-radius);
@ -136,7 +140,7 @@
// This solution is far from ideal because of the universal selector usage, // This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800 // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * { > * {
margin: $modal-footer-margin-between * .5; margin: $modal-footer-margin-between * 0.5;
} }
} }
@ -160,7 +164,9 @@
@include box-shadow($modal-content-box-shadow-sm-up); @include box-shadow($modal-content-box-shadow-sm-up);
} }
.modal-sm { max-width: $modal-sm; } .modal-sm {
max-width: $modal-sm;
}
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@ -171,7 +177,9 @@
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; } .modal-xl {
max-width: $modal-xl;
}
} }
// scss-docs-start modal-fullscreen-loop // scss-docs-start modal-fullscreen-loop

208
src/assets/styles/bootstrap/_nav.scss
View File

@ -4,37 +4,37 @@
// `<nav>`s, `<ul>`s or `<ol>`s. // `<nav>`s, `<ul>`s or `<ol>`s.
.nav { .nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
} }
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding-y $nav-link-padding-x; padding: $nav-link-padding-y $nav-link-padding-x;
@include font-size($nav-link-font-size); @include font-size($nav-link-font-size);
font-weight: $nav-link-font-weight; font-weight: $nav-link-font-weight;
color: $nav-link-color; color: $nav-link-color;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition); @include transition($nav-link-transition);
display: flex; display: flex;
align-items: center; align-items: center;
&:hover, &:hover,
&:focus { &:focus {
color: $nav-link-hover-color; color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
} }
// Disabled state lightens text // Disabled state lightens text
&.disabled { &.disabled {
color: $nav-link-disabled-color; color: $nav-link-disabled-color;
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
} }
// //
@ -42,62 +42,62 @@
// //
.nav-tabs { .nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-link { .nav-link {
position: relative; position: relative;
margin-bottom: -$nav-tabs-border-width; margin-bottom: -$nav-tabs-border-width;
background-color: $nav-tabs-link-bg; background-color: $nav-tabs-link-bg;
border: $nav-tabs-border-width solid $nav-tabs-border-color; border: $nav-tabs-border-width solid $nav-tabs-border-color;
@include border-top-radius($nav-tabs-border-radius); @include border-top-radius($nav-tabs-border-radius);
&.active { &.active {
&:before { &:before {
background: #ffffff; background: #ffffff;
} }
}
&:before {
content: "";
position: absolute;
width: 93%;
height: 3px;
border-radius: $border-radius;
top: 1.5px;
left: 0;
right: 0;
margin: auto;
background: #c2c9d1;
z-index: 1;
}
&:hover,
&:focus {
border-color: $nav-tabs-link-hover-border-color;
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
}
&.disabled {
color: $nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
} }
.nav-link.active, &:before {
.nav-item.show .nav-link { content: "";
color: $nav-tabs-link-active-color; position: absolute;
background-color: $nav-tabs-link-active-bg; width: 93%;
border-color: $nav-tabs-link-active-border-color; height: 3px;
border-radius: $border-radius;
top: 1.5px;
left: 0;
right: 0;
margin: auto;
background: #c2c9d1;
z-index: 1;
} }
.dropdown-menu { &:hover,
// Make dropdown border overlap tab border &:focus {
margin-top: -$nav-tabs-border-width; border-color: $nav-tabs-link-hover-border-color;
// Remove the top rounded corners here since there is a hard edge above the menu // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
@include border-top-radius(0); isolation: isolate;
} }
&.disabled {
color: $nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-tabs-link-active-color;
background-color: $nav-tabs-link-active-bg;
border-color: $nav-tabs-link-active-border-color;
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
} }
// //
@ -105,17 +105,17 @@
// //
.nav-pills { .nav-pills {
.nav-link { .nav-link {
background: none; background: none;
border: 0; border: 0;
@include border-radius($nav-pills-border-radius); @include border-radius($nav-pills-border-radius);
} }
.nav-link.active, .nav-link.active,
.show > .nav-link { .show > .nav-link {
color: $nav-pills-link-active-color; color: $nav-pills-link-active-color;
@include gradient-bg($nav-pills-link-active-bg); @include gradient-bg($nav-pills-link-active-bg);
} }
} }
// //
@ -123,27 +123,27 @@
// //
.nav-fill { .nav-fill {
> .nav-link, > .nav-link,
.nav-item { .nav-item {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
} }
} }
.nav-justified { .nav-justified {
> .nav-link, > .nav-link,
.nav-item { .nav-item {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
} }
} }
.nav-fill, .nav-fill,
.nav-justified { .nav-justified {
.nav-item .nav-link { .nav-item .nav-link {
width: 100%; // Make sure button will grow width: 100%; // Make sure button will grow
} }
} }
// Tabbable tabs // Tabbable tabs
@ -151,10 +151,10 @@
// Hide tabbable panes to start, show them when `.active` // Hide tabbable panes to start, show them when `.active`
.tab-content { .tab-content {
> .tab-pane { > .tab-pane {
display: none; display: none;
} }
> .active { > .active {
display: block; display: block;
} }
} }

7
src/assets/styles/bootstrap/_navbar.scss
View File

@ -8,7 +8,6 @@
// Navbar position // Navbar position
// Navbar themes // Navbar themes
// Navbar // Navbar
// //
// Provide a static navbar from which we expand to create full-width, fixed, and // Provide a static navbar from which we expand to create full-width, fixed, and
@ -48,7 +47,6 @@
} }
} }
// Navbar brand // Navbar brand
// //
// Used for brand, project, or site names. // Used for brand, project, or site names.
@ -67,7 +65,6 @@
} }
} }
// Navbar nav // Navbar nav
// //
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
@ -89,7 +86,6 @@
} }
} }
// Navbar text // Navbar text
// //
// //
@ -99,7 +95,6 @@
padding-bottom: $nav-link-padding-y; padding-bottom: $nav-link-padding-y;
} }
// Responsive navbar // Responsive navbar
// //
// Custom styles for responsive collapsing and toggling of navbar contents. // Custom styles for responsive collapsing and toggling of navbar contents.
@ -278,7 +273,7 @@
a, a,
a:hover, a:hover,
a:focus { a:focus {
color: $navbar-light-active-color; color: $navbar-light-active-color;
} }
} }

14
src/assets/styles/bootstrap/_offcanvas.scss
View File

@ -15,7 +15,11 @@
} }
.offcanvas-backdrop { .offcanvas-backdrop {
@include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity); @include overlay-backdrop(
$zindex-offcanvas-backdrop,
$offcanvas-backdrop-bg,
$offcanvas-backdrop-opacity
);
} }
.offcanvas-header { .offcanvas-header {
@ -25,10 +29,10 @@
padding: $offcanvas-padding-y $offcanvas-padding-x; padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close { .btn-close {
padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5); padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
margin-top: $offcanvas-padding-y * -.5; margin-top: $offcanvas-padding-y * -0.5;
margin-right: $offcanvas-padding-x * -.5; margin-right: $offcanvas-padding-x * -0.5;
margin-bottom: $offcanvas-padding-y * -.5; margin-bottom: $offcanvas-padding-y * -0.5;
} }
} }

22
src/assets/styles/bootstrap/_pagination.scss
View File

@ -49,16 +49,30 @@
} }
} }
// //
// Sizing // Sizing
// //
@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius); @include pagination-size(
$pagination-padding-y,
$pagination-padding-x,
null,
$pagination-border-radius
);
.pagination-lg { .pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg); @include pagination-size(
$pagination-padding-y-lg,
$pagination-padding-x-lg,
$font-size-lg,
$pagination-border-radius-lg
);
} }
.pagination-sm { .pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm); @include pagination-size(
$pagination-padding-y-sm,
$pagination-padding-x-sm,
$font-size-sm,
$pagination-border-radius-sm
);
} }

11
src/assets/styles/bootstrap/_placeholders.scss
View File

@ -14,11 +14,11 @@
// Sizing // Sizing
.placeholder-xs { .placeholder-xs {
min-height: .6em; min-height: 0.6em;
} }
.placeholder-sm { .placeholder-sm {
min-height: .8em; min-height: 0.8em;
} }
.placeholder-lg { .placeholder-lg {
@ -39,7 +39,12 @@
} }
.placeholder-wave { .placeholder-wave {
mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); mask-image: linear-gradient(
130deg,
$black 55%,
rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,
$black 95%
);
mask-size: 200% 100%; mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite; animation: placeholder-wave 2s linear infinite;
} }

24
src/assets/styles/bootstrap/_popover.scss
View File

@ -40,13 +40,13 @@
&::before { &::before {
bottom: 0; bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width * .5) 0; border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
border-top-color: $popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
} }
&::after { &::after {
bottom: $popover-border-width; bottom: $popover-border-width;
border-width: $popover-arrow-height ($popover-arrow-width * .5) 0; border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
} }
} }
@ -60,13 +60,15 @@
&::before { &::before {
left: 0; left: 0;
border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0; border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
($popover-arrow-width * 0.5) 0;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
&::after { &::after {
left: $popover-border-width; left: $popover-border-width;
border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0; border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
($popover-arrow-width * 0.5) 0;
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
} }
} }
@ -78,13 +80,15 @@
&::before { &::before {
top: 0; top: 0;
border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5); border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
($popover-arrow-width * 0.5);
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
&::after { &::after {
top: $popover-border-width; top: $popover-border-width;
border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5); border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
($popover-arrow-width * 0.5);
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
} }
@ -96,7 +100,7 @@
left: 50%; left: 50%;
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
margin-left: -$popover-arrow-width * .5; margin-left: -$popover-arrow-width * 0.5;
content: ""; content: "";
border-bottom: $popover-border-width solid $popover-header-bg; border-bottom: $popover-border-width solid $popover-header-bg;
} }
@ -110,13 +114,15 @@
&::before { &::before {
right: 0; right: 0;
border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height; border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
$popover-arrow-height;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
&::after { &::after {
right: $popover-border-width; right: $popover-border-width;
border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height; border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
$popover-arrow-height;
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }
} }

4
src/assets/styles/bootstrap/_progress.scss
View File

@ -3,7 +3,9 @@
// scss-docs-start progress-keyframes // scss-docs-start progress-keyframes
@if $enable-transitions { @if $enable-transitions {
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; } 0% {
background-position-x: $progress-height;
}
} }
} }
// scss-docs-end progress-keyframes // scss-docs-end progress-keyframes

370
src/assets/styles/bootstrap/_reboot.scss
View File

@ -14,8 +14,8 @@
*, *,
*::before, *::before,
*::after { *::after {
line-height: normal; line-height: normal;
box-sizing: border-box; box-sizing: border-box;
} }
// Root // Root
@ -24,15 +24,15 @@
// null by default, thus nothing is generated. // null by default, thus nothing is generated.
:root { :root {
@if $font-size-root != null { @if $font-size-root != null {
font-size: var(--#{$variable-prefix}-root-font-size); font-size: var(--#{$variable-prefix}-root-font-size);
} }
@if $enable-smooth-scroll { @if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth; scroll-behavior: smooth;
}
} }
}
} }
// Body // Body
@ -44,16 +44,16 @@
// scss-docs-start reboot-body-rules // scss-docs-start reboot-body-rules
body { body {
margin: 0; // 1 margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family); font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size)); @include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight); font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height); line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color); color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align); text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2 background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3 -webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4 -webkit-tap-highlight-color: rgba($black, 0); // 4
} }
// scss-docs-end reboot-body-rules // scss-docs-end reboot-body-rules
@ -63,15 +63,15 @@ body {
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
hr { hr {
margin: $hr-margin-y 0; margin: $hr-margin-y 0;
color: $hr-color; // 1 color: $hr-color; // 1
background-color: rgba(black,.2); background-color: rgba(black, 0.2);
border: 0; border: 0;
opacity: $hr-opacity; opacity: $hr-opacity;
} }
hr:not([size]) { hr:not([size]) {
height: $hr-height; // 2 height: $hr-height; // 2
} }
// Typography // Typography
@ -81,43 +81,43 @@ hr:not([size]) {
// margin for easier control within type scales as it avoids margin collapsing. // margin for easier control within type scales as it avoids margin collapsing.
%heading { %heading {
margin-top: 0; // 1 margin-top: 0; // 1
margin-bottom: $headings-margin-bottom; margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family; font-family: $headings-font-family;
font-style: $headings-font-style; font-style: $headings-font-style;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
line-height: $headings-line-height; line-height: $headings-line-height;
color: $headings-color; color: $headings-color;
} }
h1 { h1 {
@extend %heading; @extend %heading;
@include font-size($h1-font-size); @include font-size($h1-font-size);
} }
h2 { h2 {
@extend %heading; @extend %heading;
@include font-size($h2-font-size); @include font-size($h2-font-size);
} }
h3 { h3 {
@extend %heading; @extend %heading;
@include font-size($h3-font-size); @include font-size($h3-font-size);
} }
h4 { h4 {
@extend %heading; @extend %heading;
@include font-size($h4-font-size); @include font-size($h4-font-size);
} }
h5 { h5 {
@extend %heading; @extend %heading;
@include font-size($h5-font-size); @include font-size($h5-font-size);
} }
h6 { h6 {
@extend %heading; @extend %heading;
@include font-size($h6-font-size); @include font-size($h6-font-size);
} }
// Reset margins on paragraphs // Reset margins on paragraphs
@ -126,8 +126,8 @@ h6 {
// bottom margin to use `rem` units instead of `em`. // bottom margin to use `rem` units instead of `em`.
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: $paragraph-margin-bottom; margin-bottom: $paragraph-margin-bottom;
} }
// Abbreviations // Abbreviations
@ -139,56 +139,56 @@ p {
abbr[title], abbr[title],
abbr[data-bs-original-title] { abbr[data-bs-original-title] {
// 1 // 1
text-decoration: underline dotted; // 2 text-decoration: underline dotted; // 2
cursor: help; // 3 cursor: help; // 3
text-decoration-skip-ink: none; // 4 text-decoration-skip-ink: none; // 4
} }
// Address // Address
address { address {
margin-bottom: 1rem; margin-bottom: 1rem;
font-style: normal; font-style: normal;
line-height: inherit; line-height: inherit;
} }
// Lists // Lists
ol, ol,
ul { ul {
padding-left: 2rem; padding-left: 2rem;
} }
ol, ol,
ul, ul,
dl { dl {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
ol ol, ol ol,
ul ul, ul ul,
ol ul, ol ul,
ul ol { ul ol {
margin-bottom: 0; margin-bottom: 0;
} }
dt { dt {
font-weight: $dt-font-weight; font-weight: $dt-font-weight;
} }
// 1. Undo browser default // 1. Undo browser default
dd { dd {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-left: 0; // 1 margin-left: 0; // 1
} }
// Blockquote // Blockquote
blockquote { blockquote {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
// Strong // Strong
@ -197,7 +197,7 @@ blockquote {
b, b,
strong { strong {
font-weight: $font-weight-bolder; font-weight: $font-weight-bolder;
} }
// Small // Small
@ -205,14 +205,14 @@ strong {
// Add the correct font size in all browsers // Add the correct font size in all browsers
small { small {
@include font-size($small-font-size); @include font-size($small-font-size);
} }
// Mark // Mark
mark { mark {
padding: $mark-padding; padding: $mark-padding;
background-color: $mark-bg; background-color: $mark-bg;
} }
// Sub and Sup // Sub and Sup
@ -222,29 +222,29 @@ mark {
sub, sub,
sup { sup {
position: relative; position: relative;
@include font-size($sub-sup-font-size); @include font-size($sub-sup-font-size);
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
// Links // Links
a { a {
color: $link-color; color: $link-color;
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover { &:hover {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }
// And undo these styles for placeholder links/named anchors (without href). // And undo these styles for placeholder links/named anchors (without href).
@ -253,11 +253,11 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402 // See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) { a:not([href]):not([class]) {
&, &,
&:hover { &:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
} }
// Code // Code
@ -266,12 +266,10 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: $font-family-code; font-family: $font-family-code;
@include font-size( @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
1em direction: ltr #{"/* rtl:ignore */"};
); // Correct the odd `em` font sizing in all browsers. unicode-bidi: bidi-override;
direction: ltr #{"/* rtl:ignore */"};
unicode-bidi: bidi-override;
} }
// 1. Remove browser default top margin // 1. Remove browser default top margin
@ -279,44 +277,44 @@ samp {
// 3. Don't allow content to break outside // 3. Don't allow content to break outside
pre { pre {
display: block; display: block;
margin-top: 0; // 1 margin-top: 0; // 1
margin-bottom: 1rem; // 2 margin-bottom: 1rem; // 2
overflow: auto; // 3 overflow: auto; // 3
@include font-size($code-font-size); @include font-size($code-font-size);
color: $pre-color; color: $pre-color;
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
@include font-size(inherit); @include font-size(inherit);
color: inherit; color: inherit;
word-break: normal; word-break: normal;
} }
} }
code { code {
@include font-size($code-font-size); @include font-size($code-font-size);
color: $code-color; color: $code-color;
word-wrap: break-word; word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more // Streamline the style when inside anchors to avoid broken underline and more
a > & { a > & {
color: inherit; color: inherit;
} }
} }
kbd { kbd {
padding: $kbd-padding-y $kbd-padding-x; padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size); @include font-size($kbd-font-size);
color: $kbd-color; color: $kbd-color;
background-color: $kbd-bg; background-color: $kbd-bg;
@include border-radius($border-radius-sm); @include border-radius($border-radius-sm);
kbd { kbd {
padding: 0; padding: 0;
@include font-size(1em); @include font-size(1em);
font-weight: $nested-kbd-font-weight; font-weight: $nested-kbd-font-weight;
} }
} }
// Figures // Figures
@ -324,14 +322,14 @@ kbd {
// Apply a consistent margin strategy (matches our type styles). // Apply a consistent margin strategy (matches our type styles).
figure { figure {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
// Images and content // Images and content
img, img,
svg { svg {
vertical-align: middle; vertical-align: middle;
} }
// Tables // Tables
@ -339,15 +337,15 @@ svg {
// Prevent double borders // Prevent double borders
table { table {
caption-side: bottom; caption-side: bottom;
border-collapse: collapse; border-collapse: collapse;
} }
caption { caption {
padding-top: $table-cell-padding-y; padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y; padding-bottom: $table-cell-padding-y;
color: $table-caption-color; color: $table-caption-color;
text-align: left; text-align: left;
} }
// 1. Removes font-weight bold by inheriting // 1. Removes font-weight bold by inheriting
@ -355,9 +353,9 @@ caption {
// 3. Fix alignment for Safari // 3. Fix alignment for Safari
th { th {
font-weight: $table-th-font-weight; // 1 font-weight: $table-th-font-weight; // 1
text-align: inherit; // 2 text-align: inherit; // 2
text-align: -webkit-match-parent; // 3 text-align: -webkit-match-parent; // 3
} }
thead, thead,
@ -366,9 +364,9 @@ tfoot,
tr, tr,
td, td,
th { th {
border-color: inherit; border-color: inherit;
border-style: solid; border-style: solid;
border-width: 0; border-width: 0;
} }
// Forms // Forms
@ -376,15 +374,15 @@ th {
// 1. Allow labels to use `margin` for spacing. // 1. Allow labels to use `margin` for spacing.
label { label {
display: inline-block; // 1 display: inline-block; // 1
} }
// Remove the default `border-radius` that macOS Chrome adds. // Remove the default `border-radius` that macOS Chrome adds.
// See https://github.com/twbs/bootstrap/issues/24093 // See https://github.com/twbs/bootstrap/issues/24093
button { button {
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 0; border-radius: 0;
} }
// Explicitly remove focus outline in Chromium when it shouldn't be // Explicitly remove focus outline in Chromium when it shouldn't be
@ -393,7 +391,7 @@ button {
// confused and applies its very visible two-tone outline anyway. // confused and applies its very visible two-tone outline anyway.
button:focus:not(:focus-visible) { button:focus:not(:focus-visible) {
outline: 0; outline: 0;
} }
// 1. Remove the margin in Firefox and Safari // 1. Remove the margin in Firefox and Safari
@ -403,40 +401,40 @@ button,
select, select,
optgroup, optgroup,
textarea { textarea {
margin: 0; // 1 margin: 0; // 1
font-family: inherit; font-family: inherit;
@include font-size(inherit); @include font-size(inherit);
line-height: inherit; line-height: inherit;
} }
// Remove the inheritance of text transform in Firefox // Remove the inheritance of text transform in Firefox
button, button,
select { select {
text-transform: none; text-transform: none;
} }
// Set the cursor for non-`<button>` buttons // Set the cursor for non-`<button>` buttons
// //
// Details at https://github.com/twbs/bootstrap/pull/30562 // Details at https://github.com/twbs/bootstrap/pull/30562
[role="button"] { [role="button"] {
cursor: pointer; cursor: pointer;
} }
select { select {
// Remove the inheritance of word-wrap in Safari. // Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990 // See https://github.com/twbs/bootstrap/issues/24990
word-wrap: normal; word-wrap: normal;
// Undo the opacity change from Chrome // Undo the opacity change from Chrome
&:disabled { &:disabled {
opacity: 1; opacity: 1;
} }
} }
// Remove the dropdown arrow in Chrome from inputs built with datalists. // Remove the dropdown arrow in Chrome from inputs built with datalists.
// See https://stackoverflow.com/a/54997118 // See https://stackoverflow.com/a/54997118
[list]::-webkit-calendar-picker-indicator { [list]::-webkit-calendar-picker-indicator {
display: none; display: none;
} }
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@ -448,26 +446,26 @@ button,
[type="button"], // 1 [type="button"], // 1
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
@if $enable-button-pointers { @if $enable-button-pointers {
&:not(:disabled) { &:not(:disabled) {
cursor: pointer; // 3 cursor: pointer; // 3
}
} }
}
} }
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
::-moz-focus-inner { ::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers. // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea { textarea {
resize: vertical; // 1 resize: vertical; // 1
} }
// 1. Browsers set a default `min-width: min-content;` on fieldsets, // 1. Browsers set a default `min-width: min-content;` on fieldsets,
@ -478,10 +476,10 @@ textarea {
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout. // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
fieldset { fieldset {
min-width: 0; // 1 min-width: 0; // 1
padding: 0; // 2 padding: 0; // 2
margin: 0; // 2 margin: 0; // 2
border: 0; // 2 border: 0; // 2
} }
// 1. By using `float: left`, the legend will behave like a block element. // 1. By using `float: left`, the legend will behave like a block element.
@ -490,17 +488,17 @@ fieldset {
// See https://github.com/twbs/bootstrap/issues/29712 // See https://github.com/twbs/bootstrap/issues/29712
legend { legend {
float: left; // 1 float: left; // 1
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: $legend-margin-bottom; margin-bottom: $legend-margin-bottom;
@include font-size($legend-font-size); @include font-size($legend-font-size);
font-weight: $legend-font-weight; font-weight: $legend-font-weight;
line-height: inherit; line-height: inherit;
+ * { + * {
clear: left; // 2 clear: left; // 2
} }
} }
// Fix height of inputs with a type of datetime-local, date, month, week, or time // Fix height of inputs with a type of datetime-local, date, month, week, or time
@ -513,11 +511,11 @@ legend {
::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field { ::-webkit-datetime-edit-year-field {
padding: 0; padding: 0;
} }
::-webkit-inner-spin-button { ::-webkit-inner-spin-button {
height: auto; height: auto;
} }
// 1. Correct the outline style in Safari. // 1. Correct the outline style in Safari.
@ -527,8 +525,8 @@ legend {
// https://github.com/twbs/bootstrap/issues/11586. // https://github.com/twbs/bootstrap/issues/11586.
[type="search"] { [type="search"] {
outline-offset: -2px; // 1 outline-offset: -2px; // 1
-webkit-appearance: textfield; // 2 -webkit-appearance: textfield; // 2
} }
// 1. A few input types should stay LTR // 1. A few input types should stay LTR
@ -548,39 +546,39 @@ legend {
// Remove the inner padding in Chrome and Safari on macOS. // Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration { ::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// Remove padding around color pickers in webkit browsers // Remove padding around color pickers in webkit browsers
::-webkit-color-swatch-wrapper { ::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
// Inherit font family and line height for file input buttons // Inherit font family and line height for file input buttons
::file-selector-button { ::file-selector-button {
font: inherit; font: inherit;
} }
// 1. Change font properties to `inherit` // 1. Change font properties to `inherit`
// 2. Correct the inability to style clickable types in iOS and Safari. // 2. Correct the inability to style clickable types in iOS and Safari.
::-webkit-file-upload-button { ::-webkit-file-upload-button {
font: inherit; // 1 font: inherit; // 1
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
} }
// Correct element displays // Correct element displays
output { output {
display: inline-block; display: inline-block;
} }
// Remove border from iframe // Remove border from iframe
iframe { iframe {
border: 0; border: 0;
} }
// Summary // Summary
@ -588,8 +586,8 @@ iframe {
// 1. Add the correct display in all browsers // 1. Add the correct display in all browsers
summary { summary {
display: list-item; // 1 display: list-item; // 1
cursor: pointer; cursor: pointer;
} }
// Progress // Progress
@ -597,7 +595,7 @@ summary {
// Add the correct vertical alignment in Chrome, Firefox, and Opera. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
// Hidden attribute // Hidden attribute
@ -605,5 +603,5 @@ progress {
// Always hide an element with the `hidden` HTML attribute. // Always hide an element with the `hidden` HTML attribute.
[hidden] { [hidden] {
display: none !important; display: none !important;
} }

4
src/assets/styles/bootstrap/_spinners.scss
View File

@ -4,7 +4,9 @@
// scss-docs-start spinner-border-keyframes // scss-docs-start spinner-border-keyframes
@keyframes spinner-border { @keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } to {
transform: rotate(360deg) #{"/* rtl:ignore */"};
}
} }
// scss-docs-end spinner-border-keyframes // scss-docs-end spinner-border-keyframes

16
src/assets/styles/bootstrap/_tables.scss
View File

@ -44,7 +44,6 @@
} }
} }
// //
// Change placement of captions with a class // Change placement of captions with a class
// //
@ -53,7 +52,6 @@
caption-side: top; caption-side: top;
} }
// //
// Condensed table w/ half padding // Condensed table w/ half padding
// //
@ -65,7 +63,6 @@
} }
} }
// Border versions // Border versions
// //
// Add or remove borders all around the table and between all the columns. // Add or remove borders all around the table and between all the columns.
@ -99,7 +96,9 @@
.table-striped { .table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) { > tbody > tr:nth-of-type(#{$table-striped-order}) {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); --#{$variable-prefix}table-accent-bg: var(
--#{$variable-prefix}table-striped-bg
);
color: var(--#{$variable-prefix}table-striped-color); color: var(--#{$variable-prefix}table-striped-color);
} }
} }
@ -109,7 +108,9 @@
// The `.table-active` class can be added to highlight rows or cells // The `.table-active` class can be added to highlight rows or cells
.table-active { .table-active {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg); --#{$variable-prefix}table-accent-bg: var(
--#{$variable-prefix}table-active-bg
);
color: var(--#{$variable-prefix}table-active-color); color: var(--#{$variable-prefix}table-active-color);
} }
@ -119,12 +120,13 @@
.table-hover { .table-hover {
> tbody > tr:hover { > tbody > tr:hover {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg); --#{$variable-prefix}table-accent-bg: var(
--#{$variable-prefix}table-hover-bg
);
color: var(--#{$variable-prefix}table-hover-color); color: var(--#{$variable-prefix}table-hover-color);
} }
} }
// Table variants // Table variants
// //
// Table variants set the table cell backgrounds, border colors // Table variants set the table cell backgrounds, border colors

6
src/assets/styles/bootstrap/_toasts.scss
View File

@ -37,10 +37,12 @@
background-color: $toast-header-background-color; background-color: $toast-header-background-color;
background-clip: padding-box; background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color; border-bottom: $toast-border-width solid $toast-header-border-color;
@include border-top-radius(subtract($toast-border-radius, $toast-border-width)); @include border-top-radius(
subtract($toast-border-radius, $toast-border-width)
);
.btn-close { .btn-close {
margin-right: $toast-padding-x * -.5; margin-right: $toast-padding-x * -0.5;
margin-left: $toast-padding-x; margin-left: $toast-padding-x;
} }
} }

14
src/assets/styles/bootstrap/_tooltip.scss
View File

@ -12,7 +12,9 @@
word-wrap: break-word; word-wrap: break-word;
opacity: 0; opacity: 0;
&.show { opacity: $tooltip-opacity; } &.show {
opacity: $tooltip-opacity;
}
.tooltip-arrow { .tooltip-arrow {
position: absolute; position: absolute;
@ -37,7 +39,7 @@
&::before { &::before {
top: -1px; top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0; border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
border-top-color: $tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
} }
@ -53,7 +55,8 @@
&::before { &::before {
right: -1px; right: -1px;
border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0; border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height
($tooltip-arrow-width * 0.5) 0;
border-right-color: $tooltip-arrow-color; border-right-color: $tooltip-arrow-color;
} }
} }
@ -67,7 +70,7 @@
&::before { &::before {
bottom: -1px; bottom: -1px;
border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height; border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
} }
@ -83,7 +86,8 @@
&::before { &::before {
left: -1px; left: -1px;
border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height; border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5)
$tooltip-arrow-height;
border-left-color: $tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
} }

2
src/assets/styles/bootstrap/_type.scss
View File

@ -25,7 +25,6 @@
@extend h6; @extend h6;
} }
.lead { .lead {
@include font-size($lead-font-size); @include font-size($lead-font-size);
font-weight: $lead-font-weight; font-weight: $lead-font-weight;
@ -71,7 +70,6 @@
} }
} }
// //
// Misc // Misc
// //

549
src/assets/styles/bootstrap/_utilities.scss
View File

@ -7,41 +7,45 @@ $utilities: () !default;
$utilities: map-merge( $utilities: map-merge(
( (
// scss-docs-start utils-vertical-align // scss-docs-start utils-vertical-align
"align": ( "align":
property: vertical-align, (
class: align, property: vertical-align,
values: baseline top middle bottom text-bottom text-top class: align,
), values: baseline top middle bottom text-bottom text-top,
),
// scss-docs-end utils-vertical-align // scss-docs-end utils-vertical-align
// scss-docs-start utils-float // scss-docs-start utils-float
"float": ( "float":
responsive: true, (
property: float, responsive: true,
values: ( property: float,
start: left, values: (
end: right, start: left,
none: none, end: right,
) none: none,
), ),
),
// scss-docs-end utils-float // scss-docs-end utils-float
// Opacity utilities // Opacity utilities
// scss-docs-start utils-opacity // scss-docs-start utils-opacity
"opacity": ( "opacity":
property: opacity, (
values: ( property: opacity,
0: 0, values: (
25: .25, 0: 0,
50: .5, 25: 0.25,
75: .75, 50: 0.5,
100: 1, 75: 0.75,
) 100: 1,
), ),
),
// scss-docs-end utils-opacity // scss-docs-end utils-opacity
// scss-docs-start utils-overflow // scss-docs-start utils-overflow
"overflow": ( "overflow":
property: overflow, (
values: auto hidden visible scroll, property: overflow,
), values: auto hidden visible scroll,
),
"overflow-x": ( "overflow-x": (
property: overflow-x, property: overflow-x,
values: auto hidden visible scroll, values: auto hidden visible scroll,
@ -52,48 +56,52 @@ $utilities: map-merge(
), ),
// scss-docs-end utils-overflow // scss-docs-end utils-overflow
// scss-docs-start utils-display // scss-docs-start utils-display
"display": ( "display":
responsive: true, (
print: true, responsive: true,
property: display, print: true,
class: d, property: display,
values: inline inline-block block grid table table-row table-cell flex inline-flex none class: d,
), values: inline inline-block block grid table table-row table-cell flex
inline-flex none,
),
// scss-docs-end utils-display // scss-docs-end utils-display
// scss-docs-start utils-shadow // scss-docs-start utils-shadow
"shadow": ( "shadow":
property: box-shadow, (
class: shadow, property: box-shadow,
values: ( class: shadow,
null: $box-shadow, values: (
sm: $box-shadow-sm, null: $box-shadow,
lg: $box-shadow-lg, sm: $box-shadow-sm,
none: none, lg: $box-shadow-lg,
) none: none,
), ),
),
// scss-docs-end utils-shadow // scss-docs-end utils-shadow
// scss-docs-start utils-position // scss-docs-start utils-position
"position": ( "position":
property: position, (
values: static relative absolute fixed sticky property: position,
), values: static relative absolute fixed sticky,
),
"top": ( "top": (
property: top, property: top,
values: $position-values values: $position-values,
), ),
"bottom": ( "bottom": (
property: bottom, property: bottom,
values: $position-values values: $position-values,
), ),
"start": ( "start": (
property: left, property: left,
class: start, class: start,
values: $position-values values: $position-values,
), ),
"end": ( "end": (
property: right, property: right,
class: end, class: end,
values: $position-values values: $position-values,
), ),
"translate-middle": ( "translate-middle": (
property: transform, property: transform,
@ -102,23 +110,24 @@ $utilities: map-merge(
null: translate(-50%, -50%), null: translate(-50%, -50%),
x: translateX(-50%), x: translateX(-50%),
y: translateY(-50%), y: translateY(-50%),
) ),
), ),
// scss-docs-end utils-position // scss-docs-end utils-position
// scss-docs-start utils-borders // scss-docs-start utils-borders
"border": ( "border":
property: border, (
values: ( property: border,
null: $border-width solid $border-color, values: (
0: 0, null: $border-width solid $border-color,
) 0: 0,
), ),
),
"border-top": ( "border-top": (
property: border-top, property: border-top,
values: ( values: (
null: $border-width solid $border-color, null: $border-width solid $border-color,
0: 0, 0: 0,
) ),
), ),
"border-end": ( "border-end": (
property: border-right, property: border-right,
@ -126,14 +135,14 @@ $utilities: map-merge(
values: ( values: (
null: $border-width solid $border-color, null: $border-width solid $border-color,
0: 0, 0: 0,
) ),
), ),
"border-bottom": ( "border-bottom": (
property: border-bottom, property: border-bottom,
values: ( values: (
null: $border-width solid $border-color, null: $border-width solid $border-color,
0: 0, 0: 0,
) ),
), ),
"border-start": ( "border-start": (
property: border-left, property: border-left,
@ -141,46 +150,59 @@ $utilities: map-merge(
values: ( values: (
null: $border-width solid $border-color, null: $border-width solid $border-color,
0: 0, 0: 0,
) ),
), ),
"border-color": ( "border-color": (
property: border-color, property: border-color,
class: border, class: border,
values: map-merge($theme-colors, ("white": $white)) values:
map-merge(
$theme-colors,
(
"white": $white,
)
),
), ),
"border-width": ( "border-width": (
property: border-width, property: border-width,
class: border, class: border,
values: $border-widths values: $border-widths,
), ),
// scss-docs-end utils-borders // scss-docs-end utils-borders
// Sizing utilities // Sizing utilities
// scss-docs-start utils-sizing // scss-docs-start utils-sizing
"width": ( "width":
property: width, (
class: w, property: width,
values: ( class: w,
25: 25%, values: (
50: 50%, 25: 25%,
75: 75%, 50: 50%,
100: 100%, 75: 75%,
auto: auto 100: 100%,
) auto: auto,
), ),
),
"max-width": ( "max-width": (
property: max-width, property: max-width,
class: mw, class: mw,
values: (100: 100%) values: (
100: 100%,
),
), ),
"viewport-width": ( "viewport-width": (
property: width, property: width,
class: vw, class: vw,
values: (100: 100vw) values: (
100: 100vw,
),
), ),
"min-viewport-width": ( "min-viewport-width": (
property: min-width, property: min-width,
class: min-vw, class: min-vw,
values: (100: 100vw) values: (
100: 100vw,
),
), ),
"height": ( "height": (
property: height, property: height,
@ -190,37 +212,46 @@ $utilities: map-merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
) ),
), ),
"max-height": ( "max-height": (
property: max-height, property: max-height,
class: mh, class: mh,
values: (100: 100%) values: (
100: 100%,
),
), ),
"viewport-height": ( "viewport-height": (
property: height, property: height,
class: vh, class: vh,
values: (100: 100vh) values: (
100: 100vh,
),
), ),
"min-viewport-height": ( "min-viewport-height": (
property: min-height, property: min-height,
class: min-vh, class: min-vh,
values: (100: 100vh) values: (
100: 100vh,
),
), ),
// scss-docs-end utils-sizing // scss-docs-end utils-sizing
// Flex utilities // Flex utilities
// scss-docs-start utils-flex // scss-docs-start utils-flex
"flex": ( "flex":
responsive: true, (
property: flex, responsive: true,
values: (fill: 1 1 auto) property: flex,
), values: (
fill: 1 1 auto,
),
),
"flex-direction": ( "flex-direction": (
responsive: true, responsive: true,
property: flex-direction, property: flex-direction,
class: flex, class: flex,
values: row column row-reverse column-reverse values: row column row-reverse column-reverse,
), ),
"flex-grow": ( "flex-grow": (
responsive: true, responsive: true,
@ -229,7 +260,7 @@ $utilities: map-merge(
values: ( values: (
grow-0: 0, grow-0: 0,
grow-1: 1, grow-1: 1,
) ),
), ),
"flex-shrink": ( "flex-shrink": (
responsive: true, responsive: true,
@ -238,19 +269,19 @@ $utilities: map-merge(
values: ( values: (
shrink-0: 0, shrink-0: 0,
shrink-1: 1, shrink-1: 1,
) ),
), ),
"flex-wrap": ( "flex-wrap": (
responsive: true, responsive: true,
property: flex-wrap, property: flex-wrap,
class: flex, class: flex,
values: wrap nowrap wrap-reverse values: wrap nowrap wrap-reverse,
), ),
"gap": ( "gap": (
responsive: true, responsive: true,
property: gap, property: gap,
class: gap, class: gap,
values: $spacers values: $spacers,
), ),
"justify-content": ( "justify-content": (
responsive: true, responsive: true,
@ -262,7 +293,7 @@ $utilities: map-merge(
between: space-between, between: space-between,
around: space-around, around: space-around,
evenly: space-evenly, evenly: space-evenly,
) ),
), ),
"align-items": ( "align-items": (
responsive: true, responsive: true,
@ -273,7 +304,7 @@ $utilities: map-merge(
center: center, center: center,
baseline: baseline, baseline: baseline,
stretch: stretch, stretch: stretch,
) ),
), ),
"align-content": ( "align-content": (
responsive: true, responsive: true,
@ -285,7 +316,7 @@ $utilities: map-merge(
between: space-between, between: space-between,
around: space-around, around: space-around,
stretch: stretch, stretch: stretch,
) ),
), ),
"align-self": ( "align-self": (
responsive: true, responsive: true,
@ -297,7 +328,7 @@ $utilities: map-merge(
center: center, center: center,
baseline: baseline, baseline: baseline,
stretch: stretch, stretch: stretch,
) ),
), ),
"order": ( "order": (
responsive: true, responsive: true,
@ -316,152 +347,200 @@ $utilities: map-merge(
// scss-docs-end utils-flex // scss-docs-end utils-flex
// Margin utilities // Margin utilities
// scss-docs-start utils-spacing // scss-docs-start utils-spacing
"margin": ( "margin":
responsive: true, (
property: margin, responsive: true,
class: m, property: margin,
values: map-merge($spacers, (auto: auto)) class: m,
), values:
map-merge(
$spacers,
(
auto: auto,
)
),
),
"margin-x": ( "margin-x": (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-right margin-left,
class: mx, class: mx,
values: map-merge($spacers, (auto: auto)) values:
map-merge(
$spacers,
(
auto: auto,
)
),
), ),
"margin-y": ( "margin-y": (
responsive: true, responsive: true,
property: margin-top margin-bottom, property: margin-top margin-bottom,
class: my, class: my,
values: map-merge($spacers, (auto: auto)) values:
map-merge(
$spacers,
(
auto: auto,
)
),
), ),
"margin-top": ( "margin-top": (
responsive: true, responsive: true,
property: margin-top, property: margin-top,
class: mt, class: mt,
values: map-merge($spacers, (auto: auto)) values:
map-merge(
$spacers,
(
auto: auto,
)
),
), ),
"margin-end": ( "margin-end": (
responsive: true, responsive: true,
property: margin-right, property: margin-right,
class: me, class: me,
values: map-merge($spacers, (auto: auto)) values:
map-merge(
$spacers,
(
auto: auto,
)
),
), ),
"margin-bottom": ( "margin-bottom": (
responsive: true, responsive: true,
property: margin-bottom, property: margin-bottom,
class: mb, class: mb,
values: map-merge($spacers, (auto: auto)) values:
map-merge(
$spacers,
(
auto: auto,
)
),
), ),
"margin-start": ( "margin-start": (
responsive: true, responsive: true,
property: margin-left, property: margin-left,
class: ms, class: ms,
values: map-merge($spacers, (auto: auto)) values:
map-merge(
$spacers,
(
auto: auto,
)
),
), ),
// Negative margin utilities // Negative margin utilities
"negative-margin": ( "negative-margin":
responsive: true, (
property: margin, responsive: true,
class: m, property: margin,
values: $negative-spacers class: m,
), values: $negative-spacers,
),
"negative-margin-x": ( "negative-margin-x": (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-right margin-left,
class: mx, class: mx,
values: $negative-spacers values: $negative-spacers,
), ),
"negative-margin-y": ( "negative-margin-y": (
responsive: true, responsive: true,
property: margin-top margin-bottom, property: margin-top margin-bottom,
class: my, class: my,
values: $negative-spacers values: $negative-spacers,
), ),
"negative-margin-top": ( "negative-margin-top": (
responsive: true, responsive: true,
property: margin-top, property: margin-top,
class: mt, class: mt,
values: $negative-spacers values: $negative-spacers,
), ),
"negative-margin-end": ( "negative-margin-end": (
responsive: true, responsive: true,
property: margin-right, property: margin-right,
class: me, class: me,
values: $negative-spacers values: $negative-spacers,
), ),
"negative-margin-bottom": ( "negative-margin-bottom": (
responsive: true, responsive: true,
property: margin-bottom, property: margin-bottom,
class: mb, class: mb,
values: $negative-spacers values: $negative-spacers,
), ),
"negative-margin-start": ( "negative-margin-start": (
responsive: true, responsive: true,
property: margin-left, property: margin-left,
class: ms, class: ms,
values: $negative-spacers values: $negative-spacers,
), ),
// Padding utilities // Padding utilities
"padding": ( "padding":
responsive: true, (
property: padding, responsive: true,
class: p, property: padding,
values: $spacers class: p,
), values: $spacers,
),
"padding-x": ( "padding-x": (
responsive: true, responsive: true,
property: padding-right padding-left, property: padding-right padding-left,
class: px, class: px,
values: $spacers values: $spacers,
), ),
"padding-y": ( "padding-y": (
responsive: true, responsive: true,
property: padding-top padding-bottom, property: padding-top padding-bottom,
class: py, class: py,
values: $spacers values: $spacers,
), ),
"padding-top": ( "padding-top": (
responsive: true, responsive: true,
property: padding-top, property: padding-top,
class: pt, class: pt,
values: $spacers values: $spacers,
), ),
"padding-end": ( "padding-end": (
responsive: true, responsive: true,
property: padding-right, property: padding-right,
class: pe, class: pe,
values: $spacers values: $spacers,
), ),
"padding-bottom": ( "padding-bottom": (
responsive: true, responsive: true,
property: padding-bottom, property: padding-bottom,
class: pb, class: pb,
values: $spacers values: $spacers,
), ),
"padding-start": ( "padding-start": (
responsive: true, responsive: true,
property: padding-left, property: padding-left,
class: ps, class: ps,
values: $spacers values: $spacers,
), ),
// scss-docs-end utils-spacing // scss-docs-end utils-spacing
// Text // Text
// scss-docs-start utils-text // scss-docs-start utils-text
"font-family": ( "font-family":
property: font-family, (
class: font, property: font-family,
values: (monospace: var(--#{$variable-prefix}font-monospace)) class: font,
), values: (
monospace: var(--#{$variable-prefix}font-monospace),
),
),
"font-size": ( "font-size": (
rfs: true, rfs: true,
property: font-size, property: font-size,
class: fs, class: fs,
values: $font-sizes values: $font-sizes,
), ),
"font-style": ( "font-style": (
property: font-style, property: font-style,
class: fst, class: fst,
values: italic normal values: italic normal,
), ),
"font-weight": ( "font-weight": (
property: font-weight, property: font-weight,
@ -471,8 +550,8 @@ $utilities: map-merge(
lighter: $font-weight-lighter, lighter: $font-weight-lighter,
normal: $font-weight-normal, normal: $font-weight-normal,
bold: $font-weight-bold, bold: $font-weight-bold,
bolder: $font-weight-bolder bolder: $font-weight-bolder,
) ),
), ),
"line-height": ( "line-height": (
property: line-height, property: line-height,
@ -482,7 +561,7 @@ $utilities: map-merge(
sm: $line-height-sm, sm: $line-height-sm,
base: $line-height-base, base: $line-height-base,
lg: $line-height-lg, lg: $line-height-lg,
) ),
), ),
"text-align": ( "text-align": (
responsive: true, responsive: true,
@ -492,16 +571,16 @@ $utilities: map-merge(
start: left, start: left,
end: right, end: right,
center: center, center: center,
) ),
), ),
"text-decoration": ( "text-decoration": (
property: text-decoration, property: text-decoration,
values: none underline line-through values: none underline line-through,
), ),
"text-transform": ( "text-transform": (
property: text-transform, property: text-transform,
class: text, class: text,
values: lowercase uppercase capitalize values: lowercase uppercase capitalize,
), ),
"white-space": ( "white-space": (
property: white-space, property: white-space,
@ -509,79 +588,91 @@ $utilities: map-merge(
values: ( values: (
wrap: normal, wrap: normal,
nowrap: nowrap, nowrap: nowrap,
) ),
), ),
"word-wrap": ( "word-wrap": (
property: word-wrap word-break, property: word-wrap word-break,
class: text, class: text,
values: (break: break-word), values: (
rtl: false break: break-word,
),
rtl: false,
), ),
// scss-docs-end utils-text // scss-docs-end utils-text
// scss-docs-start utils-color // scss-docs-start utils-color
"color": ( "color":
property: color, (
class: text, property: color,
local-vars: ( class: text,
"text-opacity": 1 local-vars: (
"text-opacity": 1,
),
values:
map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, 0.5),
// deprecated
"white-50": rgba($white, 0.5),
// deprecated
"reset": inherit,
)
),
), ),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": ( "text-opacity": (
css-var: true, css-var: true,
class: text-opacity, class: text-opacity,
values: ( values: (
25: .25, 25: 0.25,
50: .5, 50: 0.5,
75: .75, 75: 0.75,
100: 1 100: 1,
) ),
), ),
// scss-docs-end utils-color // scss-docs-end utils-color
// scss-docs-start utils-bg-color // scss-docs-start utils-bg-color
"background-color": ( "background-color":
property: background-color, (
class: bg, property: background-color,
local-vars: ( class: bg,
"bg-opacity": 1 local-vars: (
"bg-opacity": 1,
),
values:
map-merge(
$utilities-bg-colors,
(
"transparent": transparent,
)
),
), ),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": ( "bg-opacity": (
css-var: true, css-var: true,
class: bg-opacity, class: bg-opacity,
values: ( values: (
10: .1, 10: 0.1,
25: .25, 25: 0.25,
50: .5, 50: 0.5,
75: .75, 75: 0.75,
100: 1 100: 1,
) ),
), ),
// scss-docs-end utils-bg-color // scss-docs-end utils-bg-color
"gradient": ( "gradient":
property: background-image, (
class: bg, property: background-image,
values: (gradient: var(--#{$variable-prefix}gradient)) class: bg,
), values: (
gradient: var(--#{$variable-prefix}gradient),
),
),
// scss-docs-start utils-interaction // scss-docs-start utils-interaction
"user-select": ( "user-select":
property: user-select, (
values: all auto none property: user-select,
), values: all auto none,
),
"pointer-events": ( "pointer-events": (
property: pointer-events, property: pointer-events,
class: pe, class: pe,
@ -589,50 +680,60 @@ $utilities: map-merge(
), ),
// scss-docs-end utils-interaction // scss-docs-end utils-interaction
// scss-docs-start utils-border-radius // scss-docs-start utils-border-radius
"rounded": ( "rounded":
property: border-radius, (
class: rounded, property: border-radius,
values: ( class: rounded,
null: $border-radius, values: (
0: 0, null: $border-radius,
1: $border-radius-sm, 0: 0,
2: $border-radius, 1: $border-radius-sm,
3: $border-radius-lg, 2: $border-radius,
circle: 50%, 3: $border-radius-lg,
pill: $border-radius-pill circle: 50%,
) pill: $border-radius-pill,
), ),
),
"rounded-top": ( "rounded-top": (
property: border-top-left-radius border-top-right-radius, property: border-top-left-radius border-top-right-radius,
class: rounded-top, class: rounded-top,
values: (null: $border-radius) values: (
null: $border-radius,
),
), ),
"rounded-end": ( "rounded-end": (
property: border-top-right-radius border-bottom-right-radius, property: border-top-right-radius border-bottom-right-radius,
class: rounded-end, class: rounded-end,
values: (null: $border-radius) values: (
null: $border-radius,
),
), ),
"rounded-bottom": ( "rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius, property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom, class: rounded-bottom,
values: (null: $border-radius) values: (
null: $border-radius,
),
), ),
"rounded-start": ( "rounded-start": (
property: border-bottom-left-radius border-top-left-radius, property: border-bottom-left-radius border-top-left-radius,
class: rounded-start, class: rounded-start,
values: (null: $border-radius) values: (
null: $border-radius,
),
), ),
// scss-docs-end utils-border-radius // scss-docs-end utils-border-radius
// scss-docs-start utils-visibility // scss-docs-start utils-visibility
"visibility": ( "visibility":
property: visibility, (
class: null, property: visibility,
values: ( class: null,
visible: visible, values: (
invisible: hidden, visible: visible,
invisible: hidden,
),
) )
) // scss-docs-end utils-visibility
// scss-docs-end utils-visibility
), ),
$utilities $utilities
); );

2
src/assets/styles/bootstrap/_variables.scss
View File

@ -478,7 +478,7 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !d
// //
// Style anchor elements. // Style anchor elements.
$link-color: $body-color !default; $link-color: $black !default;
$link-decoration: underline !default; $link-decoration: underline !default;
$link-shade-percentage: 20% !default; $link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default; $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;

2
src/assets/styles/bootstrap/bootstrap-grid.scss vendored
View File

@ -58,7 +58,7 @@ $utilities: map-get-multiple(
"padding-top", "padding-top",
"padding-end", "padding-end",
"padding-bottom", "padding-bottom",
"padding-start", "padding-start"
) )
); );

23
src/assets/styles/bootstrap/forms/_form-check.scss
View File

@ -14,6 +14,17 @@
} }
} }
.flash-form-check-input {
width: 15px;
height: 15px;
background-image: url(@/assets/images/buttons/checkbox.png);
-webkit-appearance: none;
&:checked {
background-image: url(@/assets/images/buttons/checkbox_checked.png);
}
}
.form-check-input { .form-check-input {
width: $form-check-input-width; width: $form-check-input-width;
height: $form-check-input-width; height: $form-check-input-width;
@ -53,7 +64,8 @@
&[type="checkbox"] { &[type="checkbox"] {
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-check-input-checked-bg-image),
var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-input-checked-bg-image); background-image: escape-svg($form-check-input-checked-bg-image);
} }
@ -61,7 +73,8 @@
&[type="radio"] { &[type="radio"] {
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-check-radio-checked-bg-image),
var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-radio-checked-bg-image); background-image: escape-svg($form-check-radio-checked-bg-image);
} }
@ -73,7 +86,8 @@
border-color: $form-check-input-indeterminate-border-color; border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-check-input-indeterminate-bg-image),
var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image); background-image: escape-svg($form-check-input-indeterminate-bg-image);
} }
@ -123,7 +137,8 @@
background-position: $form-switch-checked-bg-position; background-position: $form-switch-checked-bg-position;
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient); background-image: escape-svg($form-switch-checked-bg-image),
var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-switch-checked-bg-image); background-image: escape-svg($form-switch-checked-bg-image);
} }

18
src/assets/styles/bootstrap/forms/_form-control.scss
View File

@ -49,7 +49,11 @@
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
&::-webkit-date-and-time-value { &::-webkit-date-and-time-value {
// Multiply line-height by 1em if it has no unit // Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); height: if(
unit($input-line-height) == "",
$input-line-height * 1em,
$input-line-height
);
} }
// Placeholder // Placeholder
@ -208,12 +212,20 @@ textarea {
} }
&::-moz-color-swatch { &::-moz-color-swatch {
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); height: if(
unit($input-line-height) == "",
$input-line-height * 1em,
$input-line-height
);
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
} }
&::-webkit-color-swatch { &::-webkit-color-swatch {
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); height: if(
unit($input-line-height) == "",
$input-line-height * 1em,
$input-line-height
);
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
} }
} }

15
src/assets/styles/bootstrap/forms/_form-range.scss
View File

@ -6,7 +6,10 @@
.form-range { .form-range {
width: 100%; width: 100%;
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); height: add(
$form-range-thumb-height,
$form-range-thumb-focus-box-shadow-width * 2
);
padding: 0; // Need to reset padding padding: 0; // Need to reset padding
background-color: transparent; background-color: transparent;
appearance: none; appearance: none;
@ -16,8 +19,12 @@
// Pseudo-elements must be split across multiple rulesets to have an effect. // Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility. // No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } &::-webkit-slider-thumb {
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } box-shadow: $form-range-thumb-focus-box-shadow;
}
&::-moz-range-thumb {
box-shadow: $form-range-thumb-focus-box-shadow;
}
} }
&::-moz-focus-outer { &::-moz-focus-outer {
@ -27,7 +34,7 @@
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
width: $form-range-thumb-width; width: $form-range-thumb-width;
height: $form-range-thumb-height; height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
@include gradient-bg($form-range-thumb-bg); @include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border; border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius); @include border-radius($form-range-thumb-border-radius);

13
src/assets/styles/bootstrap/forms/_form-select.scss
View File

@ -6,9 +6,13 @@
.form-select { .form-select {
display: block; display: block;
width: 100%; width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; 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 // 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 -moz-padding-start: subtract(
$form-select-padding-x,
3px
); // See https://github.com/twbs/bootstrap/issues/32636
font-family: $form-select-font-family; font-family: $form-select-font-family;
@include font-size($form-select-font-size); @include font-size($form-select-font-size);
font-weight: $form-select-font-weight; font-weight: $form-select-font-weight;
@ -29,7 +33,10 @@
border-color: $form-select-focus-border-color; border-color: $form-select-focus-border-color;
outline: 0; outline: 0;
@if $enable-shadows { @if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); @include box-shadow(
$form-select-box-shadow,
$form-select-focus-box-shadow
);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow; box-shadow: $form-select-focus-box-shadow;

11
src/assets/styles/bootstrap/forms/_input-group.scss
View File

@ -36,7 +36,6 @@
} }
} }
// Textual addons // Textual addons
// //
// Serves as a catch-all element for any text or radio/checkbox input you wish // Serves as a catch-all element for any text or radio/checkbox input you wish
@ -57,7 +56,6 @@
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
} }
// Sizing // Sizing
// //
// Remix the default form control sizing classes into new ones for easier // Remix the default form control sizing classes into new ones for easier
@ -86,7 +84,6 @@
padding-right: $form-select-padding-x + $form-select-indicator-padding; padding-right: $form-select-padding-x + $form-select-indicator-padding;
} }
// Rounded corners // Rounded corners
// //
// These rulesets must come after the sizing ones to properly override sm and lg // These rulesets must come after the sizing ones to properly override sm and lg
@ -111,7 +108,13 @@
$validation-messages: ""; $validation-messages: "";
@each $state in map-keys($form-validation-states) { @each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)"; $validation-messages: $validation-messages +
":not(." +
unquote($state) +
"-tooltip)" +
":not(." +
unquote($state) +
"-feedback)";
} }
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {

6
src/assets/styles/bootstrap/helpers/_colored-links.scss
View File

@ -5,7 +5,11 @@
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); color: if(
color-contrast($value) == $color-contrast-light,
shade-color($value, $link-shade-percentage),
tint-color($value, $link-shade-percentage)
);
} }
} }
} }

8
src/assets/styles/bootstrap/mixins/_backdrop.scss
View File

@ -9,6 +9,10 @@
background-color: $backdrop-bg; background-color: $backdrop-bg;
// Fade for backdrop // Fade for backdrop
&.fade { opacity: 0; } &.fade {
&.show { opacity: $backdrop-opacity; } opacity: 0;
}
&.show {
opacity: $backdrop-opacity;
}
} }

3
src/assets/styles/bootstrap/mixins/_border-radius.scss
View File

@ -18,8 +18,7 @@
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded { @if $enable-rounded {
border-radius: valid-radius($radius); border-radius: valid-radius($radius);
} } @else if $fallback-border-radius != false {
@else if $fallback-border-radius != false {
border-radius: $fallback-border-radius; border-radius: $fallback-border-radius;
} }
} }

24
src/assets/styles/bootstrap/mixins/_breakpoints.scss
View File

@ -14,12 +14,20 @@
// md // md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// md // md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { @function breakpoint-next(
$name,
$breakpoints: $grid-breakpoints,
$breakpoint-names: map-keys($breakpoints)
) {
$n: index($breakpoint-names, $name); $n: index($breakpoint-names, $name);
@if not $n { @if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
} }
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); @return if(
$n < length($breakpoint-names),
nth($breakpoint-names, $n + 1),
null
);
} }
// Minimum breakpoint width. Null for the smallest (first) breakpoint. // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@ -42,7 +50,7 @@
// 767.98px // 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name); $max: map-get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null); @return if($max and $max > 0, $max - 0.02, null);
} }
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@ -84,7 +92,11 @@
// Media that spans multiple breakpoint widths. // Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints // Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { @mixin media-breakpoint-between(
$lower,
$upper,
$breakpoints: $grid-breakpoints
) {
$min: breakpoint-min($lower, $breakpoints); $min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints); $max: breakpoint-max($upper, $breakpoints);
@ -107,9 +119,9 @@
// No minimum for the smallest breakpoint, and no maximum for the largest one. // No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints); $min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints); $next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next); $max: breakpoint-max($next);
@if $min != null and $max != null { @if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) { @media (min-width: $min) and (max-width: $max) {

51
src/assets/styles/bootstrap/mixins/_buttons.scss
View File

@ -8,11 +8,31 @@
$background, $background,
$border, $border,
$color: color-contrast($background), $color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-background:
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), 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), $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:
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), 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), $active-color: color-contrast($active-background),
$disabled-background: $background, $disabled-background: $background,
$disabled-border: $border, $disabled-border: $border,
@ -35,10 +55,13 @@
@include gradient-bg($hover-background); @include gradient-bg($hover-background);
border-color: $hover-border; border-color: $hover-border;
@if $enable-shadows { @if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); @include box-shadow(
$btn-box-shadow,
0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
} }
} }
@ -55,10 +78,13 @@
&:focus { &:focus {
@if $enable-shadows { @if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); @include box-shadow(
$btn-active-box-shadow,
0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
} }
} }
} }
@ -93,7 +119,7 @@
.btn-check:focus + &, .btn-check:focus + &,
&:focus { &:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
} }
.btn-check:checked + &, .btn-check:checked + &,
@ -107,10 +133,13 @@
&:focus { &:focus {
@if $enable-shadows { @if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); @include box-shadow(
$btn-active-box-shadow,
0 0 0 $btn-focus-width rgba($color, 0.5)
);
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
} }
} }
} }

7
src/assets/styles/bootstrap/mixins/_deprecate.scss
View File

@ -3,7 +3,12 @@
// This mixin can be used to deprecate mixins or functions. // This mixin can be used to deprecate mixins or functions.
// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { @mixin deprecate(
$name,
$deprecate-version,
$remove-version,
$ignore-warning: false
) {
@if ($enable-deprecation-messages != false and $ignore-warning != true) { @if ($enable-deprecation-messages != false and $ignore-warning != true) {
@warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
} }

18
src/assets/styles/bootstrap/mixins/_forms.scss
View File

@ -21,7 +21,8 @@
$icon, $icon,
$tooltip-color: color-contrast($color), $tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width
rgba($color, $input-btn-focus-color-opacity)
) { ) {
.#{$state}-feedback { .#{$state}-feedback {
display: none; display: none;
@ -39,7 +40,7 @@
display: none; display: none;
max-width: 100%; // Contain to parent when possible max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem; margin-top: 0.1rem;
@include font-size($form-feedback-tooltip-font-size); @include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height; line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color; color: $tooltip-color;
@ -78,7 +79,10 @@
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $input-height-inner; padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter; background-position: top
$input-height-inner-quarter
right
$input-height-inner-quarter;
} }
} }
} }
@ -91,8 +95,10 @@
&:not([multiple]):not([size]), &:not([multiple]):not([size]),
&:not([multiple])[size="1"] { &:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end; padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon); background-image: escape-svg($form-select-indicator),
background-position: $form-select-bg-position, $form-select-feedback-icon-position; 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; background-size: $form-select-bg-size, $form-select-feedback-icon-size;
} }
} }
@ -123,7 +129,7 @@
} }
.form-check-inline .form-check-input { .form-check-inline .form-check-input {
~ .#{$state}-feedback { ~ .#{$state}-feedback {
margin-left: .5em; margin-left: 0.5em;
} }
} }

72
src/assets/styles/bootstrap/mixins/_gradients.scss
View File

@ -14,34 +14,84 @@
// Horizontal gradient, from left to right // Horizontal gradient, from left to right
// //
// Creates two color stops, start and end, by specifying a color and position for each color stop. // Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { @mixin gradient-x(
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); $start-color: $gray-700,
$end-color: $gray-800,
$start-percent: 0%,
$end-percent: 100%
) {
background-image: linear-gradient(
to right,
$start-color $start-percent,
$end-color $end-percent
);
} }
// Vertical gradient, from top to bottom // Vertical gradient, from top to bottom
// //
// Creates two color stops, start and end, by specifying a color and position for each color stop. // Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { @mixin gradient-y(
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); $start-color: $gray-700,
$end-color: $gray-800,
$start-percent: null,
$end-percent: null
) {
background-image: linear-gradient(
to bottom,
$start-color $start-percent,
$end-color $end-percent
);
} }
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { @mixin gradient-directional(
$start-color: $gray-700,
$end-color: $gray-800,
$deg: 45deg
) {
background-image: linear-gradient($deg, $start-color, $end-color); background-image: linear-gradient($deg, $start-color, $end-color);
} }
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { @mixin gradient-x-three-colors(
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); $start-color: $blue,
$mid-color: $purple,
$color-stop: 50%,
$end-color: $red
) {
background-image: linear-gradient(
to right,
$start-color,
$mid-color $color-stop,
$end-color
);
} }
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { @mixin gradient-y-three-colors(
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); $start-color: $blue,
$mid-color: $purple,
$color-stop: 50%,
$end-color: $red
) {
background-image: linear-gradient(
$start-color,
$mid-color $color-stop,
$end-color
);
} }
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color); background-image: radial-gradient(circle, $inner-color, $outer-color);
} }
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { @mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: linear-gradient(
$angle,
$color 25%,
transparent 25%,
transparent 50%,
$color 50%,
$color 75%,
transparent 75%,
transparent
);
} }
// scss-docs-end gradient-mixins // scss-docs-end gradient-mixins

36
src/assets/styles/bootstrap/mixins/_grid.scss
View File

@ -7,22 +7,36 @@
--#{$variable-prefix}gutter-y: 0; --#{$variable-prefix}gutter-y: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list margin-top: calc(
margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list var(--#{$variable-prefix}gutter-y) * -1
margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list ); // stylelint-disable-line function-disallowed-list
margin-right: calc(
var(--#{$variable-prefix}gutter-x) * -0.5
); // stylelint-disable-line function-disallowed-list
margin-left: calc(
var(--#{$variable-prefix}gutter-x) * -0.5
); // stylelint-disable-line function-disallowed-list
} }
@mixin make-col-ready($gutter: $grid-gutter-width) { @mixin make-col-ready($gutter: $grid-gutter-width) {
// Add box sizing if only the grid is loaded // Add box sizing if only the grid is loaded
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); box-sizing: if(
variable-exists(include-column-box-sizing) and $include-column-box-sizing,
border-box,
null
);
// Prevent columns from becoming too narrow when at smaller grid tiers by // Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we set the width // always setting `width: 100%;`. This works because we set the width
// later on to override this initial width. // later on to override this initial width.
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-right: calc(
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list var(--#{$variable-prefix}gutter-x) * 0.5
); // stylelint-disable-line function-disallowed-list
padding-left: calc(
var(--#{$variable-prefix}gutter-x) * 0.5
); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y); margin-top: var(--#{$variable-prefix}gutter-y);
} }
@ -30,7 +44,6 @@
@if $size { @if $size {
flex: 0 0 auto; flex: 0 0 auto;
width: percentage(divide($size, $columns)); width: percentage(divide($size, $columns));
} @else { } @else {
flex: 1 1 0; flex: 1 1 0;
max-width: 100%; max-width: 100%;
@ -64,7 +77,11 @@
// Used only by Bootstrap to generate the correct number of grid classes given // Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`. // any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @mixin make-grid-columns(
$columns: $grid-columns,
$gutter: $grid-gutter-width,
$breakpoints: $grid-breakpoints
) {
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints); $infix: breakpoint-infix($breakpoint, $breakpoints);
@ -99,7 +116,8 @@
// `$columns - 1` because offsetting by the width of an entire row isn't possible // `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) { @for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 @if not($infix == "" and $i == 0) {
// Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} { .offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns); @include make-col-offset($i, $columns);
} }

1
src/assets/styles/bootstrap/mixins/_image.scss
View File

@ -2,7 +2,6 @@
// - Responsive image // - Responsive image
// - Retina image // - Retina image
// Responsive image // Responsive image
// //
// Keep images from scaling beyond the width of their parents. // Keep images from scaling beyond the width of their parents.

7
src/assets/styles/bootstrap/mixins/_transition.scss
View File

@ -17,7 +17,12 @@
transition: $transition; transition: $transition;
} }
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { @if $enable-reduced-motion and
nth($transition, 1) !=
null and
nth($transition, 1) !=
none
{
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
transition: none; transition: none;
} }

35
src/assets/styles/bootstrap/mixins/_utilities.scss
View File

@ -17,16 +17,28 @@
} }
// Use custom class if present // Use custom class if present
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if(
map-has-key($utility, class),
map-get($utility, class),
nth($properties, 1)
);
$property-class: if($property-class == null, "", $property-class); $property-class: if($property-class == null, "", $property-class);
// State params to generate pseudo-classes // State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ()); $state: if(map-has-key($utility, state), map-get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); $infix: if(
$property-class == "" and str-slice($infix, 1, 1) == "-",
str-slice($infix, 2),
$infix
);
// Don't prefix if value key is null (eg. with shadow class) // Don't prefix if value key is null (eg. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); $property-class-modifier: if(
$key,
if($property-class == "" and $infix == "", "", "-") + $key,
""
);
@if map-get($utility, rfs) { @if map-get($utility, rfs) {
// Inside the media query // Inside the media query
@ -35,8 +47,7 @@
// Do not render anything if fluid and non fluid values are the same // Do not render anything if fluid and non fluid values are the same
$value: if($val == rfs-fluid-value($value), null, $val); $value: if($val == rfs-fluid-value($value), null, $val);
} } @else {
@else {
$value: rfs-fluid-value($value); $value: rfs-fluid-value($value);
} }
} }
@ -56,7 +67,9 @@
} }
@each $pseudo in $state { @each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { .#{$property-class
+ $infix
+ $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$variable-prefix}#{$property-class}: #{$value}; --#{$variable-prefix}#{$property-class}: #{$value};
} }
} }
@ -68,14 +81,18 @@
--#{$variable-prefix}#{$local-var}: #{$value}; --#{$variable-prefix}#{$local-var}: #{$value};
} }
} }
#{$property}: $value if($enable-important-utilities, !important, null); #{$property}: $value
if($enable-important-utilities, !important, null);
} }
} }
@each $pseudo in $state { @each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { .#{$property-class
+ $infix
+ $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@each $property in $properties { @each $property in $properties {
#{$property}: $value if($enable-important-utilities, !important, null); #{$property}: $value
if($enable-important-utilities, !important, null);
} }
} }
} }

13
src/assets/styles/bootstrap/utilities/_api.scss
View File

@ -1,6 +1,5 @@
// Loop over each breakpoint // Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
// Generate media query if needed // Generate media query if needed
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@ -9,7 +8,10 @@
@each $key, $utility in $utilities { @each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first // The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query // Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { @if type-of($utility) ==
"map" and
(map-get($utility, responsive) or $infix == "")
{
@include generate-utility($utility, $infix); @include generate-utility($utility, $infix);
} }
} }
@ -26,7 +28,11 @@
@each $key, $utility in $utilities { @each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first // The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query // Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { @if type-of($utility) ==
"map" and
map-get($utility, rfs) and
(map-get($utility, responsive) or $infix == "")
{
@include generate-utility($utility, $infix, true); @include generate-utility($utility, $infix, true);
} }
} }
@ -34,7 +40,6 @@
} }
} }
// Print utilities // Print utilities
@media print { @media print {
@each $key, $utility in $utilities { @each $key, $utility in $utilities {

11
src/assets/styles/bootstrap/vendor/_rfs.scss vendored
View File

@ -1,3 +1,4 @@
@use 'sass:math';
// stylelint-disable property-blacklist, scss/dollar-variable-default // stylelint-disable property-blacklist, scss/dollar-variable-default
// SCSS RFS mixin // SCSS RFS mixin
@ -54,8 +55,8 @@ $rfs-base-value-unit: unit($rfs-base-value);
@function divide($dividend, $divisor, $precision: 10) { @function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend); $dividend: math.abs($dividend);
$divisor: abs($divisor); $divisor: math.abs($divisor);
@if $dividend == 0 { @if $dividend == 0 {
@return 0; @return 0;
} }
@ -250,15 +251,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$value: divide($value, $value * 0 + if($unit == px, 1, divide(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 // Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs { @if math.abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px); $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
} }
@else { @else {
// Calculate the minimum value // Calculate the minimum value
$value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor); $value-min: $rfs-base-value + divide(math.abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value // Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min; $value-diff: math.abs($value) - $value-min;
// Base value formatting // Base value formatting
$min-width: if($rfs-unit == rem, #{divide($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);

48
src/common/InfiniteScroll.tsx
View File

@ -1,6 +1,7 @@
import { useVirtual } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import { FC, Fragment, ReactElement, useEffect, useRef, useState } from 'react'; import { FC, Fragment, ReactElement, useEffect, useRef, useState } from 'react';
import { Base } from './Base'; import { Base } from './Base';
import { UseMountEffect } from '../hooks';
interface InfiniteScrollProps<T = any> interface InfiniteScrollProps<T = any>
{ {
@ -13,27 +14,56 @@ interface InfiniteScrollProps<T = any>
export const InfiniteScroll: FC<InfiniteScrollProps> = props => export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
{ {
const { rows = [], overscan = 5, scrollToBottom = false, rowRender = null } = props; const { rows = [], overscan = 5, scrollToBottom = false, rowRender = null } = props;
const [ scrollIndex, setScrollIndex ] = useState<number>(rows.length - 1); const scrollIndex = rows.length - 1;
const elementRef = useRef<HTMLDivElement>(null); const parentRef = useRef<HTMLDivElement>(null);
const { virtualItems = [], totalSize = 0, scrollToIndex = null } = useVirtual({ const { getVirtualItems, getTotalSize, scrollToIndex = null, measureElement } = useVirtualizer({
parentRef: elementRef, count: rows.length,
size: rows.length, getScrollElement: () => parentRef.current,
estimateSize: () => 8,
overscan overscan
}); });
const virtualItems = getVirtualItems();
const totalSize = getTotalSize();
const paddingTop = (virtualItems.length > 0) ? (virtualItems?.[0]?.start || 0) : 0 const paddingTop = (virtualItems.length > 0) ? (virtualItems?.[0]?.start || 0) : 0
const paddingBottom = (virtualItems.length > 0) ? (totalSize - (virtualItems?.[virtualItems.length - 1]?.end || 0)) : 0; const paddingBottom = (virtualItems.length > 0) ? (totalSize - (virtualItems?.[virtualItems.length - 1]?.end || 0)) : 0;
const lastElementVisible = (dataIndexValue: number) =>
{
if (!parentRef.current) return false;
const parentElement = parentRef.current;
const lastElement = parentElement.querySelector(`[data-index="${ dataIndexValue - 1 }"]`);
if (!lastElement) return false;
const lastElementRect = lastElement.getBoundingClientRect();
const { scrollTop, scrollHeight, clientHeight } = parentElement;
const lastElementVisible = scrollTop + clientHeight + lastElementRect.height >= scrollHeight - lastElementRect.height;
return lastElementVisible;
};
UseMountEffect(() =>
{
setTimeout(() => scrollToIndex(scrollIndex), 0)
});
useEffect(() => useEffect(() =>
{ {
if(!scrollToBottom) return; if (!scrollToBottom) return;
if (!lastElementVisible(scrollIndex)) return;
scrollToIndex(scrollIndex); scrollToIndex(scrollIndex);
}, [ scrollToBottom, scrollIndex, scrollToIndex ]); }, [ scrollToBottom, scrollIndex, scrollToIndex ]);
return ( return (
<Base fit innerRef={ elementRef } position="relative" overflow="auto"> <Base fit innerRef={ parentRef } position="relative" overflow="auto">
{ (paddingTop > 0) && { (paddingTop > 0) &&
<div <div
style={ { minHeight: `${ paddingTop }px` } } /> } style={ { minHeight: `${ paddingTop }px` } } /> }
@ -50,7 +80,7 @@ export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
<div <div
key={ item.key } key={ item.key }
data-index={ item.index } data-index={ item.index }
ref={ item.measureRef }> ref={ measureElement }>
{ rowRender(row) } { rowRender(row) }
</div> </div>
) )

2
src/components/loading/LoadingView.tsx
View File

@ -22,7 +22,7 @@ export const LoadingView: FC<LoadingViewProps> = props =>
<Base className="fs-4 text-shadow">{ message }</Base> <Base className="fs-4 text-shadow">{ message }</Base>
: :
<> <>
<Text fontSize={ 4 } variant="white" className="text-shadow">El hotel esta cargando { percent.toFixed() }%...</Text> <Text fontSize={ 4 } variant="white" className="text-shadow">The hotel is loading { percent.toFixed() }%...</Text>
<LayoutProgressBar progress={ percent } className="mt-2 large" /> <LayoutProgressBar progress={ percent } className="mt-2 large" />
</> </>
} }

10
src/components/room/widgets/RoomWidgets.scss
View File

@ -103,11 +103,11 @@
.leftroomhideshow { .leftroomhideshow {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
left: 12px; left: 1px;
padding-top: 37px; padding-top: 43px;
padding-left: 2px; padding-left: 2px;
height: 100px; height: 100px;
top: 39px; top: 49px;
margin-left: 1px; margin-left: 1px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #222222; border: 1px solid #222222;
@ -118,7 +118,7 @@
.leftroomhide { .leftroomhide {
margin-left: 2px; margin-left: 2px;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
border: 1px solid #222222; border: 1px solid #212131;
background: #212131; background: #212131;
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6); box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
cursor: pointer; cursor: pointer;
@ -127,7 +127,7 @@
height: 55%; height: 55%;
margin-top: 27px; margin-top: 27px;
position: absolute; position: absolute;
left: 159px; left: 143px;
top: 39%; top: 39%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

296
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -7,199 +7,221 @@ import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
export const RoomToolsWidgetView: FC<{}> = props => export const RoomToolsWidgetView: FC<{}> = props =>
{ {
const [ isZoomedIn, setIsZoomedIn ] = useState<boolean>(false); const [isZoomedIn, setIsZoomedIn] = useState<boolean>(false);
const [ isBubblenew, setIsBubble ] = useState<boolean>(false); const [roomName, setRoomName] = useState<string>(null);
const [ roomName, setRoomName ] = useState<string>(null); const [roomOwner, setRoomOwner] = useState<string>(null);
const [ roomOwner, setRoomOwner ] = useState<string>(null); const [roomTags, setRoomTags] = useState<string[]>(null);
const [ roomTags, setRoomTags ] = useState<string[]>(null); const [isOpen, setIsOpen] = useState<boolean>(false);
const [ isOpen, setIsOpen ] = useState<boolean>(false); const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
const [isOpenHistory, setIsOpenHistory] = useState<boolean>(false);
const { navigatorData = null } = useNavigator(); const { navigatorData = null } = useNavigator();
const { roomSession = null } = useRoom(); const { roomSession = null } = useRoom();
const [ roomHistory, setRoomHistory ] = useState<{ roomId: number, roomName: string }[]>([]);
const [ isOpenHistory, setIsOpenHistory ] = useState<boolean>(false);
const roomHistoryRef = useRef(null); const roomHistoryRef = useRef(null);
const handleToolClick = (action: string, value?: string) => const roomsetthidebot = () => {
{ setIsOpenHistory(false);
switch(action) const roomHistoryTool = document.getElementById("roomhistorytool");
{ const roomsettnew = document.getElementById("roomsettnew");
case 'bawtool':
roomSession.sendChatMessage(":bc", 0); if (roomHistoryTool && roomsettnew) {
break; roomHistoryTool.style.display = "none";
case 'settings': roomsettnew.style.marginLeft = "19px";
CreateLinkEvent('navigator/toggle-room-info'); }
return;
case 'zoom': const roomsettshow = document.getElementById("roomsettshow");
setIsZoomedIn(prevValue => const roomsetthide = document.getElementById("roomsetthide");
{
if (roomsettshow && roomsetthide) {
roomsettshow.style.display = "none";
roomsetthide.style.display = "block";
}
};
const toolroomhidebot = () => {
setIsOpenHistory(false);
const roomHistoryTool = document.getElementById("roomhistorytool");
const roomsettnew = document.getElementById("roomsettnew");
if (roomHistoryTool && roomsettnew) {
roomHistoryTool.style.display = "none";
roomsettnew.style.marginLeft = "-152px";
}
const roomsettshow = document.getElementById("roomsettshow");
const roomsetthide = document.getElementById("roomsetthide");
if (roomsettshow && roomsetthide) {
roomsettshow.style.display = "block";
roomsetthide.style.display = "none";
}
};
const handleToolClick = (action: string, value?: string) => {
const actions = {
'settings': () => CreateLinkEvent('navigator/toggle-room-info'),
'zoom': () => {
setIsZoomedIn(prevValue => {
let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1); let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
if(!prevValue) scale /= 2; if (!prevValue) scale /= 2;
else scale *= 2; else scale *= 2;
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale); GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
return !prevValue; return !prevValue;
}); });
return; },
case 'chat_history': 'chat_history': () => CreateLinkEvent('chat-history/toggle'),
CreateLinkEvent('chat-history/toggle'); 'hiddenbubbles': () => {
return;
case 'hiddenbubbles':
CreateLinkEvent('nitrobubblehidden/toggle'); CreateLinkEvent('nitrobubblehidden/toggle');
const bubbleElement = document.getElementById('bubble');
document.getElementById('bubble').classList.toggle('icon-chat-disablebubble'); if (bubbleElement) {
bubbleElement.classList.toggle('icon-chat-disablebubble');
return; }
case 'like_room': },
SendMessageComposer(new RateFlatMessageComposer(1)); 'like_room': () => SendMessageComposer(new RateFlatMessageComposer(1)),
return; 'toggle_room_link': () => CreateLinkEvent('navigator/toggle-room-link'),
case 'toggle_room_link': 'navigator_search_tag': (tag: string) => {
CreateLinkEvent('navigator/toggle-room-link'); CreateLinkEvent(`navigator/search/${value}`);
return; SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${value}`));
case 'navigator_search_tag': },
CreateLinkEvent(`navigator/search/${ value }`); 'room_history': () => {
SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ value }`)); if (roomHistory.length > 0) {
return; const roomHistoryTool = document.getElementById("roomhistorytool");
case 'room_history': if (!isOpenHistory) {
if (roomHistory.length > 0) {
const roomHistoryTool = document.getElementById("roomhistorytool");
if (!isOpenHistory) {
roomHistoryTool.style.display = "block"; roomHistoryTool.style.display = "block";
setIsOpenHistory(true); setIsOpenHistory(true);
} else { } else {
setIsOpenHistory(false); setIsOpenHistory(false);
roomHistoryTool.style.display = "none"; roomHistoryTool.style.display = "none";
}
} }
return; }
case 'room_history_back': },
TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1].roomId); 'room_history_back': () => TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1].roomId),
return; 'room_history_next': () => TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1].roomId)
case 'room_history_next': };
TryVisitRoom(roomHistory[roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1].roomId); if (actions[action]) {
return; actions[action](value);
} }
} };
const onChangeRoomHistory = (roomId: number, roomName: string) => const onChangeRoomHistory = (roomId: number, roomName: string) => {
{ const newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history')) || [];
let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history'));
if (newStorage && newStorage.filter( (room: RoomDataParser) => room.roomId === roomId ).length > 0) return; if (newStorage.some(room => room.roomId === roomId)) return;
if (newStorage && newStorage.length >= 10) newStorage.shift(); if (newStorage.length >= 10) newStorage.shift();
const newData = !newStorage ? [ { roomId: roomId, roomName: roomName } ] : [ ...newStorage, { roomId: roomId, roomName: roomName } ]; const newData = [...newStorage, { roomId, roomName }];
setRoomHistory(newData); setRoomHistory(newData);
return SetLocalStorage('nitro.room.history', newData ); SetLocalStorage('nitro.room.history', newData);
} };
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event => useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event => {
{
CreateLinkEvent('nitrobubblehidden/hide'); CreateLinkEvent('nitrobubblehidden/hide');
const parser = event.getParser(); const parser = event.getParser();
if(!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return; if (!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName); const { roomName, ownerName, tags } = parser.data;
if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags); if (roomName !== roomSession.roomName) {
setRoomName(roomName);
}
if (ownerName !== roomSession.ownerName) {
setRoomOwner(ownerName);
}
if (JSON.stringify(tags) !== JSON.stringify(roomSession.tags)) {
setRoomTags(tags);
}
onChangeRoomHistory(parser.data.roomId, parser.data.roomName); onChangeRoomHistory(parser.data.roomId, parser.data.roomName);
}); });
useEffect(() => useEffect(() => {
{
setIsOpen(true); setIsOpen(true);
const timeout = setTimeout(() => setIsOpen(false), 5000); const timeout = setTimeout(() => setIsOpen(false), 5000);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}, [ roomName, roomOwner, roomTags ]); }, [roomName, roomOwner, roomTags]);
useEffect(() => useEffect(() => {
{ setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) || []);
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) ?? []); }, []);
}, [ ]);
function toolroomhidebot(){
setIsOpenHistory(false);
document.getElementById("roomhistorytool").style.display = "none";
document.getElementById("roomsettnew").style.marginLeft = "-152px";
document.getElementById("roomsetthide").style.display = "none";
document.getElementById("roomsettshow").style.display = "block";
}
function roomsetthidebot(){
setIsOpenHistory(false);
document.getElementById("roomhistorytool").style.display = "none";
document.getElementById("roomsettnew").style.marginLeft = "19px";
document.getElementById("roomsettshow").style.display = "none";
document.getElementById("roomsetthide").style.display = "block";
}
return ( return (
<Flex className="nitro-room-tools-container" > <Flex className="nitro-room-tools-container" >
<div className="leftroomhide" id="roomsetthide" onClick={() => toolroomhidebot()} style={{display: "none"}}> <div className="leftroomhide" id="roomsetthide" onClick={() => toolroomhidebot()} style={{display: "none"}}>
<FaChevronLeft className="fa-icon iconcenterleftiright" /></div> <FaChevronLeft className="fa-icon iconcenterleftiright" />
</div>
<Column center className="nitro-room-tools p-2 d-block" id="roomsettnew" style={{ marginLeft: -152 }}> <Column center className="nitro-room-tools p-2 d-block" id="roomsettnew" style={{ marginLeft: -152 }}>
<div className="gridinforooms">
<Base pointer title={LocalizeText('room.settings.button.text')} className="iconleftgen icon icon-cog" onClick={() => handleToolClick('settings')} />
<div className="texticonright" onClick={() => handleToolClick('settings')} title={LocalizeText('room.settings.button.text')}>{LocalizeText('room.settings.button.text')}</div>
</div>
{ roomSession.controllerLevel >= RoomControllerLevel.ROOM_OWNER && <div className="gridinforooms">
<div className="gridinforooms"><><Base pointer title="Herramienta Baw" className="iconleftgen icon icon-bawtool" onClick={() => handleToolClick('bawtool')} style={{ marginTop: -4 }}/></><div className="texticonright" onClick={() => handleToolClick('bawtool')} title="Herramienta Baw">Baw Tool</div></div> <Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('iconleftgen icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
} <div className="texticonright" style={{marginLeft: 22}} onClick={ () => handleToolClick('zoom') } title={ LocalizeText('room.zoom.button.text') }>{LocalizeText('room.zoom.button.text')}</div>
</div>
<div className="gridinforooms"><Base pointer title={ LocalizeText('room.settings.button.text') } className="iconleftgen icon icon-cog" onClick={ () => handleToolClick('settings') } /><div className="texticonright" onClick={ () => handleToolClick('settings') } title={ LocalizeText('room.settings.button.text') }>Ajustes</div></div> <div className="gridinforooms">
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="iconleftgen icon icon-chat-history" />
<div className="texticonright" onClick={ () => handleToolClick('chat_history') } title={ LocalizeText('room.chathistory.button.text') }>{LocalizeText('room.chathistory.button.text')}</div>
<div className="gridinforooms"><Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('iconleftgen icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } /> <div className="texticonright" style={{marginLeft: 22}} onClick={ () => handleToolClick('zoom') } title={ LocalizeText('room.zoom.button.text') }>Zoom</div></div> </div>
<div className="gridinforooms"> <Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="iconleftgen icon icon-chat-history" /><div className="texticonright" onClick={ () => handleToolClick('chat_history') } title={ LocalizeText('room.chathistory.button.text') }>Historial de chat</div></div>
<div className="gridinforooms"><Base id="bubble" pointer title="Burbujas de chat" onClick={ () => handleToolClick('hiddenbubbles') } className="iconleftgen icon icon-chat-enablebubble"/><div className="texticonright" onClick={ () => handleToolClick('hiddenbubbles') } title="Burbujas de chat">Burbujas</div></div>
<div className="gridinforooms">
<Base id="bubble" pointer title={ LocalizeText('room.mute.button.texte') } onClick={ () => handleToolClick('hiddenbubbles') } className="iconleftgen icon icon-chat-enablebubble"/>
<div className="texticonright" onClick={ () => handleToolClick('hiddenbubbles') } title={ LocalizeText('room.mute.button.text') }>{LocalizeText('room.mute.button.text')}</div>
</div>
{ navigatorData.canRate && { navigatorData.canRate &&
<div className="gridinforooms"><><Base pointer title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} className="iconleftgen icon icon-like-room" /></><div className="texticonright" onClick={() => handleToolClick('like_room')} title={LocalizeText('room.like.button.text')}>Me gusta</div></div> } <div className="gridinforooms">
<Base pointer title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} className="iconleftgen icon icon-like-room" />
<Flex justifyContent="center"> <div className="texticonright" onClick={() => handleToolClick('like_room')} title={ LocalizeText('room.like.button.text') }>{LocalizeText('room.like.button.text')}</div>
<Base pointer={ roomHistory.length > 1 && roomHistory[0]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.back.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-back-disabled' : 'icon-room-history-back-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_back') } /> </div>
<Base pointer={ roomHistory?.length > 0 } title={ LocalizeText('room.history.button.tooltip') } className={ `icon ${ roomHistory?.length === 0 ? 'icon-room-history-disabled' : 'icon-room-history-enabled' } margin-button-history` } onClick={ () => roomHistory?.length === 0 ? null : handleToolClick('room_history') } /> }
<Base pointer={ roomHistory.length > 1 && roomHistory[roomHistory.length - 1]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.forward.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-next-disabled' : 'icon-room-history-next-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_next') } />
</Flex>
<Flex justifyContent="center">
<Base pointer={ roomHistory.length > 1 && roomHistory[0]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.back.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-back-disabled' : 'icon-room-history-back-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[0]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_back') } />
<Base pointer={ roomHistory?.length > 0 } title={ LocalizeText('room.history.button.tooltip') } className={ `icon ${ roomHistory?.length === 0 ? 'icon-room-history-disabled' : 'icon-room-history-enabled' } margin-button-history` } onClick={ () => roomHistory?.length === 0 ? null : handleToolClick('room_history') } />
<Base pointer={ roomHistory.length > 1 && roomHistory[roomHistory.length - 1]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.forward.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-next-disabled' : 'icon-room-history-next-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_next') } />
</Flex>
</Column> </Column>
<div className="leftroomhideshow" id="roomsettshow" onClick={() => roomsetthidebot()}> <div className="leftroomhideshow" id="roomsettshow" onClick={() => roomsetthidebot()}>
<FaChevronRight className="fa-icon" /></div> <FaChevronRight className="fa-icon" />
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 200 }> </div>
<Column className="nitro-room-tools-info rounded py-2 px-3"> <TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 200 }>
<Column gap={ 1 }> <Column className="nitro-room-tools-info rounded py-2 px-3">
<Text wrap variant="white" fontSize={ 5 }>{ roomName }</Text> <Column gap={ 1 }>
<Text variant="muted" fontSize={ 6 }>{ roomOwner }</Text> <Text wrap variant="white" fontSize={ 5 }>{ roomName }</Text>
<Text variant="muted" fontSize={ 6 }>{ roomOwner }</Text>
</Column>
{ roomTags && roomTags.length > 0 && <Flex gap={ 2 }>
{ roomTags.map((tag, index) => <Text key={ index } small pointer variant="white" className="rounded bg-primary p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
</Flex>
}
</Column>
</TransitionAnimation>
<div className="nitro-room-tools-history" id="roomhistorytool" style={ { display: "none",bottom: !navigatorData.canRate ? '180px' : '210px' } }>
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpenHistory }>
<Column center>
<Column className="nitro-room-history rounded py-2 px-3">
<Column gap={ 1 }> {
(roomHistory.length > 0) && roomHistory.map(history =>
{
return <Text key={ history.roomId } bold={ history.roomId === navigatorData.currentRoomId } variant={ history.roomId === navigatorData.currentRoomId ? 'white' : 'muted' } pointer onClick={ () => TryVisitRoom(history.roomId) }>{ history.roomName }</Text>;
})
}
</Column> </Column>
{ roomTags && roomTags.length > 0 &&
<Flex gap={ 2 }>
{ roomTags.map((tag, index) => <Text key={ index } small pointer variant="white" className="rounded bg-primary p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
</Flex> }
</Column> </Column>
</TransitionAnimation> </Column>
<div className="nitro-room-tools-history" id="roomhistorytool" style={ { display: "none",bottom: !navigatorData.canRate ? '180px' : '210px' } }> </TransitionAnimation>
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpenHistory }> </div>
<Column center>
<Column className="nitro-room-history rounded py-2 px-3">
<Column gap={ 1 }>
{ (roomHistory.length > 0) && roomHistory.map(history =>
{
return <Text key={ history.roomId } bold={ history.roomId === navigatorData.currentRoomId } variant={ history.roomId === navigatorData.currentRoomId ? 'white' : 'muted' } pointer onClick={ () => TryVisitRoom(history.roomId) }>{ history.roomName }</Text>;
}) }
</Column>
</Column>
</Column>
</TransitionAnimation>
</div>
</Flex> </Flex>
); );
} }