refactor(css): update theme imports

src/components/action-sheet/action-sheet.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Action Sheet
 // --------------------------------------------------

src/components/alert/alert.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Alerts
 // --------------------------------------------------
@@ -22,10 +22,10 @@ ion-alert {
 
   align-items: center;
   justify-content: center;
+}
 
-  input {
+ion-alert input {
   width: 100%;
-  }
 }
 
 .alert-wrapper {
@@ -71,11 +71,11 @@ ion-alert {
   display: flex;
 
   flex-direction: row;
+}
 
-  &.vertical {
+.alert-button-group-vertical {
   flex-direction: column;
   flex-wrap: nowrap;
-  }
 }
 
 .alert-button {

src/components/backdrop/backdrop.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Backdrop
 // --------------------------------------------------

src/components/badge/badge.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Badge
 // --------------------------------------------------
@@ -24,8 +24,8 @@ ion-badge {
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-
+}
-  &:empty {
+
-    display: none;
+ion-badge:empty {
-  }
+  display: none;
 }

src/components/button/button-fab.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Floating Action Buttons
 // --------------------------------------------------
@@ -11,15 +11,18 @@ $button-fab-size:           56px !default;
   position: absolute;
   overflow: hidden;
 
+  line-height: $button-fab-size;
+  vertical-align: middle;
+
+  background-clip: padding-box;
+}
+
+.button-fab.button {
   width: $button-fab-size;
   min-width: 0;
   height: $button-fab-size;
 
   font-size: 14px;
-  line-height: $button-fab-size;
-  vertical-align: middle;
-
-  background-clip: padding-box;
 }
 
 .button-fab ion-icon {
@@ -28,28 +31,28 @@ $button-fab-size:           56px !default;
   font-size: 2.8rem;
 }
 
-[fab-center] {
+.button-fab[fab-center] {
   left: 50%;
 
   margin-left: -$button-fab-size / 2;
 }
 
-[fab-top] {
+.button-fab[fab-top] {
   top: 16px;
 }
 
-[fab-right] {
+.button-fab[fab-right] {
   right: 16px;
 }
 
-[fab-bottom] {
+.button-fab[fab-bottom] {
   bottom: 16px;
 }
 
-[fab-left] {
+.button-fab[fab-left] {
   left: 16px;
 }
 
-[fab-fixed] {
+.button-fab[fab-fixed] {
   position: fixed;
 }

src/components/button/button-icon.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Button Icons
 // --------------------------------------------------
@@ -23,7 +23,7 @@
   padding-left: .4em;
 }
 
-[icon-only] {
+.button[icon-only] {
   padding: 0;
 
   min-width: .9em;

src/components/button/button.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Buttons
 // --------------------------------------------------
@@ -11,7 +11,6 @@ $button-round-border-radius:      64px !default;
 
 
 .button {
-  @include user-select-none();
   @include appearance(none);
 
   position: relative;
@@ -31,6 +30,7 @@ $button-round-border-radius:      64px !default;
   transition: background-color, opacity 100ms linear;
 
   font-kerning: none;
+  user-select: none;
 }
 
 .button-inner {
@@ -68,10 +68,10 @@ button[disabled],
   clear: both;
 
   width: 100%;
+}
 
-  &::after {
+.button-block::after {
   clear: both;
-  }
 }
 
 

src/components/card/card.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Card
 // --------------------------------------------------

src/components/chip/chip.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Chip
 // --------------------------------------------------
@@ -37,34 +37,37 @@ ion-chip {
   vertical-align: middle;
 
   box-sizing: border-box;
+}
 
-  .button {
+ion-chip .button {
   margin: $chip-button-margin;
 
   width: $chip-button-size;
   height: $chip-button-size;
 
   border-radius: $chip-button-border-radius;
-  }
+}
 
-  ion-icon {
+ion-chip ion-icon {
   width: $chip-icon-size;
   height: $chip-icon-size;
 
   border-radius: $chip-icon-border-radius;
+
   font-size: $chip-icon-font-size;
   line-height: $chip-icon-size;
-  }
+}
 
-  ion-avatar {
+ion-chip ion-avatar {
   width: $chip-avatar-size;
   min-width: $chip-avatar-size;
   height: $chip-avatar-size;
   min-height: $chip-avatar-size;
 
   border-radius: $chip-avatar-border-radius;
+}
 
-    img {
+ion-chip ion-avatar img {
   display: block;
 
   width: 100%;
@@ -73,6 +76,4 @@ ion-chip {
   max-height: 100%;
 
   border-radius: $chip-avatar-border-radius;
-    }
-  }
 }

src/components/content/content.scss

@@ -1,51 +1,104 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Content
 // --------------------------------------------------
 
+ion-content {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+
+  width: 100%;
+  height: 100%;
+}
+
+.ion-page > ion-content {
+  position: absolute;
+}
+
+a {
+  color: $link-color;
+}
+
+
+// Scrollable Content
+// --------------------------------------------------
+
+.scroll-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-scroll-content;
+  display: block;
+
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+}
+
+ion-content.js-scroll > .scroll-content {
+  position: relative;
+
+  min-height: 100%;
+
+  overflow-x: initial;
+  overflow-y: initial;
+  -webkit-overflow-scrolling: auto;
+  will-change: initial;
+}
+
+.disable-scroll .ion-page .scroll-content {
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
 
 // Content Padding
 // --------------------------------------------------
 
 [no-padding],
-[no-padding] scroll-content {
+[no-padding] .scroll-content {
   padding: 0;
 }
 
 @mixin content-padding($content-padding) {
   [padding],
-  [padding] scroll-content {
+  [padding] .scroll-content {
     padding: $content-padding;
   }
 
   [padding-top],
-  [padding-top] scroll-content {
+  [padding-top] .scroll-content {
     padding-top: $content-padding;
   }
 
   [padding-left],
-  [padding-left] scroll-content {
+  [padding-left] .scroll-content {
     padding-left: $content-padding;
   }
 
   [padding-right],
-  [padding-right] scroll-content {
+  [padding-right] .scroll-content {
     padding-right: $content-padding;
   }
 
   [padding-bottom],
-  [padding-bottom] scroll-content {
+  [padding-bottom] .scroll-content {
     padding-bottom: $content-padding;
   }
 
   [padding-vertical],
-  [padding-vertical] scroll-content {
+  [padding-vertical] .scroll-content {
     padding-top: $content-padding;
     padding-bottom: $content-padding;
   }
 
   [padding-horizontal],
-  [padding-horizontal] scroll-content {
+  [padding-horizontal] .scroll-content {
     padding-right: $content-padding;
     padding-left: $content-padding;
   }
@@ -56,44 +109,44 @@
 // --------------------------------------------------
 
 [no-margin],
-[no-margin] scroll-content {
+[no-margin] .scroll-content {
   margin: 0;
 }
 
 @mixin content-margin($content-margin) {
   [margin],
-  [margin] scroll-content {
+  [margin] .scroll-content {
     margin: $content-margin;
   }
 
   [margin-top],
-  [margin-top] scroll-content {
+  [margin-top] .scroll-content {
     margin-top: $content-margin;
   }
 
   [margin-left],
-  [margin-left] scroll-content {
+  [margin-left] .scroll-content {
     margin-left: $content-margin;
   }
 
   [margin-right],
-  [margin-right] scroll-content {
+  [margin-right] .scroll-content {
     margin-right: $content-margin;
   }
 
   [margin-bottom],
-  [margin-bottom] scroll-content {
+  [margin-bottom] .scroll-content {
     margin-bottom: $content-margin;
   }
 
   [margin-vertical],
-  [margin-vertical] scroll-content {
+  [margin-vertical] .scroll-content {
     margin-top: $content-margin;
     margin-bottom: $content-margin;
   }
 
   [margin-horizontal],
-  [margin-horizontal] scroll-content {
+  [margin-horizontal] .scroll-content {
     margin-right: $content-margin;
     margin-left: $content-margin;
   }

src/components/datetime/datetime.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // DateTime
 // --------------------------------------------------

src/components/grid/grid.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Grid
 // --------------------------------------------------

src/components/icon/icon.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Icon
 // --------------------------------------------------

src/components/img/img.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Img
 // --------------------------------------------------

src/components/infinite-scroll/infinite-scroll.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Infinite Scroll
 // --------------------------------------------------

src/components/input/input.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Input/Textarea Wrapper
 // --------------------------------------------------

src/components/item/item-media.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Item Media
 // --------------------------------------------------
@@ -22,18 +22,20 @@
 
   font-size: 2.4rem;
   line-height: 1;
+}
 
-  &[large] {
+.item > ion-icon[large],
+.item-inner > ion-icon[large] {
   min-height: 3.2rem;
 
   font-size: 3.2rem;
-  }
+}
 
-  &[small] {
+.item > ion-icon[small],
+.item-inner > ion-icon[small] {
   min-height: 1.8rem;
 
   font-size: 1.8rem;
-  }
 }
 
 ion-avatar,
@@ -41,10 +43,11 @@ ion-thumbnail {
   display: block;
 
   line-height: 1;
+}
 
-  img {
+ion-avatar img,
+ion-thumbnail img {
   display: block;
-  }
 }
 
 .item-cover {

src/components/item/item-reorder.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Item reorder
 // --------------------------------------------------
@@ -22,10 +22,10 @@ ion-reorder {
 
   pointer-events: all;
   touch-action: manipulation;
+}
 
-  ion-icon {
+ion-reorder ion-icon {
   pointer-events: none;
-  }
 }
 
 .reorder-enabled ion-reorder {
@@ -36,17 +36,15 @@ ion-reorder {
   transform: translate3d(0, 0, 0);
 }
 
-.reorder-list-active {
+.reorder-list-active .item,
-  .item,
+.reorder-list-active .item-wrapper {
-  .item-wrapper {
   transition: transform 300ms;
 
   will-change: transform;
-  }
+}
 
-  .item-inner {
+.reorder-list-active .item-inner {
   pointer-events: none;
-  }
 }
 
 

src/components/item/item-sliding.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Item Sliding
 // --------------------------------------------------
@@ -10,10 +10,10 @@ ion-item-sliding {
   overflow: hidden;
 
   width: 100%;
+}
 
-  .item {
+ion-item-sliding .item {
   position: static;
-  }
 }
 
 ion-item-options {

src/components/item/item.scss

@@ -1,11 +1,21 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Item
 // --------------------------------------------------
 // Core structure only, dimensions belong in specific modes
+//
+// ".item" includes elements:
+//   ion-item
+//   [ion-item]
+//   ion-item-divider
+//   ion-list-header
+//
+// ".item-block" includes elements:
+//   ion-item
+//   [ion-item]
 
 
-.item {
+.item-block {
   display: flex;
   overflow: hidden;
 
@@ -57,7 +67,7 @@
 }
 
 .item[no-lines],
-.item[no-lines] .item-inner {
+.item.item[no-lines] .item-inner {
   border: 0;
 }
 
@@ -79,11 +89,11 @@ ion-item-divider {
   width: 100%;
 
   min-height: 30px;
+}
 
-  &[sticky] {
+ion-item-divider[sticky] {
   position: sticky;
   top: 0;
-  }
 }
 
 [vertical-align-top],
@@ -91,6 +101,3 @@ ion-input.item {
   align-items: flex-start;
 }
 
-@import "item-media";
-@import "item-sliding";
-@import "item-reorder";

src/components/label/label.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Label
 // --------------------------------------------------

src/components/list/list.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // List
 // --------------------------------------------------

src/components/loading/loading.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Loading Indicator
 // --------------------------------------------------

src/components/picker/picker.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Picker
 // --------------------------------------------------
@@ -71,7 +71,6 @@ ion-picker-cmp {
 
   flex: 1;
 
-  min-width: 50px;
   min-width: 45%;
 
   text-align: right;
@@ -83,7 +82,6 @@ ion-picker-cmp {
 
   flex: 1;
 
-  min-width: 50px;
   min-width: 45%;
 
   text-align: left;

src/components/popover/popover.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Popover
 // --------------------------------------------------
@@ -33,8 +33,8 @@ ion-popover {
   overflow: auto;
 
   flex-direction: column;
-
+}
-  scroll-content {
+
-    position: relative;
+.popover-content .scroll-content {
-  }
+  position: relative;
 }

src/components/range/range.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Range
 // --------------------------------------------------
@@ -15,10 +15,10 @@
 
 .item-range ion-range {
   width: 100%;
+}
 
-  ion-label {
+.item-range ion-range ion-label {
   align-self: center;
-  }
 }
 
 ion-range {
@@ -26,17 +26,17 @@ ion-range {
   display: flex;
 
   align-items: center;
+}
 
-  ion-label {
+ion-range ion-label {
   flex: initial;
-  }
+}
 
-  ion-icon {
+ion-range ion-icon {
   min-height: 2.4rem;
 
   font-size: 2.4rem;
   line-height: 1;
-  }
 }
 
 .range-slider {

src/components/refresher/refresher.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Refresher
 // --------------------------------------------------
@@ -29,7 +29,7 @@ ion-refresher {
   }
 }
 
-.has-refresher > scroll-content {
+.has-refresher > .scroll-content {
   // when the refresher is let go or has completed
   // this transition is what is used to put the
   // scroll content back into it's original location

src/components/scroll/scroll.scss

@@ -1,27 +1,26 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 ion-scroll {
   position: relative;
   display: block;
+}
 
-  &.scroll-x scroll-content {
+ion-scroll.scroll-x .scroll-content {
   overflow-x: auto;
-  }
+}
 
-  &.scroll-y scroll-content {
+ion-scroll.scroll-y .scroll-content {
   overflow-y: auto;
-  }
+}
 
-  &[center] {
+ion-scroll[center] .scroll-content {
-    scroll-content {
   display: flex;
 
   align-items: center;
   justify-content: center;
-    }
+}
-  }
 
-  scroll-content {
+ion-scroll .scroll-content {
   position: absolute;
   top: 0;
   right: 0;
@@ -32,6 +31,4 @@ ion-scroll {
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
-  }
-
 }

src/components/searchbar/searchbar.scss

@@ -1,9 +1,8 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Search Bar
 // --------------------------------------------------
 
-
 ion-searchbar {
   position: relative;
   display: flex;

src/components/segment/segment.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Segment
 // --------------------------------------------------

src/components/select/select.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Select
 // --------------------------------------------------

src/components/show-hide-when/show-hide-when.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Show / Hide When
 // --------------------------------------------------

src/components/slides/slides.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 
 /**

src/components/spinner/spinner.scss

@@ -1,5 +1,4 @@
 
-
 // Spinners
 // --------------------------------------------------
 

src/components/toast/toast.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 
 // Toast

src/components/toolbar/toolbar-button.scss

@@ -1,10 +1,9 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Toolbar Buttons
 // --------------------------------------------------
 
 .bar-button {
-  @include user-select-none();
   @include appearance(none);
 
   position: relative;
@@ -23,6 +22,8 @@
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  user-select: none;
 }
 
 .bar-button::after {

src/components/typography/typography.scss

@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Typography
 // --------------------------------------------------

src/components/virtual-scroll/virtual-scroll.scss

@@ -2,7 +2,6 @@
 // Virtual Scroll
 // --------------------------------------------------
 
-
 .virtual-scroll {
   position: relative;
 }