diff --git a/ionic/components.core.scss b/ionic/components.core.scss index 36bcaceaf8..5c03c0d153 100644 --- a/ionic/components.core.scss +++ b/ionic/components.core.scss @@ -26,7 +26,6 @@ "components/show-hide-when/show-hide-when", "components/slides/slides", "components/spinner/spinner", - "components/toast/toast", "components/virtual-scroll/virtual-scroll"; diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 05fea8ffde..660def066c 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -90,7 +90,7 @@ tabbar { ion-badge, ion-icon, span { - opacity: 0.4; + opacity: .4; } } diff --git a/ionic/components/toast/toast.ios.scss b/ionic/components/toast/toast.ios.scss index 1c6badde01..beab2323f1 100644 --- a/ionic/components/toast/toast.ios.scss +++ b/ionic/components/toast/toast.ios.scss @@ -1,39 +1,52 @@ +@import "../../globals.ios"; +@import "./toast"; + // iOS Toast // -------------------------------------------------- + $toast-ios-text-align: left !default; -$toast-ios-background: rgba(0, 0, 0, 0.70) !default; -$toast-ios-border-radius: 0.65rem !default; +$toast-ios-background: rgba(0, 0, 0, .7) !default; +$toast-ios-border-radius: .65rem !default; $toast-ios-title-color: #fff !default; $toast-ios-title-font-size: 1.4rem !default; $toast-ios-title-padding: 1.5rem !default; + ion-toast { - display: block; - height: $toast-width; - left: 0; position: absolute; top: 0; - width: $toast-width; + left: 0; z-index: $z-index-overlay; + display: block; + + width: $toast-width; + height: $toast-width; } .toast-wrapper { - background: $toast-ios-background; - border-radius: $toast-ios-border-radius; - bottom: 10px; - display: block; - left: 10px; - margin: auto; - max-width: $toast-max-width; position: absolute; right: 10px; - transform: translate3d(0, 100%, 0); + bottom: 10px; + left: 10px; z-index: $z-index-overlay-wrapper; + display: block; + + margin: auto; + + max-width: $toast-max-width; + + border-radius: $toast-ios-border-radius; + + background: $toast-ios-background; + + transform: translate3d(0, 100%, 0); } .toast-message { - color: $toast-ios-title-color; - font-size: $toast-ios-title-font-size; padding: $toast-ios-title-padding; + + font-size: $toast-ios-title-font-size; + + color: $toast-ios-title-color; } diff --git a/ionic/components/toast/toast.md.scss b/ionic/components/toast/toast.md.scss index a50b34b29f..e740d17efa 100644 --- a/ionic/components/toast/toast.md.scss +++ b/ionic/components/toast/toast.md.scss @@ -1,41 +1,51 @@ @import "../../globals.md"; +@import "./toast"; // Material Design Toast // -------------------------------------------------- + $toast-md-text-align: left !default; -$toast-md-background: #333333 !default; +$toast-md-background: #333 !default; $toast-md-group-margin-bottom: 8px !default; $toast-md-title-color: #fff !default; $toast-md-title-font-size: 1.5rem !default; $toast-md-title-padding: 19px 16px 17px !default; + ion-toast { - display: block; - height: $toast-width; - left: 0; position: absolute; top: 0; - width: $toast-width; + left: 0; z-index: $z-index-overlay; + display: block; + + width: $toast-width; + height: $toast-width; } .toast-wrapper { - background: $toast-md-background; - bottom: 0; - display: block; - left: 0; - margin: auto; - max-width: $toast-max-width; position: absolute; right: 0; - transform: translate3d(0, 100%, 0); - width: $toast-width; + bottom: 0; + left: 0; z-index: $z-index-overlay-wrapper; + display: block; + + margin: auto; + + width: $toast-width; + max-width: $toast-max-width; + + background: $toast-md-background; + + transform: translate3d(0, 100%, 0); } .toast-message { - color: $toast-md-title-color; - font-size: $toast-md-title-font-size; padding: $toast-md-title-padding; + + font-size: $toast-md-title-font-size; + + color: $toast-md-title-color; } diff --git a/ionic/components/toast/toast.scss b/ionic/components/toast/toast.scss index 3a09c7954e..9c146beaf2 100644 --- a/ionic/components/toast/toast.scss +++ b/ionic/components/toast/toast.scss @@ -1,28 +1,34 @@ -@import "../../globals.ios"; +@import "../../globals.core"; -// Action Sheet + +// Toast // -------------------------------------------------- $toast-width: 100% !default; $toast-max-width: 700px !default; + ion-toast { position: absolute; top: 0; left: 0; z-index: $z-index-overlay; + display: block; + width: $toast-width; height: $toast-width; } .toast-container { display: flex; + align-items: center; button { - font-size: 1.5rem; padding: 19px 16px 17px; + + font-size: 1.5rem; } } @@ -31,13 +37,16 @@ ion-toast { } .toast-wrapper { - bottom: 0; - display: block; - left: 0; - margin: auto; - max-width: $toast-max-width; position: absolute; right: 0; - transform: translate3d(0, 100%, 0); + bottom: 0; + left: 0; z-index: $z-index-overlay-wrapper; + display: block; + + margin: auto; + + max-width: $toast-max-width; + + transform: translate3d(0, 100%, 0); } diff --git a/ionic/components/toast/toast.wp.scss b/ionic/components/toast/toast.wp.scss index 86c82ebcd5..93c22c11aa 100644 --- a/ionic/components/toast/toast.wp.scss +++ b/ionic/components/toast/toast.wp.scss @@ -1,5 +1,9 @@ +@import "../../globals.wp"; +@import "./toast"; + // Windows Phone Toast // -------------------------------------------------- + $toast-wp-text-align: left !default; $toast-wp-background: rgba(0, 0, 0, 1) !default; $toast-wp-border-radius: 0 !default; @@ -9,23 +13,30 @@ $toast-wp-title-color: #fff !default; $toast-wp-title-font-size: 1.4rem !default; $toast-wp-title-padding: 1.5rem !default; + .toast-wrapper { - background: $toast-wp-background; - border-radius: $toast-wp-border-radius; - bottom: 0; - display: block; - left: 0; - margin: auto; - max-width: $toast-max-width; position: absolute; - transform: translate3d(0, 100%, 0); + bottom: 0; + left: 0; z-index: $z-index-overlay-wrapper; + display: block; + + margin: auto; + + max-width: $toast-max-width; + + border-radius: $toast-wp-border-radius; + background: $toast-wp-background; + + transform: translate3d(0, 100%, 0); } .toast-message { - color: $toast-wp-title-color; - font-size: $toast-wp-title-font-size; padding: $toast-wp-title-padding; + + font-size: $toast-wp-title-font-size; + + color: $toast-wp-title-color; } .toast-button {