javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(toast): update sass formatting

Browse Source
This commit is contained in:
Adam Bradley
2016-04-21 09:34:17 -05:00
parent 219059c5b0
commit 95af318d3e
6 changed files with 94 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.core.scss
View File

@ -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";

2
ionic/components/tabs/tabs.scss
View File

@ -90,7 +90,7 @@ tabbar {
ion-badge,
ion-icon,
span {
opacity: 0.4;
opacity: .4;
}
}

45
ionic/components/toast/toast.ios.scss
View File

@ -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;
}

40
ionic/components/toast/toast.md.scss
View File

@ -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;
}

27
ionic/components/toast/toast.scss
View File

@ -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);
}

31
ionic/components/toast/toast.wp.scss
View File

@ -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 {