From 8148927c88beb1736ad8ba365248fc75a958eaef Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 4 Dec 2015 14:34:24 -0600 Subject: [PATCH] updates --- ionic/components/app/structure.scss | 2 -- ionic/components/app/typography.scss | 20 ------------------ ionic/components/content/modes/ios.scss | 28 +++++++++++++++++++++++++ ionic/components/menu/menu.scss | 14 ------------- ionic/components/menu/modes/ios.scss | 24 +++++++++++++++++++++ ionic/components/menu/modes/md.scss | 24 +++++++++++++++++++++ ionic/components/modal/modal.scss | 4 ---- ionic/components/modal/modes/ios.scss | 11 ++++++++++ ionic/components/modal/modes/md.scss | 11 ++++++++++ ionic/ionic.ios.scss | 2 ++ ionic/ionic.md.scss | 14 ++++++------- 11 files changed, 106 insertions(+), 48 deletions(-) create mode 100644 ionic/components/menu/modes/ios.scss create mode 100644 ionic/components/menu/modes/md.scss create mode 100644 ionic/components/modal/modes/ios.scss create mode 100644 ionic/components/modal/modes/md.scss diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 286cc13a77..d42d3fdb67 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -76,7 +76,6 @@ body { text-size-adjust: none; @include user-select-none(); - background-color: $background-color; } ion-app, @@ -127,7 +126,6 @@ ion-content { width: 100%; height: 100%; flex: 1; - background-color: $background-color; } scroll-content { diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index c314a8dfda..403f79e502 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -32,7 +32,6 @@ body { } a { - color: $link-color; background-color: transparent; } .enable-hover a:hover { @@ -101,22 +100,3 @@ sup { sub { bottom: -0.25em; } - -@each $color-name, $color-value in $colors { - h1, h2, h3, h4, h5, h6, - p, - span, - a:not([button]), - small, - b, - i, - u, - strong, - em, - sub, - sup { - &[#{$color-name}] { - color: $color-value !important; - } - } -} diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss index 1c4f165ff4..b09806ef91 100644 --- a/ionic/components/content/modes/ios.scss +++ b/ionic/components/content/modes/ios.scss @@ -6,6 +6,15 @@ $outer-content-md-background-color: #efeff4 !default; +body, +ion-content { + background-color: $background-ios-color; +} + +a { + color: $link-ios-color; +} + .outer-content { background: $outer-content-md-background-color; } @@ -14,3 +23,22 @@ ion-nav.has-views, ion-tab.has-views { background: #000; } + +@each $color-name, $color-value in $colors { + h1, h2, h3, h4, h5, h6, + p, + span, + a:not([button]), + small, + b, + i, + u, + strong, + em, + sub, + sup { + &[#{$color-name}] { + color: $color-value !important; + } + } +} diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss index d213016271..a5293db25a 100644 --- a/ionic/components/menu/menu.scss +++ b/ionic/components/menu/menu.scss @@ -6,9 +6,6 @@ $menu-width: 304px !default; $menu-small-width: $menu-width - 40px !default; -$menu-background: $background-color !default; -$menu-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default; - ion-menu { position: absolute; @@ -22,8 +19,6 @@ ion-menu { display: flex; flex-direction: column; - background: $menu-background; - transform: translate3d(-9999px, 0px, 0px); } @@ -68,14 +63,6 @@ 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 // -------------------------------------------------- @@ -84,7 +71,6 @@ ion-menu[type=reveal].show-menu { 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 { diff --git a/ionic/components/menu/modes/ios.scss b/ionic/components/menu/modes/ios.scss new file mode 100644 index 0000000000..827aa58d14 --- /dev/null +++ b/ionic/components/menu/modes/ios.scss @@ -0,0 +1,24 @@ +@import "../../../ionic.globals"; + +// iOS Menu +// -------------------------------------------------- + +$menu-ios-background: $background-ios-color !default; +$menu-ios-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default; + + +ion-menu { + background: $menu-ios-background; +} + +.menu-content-reveal { + box-shadow: $menu-ios-shadow; +} + +.menu-content-push { + box-shadow: $menu-ios-shadow; +} + +ion-menu[type=overlay] { + box-shadow: $menu-ios-shadow; +} diff --git a/ionic/components/menu/modes/md.scss b/ionic/components/menu/modes/md.scss new file mode 100644 index 0000000000..d6d9ec791d --- /dev/null +++ b/ionic/components/menu/modes/md.scss @@ -0,0 +1,24 @@ +@import "../../../ionic.globals"; + +// Material Design Menu +// -------------------------------------------------- + +$menu-md-background: $background-md-color !default; +$menu-md-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default; + + +ion-menu { + background: $menu-md-background; +} + +.menu-content-reveal { + box-shadow: $menu-md-shadow; +} + +.menu-content-push { + box-shadow: $menu-md-shadow; +} + +ion-menu[type=overlay] { + box-shadow: $menu-md-shadow; +} diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss index 5d4f61c0da..63e5ce6929 100644 --- a/ionic/components/modal/modal.scss +++ b/ionic/components/modal/modal.scss @@ -3,11 +3,7 @@ // Modals // -------------------------------------------------- -$modal-background-color: $background-color !default; - - ion-page.modal { - background-color: $modal-background-color; z-index: $z-index-overlay; // hidden by default to prevent flickers, the animation will show it diff --git a/ionic/components/modal/modes/ios.scss b/ionic/components/modal/modes/ios.scss new file mode 100644 index 0000000000..f92f7cef4c --- /dev/null +++ b/ionic/components/modal/modes/ios.scss @@ -0,0 +1,11 @@ +@import "../../../ionic.globals"; + +// iOS Modals +// -------------------------------------------------- + +$modal-ios-background-color: $background-ios-color !default; + + +ion-page.modal { + background-color: $modal-ios-background-color; +} diff --git a/ionic/components/modal/modes/md.scss b/ionic/components/modal/modes/md.scss new file mode 100644 index 0000000000..b479f9fe36 --- /dev/null +++ b/ionic/components/modal/modes/md.scss @@ -0,0 +1,11 @@ +@import "../../../ionic.globals"; + +// Material Design Modals +// -------------------------------------------------- + +$modal-md-background-color: $background-md-color !default; + + +ion-page.modal { + background-color: $modal-md-background-color; +} diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss index 95afd69ad2..3c6b2a96e6 100644 --- a/ionic/ionic.ios.scss +++ b/ionic/ionic.ios.scss @@ -19,6 +19,8 @@ "components/content/modes/ios", "components/item/modes/ios", "components/list/modes/ios", + "components/menu/modes/ios", + "components/modal/modes/ios", "components/popup/modes/ios", "components/radio/modes/ios", "components/searchbar/modes/ios", diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss index 84f3f504e6..529d984164 100644 --- a/ionic/ionic.md.scss +++ b/ionic/ionic.md.scss @@ -11,19 +11,16 @@ // Material Design Components -@import - "components/item/modes/md", - "components/list/modes/md", - "components/toolbar/modes/md"; - - -// Material Design Optional Components @import "components/action-sheet/modes/md", "components/button/modes/md", "components/card/modes/md", "components/checkbox/modes/md", "components/content/modes/md", + "components/item/modes/md", + "components/list/modes/md", + "components/menu/modes/md", + "components/modal/modes/md", "components/popup/modes/md", "components/radio/modes/md", "components/tap-click/ripple", @@ -31,4 +28,5 @@ "components/segment/modes/md", "components/switch/modes/md", "components/tabs/modes/md", - "components/text-input/modes/md"; + "components/text-input/modes/md", + "components/toolbar/modes/md";