J. css / md-menu.css

1
.md-menu {
2
 display: none;
3
 z-index: 2;
4
 box-sizing: border-box;
5
 cursor: default;
6
 padding: 0.25rem 0;
7
 border-radius:
8
  var(--md-sys-shape-corner-extra-small-default-size);
9
 background-color: var(--md-sys-color-surface-container-low);
10
 box-shadow: var(--md-box_shadow_level2);
11
 transform: translateY(-50%) scaleY(0);
12
 transition-timing-function:
13
  cubic-bezier(var(--md-sys-motion-easing-standard-x0),
14
   var(--md-sys-motion-easing-standard-y0),
15
   var(--md-sys-motion-easing-standard-x1),
16
   var(--md-sys-motion-easing-standard-y1));
17
 transition-property: display, transform;
18
 transition-behavior: allow-discrete;
19
 transition-duration: var(--md-sys-motion-duration-500);
20
}
21

  
22
.md-menu.open {

  
23
 display: block;

  
24
 transform: translateY(0) scaleY(1);

  
25
}

  
26

  
27
@starting-style {

  
28
 .md-menu.open {

  
29
  display: block;

  
30
  transform: translateY(-50%) scaleY(0);

  
31
 }

  
32
}

  
33

  
34
/* container */

  
35
.md-menu>*::after {

  
36
 content: "";

  
37
 position: absolute;

  
38
 z-index: -2;

  
39
 top: 0;

  
40
 right: 0;

  
41
 left: 0;

  
42
 bottom: 0;

  
43
}

  
44

  
45
/* container */

  
46
.md-menu>.selected::after {

  
47
 background-color: var(--md-sys-color-secondary-container);

  
48
}

  
49

  
50
/* label, shape */

  
51
.md-menu>* {

  
52
 position: relative;

  
53
 display: block;

  
54
 box-sizing: border-box;

  
55
 height: 3rem;

  
56
 line-height: 3rem;

  
57
 padding: 0 0.75rem;

  
58
 color: var(--md-sys-color-on-surface);

  
59
 font-family: var(--md-sys-typescale-label-large-font);

  
60
 font-weight: var(--md-sys-typescale-label-large-weight);

  
61
 font-size: var(--md-sys-typescale-label-large-size);

  
62
 font-style: var(--md-sys-typescale-label-large-font-style);

  
63
 letter-spacing: var(--md-sys-typescale-label-large-tracking);

  
64
 text-transform: var(--md-sys-typescale-label-large-text-transform);

  
65
 text-decoration: var(--md-sys-typescale-label-large-text-decoration);

  
66
 white-space: nowrap;

  
67
 text-overflow: ellipsis;

  
68
 overflow: hidden;

  
69
}

  
70

  
71
/* label, shape */

  
72
.md-menu>.selected {

  
73
 color: var(--md-sys-color-on-secondary-container);

  
74
}

  
75

  
76
/* state layer */

  
77
.md-menu>*::before {

  
78
 content: "";

  
79
 position: absolute;

  
80
 z-index: -1;

  
81
 top: 0;

  
82
 right: 0;

  
83
 left: 0;

  
84
 bottom: 0;

  
85
}

  
86

  
87
/* icon */

  
88
.md-menu>* span {

  
89
 position: relative;

  
90
 margin-right: 0.75rem;

  
91
 vertical-align: middle;

  
92
 color: var(--md-sys-color-on-surface-variant);

  
93
 font-size: 1.5rem;

  
94
 width: 1.5rem;

  
95
 height: 1.5rem;

  
96
}

  
97

  
98
/* icon */

  
99
.md-menu>.selected span {

  
100
 color: var(--md-sys-color-on-secondary-container);

  
101
}

  
102

  
103
/* state layer */

  
104
.md-menu>:hover::before {

  
105
 background-color: var(--md-sys-color-on-surface);

  
106
 opacity: var(--md-sys-state-hover-state-layer-opacity);

  
107
}

  
108

  
109
/* label, shape */

  
110
.md-menu>:hover {

  
111
 color: var(--md-sys-color-on-surface);

  
112
}

  
113

  
114
/* icon */

  
115
.md-menu>:hover span {

  
116
 color: var(--md-sys-color-on-surface-variant);

  
117
}

  
118

  
119
/* state layer */

  
120
.md-menu>:focus::before {

  
121
 background-color: var(--md-sys-color-on-surface);

  
122
 opacity: var(--md-sys-state-focus-state-layer-opacity);

  
123
}

  
124

  
125
/* label, shape */

  
126
.md-menu>:focus {

  
127
 color: var(--md-sys-color-on-surface);

  
128
 outline: none;

  
129
}

  
130

  
131
/* icon */

  
132
.md-menu>:focus span {

  
133
 color: var(--md-sys-color-on-surface-variant);

  
134
}

  
135

  
136
/* label, shape */

  
137
.md-menu>:active {

  
138
 background-position: center;

  
139
 background-image:

  
140
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);

  
141
 background-size: 100%;

  
142
 animation-name: md-ripple;

  
143
 animation-duration: var(--md-sys-motion-duration-500);

  
144
 color: var(--md-sys-color-on-surface);

  
145
}

  
146

  
147
/* state layer */

  
148
.md-menu>:active::before {

  
149
 background-color: var(--md-sys-color-on-surface);

  
150
 opacity: var(--md-sys-state-pressed-state-layer-opacity);

  
151
}

  
152

  
153

  
154
/* icon */

  
155
.md-menu>:active span {

  
156
 color: var(--md-sys-color-on-surface-variant);

  
157
}

  
158

  
159
.md-menu input[type="radio"] {

  
160
 appearance: none;

  
161
 transform: scaleX(0);

  
162
}

 


 
 
 
     skip_previous
    
 
     skip_next