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

alert

Browse Source
This commit is contained in:
Adam Bradley
2015-04-04 23:09:23 -05:00
parent f62577b8c0
commit b5dae74f90
6 changed files with 71 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ export let AlertConfig = new ComponentConfig('alert')
Do you like cookies?
</div>
<div class="alert-buttons">
<div class="alert-actions">
<button class="button">OK</button>
</div>

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

@ -2,23 +2,36 @@
// Alert
// --------------------------------------------------
$alert-width: 40% !default;
$alert-min-width: 280px !default;
$alert-max-width: 460px !default;
$alert-content-min-height: 80px !default;
.alert {
@include flex-display();
@include flex-justify-content(center);
@include flex-align-items(center);
}
.alert-container {
position: absolute;
z-index: $z-index-alert;
display: block;
top: 35%;
left: 50%;
width: $alert-width;
min-width: $alert-min-width;
max-width: $alert-max-width;
margin-bottom: 60px;
background: white;
}
.alert-buttons {
.alert-content {
padding: 15px;
min-height: $alert-content-min-height;
}
.alert-actions {
@include flex-display();
@include flex-justify-content(center);
overflow: hidden;
.button {
@include flex-display();
@include flex(1);
}
@include flex-justify-content(flex-end);
}

38
src/components/alert/extensions/android.scss Normal file
View File

@ -0,0 +1,38 @@
// Alert
// --------------------------------------------------
$alert-android-padding: 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;
.alert-android {
.alert-container {
background: transparent;
box-shadow: $alert-android-box-shadow;
}
.alert-content {
position: relative;
padding: $alert-android-padding;
border-top-left-radius: $alert-android-border-radius;
border-top-right-radius: $alert-android-border-radius;
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;
.button {
border: 0;
}
}
}

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

@ -15,7 +15,7 @@ $alert-ios-button-font-size: 2rem !default;
.alert-container {
width: $alert-ios-width;
margin-left: -$alert-ios-width / 2;
background: transparent;
}
.alert-content {
@ -45,13 +45,14 @@ $alert-ios-button-font-size: 2rem !default;
}
}
.alert-buttons {
.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);
border: 0;
background: transparent;
font-size: $alert-ios-button-font-size;

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

@ -10,6 +10,10 @@
.pane-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: black;

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

@ -60,6 +60,7 @@
// Material Design Components
@import
"../alert/extensions/android",
"../button/extensions/android",
"../list/extensions/android",
"../item/extensions/android",