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

chore(popup): add material design popup to md core sass file & convert values to variables

Browse Source 
Added material design styling for the popup and removed some properties
from the core popup sass file
This commit is contained in:
Brandy Carney
2015-09-29 14:56:57 -04:00
parent 35d7bd857b
commit ee8403c6e6
4 changed files with 92 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ionic/components/popup/modes/ios.scss
View File

@ -2,20 +2,43 @@
// iOS Popups
// --------------------------------------------------
$popup-ios-max-width: 280px !default;
$popup-ios-background: rgba(0,0,0,0) !default;
$popup-ios-border-radius: 13px !default;
$popup-ios-background-color: #f8f8f8 !default;
$popup-ios-head-text-align: center !default;
$popup-ios-title-font-size: 15px !default;
$popup-ios-body-text-color: inherit !default;
$popup-ios-button-text-color: color(primary) !default;
$popup-ios-button-min-height: 45px !default;
popup-wrapper {
border-radius: $popup-ios-border-radius;
background-color: $popup-ios-background-color;
ion-popup {
background: $popup-ios-background;
popup-wrapper {
border-radius: $popup-ios-border-radius;
background-color: $popup-ios-background-color;
max-width: $popup-ios-max-width;
}
}
.popup-head {
text-align: $popup-ios-head-text-align;
padding-top: 24px;
}
.popup-title {
font-size: $popup-ios-title-font-size;
}
.popup-body {
padding: 10px;
color: $popup-ios-body-text-color;
}
.popup-body:empty {
padding: 0;
}
@ -27,7 +50,7 @@ popup-wrapper {
button {
background-color: transparent;
color: $popup-ios-button-text-color;
font-size: 14px;
min-height: $popup-ios-button-min-height;
&:last-child {
font-weight: bold;

62
ionic/components/popup/modes/md.scss
View File

@ -2,17 +2,44 @@
// Material Design Popups
// --------------------------------------------------
$popup-md-border-radius: 13px !default;
$popup-md-background-color: #f8f8f8 !default;
$popup-md-max-width: 280px !default;
$popup-md-background: rgba(0,0,0,0.5) !default;
$popup-md-border-radius: 2px !default;
$popup-md-background-color: #fafafa !default;
$popup-md-box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.4) !default;
$popup-md-head-text-align: left !default;
$popup-md-title-font-size: 20px !default;
$popup-md-body-text-color: rgba(0,0,0,.5) !default;
$popup-md-button-text-color: color(primary) !default;
$popup-md-button-min-height: 36px !default;
popup-wrapper {
border-radius: $popup-md-border-radius;
background-color: $popup-md-background-color;
ion-popup {
background: $popup-md-background;
popup-wrapper {
max-width: $popup-md-max-width;
border-radius: $popup-md-border-radius;
background-color: $popup-md-background-color;
box-shadow: $popup-md-box-shadow;
}
}
.popup-head {
padding-top: 24px;
text-align: $popup-md-head-text-align;
padding: 24px 24px 10px 24px;
}
.popup-title {
font-size: $popup-md-title-font-size;
}
.popup-body {
padding: 10px 24px 24px 24px;
color: $popup-md-body-text-color;
}
.popup-body:empty {
@ -20,16 +47,25 @@ popup-wrapper {
}
.popup-buttons {
padding: 0;
min-height: 0;
padding: 8px 8px 8px 24px;
justify-content: flex-end;
.button {
min-height: 42px;
font-size: 14px;
button {
-webkit-box-flex: initial;
-webkit-flex: intiial;
-ms-flex: initial;
flex: initial;
background-color: transparent;
color: $popup-md-button-text-color;
min-height: $popup-md-button-min-height;
box-shadow: none;
-webkit-transition: none;
transition: none;
&:last-child {
font-weight: bold;
margin-right: 0;
}
}
}

39
ionic/components/popup/popup.scss
View File

@ -2,14 +2,15 @@
// Popups
// --------------------------------------------------
$popup-width: 250px !default;
$popup-min-width: 250px !default;
$popup-max-width: 100% !default;
$popup-max-height: 90% !default;
$popup-border-radius: 0px !default;
$popup-background-color: rgba(255,255,255,0.9) !default;
$popup-sub-title-font-size: 11px !default;
$popup-button-border-radius: 2px !default;
$popup-button-line-height: 20px !default;
$popup-button-min-height: 45px !default;
$popup-button-font-size: 14px !default;
$popup-button-margin-right: 8px !default;
ion-popup {
@ -19,7 +20,6 @@ ion-popup {
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0);
display: flex;
justify-content: center;
@ -27,12 +27,9 @@ ion-popup {
popup-wrapper {
z-index: $z-index-overlay-wrapper;
width: $popup-width;
max-width: 100%;
max-height: 90%;
border-radius: $popup-border-radius;
background-color: $popup-background-color;
min-width: $popup-min-width;
max-width: $popup-max-width;
max-height: $popup-max-height;
display: flex;
flex-direction: column;
@ -46,44 +43,38 @@ ion-popup {
.popup-head {
padding: 15px 10px;
text-align: center;
}
h3.popup-title {
.popup-title {
margin: 0;
padding: 0;
font-size: 15px;
}
.popup-sub-title {
margin: 5px 0 0 0;
padding: 0;
font-weight: normal;
font-size: 11px;
font-size: $popup-sub-title-font-size;
}
.popup-body {
padding: 10px;
overflow: auto;
}
.popup-buttons {
display: flex;
flex-direction: row;
padding: 10px;
min-height: $popup-button-min-height + 20;
button {
flex: 1;
display: block;
min-height: $popup-button-min-height;
border-radius: $popup-button-border-radius;
margin: 0;
line-height: $popup-button-line-height;
margin-right: 5px;
font-size: $popup-button-font-size;
margin-right: $popup-button-margin-right;
&:last-child {
margin-right: 0px;
margin-right: 0;
}
}
}

1
ionic/ionic.md.scss
View File

@ -13,6 +13,7 @@
"components/checkbox/modes/md",
"components/text-input/modes/md",
"components/nav-bar/modes/md",
"components/popup/modes/md",
"components/radio/modes/md",
"components/switch/modes/md",
"components/tabs/modes/md",