From 78122c551d9703bb9be4fca4705b691a9bbdfbdf Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 13 Sep 2016 15:54:23 -0500 Subject: [PATCH] refactor(sass): restructure for sass theme updates --- src/components.core.scss | 34 --- src/components.ios.scss | 43 ---- src/components.md.scss | 49 ---- src/components.wp.scss | 49 ---- .../app/{structure.scss => app.scss} | 122 ++------- src/globals.core.scss | 19 -- src/globals.ios.scss | 7 - src/globals.md.scss | 7 - src/globals.wp.scss | 7 - src/ionic.ios.scss | 13 - src/ionic.md.scss | 13 - src/ionic.scss | 23 -- src/ionic.wp.scss | 13 - src/platform/cordova.ios.scss | 24 +- src/platform/cordova.md.scss | 19 +- src/platform/cordova.scss | 40 ++- src/platform/cordova.wp.scss | 20 +- src/themes/ionic.build.dark.scss | 6 + src/themes/ionic.build.default.scss | 6 + src/themes/ionic.components.scss | 236 ++++++++++++++++++ .../ionic.functions.scss} | 20 +- src/themes/ionic.globals.ios.scss | 7 + src/themes/ionic.globals.md.scss | 7 + .../ionic.globals.scss} | 24 ++ src/themes/ionic.globals.wp.scss | 7 + .../mixins.scss => themes/ionic.mixins.scss} | 17 -- ...ark.ios.scss => ionic.theme.dark.ios.scss} | 14 +- ...{dark.md.scss => ionic.theme.dark.md.scss} | 14 +- .../{dark.scss => ionic.theme.dark.scss} | 3 +- ...{dark.wp.scss => ionic.theme.dark.wp.scss} | 14 +- ....ios.scss => ionic.theme.default.ios.scss} | 18 +- ...lt.md.scss => ionic.theme.default.md.scss} | 18 +- ...{default.scss => ionic.theme.default.scss} | 3 +- ...lt.wp.scss => ionic.theme.default.wp.scss} | 18 +- src/themes/license.scss | 9 + src/{components/app => themes}/normalize.scss | 0 src/{util => themes}/util.scss | 57 ++--- 37 files changed, 422 insertions(+), 578 deletions(-) delete mode 100644 src/components.core.scss delete mode 100644 src/components.ios.scss delete mode 100644 src/components.md.scss delete mode 100644 src/components.wp.scss rename src/components/app/{structure.scss => app.scss} (55%) delete mode 100644 src/globals.core.scss delete mode 100644 src/globals.ios.scss delete mode 100644 src/globals.md.scss delete mode 100644 src/globals.wp.scss delete mode 100644 src/ionic.ios.scss delete mode 100644 src/ionic.md.scss delete mode 100755 src/ionic.scss delete mode 100644 src/ionic.wp.scss create mode 100644 src/themes/ionic.build.dark.scss create mode 100755 src/themes/ionic.build.default.scss create mode 100644 src/themes/ionic.components.scss rename src/{util/functions.scss => themes/ionic.functions.scss} (94%) create mode 100644 src/themes/ionic.globals.ios.scss create mode 100644 src/themes/ionic.globals.md.scss rename src/{components/app/z-index.scss => themes/ionic.globals.scss} (66%) create mode 100644 src/themes/ionic.globals.wp.scss rename src/{util/mixins.scss => themes/ionic.mixins.scss} (70%) rename src/themes/{dark.ios.scss => ionic.theme.dark.ios.scss} (87%) rename src/themes/{dark.md.scss => ionic.theme.dark.md.scss} (87%) rename src/themes/{dark.scss => ionic.theme.dark.scss} (93%) rename src/themes/{dark.wp.scss => ionic.theme.dark.wp.scss} (87%) rename src/themes/{default.ios.scss => ionic.theme.default.ios.scss} (82%) rename src/themes/{default.md.scss => ionic.theme.default.md.scss} (82%) rename src/themes/{default.scss => ionic.theme.default.scss} (93%) rename src/themes/{default.wp.scss => ionic.theme.default.wp.scss} (83%) create mode 100644 src/themes/license.scss rename src/{components/app => themes}/normalize.scss (100%) rename src/{util => themes}/util.scss (54%) diff --git a/src/components.core.scss b/src/components.core.scss deleted file mode 100644 index 29eb460d20..0000000000 --- a/src/components.core.scss +++ /dev/null @@ -1,34 +0,0 @@ - -// Core Globals -@import "globals.core"; - - -// Core App -@import - "components/app/normalize", - "components/app/structure", - "util/util"; - - -// Core Components -@import - "components/backdrop/backdrop", - "components/grid/grid", - "components/icon/icon", - "components/img/img", - "components/infinite-scroll/infinite-scroll", - "components/loading/loading", - "components/menu/menu", - "components/modal/modal", - "components/range/range", - "components/refresher/refresher", - "components/scroll/scroll", - "components/show-hide-when/show-hide-when", - "components/slides/slides", - "components/spinner/spinner", - "components/typography/typography", - "components/virtual-scroll/virtual-scroll"; - - -// Ionicons -@import "fonts/ionicons"; diff --git a/src/components.ios.scss b/src/components.ios.scss deleted file mode 100644 index cd27cf67b3..0000000000 --- a/src/components.ios.scss +++ /dev/null @@ -1,43 +0,0 @@ - -// iOS Globals -@import "globals.ios"; - - -// iOS Components -@import - "components/app/app.ios", - "components/action-sheet/action-sheet.ios", - "components/alert/alert.ios", - "components/badge/badge.ios", - "components/button/button.ios", - "components/card/card.ios", - "components/checkbox/checkbox.ios", - "components/chip/chip.ios", - "components/content/content.ios", - "components/datetime/datetime.ios", - "components/icon/icon.ios", - "components/input/input.ios", - "components/item/item.ios", - "components/label/label.ios", - "components/list/list.ios", - "components/loading/loading.ios", - "components/menu/menu.ios", - "components/modal/modal.ios", - "components/picker/picker.ios", - "components/popover/popover.ios", - "components/radio/radio.ios", - "components/range/range.ios", - "components/searchbar/searchbar.ios", - "components/segment/segment.ios", - "components/select/select.ios", - "components/spinner/spinner.ios", - "components/tabs/tabs.ios", - "components/toggle/toggle.ios", - "components/toast/toast.ios", - "components/toolbar/toolbar.ios", - "components/typography/typography.ios"; - - -// iOS Platform -@import - "platform/cordova.ios"; diff --git a/src/components.md.scss b/src/components.md.scss deleted file mode 100644 index 1ecb886885..0000000000 --- a/src/components.md.scss +++ /dev/null @@ -1,49 +0,0 @@ - -// Material Design Globals -@import "globals.md"; - - -// Material Design Components -@import - "components/app/app.md", - "components/action-sheet/action-sheet.md", - "components/alert/alert.md", - "components/badge/badge.md", - "components/button/button.md", - "components/card/card.md", - "components/checkbox/checkbox.md", - "components/chip/chip.md", - "components/content/content.md", - "components/datetime/datetime.md", - "components/icon/icon.md", - "components/input/input.md", - "components/item/item.md", - "components/label/label.md", - "components/list/list.md", - "components/loading/loading.md", - "components/menu/menu.md", - "components/modal/modal.md", - "components/picker/picker.md", - "components/popover/popover.md", - "components/radio/radio.md", - "components/range/range.md", - "components/searchbar/searchbar.md", - "components/segment/segment.md", - "components/select/select.md", - "components/spinner/spinner.md", - "components/tabs/tabs.md", - "components/toggle/toggle.md", - "components/toast/toast.md", - "components/toolbar/toolbar.md", - "components/typography/typography.md"; - - -// Material Design w/ iOS Platform -@import - "platform/cordova.md"; - - -// Roboto Font -@at-root { - @import "./fonts/roboto"; -} diff --git a/src/components.wp.scss b/src/components.wp.scss deleted file mode 100644 index 7627cf82f5..0000000000 --- a/src/components.wp.scss +++ /dev/null @@ -1,49 +0,0 @@ - -// Windows Globals -@import "globals.wp"; - - -// Windows Components -@import - "components/app/app.wp", - "components/action-sheet/action-sheet.wp", - "components/alert/alert.wp", - "components/badge/badge.wp", - "components/button/button.wp", - "components/card/card.wp", - "components/checkbox/checkbox.wp", - "components/chip/chip.wp", - "components/content/content.wp", - "components/datetime/datetime.wp", - "components/icon/icon.wp", - "components/input/input.wp", - "components/item/item.wp", - "components/label/label.wp", - "components/list/list.wp", - "components/loading/loading.wp", - "components/menu/menu.wp", - "components/modal/modal.wp", - "components/picker/picker.wp", - "components/popover/popover.wp", - "components/radio/radio.wp", - "components/range/range.wp", - "components/searchbar/searchbar.wp", - "components/segment/segment.wp", - "components/select/select.wp", - "components/spinner/spinner.wp", - "components/tabs/tabs.wp", - "components/toggle/toggle.wp", - "components/toast/toast.wp", - "components/toolbar/toolbar.wp", - "components/typography/typography.wp"; - - -// Windows w/ iOS Platform -@import - "platform/cordova.wp"; - - -// Noto Sans Font -@at-root { - @import "./fonts/noto-sans"; -} diff --git a/src/components/app/structure.scss b/src/components/app/app.scss similarity index 55% rename from src/components/app/structure.scss rename to src/components/app/app.scss index 0c81a2465a..5a3edcf006 100644 --- a/src/components/app/structure.scss +++ b/src/components/app/app.scss @@ -1,5 +1,17 @@ -@import "../../globals.core"; -@import "./z-index"; + +// Globals +// -------------------------------------------------- +@import "../themes/ionic.globals"; + + +// Normalize +// -------------------------------------------------- +@import "../themes/normalize"; + + +// Util +// -------------------------------------------------- +@import "../themes/util"; // App Structure @@ -20,8 +32,6 @@ html { } body { - @include user-select-none(); - position: fixed; overflow: hidden; @@ -46,6 +56,7 @@ body { word-wrap: break-word; text-size-adjust: none; + user-select: none; } @@ -62,14 +73,15 @@ ion-tabs, left: 0; z-index: $z-index-page-container; display: block; - overflow: hidden; width: 100%; height: 100%; } -ion-tab scroll-cotent { - display: none; +ion-nav, +ion-tab, +ion-tabs { + overflow: hidden; } ion-tab { @@ -80,15 +92,11 @@ ion-tab.show-tab { transform: translateY(0); } -ion-tab.show-tab scroll-cotent { - display: block; -} - // Page Container Structure // -------------------------------------------------- -ion-page { +.ion-page { position: absolute; top: 0; left: 0; @@ -101,35 +109,11 @@ ion-page { opacity: 0; } -ion-content { - position: relative; - top: 0; - left: 0; - display: block; - - width: 100%; - height: 100%; -} - -ion-page > ion-content { - position: absolute; -} - -ion-page scroll-content { - // do not render the scroll-content at all until ready - display: none; -} - -ion-page.show-page { +.ion-page.show-page { // show the page now that it's ready opacity: 1; } -ion-page.show-page scroll-content { - // render the content when ready - display: block; -} - // Toolbar Container Structure // -------------------------------------------------- @@ -144,11 +128,6 @@ ion-header { width: 100%; } -ion-toolbar { - position: relative; - z-index: $z-index-toolbar; -} - ion-footer { position: absolute; bottom: 0; @@ -159,66 +138,13 @@ ion-footer { width: 100%; } -ion-tabbar { - position: absolute; - bottom: 0; - left: 0; - z-index: $z-index-toolbar; - display: flex; - width: 100%; - - // default to hidden until ready - opacity: 0; -} - -ion-tabbar.show-tabbar { - opacity: 1; -} - -[tabsPlacement=top] > ion-tabbar { - top: 0; - bottom: auto; -} - - -// Scrollable Content +// Misc // -------------------------------------------------- -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; -} - - +[app-viewport], +[overlay-portal], [nav-viewport], -[nav-portal], [tab-portal], .nav-decor { display: none; diff --git a/src/globals.core.scss b/src/globals.core.scss deleted file mode 100644 index 1357a56e7c..0000000000 --- a/src/globals.core.scss +++ /dev/null @@ -1,19 +0,0 @@ - -// Global Functions -@import "util/functions"; - - -// Global Mixins -@import "util/mixins"; - - -// Global include-rtl -$include-rtl: true !default; - - -// Global font path -$font-path: "../fonts" !default; - - -// Hairline width -$hairlines-width: .55px !default; diff --git a/src/globals.ios.scss b/src/globals.ios.scss deleted file mode 100644 index 2b4e2f6a4e..0000000000 --- a/src/globals.ios.scss +++ /dev/null @@ -1,7 +0,0 @@ - -// Global Core -@import "globals.core"; - - -// Global iOS -@import "themes/default.ios"; diff --git a/src/globals.md.scss b/src/globals.md.scss deleted file mode 100644 index 9b16483290..0000000000 --- a/src/globals.md.scss +++ /dev/null @@ -1,7 +0,0 @@ - -// Core Globals -@import "globals.core"; - - -// Material Design Globals -@import "themes/default.md"; diff --git a/src/globals.wp.scss b/src/globals.wp.scss deleted file mode 100644 index 84d1cb2332..0000000000 --- a/src/globals.wp.scss +++ /dev/null @@ -1,7 +0,0 @@ - -// Core Globals -@import "globals.core"; - - -// Windows Globals -@import "themes/default.wp"; diff --git a/src/ionic.ios.scss b/src/ionic.ios.scss deleted file mode 100644 index da18dbf0f4..0000000000 --- a/src/ionic.ios.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Ionic: iOS -@charset "UTF-8"; - -// Core Components -@import "components.core"; - -// iOS Components -@import "components.ios"; - -// iOS Body -body { - @include ios-body(); -} diff --git a/src/ionic.md.scss b/src/ionic.md.scss deleted file mode 100644 index ee6fa076dd..0000000000 --- a/src/ionic.md.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Ionic: Material Design -@charset "UTF-8"; - -// Core Components -@import "components.core"; - -// Material Design Components -@import "components.md"; - -// Material Design Body -body { - @include md-body(); -} diff --git a/src/ionic.scss b/src/ionic.scss deleted file mode 100755 index 71a52d5a31..0000000000 --- a/src/ionic.scss +++ /dev/null @@ -1,23 +0,0 @@ -@charset "UTF-8"; - -// Core Components -@import "components.core"; - -// iOS Components -.ios { - @import "components.ios"; - @include ios-body(); -} - -// Material Design Components -.md { - @import "components.md"; - @include md-body(); -} - -// Windows Components -.wp { - @import "components.wp"; - @include wp-body(); -} - diff --git a/src/ionic.wp.scss b/src/ionic.wp.scss deleted file mode 100644 index 788122d696..0000000000 --- a/src/ionic.wp.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Ionic: Windows -@charset "UTF-8"; - -// Core Components -@import "components.core"; - -// Windows Components -@import "components.wp"; - -// Windows Body -body { - @include wp-body(); -} diff --git a/src/platform/cordova.ios.scss b/src/platform/cordova.ios.scss index 48c4e44ba9..e225408367 100644 --- a/src/platform/cordova.ios.scss +++ b/src/platform/cordova.ios.scss @@ -1,25 +1,11 @@ -@import "../globals.ios"; -@import "./cordova"; +@import "../themes/ionic.globals.ios"; // iOS Cordova // -------------------------------------------------- $cordova-ios-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default; - -ion-nav > ion-page, -ion-nav > ion-page > ion-header, -ion-tab > ion-page > ion-header, -ion-tabs > ion-page.tab-subpage > ion-header, -ion-menu > .menu-inner, -ion-menu > .menu-inner > ion-header { - @include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding); - @include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding); -} - -@media only screen and (max-width: $cordova-ios-statusbar-padding-modal-max-width) { - .modal-wrapper > ion-page > ion-header { - @include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding); - @include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding); - } -} +// Cordova mixins are in the main cordova file +.ios { + @include statusbar-padding($toolbar-ios-height, $content-ios-padding, $cordova-ios-statusbar-padding-modal-max-width, true); +} \ No newline at end of file diff --git a/src/platform/cordova.md.scss b/src/platform/cordova.md.scss index 4db918df1d..1019b4e1fd 100644 --- a/src/platform/cordova.md.scss +++ b/src/platform/cordova.md.scss @@ -1,23 +1,12 @@ -@import "../globals.md"; -@import "./cordova"; +@import "../themes/ionic.globals.md"; // Material Design on iOS with Cordova // -------------------------------------------------- $cordova-md-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default; - -ion-nav > ion-page, -ion-nav > ion-page > ion-header, -ion-tab > ion-page > ion-header, -ion-tabs > ion-page.tab-subpage > ion-header, -ion-menu > .menu-inner, -ion-menu > .menu-inner > ion-header { - @include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding); +// Cordova mixins are in the main cordova file +.md { + @include statusbar-padding($toolbar-md-height, $content-md-padding, $cordova-md-statusbar-padding-modal-max-width); } -@media only screen and (max-width: $cordova-md-statusbar-padding-modal-max-width) { - .modal-wrapper > ion-page > ion-header { - @include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding); - } -} diff --git a/src/platform/cordova.scss b/src/platform/cordova.scss index 0b751e6a3b..fa6abfe115 100644 --- a/src/platform/cordova.scss +++ b/src/platform/cordova.scss @@ -1,4 +1,4 @@ -@import "../globals.core"; +@import "../themes/ionic.globals"; // Cordova Status Bar Padding iOS Platform // -------------------------------------------------------------------------------- @@ -10,6 +10,36 @@ $cordova-ios-statusbar-padding: 20px !default; $cordova-statusbar-padding-modal-max-width: 767px !default; +@mixin statusbar-padding($toolbar-height, $content-padding, $modal-max-width, $style-title: false) { + + ion-nav > .ion-page, + ion-nav > .ion-page > ion-header, + ion-tab > .ion-page > ion-header, + ion-tabs > .ion-page.tab-subpage > ion-header, + ion-menu > .menu-inner, + ion-menu > .menu-inner > ion-header { + + @include toolbar-statusbar-padding($toolbar-height, $content-padding); + + // If we should style the title elements in the toolbar + @if ($style-title) { + @include toolbar-title-statusbar-padding($toolbar-height, $content-padding); + } + } + + @media only screen and (max-width: $modal-max-width) { + .modal-wrapper > .ion-page > ion-header { + @include toolbar-statusbar-padding($toolbar-height, $content-padding); + + // If we should style the title elements in the toolbar + @if ($style-title) { + @include toolbar-title-statusbar-padding($toolbar-height, $content-padding); + } + } + } + +} + // The first-child should get modified padding-top for the status bar // -------------------------------------------------------------------------------- @@ -22,19 +52,19 @@ $cordova-statusbar-padding-modal-max-width: 767px !default; min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding}); } - > ion-content.statusbar-padding:first-child scroll-content { + > ion-content.statusbar-padding:first-child .scroll-content { padding-top: $cordova-ios-statusbar-padding; } - > ion-content.statusbar-padding:first-child[padding] scroll-content, - > ion-content.statusbar-padding:first-child[padding-top] scroll-content { + > ion-content.statusbar-padding:first-child[padding] .scroll-content, + > ion-content.statusbar-padding:first-child[padding-top] .scroll-content { padding-top: calc(#{$content-padding} + #{$cordova-ios-statusbar-padding}); } } -// iOS is the only mode that uses this mixins and it should be removed with #5036 +// iOS is the only mode that uses this mixin and it should be removed with #5036 // -------------------------------------------------------------------------------- @mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) { diff --git a/src/platform/cordova.wp.scss b/src/platform/cordova.wp.scss index 78d27ea3f2..3a3e3517cb 100644 --- a/src/platform/cordova.wp.scss +++ b/src/platform/cordova.wp.scss @@ -1,23 +1,11 @@ -@import "../globals.wp"; -@import "./cordova"; +@import "../themes/ionic.globals.wp"; // Windows on iOS with Cordova // -------------------------------------------------- $cordova-wp-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default; - -ion-nav > ion-page, -ion-nav > ion-page > ion-header, -ion-tab > ion-page > ion-header, -ion-tabs > ion-page.tab-subpage > ion-header, -ion-menu > .menu-inner, -ion-menu > .menu-inner > ion-header { - @include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding); -} - -@media only screen and (max-width: $cordova-wp-statusbar-padding-modal-max-width) { - .modal-wrapper > ion-page > ion-header { - @include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding); - } +// Cordova mixins are in the main cordova file +.wp { + @include statusbar-padding($toolbar-wp-height, $content-wp-padding, $cordova-wp-statusbar-padding-modal-max-width); } diff --git a/src/themes/ionic.build.dark.scss b/src/themes/ionic.build.dark.scss new file mode 100644 index 0000000000..c2826715d9 --- /dev/null +++ b/src/themes/ionic.build.dark.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; +$ionic-theme: "Dark"; +@import "./version"; +@import "./license"; +@import "./ionic.theme.dark"; +@import "./ionic.components"; diff --git a/src/themes/ionic.build.default.scss b/src/themes/ionic.build.default.scss new file mode 100755 index 0000000000..a2b57b258e --- /dev/null +++ b/src/themes/ionic.build.default.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; +$ionic-theme: "Default"; +@import "./version"; +@import "./license"; +@import "./ionic.theme.default"; +@import "./ionic.components"; diff --git a/src/themes/ionic.components.scss b/src/themes/ionic.components.scss new file mode 100644 index 0000000000..e089b4f360 --- /dev/null +++ b/src/themes/ionic.components.scss @@ -0,0 +1,236 @@ + +// Components +// -------------------------------------------------- + +@import +"../components/action-sheet/action-sheet", +"../components/action-sheet/action-sheet.ios", +"../components/action-sheet/action-sheet.md", +"../components/action-sheet/action-sheet.wp"; + +@import +"../components/alert/alert", +"../components/alert/alert.ios", +"../components/alert/alert.md", +"../components/alert/alert.wp"; + +@import +"../components/app/app", +"../components/app/app.ios", +"../components/app/app.md", +"../components/app/app.wp"; + +@import +"../components/backdrop/backdrop"; + +@import +"../components/badge/badge", +"../components/badge/badge.ios", +"../components/badge/badge.md", +"../components/badge/badge.wp"; + +@import +"../components/button/button", +"../components/button/button-fab", +"../components/button/button-icon", +"../components/button/button.ios", +"../components/button/button.md", +"../components/button/button.wp"; + +@import +"../components/card/card", +"../components/card/card.ios", +"../components/card/card.md", +"../components/card/card.wp"; + +@import +"../components/checkbox/checkbox.ios", +"../components/checkbox/checkbox.md", +"../components/checkbox/checkbox.wp"; + +@import +"../components/chip/chip", +"../components/chip/chip.ios", +"../components/chip/chip.md", +"../components/chip/chip.wp"; + +@import +"../components/content/content", +"../components/content/content.ios", +"../components/content/content.md", +"../components/content/content.wp"; + +@import +"../components/datetime/datetime", +"../components/datetime/datetime.ios", +"../components/datetime/datetime.md", +"../components/datetime/datetime.wp"; + +@import +"../components/grid/grid"; + +@import +"../components/icon/icon", +"../components/icon/icon.ios", +"../components/icon/icon.md", +"../components/icon/icon.wp"; + +@import +"../components/img/img"; + +@import +"../components/infinite-scroll/infinite-scroll"; + +@import +"../components/input/input", +"../components/input/input.ios", +"../components/input/input.md", +"../components/input/input.wp"; + +@import +"../components/item/item", +"../components/item/item-media", +"../components/item/item-reorder", +"../components/item/item-sliding", +"../components/item/item.ios", +"../components/item/item.md", +"../components/item/item.wp"; + +@import +"../components/label/label", +"../components/label/label.ios", +"../components/label/label.md", +"../components/label/label.wp"; + +@import +"../components/list/list", +"../components/list/list.ios", +"../components/list/list.md", +"../components/list/list.wp"; + +@import +"../components/loading/loading", +"../components/loading/loading.ios", +"../components/loading/loading.md", +"../components/loading/loading.wp"; + +@import +"../components/menu/menu", +"../components/menu/menu.ios", +"../components/menu/menu.md", +"../components/menu/menu.wp"; + +@import +"../components/modal/modal", +"../components/modal/modal.ios", +"../components/modal/modal.md", +"../components/modal/modal.wp"; + +@import +"../components/picker/picker", +"../components/picker/picker.ios", +"../components/picker/picker.md", +"../components/picker/picker.wp"; + +@import +"../components/popover/popover", +"../components/popover/popover.ios", +"../components/popover/popover.md", +"../components/popover/popover.wp"; + +@import +"../components/radio/radio.ios", +"../components/radio/radio.md", +"../components/radio/radio.wp"; + +@import +"../components/range/range", +"../components/range/range.ios", +"../components/range/range.md", +"../components/range/range.wp"; + +@import +"../components/refresher/refresher"; + +@import +"../components/scroll/scroll"; + +@import +"../components/searchbar/searchbar", +"../components/searchbar/searchbar.ios", +"../components/searchbar/searchbar.md", +"../components/searchbar/searchbar.wp"; + +@import +"../components/segment/segment", +"../components/segment/segment.ios", +"../components/segment/segment.md", +"../components/segment/segment.wp"; + +@import +"../components/select/select", +"../components/select/select.ios", +"../components/select/select.md", +"../components/select/select.wp"; + +@import +"../components/show-hide-when/show-hide-when"; + +@import +"../components/slides/slides"; + +@import +"../components/spinner/spinner", +"../components/spinner/spinner.ios", +"../components/spinner/spinner.md", +"../components/spinner/spinner.wp"; + +@import +"../components/tabs/tabs", +"../components/tabs/tabs.ios", +"../components/tabs/tabs.md", +"../components/tabs/tabs.wp"; + +@import +"../components/toast/toast", +"../components/toast/toast.ios", +"../components/toast/toast.md", +"../components/toast/toast.wp"; + +@import +"../components/toggle/toggle.ios", +"../components/toggle/toggle.md", +"../components/toggle/toggle.wp"; + +@import +"../components/toolbar/toolbar", +"../components/toolbar/toolbar-button", +"../components/toolbar/toolbar.ios", +"../components/toolbar/toolbar.md", +"../components/toolbar/toolbar.wp"; + +@import +"../components/typography/typography", +"../components/typography/typography.ios", +"../components/typography/typography.md", +"../components/typography/typography.wp"; + +@import +"../components/virtual-scroll/virtual-scroll"; + + +// Platforms +// -------------------------------------------------- +@import +"../platform/cordova", +"../platform/cordova.ios", +"../platform/cordova.md", +"../platform/cordova.wp"; + + +// Fonts +// -------------------------------------------------- +@import +"../fonts/ionicons", +"../fonts/noto-sans", +"../fonts/roboto"; diff --git a/src/util/functions.scss b/src/themes/ionic.functions.scss similarity index 94% rename from src/util/functions.scss rename to src/themes/ionic.functions.scss index 31e0874d92..69760e7656 100644 --- a/src/util/functions.scss +++ b/src/themes/ionic.functions.scss @@ -203,10 +203,10 @@ @if (type-of($value) == color) { $color-value: color-key($colors, $value); - // If the value is a string (e.g. primary) - // we want to get the value from the map - // where it is the key } @else { + // If the value is a string (e.g. primary) + // we want to get the value from the map + // where it is the key $color-value: map-get($colors, $value); } @@ -222,16 +222,16 @@ $color-value: color-inverse(map-get($color-value, base)); } - // If a mode was passed we need to call - // the custom inverse function to get the inverse - // color based on the mode -} @elseif ($custom-contrast-mode) { + } @elseif ($custom-contrast-mode) { + // If a mode was passed we need to call + // the custom inverse function to get the inverse + // color based on the mode $color-value: mode-inverse($color-value, $custom-contrast-mode); - // Otherwise we were passed a color and can use the - // function to get the inverse of that color - // (e.g. #f4f4f4) } @else { + // Otherwise we were passed a color and can use the + // function to get the inverse of that color + // (e.g. #f4f4f4) $color-value: color-inverse($color-value); } diff --git a/src/themes/ionic.globals.ios.scss b/src/themes/ionic.globals.ios.scss new file mode 100644 index 0000000000..bc6fe1ef88 --- /dev/null +++ b/src/themes/ionic.globals.ios.scss @@ -0,0 +1,7 @@ + +// Global Core +@import "./ionic.globals"; + + +// Global iOS +@import "./ionic.theme.default.ios"; diff --git a/src/themes/ionic.globals.md.scss b/src/themes/ionic.globals.md.scss new file mode 100644 index 0000000000..1ab3ecfd47 --- /dev/null +++ b/src/themes/ionic.globals.md.scss @@ -0,0 +1,7 @@ + +// Core Globals +@import "./ionic.globals"; + + +// Material Design Globals +@import "./ionic.theme.default.md"; diff --git a/src/components/app/z-index.scss b/src/themes/ionic.globals.scss similarity index 66% rename from src/components/app/z-index.scss rename to src/themes/ionic.globals.scss index b73a6a4840..2d6a2a8aa5 100644 --- a/src/components/app/z-index.scss +++ b/src/themes/ionic.globals.scss @@ -1,4 +1,28 @@ +// Ionic Version +@import "./version"; + + +// Global Functions +@import "./ionic.functions"; + + +// Global Mixins +@import "./ionic.mixins"; + + +// Global include-rtl +$include-rtl: true !default; + + +// Global font path +$font-path: "../fonts" !default; + + +// Hairline width +$hairlines-width: .55px !default; + + // Z-Index // -------------------------------------------------- // Grouped by elements which would be siblings diff --git a/src/themes/ionic.globals.wp.scss b/src/themes/ionic.globals.wp.scss new file mode 100644 index 0000000000..0338a9e65b --- /dev/null +++ b/src/themes/ionic.globals.wp.scss @@ -0,0 +1,7 @@ + +// Core Globals +@import "./ionic.globals"; + + +// Windows Globals +@import "./ionic.theme.default.wp"; diff --git a/src/util/mixins.scss b/src/themes/ionic.mixins.scss similarity index 70% rename from src/util/mixins.scss rename to src/themes/ionic.mixins.scss index ac643353b8..215b6c7ee7 100644 --- a/src/util/mixins.scss +++ b/src/themes/ionic.mixins.scss @@ -8,15 +8,6 @@ } -// Calc -// -------------------------------------------------- - -@mixin calc($property, $expression) { - #{$property}: -webkit-calc(#{$expression}); - #{$property}: calc(#{$expression}); -} - - // Input Placeholder // -------------------------------------------------- @@ -44,11 +35,3 @@ $url: url-encode($svg); background-image: url("data:image/svg+xml;charset=utf-8,#{$url}"); } - - -// User Select None -// -------------------------------------------------- - -@mixin user-select-none() { - user-select: none; -} diff --git a/src/themes/dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss similarity index 87% rename from src/themes/dark.ios.scss rename to src/themes/ionic.theme.dark.ios.scss index 3e975a86ef..b740f178b9 100644 --- a/src/themes/dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -1,4 +1,4 @@ -@import "./dark"; +@import "./ionic.theme.dark"; // iOS Dark Theme // ---------------------------------- @@ -6,8 +6,6 @@ $colors-ios: copy-colors($colors) !default; $text-ios-color: $text-color !default; -$paragraph-ios-color: $paragraph-color !default; -$link-ios-color: color($colors-ios, primary) !default; $background-ios-color: $background-color !default; $subdued-text-ios-color: $subdued-text-color !default; @@ -75,13 +73,3 @@ $item-ios-padding-icon-bottom: 9px !default; // -------------------------------------------------- $toggle-ios-handle-background-color: color($colors-ios, light) !default; - - -// iOS Body -// -------------------------------------------------- - -@mixin ios-body() { - font-family: $font-family-ios-base; - font-size: $font-size-ios-base; - background-color: $background-ios-color; -} diff --git a/src/themes/dark.md.scss b/src/themes/ionic.theme.dark.md.scss similarity index 87% rename from src/themes/dark.md.scss rename to src/themes/ionic.theme.dark.md.scss index edb296849b..a5cef29360 100644 --- a/src/themes/dark.md.scss +++ b/src/themes/ionic.theme.dark.md.scss @@ -1,4 +1,4 @@ -@import "./dark"; +@import "./ionic.theme.dark"; // Material Design Dark Theme // ---------------------------------- @@ -7,8 +7,6 @@ $colors-md: copy-colors($colors) !default; $text-md-color: $text-color !default; -$paragraph-md-color: $paragraph-color !default; -$link-md-color: color($colors-md, primary) !default; $background-md-color: $background-color !default; $subdued-text-md-color: $subdued-text-color !default; @@ -71,13 +69,3 @@ $toggle-md-handle-background-color-off: color($colors-md, light) !default; @function ripple-background-color($button-color) { @return rgba(red($button-color), green($button-color), blue($button-color), .1); } - - -// Material Design Body -// -------------------------------------------------- - -@mixin md-body() { - font-family: $font-family-md-base; - font-size: $font-size-md-base; - background-color: $background-md-color; -} diff --git a/src/themes/dark.scss b/src/themes/ionic.theme.dark.scss similarity index 93% rename from src/themes/dark.scss rename to src/themes/ionic.theme.dark.scss index d4829bdfdd..2b7dde437f 100644 --- a/src/themes/dark.scss +++ b/src/themes/ionic.theme.dark.scss @@ -1,4 +1,4 @@ -@import "../globals.core"; +@import "./ionic.globals"; // Dark Theme @@ -16,7 +16,6 @@ $colors: ( $text-color: #fff !default; -$paragraph-color: $text-color !default; $link-color: color($colors, primary) !default; $background-color: #191919 !default; $subdued-text-color: #666 !default; diff --git a/src/themes/dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss similarity index 87% rename from src/themes/dark.wp.scss rename to src/themes/ionic.theme.dark.wp.scss index 18cb8347a0..427f07e19d 100644 --- a/src/themes/dark.wp.scss +++ b/src/themes/ionic.theme.dark.wp.scss @@ -1,4 +1,4 @@ -@import "./dark"; +@import "./ionic.theme.dark"; // Windows Dark Theme // ---------------------------------- @@ -7,8 +7,6 @@ $colors-wp: copy-colors($colors) !default; $text-wp-color: $text-color !default; -$paragraph-wp-color: $paragraph-color !default; -$link-wp-color: color($colors-wp, primary) !default; $background-wp-color: $background-color !default; $subdued-text-wp-color: $subdued-text-color !default; @@ -69,13 +67,3 @@ $toggle-wp-handle-background-color-off: color($colors-wp, light) !default; // -------------------------------------------------- $input-wp-border-color: rgba(0, 0, 0, .5) !default; - - -// Windows Body -// -------------------------------------------------- - -@mixin wp-body() { - font-family: $font-family-wp-base; - font-size: $font-size-wp-base; - background-color: $background-wp-color; -} diff --git a/src/themes/default.ios.scss b/src/themes/ionic.theme.default.ios.scss similarity index 82% rename from src/themes/default.ios.scss rename to src/themes/ionic.theme.default.ios.scss index a8980a8481..81ca7ecae5 100644 --- a/src/themes/default.ios.scss +++ b/src/themes/ionic.theme.default.ios.scss @@ -1,4 +1,4 @@ -@import "./default"; +@import "./ionic.theme.default"; // iOS Default Theme // ---------------------------------- @@ -7,18 +7,20 @@ $colors-ios: copy-colors($colors) !default; $text-ios-color: $text-color !default; -$paragraph-ios-color: $paragraph-color !default; -$link-ios-color: color($colors-ios, primary) !default; $background-ios-color: $background-color !default; $subdued-text-ios-color: $subdued-text-color !default; $font-family-ios-base: $font-family-base !default; $font-size-ios-base: $font-size-base !default; +$content-ios-padding: $content-padding !default; +$content-ios-margin: $content-margin !default; + // iOS Toolbar // -------------------------------------------------- +$toolbar-ios-height: 44px !default; $toolbar-ios-background: $toolbar-background !default; $toolbar-ios-border-color: $toolbar-border-color !default; $toolbar-ios-text-color: $toolbar-text-color !default; @@ -46,13 +48,3 @@ $item-ios-padding-media-top: 8px !default; $item-ios-padding-media-bottom: 8px !default; $item-ios-padding-icon-top: 10px !default; $item-ios-padding-icon-bottom: 9px !default; - - -// iOS Body -// -------------------------------------------------- - -@mixin ios-body() { - font-family: $font-family-ios-base; - font-size: $font-size-ios-base; - background-color: $background-ios-color; -} diff --git a/src/themes/default.md.scss b/src/themes/ionic.theme.default.md.scss similarity index 82% rename from src/themes/default.md.scss rename to src/themes/ionic.theme.default.md.scss index 3f7e49cbd8..dceda8f2ab 100644 --- a/src/themes/default.md.scss +++ b/src/themes/ionic.theme.default.md.scss @@ -1,4 +1,4 @@ -@import "./default"; +@import "./ionic.theme.default"; // Material Design Default Theme // ---------------------------------- @@ -7,18 +7,20 @@ $colors-md: copy-colors($colors) !default; $text-md-color: $text-color !default; -$paragraph-md-color: $paragraph-color !default; -$link-md-color: color($colors-md, primary) !default; $background-md-color: $background-color !default; $subdued-text-md-color: $subdued-text-color !default; $font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default; $font-size-md-base: $font-size-base !default; +$content-md-padding: $content-padding !default; +$content-md-margin: $content-margin !default; + // Material Design Toolbar // -------------------------------------------------- +$toolbar-md-height: 56px !default; $toolbar-md-background: $toolbar-background !default; $toolbar-md-border-color: $toolbar-border-color !default; $toolbar-md-text-color: #424242 !default; @@ -46,13 +48,3 @@ $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; $item-md-padding-icon-bottom: 10px !default; - - -// Material Design Body -// -------------------------------------------------- - -@mixin md-body() { - font-family: $font-family-md-base; - font-size: $font-size-md-base; - background-color: $background-md-color; -} diff --git a/src/themes/default.scss b/src/themes/ionic.theme.default.scss similarity index 93% rename from src/themes/default.scss rename to src/themes/ionic.theme.default.scss index af476aafd7..6e09262bec 100644 --- a/src/themes/default.scss +++ b/src/themes/ionic.theme.default.scss @@ -1,4 +1,4 @@ -@import "../globals.core"; +@import "./ionic.globals"; // Default Theme @@ -16,7 +16,6 @@ $colors: ( $text-color: #000 !default; -$paragraph-color: $text-color !default; $link-color: color($colors, primary) !default; $background-color: #fff !default; $subdued-text-color: #666 !default; diff --git a/src/themes/default.wp.scss b/src/themes/ionic.theme.default.wp.scss similarity index 83% rename from src/themes/default.wp.scss rename to src/themes/ionic.theme.default.wp.scss index de24e4e744..f98ca66528 100644 --- a/src/themes/default.wp.scss +++ b/src/themes/ionic.theme.default.wp.scss @@ -1,4 +1,4 @@ -@import "./default"; +@import "./ionic.theme.default"; // Windows Default Theme // ---------------------------------- @@ -7,18 +7,20 @@ $colors-wp: copy-colors($colors) !default; $text-wp-color: $text-color !default; -$paragraph-wp-color: $paragraph-color !default; -$link-wp-color: color($colors-wp, primary) !default; $background-wp-color: $background-color !default; $subdued-text-wp-color: $subdued-text-color !default; $font-family-wp-base: "Segoe UI", "Noto Sans", sans-serif !default; $font-size-wp-base: $font-size-base !default; +$content-wp-padding: $content-padding !default; +$content-wp-margin: $content-margin !default; + // Windows Toolbar // -------------------------------------------------- +$toolbar-wp-height: 46px !default; $toolbar-wp-background: $toolbar-background !default; $toolbar-wp-border-color: $toolbar-border-color !default; $toolbar-wp-text-color: $toolbar-text-color !default; @@ -52,13 +54,3 @@ $item-wp-padding-icon-bottom: 10px !default; // -------------------------------------------------- $input-wp-border-color: rgba(0, 0, 0, .5) !default; - - -// Windows Body -// -------------------------------------------------- - -@mixin wp-body() { - font-family: $font-family-wp-base; - font-size: $font-size-wp-base; - background-color: $background-wp-color; -} diff --git a/src/themes/license.scss b/src/themes/license.scss new file mode 100644 index 0000000000..ba7bf0a366 --- /dev/null +++ b/src/themes/license.scss @@ -0,0 +1,9 @@ +/*! + * Ionic Framework + * A powerful framework for building mobile and progressive web apps. + * http://ionicframework.com/ + * + * v#{$ionic-version}, #{$ionic-theme} Theme + * + * Licensed under the MIT license. Please see LICENSE for more information. + */ \ No newline at end of file diff --git a/src/components/app/normalize.scss b/src/themes/normalize.scss similarity index 100% rename from src/components/app/normalize.scss rename to src/themes/normalize.scss diff --git a/src/util/util.scss b/src/themes/util.scss similarity index 54% rename from src/util/util.scss rename to src/themes/util.scss index ecb9927cd6..d58d588ee4 100755 --- a/src/util/util.scss +++ b/src/themes/util.scss @@ -1,4 +1,4 @@ -@import "../globals.core"; +@import "./ionic.globals"; .hide, [hidden], @@ -11,11 +11,13 @@ template { top: 0; } + // Focus Outline // -------------------------------------------------- $focus-outline-border-color: #51a7e8 !default; -$focus-outline-box-shadow: 0 0 8px 0 $focus-outline-border-color !default; +$focus-outline-border-width: 2px !default; +$focus-outline-box-shadow: 0 0 8px 1px $focus-outline-border-color !default; :focus, @@ -23,52 +25,29 @@ $focus-outline-box-shadow: 0 0 8px 0 $focus-outline-border-color !default; outline: none; } -.focus-outline { - - :focus { - outline: thin dotted; - outline-offset: -1px; - } - - button:focus, - [button]:focus { - border-color: $focus-outline-border-color; - outline: thin solid $focus-outline-border-color; - box-shadow: $focus-outline-box-shadow; - } - - ion-input :focus { - outline: none; - } - +.focus-outline :focus { + outline: thin dotted; + outline-offset: -1px; } - -// Focus Controls -// ------------------------------- - -focus-ctrl { - position: fixed; - - input, - button { - position: fixed; - top: 1px; - left: -9999px; - z-index: 9999; - - width: 9px; - - pointer-events: none; - } +.focus-outline button:focus, +.focus-outline [ion-button]:focus { + border-color: $focus-outline-border-color; + outline: $focus-outline-border-width solid $focus-outline-border-color; + box-shadow: $focus-outline-box-shadow; } +ion-input :focus { + outline: none; +} + + // Click Block // -------------------------------------------------- // Fill the screen to block clicks (a better pointer-events: none) // to avoid full-page reflows and paints which can cause flickers -click-block { +.click-block { position: absolute; top: 0; right: 0;