From bca99232b8bef6a53719e4827de40729098d4ec8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Thu, 5 May 2022 21:32:02 -0700
Subject: Iterate on border utilities (#36239)

* Remove `--bs-border-opacity: 1` from `.border-*` utilities

We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.

* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues

* Add some demos of border utils to the docs
---
 scss/_root.scss      |  1 -
 scss/_utilities.scss | 28 ++++++++++++++--------------
 2 files changed, 14 insertions(+), 15 deletions(-)

(limited to 'scss')

diff --git a/scss/_root.scss b/scss/_root.scss
index 36f9849ef..e16d2a3f6 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -57,7 +57,6 @@
   --#{$prefix}border-style: #{$border-style};
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
-  --#{$prefix}border-opacity: 1;
 
   --#{$prefix}border-radius: #{$border-radius};
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 9e6052909..1e0d141ac 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -98,25 +98,11 @@ $utilities: map-merge(
     // scss-docs-start utils-borders
     "border": (
       property: border,
-      local-vars: (
-        "border-opacity": 1
-      ),
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
       )
     ),
-    "border-opacity": (
-      css-var: true,
-      class: border-opacity,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
-    ),
     "border-top": (
       property: border-top,
       values: (
@@ -150,6 +136,9 @@ $utilities: map-merge(
     "border-color": (
       property: border-color,
       class: border,
+      local-vars: (
+        "border-opacity": 1
+      ),
       values: $utilities-border-colors
     ),
     "border-width": (
@@ -158,6 +147,17 @@ $utilities: map-merge(
       class: border,
       values: $border-widths
     ),
+    "border-opacity": (
+      css-var: true,
+      class: border-opacity,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
+    ),
     // scss-docs-end utils-borders
     // Sizing utilities
     // scss-docs-start utils-sizing
-- 
cgit v1.2.3