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

refactor(reorder): move reorder styles to separate file

Browse Source
This commit is contained in:
Brandy Carney
2017-12-07 12:58:54 -05:00
parent 26918e097f
commit a812ee8854
5 changed files with 91 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,78 +12,3 @@
will-change: transform;
}
.reorder-selected {
position: relative;
z-index: $z-index-reorder-selected;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
opacity: .8;
// TODO remove !important
transition: none !important;
}
.reorder.no-hide {
display: block;
visibility: normal;
}
.reorder:not(.no-hide) {
display: none;
pointer-events: all;
touch-action: manipulation;
}
.reorder-enabled .reorder {
display: block;
cursor: grab;
cursor: -webkit-grab;
}
.reorder-selected,
.reorder-selected .reorder {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.reorder[slot] {
@include margin(auto, null);
line-height: 0;
}
.reorder[slot="start"] {
order: -1;
}
.reorder ion-icon svg {
min-width: 1em;
}
.reorder-icon {
@include transform(translate3d($reorder-initial-transform, 0, 0));
display: block;
font-size: 1.3em;
transition: transform 140ms ease-in;
}
.item-ios .reorder-icon {
font-size: 2em;
fill: currentColor;
opacity: .4;
}
.reorder[slot="start"] .reorder-icon {
@include transform(translate3d(-$reorder-initial-transform, 0, 0));
}
.reorder-visible .reorder .reorder-icon {
@include transform(translate3d(0, 0, 0));
}

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

@ -2,5 +2,3 @@
// Reorder Group
// --------------------------------------------------
$reorder-initial-transform: 160% !default;

83
packages/core/src/components/reorder/reorder.scss Normal file
View File

@ -0,0 +1,83 @@
@import "./reorder.vars";
// Reorder
// --------------------------------------------------
.reorder[slot] {
@include margin(auto, null);
line-height: 0;
}
.reorder[slot="start"] {
order: -1;
}
.reorder.no-hide {
display: block;
visibility: normal;
}
.reorder:not(.no-hide) {
display: none;
pointer-events: all;
touch-action: manipulation;
}
.reorder-enabled .reorder {
display: block;
cursor: grab;
cursor: -webkit-grab;
}
.reorder-selected,
.reorder-selected .reorder {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.reorder-selected {
position: relative;
z-index: $z-index-reorder-selected;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
opacity: .8;
// TODO remove !important
transition: none !important;
}
// Reorder Icon
// --------------------------------------------------
.reorder-icon {
@include transform(translate3d($reorder-initial-transform, 0, 0));
display: block;
font-size: 1.3em;
transition: transform 140ms ease-in;
}
.reorder-icon svg {
min-width: 1em;
}
.item-ios .reorder-icon {
font-size: 2em;
fill: currentColor;
opacity: .4;
}
.reorder[slot="start"] .reorder-icon {
@include transform(translate3d(-$reorder-initial-transform, 0, 0));
}
.reorder-visible .reorder .reorder-icon {
@include transform(translate3d(0, 0, 0));
}

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

@ -3,6 +3,7 @@ import { Component, Element, State } from '@stencil/core';
@Component({
tag: 'ion-reorder',
styleUrl: 'reorder.scss',
host: {
theme: 'reorder'
}

7
packages/core/src/components/reorder/reorder.vars.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../../themes/ionic.globals";
// Reorder
// --------------------------------------------------
/// @prop - Transform of the reorder when it isn't visible
$reorder-initial-transform: 160% !default;