feat(background-position): add background position support for rtl (#…

…11946) * feat(background-position): add background position support for rtl * fix(background-position): fix center * refactor(background-position): make format more robust
ionic-team · Jun 7, 2017 · 305c306 · 305c306
1 parent 9aedc9d
commit 305c306
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 18 deletions.
diff --git a/.scss-lint.yml b/.scss-lint.yml
@@ -135,7 +135,6 @@ linters:
       - background-color
       - background-image
       - background-repeat
-      - background-position
       - background-size
 
       # Other
@@ -191,6 +190,7 @@ linters:
     extra_properties:
       - contain
     disabled_properties:
+      - background-position
       - direction
       - right
       - left

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -154,6 +154,7 @@ input.text-input:-webkit-autofill {
 .text-input-clear-icon {
   @include margin(0);
   @include padding(0);
+  @include background-position(center);
 
   position: absolute;
   top: 0;
@@ -162,7 +163,6 @@ input.text-input:-webkit-autofill {
   height: 100%;
 
   background-repeat: no-repeat;
-  background-position: center;
 }
 
 // TODO remove all uses of input-has-focus in v4

diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
@@ -220,11 +220,10 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   button.item-ios:not([detail-none]) .item-inner,
   a.item-ios:not([detail-none]) .item-inner {
     @include svg-background-image($item-ios-detail-push-svg);
-
     @include padding-horizontal(null, 32px);
+    @include background-position(end, $item-ios-padding-end - 2, center);
 
     background-repeat: no-repeat;
-    background-position: right ($item-ios-padding-end - 2) center;
     background-size: 14px 14px;
   }
 }

diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
@@ -124,11 +124,10 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   button.item-md:not([detail-none]) .item-inner,
   a.item-md:not([detail-none]) .item-inner {
     @include svg-background-image($item-md-detail-push-svg);
-
     @include padding-horizontal(null, 32px);
+    @include background-position(end, $item-md-padding-end - 2, center);
 
     background-repeat: no-repeat;
-    background-position: right ($item-md-padding-end - 2) center;
     background-size: 14px 14px;
   }
 }

diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
@@ -129,11 +129,10 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   button.item-wp:not([detail-none]) .item-inner,
   a.item-wp:not([detail-none]) .item-inner {
     @include svg-background-image($item-wp-detail-push-svg);
-
     @include padding-horizontal(null, 32px);
+    @include background-position(end, $item-wp-padding-end - 2, center);
 
     background-repeat: no-repeat;
-    background-position: right ($item-wp-padding-end - 2) center;
     background-size: 14px 14px;
   }
 }

diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
@@ -123,14 +123,14 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 .searchbar-ios .searchbar-clear-icon {
   @include position(0, 0, null, null);
   @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
+  @include background-position(center);
 
   position: absolute;
 
   width: 30px;
   height: 100%;
 
   background-repeat: no-repeat;
-  background-position: center;
   background-size: $searchbar-ios-input-clear-icon-size;
 }
 

diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss
@@ -122,6 +122,7 @@ $searchbar-md-input-clear-icon-size:     22px !default;
   @include placeholder($searchbar-md-input-placeholder-color);
   @include padding(6px, 55px);
   @include border-radius($searchbar-md-input-border-radius);
+  @include background-position(start, 8px, center);
 
   height: $searchbar-md-input-height;
 
@@ -132,7 +133,6 @@ $searchbar-md-input-clear-icon-size:     22px !default;
   color: $searchbar-md-input-text-color;
 
   background-color: $searchbar-md-input-background-color;
-  background-position: 8px center;
   box-shadow: $searchbar-md-input-box-shadow;
 }
 
@@ -144,14 +144,14 @@ $searchbar-md-input-clear-icon-size:     22px !default;
   @include position(0, 13px, null, null);
   @include svg-background-image($searchbar-md-input-clear-icon-svg);
   @include padding(0);
+  @include background-position(center);
 
   position: absolute;
 
   width: $searchbar-md-input-clear-icon-size;
   height: 100%;
 
   background-repeat: no-repeat;
-  background-position: center;
   background-size: $searchbar-md-input-clear-icon-size;
 }
 

diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss
@@ -122,6 +122,7 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
   @include placeholder($searchbar-wp-input-placeholder-color);
   @include padding($searchbar-wp-input-padding-vertical, $searchbar-wp-input-padding-horizontal);
   @include border-radius($searchbar-wp-input-border-radius);
+  @include background-position(start, $searchbar-wp-input-padding-horizontal, center);
 
   height: $searchbar-wp-input-height;
 
@@ -132,7 +133,6 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
   color: $searchbar-wp-input-text-color;
 
   background-color: $searchbar-wp-input-background-color;
-  background-position: $searchbar-wp-input-padding-horizontal center;
 }
 
 
@@ -143,14 +143,14 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
   @include position(0, $searchbar-wp-input-padding-horizontal, null, null);
   @include svg-background-image($searchbar-wp-input-clear-icon-svg);
   @include padding(0);
+  @include background-position(center);
 
   position: absolute;
 
   width: $searchbar-wp-input-clear-icon-size;
   height: 100%;
 
   background-repeat: no-repeat;
-  background-position: center;
   background-size: $searchbar-wp-input-clear-icon-size;
 }
 

diff --git a/src/components/slides/slides.scss b/src/components/slides/slides.scss
@@ -125,6 +125,7 @@
 .swiper-button-next {
   @include position(50%, null, null, null);
   @include margin(-22px, null, null, null);
+  @include background-position(center);
 
   position: absolute;
   z-index: 10;
@@ -133,7 +134,6 @@
   height: 44px;
 
   background-repeat: no-repeat;
-  background-position: center;
   background-size: 27px 44px;
   cursor: pointer;
 }
@@ -553,14 +553,15 @@ button.swiper-pagination-bullet {
 }
 
 .swiper-lazy-preloader::after {
+  @include background-position(50%);
+
   display: block;
 
   width: 100%;
   height: 100%;
 
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
   background-repeat: no-repeat;
-  background-position: 50%;
   background-size: 100%;
 
   content: "";

diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
@@ -66,6 +66,7 @@ $toolbar-button-md-strong-font-weight:   bold !default;
   // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
   // noticable performance difference on older Android devices
   @include position(null, null, -5px, 0);
+  @include background-position(start, 0, top, -2px);
 
   position: absolute;
 
@@ -74,18 +75,16 @@ $toolbar-button-md-strong-font-weight:   bold !default;
 
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
   background-repeat: repeat-x;
-  background-position: 0 -2px;
 
   content: "";
 }
 
 .footer-md::before,
 .tabs-md[tabsPlacement="bottom"] > .tabbar::before {
   @include position(-2px, null, auto, null);
+  @include background-position(start, 0, top, 0);
 
   height: 2px;
-
-  background-position: 0 0;
 }
 
 .header-md[no-border]::after,

diff --git a/src/themes/ionic.mixins.scss b/src/themes/ionic.mixins.scss
@@ -421,4 +421,29 @@
       float: $side $decorator;
     }
   }
+}
+
+@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
+  @if $horizontal == start or $horizontal == end {
+    $horizontal-ltr: null;
+    $horizontal-rtl: null;
+    @if $horizontal == start {
+      $horizontal-ltr: left;
+      $horizontal-rtl: right;
+    } @else {
+      $horizontal-ltr: right;
+      $horizontal-rtl: left;
+    }
+
+    @include ltr() {
+      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
+    }
+    @include rtl() {
+      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
+    }
+  } @else {
+    @include multi-dir() {
+      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
+    }
+  }
 }