Merge remote-tracking branch 'origin/css-refactor' into css-refactor

ionic/components/action-sheet/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../action-sheet";
 
 // iOS Action Sheet
 // --------------------------------------------------

ionic/components/action-sheet/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../action-sheet";
 
 // Material Design Action Sheet
 // --------------------------------------------------

ionic/components/button/modes/ios.scss

@@ -1,4 +1,13 @@
 @import "../../../ionic.globals";
+@import "../button";
+@import "../button-clear";
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-outline";
+@import "../button-size";
+
+// iOS Button (largely the core button styles)
+// --------------------------------------------------
 
 button {
   &[block] {

ionic/components/button/modes/md.scss

@@ -1,4 +1,10 @@
 @import "../../../ionic.globals";
+@import "../button";
+@import "../button-clear";
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-outline";
+@import "../button-size";
 
 // Material Design Button
 // --------------------------------------------------
@@ -19,6 +25,7 @@ $button-md-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
+
 button,
 [button] {
   border-radius: $button-md-border-radius;

ionic/components/card/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../card";
 
 // iOS Card
 // --------------------------------------------------

ionic/components/card/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../card";
 
 // Material Design Card
 // --------------------------------------------------

ionic/components/checkbox/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../checkbox";
 
 // iOS Checkbox Structure
 // --------------------------------------------------

ionic/components/checkbox/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../checkbox";
 
 // Material Design Checkbox
 // --------------------------------------------------

ionic/components/icon/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../icon";
 
 // iOS Icon
 // --------------------------------------------------

ionic/components/item/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../item";
 
 // iOS Item
 // --------------------------------------------------

ionic/components/item/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../item";
 
 // Material Design Item
 // --------------------------------------------------

ionic/components/list/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../list";
 
 // iOS List
 // --------------------------------------------------

ionic/components/list/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../list";
 
 // Material Design List
 // --------------------------------------------------

ionic/components/menu/menu-types.scss

@@ -1,50 +0,0 @@
-@import "../../ionic.globals";
-
-// Menu Reveal
-// --------------------------------------------------
-// The content slides over to reveal the menu underneath.
-// The menu itself, which is under the content, does not move.
-
-ion-menu[type=reveal].show-menu {
-  transform: translate3d(0px, 0px, 0px);
-}
-
-.menu-content-reveal {
-  box-shadow: $menu-shadow;
-}
-
-.menu-content-push {
-  box-shadow: $menu-shadow;
-}
-
-
-// Menu Overlay
-// --------------------------------------------------
-// The menu slides over the content. The content
-// itself, which is under the menu, does not move.
-
-ion-menu[type=overlay] {
-  z-index: $z-index-menu-overlay;
-  box-shadow: $menu-shadow;
-  left: -8px; // make up for the box-shadow hanging over on the left
-
-  backdrop {
-    display: block;
-    transform: translate3d(-9999px, 0px, 0px);
-    opacity: 0.01;
-    left: -3000px;
-    width: 6000px;
-
-    &.show-backdrop {
-      transform: translate3d(0px, 0px, 0px);
-    }
-  }
-}
-
-ion-menu[type=overlay][side=right] {
-  left: 8px;
-}
-
-ion-menu[type=push][side=right] {
-  left: 0px;
-}

ionic/components/menu/menu.scss

@@ -57,3 +57,53 @@ ion-menu backdrop {
   }
 
 }
+
+
+// Menu Reveal
+// --------------------------------------------------
+// The content slides over to reveal the menu underneath.
+// The menu itself, which is under the content, does not move.
+
+ion-menu[type=reveal].show-menu {
+  transform: translate3d(0px, 0px, 0px);
+}
+
+.menu-content-reveal {
+  box-shadow: $menu-shadow;
+}
+
+.menu-content-push {
+  box-shadow: $menu-shadow;
+}
+
+
+// Menu Overlay
+// --------------------------------------------------
+// The menu slides over the content. The content
+// itself, which is under the menu, does not move.
+
+ion-menu[type=overlay] {
+  z-index: $z-index-menu-overlay;
+  box-shadow: $menu-shadow;
+  left: -8px; // make up for the box-shadow hanging over on the left
+
+  backdrop {
+    display: block;
+    transform: translate3d(-9999px, 0px, 0px);
+    opacity: 0.01;
+    left: -3000px;
+    width: 6000px;
+
+    &.show-backdrop {
+      transform: translate3d(0px, 0px, 0px);
+    }
+  }
+}
+
+ion-menu[type=overlay][side=right] {
+  left: 8px;
+}
+
+ion-menu[type=push][side=right] {
+  left: 0px;
+}

ionic/components/navbar/modes/ios.scss

@@ -1,15 +0,0 @@
-@import "../../../ionic.globals";
-
-// iOS Navbar
-// --------------------------------------------------
-
-$navbar-ios-height:                        4.4rem !default;
-
-
-ion-navbar-section {
-  min-height: $navbar-ios-height;
-}
-
-.back-button {
-  transform: translateZ(0px);
-}

ionic/components/navbar/modes/md.scss

@@ -1,24 +0,0 @@
-@import "../../../ionic.globals";
-
-// Material Design Navbar
-// --------------------------------------------------
-
-$navbar-md-height:                  5.6rem !default;
-
-
-ion-navbar-section {
-  min-height: $navbar-md-height;
-}
-
-.toolbar .back-button {
-  margin: 0 0 0 12px;
-  box-shadow: none;
-}
-
-.toolbar .back-button-icon {
-  margin: 0;
-  min-width: 44px;
-  font-size: 2.4rem;
-  font-weight: normal;
-  text-align: left;
-}

ionic/components/navbar/navbar.scss

@@ -1,23 +0,0 @@
-@import "../../ionic.globals";
-
-// Navbar
-// --------------------------------------------------
-
-
-ion-navbar.toolbar {
-  display: flex;
-}
-
-.back-button {
-  order: map-get($toolbar-order, backButton);
-
-  display: none;
-  &.show-back-button {
-    display: flex;
-  }
-}
-
-.back-button-text {
-  display: flex;
-  align-items: center;
-}

ionic/components/popup/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../popup";
 
 // iOS Popups
 // --------------------------------------------------

ionic/components/popup/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../popup";
 
 // Material Design Popups
 // --------------------------------------------------

ionic/components/radio/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../radio";
 
 // iOS Radio
 // --------------------------------------------------

ionic/components/radio/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../radio";
 
 // Material Design Radio
 // --------------------------------------------------

ionic/components/searchbar/modes/ios.scss

@@ -1,6 +1,7 @@
 @import "../../../ionic.globals";
+@import "../searchbar";
 
-// iOS Search Bar
+// iOS Searchbar
 // --------------------------------------------------
 
 $searchbar-ios-padding-top-bottom:       0 !default;

ionic/components/searchbar/modes/md.scss

@@ -1,6 +1,7 @@
 @import "../../../ionic.globals";
+@import "../searchbar";
 
-// Material Design Search Bar
+// Material Design Searchbar
 // --------------------------------------------------
 
 $searchbar-md-padding:                  8px !default;

ionic/components/segment/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../segment";
 
 // iOS Segment
 // --------------------------------------------------
@@ -8,6 +9,7 @@ $segment-button-ios-min-height:               3.0rem !default;
 $segment-button-ios-line-height:              3.0rem !default;
 $segment-button-ios-bg-color:                 transparent !default;
 $segment-button-ios-font-size:                1.3rem !default;
+$segment-button-ios-border-radius:            4px !default;
 
 $segment-button-ios-bg-color-activated:       color(primary) !default;
 $segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
@@ -49,17 +51,17 @@ ion-segment {
     }
 
     &:first-of-type {
-      border-radius: $button-border-radius 0px 0px $button-border-radius;
+      border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
       margin-right: 0;
     }
 
     &:not(:first-of-type) {
-      border-left-width: 0px;
+      border-left-width: 0;
     }
 
     &:last-of-type {
-      border-left-width: 0px;
+      border-left-width: 0;
-      border-radius: 0px $button-border-radius $button-border-radius 0px;
+      border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
       margin-left: 0;
     }
   }

ionic/components/segment/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../segment";
 
 // iOS Segment
 // --------------------------------------------------

ionic/components/switch/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../switch";
 
 // iOS Switch
 // --------------------------------------------------

ionic/components/switch/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../switch";
 
 // Material Design Switch
 // --------------------------------------------------

ionic/components/tabs/modes/ios.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../tabs";
 
 // iOS Tabs
 // --------------------------------------------------

ionic/components/tabs/modes/md.scss

@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../tabs";
 
 // Material Design Tabs
 // --------------------------------------------------

ionic/components/text-input/modes/ios.scss

@@ -1,4 +1,6 @@
 @import "../../../ionic.globals";
+@import "../label";
+@import "../text-input";
 
 // iOS Text Input
 // --------------------------------------------------

ionic/components/text-input/modes/md.scss

@@ -1,4 +1,6 @@
 @import "../../../ionic.globals";
+@import "../label";
+@import "../text-input";
 
 // Material Design Text Input
 // --------------------------------------------------

ionic/components/toolbar/modes/ios.scss

@@ -109,3 +109,18 @@ ion-nav-items[secondary] {
 &.hairlines .toolbar toolbar-background {
   border-bottom-width: 0.55px;
 }
+
+
+// iOS Navbar
+// --------------------------------------------------
+
+$navbar-ios-height:                        4.4rem !default;
+
+
+ion-navbar-section {
+  min-height: $navbar-ios-height;
+}
+
+.back-button {
+  transform: translateZ(0px);
+}

ionic/components/toolbar/modes/md.scss

@@ -62,3 +62,27 @@ ion-title {
 ion-nav-items[primary] button:first-child {
   margin-left: 0;
 }
+
+
+// Material Design Navbar
+// --------------------------------------------------
+
+$navbar-md-height:                  5.6rem !default;
+
+
+ion-navbar-section {
+  min-height: $navbar-md-height;
+}
+
+.toolbar .back-button {
+  margin: 0 0 0 12px;
+  box-shadow: none;
+}
+
+.toolbar .back-button-icon {
+  margin: 0;
+  min-width: 44px;
+  font-size: 2.4rem;
+  font-weight: normal;
+  text-align: left;
+}

ionic/components/toolbar/toolbar.scss

@@ -130,6 +130,28 @@ ion-nav-items,
   z-index: 99;
 }
 
+// Navbar
+// --------------------------------------------------
+
+ion-navbar.toolbar {
+  display: flex;
+}
+
+.back-button {
+  order: map-get($toolbar-order, backButton);
+
+  display: none;
+  &.show-back-button {
+    display: flex;
+  }
+}
+
+.back-button-text {
+  display: flex;
+  align-items: center;
+}
+
+
 
 // Toolbar Color Generation
 // --------------------------------------------------

ionic/ionic.core.scss

@@ -9,39 +9,12 @@
 
 // Core Components
 @import
-  "components/toolbar/toolbar",
-  "components/action-sheet/action-sheet",
-  "components/badge/badge",
-  "components/button/button_OLD",
-  "components/button/button-clear_OLD",
-  "components/button/button-outline_OLD",
-  "components/button/button-size_OLD",
-  "components/button/button-icon_OLD",
-  "components/button/button-fab_OLD",
-  "components/checkbox/checkbox",
-  "components/icon/icon",
-  "components/item/item",
-  "components/item/item-media",
-  "components/item/item-sliding",
   "components/grid/grid",
-  "components/text-input/text-input",
+  "components/icon/icon",
-  "components/text-input/label",
-  "components/list/list",
-  "components/card/card",
   "components/menu/menu",
-  "components/menu/menu-types",
   "components/modal/modal",
-  "components/navbar/navbar",
-  "components/popup/popup",
-  "components/slides/slides",
-  "components/radio/radio",
   "components/scroll/scroll",
-  "components/scroll/pull-to-refresh",
+  "components/slides/slides";
-  "components/scroll/scroll",
-  "components/searchbar/searchbar",
-  "components/segment/segment",
-  "components/switch/switch",
-  "components/tabs/tabs";
 
 
 // Ionicons

ionic/ionic.ios_OLD.scss

@@ -1,23 +0,0 @@
-/*! Ionic: iOS */
-
-
-// iOS Components
-@import
-  "components/app/modes/ios",
-  "components/button/modes/ios",
-  "components/icon/modes/ios",
-  "components/item/modes/ios",
-  "components/toolbar/modes/ios",
-  "components/card/modes/ios",
-  "components/content/modes/ios",
-  "components/list/modes/ios",
-  "components/text-input/modes/ios",
-  "components/navbar/modes/ios",
-  "components/popup/modes/ios",
-  "components/checkbox/modes/ios",
-  "components/radio/modes/ios",
-  "components/searchbar/modes/ios",
-  "components/segment/modes/ios",
-  "components/switch/modes/ios",
-  "components/tabs/modes/ios",
-  "platform/cordova-ios";

ionic/ionic.md.scss

@@ -8,4 +8,5 @@
 
 // Material Design Components
 @import
-  "components/action-sheet/modes/md";
+  "components/action-sheet/modes/md",
+  "components/tap-click/ripple";

ionic/ionic.md_OLD.scss

@@ -1,22 +0,0 @@
-/*! Ionic: Material Design */
-
-
-// Material Design Components
-@import
-  "components/app/modes/md",
-  "components/toolbar/modes/md",
-  "components/button/modes/md",
-  "components/content/modes/md",
-  "components/item/modes/md",
-  "components/list/modes/md",
-  "components/card/modes/md",
-  "components/checkbox/modes/md",
-  "components/text-input/modes/md",
-  "components/navbar/modes/md",
-  "components/popup/modes/md",
-  "components/radio/modes/md",
-  "components/searchbar/modes/md",
-  "components/segment/modes/md",
-  "components/switch/modes/md",
-  "components/tabs/modes/md",
-  "components/tap-click/ripple";

ionic/ionic.scss

@@ -3,25 +3,3 @@
 
 // Core Components
 @import "ionic.core";
-
-
-// iOS Components
-.ios {
-  @import "ionic.ios_OLD";
-}
-
-
-// Material Design Components
-.md {
-  @import "ionic.md_OLD";
-}
-
-
-// Roboto Font
-$roboto: true !default;
-@if ($roboto) {
-  @import "fonts/roboto";
-  .md {
-    font-family: "Roboto", "Helvetica Neue", sans-serif;
-  }
-}