-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
menu.scss
134 lines (112 loc) · 4.2 KB
/
menu.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@use 'sass:map';
@use '@material/menu-surface' as mdc-menu-surface;
@use '@material/list/evolution-mixins' as mdc-list-mixins;
@use '@material/list/evolution-variables' as mdc-list-variables;
@use '../../material/core/style/menu-common';
@use '../../material/core/style/button-common';
@use '../../cdk/a11y';
@use '../mdc-helpers/mdc-helpers';
@include mdc-helpers.disable-fallback-declarations {
@include mdc-menu-surface.core-styles($query: structure);
}
// Prevent rendering mat-menu as it can affect the flex layout.
mat-menu {
display: none;
}
.mat-mdc-menu-content {
@include mdc-list-mixins.list-base($query: structure);
}
.mat-mdc-menu-panel {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
}
}
// We need to increase the specificity for these styles to ensure we are not overriden by MDC's
// .mdc-menu-surface styles. This can happen if the MDC styles are loaded in after our styles.
.mat-mdc-menu-panel.mat-mdc-menu-panel {
// Include Material's base menu panel styling which contain the `min-width`, `max-width` and some
// styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even
// though they're explicitly defined in spec.
@include menu-common.base;
// The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
position: static;
}
.mat-mdc-menu-item {
@include mdc-helpers.disable-fallback-declarations {
@include mdc-list-mixins.item-base;
@include mdc-list-mixins.item-spacing(
mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
}
// MDC's menu items are `<li>` nodes which don't need resets, however ours
// can be anything, including buttons, so we need to do the reset ourselves.
@include button-common.reset;
cursor: pointer;
width: 100%;
text-align: left;
box-sizing: border-box;
color: inherit;
font-size: inherit;
background: none;
text-decoration: none;
// Set the `min-height` here ourselves, instead of going through
// the `mdc-list-one-line-item-density` mixin, because it sets a `height`
// which doesn't work well with multi-line items.
$height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
min-height: map.get($height-config, default);
&[disabled] {
cursor: default;
// This is the same as `mdc-list-mixins.list-disabled-opacity` which
// we can't use directly, because it comes with some selectors.
opacity: mdc-list-variables.$content-disabled-opacity;
// The browser prevents clicks on disabled buttons from propagating which prevents the menu
// from closing, but clicks on child nodes still propagate which is inconsistent (see #16694).
// In order to keep the behavior consistent and prevent the menu from closing, we add an overlay
// on top of the content that will catch all the clicks while disabled.
&::before {
display: block;
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.mat-icon {
margin-right: mdc-list-variables.$side-padding;
}
[dir='rtl'] & {
text-align: right;
.mat-icon {
margin-right: 0;
margin-left: mdc-list-variables.$side-padding;
}
}
// Needs to be overwritten explicitly, because the style can
// leak in from the list and cause the text to truncate.
.mdc-list-item__primary-text {
white-space: normal;
}
@include a11y.high-contrast(active, off) {
$outline-width: 1px;
// We need to move the item 1px down, because Firefox seems to have
// an issue rendering the top part of the outline (see #21524).
margin-top: $outline-width;
&.cdk-program-focused,
&.cdk-keyboard-focused,
&-highlighted {
outline: dotted $outline-width;
}
}
}
.mat-mdc-menu-item-submenu-trigger {
@include menu-common.item-submenu-trigger(mdc-list-variables.$side-padding);
}
.mat-mdc-menu-submenu-icon {
@include menu-common.item-submenu-icon(mdc-list-variables.$side-padding);
}
// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-mdc-menu-item .mat-mdc-menu-ripple {
@include menu-common.item-ripple;
}