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

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

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

@ -9,25 +9,26 @@ export let ActionMenuConfig = new ComponentConfig('action-menu')
})
@Template({
inline: `
<div class="pane-backdrop"></div>
<div class="action-menu-container">
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="action-menu-container">
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
</div>
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
</div>
<div class="action-menu-group">
<button class="button action-menu-button">Button 1</button>
</div>
</div>
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
</div>
<div class="action-menu-group">
<button class="button action-menu-button">Button 1</button>
</div>
</div>`
})
export class ActionMenu {

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

@ -2,8 +2,10 @@
// Action Menu
// --------------------------------------------------
$action-menu-background-color: rgba(243,243,243,.95) !default;
$action-menu-button-text-color: #007aff !default;
$action-menu-width: 100% !default;
$action-menu-max-width: 520px !default;
$action-menu-background-color: rgba(243,243,243,.95) !default;
$action-menu-button-text-color: #007aff !default;
.action-menu-container {
@ -14,6 +16,13 @@ $action-menu-button-text-color: #007aff !default;
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 {
display: block;
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;
.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,
@ -29,6 +30,7 @@ $action-menu-ios-button-font-size: 2rem !default;
@include flex-justify-content(center);
@include flex-align-items(center);
margin: 0;
border: 0;
min-height: 44px;
@ -57,11 +59,13 @@ $action-menu-ios-button-font-size: 2rem !default;
.action-menu-label {
font-size: $action-menu-ios-label-font-size;
color: $action-menu-ios-label-color;
border-radius: 0;
}
.action-menu-button {
font-size: $action-menu-ios-button-font-size;
color: $action-menu-ios-button-color;
border-radius: 0;
}
.action-menu-label:first-child,