skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(menu): move common styles into core (#1600)

Browse Source
This commit is contained in:
Kara
2016-10-25 12:28:07 -07:00
committed by GitHub
parent b56f520f57
commit c6b4c2211f
2 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/style/_menu-common.scss
+45
View File
@@ -0,0 +1,45 @@
@import './variables';
@import './elevation';
@import './list-common';
/** The mixins below are shared between md-menu and md-select */
// menu width must be a multiple of 56px
$md-menu-overlay-min-width: 112px !default; // 56 * 2
$md-menu-overlay-max-width: 280px !default; // 56 * 5
$md-menu-item-height: 48px !default;
$md-menu-font-size: 16px !default;
$md-menu-side-padding: 16px !default;
$md-menu-vertical-padding: 8px !default;
@mixin md-menu-base() {
@include md-elevation(2);
min-width: $md-menu-overlay-min-width;
max-width: $md-menu-overlay-max-width;
overflow: auto;
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
padding-top: $md-menu-vertical-padding;
padding-bottom: $md-menu-vertical-padding;
}
@mixin md-menu-item-base() {
@include md-truncate-line();
display: flex;
flex-direction: row;
align-items: center;
height: $md-menu-item-height;
padding: 0 $md-menu-side-padding;
font-size: $md-menu-font-size;
font-family: $md-font-family;
text-align: start;
text-decoration: none; // necessary to reset anchor tags
&[disabled] {
cursor: default;
}
}
src/lib/menu/menu.scss
+5 -38
View File
@@ -1,55 +1,22 @@
// TODO(kara): update vars for desktop when MD team responds
// TODO(kara): animation for menu opening
@import '../core/style/variables';
@import '../core/style/elevation';
@import '../core/style/button-common';
@import '../core/style/sidenav-common';
@import '../core/style/list-common';
// menu width must be a multiple of 56px
$md-menu-overlay-min-width: 112px !default; // 56 * 2
$md-menu-overlay-max-width: 280px !default; // 56 * 5
$md-menu-item-height: 48px !default;
$md-menu-font-size: 16px !default;
$md-menu-side-padding: 16px !default;
$md-menu-vertical-padding: 8px !default;
@import '../core/style/menu-common';
.md-menu-panel {
@include md-elevation(2);
min-width: $md-menu-overlay-min-width;
max-width: $md-menu-overlay-max-width;
@include md-menu-base();
// max height must be 100% of the viewport height + one row height
max-height: calc(100vh + 48px);
overflow: auto;
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
padding-top: $md-menu-vertical-padding;
padding-bottom: $md-menu-vertical-padding;
}
[md-menu-item] {
@include md-button-reset();
@include md-truncate-line();
display: flex;
flex-direction: row;
align-items: center;
height: $md-menu-item-height;
padding: 0 $md-menu-side-padding;
font-size: $md-menu-font-size;
font-family: $md-font-family;
text-align: start;
text-decoration: none; // necessary to reset anchor tags
&[disabled] {
cursor: default;
}
@include md-menu-item-base();
}
button[md-menu-item] {
width: 100%;
}
}