diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss index d809680ee2..d82136fd4c 100644 --- a/ionic/components/action-sheet/modes/ios.scss +++ b/ionic/components/action-sheet/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../action-sheet"; // iOS Action Sheet // -------------------------------------------------- diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss index 935ffb2009..d14e9d4e3b 100644 --- a/ionic/components/action-sheet/modes/md.scss +++ b/ionic/components/action-sheet/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../action-sheet"; // Material Design Action Sheet // -------------------------------------------------- diff --git a/ionic/components/button/button-clear_OLD.scss b/ionic/components/button/button-clear.scss similarity index 100% rename from ionic/components/button/button-clear_OLD.scss rename to ionic/components/button/button-clear.scss diff --git a/ionic/components/button/button-fab_OLD.scss b/ionic/components/button/button-fab.scss similarity index 100% rename from ionic/components/button/button-fab_OLD.scss rename to ionic/components/button/button-fab.scss diff --git a/ionic/components/button/button-icon_OLD.scss b/ionic/components/button/button-icon.scss similarity index 100% rename from ionic/components/button/button-icon_OLD.scss rename to ionic/components/button/button-icon.scss diff --git a/ionic/components/button/button-outline_OLD.scss b/ionic/components/button/button-outline.scss similarity index 100% rename from ionic/components/button/button-outline_OLD.scss rename to ionic/components/button/button-outline.scss diff --git a/ionic/components/button/button-size_OLD.scss b/ionic/components/button/button-size.scss similarity index 100% rename from ionic/components/button/button-size_OLD.scss rename to ionic/components/button/button-size.scss diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss index b8a5f1c3d4..962fd008f5 100644 --- a/ionic/components/button/modes/ios.scss +++ b/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] { diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index a519d05bc5..28bef83dc6 100644 --- a/ionic/components/button/modes/md.scss +++ b/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; diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 4b81564b87..7e395a9a85 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../card"; // iOS Card // -------------------------------------------------- diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss index 9a28e1eef6..5b2c07324e 100644 --- a/ionic/components/card/modes/md.scss +++ b/ionic/components/card/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../card"; // Material Design Card // -------------------------------------------------- diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss index a0d45a1a9f..e02c675d24 100644 --- a/ionic/components/checkbox/modes/ios.scss +++ b/ionic/components/checkbox/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../checkbox"; // iOS Checkbox Structure // -------------------------------------------------- diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss index 41ea66feb3..5b2696e864 100644 --- a/ionic/components/checkbox/modes/md.scss +++ b/ionic/components/checkbox/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../checkbox"; // Material Design Checkbox // -------------------------------------------------- diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss index 32447b95a8..1603ea117e 100644 --- a/ionic/components/icon/modes/ios.scss +++ b/ionic/components/icon/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../icon"; // iOS Icon // -------------------------------------------------- diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index bc3ca3d54c..8ff1df159c 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../item"; // iOS Item // -------------------------------------------------- diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 425f278248..01deb4125b 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../item"; // Material Design Item // -------------------------------------------------- diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index 3a00901946..3b6fb4f8ab 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../list"; // iOS List // -------------------------------------------------- diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index 174ad3b1b1..3b8155dc3e 100644 --- a/ionic/components/list/modes/md.scss +++ b/ionic/components/list/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../list"; // Material Design List // -------------------------------------------------- diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss deleted file mode 100644 index ca9dab6504..0000000000 --- a/ionic/components/menu/menu-types.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss index acf4948532..d213016271 100644 --- a/ionic/components/menu/menu.scss +++ b/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; +} diff --git a/ionic/components/navbar/modes/ios.scss b/ionic/components/navbar/modes/ios.scss deleted file mode 100644 index 4a7fe89e62..0000000000 --- a/ionic/components/navbar/modes/ios.scss +++ /dev/null @@ -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); -} diff --git a/ionic/components/navbar/modes/md.scss b/ionic/components/navbar/modes/md.scss deleted file mode 100644 index a89b786858..0000000000 --- a/ionic/components/navbar/modes/md.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/navbar/navbar.scss b/ionic/components/navbar/navbar.scss deleted file mode 100644 index 07bd13bc53..0000000000 --- a/ionic/components/navbar/navbar.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss index 1d5dc5a112..3a3fc47773 100644 --- a/ionic/components/popup/modes/ios.scss +++ b/ionic/components/popup/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../popup"; // iOS Popups // -------------------------------------------------- diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss index 3fe71e26fc..73db6d7187 100644 --- a/ionic/components/popup/modes/md.scss +++ b/ionic/components/popup/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../popup"; // Material Design Popups // -------------------------------------------------- diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss index 8ac6c73e1a..d13460e8ea 100644 --- a/ionic/components/radio/modes/ios.scss +++ b/ionic/components/radio/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../radio"; // iOS Radio // -------------------------------------------------- diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss index 6da6f46c97..c6e301d2ff 100644 --- a/ionic/components/radio/modes/md.scss +++ b/ionic/components/radio/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../radio"; // Material Design Radio // -------------------------------------------------- diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss index ff2a013db6..a9f3ec8467 100644 --- a/ionic/components/searchbar/modes/ios.scss +++ b/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; diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss index c897b70091..201d17706c 100644 --- a/ionic/components/searchbar/modes/md.scss +++ b/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; diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss index e455aac04d..333a04d118 100644 --- a/ionic/components/segment/modes/ios.scss +++ b/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-radius: 0px $button-border-radius $button-border-radius 0px; + border-left-width: 0; + border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0; margin-left: 0; } } diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss index 958a3b041d..80a6931d7a 100644 --- a/ionic/components/segment/modes/md.scss +++ b/ionic/components/segment/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../segment"; // iOS Segment // -------------------------------------------------- diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss index 2a504d56f1..9c1005049b 100644 --- a/ionic/components/switch/modes/ios.scss +++ b/ionic/components/switch/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../switch"; // iOS Switch // -------------------------------------------------- diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss index 0d500ae0aa..6689b22e4a 100644 --- a/ionic/components/switch/modes/md.scss +++ b/ionic/components/switch/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../switch"; // Material Design Switch // -------------------------------------------------- diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss index b4613ec8d0..1c08e2eeed 100644 --- a/ionic/components/tabs/modes/ios.scss +++ b/ionic/components/tabs/modes/ios.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../tabs"; // iOS Tabs // -------------------------------------------------- diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss index 2c020760fa..790b2e55e8 100644 --- a/ionic/components/tabs/modes/md.scss +++ b/ionic/components/tabs/modes/md.scss @@ -1,4 +1,5 @@ @import "../../../ionic.globals"; +@import "../tabs"; // Material Design Tabs // -------------------------------------------------- diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss index a9b1ad727c..b6ef39cfe5 100644 --- a/ionic/components/text-input/modes/ios.scss +++ b/ionic/components/text-input/modes/ios.scss @@ -1,4 +1,6 @@ @import "../../../ionic.globals"; +@import "../label"; +@import "../text-input"; // iOS Text Input // -------------------------------------------------- diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss index 193e78fa60..ee210862e1 100644 --- a/ionic/components/text-input/modes/md.scss +++ b/ionic/components/text-input/modes/md.scss @@ -1,4 +1,6 @@ @import "../../../ionic.globals"; +@import "../label"; +@import "../text-input"; // Material Design Text Input // -------------------------------------------------- diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index 83da7c6293..96b46ca775 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/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); +} diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss index 7568c17a5f..418118debf 100644 --- a/ionic/components/toolbar/modes/md.scss +++ b/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; +} diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index d83b7d2c11..6c090b272d 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/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 // -------------------------------------------------- diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 440938a695..57b01359dc 100644 --- a/ionic/ionic.core.scss +++ b/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/text-input/label", - "components/list/list", - "components/card/card", + "components/icon/icon", "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/scroll/scroll", - "components/searchbar/searchbar", - "components/segment/segment", - "components/switch/switch", - "components/tabs/tabs"; + "components/slides/slides"; // Ionicons diff --git a/ionic/ionic.ios_OLD.scss b/ionic/ionic.ios_OLD.scss deleted file mode 100644 index 862310d0d4..0000000000 --- a/ionic/ionic.ios_OLD.scss +++ /dev/null @@ -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"; diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss index c20ede7a79..753235b7fc 100644 --- a/ionic/ionic.md.scss +++ b/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"; diff --git a/ionic/ionic.md_OLD.scss b/ionic/ionic.md_OLD.scss deleted file mode 100644 index 1c52d2f105..0000000000 --- a/ionic/ionic.md_OLD.scss +++ /dev/null @@ -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"; diff --git a/ionic/ionic.scss b/ionic/ionic.scss index 858799a586..9040d58ec7 100755 --- a/ionic/ionic.scss +++ b/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; - } -}