javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-sliding): RTL fix for item sliding (#11825)

Browse Source 
* fix(item-sliding): fix item-sliding RTL

fix a bug that options disappear on RTL

* wrong class

* revert back ts changes

* create scss fixes

* correct order of rule set

* Right is right and left is left

unless we use start or end for rtl and ltr right should be placed right
and so does left.

* using multi-dir and ltr mixins

* Currect order on RTL using ltr and rtl specific mixins

* dupplicate the comment to disable PropertySpelling
This commit is contained in:
Sina
2017-06-10 01:26:41 +04:30
committed by Brandy Carney
parent f4452b5d33
commit 10f4df42d0
1 changed files with 68 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/item/item-sliding.scss
View File

@@ -17,26 +17,53 @@ ion-item-sliding .item {
}
ion-item-options {
@include position(0, 0, null, null);
position: absolute;
z-index: $z-index-item-options;
display: none;
justify-content: flex-end;
height: 100%;
font-size: 14px;
visibility: hidden;
@include multi-dir() {
// scss-lint:disable PropertySpelling
top: 0;
right: 0;
}
@include ltr() {
justify-content: flex-end;
}
@include rtl() {
justify-content: flex-start;
&:not([side=right]) {
justify-content: flex-end;
// scss-lint:disable PropertySpelling
right: auto;
left: 0;
}
}
}
ion-item-options[side=left] {
@include position-horizontal(0, auto);
@include multi-dir() {
// scss-lint:disable PropertySpelling
right: auto;
left: 0;
}
justify-content: flex-start;
@include ltr() {
justify-content: flex-start;
}
@include rtl() {
justify-content: flex-end;
}
}
ion-item-options .button {
@@ -63,6 +90,13 @@ ion-item-options:not([icon-start]) .button:not([icon-only]) {
}
ion-item-sliding.active-slide {
@include rtl() {
&.active-options-left ion-item-options:not([side=right]) {
width: 100%;
visibility: visible;
}
}
.item,
.item.activated {
@@ -101,19 +135,37 @@ button[expandable] {
}
ion-item-sliding.active-swipe-right button[expandable] {
@include padding-horizontal(90%, null);
order: 1;
transition-duration: .6s;
transition-property: padding-left;
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-left: 90%;
}
@include ltr() {
order: 1;
}
@include rtl() {
order: -1;
}
}
ion-item-sliding.active-swipe-left button[expandable] {
@include padding-horizontal(null, 90%);
order: -1;
transition-duration: .6s;
transition-property: padding-right;
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-right: 90%;
}
@include ltr() {
order: -1;
}
@include rtl() {
order: 1;
}
}