From 305c306b14fafec4be759ebcc6716b8d24922948 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Wed, 7 Jun 2017 23:37:26 +0300 Subject: [PATCH] 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 --- .scss-lint.yml | 2 +- src/components/input/input.scss | 2 +- src/components/item/item.ios.scss | 3 +-- src/components/item/item.md.scss | 3 +-- src/components/item/item.wp.scss | 3 +-- src/components/searchbar/searchbar.ios.scss | 2 +- src/components/searchbar/searchbar.md.scss | 4 ++-- src/components/searchbar/searchbar.wp.scss | 4 ++-- src/components/slides/slides.scss | 5 +++-- src/components/toolbar/toolbar.md.scss | 5 ++--- src/themes/ionic.mixins.scss | 25 +++++++++++++++++++++ 11 files changed, 40 insertions(+), 18 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index 75a8d88133..ed31bc61f3 100644 --- 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 index a2ec0987a1..4576fed2d4 100644 --- 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 index 4d36539f59..422bcffe54 100644 --- 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 index 7230a0f2b2..8b41ac065d 100644 --- 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 index 8ce9632be9..d58c7c7669 100644 --- 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 index 0afc207879..0b3dd529a1 100644 --- a/src/components/searchbar/searchbar.ios.scss +++ b/src/components/searchbar/searchbar.ios.scss @@ -123,6 +123,7 @@ $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; @@ -130,7 +131,6 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; 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 index cf596908a1..de62557a7c 100644 --- 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,6 +144,7 @@ $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; @@ -151,7 +152,6 @@ $searchbar-md-input-clear-icon-size: 22px !default; 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 index 516b71d08d..08eb9f7d11 100644 --- 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,6 +143,7 @@ $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; @@ -150,7 +151,6 @@ $searchbar-wp-input-clear-icon-size: 22px !default; 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 index 1424ff5dd5..8b04707991 100644 --- 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,6 +553,8 @@ button.swiper-pagination-bullet { } .swiper-lazy-preloader::after { + @include background-position(50%); + display: block; width: 100%; @@ -560,7 +562,6 @@ button.swiper-pagination-bullet { 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 index 792d948d05..de3d1ee98d 100644 --- 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,7 +75,6 @@ $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: ""; } @@ -82,10 +82,9 @@ $toolbar-button-md-strong-font-weight: bold !default; .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 index 4d942b6020..186de6aa71 100644 --- 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; + } + } } \ No newline at end of file