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

action-menu

Browse Source
This commit is contained in:
Adam Bradley
2015-04-05 21:09:58 -05:00
parent 3d3f461a11
commit b43d4a0edb
3 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/action-menu/action-menu.js
View File

@ -9,7 +9,8 @@ export let ActionMenuConfig = new ComponentConfig('action-menu')
}) })
@Template({ @Template({
inline: ` inline: `
<div class="pane-backdrop"></div> <div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="action-menu-container"> <div class="action-menu-container">
<div class="action-menu-group"> <div class="action-menu-group">
@ -27,7 +28,7 @@ export let ActionMenuConfig = new ComponentConfig('action-menu')
<div class="action-menu-group"> <div class="action-menu-group">
<button class="button action-menu-button">Button 1</button> <button class="button action-menu-button">Button 1</button>
</div> </div>
</div>
</div>` </div>`
}) })
export class ActionMenu { export class ActionMenu {

9
src/components/action-menu/action-menu.scss
View File

@ -2,6 +2,8 @@
// Action Menu // Action Menu
// -------------------------------------------------- // --------------------------------------------------
$action-menu-width: 100% !default;
$action-menu-max-width: 520px !default;
$action-menu-background-color: rgba(243,243,243,.95) !default; $action-menu-background-color: rgba(243,243,243,.95) !default;
$action-menu-button-text-color: #007aff !default; $action-menu-button-text-color: #007aff !default;
@ -14,6 +16,13 @@ $action-menu-button-text-color: #007aff !default;
width: 100%; width: 100%;
} }
.action-menu-group {
width: $action-menu-width;
max-width: $action-menu-max-width;
margin-right: auto;
margin-left: auto;
}
.action-menu-group .action-menu-label { .action-menu-group .action-menu-label {
display: block; display: block;
width: 100%; width: 100%;

6
src/components/action-menu/extensions/ios.scss
View File

@ -19,7 +19,8 @@ $action-menu-ios-button-font-size: 2rem !default;
text-align: center; text-align: center;
.action-menu-group { .action-menu-group {
margin: $action-menu-ios-group-margin; margin-top: $action-menu-ios-group-margin;
margin-bottom: $action-menu-ios-group-margin;
} }
.action-menu-label, .action-menu-label,
@ -29,6 +30,7 @@ $action-menu-ios-button-font-size: 2rem !default;
@include flex-justify-content(center); @include flex-justify-content(center);
@include flex-align-items(center); @include flex-align-items(center);
margin: 0;
border: 0; border: 0;
min-height: 44px; min-height: 44px;
@ -57,11 +59,13 @@ $action-menu-ios-button-font-size: 2rem !default;
.action-menu-label { .action-menu-label {
font-size: $action-menu-ios-label-font-size; font-size: $action-menu-ios-label-font-size;
color: $action-menu-ios-label-color; color: $action-menu-ios-label-color;
border-radius: 0;
} }
.action-menu-button { .action-menu-button {
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;
} }
.action-menu-label:first-child, .action-menu-label:first-child,