fix(rtl): add correct text-align (#11353)

* fix(rtl): add correct text-align * feat(text-align): add mixin for backwards compatibility of variables * fix(text-align): default null not empty string * fix(text-align): remove default
ionic-team · May 2, 2017 · 424b15a · 424b15a
1 parent 6b42677
commit 424b15a
Show file tree

Hide file tree

Showing 32 changed files with 134 additions and 104 deletions.
diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
@@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 
 .action-sheet-ios {
-  text-align: $action-sheet-ios-text-align;
+  @include text-align($action-sheet-ios-text-align);
 }
 
 .action-sheet-ios .action-sheet-container {
@@ -95,13 +95,14 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-title {
+  @include text-align($action-sheet-ios-text-align);
+
   padding: $action-sheet-ios-title-padding;
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
   border-radius: $action-sheet-ios-title-border-radius;
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
-  text-align: $action-sheet-ios-text-align;
   color: $action-sheet-ios-title-color;
 }
 

diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-md-text-align:                            left !default;
+$action-sheet-md-text-align:                            start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-md-background:                            #fafafa !default;
@@ -61,14 +61,17 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-title {
+  @include text-align($action-sheet-md-text-align);
+
   padding: $action-sheet-md-title-padding;
 
   font-size: $action-sheet-md-title-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-title-color;
 }
 
 .action-sheet-md .action-sheet-button {
+  @include text-align($action-sheet-md-text-align);
+
   position: relative;
   overflow: hidden;
 
@@ -77,7 +80,6 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
   min-height: $action-sheet-md-button-min-height;
 
   font-size: $action-sheet-md-button-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
 }
@@ -87,13 +89,14 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-icon {
+  @include text-align($action-sheet-md-icon-text-align);
+
   margin: $action-sheet-md-icon-margin;
   padding: 0;
 
   width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
-  text-align: $action-sheet-md-icon-text-align;
   vertical-align: $action-sheet-md-icon-vertical-align;
 }
 

diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-wp-text-align:                      left !default;
+$action-sheet-wp-text-align:                      start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-wp-background:                      #fff !default;
@@ -69,20 +69,22 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-title {
+  @include text-align($action-sheet-wp-title-text-align);
+
   padding: $action-sheet-wp-title-padding;
 
   font-size: $action-sheet-wp-title-font-size;
-  text-align: $action-sheet-wp-title-text-align;
   color: $action-sheet-wp-title-color;
 }
 
 .action-sheet-wp .action-sheet-button {
+  @include text-align($action-sheet-wp-button-text-align);
+
   padding: $action-sheet-wp-button-padding;
 
   min-height: $action-sheet-wp-button-height;
 
   font-size: $action-sheet-wp-button-font-size;
-  text-align: $action-sheet-wp-button-text-align;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
 }
@@ -92,13 +94,14 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-icon {
+  @include text-align($action-sheet-wp-icon-text-align);
+
   margin: $action-sheet-wp-icon-margin;
   padding: 0;
 
   width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
-  text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 

diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss
@@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-head {
-  padding: $alert-ios-head-padding;
+  @include text-align($alert-ios-head-text-align);
 
-  text-align: $alert-ios-head-text-align;
+  padding: $alert-ios-head-padding;
 }
 
 .alert-ios .alert-title {
@@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-message,
 .alert-ios .alert-input-group {
+  @include text-align($alert-ios-message-text-align);
+
   padding: $alert-ios-message-padding;
 
   font-size: $alert-ios-message-font-size;
-  text-align: $alert-ios-message-text-align;
   color: $alert-ios-message-text-color;
 }
 

diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss
@@ -22,7 +22,7 @@ $alert-md-box-shadow:                         0 16px 20px $alert-md-box-shadow-c
 $alert-md-head-padding:                       24px 24px 20px 24px !default;
 
 /// @prop - Text align of the alert head
-$alert-md-head-text-align:                    left !default;
+$alert-md-head-text-align:                    start !default;
 
 /// @prop - Font size of the alert title
 $alert-md-title-font-size:                    22px !default;
@@ -112,7 +112,7 @@ $alert-md-button-border-radius:               2px !default;
 $alert-md-button-text-transform:              uppercase !default;
 
 /// @prop - Text align of the alert button
-$alert-md-button-text-align:                  right !default;
+$alert-md-button-text-align:                  end !default;
 
 
 /// @prop - Border top of the alert list
@@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-head {
-  padding: $alert-md-head-padding;
+  @include text-align($alert-md-head-text-align);
 
-  text-align: $alert-md-head-text-align;
+  padding: $alert-md-head-padding;
 }
 
 .alert-md .alert-title {
@@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md .alert-button {
+  @include text-align($alert-md-button-text-align);
+
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
@@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   border-radius: $alert-md-button-border-radius;
   font-weight: $alert-md-button-font-weight;
-  text-align: $alert-md-button-text-align;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;

diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
@@ -108,6 +108,7 @@ ion-alert input {
 }
 
 .alert-tappable {
+  @include text-align(start);
   @include appearance(none);
 
   margin: 0;
@@ -117,7 +118,5 @@ ion-alert input {
 
   font-size: inherit;
   line-height: initial;
-  text-align: left;
-  text-align: start;
   background: transparent;
 }
diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss
@@ -31,7 +31,7 @@ $alert-wp-background:                          #e6e6e6 !default;
 $alert-wp-head-padding:                        20px 22px 5px 22px !default;
 
 /// @prop - Text align of the alert head
-$alert-wp-head-text-align:                     left !default;
+$alert-wp-head-text-align:                     start !default;
 
 /// @prop - Font size of the alert title
 $alert-wp-title-font-size:                     20px !default;
@@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-head {
-  padding: $alert-wp-head-padding;
+  @include text-align($alert-wp-head-text-align);
 
-  text-align: $alert-wp-head-text-align;
+  padding: $alert-wp-head-padding;
 }
 
 .alert-wp .alert-title {

diff --git a/src/components/app/app.scss b/src/components/app/app.scss
@@ -333,33 +333,27 @@ ion-footer {
       // Provide `[text-{bp}]` attributes for aligning the text based
       // on the breakpoint
       [text#{$infix}-center] {
-        // scss-lint:disable ImportantRule
-        text-align: center !important;
+        @include text-align(center, !important);
       }
 
       [text#{$infix}-justify] {
-        // scss-lint:disable ImportantRule
-        text-align: justify !important;
+        @include text-align(justify, !important);
       }
 
       [text#{$infix}-start] {
-        // scss-lint:disable ImportantRule
-        text-align: start !important;
+        @include text-align(start, !important);
       }
 
       [text#{$infix}-end] {
-        // scss-lint:disable ImportantRule
-        text-align: end !important;
+        @include text-align(end, !important);
       }
 
       [text#{$infix}-left] {
-        // scss-lint:disable ImportantRule
-        text-align: left !important;
+        @include text-align(left, !important);
       }
 
       [text#{$infix}-right] {
-        // scss-lint:disable ImportantRule
-        text-align: right !important;
+        @include text-align(right, !important);
       }
 
       [text#{$infix}-nowrap] {

diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
@@ -11,6 +11,8 @@ $badge-font-weight:               bold !default;
 
 
 ion-badge {
+  @include text-align(center);
+
   display: inline-block;
 
   padding: 3px 8px;
@@ -21,7 +23,6 @@ ion-badge {
   font-weight: $badge-font-weight;
   line-height: 1;
 
-  text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
 }

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -11,13 +11,13 @@ $button-round-border-radius:      64px !default;
 
 
 .button {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
   z-index: 0;
   display: inline-block;
 
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
 

diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
@@ -52,14 +52,15 @@ ion-chip .button {
 }
 
 ion-chip ion-icon {
+  @include text-align($chip-icon-text-align);
+
   width: $chip-icon-size;
   height: $chip-icon-size;
 
   border-radius: $chip-icon-border-radius;
 
   font-size: $chip-icon-font-size;
   line-height: $chip-icon-size;
-  text-align: $chip-icon-text-align;
 }
 
 ion-chip ion-avatar {

diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss
@@ -20,6 +20,7 @@ $fab-list-button-background-color:      #f4f4f4 !default;
 
 
 .fab {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
@@ -33,7 +34,6 @@ $fab-list-button-background-color:      #f4f4f4 !default;
   border-radius: 50%;
   font-size: 14px;
   line-height: $fab-size;
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;

diff --git a/src/components/infinite-scroll/infinite-scroll.scss b/src/components/infinite-scroll/infinite-scroll.scss
@@ -28,15 +28,15 @@ ion-infinite-scroll {
 // --------------------------------------------------
 
 ion-infinite-scroll-content {
+  @include text-align(center);
+
   display: flex;
 
   flex-direction: column;
   justify-content: center;
 
   height: 100%;
   min-height: 84px;
-
-  text-align: center;
 }
 
 .infinite-loading {

diff --git a/src/components/item/item-media.scss b/src/components/item/item-media.scss
@@ -11,9 +11,9 @@
 
 .item > ion-icon:first-child,
 .item-inner > ion-icon:first-child {
-  min-width: 24px;
+  @include text-align(center);
 
-  text-align: center;
+  min-width: 24px;
 }
 
 .item > ion-icon,

diff --git a/src/components/item/item.scss b/src/components/item/item.scss
@@ -19,6 +19,8 @@
 }
 
 .item-block {
+  @include text-align(initial);
+
   display: flex;
   overflow: hidden;
 
@@ -35,7 +37,6 @@
 
   font-weight: normal;
   line-height: normal;
-  text-align: initial;
   text-decoration: none;
   color: inherit;
 }