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

feat(action-menu): better styles for ios

Browse Source
This commit is contained in:
Max Lynch
2015-07-16 09:18:20 -05:00
parent b5c7db6204
commit a5e5789323
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
ionic/components/action-menu/extensions/ios.scss
View File

@ -6,16 +6,17 @@ $action-menu-ios-group-margin: 8px !default;
$action-menu-ios-background-color: rgba(243,243,243,.95) !default; $action-menu-ios-background-color: rgba(243,243,243,.95) !default;
$action-menu-ios-border-color: #d2d2d6 !default; $action-menu-ios-border-color: #d2d2d6 !default;
$action-menu-ios-border-radius: 4px !default; $action-menu-ios-border-radius: 10px !default;
$action-menu-ios-label-color: #8a8a8a !default; $action-menu-ios-title-color: #8a8a8a !default;
$action-menu-ios-label-font-size: 1.3rem !default; $action-menu-ios-title-font-size: 1.3rem !default;
$action-menu-ios-button-color: #007aff !default; $action-menu-ios-button-color: #007aff !default;
$action-menu-ios-button-font-size: 2rem !default; $action-menu-ios-button-font-size: 2rem !default;
$action-menu-ios-icon-font-size: 1.4em !default; $action-menu-ios-icon-font-size: 1.4em !default;
$action-menu-ios-option-height: 50px !default;
.action-menu[mode="ios"] { .action-menu[mode="ios"] {
text-align: center; text-align: center;
@ -27,18 +28,21 @@ $action-menu-ios-icon-font-size: 1.4em !default;
.action-menu-group { .action-menu-group {
margin-top: $action-menu-ios-group-margin; margin-top: $action-menu-ios-group-margin;
margin-bottom: $action-menu-ios-group-margin; margin-bottom: $action-menu-ios-group-margin;
border-radius: $action-menu-ios-border-radius;
} }
.action-menu-label, .action-menu-title,
.action-menu-button { .action-menu-option {
position: relative; position: relative;
/*
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
*/
margin: 0; margin: 0;
border: 0; border: 0;
min-height: 44px; min-height: $action-menu-ios-option-height;
background: $action-menu-ios-background-color; background: $action-menu-ios-background-color;
font-weight: 400; font-weight: 400;
@ -46,25 +50,26 @@ $action-menu-ios-icon-font-size: 1.4em !default;
@include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border); @include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border);
} }
.action-menu-label { .action-menu-title {
font-size: $action-menu-ios-label-font-size; font-size: $action-menu-ios-title-font-size;
color: $action-menu-ios-label-color; font-weight: bold;
color: $action-menu-ios-title-color;
border-radius: 0; border-radius: 0;
} }
.action-menu-button { .action-menu-option {
font-size: $action-menu-ios-button-font-size; font-size: $action-menu-ios-button-font-size;
color: $action-menu-ios-button-color; color: $action-menu-ios-button-color;
border-radius: 0; border-radius: 0;
} }
.action-menu-label:first-child, .action-menu-title:first-child,
.action-menu-button:first-child { .action-menu-button:first-child {
border-top-left-radius: $action-menu-ios-border-radius; border-top-left-radius: $action-menu-ios-border-radius;
border-top-right-radius: $action-menu-ios-border-radius; border-top-right-radius: $action-menu-ios-border-radius;
} }
.action-menu-label:last-child, .action-menu-title:last-child,
.action-menu-button:last-child { .action-menu-button:last-child {
border-bottom-left-radius: $action-menu-ios-border-radius; border-bottom-left-radius: $action-menu-ios-border-radius;
border-bottom-right-radius: $action-menu-ios-border-radius; border-bottom-right-radius: $action-menu-ios-border-radius;