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 | @use 'sass:math';
|
27 | @use '@material/elevation/mixins' as elevation-mixins;
|
28 | @use '@material/feature-targeting/feature-targeting';
|
29 | @use '@material/ripple/ripple-theme';
|
30 | @use '@material/rtl/rtl';
|
31 | @use '@material/list/mixins' as list-mixins;
|
32 | @use '@material/list/variables' as list-variables;
|
33 | @use '@material/ripple/ripple';
|
34 | @use '@material/theme/theme';
|
35 | @use '@material/theme/custom-properties';
|
36 | @use './menu-custom-properties';
|
37 | @use './variables';
|
38 |
|
39 | @mixin core-styles($query: feature-targeting.all()) {
|
40 | $feat-color: feature-targeting.create-target($query, color);
|
41 | $feat-structure: feature-targeting.create-target($query, structure);
|
42 |
|
43 | @include ripple.common($query);
|
44 |
|
45 | @include elevation-mixins.overlay-common($query);
|
46 |
|
47 |
|
48 | .mdc-menu {
|
49 | @include list-mixins.deprecated-item-meta-ink-color(
|
50 | variables.$ink-color,
|
51 | $query
|
52 | );
|
53 | @include list-mixins.deprecated-item-graphic-ink-color(
|
54 | variables.$ink-color,
|
55 | $query
|
56 | );
|
57 | @include min-width(variables.$min-width, $query: $query);
|
58 | @include open-item-opacity(variables.$open-item-opacity, $query: $query);
|
59 |
|
60 | .mdc-deprecated-list {
|
61 | @include list-mixins.deprecated-item-primary-text-ink-color(
|
62 | variables.$ink-color,
|
63 | $query
|
64 | );
|
65 | }
|
66 |
|
67 | .mdc-deprecated-list,
|
68 | .mdc-list {
|
69 | @include elevation-mixins.overlay-surface-position($query: $query);
|
70 | @include elevation-mixins.overlay-dimensions(100%, $query: $query);
|
71 | }
|
72 |
|
73 | .mdc-deprecated-list-divider {
|
74 | @include feature-targeting.targets($feat-structure) {
|
75 | margin: 8px 0;
|
76 | }
|
77 | }
|
78 |
|
79 | .mdc-deprecated-list-item {
|
80 | @include feature-targeting.targets($feat-structure) {
|
81 | user-select: none;
|
82 | }
|
83 | }
|
84 |
|
85 | .mdc-deprecated-list-item--disabled {
|
86 | @include feature-targeting.targets($feat-structure) {
|
87 | cursor: auto;
|
88 | }
|
89 | }
|
90 |
|
91 |
|
92 | a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,
|
93 | a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic {
|
94 | @include feature-targeting.targets($feat-structure) {
|
95 | pointer-events: none;
|
96 | }
|
97 | }
|
98 |
|
99 | }
|
100 |
|
101 |
|
102 | .mdc-menu__selection-group {
|
103 | @include feature-targeting.targets($feat-structure) {
|
104 | padding: 0;
|
105 | fill: currentColor;
|
106 | }
|
107 |
|
108 | .mdc-deprecated-list-item {
|
109 | @include feature-targeting.targets($feat-structure) {
|
110 | @include rtl.reflexive-property(
|
111 | padding,
|
112 | 56px,
|
113 | list-variables.$deprecated-side-padding
|
114 | );
|
115 | }
|
116 | }
|
117 |
|
118 |
|
119 | .mdc-menu__selection-group-icon {
|
120 | @include feature-targeting.targets($feat-structure) {
|
121 | @include rtl.reflexive-position(left, 16px);
|
122 |
|
123 | display: none;
|
124 | position: absolute;
|
125 |
|
126 | top: 50%;
|
127 | transform: translateY(-50%);
|
128 | }
|
129 | }
|
130 | }
|
131 |
|
132 |
|
133 |
|
134 | .mdc-menu-item--selected .mdc-menu__selection-group-icon {
|
135 | @include feature-targeting.targets($feat-structure) {
|
136 | display: inline;
|
137 | }
|
138 | }
|
139 | }
|
140 |
|
141 | @mixin open-item-opacity($opacity, $query: feature-targeting.all()) {
|
142 | $feat-color: feature-targeting.create-target($query, color);
|
143 |
|
144 | .mdc-menu-item--submenu-open {
|
145 | @include ripple-theme.states-background-selector(
|
146 | list-variables.$deprecated-ripple-target
|
147 | ) {
|
148 | @include feature-targeting.targets($feat-color) {
|
149 | opacity: $opacity;
|
150 | }
|
151 | }
|
152 | @include ripple-theme.states-background-selector(
|
153 | list-variables.$deprecated-temporary-ripple-target
|
154 | ) {
|
155 | @include feature-targeting.targets($feat-color) {
|
156 | opacity: $opacity;
|
157 | }
|
158 | }
|
159 | }
|
160 | }
|
161 |
|
162 | @mixin width($width, $query: feature-targeting.all()) {
|
163 | $feat-structure: feature-targeting.create-target($query, structure);
|
164 |
|
165 | @include feature-targeting.targets($feat-structure) {
|
166 | @if math.is-unitless($width) {
|
167 | width: $width * variables.$width-base;
|
168 | } @else {
|
169 | width: $width;
|
170 | }
|
171 | }
|
172 | }
|
173 |
|
174 |
|
175 |
|
176 | @mixin min-width($min-width, $query: feature-targeting.all()) {
|
177 | $feat-structure: feature-targeting.create-target($query, structure);
|
178 |
|
179 | @include feature-targeting.targets($feat-structure) {
|
180 | $min-width-custom-property: custom-properties.create(
|
181 | menu-custom-properties.$min-width,
|
182 | $min-width
|
183 | );
|
184 | @include theme.property(min-width, $min-width-custom-property);
|
185 | }
|
186 | }
|