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

alert updates

Browse Source
This commit is contained in:
Adam Bradley
2015-04-05 20:53:04 -05:00
parent b5dae74f90
commit 3d3f461a11
7 changed files with 78 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/alert/alert.js
View File

@ -9,17 +9,19 @@ export let AlertConfig = new ComponentConfig('alert')
})
@Template({
inline: `
<div class="pane-backdrop"></div>
<div class="alert-container">
<div class="alert-content">
Do you like cookies?
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="alert-container">
<div class="alert-header">
Do you like cookies?
</div>
<div class="alert-content">
Seriously, who does not like cookies.
</div>
<div class="alert-actions">
<button class="button">OK</button>
</div>
</div>
<div class="alert-actions">
<button class="button">OK</button>
</div>
</div>`
})
export class Alert {

19
src/components/alert/alert.scss
View File

@ -2,13 +2,13 @@
// Alert
// --------------------------------------------------
$alert-width: 40% !default;
$alert-min-width: 280px !default;
$alert-max-width: 460px !default;
$alert-content-min-height: 80px !default;
$alert-width: 40% !default;
$alert-min-width: 270px !default;
$alert-max-width: 460px !default;
$alert-content-margin: 24px !default;
.alert {
.alert .overlay-container {
@include flex-display();
@include flex-justify-content(center);
@include flex-align-items(center);
@ -26,9 +26,14 @@ $alert-content-min-height: 80px !default;
background: white;
}
.alert-header {
margin: $alert-content-margin;
font-size: 2rem;
font-weight: 400;
}
.alert-content {
padding: 15px;
min-height: $alert-content-min-height;
margin: $alert-content-margin;
}
.alert-actions {

21
src/components/alert/extensions/android.scss
View File

@ -1,8 +1,8 @@
// Alert
// Android Alert
// --------------------------------------------------
$alert-android-padding: 24px !default;
$alert-android-content-margin: 24px !default;
$alert-android-background-color: #fff !default;
$alert-android-border-radius: 4px !default;
$alert-android-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
@ -11,24 +11,27 @@ $alert-android-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !def
.alert-android {
.alert-container {
background: transparent;
box-shadow: $alert-android-box-shadow;
border-radius: $alert-android-border-radius;
overflow: hidden;
}
.alert-header {
margin: $alert-android-content-margin;
font-size: 2rem;
font-weight: 400;
}
.alert-content {
position: relative;
padding: $alert-android-padding;
border-top-left-radius: $alert-android-border-radius;
border-top-right-radius: $alert-android-border-radius;
margin: $alert-android-content-margin;
background: $alert-android-background-color;
}
.alert-actions {
min-height: 44px;
background: $alert-android-background-color;
border-bottom-left-radius: $alert-android-border-radius;
border-bottom-right-radius: $alert-android-border-radius;
padding: 12px 18px;
margin: $alert-android-content-margin;
.button {
border: 0;

23
src/components/alert/extensions/ios.scss
View File

@ -2,9 +2,8 @@
// Alert
// --------------------------------------------------
$alert-ios-width: 270px !default;
$alert-ios-min-height: 100px !default;
$alert-ios-padding: 15px !default;
$alert-ios-min-height: 80px !default;
$alert-ios-content-margin: 15px !default;
$alert-ios-background-color: #e8e8e8 !default;
$alert-ios-border-radius: 15px !default;
$alert-ios-button-color: #007aff !default;
@ -14,17 +13,20 @@ $alert-ios-button-font-size: 2rem !default;
.alert-ios {
.alert-container {
width: $alert-ios-width;
background: transparent;
border-radius: $alert-ios-border-radius;
background: $alert-ios-background-color;
text-align: center;
}
.alert-header {
margin: $alert-ios-content-margin;
}
.alert-content {
position: relative;
padding: $alert-ios-padding;
margin: $alert-ios-content-margin 0 0;
padding: 0 $alert-ios-content-margin $alert-ios-content-margin;
min-height: $alert-ios-min-height;
border-top-left-radius: $alert-ios-border-radius;
border-top-right-radius: $alert-ios-border-radius;
background: $alert-ios-background-color;
&:after {
position: absolute;
@ -47,9 +49,6 @@ $alert-ios-button-font-size: 2rem !default;
.alert-actions {
min-height: 44px;
background: $alert-ios-background-color;
border-bottom-left-radius: $alert-ios-border-radius;
border-bottom-right-radius: $alert-ios-border-radius;
.button {
@include flex(1);

29
src/components/app/_overlay.scss Normal file
View File

@ -0,0 +1,29 @@
// Overlay
// --------------------------------------------------
$overlay-background: #000 !default;
$overlay-opacity: 0.3 !default;
.overlay-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: $overlay-background;
opacity: $overlay-opacity;
}
.overlay-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}

14
src/components/app/_util.scss
View File

@ -8,20 +8,6 @@
}
.pane-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.3;
}
// Content Padding
// --------------------------------------------------

3
src/components/app/ionic.scss
View File

@ -18,7 +18,8 @@
"mixins/colors",
"util",
"scaffolding",
"typography";
"typography",
"overlay";
// Core Components