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

action menu

Browse Source
This commit is contained in:
Adam Bradley
2015-07-21 10:47:07 -05:00
parent faa303356b
commit 3b8a5a503d
6 changed files with 62 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ionic/components/action-menu/action-menu.scss
View File

@ -10,9 +10,6 @@ $action-menu-button-text-color: #007aff !default;
$action-menu-backdrop-color: #000 !default; $action-menu-backdrop-color: #000 !default;
$action-menu-backdrop-active-opacity: 0.4 !default; $action-menu-backdrop-active-opacity: 0.4 !default;
$action-menu-margin: 8px !default;
$action-menu-border-radius: 4px !default;
$action-menu-options-bg-color: #f1f2f3 !default; $action-menu-options-bg-color: #f1f2f3 !default;
$action-menu-options-bg-active-color: #e4e5e7 !default; $action-menu-options-bg-active-color: #e4e5e7 !default;
$action-menu-options-text-color: #007aff !default; $action-menu-options-text-color: #007aff !default;
@ -52,8 +49,6 @@ $action-menu-options-border-color: #d1d3d6 !default;
} }
.action-menu-container { .action-menu-container {
margin-left: $action-menu-margin;
margin-right: $action-menu-margin;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
@ -72,12 +67,6 @@ $action-menu-options-border-color: #d1d3d6 !default;
&:hover { &:hover {
color: $action-menu-options-text-color; color: $action-menu-options-text-color;
} }
&.destructive {
color: #ff3b30;
&:hover {
color: #ff3b30;
}
}
} }
button.activated, button.activated,
@ -95,15 +84,13 @@ $action-menu-options-border-color: #d1d3d6 !default;
} }
.action-menu-title { .action-menu-title {
padding: $action-menu-margin * 2; padding: 10px;
color: #8f8f8f; color: #8f8f8f;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
} }
.action-menu-group { .action-menu-group {
margin-bottom: $action-menu-margin;
border-radius: $action-menu-border-radius;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;

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

@ -2,21 +2,23 @@
// iOS Action Menu // iOS Action Menu
// -------------------------------------------------- // --------------------------------------------------
$action-menu-ios-group-margin: 8px !default; $action-menu-ios-group-margin: 10px !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-background-active-color: #ebebeb !default;
$action-menu-ios-height: 5.6rem !default;
$action-menu-ios-padding: 1.8rem !default;
$action-menu-ios-border-color: #d2d2d6 !default; $action-menu-ios-border-color: #d2d2d6 !default;
$action-menu-ios-border-radius: 10px !default; $action-menu-ios-border-radius: 1.3rem !default;
$action-menu-ios-title-color: #8a8a8a !default; $action-menu-ios-title-color: #5f5f5f !default;
$action-menu-ios-title-font-size: 1.3rem !default; $action-menu-ios-title-font-size: 1.2rem !default;
$action-menu-ios-button-color: #007aff !default; $action-menu-ios-button-text-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;
@ -25,41 +27,51 @@ $action-menu-ios-option-height: 50px !default;
padding: 0 $action-menu-ios-group-margin; padding: 0 $action-menu-ios-group-margin;
} }
button {
min-height: $action-menu-ios-height;
padding: $action-menu-ios-padding;
margin: 0;
border: 0;
background: transparent;
&:active,
&.activated {
background: $action-menu-ios-background-active-color;
}
}
.action-menu-group { .action-menu-group {
margin-top: $action-menu-ios-group-margin; margin-bottom: $action-menu-ios-group-margin - 2;
margin-bottom: $action-menu-ios-group-margin;
border-radius: $action-menu-ios-border-radius; border-radius: $action-menu-ios-border-radius;
} }
.action-menu-group:last-child {
margin-bottom: $action-menu-ios-group-margin;
}
.action-menu-title, .action-menu-title,
.action-menu-option { .action-menu-option {
position: relative; min-height: $action-menu-ios-height;
/*
display: flex;
justify-content: center;
align-items: center;
*/
margin: 0;
border: 0;
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;
@include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border); @include hairline(bottom, $action-menu-ios-border-color);
} }
.action-menu-title { .action-menu-title {
padding: 2rem;
font-size: $action-menu-ios-title-font-size; font-size: $action-menu-ios-title-font-size;
font-weight: bold; font-weight: 500;
color: $action-menu-ios-title-color; color: $action-menu-ios-title-color;
border-radius: 0; border-radius: 0;
} }
.action-menu-option { .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-text-color;
border-radius: 0; border-radius: 0;
} }

37
ionic/components/app/mixins/util.scss
View File

@ -46,49 +46,64 @@
// -------------------------------------------------- // --------------------------------------------------
@mixin hairline($placement, $line-color, $z-index: 999) { @mixin hairline($placement, $line-color, $z-index: 999) {
// use $line-color: none to override existing hairline settings // border-width: 1px will actually create 2 device pixels on retina
// this nifty trick sets an actual 1px border on hi-res displays
position: relative;
@if $placement == top { @if $placement == top {
&:before { &:before {
@if $line-color == none { @if $line-color == none {
background-color: inherit; border-top: none;
} @else { } @else {
position: absolute; position: absolute;
top: 0; top: 0;
right: auto;
bottom: auto; bottom: auto;
left: 0; left: 0;
z-index: $z-index; z-index: $z-index;
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
transform-origin: 50% 0%;
background-color: $line-color;
content: ''; content: '';
border-top: 1px solid $line-color;
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
border: none;
background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
} }
} }
} @else if $placement == bottom { } @else if $placement == bottom {
&:after { &:after {
@if $line-color == none { @if $line-color == none {
background-color: inherit; border-bottom: none;
} @else { } @else {
position: absolute; position: absolute;
top: auto; top: auto;
right: auto;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $z-index; z-index: $z-index;
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
transform-origin: 50% 0%;
background-color: $line-color;
content: ''; content: '';
border-bottom: 1px solid $line-color;
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
border: none;
background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
} }
} }

4
ionic/components/item/extensions/ios.scss
View File

@ -24,7 +24,7 @@ $item-ios-border-color: $list-ios-border-color !default;
.item-content { .item-content {
min-height: $item-ios-min-height; min-height: $item-ios-min-height;
padding: 0; padding: 0;
@include hairline(bottom, $item-ios-border-color, $z-index-list-border); @include hairline(bottom, $item-ios-border-color);
} }
.item:last-of-type .item-content:after { .item:last-of-type .item-content:after {
@ -52,7 +52,7 @@ $item-ios-border-color: $list-ios-border-color !default;
.item-group-title { .item-group-title {
// TODO: This doesn't look great when it's a header for the first item // TODO: This doesn't look great when it's a header for the first item
@include hairline(bottom, $item-ios-border-color, $z-index-list-border); @include hairline(bottom, $item-ios-border-color);
} }
} }

6
ionic/components/nav-bar/extensions/ios.scss
View File

@ -11,12 +11,6 @@ $navbar-ios-border-color: #c4c4c4 !default;
// navbar on top, border on bottom (default) // navbar on top, border on bottom (default)
@include hairline(bottom, $navbar-ios-border-color); @include hairline(bottom, $navbar-ios-border-color);
// navbar on bottom, border on top
&.navbar-bottom:after {
top: 0;
bottom: auto;
}
} }
.navbar[mode="ios"] { .navbar[mode="ios"] {

14
ionic/components/toolbar/extensions/ios.scss
View File

@ -15,20 +15,6 @@ $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default;
.nav[mode="ios"] .toolbar-container {
min-height: $toolbar-ios-height;
// toolbar on top, border on bottom (default)
@include hairline(bottom, $toolbar-ios-border-color);
// toolbar on bottom, border on top
&.toolbar-bottom:after {
top: 0;
bottom: auto;
}
}
.toolbar[mode="ios"] { .toolbar[mode="ios"] {
.toolbar-title { .toolbar-title {