javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(back-button): fix menu and back button alignment (#14268)

Browse Source 
* fix(): fix menu and back button alignment

* fix(button): remove button-text span
This commit is contained in:
Mike Hartington
2018-04-04 15:39:35 -04:00
committed by Brandy Carney
parent c15772651a
commit 57fbf6c396
7 changed files with 132 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
core/src/components/menu-button/menu-button.ios.scss
View File

@ -0,0 +1,39 @@
@import "./menu-button";
@import "./menu-button.ios.vars";
// iOS Menu Button
// --------------------------------------------------
.menu-button-ios .menu-button-inner {
@include padding(0);
@include margin(2px, 0, 0, 0);
z-index: $menu-button-ios-button-z-index;
overflow: visible;
min-height: 32px;
border: 0;
font-size: 17px;
line-height: 1;
color: $menu-button-ios-color;
background-color: transparent;
transform: translateZ(0);
&.activated {
opacity: .4;
}
}
.menu-button-ios ion-icon {
@include padding(0);
@include margin(0, -3px, 0, 0);
display: inherit;
font-size: 1.75em;
pointer-events: none;
}

10
core/src/components/menu-button/menu-button.ios.vars.scss Normal file
View File

@ -0,0 +1,10 @@
@import "../../themes/ionic.globals.ios";
// iOS Menu Button
// --------------------------------------------------
/// @prop - Z index of the Menu button
$menu-button-ios-button-z-index: $z-index-toolbar-buttons !default;
/// @prop - Text color of the Menu button
$menu-button-ios-color: ion-color($colors-ios, primary, base, ios) !default;

38
core/src/components/menu-button/menu-button.md.scss
View File

@ -0,0 +1,38 @@
@import "./menu-button";
@import "./menu-button.md.vars";
// MD Menu Button
// --------------------------------------------------
.menu-button-md .menu-button-inner {
@include margin(2px, 6px, 0, 0);
@include padding(0, 5px);
min-width: 44px;
height: 32px;
border: 0;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: $menu-button-md-color;
background-color: transparent;
box-shadow: none;
&.activated {
opacity: 0.4;
}
}
.menu-button-md ion-icon {
@include padding-horizontal(null, 0.3em);
@include margin(0);
@include padding(0, 6px);
@include text-align(start);
font-size: 24px;
font-weight: normal;
line-height: 0.67;
pointer-events: none;
}

7
core/src/components/menu-button/menu-button.md.vars.scss Normal file
View File

@ -0,0 +1,7 @@
@import "../../themes/ionic.globals.md";
// Material Design Menu Button
// --------------------------------------------------
/// @prop - Text color of the Menu button
$menu-button-md-color: $toolbar-md-text-color !default;

36
core/src/components/menu-button/menu-button.scss Normal file
View File

@ -0,0 +1,36 @@
@import "../../themes/ionic.globals";
// Menu Button
// --------------------------------------------------
.menu-button button {
@include font-smoothing();
@include text-align(center);
@include appearance(none);
position: relative;
z-index: 0;
display: inline-flex;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
border: 0;
outline: none;
line-height: 1;
text-decoration: none;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
cursor: pointer;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
transition: background-color, opacity 100ms linear;
font-kerning: none;
user-select: none;
}