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

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? Do you like cookies?
</div> </div>
<div class="alert-buttons"> <div class="alert-actions">
<button class="button">OK</button> <button class="button">OK</button>
</div> </div>

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

@ -2,23 +2,36 @@
// Alert // 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 { .alert-container {
position: absolute;
z-index: $z-index-alert; z-index: $z-index-alert;
display: block; display: block;
top: 35%; width: $alert-width;
left: 50%; min-width: $alert-min-width;
max-width: $alert-max-width;
margin-bottom: 60px;
background: white;
} }
.alert-buttons { .alert-content {
@include flex-display(); padding: 15px;
@include flex-justify-content(center); min-height: $alert-content-min-height;
overflow: hidden; }
.button { .alert-actions {
@include flex-display(); @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 { .alert-container {
width: $alert-ios-width; width: $alert-ios-width;
margin-left: -$alert-ios-width / 2; background: transparent;
} }
.alert-content { .alert-content {
@ -45,13 +45,14 @@ $alert-ios-button-font-size: 2rem !default;
} }
} }
.alert-buttons { .alert-actions {
min-height: 44px; min-height: 44px;
background: $alert-ios-background-color; background: $alert-ios-background-color;
border-bottom-left-radius: $alert-ios-border-radius; border-bottom-left-radius: $alert-ios-border-radius;
border-bottom-right-radius: $alert-ios-border-radius; border-bottom-right-radius: $alert-ios-border-radius;
.button { .button {
@include flex(1);
border: 0; border: 0;
background: transparent; background: transparent;
font-size: $alert-ios-button-font-size; font-size: $alert-ios-button-font-size;

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

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

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

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