quick bugfix in the SCSS

OpenInternet · Oct 14, 2024 · 11e5d40 · 11e5d40
1 parent 98a3d61
commit 11e5d40
Show file tree

Hide file tree

Showing 36 changed files with 32,505 additions and 135 deletions.
diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -28,7 +30,7 @@ $light-blue: #B2CEE6;
 // Links
 $link-color: $primary;
 $link-decoration: none;
-$link-hover-color: lighten($primary, 20%);
+$link-hover-color: color.adjust($primary, $lightness: 20%, $space: hsl);
 $link-hover-decoration: underline;
 
 // Fonts

diff --git a/assets/scss/bootstrap/_functions.scss b/assets/scss/bootstrap/_functions.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Bootstrap functions
 //
 // Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
@@ -50,11 +52,11 @@
 
 // Color contrast
 @function color-yiq($color) {
-  $r: red($color);
-  $g: green($color);
-  $b: blue($color);
+  $r: color.channel($color, 'red', $space: rgb);
+  $g: color.channel($color, 'green', $space: rgb);
+  $b: color.channel($color, 'blue', $space: rgb);
 
-  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
 
   @if ($yiq >= $yiq-contrasted-threshold) {
     @return $yiq-text-dark;

diff --git a/assets/scss/bootstrap/_variables.scss b/assets/scss/bootstrap/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -149,8 +151,7 @@ $body-color:                $gray-900 !default;
 
 $link-color:                theme-color("primary") !default;
 $link-decoration:           none !default;
-$link-hover-color:          color.adjust($color, $lightness: -15%) !default;
-// DEPRECATED $link-hover-color:          darken($link-color, 15%) !default;
+$link-hover-color:          color.adjust($link-color, $lightness: -15%, $space: hsl) !default;
 $link-hover-decoration:     underline !default;
 
 // Paragraphs
@@ -250,8 +251,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-// DEPRECATED $headings-margin-bottom:      ($spacer / 2) !default;
-$headings-margin-bottom:      calc($spacer / 2) !default;
+$headings-margin-bottom:      ($spacer * 0.5) !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -316,8 +316,7 @@ $table-head-color:            $gray-700 !default;
 $table-dark-bg:               $gray-900 !default;
 $table-dark-accent-bg:        rgba($white, .05) !default;
 $table-dark-hover-bg:         rgba($white, .075) !default;
-$table-dark-border-color:     color.adjust($color, $lightness: 7.5%) !default;
-// DEPRECATED $table-dark-border-color:     lighten($gray-900, 7.5%) !default;
+$table-dark-border-color:     color.adjust($gray-900, $lightness: 7.5%, $space: hsl) !default;
 $table-dark-color:            $body-bg !default;
 
 
@@ -408,8 +407,7 @@ $input-border-radius-lg:                $border-radius-lg !default;
 $input-border-radius-sm:                $border-radius-sm !default;
 
 $input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              color.adjust($color, $lightness: 25%) !default;
-// DEPRECATED $input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-border-color:              color.adjust($component-active-bg, $lightness: 25%, $space: hsl) !default;
 $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
@@ -463,8 +461,7 @@ $custom-control-indicator-checked-box-shadow:   none !default;
 $custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
 
 $custom-control-indicator-active-color:         $component-active-color !default;
-$custom-control-indicator-active-bg:            color.adjust($color, $lightness: 35%) !default;
-// DEPRECATED $custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-bg:            color.adjust($component-active-bg, $lightness: 35%, $space: hsl) !default;
 $custom-control-indicator-active-box-shadow:    none !default;
 
 $custom-checkbox-indicator-border-radius:       $border-radius !default;
@@ -545,7 +542,7 @@ $dropdown-divider-bg:               $gray-200 !default;
 $dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
 
 $dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-color:         color.adjust($gray-900, $lightness: -5%, $space: hsl) !default;
 $dropdown-link-hover-bg:            $gray-100 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
@@ -592,7 +589,7 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-y:                  ($spacer * 0.5) !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
@@ -601,7 +598,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-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -671,7 +668,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 ($grid-gutter-width * 0.5) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
@@ -706,7 +703,7 @@ $popover-border-color:              rgba($black, .2) !default;
 $popover-border-radius:             $border-radius-lg !default;
 $popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
 
-$popover-header-bg:                 darken($popover-bg, 3%) !default;
+$popover-header-bg:                 color.adjust($popover-bg, $lightness: -3%, $space: hsl) !default;
 $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
 $popover-header-padding-x:          .75rem !default;
@@ -719,7 +716,7 @@ $popover-arrow-width:               1rem !default;
 $popover-arrow-height:              .5rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+$popover-arrow-outer-color:         color.adjust($popover-border-color, $alpha: .05) !default;
 
 
 // Badges

diff --git a/assets/scss/bootstrap/mixins/_alert.scss b/assets/scss/bootstrap/mixins/_alert.scss
@@ -1,13 +1,15 @@
+@use "sass:color";
+
 @mixin alert-variant($background, $border, $color) {
   color: $color;
   @include gradient-bg($background);
   border-color: $border;
 
   hr {
-    border-top-color: darken($border, 5%);
+    border-top-color: color.adjust($border, $lightness: -5%, $space: hsl);
   }
 
   .alert-link {
-    color: darken($color, 10%);
+    color: color.adjust($color, $lightness: -10%, $space: hsl);
   }
 }
diff --git a/assets/scss/bootstrap/mixins/_background-variant.scss b/assets/scss/bootstrap/mixins/_background-variant.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // stylelint-disable declaration-no-important
 
 // Contextual backgrounds
@@ -9,7 +11,7 @@
   a#{$parent},
   button#{$parent} {
     @include hover-focus {
-      background-color: darken($color, 10%) !important;
+      background-color: color.adjust($color, $lightness: -10%, $space: hsl) !important;
     }
   }
 }

diff --git a/assets/scss/bootstrap/mixins/_badge.scss b/assets/scss/bootstrap/mixins/_badge.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @mixin badge-variant($bg) {
   color: color-yiq($bg);
   background-color: $bg;
@@ -6,7 +8,7 @@
     @include hover-focus {
       color: color-yiq($bg);
       text-decoration: none;
-      background-color: darken($bg, 10%);
+      background-color: color.adjust($bg, $lightness: -10%, $space: hsl);
     }
   }
 }
diff --git a/assets/scss/bootstrap/mixins/_buttons.scss b/assets/scss/bootstrap/mixins/_buttons.scss
@@ -1,9 +1,11 @@
+@use "sass:color";
+
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+@mixin button-variant($background, $border, $hover-background: color.adjust($background, $lightness: -7.5%, $space: hsl), $hover-border: color.adjust($border, $lightness: -10%, $space: hsl), $active-background: color.adjust($background, $lightness: -10%, $space: hsl), $active-border: color.adjust($border, $lightness: -12.5%, $space: hsl)) {
   color: color-yiq($background);
   @include gradient-bg($background);
   border-color: $border;

diff --git a/assets/scss/bootstrap/mixins/_forms.scss b/assets/scss/bootstrap/mixins/_forms.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
@@ -89,7 +91,7 @@
         color: $color;
 
         &::before {
-          background-color: lighten($color, 25%);
+          background-color: color.adjust($color, $lightness: 25%, $space: hsl);
         }
       }
 
@@ -100,7 +102,7 @@
 
       &:checked {
         ~ .custom-control-label::before {
-          @include gradient-bg(lighten($color, 10%));
+          @include gradient-bg(color.adjust($color, $lightness: 10%, $space: hsl));
         }
       }
 

diff --git a/assets/scss/bootstrap/mixins/_grid-framework.scss b/assets/scss/bootstrap/mixins/_grid-framework.scss
@@ -9,8 +9,8 @@
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
+    padding-left: ($gutter * 0.5);
   }
 
   @each $breakpoint in map-keys($breakpoints) {

diff --git a/assets/scss/bootstrap/mixins/_grid.scss b/assets/scss/bootstrap/mixins/_grid.scss
@@ -2,10 +2,12 @@
 //
 // Generate semantic grid columns with these mixins.
 
+@use "sass:math";
+
 @mixin make-container() {
   width: 100%;
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width * 0.5);
+  padding-left: ($grid-gutter-width * 0.5);
   margin-right: auto;
   margin-left: auto;
 }
@@ -23,8 +25,8 @@
 @mixin make-row() {
   display: flex;
   flex-wrap: wrap;
-  margin-right: ($grid-gutter-width / -2);
-  margin-left: ($grid-gutter-width / -2);
+  margin-right: math.div($grid-gutter-width, -2);
+  margin-left: math.div($grid-gutter-width, -2);
 }
 
 @mixin make-col-ready() {
@@ -34,19 +36,19 @@
   // later on to override this initial width.
   width: 100%;
   min-height: 1px; // Prevent collapsing
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width * 0.5);
+  padding-left: ($grid-gutter-width * 0.5);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
+  flex: 0 0 percentage(math.div($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage($size / $columns);
+  max-width: percentage(math.div($size, $columns));
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
+  $num: math.div($size, $columns);
   margin-left: if($num == 0, 0, percentage($num));
 }
diff --git a/assets/scss/bootstrap/mixins/_list-group.scss b/assets/scss/bootstrap/mixins/_list-group.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // List Groups
 
 @mixin list-group-item-variant($state, $background, $color) {
@@ -8,7 +10,7 @@
     &.list-group-item-action {
       @include hover-focus {
         color: $color;
-        background-color: darken($background, 5%);
+        background-color: color.adjust($background, $lightness: -5%, $space: hsl);
       }
 
       &.active {

diff --git a/assets/scss/bootstrap/mixins/_nav-divider.scss b/assets/scss/bootstrap/mixins/_nav-divider.scss
@@ -4,7 +4,7 @@
 
 @mixin nav-divider($color: #e5e5e5) {
   height: 0;
-  margin: ($spacer / 2) 0;
+  margin: ($spacer * 0.5) 0;
   overflow: hidden;
   border-top: 1px solid $color;
 }
diff --git a/assets/scss/bootstrap/mixins/_table-row.scss b/assets/scss/bootstrap/mixins/_table-row.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Tables
 
 @mixin table-row-variant($state, $background) {
@@ -14,7 +16,7 @@
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover {
-    $hover-background: darken($background, 5%);
+    $hover-background: color.adjust($background, $lightness: -5%, $space: hsl);
 
     .table-#{$state} {
       @include hover {

diff --git a/assets/scss/bootstrap/mixins/_text-emphasis.scss b/assets/scss/bootstrap/mixins/_text-emphasis.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // stylelint-disable declaration-no-important
 
 // Typography
@@ -8,7 +10,7 @@
   }
   a#{$parent} {
     @include hover-focus {
-      color: darken($color, 10%) !important;
+      color: color.adjust($color, $lightness: -10%, $space: hsl) !important;
     }
   }
 }
diff --git a/assets/scss/bootstrap/utilities/_embed.scss b/assets/scss/bootstrap/utilities/_embed.scss
@@ -1,5 +1,7 @@
 // Credit: Nicolas Gallagher and SUIT CSS.
 
+@use "sass:math";
+
 .embed-responsive {
   position: relative;
   display: block;
@@ -29,24 +31,24 @@
 
 .embed-responsive-21by9 {
   &::before {
-    padding-top: percentage(9 / 21);
+    padding-top: percentage(math.div(9, 21));
   }
 }
 
 .embed-responsive-16by9 {
   &::before {
-    padding-top: percentage(9 / 16);
+    padding-top: percentage(math.div(9, 16));
   }
 }
 
 .embed-responsive-4by3 {
   &::before {
-    padding-top: percentage(3 / 4);
+    padding-top: percentage(3 * 0.25);
   }
 }
 
 .embed-responsive-1by1 {
   &::before {
-    padding-top: percentage(1 / 1);
+    padding-top: percentage(math.div(1, 1));
   }
 }
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .button {
   white-space: nowrap;
   display: inline-block;
@@ -17,7 +19,7 @@
   transition: all 0.15s ease;
   &:hover {
     color: #ffffff;
-    background-color: lighten($primary, 10%);
+    background-color: color.adjust($primary, $lightness: 10%, $space: hsl);
     transform: translateY(-1px);
     box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
     text-decoration: none;