From 08b66b0cdc7f62c37e9a22f2f70230c6c56e4afe Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 6 Dec 2017 14:29:30 -0500
Subject: [PATCH] fix(reorder): add reorder class and fix sass linting

---
 .../reorder-group/reorder-group.scss          | 31 +++++++++++--------
 .../core/src/components/reorder/reorder.tsx   |  5 ++-
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/reorder-group/reorder-group.scss b/packages/core/src/components/reorder-group/reorder-group.scss
index f1ce8dae84..55f8ad6597 100644
--- a/packages/core/src/components/reorder-group/reorder-group.scss
+++ b/packages/core/src/components/reorder-group/reorder-group.scss
@@ -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));
 }
diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx
index ba886093b6..1d1ea2fa0b 100644
--- a/packages/core/src/components/reorder/reorder.tsx
+++ b/packages/core/src/components/reorder/reorder.tsx
@@ -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;