2
0
Эх сурвалжийг харах

Make horizontal rule direction aware (#2021)

Paweł Kuna 11 сар өмнө
parent
commit
7ba7717

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

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

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