refactor: improve styles

mrholek · mrholek · commit a71ca1f8193f · 2023-07-31T16:10:15.000+02:00
diff --git a/scss/_badge.scss b/scss/_badge.scss
@@ -42,6 +42,7 @@
 //
 
 .badge-sm {
-  padding: $badge-padding-y-sm $badge-padding-x-sm;
+  --#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y-sm};
   @include font-size($badge-font-size-sm);
 }
diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -2,6 +2,14 @@
 //
 // Rows contain your columns.
 
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+
+  --#{$prefix}mobile-breakpoint: #{$mobile-breakpoint};
+}
+
 @if $enable-grid-classes {
   .row {
     @include make-row();
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
@@ -12,6 +12,8 @@
   --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -42,7 +44,7 @@
       background-clip: padding-box;
       outline: 0;
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform $offcanvas-transition-duration ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));
 
       &.offcanvas-start {
         top: 0;
@@ -134,7 +136,7 @@
 
 .offcanvas-title {
   margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-body {
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -75,7 +75,7 @@
     @include ltr-rtl("margin-left", $pagination-margin-start);
   }
 
-  @if $pagination-margin-start == ($pagination-border-width * -1) {
+  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -531,8 +531,8 @@ legend {
 //    https://github.com/twbs/bootstrap/issues/11586.
 
 [type="search"] {
-  outline-offset: -2px; // 1
   -webkit-appearance: textfield; // 2
+  outline-offset: -2px; // 1
 }
 
 // 1. A few input types should stay LTR
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
@@ -45,7 +45,7 @@
 }
 
 .bs-tooltip-top .tooltip-arrow {
-  bottom: 0;
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
   &::before {
     top: -1px;
@@ -56,7 +56,7 @@
 
 /* rtl:begin:ignore */
 .bs-tooltip-end .tooltip-arrow {
-  left: 0;
+  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
@@ -70,7 +70,7 @@
 /* rtl:end:ignore */
 
 .bs-tooltip-bottom .tooltip-arrow {
-  top: 0;
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
   &::before {
     bottom: -1px;
@@ -81,7 +81,7 @@
 
 /* rtl:begin:ignore */
 .bs-tooltip-start .tooltip-arrow {
-  right: 0;
+  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
@@ -116,5 +116,5 @@
   color: var(--#{$prefix}tooltip-color);
   text-align: center;
   background-color: var(--#{$prefix}tooltip-bg);
-  border-radius: var(--#{$prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -730,6 +730,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             $border-width !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
diff --git a/scss/coreui-grid.rtl.scss b/scss/coreui-grid.rtl.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner(Grid);
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;
diff --git a/scss/coreui-grid.scss b/scss/coreui-grid.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner(Grid);
 
 $include-column-box-sizing: true !default;
 
diff --git a/scss/coreui-reboot.rtl.scss b/scss/coreui-reboot.rtl.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner(Reboot);
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;
diff --git a/scss/coreui-reboot.scss b/scss/coreui-reboot.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include bsBanner(Reboot);
 
 @import "functions";
 @import "variables";
diff --git a/scss/coreui-utilities.rtl.scss b/scss/coreui-utilities.rtl.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner(Utilities);
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;
diff --git a/scss/coreui-utilities.scss b/scss/coreui-utilities.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include bsBanner(Utilities);
 
 // Configuration
 @import "functions";
diff --git a/scss/coreui.rtl.scss b/scss/coreui.rtl.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include bsBanner("");
 
 $enable-ltr: false !default;
 $enable-rtl: true !default;
diff --git a/scss/coreui.scss b/scss/coreui.scss
@@ -1,10 +1,5 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.6
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include bsBanner("");
 
 // scss-docs-start import-stack
 // Configuration
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -33,12 +33,12 @@
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
+  appearance: none;
   background-color: var(--#{$prefix}form-check-input-bg, $form-check-input-bg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border: $form-check-input-border;
-  appearance: none;
   print-color-adjust: exact; // Keep themed appearance for print
   @include transition($form-check-transition);
 
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -11,10 +11,10 @@
   font-weight: $input-font-weight;
   line-height: $input-line-height;
   color: var(--#{$prefix}input-color, $input-color);
+  appearance: none; // Fix appearance for date inputs in Safari
   background-color: var(--#{$prefix}input-bg, $input-bg);
   background-clip: padding-box;
   border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
-  appearance: none; // Fix appearance for date inputs in Safari
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
@@ -8,8 +8,8 @@
   width: 100%;
   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;
+  background-color: transparent;
 
   &:focus {
     outline: 0;
@@ -28,12 +28,12 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+    appearance: none;
     @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
@@ -54,12 +54,12 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
+    appearance: none;
     @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
@@ -13,6 +13,7 @@
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
   color: var(--#{$prefix}form-select-color, $form-select-color);
+  appearance: none;
   background-color: var(--#{$prefix}form-select-bg, $form-select-bg);
   background-image: escape-svg($form-select-indicator);
   background-repeat: no-repeat;
@@ -22,7 +23,6 @@
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
-  appearance: none;
 
   &:focus {
     border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    @include ltr-rtl("margin-left", -$input-border-width);
+    @include ltr-rtl("margin-left", calc(#{$input-border-width} * -1));
     @include border-start-radius(0);
   }
 
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
@@ -1,10 +1,7 @@
-// stylelint-disable function-name-case
-
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
-  $color-rgb: to-rgb($value);
   .text-bg-#{$color} {
     color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
@@ -1,7 +1,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
   min-height: 1em;
   padding: 0;
   background-color: currentcolor;
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
@@ -3,13 +3,14 @@
   --#{$prefix}alert-color: #{$color};
   --#{$prefix}alert-bg: #{$background};
   --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
 
   @if $enable-gradients {
     background-image: var(--#{$prefix}gradient);
   }
 
   .alert-link {
-    color: shade-color($color, 20%);
+    color: var(--#{$prefix}alert-link-color);
   }
 }
 // scss-docs-end alert-variant-mixin
diff --git a/scss/mixins/_banner.scss b/scss/mixins/_banner.scss
@@ -0,0 +1,7 @@
+@mixin bsBanner($file) {
+  /*!
+   * CoreUI #{$file} v5.0.0-alpha.1 (https://coreui.io)
+   * Copyright (c) 2023 creativeLabs Łukasz Holeczek
+   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+   */
+}
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
@@ -51,7 +51,7 @@
 // Row columns
 //
 // Specify on a parent element(e.g., .row) to force immediate children into NN
-// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
 // style grid.
 @mixin row-cols($count) {
   > * {
diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss
@@ -6,7 +6,6 @@
 // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
-  position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
@@ -15,6 +14,11 @@
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
+
+  // Fix for positioned table caption that could become anonymous cells
+  &:not(caption) {
+    position: absolute !important;
+  }
 }
 
 // Use to only display content when it's focused, or one of its child elements is focused
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,7 @@`
`42`	`42`	`//`
`43`	`43`
`44`	`44`	`.badge-sm {`
`45`		`- padding: $badge-padding-y-sm $badge-padding-x-sm;`
	`45`	`+ --#{$prefix}badge-padding-x: #{$badge-padding-x-sm};`
	`46`	`+ --#{$prefix}badge-padding-y: #{$badge-padding-y-sm};`
`46`	`47`	`@include font-size($badge-font-size-sm);`
`47`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@`
`75`	`75`	`@include ltr-rtl("margin-left", $pagination-margin-start);`
`76`	`76`	`}`
`77`	`77`
`78`		`- @if $pagination-margin-start == ($pagination-border-width * -1) {`
	`78`	`+ @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {`
`79`	`79`	`&:first-child {`
`80`	`80`	`.page-link {`
`81`	`81`	`@include border-start-radius(var(--#{$prefix}pagination-border-radius));`
Original file line number	Diff line number	Diff line change
`@@ -531,8 +531,8 @@ legend {`
`531`	`531`	`// https://github.com/twbs/bootstrap/issues/11586.`
`532`	`532`
`533`	`533`	`[type="search"] {`
`534`		`- outline-offset: -2px; // 1`
`535`	`534`	`-webkit-appearance: textfield; // 2`
	`535`	`+ outline-offset: -2px; // 1`
`536`	`536`	`}`
`537`	`537`
`538`	`538`	`// 1. A few input types should stay LTR`