feat: added utilities for setting the border radius of individual cor…

…ners of the element
jmjuanes · Apr 7, 2023 · 1a0cdb1 · 1a0cdb1
1 parent c32a41b
commit 1a0cdb1
Showing 1 changed file with 45 additions and 9 deletions.
diff --git a/low/_utilities.scss b/low/_utilities.scss
@@ -81,15 +81,6 @@ $all-utilities: (
     ),
 
     // Border utilities
-    border-color: (
-        group: "border",
-        alias: "b",
-        variants: ("default", "hover", "focus", "focus-within", "active", "checked", "group-hover", "group-focus", "group-focus-within"),
-        properties: (border-color),
-        values: config.$border-color,
-        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
-        description: "Utilities for setting the border color of the element.",
-    ),
     border-radius: (
         group: "border",
         alias: "r",
@@ -99,6 +90,51 @@ $all-utilities: (
         url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius",
         description: "Utilities for setting the radius of the element.",
     ),
+    border-bottom-left-radius: (
+        group: "border",
+        alias: "rbl",
+        variants: ("default"),
+        properties: (border-bottom-left-radius),
+        values: config.$border-radius,
+        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius",
+        description: "Utilities for setting the radius of the bottom-left corner of the element.",
+    ),
+    border-bottom-right-radius: (
+        group: "border",
+        alias: "rbr",
+        variants: ("default"),
+        properties: (border-bottom-right-radius),
+        values: config.$border-radius,
+        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius",
+        description: "Utilities for setting the radius of the bottom-right corner of the element.",
+    ),
+    border-top-left-radius: (
+        group: "border",
+        alias: "rtl",
+        variants: ("default"),
+        properties: (border-top-left-radius),
+        values: config.$border-radius,
+        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius",
+        description: "Utilities for setting the radius of the top-left corner of the element.",
+    ),
+    border-top-right-radius: (
+        group: "border",
+        alias: "rtr",
+        variants: ("default"),
+        properties: (border-top-right-radius),
+        values: config.$border-radius,
+        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius",
+        description: "Utilities for setting the radius of the top-right corner of the element.",
+    ),
+    border-color: (
+        group: "border",
+        alias: "b",
+        variants: ("default", "hover", "focus", "focus-within", "active", "checked", "group-hover", "group-focus", "group-focus-within"),
+        properties: (border-color),
+        values: config.$border-color,
+        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/border-color",
+        description: "Utilities for setting the border color of the element.",
+    ),
     border-style: (
         group: "border",
         alias: "b",