From f4452b5d33b863875791ba1458e19a52767c2483 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 9 Jun 2017 23:30:35 +0300 Subject: [PATCH] feat(rtl): support flipped svg background images on rtl (#11945) * feat(svg-background-image): support flipped on rtl * feat(svg-background-image): add rtl for needed icons * revert(svg-background-image): no need to flip clear * fix(svg-background-image): translate to place * fix(svg-background-image): add support for line and polygon --- src/components/item/item.ios.scss | 2 +- src/components/item/item.md.scss | 2 +- src/components/item/item.wp.scss | 2 +- src/components/searchbar/searchbar.ios.scss | 2 +- src/components/searchbar/searchbar.md.scss | 2 +- src/components/searchbar/searchbar.wp.scss | 2 +- src/themes/ionic.functions.scss | 19 +++++++++++ src/themes/ionic.mixins.scss | 36 ++++++++++++++++----- 8 files changed, 53 insertions(+), 14 deletions(-) diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index 422bcffe543..4493c7eb143 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -219,7 +219,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios[detail-push] .item-inner, 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 svg-background-image($item-ios-detail-push-svg, true); @include padding-horizontal(null, 32px); @include background-position(end, $item-ios-padding-end - 2, center); diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 8b41ac065d1..4aeb055a26e 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -123,7 +123,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md[detail-push] .item-inner, 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 svg-background-image($item-md-detail-push-svg, true); @include padding-horizontal(null, 32px); @include background-position(end, $item-md-padding-end - 2, center); diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss index d58c7c7669a..5183caa56d2 100644 --- a/src/components/item/item.wp.scss +++ b/src/components/item/item.wp.scss @@ -128,7 +128,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp[detail-push] .item-inner, 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 svg-background-image($item-wp-detail-push-svg, true); @include padding-horizontal(null, 32px); @include background-position(end, $item-wp-padding-end - 2, center); diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss index 51447b583a6..521b35f945e 100644 --- a/src/components/searchbar/searchbar.ios.scss +++ b/src/components/searchbar/searchbar.ios.scss @@ -77,7 +77,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; @mixin ios-searchbar-icon($svg-icon, $fg-color) { $svg: str-replace($svg-icon, 'fg-color', $fg-color); - @include svg-background-image($svg); + @include svg-background-image($svg, true); } diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss index de62557a7ca..6d97e04ca07 100644 --- a/src/components/searchbar/searchbar.md.scss +++ b/src/components/searchbar/searchbar.md.scss @@ -78,7 +78,7 @@ $searchbar-md-input-clear-icon-size: 22px !default; .searchbar-md .searchbar-search-icon { @include position(11px, null, null, 16px); - @include svg-background-image($searchbar-md-input-search-icon-svg); + @include svg-background-image($searchbar-md-input-search-icon-svg, true); width: $searchbar-md-input-search-icon-size + 1; height: $searchbar-md-input-search-icon-size + 1; diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss index 08eb9f7d110..ce25b934909 100644 --- a/src/components/searchbar/searchbar.wp.scss +++ b/src/components/searchbar/searchbar.wp.scss @@ -99,7 +99,7 @@ $searchbar-wp-input-clear-icon-size: 22px !default; .searchbar-wp .searchbar-search-icon { @include position(5px, $searchbar-wp-input-padding-horizontal, null, null); - @include svg-background-image($searchbar-wp-input-search-icon-svg); + @include svg-background-image($searchbar-wp-input-search-icon-svg, true); position: absolute; diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss index 347c2f67c53..742cb2e0292 100644 --- a/src/themes/ionic.functions.scss +++ b/src/themes/ionic.functions.scss @@ -159,6 +159,25 @@ } +// Str extract between start and end +// -------------------------------------------------- + +@function str-extract($string, $start, $end) { + $start-index: str-index($string, $start); + + @if $start-index { + $post: str-slice($string, $start-index + str-length($start)); + $end-index: str-index($post, $end); + + @if $end-index { + @return str-slice($post, 1, $end-index - 1); + } + } + + @return null; +} + + // URL Encode Function // -------------------------------------------------- diff --git a/src/themes/ionic.mixins.scss b/src/themes/ionic.mixins.scss index 0e87bc042d8..9dedab2280e 100644 --- a/src/themes/ionic.mixins.scss +++ b/src/themes/ionic.mixins.scss @@ -29,14 +29,6 @@ } } -// SVG Background Image Mixin -// -------------------------------------------------- - -@mixin svg-background-image($svg) { - $url: url-encode($svg); - background-image: url("data:image/svg+xml;charset=utf-8,#{$url}"); -} - // Check that the given map values are in ascending order // --------------------------------------------------------------------------------- @@ -202,6 +194,34 @@ } } +// SVG Background Image Mixin +// @param {string} $svg +// ---------------------------------------------------------- +@mixin svg-background-image($svg, $flip-rtl: false) { + $url: url-encode($svg); + $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " "); + + @if $flip-rtl != true or $viewBox == null { + @include multi-dir() { + background-image: url("data:image/svg+xml;charset=utf-8,#{$url}"); + } + } @else { + $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'"; + $flipped-url: $svg; + $flipped-url: str-replace($flipped-url, "