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

fix(reorder): add reorder class and fix sass linting

Browse Source
This commit is contained in:
Brandy Carney
2017-12-06 14:29:30 -05:00
parent 926eff8a69
commit 08b66b0cdc
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/core/src/components/reorder-group/reorder-group.scss
View File

@ -3,7 +3,7 @@
// Reorder Group
// --------------------------------------------------
ion-reorder-group > ion-gesture {
.reorder-group > ion-gesture {
display: block;
}
@ -19,23 +19,25 @@ ion-reorder-group > ion-gesture {
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
opacity: .8;
// TODO remove !important
transition: none !important;
}
ion-reorder.no-hide {
.reorder.no-hide {
display: block;
visibility: normal;
}
ion-reorder:not(.no-hide) {
.reorder:not(.no-hide) {
display: none;
pointer-events: all !important;
pointer-events: all;
touch-action: manipulation;
}
.reorder-enabled ion-reorder {
.reorder-enabled .reorder {
display: block;
cursor: grab;
@ -43,22 +45,25 @@ ion-reorder:not(.no-hide) {
}
.reorder-selected,
.reorder-selected ion-reorder {
.reorder-selected .reorder {
cursor: grabbing;
cursor: -webkit-grabbing;
}
ion-reorder[slot] {
line-height: 0;
.reorder[slot] {
@include margin(auto, null);
margin-top: auto !important;
margin-bottom: auto !important;
line-height: 0;
}
ion-reorder[slot="start"] {
.reorder[slot="start"] {
order: -1;
}
.reorder ion-icon svg {
min-width: 1em;
}
.reorder-icon {
@include transform(translate3d($reorder-initial-transform, 0, 0));
@ -71,10 +76,10 @@ ion-reorder[slot="start"] {
opacity: .3;
}
ion-reorder[slot="start"] .reorder-icon {
.reorder[slot="start"] .reorder-icon {
@include transform(translate3d(-$reorder-initial-transform, 0, 0));
}
.reorder-visible ion-reorder .reorder-icon {
.reorder-visible .reorder .reorder-icon {
@include transform(translate3d(0, 0, 0));
}

5
packages/core/src/components/reorder/reorder.tsx
View File

@ -3,8 +3,11 @@ import { Component, Element, State } from '@stencil/core';
@Component({
tag: 'ion-reorder',
host: {
theme: 'reorder'
}
})
export class ItemReorder {
export class Reorder {
@State() hasContent: boolean = null;
@Element() private el: HTMLElement;