ENV-268 Text alignment

sitevision · Aug 14, 2023 · 40622c8 · 40622c8
1 parent e21e176
commit 40622c8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/packages/envision-docs/src/pages/utils/text.md b/packages/envision-docs/src/pages/utils/text.md
@@ -81,6 +81,23 @@ title: Text
 <div class="env-text env-text-align--right">Right aligned</div>
 ```
 
+### Logical properties <span class="env-badge env-badge--info">2023.08.1</span>
+
+```html
+<div class="env-text env-text-align--start">Start aligned</div>
+<div class="env-text env-text-align--end">End aligned</div>
+```
+
+#### Logical properties, right to left-aligned
+
+```html
+<div dir="rtl">
+ <div class="env-text">من اليمين الى اليسار</div>
+ <div class="env-text env-text-align--start">بدء محاذاة</div>
+ <div class="env-text env-text-align--end">محاذاة النهاية</div>
+</div>
+```
+
 <span id="status-colors" class="offset-anchor"></span>
 
 ## Status colors <span class="env-badge env-badge--info">2023.07.1</span>

diff --git a/packages/envision/src/scss/util/text.scss b/packages/envision/src/scss/util/text.scss
@@ -3,7 +3,7 @@
  font-size: css-var('font-size-medium');
  font-weight: $font-weight-regular;
  text-size-adjust: 100%;
- text-align: left;
+ text-align: start;
  line-height: $line-height-medium;
  color: css-var('font-color');
 
@@ -45,16 +45,29 @@
  }
 
  // Text alignment
+ &-align--right {
+ text-align: right;
+ }
+
  &-align--center {
  text-align: center;
  }
 
- &-align--right {
- text-align: right;
+ &-align--left {
+ text-align: left;
  }
 
  &--rtl {
  direction: rtl;
+ text-align: start;
+ }
+
+ &-align--start {
+ text-align: start !important;
+ }
+
+ &-align--end {
+ text-align: end !important;
  }
 }