Browse Source

Make horizontal rule direction aware (#2021)

Paweł Kuna 11 months ago
parent
commit
7ba7717
3 changed files with 11 additions and 4 deletions
  1. 5 0
      .changeset/chilly-vans-leave.md
  2. 2 2
      docs/components/divider.mdx
  3. 4 2
      src/scss/ui/typo/_hr.scss

+ 5 - 0
.changeset/chilly-vans-leave.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Make horizontal rule direction aware

+ 2 - 2
docs/components/divider.mdx

@@ -26,7 +26,7 @@ You can modify the position of the text which is to be included in a separator a
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
-<div class="hr-text hr-text-left">Left divider</div>
+<div class="hr-text hr-text-start">Start divider</div>
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
@@ -34,7 +34,7 @@ You can modify the position of the text which is to be included in a separator a
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
-<div class="hr-text hr-text-right">Right divider</div>
+<div class="hr-text hr-text-end">End divider</div>
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>

+ 4 - 2
src/scss/ui/typo/_hr.scss

@@ -39,7 +39,8 @@ Hr text
     color: var(--#{$prefix}secondary);
   }
 
-  &.hr-text-left {
+  &.hr-text-left,
+  &.hr-text-start {
     &:before {
       content: none;
     }
@@ -50,7 +51,8 @@ Hr text
     }
   }
 
-  &.hr-text-right {
+  &.hr-text-right,
+  &.hr-text-end {
     &:before {
       content: "";
     }