fix(item-sliding): separate option styles and remove button dependency

packages/core/src/components/item-option/item-option.ios.scss

@@ -0,0 +1,42 @@
+@import "./item-option";
+@import "./item-option.ios.vars";
+
+// iOS Item Option
+// --------------------------------------------------
+
+.item-option-ios {
+  font-size: $item-option-button-ios-font-size;
+  color: $item-option-button-ios-text-color;
+  background-color: $item-option-button-ios-background-color;
+}
+
+.item-option-ios .icon {
+  fill: $item-option-button-ios-icon-color;
+}
+
+.list-ios .item-options-right ion-item-option:last-child {
+  @include safe-area-padding-horizontal(null, .7em);
+}
+
+.list-ios .item-options-left ion-item-option:first-child {
+  @include safe-area-padding-horizontal(.7em, null);
+}
+
+
+// Generate iOS Option Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  $color-base: ion-color($colors-ios, $color-name, base, ios);
+  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+  $color-shade: ion-color($colors-ios, $color-name, tint, ios);
+
+  .item-option-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .item-option-ios-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+}

packages/core/src/components/item-option/item-option.ios.vars.scss

@@ -0,0 +1,16 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Item Option
+// --------------------------------------------------
+
+/// @prop - Font size of the item option button
+$item-option-button-ios-font-size:          16px !default;
+
+/// @prop - Background color of the item option button
+$item-option-button-ios-background-color:   ion-color($colors-ios, primary, base, ios) !default;
+
+/// @prop - Text color of the item option button
+$item-option-button-ios-text-color:         ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default;
+
+/// @prop - color of the item option button icon
+$item-option-button-ios-icon-color:         ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default;

packages/core/src/components/item-option/item-option.md.scss

@@ -0,0 +1,34 @@
+@import "./item-option";
+@import "./item-option.md.vars";
+
+// Material Design Item Option
+// --------------------------------------------------
+
+.item-option-md {
+  font-size: $item-option-button-md-font-size;
+  color: $item-option-button-md-text-color;
+  background-color: $item-option-button-md-background-color;
+}
+
+.item-option-md .icon {
+  fill: $item-option-button-md-icon-color;
+}
+
+
+// Generate Material Design Option Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  $color-base: ion-color($colors-md, $color-name, base, md);
+  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
+  $color-shade: ion-color($colors-md, $color-name, tint, md);
+
+  .item-option-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .item-option-md-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+}

packages/core/src/components/item-option/item-option.md.vars.scss

@@ -0,0 +1,16 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Item Option
+// --------------------------------------------------
+
+/// @prop - Font size of the sliding option button
+$item-option-button-md-font-size:           14px !default;
+
+/// @prop - Background color of the sliding option button
+$item-option-button-md-background-color:    ion-color($colors-md, primary, base, md) !default;
+
+/// @prop - Text color of the sliding option button
+$item-option-button-md-text-color:          ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default;
+
+/// @prop - color of the sliding option button icon
+$item-option-button-md-icon-color:          ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default;

packages/core/src/components/item-option/item-option.scss

@@ -0,0 +1,93 @@
+@import "./item-option.vars";
+
+// Item Option
+// --------------------------------------------------
+
+ion-item-option {
+  @include padding(0, .7em);
+
+  position: relative;
+  display: flex;
+
+  align-items: center;
+
+  min-width: 60px;
+}
+
+.item-option-button {
+  @include position(0, 0, 0, 0);
+  @include margin(0);
+  @include padding(0);
+  @include border-radius(0);
+
+  position: absolute;
+
+  border: 0;
+  background: none;
+}
+
+ion-item-options:not([icon-start]) ion-item-option:not([icon-only]) {
+  .item-option-button-inner {
+    flex-direction: column;
+  }
+}
+
+.item-option-button-inner {
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
+
+// Item Expandable Animation
+// --------------------------------------------------
+
+ion-item-option[expandable] {
+  flex-shrink: 0;
+
+  transition-duration: 0;
+  transition-property: none;
+  transition-timing-function: cubic-bezier(.65, .05, .36, 1);
+}
+
+ion-item-sliding.active-swipe-right ion-item-option[expandable] {
+  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 ion-item-option[expandable] {
+  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;
+  }
+}

packages/core/src/components/item-option/item-option.tsx

@@ -5,6 +5,10 @@ import { Component, Prop } from '@stencil/core';
   tag: 'ion-item-option',
   host: {
     theme: 'item-option'
+  },
+  styleUrls: {
+    ios: 'item-option.ios.scss',
+    md: 'item-option.md.scss'
   }
 })
 export class ItemOption {
@@ -55,7 +59,7 @@ export class ItemOption {
         disabled={this.disabled}
         href={this.href}
         onClick={this.clickedOptionButton.bind(this)}></TagType>,
-      <span class='button-inner'>
+      <span class='item-option-button-inner'>
         <slot></slot>
       </span>
     ];

packages/core/src/components/item-option/item-option.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals";
+
+// Item Option
+// --------------------------------------------------

packages/core/src/components/item-options/item-options.ios.scss

@@ -0,0 +1,17 @@
+@import "./item-options";
+@import "./item-options.ios.vars";
+
+// iOS Item Options
+// --------------------------------------------------
+
+.list-ios ion-item-options {
+  border-bottom: $hairlines-width solid $item-ios-border-color;
+}
+
+
+// iOS No Lines List
+// --------------------------------------------------
+
+.list-ios[no-lines] ion-item-options {
+  border-width: 0;
+}

packages/core/src/components/item-options/item-options.ios.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Item Options
+// --------------------------------------------------

packages/core/src/components/item-options/item-options.md.scss

@@ -0,0 +1,17 @@
+@import "./item-options";
+@import "./item-options.md.vars";
+
+// Material Design Item Options
+// --------------------------------------------------
+
+.list-md ion-item-options {
+  border-bottom: 1px solid $item-md-border-color;
+}
+
+
+// Material Design No Lines List
+// --------------------------------------------------
+
+.list-md[no-lines] ion-item-options {
+  border-width: 0;
+}

packages/core/src/components/item-options/item-options.md.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Item Options
+// --------------------------------------------------

packages/core/src/components/item-options/item-options.scss

@@ -0,0 +1,75 @@
+@import "./item-options.vars";
+
+// Item Options
+// --------------------------------------------------
+
+ion-item-options {
+  position: absolute;
+  z-index: $z-index-item-options;
+  display: none;
+
+  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]) {
+      // scss-lint:disable PropertySpelling
+      right: auto;
+      left: 0;
+
+      justify-content: flex-end;
+    }
+  }
+}
+
+ion-item-options[side=left] {
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    right: auto;
+    left: 0;
+  }
+
+  @include ltr() {
+    justify-content: flex-start;
+  }
+
+  @include rtl() {
+    justify-content: flex-end;
+  }
+}
+
+ion-item-sliding.active-slide {
+  @include rtl() {
+    &.active-options-left ion-item-options:not([side=right]) {
+      width: 100%;
+
+      visibility: visible;
+     }
+  }
+
+  ion-item-options {
+    display: flex;
+  }
+
+  &.active-options-left ion-item-options[side=left],
+  &.active-options-right ion-item-options:not([side=left]) {
+    width: 100%;
+
+    visibility: visible;
+  }
+}

packages/core/src/components/item-options/item-options.tsx

@@ -3,7 +3,11 @@ import { Side, isRightSide } from '../../utils/helpers';
 
 
 @Component({
-  tag: 'ion-item-options'
+  tag: 'ion-item-options',
+  styleUrls: {
+    ios: 'item-options.ios.scss',
+    md: 'item-options.md.scss'
+  }
 })
 export class ItemOptions {
   @Element() private el: HTMLElement;

packages/core/src/components/item-options/item-options.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals";
+
+// Item Options
+// --------------------------------------------------

packages/core/src/components/item-sliding/item-sliding.ios.scss

@@ -7,53 +7,3 @@
 .list-ios ion-item-sliding {
   background-color: $item-ios-sliding-content-background;
 }
-
-.list-ios ion-item-options {
-  border-bottom: $hairlines-width solid $item-ios-border-color;
-}
-
-.list-ios .item-options-right ion-item-option:last-child {
-  @include safe-area-padding-horizontal(null, .7em);
-}
-
-.list-ios .item-options-left ion-item-option:first-child {
-  @include safe-area-padding-horizontal(.7em, null);
-}
-
-
-.item-option-ios {
-  font-size: $item-ios-sliding-button-font-size;
-  color: $item-ios-sliding-button-text-color;
-  background-color: $item-ios-sliding-button-background-color;
-}
-
-.item-option-ios .icon {
-  fill: $item-ios-sliding-button-icon-color;
-}
-
-
-// iOS No Lines List
-// --------------------------------------------------
-
-.list-ios[no-lines] ion-item-options {
-  border-width: 0;
-}
-
-
-// Generate iOS Option Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-  $color-shade: ion-color($colors-ios, $color-name, tint, ios);
-
-  .item-option-ios-#{$color-name} {
-    color: $color-contrast;
-    background-color: $color-base;
-  }
-
-  .item-option-ios-#{$color-name} .icon {
-    fill: $color-contrast;
-  }
-}

packages/core/src/components/item-sliding/item-sliding.ios.vars.scss

@@ -5,15 +5,3 @@
 
 /// @prop - Background for the sliding content
 $item-ios-sliding-content-background:        $item-ios-background-color !default;
-
-/// @prop - Font size of the sliding option button
-$item-ios-sliding-button-font-size:          16px !default;
-
-/// @prop - Background color of the sliding option button
-$item-ios-sliding-button-background-color:   ion-color($colors-ios, primary, base, ios) !default;
-
-/// @prop - Text color of the sliding option button
-$item-ios-sliding-button-text-color:         ion-color($colors-ios, $item-ios-sliding-button-background-color, contrast, ios) !default;
-
-/// @prop - color of the sliding option button icon
-$item-ios-sliding-button-icon-color:         ion-color($colors-ios, $item-ios-sliding-button-background-color, contrast, ios) !default;

packages/core/src/components/item-sliding/item-sliding.md.scss

@@ -7,43 +7,3 @@
 .list-md ion-item-sliding {
   background-color: $item-md-sliding-content-background;
 }
-
-.list-md ion-item-options {
-  border-bottom: 1px solid $item-md-border-color;
-}
-
-.item-option-md {
-  font-size: $item-md-sliding-button-font-size;
-  color: $item-md-sliding-button-text-color;
-  background-color: $item-md-sliding-button-background-color;
-}
-
-.item-option-md .icon {
-  fill: $item-md-sliding-button-icon-color;
-}
-
-// Material Design No Lines List
-// --------------------------------------------------
-
-.list-md[no-lines] ion-item-options {
-  border-width: 0;
-}
-
-
-// Generate Material Design Option Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
-  $color-shade: ion-color($colors-md, $color-name, tint, md);
-
-  .item-option-md-#{$color-name} {
-    color: $color-contrast;
-    background-color: $color-base;
-  }
-
-  .item-option-md-#{$color-name} .icon {
-    fill: $color-contrast;
-  }
-}

packages/core/src/components/item-sliding/item-sliding.md.vars.scss

@@ -5,15 +5,3 @@
 
 /// @prop - Background for the sliding content
 $item-md-sliding-content-background:         $item-md-background-color !default;
-
-/// @prop - Font size of the sliding option button
-$item-md-sliding-button-font-size:           14px !default;
-
-/// @prop - Background color of the sliding option button
-$item-md-sliding-button-background-color:    ion-color($colors-md, primary, base, md) !default;
-
-/// @prop - Text color of the sliding option button
-$item-md-sliding-button-text-color:          ion-color($colors-md, $item-md-sliding-button-background-color, contrast, md) !default;
-
-/// @prop - color of the sliding option button icon
-$item-md-sliding-button-icon-color:          ion-color($colors-md, $item-md-sliding-button-background-color, contrast, md) !default;

packages/core/src/components/item-sliding/item-sliding.scss

@@ -2,7 +2,6 @@
 
 // Item Sliding
 // --------------------------------------------------
-// The hidden right-side buttons that can be exposed under a list item with dragging.
 
 ion-item-sliding {
   position: relative;
@@ -12,95 +11,7 @@ ion-item-sliding {
   width: 100%;
 }
 
-ion-item-options {
-  position: absolute;
-  z-index: $z-index-item-options;
-  display: none;
-
-  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]) {
-      // scss-lint:disable PropertySpelling
-      right: auto;
-      left: 0;
-
-      justify-content: flex-end;
-    }
-  }
-}
-
-ion-item-options[side=left] {
-  @include multi-dir() {
-    // scss-lint:disable PropertySpelling
-    right: auto;
-    left: 0;
-  }
-
-  @include ltr() {
-    justify-content: flex-start;
-  }
-
-  @include rtl() {
-    justify-content: flex-end;
-  }
-}
-
-
-ion-item-option {
-  @include padding(0, .7em);
-
-  position: relative;
-  display: flex;
-
-  align-items: center;
-
-  min-width: 60px;
-}
-
-.item-option-button {
-  @include position(0, 0, 0, 0);
-  @include margin(0);
-  @include padding(0);
-  @include border-radius(0);
-
-  position: absolute;
-
-  border: 0;
-  background: none;
-}
-
-ion-item-options:not([icon-start]) ion-item-option:not([icon-only]) {
-  .button-inner {
-    flex-direction: column;
-  }
-}
-
 ion-item-sliding.active-slide {
-  @include rtl() {
-    &.active-options-left ion-item-options:not([side=right]) {
-      width: 100%;
-
-      visibility: visible;
-     }
-  }
-
   ion-item,
   ion-item.activated {
     position: relative;
@@ -113,62 +24,4 @@ ion-item-sliding.active-slide {
 
     will-change: transform;
   }
-
-  ion-item-options {
-    display: flex;
-  }
-
-  &.active-options-left ion-item-options[side=left],
-  &.active-options-right ion-item-options:not([side=left]) {
-    width: 100%;
-
-    visibility: visible;
-  }
-}
-
-// Item Expandable Animation
-// --------------------------------------------------
-
-ion-item-option[expandable] {
-  flex-shrink: 0;
-
-  transition-duration: 0;
-  transition-property: none;
-  transition-timing-function: cubic-bezier(.65, .05, .36, 1);
-}
-
-ion-item-sliding.active-swipe-right ion-item-option[expandable] {
-  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 ion-item-option[expandable] {
-  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;
-  }
 }