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

style(modal): follows ios/md design spec in large screens

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-11-19 18:25:46 +01:00
parent e46d8d6938
commit 11bb8ac587
3 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modal/modal.ios.scss
View File

@ -7,9 +7,15 @@
$modal-ios-background-color: $background-ios-color !default;
/// @prop - Border radius for the modal
$modal-ios-border-radius: 5px !default;
$modal-ios-border-radius: 10px !default;
.ios .modal-wrapper {
// hidden by default to prevent flickers, the animation will show it
transform: translate3d(0, 100%, 0);
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
overflow: hidden;
border-radius: $modal-ios-border-radius;
}
}

17
src/components/modal/modal.md.scss
View File

@ -4,9 +4,24 @@
// --------------------------------------------------
/// @prop - Background color for the modal
$modal-md-background-color: $background-md-color !default;
$modal-md-background-color: $background-md-color !default;
/// @prop - Box shadow color of the alert
$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default;
/// @prop - Box shadow of the alert
$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default;
.md .modal-wrapper {
opacity: .01;
transform: translate3d(0, 40px, 0);
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
overflow: hidden;
border-radius: 2px;
box-shadow: $modal-inset-box-shadow;
}
}

13
src/components/modal/modal.scss
View File

@ -4,22 +4,23 @@
// --------------------------------------------------
/// @prop - Min width of the modal inset
$modal-inset-min-width: 768px !default;
$modal-inset-min-width: 768px !default;
/// @prop - Min height of the small modal inset
$modal-inset-min-height-small: 600px !default;
$modal-inset-min-height-small: 600px !default;
/// @prop - Min height of the large modal inset
$modal-inset-min-height-large: 768px !default;
$modal-inset-min-height-large: 768px !default;
/// @prop - Width of the large modal inset
$modal-inset-width: 600px !default;
$modal-inset-width: 600px !default;
/// @prop - Height of the small modal inset
$modal-inset-height-small: 500px !default;
$modal-inset-height-small: 500px !default;
/// @prop - Height of the large modal inset
$modal-inset-height-large: 600px !default;
$modal-inset-height-large: 600px !default;
ion-modal {
position: absolute;