javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* feat(background-position): add background position support for rtl

* fix(background-position): fix center

* refactor(background-position): make format more robust
This commit is contained in:
Amit Moryossef
2017-06-07 23:37:26 +03:00
committed by Brandy Carney
parent 9aedc9dc52
commit 305c306b14
11 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.scss-lint.yml
View File

@ -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

2
src/components/input/input.scss
View File

@ -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

3
src/components/item/item.ios.scss
View File

@ -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;
}
}

3
src/components/item/item.md.scss
View File

@ -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;
}
}

3
src/components/item/item.wp.scss
View File

@ -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;
}
}

2
src/components/searchbar/searchbar.ios.scss
View File

@ -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;
}

4
src/components/searchbar/searchbar.md.scss
View File

@ -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;
}

4
src/components/searchbar/searchbar.wp.scss
View File

@ -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;
}

5
src/components/slides/slides.scss
View File

@ -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: "";

5
src/components/toolbar/toolbar.md.scss
View File

@ -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,

25
src/themes/ionic.mixins.scss
View File

@ -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;
}
}
}