mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
style(toast): update sass formatting
This commit is contained in:
@ -26,7 +26,6 @@
|
|||||||
"components/show-hide-when/show-hide-when",
|
"components/show-hide-when/show-hide-when",
|
||||||
"components/slides/slides",
|
"components/slides/slides",
|
||||||
"components/spinner/spinner",
|
"components/spinner/spinner",
|
||||||
"components/toast/toast",
|
|
||||||
"components/virtual-scroll/virtual-scroll";
|
"components/virtual-scroll/virtual-scroll";
|
||||||
|
|
||||||
|
|
||||||
|
@ -90,7 +90,7 @@ tabbar {
|
|||||||
ion-badge,
|
ion-badge,
|
||||||
ion-icon,
|
ion-icon,
|
||||||
span {
|
span {
|
||||||
opacity: 0.4;
|
opacity: .4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,39 +1,52 @@
|
|||||||
|
@import "../../globals.ios";
|
||||||
|
@import "./toast";
|
||||||
|
|
||||||
// iOS Toast
|
// iOS Toast
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
$toast-ios-text-align: left !default;
|
$toast-ios-text-align: left !default;
|
||||||
$toast-ios-background: rgba(0, 0, 0, 0.70) !default;
|
$toast-ios-background: rgba(0, 0, 0, .7) !default;
|
||||||
$toast-ios-border-radius: 0.65rem !default;
|
$toast-ios-border-radius: .65rem !default;
|
||||||
|
|
||||||
$toast-ios-title-color: #fff !default;
|
$toast-ios-title-color: #fff !default;
|
||||||
$toast-ios-title-font-size: 1.4rem !default;
|
$toast-ios-title-font-size: 1.4rem !default;
|
||||||
$toast-ios-title-padding: 1.5rem !default;
|
$toast-ios-title-padding: 1.5rem !default;
|
||||||
|
|
||||||
|
|
||||||
ion-toast {
|
ion-toast {
|
||||||
display: block;
|
|
||||||
height: $toast-width;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: $toast-width;
|
left: 0;
|
||||||
z-index: $z-index-overlay;
|
z-index: $z-index-overlay;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: $toast-width;
|
||||||
|
height: $toast-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-wrapper {
|
.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;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
transform: translate3d(0, 100%, 0);
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
z-index: $z-index-overlay-wrapper;
|
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 {
|
.toast-message {
|
||||||
color: $toast-ios-title-color;
|
|
||||||
font-size: $toast-ios-title-font-size;
|
|
||||||
padding: $toast-ios-title-padding;
|
padding: $toast-ios-title-padding;
|
||||||
|
|
||||||
|
font-size: $toast-ios-title-font-size;
|
||||||
|
|
||||||
|
color: $toast-ios-title-color;
|
||||||
}
|
}
|
||||||
|
@ -1,41 +1,51 @@
|
|||||||
@import "../../globals.md";
|
@import "../../globals.md";
|
||||||
|
@import "./toast";
|
||||||
|
|
||||||
// Material Design Toast
|
// Material Design Toast
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
$toast-md-text-align: left !default;
|
$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-group-margin-bottom: 8px !default;
|
||||||
|
|
||||||
$toast-md-title-color: #fff !default;
|
$toast-md-title-color: #fff !default;
|
||||||
$toast-md-title-font-size: 1.5rem !default;
|
$toast-md-title-font-size: 1.5rem !default;
|
||||||
$toast-md-title-padding: 19px 16px 17px !default;
|
$toast-md-title-padding: 19px 16px 17px !default;
|
||||||
|
|
||||||
|
|
||||||
ion-toast {
|
ion-toast {
|
||||||
display: block;
|
|
||||||
height: $toast-width;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: $toast-width;
|
left: 0;
|
||||||
z-index: $z-index-overlay;
|
z-index: $z-index-overlay;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: $toast-width;
|
||||||
|
height: $toast-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-wrapper {
|
.toast-wrapper {
|
||||||
background: $toast-md-background;
|
|
||||||
bottom: 0;
|
|
||||||
display: block;
|
|
||||||
left: 0;
|
|
||||||
margin: auto;
|
|
||||||
max-width: $toast-max-width;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
transform: translate3d(0, 100%, 0);
|
bottom: 0;
|
||||||
width: $toast-width;
|
left: 0;
|
||||||
z-index: $z-index-overlay-wrapper;
|
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 {
|
.toast-message {
|
||||||
color: $toast-md-title-color;
|
|
||||||
font-size: $toast-md-title-font-size;
|
|
||||||
padding: $toast-md-title-padding;
|
padding: $toast-md-title-padding;
|
||||||
|
|
||||||
|
font-size: $toast-md-title-font-size;
|
||||||
|
|
||||||
|
color: $toast-md-title-color;
|
||||||
}
|
}
|
||||||
|
@ -1,28 +1,34 @@
|
|||||||
@import "../../globals.ios";
|
@import "../../globals.core";
|
||||||
|
|
||||||
// Action Sheet
|
|
||||||
|
// Toast
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
$toast-width: 100% !default;
|
$toast-width: 100% !default;
|
||||||
$toast-max-width: 700px !default;
|
$toast-max-width: 700px !default;
|
||||||
|
|
||||||
|
|
||||||
ion-toast {
|
ion-toast {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: $z-index-overlay;
|
z-index: $z-index-overlay;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
width: $toast-width;
|
width: $toast-width;
|
||||||
height: $toast-width;
|
height: $toast-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-container {
|
.toast-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-size: 1.5rem;
|
|
||||||
padding: 19px 16px 17px;
|
padding: 19px 16px 17px;
|
||||||
|
|
||||||
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31,13 +37,16 @@ ion-toast {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toast-wrapper {
|
.toast-wrapper {
|
||||||
bottom: 0;
|
|
||||||
display: block;
|
|
||||||
left: 0;
|
|
||||||
margin: auto;
|
|
||||||
max-width: $toast-max-width;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
transform: translate3d(0, 100%, 0);
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
z-index: $z-index-overlay-wrapper;
|
z-index: $z-index-overlay-wrapper;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
max-width: $toast-max-width;
|
||||||
|
|
||||||
|
transform: translate3d(0, 100%, 0);
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
|
@import "../../globals.wp";
|
||||||
|
@import "./toast";
|
||||||
|
|
||||||
// Windows Phone Toast
|
// Windows Phone Toast
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
$toast-wp-text-align: left !default;
|
$toast-wp-text-align: left !default;
|
||||||
$toast-wp-background: rgba(0, 0, 0, 1) !default;
|
$toast-wp-background: rgba(0, 0, 0, 1) !default;
|
||||||
$toast-wp-border-radius: 0 !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-font-size: 1.4rem !default;
|
||||||
$toast-wp-title-padding: 1.5rem !default;
|
$toast-wp-title-padding: 1.5rem !default;
|
||||||
|
|
||||||
|
|
||||||
.toast-wrapper {
|
.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;
|
position: absolute;
|
||||||
transform: translate3d(0, 100%, 0);
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
z-index: $z-index-overlay-wrapper;
|
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 {
|
.toast-message {
|
||||||
color: $toast-wp-title-color;
|
|
||||||
font-size: $toast-wp-title-font-size;
|
|
||||||
padding: $toast-wp-title-padding;
|
padding: $toast-wp-title-padding;
|
||||||
|
|
||||||
|
font-size: $toast-wp-title-font-size;
|
||||||
|
|
||||||
|
color: $toast-wp-title-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-button {
|
.toast-button {
|
||||||
|
Reference in New Issue
Block a user