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

Migrate Look&Feel of CoolUI

Browse Source
This commit is contained in:
duckietm 2024-04-02 16:56:24 +02:00
parent 12f0416d4c
commit 9031a26955
66 changed files with 1811 additions and 861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.scss
View File

@ -21,14 +21,14 @@ $toolbar-height: 55px;
$achievement-width: 375px;
$achievement-height: 405px;
$avatar-editor-width: 620px;
$avatar-editor-height: 374px;
$avatar-editor-width: 520px;
$avatar-editor-height: 553px;
$catalog-width: 630px;
$catalog-height: 400px;
$catalog-width: 650px;
$catalog-height: 480px;
$inventory-width: 528px;
$inventory-height: 320px;
$inventory-height: 370px;
$navigator-width: 420px;
$navigator-height: 440px;
@ -60,8 +60,11 @@ $help-height: 290px;
$nitropedia-width: 400px;
$nitropedia-height: 400px;
$messenger-width: 500px;
$messenger-height: 370px;
$nitrobubblehidden-width: 400px;
$nitrobubblehidden-height: 400px;
$messenger-width: 580px;
$messenger-height: 455px;
$marketplace-post-offer-width: 430px;
$marketplace-post-offer-height: 250px;

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

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

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

@ -1,7 +1,7 @@
@use 'sass:math';
//
// Base styles
//
@use 'sass:math';
.alert {
position: relative;
@ -22,7 +22,6 @@
font-weight: $alert-link-font-weight;
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
@ -40,7 +39,6 @@
}
}
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert.

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

@ -18,7 +18,14 @@
float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding-x;
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.
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
.btn-group-sm > .btn {
@extend .btn-sm;
}
.btn-group-lg > .btn {
@extend .btn-lg;
}
//
// Split button dropdowns
//
.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
padding-right: $btn-padding-x * 0.75;
padding-left: $btn-padding-x * 0.75;
&::after,
.dropup &::after,
@ -85,16 +88,15 @@
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
padding-right: $btn-padding-x-sm * 0.75;
padding-left: $btn-padding-x-sm * 0.75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
padding-right: $btn-padding-x-lg * 0.75;
padding-left: $btn-padding-x-lg * 0.75;
}
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle {
@ -106,7 +108,6 @@
}
}
//
// Vertical button groups
//

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

@ -16,7 +16,12 @@
user-select: none;
background-color: 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);
&:hover {
@ -50,7 +55,6 @@
}
}
//
// Alternate buttons
//
@ -69,7 +73,6 @@
}
// scss-docs-end btn-variant-loops
//
// Link buttons
//
@ -102,15 +105,131 @@
// No need for an active state here
}
//
// 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 {
@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 {
@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);
}
&:last-child {
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius($card-inner-border-radius);
}
@ -56,7 +56,7 @@
}
.card-subtitle {
margin-top: -$card-title-spacer-y * .5;
margin-top: -$card-title-spacer-y * 0.5;
margin-bottom: 0;
}
@ -86,7 +86,9 @@
border-bottom: $card-border-width solid $card-border-color;
&: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;
&: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
//
.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-left: -$card-cap-padding-x * .5;
margin-left: -$card-cap-padding-x * 0.5;
border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg {
@ -121,8 +124,8 @@
}
.card-header-pills {
margin-right: -$card-cap-padding-x * .5;
margin-left: -$card-cap-padding-x * .5;
margin-right: -$card-cap-padding-x * 0.5;
margin-left: -$card-cap-padding-x * 0.5;
}
// Card image
@ -152,7 +155,6 @@
@include border-bottom-radius($card-inner-border-radius);
}
//
// Card groups
//

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

@ -55,7 +55,6 @@
/* rtl:end:ignore */
//
// Alternate transitions
//
@ -82,7 +81,6 @@
}
}
//
// Left/right controls for nav
//
@ -117,11 +115,19 @@
}
.carousel-control-prev {
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 {
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
@ -195,16 +201,15 @@
}
}
// Optional captions
//
//
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) * .5;
right: (100% - $carousel-caption-width) * 0.5;
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5;
left: (100% - $carousel-caption-width) * 0.5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;

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

@ -9,7 +9,8 @@
height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x;
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
@include border-radius();
opacity: $btn-close-opacity;

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

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

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

@ -1,11 +1,10 @@
@use 'sass:math';
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@use 'sass:math';
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@ -40,7 +39,10 @@
}
@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
@ -51,10 +53,18 @@
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
$_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;
@ -86,7 +96,12 @@
$result: ();
@each $key, $value in $map {
@if (index($values, $key) != null) {
$result: map-merge($result, ($key: $value));
$result: map-merge(
$result,
(
$key: $value,
)
);
}
}
@return $result;
@ -114,7 +129,12 @@
$index: str-index($string, $search);
@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;
@ -144,9 +164,37 @@
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
$_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;
$max-ratio: 0;
$max-ratio-color: null;
@ -170,7 +218,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, 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
@ -180,15 +232,25 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$rgb: (
"r": red($color),
"g": green($color),
"b": blue($color)
"b": blue($color),
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
$value: if(
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
@ -210,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
@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
@ -224,11 +290,20 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@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 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) {
@ -244,7 +319,12 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@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;
}
@ -252,11 +332,19 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$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) {
$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: math.abs($dividend);
$divisor: math.abs($divisor);
@if $dividend == 0 {
@ -275,7 +363,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$factor: $factor * 0.1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
@ -289,9 +377,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
"px": 1px,
"rem": 1rem,
"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);
}
@return $result;

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

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

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

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

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

@ -3,7 +3,6 @@
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
// Container that the modal scrolls within
.modal {
position: fixed;
@ -85,7 +84,11 @@
// Modal background
.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
@ -100,8 +103,9 @@
@include border-top-radius($modal-content-inner-border-radius);
.btn-close {
padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
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;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding - $modal-footer-margin-between * .5;
padding: $modal-inner-padding - $modal-footer-margin-between * 0.5;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@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,
// 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);
}
.modal-sm { max-width: $modal-sm; }
.modal-sm {
max-width: $modal-sm;
}
}
@include media-breakpoint-up(lg) {
@ -171,7 +177,9 @@
}
@include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; }
.modal-xl {
max-width: $modal-xl;
}
}
// 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 {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
@include font-size($nav-link-font-size);
font-weight: $nav-link-font-weight;
color: $nav-link-color;
text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition);
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
@include font-size($nav-link-font-size);
font-weight: $nav-link-font-weight;
color: $nav-link-color;
text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition);
display: flex;
align-items: center;
display: flex;
align-items: center;
&:hover,
&:focus {
color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
}
&:hover,
&:focus {
color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
pointer-events: none;
cursor: default;
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
pointer-events: none;
cursor: default;
}
}
//
@ -42,62 +42,62 @@
//
.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 {
position: relative;
margin-bottom: -$nav-tabs-border-width;
background-color: $nav-tabs-link-bg;
border: $nav-tabs-border-width solid $nav-tabs-border-color;
@include border-top-radius($nav-tabs-border-radius);
.nav-link {
position: relative;
margin-bottom: -$nav-tabs-border-width;
background-color: $nav-tabs-link-bg;
border: $nav-tabs-border-width solid $nav-tabs-border-color;
@include border-top-radius($nav-tabs-border-radius);
&.active {
&:before {
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;
}
&.active {
&:before {
background: #ffffff;
}
}
.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;
&: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;
}
.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);
&: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,
.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-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius);
}
.nav-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius);
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
@include gradient-bg($nav-pills-link-active-bg);
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
@include gradient-bg($nav-pills-link-active-bg);
}
}
//
@ -123,27 +123,27 @@
//
.nav-fill {
> .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
}
> .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
}
}
.nav-justified {
> .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
> .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
}
.nav-fill,
.nav-justified {
.nav-item .nav-link {
width: 100%; // Make sure button will grow
}
.nav-item .nav-link {
width: 100%; // Make sure button will grow
}
}
// Tabbable tabs
@ -151,10 +151,10 @@
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}

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

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

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

@ -15,7 +15,11 @@
}
.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 {
@ -25,10 +29,10 @@
padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close {
padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
margin-top: $offcanvas-padding-y * -.5;
margin-right: $offcanvas-padding-x * -.5;
margin-bottom: $offcanvas-padding-y * -.5;
padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
margin-top: $offcanvas-padding-y * -0.5;
margin-right: $offcanvas-padding-x * -0.5;
margin-bottom: $offcanvas-padding-y * -0.5;
}
}

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

@ -49,16 +49,30 @@
}
}
//
// 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 {
@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 {
@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
.placeholder-xs {
min-height: .6em;
min-height: 0.6em;
}
.placeholder-sm {
min-height: .8em;
min-height: 0.8em;
}
.placeholder-lg {
@ -39,7 +39,12 @@
}
.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%;
animation: placeholder-wave 2s linear infinite;
}

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

@ -40,13 +40,13 @@
&::before {
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;
}
&::after {
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;
}
}
@ -60,13 +60,15 @@
&::before {
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;
}
&::after {
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;
}
}
@ -78,13 +80,15 @@
&::before {
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;
}
&::after {
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;
}
}
@ -96,7 +100,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width * .5;
margin-left: -$popover-arrow-width * 0.5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@ -110,13 +114,15 @@
&::before {
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;
}
&::after {
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;
}
}

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

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

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

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

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

@ -12,7 +12,9 @@
word-wrap: break-word;
opacity: 0;
&.show { opacity: $tooltip-opacity; }
&.show {
opacity: $tooltip-opacity;
}
.tooltip-arrow {
position: absolute;
@ -37,7 +39,7 @@
&::before {
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;
}
}
@ -53,7 +55,8 @@
&::before {
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;
}
}
@ -67,7 +70,7 @@
&::before {
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;
}
}
@ -83,7 +86,8 @@
&::before {
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;
}
}

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

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

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

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

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

@ -6,7 +6,10 @@
.form-range {
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
background-color: transparent;
appearance: none;
@ -16,8 +19,12 @@
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-webkit-slider-thumb {
box-shadow: $form-range-thumb-focus-box-shadow;
}
&::-moz-range-thumb {
box-shadow: $form-range-thumb-focus-box-shadow;
}
}
&::-moz-focus-outer {
@ -27,7 +34,7 @@
&::-webkit-slider-thumb {
width: $form-range-thumb-width;
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);
border: $form-range-thumb-border;
@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 {
display: block;
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
-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;
@include font-size($form-select-font-size);
font-weight: $form-select-font-weight;
@ -29,7 +33,10 @@
border-color: $form-select-focus-border-color;
outline: 0;
@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 {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;

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

@ -36,7 +36,6 @@
}
}
// Textual addons
//
// 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);
}
// Sizing
//
// 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;
}
// Rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
@ -111,7 +108,13 @@
$validation-messages: "";
@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} {

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

@ -5,7 +5,11 @@
@if $link-shade-percentage != 0 {
&:hover,
&: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;
// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: $backdrop-opacity; }
&.fade {
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) {
@if $enable-rounded {
border-radius: valid-radius($radius);
}
@else if $fallback-border-radius != false {
} @else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}

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

@ -14,12 +14,20 @@
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// 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);
@if not $n {
@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.
@ -42,7 +50,7 @@
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$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.
@ -84,7 +92,11 @@
// Media that spans multiple breakpoint widths.
// 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);
$max: breakpoint-max($upper, $breakpoints);
@ -107,9 +119,9 @@
// 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.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next);
$max: breakpoint-max($next);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {

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

@ -8,11 +8,31 @@
$background,
$border,
$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-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-hover-bg-shade-amount),
tint-color($background, $btn-hover-bg-tint-amount)
),
$hover-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-hover-border-shade-amount),
tint-color($border, $btn-hover-border-tint-amount)
),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-background:
if(
$color == $color-contrast-light,
shade-color($background, $btn-active-bg-shade-amount),
tint-color($background, $btn-active-bg-tint-amount)
),
$active-border:
if(
$color == $color-contrast-light,
shade-color($border, $btn-active-border-shade-amount),
tint-color($border, $btn-active-border-tint-amount)
),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
@ -35,10 +55,13 @@
@include gradient-bg($hover-background);
border-color: $hover-border;
@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 {
// 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 {
@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 {
// 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 + &,
&: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 + &,
@ -107,10 +133,13 @@
&:focus {
@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 {
// 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.
// `$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)
@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) {
@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,
$tooltip-color: color-contrast($color),
$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 {
display: none;
@ -39,7 +40,7 @@
display: none;
max-width: 100%; // Contain to parent when possible
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);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
@ -78,7 +79,10 @@
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
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])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-image: escape-svg($form-select-indicator),
escape-svg($icon);
background-position: $form-select-bg-position,
$form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
@ -123,7 +129,7 @@
}
.form-check-inline .form-check-input {
~ .#{$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
//
// 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%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
@mixin gradient-x(
$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
//
// 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) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
@mixin gradient-y(
$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);
}
@mixin gradient-x-three-colors($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-x-three-colors(
$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) {
background-image: linear-gradient($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
) {
background-image: linear-gradient(
$start-color,
$mid-color $color-stop,
$end-color
);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
@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
);
}
// scss-docs-end gradient-mixins

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

@ -7,22 +7,36 @@
--#{$variable-prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-top: calc(
var(--#{$variable-prefix}gutter-y) * -1
); // 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) {
// 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
// always setting `width: 100%;`. This works because we set the width
// later on to override this initial width.
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-right: calc(
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);
}
@ -30,7 +44,6 @@
@if $size {
flex: 0 0 auto;
width: percentage(divide($size, $columns));
} @else {
flex: 1 1 0;
max-width: 100%;
@ -64,7 +77,11 @@
// Used only by Bootstrap to generate the correct number of grid classes given
// 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) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@ -99,7 +116,8 @@
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@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} {
@include make-col-offset($i, $columns);
}

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

@ -2,7 +2,6 @@
// - Responsive image
// - Retina image
// Responsive image
//
// 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;
}
@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) {
transition: none;
}

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

@ -17,16 +17,28 @@
}
// 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);
// State params to generate pseudo-classes
$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)
$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) {
// Inside the media query
@ -35,8 +47,7 @@
// Do not render anything if fluid and non fluid values are the same
$value: if($val == rfs-fluid-value($value), null, $val);
}
@else {
} @else {
$value: rfs-fluid-value($value);
}
}
@ -56,7 +67,9 @@
}
@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};
}
}
@ -68,14 +81,18 @@
--#{$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 {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
.#{$property-class
+ $infix
+ $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@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
@each $breakpoint in map-keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@ -9,7 +8,10 @@
@each $key, $utility in $utilities {
// 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
@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);
}
}
@ -26,7 +28,11 @@
@each $key, $utility in $utilities {
// 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
@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);
}
}
@ -34,7 +40,6 @@
}
}
// Print utilities
@media print {
@each $key, $utility in $utilities {

2
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
// SCSS RFS mixin
@ -7,7 +8,6 @@
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
// Configuration
@use 'sass:math';
// Base value
$rfs-base-value: 1.25rem !default;

119
src/assets/styles/icons.scss
View File

@ -192,7 +192,68 @@
width: 17px;
height: 19px;
}
&.chatstickers-icon {
background-image: url('@/assets/images/chat/stickers-icon.png');
width: 22px;
height: 22px;
}
&.sticker-icon {
background-image: url('@/assets/images/chat/sticker.png');
width: 22px;
height: 22px;
margin-left: 5px;
}
&.icon-room-history-back-enabled {
background-image: url('@/assets/images/icons/room-history-back-enabled.png');
width: 34px;
height: 36px;
}
&.icon-room-history-back-disabled {
background-image: url('@/assets/images/icons/room-history-back-disabled.png');
width: 34px;
height: 36px;
}
&.icon-room-history-enabled {
background-image: url('@/assets/images/icons/room-history-enabled.png');
width: 33px;
height: 35px;
}
&.icon-room-history-disabled {
background-image: url('@/assets/images/icons/room-history-disabled.png');
width: 33px;
height: 35px;
}
&.icon-room-history-next-enabled {
background-image: url('@/assets/images/icons/room-history-next-enabled.png');
width: 34px;
height: 38px;
}
&.icon-room-history-next-disabled {
background-image: url('@/assets/images/icons/room-history-next-disabled.png');
width: 34px;
height: 38px;
}
&.icon-bawtool {
background: url('@/assets/images/icons/builderstool.png');
width: 20px;
height: 22px;
}
&.icon-chat-enablebubble {
background: url('@/assets/images/icons/enablebubble.png');
width: 17px;
height: 21px;
}
&.icon-chat-disablebubble {
background: url('@/assets/images/icons/disablebubble.png');
width: 17px;
height: 21px;
}
&.pencil-icon {
background-image: url('@/assets/images/infostand/pencil-icon.png');
width: 17px;
@ -613,6 +674,64 @@
height: 19px;
}
&.chatmicrophone-on-icon {
background-image: url('@/assets/images/chat/microphone-on.png');
width: 22px;
height: 22px;
cursor: pointer;
}
&.chatmicrophone-off-icon {
background-image: url('@/assets/images/chat/microphone-off.png');
width: 22px;
height: 22px;
cursor: pointer;
}
&.chatdeleteaudio-icon {
background-image: url('@/assets/images/chat/deleteaudio.png');
width: 22px;
height: 22px;
cursor: pointer;
}
&.chatmicrophoneConsoe-on-icon {
background-image: url('@/assets/images/chat/microphone-on.png');
width: 22px;
height: 22px;
cursor: pointer;
}
&.chatmicrophoneConsoe-off-icon {
background-image: url('@/assets/images/chat/microphone-off.png');
width: 22px;
height: 22px;
cursor: pointer;
}
&.chatdeleteAudioConsola-icon {
background-image: url('@/assets/images/chat/deleteaudio.png');
width: 22px;
height: 22px;
cursor: pointer;
}
&.chatmas-icon {
background-image: url('@/assets/images/chat/mas.png');
width: 22px;
height: 27px;
background-position: center;
float: right;
cursor: pointer;
margin-right: 39px;
margin-top: 1px;
position: absolute;
z-index: 999999;
right: -26px;
}
&.chatequis-icon {
background-image: url('@/assets/images/chat/equis.png');
width: 22px;
height: 22px;
margin-left: 3px;
cursor: pointer;
}
&.spin {
animation: rotating 1s linear infinite;
}

92
src/assets/styles/index.scss
View File

@ -24,3 +24,95 @@ input::-webkit-inner-spin-button {
input[type=number] {
-moz-appearance: textfield;
}
.rounded {
border-radius: 0.5rem;
}
.btn-primary{
color: #fff;
background-color: #1e7295;
border: 2px solid #1a617f;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-primary:hover{
background-color: #185b77;
border-color: #175670;
box-shadow: none!important;
}
.btn-secondary{
color: #fff;
background-color: #1e7295;
border: 2px solid #1a617f;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-secondary:hover{
background-color: #185b77;
border-color: #175670;
box-shadow: none!important;
}
.btn-success{
color: #fff;
background-color: #00800b;
border: 2px solid #006d09;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-success:hover{
box-shadow: none!important;
}
.btn-danger{
color: #fff;
background-color: #a81a12;
border: 2px solid #b9322a;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-danger:hover{
box-shadow: none!important;
}
.btn-warning{
color: #222;
background-color: #ffc107;
border: 2px solid #f3c12a;
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
box-shadow: none!important;
}
.btn-warning:hover{
box-shadow: none!important;
}
.btn-dark {
color: #fff;
background-color: #212131;
border: 2px solid #1c1c2a;
box-shadow: none!important;
border-radius: 8px;
padding: 4px 11px 4px 11px;
}
.btn-dark:hover{
background-color: #212131;
border: 2px solid #1c1c2a;
box-shadow: none!important;
border-radius: 8px;
padding: 4px 11px 4px 11px;
}
.btn-friendsgen{
background-color: #424354;
border: 2px solid #63647a;
border-radius: 10px;
}
.btn-friendsgensuccess{
background-color: #b69b83;
border: 2px solid #e2c1a3;
border-radius: 10px;
}

96
src/common/InfiniteScroll.tsx
View File

@ -1,6 +1,7 @@
import { useVirtualizer } from '@tanstack/react-virtual';
import { FC, ReactElement, useRef, useState } from 'react';
import { FC, Fragment, ReactElement, useEffect, useRef, useState } from 'react';
import { Base } from './Base';
import { UseMountEffect } from '../hooks';
interface InfiniteScrollProps<T = any>
{
@ -13,43 +14,80 @@ interface InfiniteScrollProps<T = any>
export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
{
const { rows = [], overscan = 5, scrollToBottom = false, rowRender = null } = props;
const [ scrollIndex, setScrollIndex ] = useState<number>(rows.length - 1);
const scrollIndex = rows.length - 1;
const parentRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({
const { getVirtualItems, getTotalSize, scrollToIndex = null, measureElement } = useVirtualizer({
count: rows.length,
overscan,
getScrollElement: () => parentRef.current,
estimateSize: () => 45,
estimateSize: () => 8,
overscan
});
const items = virtualizer.getVirtualItems();
const virtualItems = getVirtualItems();
const totalSize = getTotalSize();
const paddingTop = (virtualItems.length > 0) ? (virtualItems?.[0]?.start || 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(() =>
{
if (!scrollToBottom) return;
if (!lastElementVisible(scrollIndex)) return;
scrollToIndex(scrollIndex);
}, [ scrollToBottom, scrollIndex, scrollToIndex ]);
return (
<Base fit innerRef={ parentRef } position="relative" overflow="auto">
<div
style={ {
height: virtualizer.getTotalSize(),
width: '100%',
position: 'relative'
} }>
{ (paddingTop > 0) &&
<div
style={ {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
transform: `translateY(${ items[0]?.start ?? 0 }px)`
} }>
{ items.map((virtualRow) => (
<div
key={ virtualRow.key }
data-index={ virtualRow.index }
ref={ virtualizer.measureElement }>
{ rowRender(rows[virtualRow.index]) }
</div>
)) }
</div>
</div>
style={ { minHeight: `${ paddingTop }px` } } /> }
{ virtualItems.map(item =>
{
const row = rows[item.index];
if (!row) return (
<Fragment
key={ item.key } />
);
return (
<div
key={ item.key }
data-index={ item.index }
ref={ measureElement }>
{ rowRender(row) }
</div>
)
}) }
{ (paddingBottom > 0) &&
<div
style={ { minHeight: `${ paddingBottom }px` } } /> }
</Base>
);
}

21
src/common/Slider.tsx Normal file
View File

@ -0,0 +1,21 @@
import { FC } from 'react';
import ReactSlider, { ReactSliderProps } from 'react-slider';
import { Button } from './Button';
import { Flex } from './Flex';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
export interface SliderProps extends ReactSliderProps
{
disabledButton?: boolean;
}
export const Slider: FC<SliderProps> = props =>
{
const { disabledButton, max, min, value, onChange, ...rest } = props;
return <Flex fullWidth gap={ 1 }>
{ !disabledButton && <Button disabled={ min >= value } onClick={ () => onChange(min < value ? value - 1 : min, 0) }><FaAngleLeft /></Button> }
<ReactSlider className={ 'nitro-slider' } max={ max } min={ min } value={ value } onChange={ onChange } { ...rest } />
{ !disabledButton && <Button disabled={ max <= value } onClick={ () => onChange(max > value ? value + 1 : max, 0) }><FaAngleRight /></Button> }
</Flex>;
}

61
src/common/card/NitroCardView.scss
View File

@ -1,8 +1,13 @@
$nitro-card-header-height: 33px;
$nitro-card-tabs-height: 33px;
$nitro-card-tabs-height: 42px;
.nitro-card {
resize: both;
padding: 0.5rem;
background: #ededed;
border-radius: 0.75rem!important;
border: 2px solid #454566!important;
box-shadow: 0 0 0 1pt #fff!important;
@include media-breakpoint-down(lg) {
max-width: 100vw !important;
@ -13,9 +18,14 @@ $nitro-card-tabs-height: 33px;
border: $border-width solid $border-color;
.nitro-card-header {
min-height: 33px;
max-height: 33px;
background: $primary;
min-height: 28px;
max-height: 28px;
width: 100%;
padding: 1rem;
border-radius: 0.5rem;
background: #454566;
border: 2px solid #66669b;
margin-bottom: 0.25rem;
.nitro-card-header-text {
color: $white;
@ -71,19 +81,21 @@ $nitro-card-tabs-height: 33px;
}
.nitro-card-tabs {
background-color: $secondary;
background-color: #ededed;
.nav-item {
padding: $nav-link-padding-y $nav-link-padding-x;
background-color: $muted;
color: $black;
padding: 0.2rem 0.4rem;
background-color: #dedede;
color: #000;
z-index: 1;
margin-bottom: -1px;
box-shadow: 0 0 0 1pt #fff !important;
border: 2px solid #454566!important;
border-radius: 0.5rem;
border-top-left-radius: 0.5rem !important;
border-top-right-radius: 0.5rem !important;
&.active {
background-color: $light;
border-color: $border-color $border-color $light !important;
border-bottom: 1px solid black;
background-color: #e1e5ff;
&:before {
background: $white;
@ -107,7 +119,7 @@ $nitro-card-tabs-height: 33px;
}
.content-area {
background-color: $light;
background-color: #ededed;
}
}
@ -118,22 +130,12 @@ $nitro-card-tabs-height: 33px;
position: relative;
min-height: 28px;
max-height: 28px;
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
border-bottom: 2px solid darken($quaternary, 5);
box-shadow: 0 2px white;
width: 100%;
margin: 0;
padding-top:2px;
&:before {
position: absolute;
content: ' ';
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba($white, 0.3);
}
padding: 1rem;
border-radius: 0.5rem;
background: #454566;
border: 2px solid #66669b;
margin-bottom: 0.25rem;
.nitro-card-header-text {
color: $white;
@ -197,7 +199,7 @@ $nitro-card-tabs-height: 33px;
}
.content-area {
background-color: $light;
background-color: #ededed;
}
}
}
@ -230,7 +232,6 @@ $nitro-card-tabs-height: 33px;
height: 100%;
min-height: $nitro-card-tabs-height;
max-height: $nitro-card-tabs-height;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}
.nitro-card-accordion-set {

30
src/common/card/NitroCardView.tsx
View File

@ -24,6 +24,36 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
return newClassNames;
}, [ theme, classNames ]);
/* useEffect(() =>
{
if(!uniqueKey || !elementRef || !elementRef.current) return;
const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
const element = elementRef.current;
if(localStorage && localStorage.size)
{
//element.style.width = `${ localStorage.size.width }px`;
//element.style.height = `${ localStorage.size.height }px`;
}
const observer = new ResizeObserver(event =>
{
const newStorage = { ...GetLocalStorage<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
});
observer.observe(element);
return () =>
{
observer.disconnect();
}
}, [ uniqueKey ]); */
return (
<NitroCardContextProvider value={ { theme } }>
<DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>

2
src/common/card/tabs/NitroCardTabsView.tsx
View File

@ -7,7 +7,7 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'container-fluid', 'nitro-card-tabs', 'pt-1' ];
const newClassNames: string[] = [ 'container-fluid', 'nitro-card-tabs', 'pt-1', 'position-relative' ];
if(classNames.length) newClassNames.push(...classNames);

18
src/common/index.scss
View File

@ -280,8 +280,7 @@
}
}
.furni-image,
.room-object-image {
.furni-image {
position: relative;
width: 100%;
height: 100%;
@ -531,12 +530,12 @@
}
.nitro-progress-bar {
border: 1px solid $white;
border: 1px solid #fff;
padding: 2px;
height: 20px;
border-radius: $border-radius;
height: 25px;
border-radius: 1em;
overflow: hidden;
background: $primary;
background: #212529;
&.large {
height: 30px;
@ -546,11 +545,8 @@
height: 100%;
z-index: 1;
transition: all 1s;
border-radius: calc(#{$border-radius} / 2);
background: repeating-linear-gradient($tertiary,
$tertiary 50%,
$quaternary 50%,
$quaternary 100%);
border-radius: 1em;
background: repeating-linear-gradient(#d6baa1,#d6baa1 50%,#b69b83 0,#b69b83);
}
.nitro-progress-bar-text {

2
src/common/layout/LayoutCurrencyIcon.tsx
View File

@ -13,7 +13,7 @@ export const LayoutCurrencyIcon: FC<CurrencyIconProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'nitro-currency-icon' ];
const newClassNames: string[] = [ 'nitro-currency-icon topcurrencygen' ];
if(classNames.length) newClassNames.push(...classNames);

2
src/common/layout/LayoutFurniIconImageView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { LayoutImage, LayoutImageProps } from '.';
import { GetImageIconUrlForProduct } from '../../api';
import { LayoutImage, LayoutImageProps } from './LayoutImage';
interface LayoutFurniIconImageViewProps extends LayoutImageProps
{

17
src/common/layout/LayoutFurniImageView.tsx
View File

@ -45,7 +45,15 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
let imageResult: ImageResult = null;
const listener: IGetImageListener = {
imageReady: async (id, texture, image) => setImageElement(await TextureUtils.generateImage(texture)),
imageReady: (id, texture, image) =>
{
if(!image && texture)
{
image = TextureUtils.generateImage(texture);
}
image.onload = () => setImageElement(image);
},
imageFailed: null
};
@ -59,9 +67,12 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
break;
}
if(!imageResult) return;
if(imageResult)
{
const image = imageResult.getImage();
(async () => setImageElement(await TextureUtils.generateImage(imageResult.data)))();
image.onload = () => setImageElement(image);
}
}, [ productType, productClassId, direction, extraData ]);
if(!imageElement) return null;

4
src/common/layout/LayoutGiftTagView.tsx
View File

@ -1,8 +1,6 @@
import { FC } from 'react';
import { Column, Flex, Text } from '..';
import { LocalizeText } from '../../api';
import { Column } from '../Column';
import { Flex } from '../Flex';
import { Text } from '../Text';
import { LayoutAvatarImageView } from './LayoutAvatarImageView';
interface LayoutGiftTagViewProps

75
src/common/layout/LayoutGridColorPickerItem.tsx Normal file
View File

@ -0,0 +1,75 @@
import { FC, useMemo } from 'react';
import { Base } from '../Base';
import { Column, ColumnProps } from '../Column';
import { LayoutItemCountView } from './LayoutItemCountView';
import { LayoutLimitedEditionStyledNumberView } from './limited-edition';
export interface LayoutGridColorPickerItemProps extends ColumnProps
{
itemImage?: string;
itemColor?: string;
itemActive?: boolean;
itemCount?: number;
itemCountMinimum?: number;
itemUniqueSoldout?: boolean;
itemUniqueNumber?: number;
itemUnseen?: boolean;
itemHighlight?: boolean;
disabled?: boolean;
}
export const LayoutGridColorPickerItem: FC<LayoutGridColorPickerItemProps> = props =>
{
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'layout-grid-item', 'color-picker-frame' ];
if(itemActive) newClassNames.push('active');
if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item');
if(itemUniqueSoldout) newClassNames.push('sold-out');
if(itemUnseen) newClassNames.push('unseen');
if(itemHighlight) newClassNames.push('has-highlight');
if(disabled) newClassNames.push('disabled')
if(itemImage === null) newClassNames.push('icon', 'loading-icon');
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemHighlight, disabled, itemImage, classNames ]);
const getStyle = useMemo(() =>
{
let newStyle = { ...style };
if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
if(itemColor) newStyle.backgroundColor = itemColor;
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
return newStyle;
}, [ style, itemImage, itemColor ]);
return (
<Column center={ center } pointer position={ position } overflow={ overflow } column={ column } classNames={ getClassNames } style={ getStyle } { ...rest }>
{ (itemCount > itemCountMinimum) &&
<LayoutItemCountView count={ itemCount } /> }
{ (itemUniqueNumber > 0) &&
<>
<Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } />
<div className="position-absolute bottom-0 unique-item-counter">
<LayoutLimitedEditionStyledNumberView value={ itemUniqueNumber } />
</div>
</> }
{ children }
</Column>
);
}

2
src/common/layout/LayoutMiniCameraView.tsx
View File

@ -6,7 +6,7 @@ import { DraggableWindow } from '../draggable-window';
interface LayoutMiniCameraViewProps
{
roomId: number;
textureReceiver: (texture: NitroTexture) => Promise<void>;
textureReceiver: (texture: NitroTexture) => void;
onClose: () => void;
}

21
src/common/layout/LayoutPetImageView.tsx
View File

@ -67,7 +67,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
if(petTypeId === 16) petHeadOnly = false;
const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor1, new Vector3d((direction * 45)), 64, {
imageReady: async (id, texture, image) =>
imageReady: (id, texture, image) =>
{
if(isDisposed.current) return;
@ -80,7 +80,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
else if(texture)
{
setPetUrl(await TextureUtils.generateImageUrl(texture));
setPetUrl(TextureUtils.generateImageUrl(texture));
setWidth(texture.width);
setHeight(texture.height);
}
@ -93,17 +93,14 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
if(imageResult)
{
(async () =>
{
const image = await imageResult.getImage();
const image = imageResult.getImage();
if(image)
{
setPetUrl(image.src);
setWidth(image.width);
setHeight(image.height);
}
})();
if(image)
{
setPetUrl(image.src);
setWidth(image.width);
setHeight(image.height);
}
}
}, [ figure, typeId, paletteId, petColor, customParts, posture, headOnly, direction ]);

61
src/common/layout/LayoutRoomPreviewerView.tsx
View File

@ -1,5 +1,5 @@
import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react';
import { ColorConverter, GetTicker, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react';
export interface LayoutRoomPreviewerViewProps
{
@ -11,6 +11,7 @@ export interface LayoutRoomPreviewerViewProps
export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
{
const { roomPreviewer = null, height = 0, children = null } = props;
const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
const elementRef = useRef<HTMLDivElement>();
const onClick = (event: MouseEvent<HTMLDivElement>) =>
@ -23,33 +24,44 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
useEffect(() =>
{
if(!elementRef) return;
if(!roomPreviewer) return;
const width = elementRef.current.parentElement.clientWidth;
const texture = TextureUtils.createRenderTexture(width, height);
const update = async (ticker: NitroTicker) =>
const update = (time: number) =>
{
if(!roomPreviewer || !elementRef.current) return;
if(!roomPreviewer || !renderingCanvas || !elementRef.current) return;
roomPreviewer.updatePreviewRoomView();
const renderingCanvas = roomPreviewer.getRenderingCanvas();
if(!renderingCanvas.canvasUpdated) return;
GetRenderer().render({
target: texture,
container: renderingCanvas.master,
clear: true
});
elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`;
}
let canvas = GetRenderer().texture.generateCanvas(texture);
const base64 = canvas.toDataURL('image/png');
if(!renderingCanvas)
{
if(elementRef.current && roomPreviewer)
{
const computed = document.defaultView.getComputedStyle(elementRef.current, null);
canvas = null;
let backgroundColor = computed.backgroundColor;
elementRef.current.style.backgroundImage = `url(${ base64 })`;
backgroundColor = ColorConverter.rgbStringToHex(backgroundColor);
backgroundColor = backgroundColor.replace('#', '0x');
roomPreviewer.backgroundColor = parseInt(backgroundColor, 16);
const width = elementRef.current.parentElement.clientWidth;
roomPreviewer.getRoomCanvas(width, height);
const canvas = roomPreviewer.getRenderingCanvas();
setRenderingCanvas(canvas);
canvas.canvasUpdated = true;
update(-1);
}
}
GetTicker().add(update);
@ -62,22 +74,19 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
roomPreviewer.modifyRoomCanvas(width, height);
update(GetTicker());
update(-1);
});
roomPreviewer.getRoomCanvas(width, height);
resizeObserver.observe(elementRef.current);
return () =>
{
GetTicker().remove(update);
resizeObserver.disconnect();
texture.destroy(true);
GetTicker().remove(update);
}
}, [ roomPreviewer, elementRef, height ]);
}, [ renderingCanvas, roomPreviewer, elementRef, height ]);
return (
<div className="room-preview-container">

5
src/common/layout/LayoutTrophyView.tsx
View File

@ -1,9 +1,6 @@
import { FC } from 'react';
import { Base, Column, Flex, Text } from '..';
import { LocalizeText } from '../../api';
import { Base } from '../Base';
import { Column } from '../Column';
import { Flex } from '../Flex';
import { Text } from '../Text';
import { DraggableWindow } from '../draggable-window';
interface LayoutTrophyViewProps