Merge pull request #2679 from IDEMSInternational/style/kw-button-text…

…-alignment fix: make button text alignment responsive to language direction
IDEMSInternational · Jan 3, 2025 · 1185e79 · 1185e79
2 parents f2de75f + 85c9626
commit 1185e79
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/app/shared/components/template/components/button/button.component.scss b/src/app/shared/components/template/components/button/button.component.scss
@@ -112,10 +112,10 @@ ion-button[data-variant~="card"] {
     padding: 1rem 0 0.5rem;
     text-align: center;
     &.right {
-      text-align: right;
+      text-align: end;
     }
     &.left {
-      text-align: left;
+      text-align: start;
     }
     &.center {
       text-align: center;
@@ -173,14 +173,14 @@ ion-button[data-variant~="card"] {
 
 .left ::ng-deep {
   margin: 0 auto 0 2px;
-  text-align: left;
+  text-align: start;
   p {
     margin: 0 0 0 2px;
   }
 }
 .right {
   margin: 0 2px 0 auto;
-  text-align: right;
+  text-align: end;
 }
 .center {
   text-align: center;

diff --git a/src/theme/deployment/_overrides.scss b/src/theme/deployment/_overrides.scss
@@ -61,10 +61,10 @@ p {
   font-size: var(--font-size-text-large);
 }
 .right {
-  text-align: right;
+  text-align: end;
 }
 .left {
-  text-align: left;
+  text-align: start;
 }
 .center {
   text-align: center;

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -26,9 +26,9 @@ body[data-theme="plh_kids_kw"] {
       text-align: unset !important;
     }
     .left.text {
-      text-align: left;
+      text-align: start;
       p {
-        text-align: left !important;
+        text-align: start !important;
       }
     }
     // Center align all button text by default
@@ -45,7 +45,7 @@ body[data-theme="plh_kids_kw"] {
     }
     .left.right ::ng-deep {
       p {
-        text-align: right !important;
+        text-align: end !important;
       }
     }
     //Alignment Buttons