nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix scss division

Browse Source
This commit is contained in:
Bill 2021-09-05 19:04:03 -04:00
parent e427ebb961
commit 968b5fb917
17 changed files with 84 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,7 @@
}
.card-subtitle {
margin-top: -$card-title-spacer-y / 2;
margin-top: -$card-title-spacer-y * 0.5;
margin-bottom: 0;
}
@ -106,9 +106,9 @@
//
.card-header-tabs {
margin-right: -$card-cap-padding-x / 2;
margin-right: -$card-cap-padding-x * 0.5;
margin-bottom: -$card-cap-padding-y;
margin-left: -$card-cap-padding-x / 2;
margin-left: -$card-cap-padding-x * 0.5;
border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg {
@ -120,8 +120,8 @@
}
.card-header-pills {
margin-right: -$card-cap-padding-x / 2;
margin-left: -$card-cap-padding-x / 2;
margin-right: -$card-cap-padding-x * 0.5;
margin-left: -$card-cap-padding-x * 0.5;
}
// Card image

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

@ -202,9 +202,9 @@
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) / 2;
right: (100% - $carousel-caption-width) * 0.5;
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) / 2;
left: (100% - $carousel-caption-width) * 0.5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;

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

@ -4,6 +4,8 @@
// 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;
@ -123,7 +125,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
@return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
}
// Return WCAG2.0 relative luminance
@ -137,7 +139,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
);
@each $name, $value in $rgb {
$value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
$value: if(math.div($value, 255) < .03928, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}

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

@ -32,7 +32,7 @@
}
.figure-img {
margin-bottom: $spacer / 2;
margin-bottom: $spacer * 0.5;
line-height: 1;
}

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

@ -4,6 +4,8 @@
// .modal-content - actual modal w/ bg and corners and stuff
@use "sass:math";
.modal-open {
// Kill the scroll on the body
overflow: hidden;
@ -119,8 +121,8 @@
@include border-top-radius($modal-content-inner-border-radius);
.btn-close {
padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
margin: math.div($modal-header-padding-y, -2) math.div($modal-header-padding-x, -2) math.div($modal-header-padding-y, -2) auto;
}
}
@ -147,7 +149,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 / 2;
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);
@ -155,7 +157,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 / 2;
margin: $modal-footer-margin-between * 0.5;
}
}

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

@ -1,3 +1,5 @@
@use "sass:math";
.offcanvas {
position: fixed;
bottom: 0;
@ -20,8 +22,8 @@
padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close {
padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
margin: math.div($offcanvas-padding-y, -2) math.div($offcanvas-padding-x, -2) math.div($offcanvas-padding-y, -2) auto;
}
}

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

@ -40,13 +40,13 @@
&::before {
bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 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 / 2) 0;
border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
border-top-color: $popover-arrow-color;
}
}
@ -60,13 +60,13 @@
&::before {
left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 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 / 2) $popover-arrow-height ($popover-arrow-width / 2) 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 +78,13 @@
&::before {
top: 0;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
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 / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5);
border-bottom-color: $popover-arrow-color;
}
}
@ -96,7 +96,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2;
margin-left: -$popover-arrow-width * 0.5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@ -110,13 +110,13 @@
&::before {
right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $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 / 2) 0 ($popover-arrow-width / 2) $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/_toasts.scss
View File

@ -1,3 +1,5 @@
@use "sass:math";
.toast {
width: $toast-max-width;
max-width: 100%;
@ -40,7 +42,7 @@
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
.btn-close {
margin-right: $toast-padding-x / -2;
margin-right: math.div($toast-padding-x, -2);
margin-left: $toast-padding-x;
}
}

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

@ -37,7 +37,7 @@
&::before {
top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
border-top-color: $tooltip-arrow-color;
}
}
@ -53,7 +53,7 @@
&::before {
right: -1px;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 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 +67,7 @@
&::before {
bottom: -1px;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
@ -83,7 +83,7 @@
&::before {
left: -1px;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $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;
}
}

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

@ -291,8 +291,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer / 4,
2: $spacer / 2,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
@ -308,8 +308,8 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null)
// scss-docs-start position-map
$position-values: (
0: 0,
1: $spacer / 4,
2: $spacer / 2,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
@ -396,7 +396,7 @@ $gutters: $spacers !default;
// Container padding
$container-padding-x: $grid-gutter-width / 2 !default;
$container-padding-x: $grid-gutter-width * 0.5 !default;
// Components
@ -512,7 +512,7 @@ $font-sizes: (
// scss-docs-end font-sizes
// scss-docs-start headings-variables
$headings-margin-bottom: $spacer / 2 !default;
$headings-margin-bottom: $spacer * 0.5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
@ -769,7 +769,7 @@ $input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@ -993,7 +993,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer / 2 !default;
$navbar-padding-y: $spacer * 0.5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
@ -1002,7 +1002,7 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
@ -1052,7 +1052,7 @@ $dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-divider-margin-y: $spacer * 0.5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
@ -1064,7 +1064,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-500 !default;
$dropdown-item-padding-y: $spacer / 4 !default;
$dropdown-item-padding-y: $spacer * 0.25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
@ -1133,12 +1133,12 @@ $pagination-border-radius-lg: $border-radius-lg !default;
// scss-docs-start card-variables
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer / 2 !default;
$card-title-spacer-y: $spacer * 0.5 !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y / 2 !default;
$card-cap-padding-y: $card-spacer-y * 0.5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
@ -1146,7 +1146,7 @@ $card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width / 2 !default;
$card-group-margin: $grid-gutter-width * 0.5 !default;
// scss-docs-end card-variables
// Accordion
@ -1194,8 +1194,8 @@ $tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer / 4 !default;
$tooltip-padding-x: $spacer / 2 !default;
$tooltip-padding-y: $spacer * 0.25 !default;
$tooltip-padding-x: $spacer * 0.5 !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
@ -1361,7 +1361,7 @@ $list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer / 2 !default;
$list-group-item-padding-y: $spacer * 0.5 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;

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

@ -17,7 +17,7 @@
.form-check-input {
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
background-repeat: no-repeat;

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

@ -27,7 +27,7 @@
&::-webkit-slider-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // 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);

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

@ -2,6 +2,8 @@
//
// Generate semantic grid columns with these mixins.
@use "sass:math";
@mixin make-row($gutter: $grid-gutter-width) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
@ -28,7 +30,7 @@
@mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 auto;
width: percentage($size / $columns);
width: percentage(math.div($size, $columns));
}
@mixin make-col-auto() {
@ -37,7 +39,7 @@
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns;
$num: math.div($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
@ -49,7 +51,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
width: 100% / $count;
width: math.div(100%, $count);
}
}

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

@ -9,6 +9,8 @@
// Configuration
// Base value
@use "sass:math";
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;
@ -54,10 +56,10 @@ $rfs-base-value-unit: unit($rfs-base-value);
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
$rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
$rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
$rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
$rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + math.div(1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
@ -65,14 +67,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
}
// Calculate the media query value
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
@ -164,11 +166,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@if $unit == px {
// Convert to rem if needed
$val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
$val: $val + ' ' + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value);
}
@else if $unit == rem {
// Convert to px if needed
$val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
$val: $val + ' ' + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
}
@else {
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@ -205,21 +207,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@else {
// Remove unit from $value for calculations
$value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
$value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value)));
// Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
$val: $val + ' ' + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
$value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
$value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
// Base value formatting
$min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
$min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
// Use negative value if needed
$min-width: if($value < 0, -$min-width, $min-width);
@ -228,7 +230,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
$variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
$variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';

6
src/assets/styles/fontawesome/_larger.scss vendored
View File

@ -2,9 +2,11 @@
// -------------------------
// makes the font 33% larger relative to the icon container
@use "sass:math";
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
font-size: math.div(4em, 3);
line-height: (3em * 0.25);
vertical-align: -.0667em;
}

2
src/assets/styles/fontawesome/_list.scss vendored
View File

@ -3,7 +3,7 @@
.#{$fa-css-prefix}-ul {
list-style-type: none;
margin-left: $fa-li-width * 5/4;
margin-left: $fa-li-width * 5*0.25;
padding-left: 0;
> li { position: relative; }

4
src/assets/styles/fontawesome/_variables.scss vendored
View File

@ -1,6 +1,8 @@
// Variables
// --------------------------
@use "sass:math";
$fa-font-path: "../../webfonts" !default;
$fa-font-size-base: 16px !default;
$fa-font-display: block !default;
@ -9,7 +11,7 @@ $fa-version: "5.14.0" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: 2em !default;
$fa-fw-width: (20em / 16);
$fa-fw-width: math.div(20em, 16);
$fa-primary-opacity: 1 !default;
$fa-secondary-opacity: .4 !default;