1 | .surface-tint { |
2 | background-color: var(--md-sys-color-surface-tint); |
3 | } |
4 | .surface-tint-text { |
5 | color: var(--md-sys-color-surface-tint); |
6 | } |
7 | .surface-tint-color { |
8 | background-color: var(--md-sys-color-surface-tint-color); |
9 | } |
10 | .surface-tint-color-text { |
11 | color: var(--md-sys-color-surface-tint-color); |
12 | } |
13 | .on-error-container { |
14 | background-color: var(--md-sys-color-on-error-container); |
15 | } |
16 | .on-error-container-text { |
17 | color: var(--md-sys-color-on-error-container); |
18 | } |
19 | .on-error { |
20 | background-color: var(--md-sys-color-on-error); |
21 | } |
22 | .on-error-text { |
23 | color: var(--md-sys-color-on-error); |
24 | } |
25 | .error-container { |
26 | background-color: var(--md-sys-color-error-container); |
27 | } |
28 | .error-container-text { |
29 | color: var(--md-sys-color-error-container); |
30 | } |
31 | .on-tertiary-container { |
32 | background-color: var(--md-sys-color-on-tertiary-container); |
33 | } |
34 | .on-tertiary-container-text { |
35 | color: var(--md-sys-color-on-tertiary-container); |
36 | } |
37 | .on-tertiary { |
38 | background-color: var(--md-sys-color-on-tertiary); |
39 | } |
40 | .on-tertiary-text { |
41 | color: var(--md-sys-color-on-tertiary); |
42 | } |
43 | .tertiary-container { |
44 | background-color: var(--md-sys-color-tertiary-container); |
45 | } |
46 | .tertiary-container-text { |
47 | color: var(--md-sys-color-tertiary-container); |
48 | } |
49 | .tertiary { |
50 | background-color: var(--md-sys-color-tertiary); |
51 | } |
52 | .tertiary-text { |
53 | color: var(--md-sys-color-tertiary); |
54 | } |
55 | .shadow { |
56 | background-color: var(--md-sys-color-shadow); |
57 | } |
58 | .shadow-text { |
59 | color: var(--md-sys-color-shadow); |
60 | } |
61 | .error { |
62 | background-color: var(--md-sys-color-error); |
63 | } |
64 | .error-text { |
65 | color: var(--md-sys-color-error); |
66 | } |
67 | .outline { |
68 | background-color: var(--md-sys-color-outline); |
69 | } |
70 | .outline-text { |
71 | color: var(--md-sys-color-outline); |
72 | } |
73 | .on-background { |
74 | background-color: var(--md-sys-color-on-background); |
75 | } |
76 | .on-background-text { |
77 | color: var(--md-sys-color-on-background); |
78 | } |
79 | .background { |
80 | background-color: var(--md-sys-color-background); |
81 | } |
82 | .background-text { |
83 | color: var(--md-sys-color-background); |
84 | } |
85 | .inverse-on-surface { |
86 | background-color: var(--md-sys-color-inverse-on-surface); |
87 | } |
88 | .inverse-on-surface-text { |
89 | color: var(--md-sys-color-inverse-on-surface); |
90 | } |
91 | .inverse-surface { |
92 | background-color: var(--md-sys-color-inverse-surface); |
93 | } |
94 | .inverse-surface-text { |
95 | color: var(--md-sys-color-inverse-surface); |
96 | } |
97 | .on-surface-variant { |
98 | background-color: var(--md-sys-color-on-surface-variant); |
99 | } |
100 | .on-surface-variant-text { |
101 | color: var(--md-sys-color-on-surface-variant); |
102 | } |
103 | .on-surface { |
104 | background-color: var(--md-sys-color-on-surface); |
105 | } |
106 | .on-surface-text { |
107 | color: var(--md-sys-color-on-surface); |
108 | } |
109 | .surface-variant { |
110 | background-color: var(--md-sys-color-surface-variant); |
111 | } |
112 | .surface-variant-text { |
113 | color: var(--md-sys-color-surface-variant); |
114 | } |
115 | .surface { |
116 | background-color: var(--md-sys-color-surface); |
117 | } |
118 | .surface-text { |
119 | color: var(--md-sys-color-surface); |
120 | } |
121 | .on-secondary-container { |
122 | background-color: var(--md-sys-color-on-secondary-container); |
123 | } |
124 | .on-secondary-container-text { |
125 | color: var(--md-sys-color-on-secondary-container); |
126 | } |
127 | .on-secondary { |
128 | background-color: var(--md-sys-color-on-secondary); |
129 | } |
130 | .on-secondary-text { |
131 | color: var(--md-sys-color-on-secondary); |
132 | } |
133 | .secondary-container { |
134 | background-color: var(--md-sys-color-secondary-container); |
135 | } |
136 | .secondary-container-text { |
137 | color: var(--md-sys-color-secondary-container); |
138 | } |
139 | .secondary { |
140 | background-color: var(--md-sys-color-secondary); |
141 | } |
142 | .secondary-text { |
143 | color: var(--md-sys-color-secondary); |
144 | } |
145 | .inverse-primary { |
146 | background-color: var(--md-sys-color-inverse-primary); |
147 | } |
148 | .inverse-primary-text { |
149 | color: var(--md-sys-color-inverse-primary); |
150 | } |
151 | .on-primary-container { |
152 | background-color: var(--md-sys-color-on-primary-container); |
153 | } |
154 | .on-primary-container-text { |
155 | color: var(--md-sys-color-on-primary-container); |
156 | } |
157 | .on-primary { |
158 | background-color: var(--md-sys-color-on-primary); |
159 | } |
160 | .on-primary-text { |
161 | color: var(--md-sys-color-on-primary); |
162 | } |
163 | .primary-container { |
164 | background-color: var(--md-sys-color-primary-container); |
165 | } |
166 | .primary-container-text { |
167 | color: var(--md-sys-color-primary-container); |
168 | } |
169 | .primary { |
170 | background-color: var(--md-sys-color-primary); |
171 | } |
172 | .primary-text { |
173 | color: var(--md-sys-color-primary); |
174 | } |
175 |
1 | /* |
2 | Copyright 2016 Google Inc. All rights reserved. |
3 | |
4 | Licensed under the Apache License, Version 2.0 (the "License"); |
5 | you may not use this file except in compliance with the License. |
6 | You may obtain a copy of the License at |
7 | |
8 | http://www.apache.org/licenses/LICENSE-2.0 |
9 | |
10 | Unless required by applicable law or agreed to in writing, software |
11 | distributed under the License is distributed on an "AS IS" BASIS, |
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 | See the License for the specific language governing permissions and |
14 | limitations under the License. |
15 | */ |
16 | |
17 | :root { |
18 | /* Surface tint color */ |
19 | --md-sys-elevation-surface-tint-color: var(--md-sys-color-primary); |
20 | /* +5 */ |
21 | --md-sys-elevation-level5-value: 12px; |
22 | --md-sys-elevation-level5-unit: 1px; |
23 | --md-sys-elevation-level5: 12px; |
24 | /* +4 */ |
25 | --md-sys-elevation-level4-value: 8px; |
26 | --md-sys-elevation-level4-unit: 1px; |
27 | --md-sys-elevation-level4: 8px; |
28 | /* +3 */ |
29 | --md-sys-elevation-level3-value: 6px; |
30 | --md-sys-elevation-level3-unit: 1px; |
31 | --md-sys-elevation-level3: 6px; |
32 | /* +2 */ |
33 | --md-sys-elevation-level2-value: 3px; |
34 | --md-sys-elevation-level2-unit: 1px; |
35 | --md-sys-elevation-level2: 3px; |
36 | /* +1 */ |
37 | --md-sys-elevation-level1-value: 1px; |
38 | --md-sys-elevation-level1-unit: 1px; |
39 | --md-sys-elevation-level1: 1px; |
40 | /* 0 */ |
41 | --md-sys-elevation-level0-value: 0px; |
42 | --md-sys-elevation-level0-unit: 1px; |
43 | --md-sys-elevation-level0: 0px; |
44 | } |
45 | .elevation-0 { |
46 | box-shadow: var(--md-sys-elevation-level0); |
47 | } |
48 | .elevation-1 { |
49 | box-shadow: var(--md-sys-elevation-level1); |
50 | } |
51 | .elevation-2 { |
52 | box-shadow: var(--md-sys-elevation-level2); |
53 | } |
54 | .elevation-3 { |
55 | box-shadow: var(--md-sys-elevation-level3); |
56 | } |
57 | .elevation-4 { |
58 | box-shadow: var(--md-sys-elevation-level4); |
59 | } |
60 | .elevation-5 { |
61 | box-shadow: var(--md-sys-elevation-level5); |
62 | } |
63 |
1 | @font-face { |
2 | font-family: 'Material Symbols Outlined'; |
3 | font-style: normal; |
4 | src: |
5 | url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'), |
6 | url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype'); |
7 | } |
8 | |
9 | .material-symbols-outlined { |
10 | font-family: 'Material Symbols Outlined'; |
11 | font-weight: normal; |
12 | font-style: normal; |
13 | font-size: 1.5rem; |
14 | width: 1.5rem; |
15 | height: 1.5rem; |
16 | /* Preferred icon size */ |
17 | display: inline-block; |
18 | line-height: 1; |
19 | text-transform: none; |
20 | letter-spacing: normal; |
21 | word-wrap: normal; |
22 | white-space: nowrap; |
23 | direction: ltr; |
24 | } |
1 | .md-cards { |
2 | margin: 0.5rem; |
3 | gap: 0.5rem; |
4 | display: grid; |
5 | grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); |
6 | } |
7 | |
8 | /* container */ |
9 | .md-cards>*::before { |
10 | content: ""; |
11 | position: absolute; |
12 | z-index: -2; |
13 | top: 0; |
14 | right: 0; |
15 | left: 0; |
16 | bottom: 0; |
17 | background-color: var(--md-sys-color-surface-variant); |
18 | } |
19 | |
20 | /* state layer */ |
21 | .md-cards>*::after { |
22 | content: ""; |
23 | position: absolute; |
24 | z-index: -1; |
25 | top: 0; |
26 | right: 0; |
27 | left: 0; |
28 | bottom: 0; |
29 | background-color: transparent; |
30 | } |
31 | |
32 | .md-cards>* { |
33 | position: relative; |
34 | display: block; |
35 | text-decoration: none; |
36 | color: var(--md-sys-color-on-surface-variant); |
37 | border-radius: 0.75rem; |
38 | overflow: hidden; |
39 | box-shadow: var(--md-box_shadow_level0); |
40 | } |
41 | |
42 | /* state layer */ |
43 | .md-cards>:hover::after { |
44 | background-color: var(--md-sys-color-on-surface-variant); |
45 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
46 | } |
47 | |
48 | .md-cards>a:hover { |
49 | box-shadow: var(--md-box_shadow_level1); |
50 | } |
51 | |
52 | /* state layer */ |
53 | .md-cards>:focus::after { |
54 | background-color: var(--md-sys-color-on-surface-variant); |
55 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
56 | } |
57 | |
58 | .md-cards>a:focus { |
59 | outline: none; |
60 | } |
61 | |
62 | /* state layer */ |
63 | .md-cards>:active::after { |
64 | background-color: var(--md-sys-color-on-surface-variant); |
65 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
66 | } |
67 | |
68 | .md-cards a:active { |
69 | background-position: center; |
70 | background-image: |
71 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
72 | background-size: 100%; |
73 | animation-name: md-ripple; |
74 | animation-duration: var(--md-sys-motion-duration-500); |
75 | box-shadow: var(--md-box_shadow_level0) !important; |
76 | } |
77 | |
78 | .md-cards>*>* { |
79 | display: block; |
80 | } |
81 | |
82 | .md-cards figure { |
83 | border-radius: 0.75rem; |
84 | padding: 0; |
85 | margin: 0; |
86 | width: 100%; |
87 | } |
88 | |
89 | .md-cards figure * { |
90 | border-radius: 0.75rem; |
91 | width: 100%; |
92 | } |
93 | |
94 | .md-cards .headline { |
95 | margin: 1rem; |
96 | font-family: var(--md-sys-typescale-headline-small-font); |
97 | font-weight: var(--md-sys-typescale-headline-small-weight); |
98 | font-size: var(--md-sys-typescale-headline-small-size); |
99 | font-style: var(--md-sys-typescale-headline-small-font-style); |
100 | letter-spacing: var(--md-sys-typescale-headline-small-tracking); |
101 | line-height: var(--md-sys-typescale-headline-small-line-height); |
102 | text-transform: var(--md-sys-typescale-headline-small-text-transform); |
103 | text-decoration: var(--md-sys-typescale-headline-small-text-decoration); |
104 | } |
105 | |
106 | .md-cards a .headline { |
107 | text-decoration: underline; |
108 | } |
109 | |
110 | .md-cards .supporting { |
111 | margin: 1rem; |
112 | font-family: var(--md-sys-typescale-body-large-font); |
113 | font-weight: var(--md-sys-typescale-body-large-weight); |
114 | font-size: var(--md-sys-typescale-body-large-size); |
115 | font-style: var(--md-sys-typescale-body-large-font-style); |
116 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
117 | line-height: var(--md-sys-typescale-body-large-line-height); |
118 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
119 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
120 | } |
1 | .md-fab-primary { |
2 | position: relative; |
3 | display: inline-block; |
4 | border: none; |
5 | width: 3.5rem; |
6 | height: 3.5rem; |
7 | border-radius: var(--md-sys-shape-corner-large-default-size); |
8 | overflow: hidden; |
9 | padding: 0; |
10 | padding-block: 0; |
11 | padding-inline: 0; |
12 | text-decoration: none; |
13 | background-color: var(--md-sys-color-primary-container); |
14 | box-shadow: var(--md-box_shadow_level3); |
15 | } |
16 | |
17 | .md-fab-primary[hidden] { |
18 | display: none; |
19 | } |
20 | |
21 | /* state layer */ |
22 | .md-fab-primary::after { |
23 | content: ""; |
24 | position: absolute; |
25 | top: 0; |
26 | right: 0; |
27 | left: 0; |
28 | bottom: 0; |
29 | } |
30 | |
31 | .md-fab-primary span { |
32 | position: relative; |
33 | color: var(--md-sys-color-on-primary-container); |
34 | } |
35 | |
36 | .md-fab-primary:hover { |
37 | box-shadow: var(--md-box_shadow_level4); |
38 | } |
39 | |
40 | .md-fab-primary:hover::after { |
41 | background-color: var(--md-sys-color-on-primary-container); |
42 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
43 | } |
44 | |
45 | .md-fab-primary:hover span { |
46 | color: var(--md-sys-color-on-primary-container); |
47 | } |
48 | |
49 | |
50 | .md-fab-primary:focus { |
51 | box-shadow: var(--md-box_shadow_level3); |
52 | outline:none; |
53 | /* outline: |
54 | var(--md-sys-color-secondary) var(--md-sys-state-focus-indicator-thickness); |
55 | outline-offset: var(--md-sys-state-focus-indicator-outer-offset); */ |
56 | } |
57 | |
58 | .md-fab-primary:focus::after { |
59 | background-color: var(--md-sys-color-on-primary-container); |
60 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
61 | } |
62 | |
63 | .md-fab-primary:focus span { |
64 | color: var(--md-sys-color-on-primary-container); |
65 | } |
66 | |
67 | .md-fab-primary:active { |
68 | box-shadow: var(--md-box_shadow_level3); |
69 | background-position: center; |
70 | background-image: |
71 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
72 | background-size: 100%; |
73 | animation-name: md-ripple; |
74 | animation-duration: var(--md-sys-motion-duration-500); |
75 | } |
76 | |
77 | .md-fab-primary:active::after { |
78 | background-color: var(--md-sys-color-on-primary-container); |
79 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
80 | } |
81 | |
82 | .md-fab-primary:active span { |
83 | color: var(--md-sys-color-on-primary-container); |
84 | } |
1 | /* container */ |
2 | .md-filled-button::before { |
3 | content: ""; |
4 | position: absolute; |
5 | z-index: -2; |
6 | top: 0; |
7 | right: 0; |
8 | left: 0; |
9 | bottom: 0; |
10 | background-color: var(--md-sys-color-primary); |
11 | } |
12 | |
13 | /* state layer */ |
14 | .md-filled-button::after { |
15 | content: ""; |
16 | position: absolute; |
17 | z-index: -1; |
18 | top: 0; |
19 | right: 0; |
20 | left: 0; |
21 | bottom: 0; |
22 | background-color: transparent; |
23 | } |
24 | |
25 | /* label, shape */ |
26 | .md-filled-button { |
27 | position: relative; |
28 | box-sizing: border-box; |
29 | border-radius: 1.25rem; |
30 | height: 2.5rem; |
31 | line-height: 2.5rem; |
32 | padding: 0 1.5rem; |
33 | border: none; |
34 | background-color: transparent; |
35 | box-shadow: var(--md-box_shadow_level0); |
36 | font-family: var(--md-sys-typescale-label-large-font); |
37 | font-weight: var(--md-sys-typescale-label-large-weight); |
38 | font-size: var(--md-sys-typescale-label-large-size); |
39 | font-style: var(--md-sys-typescale-label-large-font-style); |
40 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
41 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
42 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
43 | color: var(--md-sys-color-on-primary); |
44 | white-space: nowrap; |
45 | text-overflow: ellipsis; |
46 | overflow: hidden; |
47 | } |
48 | |
49 | /* label, shape */ |
50 | .md-filled-button:hover { |
51 | color: var(--md-sys-color-on-primary); |
52 | box-shadow: var(--md-box_shadow_level1); |
53 | } |
54 | |
55 | /* state layer */ |
56 | .md-filled-button:hover::after { |
57 | background-color: var(--md-sys-color-on-primary); |
58 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
59 | } |
60 | |
61 | /* label, shape */ |
62 | .md-filled-button:focus { |
63 | outline: none; |
64 | color: var(--md-sys-color-on-primary); |
65 | box-shadow: var(--md-box_shadow_level0) !important; |
66 | } |
67 | |
68 | /* state layer */ |
69 | .md-filled-button:focus::after { |
70 | background-color: var(--md-sys-color-on-primary); |
71 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
72 | } |
73 | |
74 | /* label, shape */ |
75 | .md-filled-button:active { |
76 | color: var(--md-sys-color-on-primary); |
77 | background-position: center; |
78 | background-image: |
79 | radial-gradient(circle, var(--md-sys-color-on-primary-container) 1%, transparent 1%); |
80 | background-size: 100%; |
81 | animation-name: md-ripple; |
82 | animation-duration: var(--md-sys-motion-duration-500); |
83 | box-shadow: var(--md-box_shadow_level0) !important; |
84 | } |
85 | |
86 | /* state layer */ |
87 | .md-filled-button:active::after { |
88 | background-color: var(--md-sys-color-on-primary); |
89 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
90 | } |
91 | |
92 | /* label, shape */ |
93 | .md-filled-button:disabled { |
94 | background-color: transparent !important; |
95 | color: var(--md-sys-color-on-surface) !important; |
96 | opacity: 0.38 !important; |
97 | box-shadow: var(--md-box_shadow_level0) !important; |
98 | } |
99 | |
100 | /* container */ |
101 | .md-filled-button:disabled::before { |
102 | background-color: var(--md-sys-color-on-surface) !important; |
103 | opacity: 0.12 !important; |
104 | } |
105 | |
106 | /* state layer */ |
107 | .md-filled-button:disabled::after { |
108 | background-color: transparent !important; |
109 | opacity: 1 !important; |
110 | } |
1 | .md-filled-text-field { |
2 | position: relative; |
3 | margin: 1rem; |
4 | overflow: hidden; |
5 | display: flex; |
6 | flex-direction: column; |
7 | align-items: stretch; |
8 | padding-top: calc(0.5rem + var(--md-sys-typescale-body-small-line-height)); |
9 | border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left); |
10 | border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right); |
11 | overflow: hidden; |
12 | } |
13 | |
14 | /* container */ |
15 | .md-filled-text-field::before { |
16 | content: ""; |
17 | position: absolute; |
18 | z-index: -2; |
19 | top: 0; |
20 | right: 0; |
21 | left: 0; |
22 | bottom: 0; |
23 | background-color: var(--md-sys-color-surface-container-highest); |
24 | } |
25 | |
26 | /* state layer */ |
27 | .md-filled-text-field::after { |
28 | content: ""; |
29 | position: absolute; |
30 | z-index: -1; |
31 | top: 0; |
32 | right: 0; |
33 | left: 0; |
34 | bottom: 0; |
35 | background-color: transparent; |
36 | } |
37 | |
38 | .md-filled-text-field span, |
39 | .md-filled-text-field label { |
40 | position: absolute; |
41 | top: 0.5rem; |
42 | left: 1rem; |
43 | right: 1rem; |
44 | display: block; |
45 | transform: translateY(1rem); |
46 | transition-property: transform; |
47 | transition-duration: var(--md-sys-motion-duration-300); |
48 | white-space: nowrap; |
49 | text-overflow: ellipsis; |
50 | overflow: hidden; |
51 | color: var(--md-sys-color-on-surface-variant); |
52 | font-family: var(--md-sys-typescale-body-large-font); |
53 | font-weight: var(--md-sys-typescale-body-large-weight); |
54 | font-size: var(--md-sys-typescale-body-large-size); |
55 | font-style: var(--md-sys-typescale-body-large-font-style); |
56 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
57 | line-height: var(--md-sys-typescale-body-large-line-height); |
58 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
59 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
60 | } |
61 | |
62 | .md-filled-text-field :not(:placeholder-shown)+label, |
63 | .md-filled-text-field .populated+span, |
64 | .md-filled-text-field:focus-within span, |
65 | .md-filled-text-field:focus-within label, |
66 | .md-filled-text-field.float span, |
67 | .md-filled-text-field.float label { |
68 | transform: translateY(0); |
69 | font-family: var(--md-sys-typescale-body-small-font); |
70 | font-weight: var(--md-sys-typescale-body-small-weight); |
71 | font-size: var(--md-sys-typescale-body-small-size); |
72 | font-style: var(--md-sys-typescale-body-small-font-style); |
73 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
74 | line-height: var(--md-sys-typescale-body-small-line-height); |
75 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
76 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
77 | } |
78 | |
79 | .md-filled-text-field :not(label, span, small) { |
80 | position: relative; |
81 | caret-color: var(--md-sys-color-primary); |
82 | min-height: 2rem; |
83 | box-sizing: border-box; |
84 | padding-left: 1rem; |
85 | padding-bottom: 0.5rem; |
86 | padding-right: 1rem; |
87 | border: none; |
88 | resize: none; |
89 | color: var(--md-sys-color-on-surface); |
90 | font-family: var(--md-sys-typescale-body-large-font); |
91 | font-weight: var(--md-sys-typescale-body-large-weight); |
92 | font-size: var(--md-sys-typescale-body-large-size); |
93 | font-style: var(--md-sys-typescale-body-large-font-style); |
94 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
95 | line-height: var(--md-sys-typescale-body-large-line-height); |
96 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
97 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
98 | background-color: transparent; |
99 | outline: none; |
100 | border-bottom-width: 0.0625rem; |
101 | border-bottom-style: solid; |
102 | border-bottom-color: var(--md-sys-color-on-surface-variant); |
103 | } |
104 | |
105 | .md-filled-text-field ::placeholder { |
106 | color: transparent; |
107 | } |
108 | |
109 | .md-filled-text-field small { |
110 | display: block; |
111 | color: var(--md-sys-color-on-surface-variant); |
112 | background-color: var(--md-sys-color-background); |
113 | font-family: var(--md-sys-typescale-body-small-font); |
114 | font-weight: var(--md-sys-typescale-body-small-weight); |
115 | font-size: var(--md-sys-typescale-body-small-size); |
116 | font-style: var(--md-sys-typescale-body-small-font-style); |
117 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
118 | line-height: var(--md-sys-typescale-body-small-line-height); |
119 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
120 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
121 | padding: 0.25rem 1rem 0 1rem; |
122 | white-space: nowrap; |
123 | text-overflow: ellipsis; |
124 | overflow: hidden; |
125 | } |
126 | |
127 | .md-filled-text-field:hover span, |
128 | .md-filled-text-field:hover label { |
129 | color: var(--md-sys-color-on-surface-variant); |
130 | } |
131 | |
132 | .md-filled-text-field:hover :not(label, span, small) { |
133 | padding-bottom: 0.5rem; |
134 | border-bottom-width: 0.0625rem; |
135 | border-bottom-color: var(--md-sys-color-on-surface); |
136 | } |
137 | |
138 | .md-filled-text-field:hover::after { |
139 | background-color: var(--md-sys-color-on-surface); |
140 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
141 | } |
142 | |
143 | .md-filled-text-field:hover small { |
144 | color: var(--md-sys-color-on-surface-variant); |
145 | } |
146 | |
147 | .md-filled-text-field:focus-within span, |
148 | .md-filled-text-field:focus-within label { |
149 | color: var(--md-sys-color-primary); |
150 | } |
151 | |
152 | .md-filled-text-field :focus { |
153 | color: var(--md-sys-color-on-surface); |
154 | outline: none; |
155 | padding-bottom: 0.4375rem; |
156 | border-bottom-width: 0.125rem; |
157 | border-bottom-color: var(--md-sys-color-primary); |
158 | } |
159 | |
160 | .md-filled-text-field:hover :focus { |
161 | padding-bottom: 0.4375rem; |
162 | border-bottom-width: 0.125rem; |
163 | } |
164 | |
165 | .md-filled-text-field:focus-within small { |
166 | color: var(--md-sys-color-on-surface-variant); |
167 | } |
168 | |
169 | .md-filled-text-field :invalid { |
170 | color: var(--md-sys-color-on-surface); |
171 | border-bottom-color: var(--md-sys-color-error); |
172 | } |
173 | |
174 | .md-filled-text-field :invalid+span, |
175 | .md-filled-text-field :invalid+label { |
176 | color: var(--md-sys-color-error); |
177 | } |
178 | |
179 | .md-filled-text-field :invalid~small, |
180 | .md-filled-text-field:hover :invalid~small, |
181 | .md-filled-text-field:focus-within .input-text:invalid~small { |
182 | color: var(--md-sys-color-error); |
183 | } |
184 | |
185 | .md-filled-text-field :invalid:focus { |
186 | caret-color: var(--md-sys-color-error); |
187 | border-bottom-color: var(--md-sys-color-error); |
188 | } |
189 | |
190 | .md-filled-text-field:hover :invalid { |
191 | color: var(--md-sys-color-on-surface); |
192 | border-bottom-color: var(--md-sys-color-error); |
193 | } |
1 | .md-list { |
2 | margin: 0.5rem 0; |
3 | padding: 0; |
4 | list-style-type: none; |
5 | } |
6 | |
7 | .md-list .md-one-line, |
8 | .md-list .md-two-line, |
9 | .md-list .md-three-line { |
10 | position: relative; |
11 | display: flex; |
12 | box-sizing: border-box; |
13 | } |
14 | |
15 | /* container */ |
16 | .md-list .md-one-line::before, |
17 | .md-list .md-two-line::before, |
18 | .md-list .md-three-line::before { |
19 | content: ""; |
20 | position: absolute; |
21 | z-index: -2; |
22 | top: 0; |
23 | right: 0; |
24 | left: 0; |
25 | bottom: 0; |
26 | background-color: var(--md-sys-color-surface); |
27 | } |
28 | |
29 | /* state layer */ |
30 | .md-list .md-one-line::after, |
31 | .md-list .md-two-line::after, |
32 | .md-list .md-three-line::after { |
33 | content: ""; |
34 | position: absolute; |
35 | z-index: -1; |
36 | top: 0; |
37 | right: 0; |
38 | left: 0; |
39 | bottom: 0; |
40 | background-color: transparent; |
41 | } |
42 | |
43 | .md-list .md-one-line { |
44 | align-items: center; |
45 | gap: 1rem; |
46 | min-height: 3.5rem; |
47 | padding: 0.5rem 1.5rem 0.5rem 1rem; |
48 | } |
49 | |
50 | .md-list .md-one-line.video, |
51 | .md-list .md-two-line.video { |
52 | padding: 0.75rem 1.5rem 0.75rem 0; |
53 | } |
54 | |
55 | .md-list .md-two-line, |
56 | .md-list .md-three-line { |
57 | flex-flow: column; |
58 | } |
59 | |
60 | .md-list .md-two-line { |
61 | justify-content: center; |
62 | min-height: 4.5rem; |
63 | padding: 0.5rem 1.5rem 0.5rem 1rem; |
64 | } |
65 | |
66 | .md-list .md-two-line.icon, |
67 | .md-list .md-two-line.avatar, |
68 | .md-list .md-two-line.image, |
69 | .md-list .md-two-line.video, |
70 | .md-list .md-three-line.icon, |
71 | .md-list .md-three-line.avatar, |
72 | .md-list .md-three-line.image, |
73 | .md-list .md-three-line.video { |
74 | display: grid; |
75 | column-gap: 1rem; |
76 | row-gap: 0; |
77 | grid-template-areas: |
78 | "img headline" |
79 | "img supporting"; |
80 | } |
81 | |
82 | .md-list .md-two-line.icon, |
83 | .md-list .md-two-line.avatar, |
84 | .md-list .md-two-line.image, |
85 | .md-list .md-two-line.video { |
86 | align-content: center; |
87 | grid-template-rows: 1fr 1fr; |
88 | } |
89 | |
90 | .md-list .md-two-line.icon, |
91 | .md-list .md-three-line.icon { |
92 | grid-template-columns: var(--iconSize) 1fr; |
93 | } |
94 | |
95 | .md-list .md-two-line.avatar, |
96 | .md-list .md-three-line.avatar { |
97 | grid-template-columns: var(--avatarSize) 1fr; |
98 | } |
99 | |
100 | .md-list .md-two-line.image, |
101 | .md-list .md-three-line.image { |
102 | grid-template-columns: var(--imageSize) 1fr; |
103 | } |
104 | |
105 | .md-list .md-two-line.video, |
106 | .md-list .md-three-line.video { |
107 | grid-template-columns: var(--videoWidth) 1fr; |
108 | } |
109 | |
110 | .md-list .md-three-line { |
111 | align-content: flex-start; |
112 | min-height: 5.5rem; |
113 | padding: 0.75rem 1.5rem 0.75rem 1rem; |
114 | } |
115 | |
116 | .md-list .md-three-line.video { |
117 | padding: 0.75rem 1.5rem 0.75rem 0; |
118 | } |
119 | |
120 | .md-list .md-three-line.icon, |
121 | .md-list .md-three-line.avatar, |
122 | .md-list .md-three-line.image, |
123 | .md-list .md-three-line.video { |
124 | align-content: start; |
125 | grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr; |
126 | } |
127 | |
128 | /* state layer */ |
129 | .md-list .md-one-line:hover::after, |
130 | .md-list .md-two-line:hover::after, |
131 | .md-list .md-three-line:hover::after { |
132 | background-color: var(--md-sys-color-on-surface); |
133 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
134 | } |
135 | |
136 | /* state layer */ |
137 | .md-list a.md-one-line:focus::after, |
138 | .md-list a.md-two-line:focus::after, |
139 | .md-list a.md-three-line:focus::after, |
140 | .md-list a.md-one-line:focus-visible::after, |
141 | .md-list a.md-two-line:focus-visible::after, |
142 | .md-list a.md-three-line:focus-visible::after { |
143 | background-color: var(--md-sys-color-on-surface); |
144 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
145 | } |
146 | |
147 | .md-list a:focus, |
148 | .md-list a:focus-visible { |
149 | outline: none; |
150 | } |
151 | |
152 | .md-list a:active { |
153 | background-position: center; |
154 | background-image: |
155 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
156 | background-size: 100%; |
157 | animation-name: md-ripple; |
158 | animation-duration: var(--md-sys-motion-duration-500); |
159 | box-shadow: var(--md-box_shadow_level0) !important; |
160 | } |
161 | |
162 | /* state layer */ |
163 | .md-list a.md-one-line:active::after, |
164 | .md-list a.md-two-line:active::after, |
165 | .md-list a.md-three-line:active::after { |
166 | background-color: var(--md-sys-color-on-surface); |
167 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
168 | } |
169 | |
170 | .md-list a.md-two-line, |
171 | .md-list a.md-three-line { |
172 | text-decoration: none; |
173 | } |
174 | |
175 | .md-list a.md-two-line .headline, |
176 | .md-list a.md-three-line .headline { |
177 | text-decoration: underline; |
178 | } |
179 | |
180 | .md-list .headline { |
181 | grid-area: headline; |
182 | display: block; |
183 | box-sizing: border-box; |
184 | color: var(--md-sys-color-on-surface); |
185 | font-family: var(--md-sys-typescale-body-large-font); |
186 | font-weight: var(--md-sys-typescale-body-large-weight); |
187 | font-size: var(--md-sys-typescale-body-large-size); |
188 | font-style: var(--md-sys-typescale-body-large-font-style); |
189 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
190 | line-height: var(--md-sys-typescale-body-large-line-height); |
191 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
192 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
193 | max-height: var(--md-sys-typescale-body-large-line-height); |
194 | white-space: nowrap; |
195 | text-overflow: ellipsis; |
196 | overflow: hidden; |
197 | } |
198 | |
199 | .md-list .md-two-line.icon .headline, |
200 | .md-list .md-two-line.avatar .headline, |
201 | .md-list .md-two-line.image .headline, |
202 | .md-list .md-two-line.video .headline, |
203 | .md-list .md-three-line.icon .headline, |
204 | .md-list .md-three-line.avatar .headline, |
205 | .md-list .md-three-line.image .headline, |
206 | .md-list .md-three-line.video .headline { |
207 | align-self: end; |
208 | } |
209 | |
210 | .md-list .supporting { |
211 | grid-area: supporting; |
212 | display: -webkit-box; |
213 | -webkit-box-orient: vertical; |
214 | overflow: hidden; |
215 | box-sizing: border-box; |
216 | align-self: start; |
217 | font-family: var(--md-sys-typescale-body-medium-font); |
218 | font-weight: var(--md-sys-typescale-body-medium-weight); |
219 | font-size: var(--md-sys-typescale-body-medium-size); |
220 | font-style: var(--md-sys-typescale-body-medium-font-style); |
221 | letter-spacing: var(--md-sys-typescale-body-medium-tracking); |
222 | line-height: var(--md-sys-typescale-body-medium-line-height); |
223 | text-transform: var(--md-sys-typescale-body-medium-text-transform); |
224 | text-decoration: var(--md-sys-typescale-body-medium-text-decoration); |
225 | } |
226 | |
227 | .md-list .md-two-line .supporting { |
228 | max-height: var(--md-sys-typescale-body-medium-line-height); |
229 | line-clamp: 1; |
230 | -webkit-line-clamp: 1; |
231 | } |
232 | |
233 | .md-list .md-three-line .supporting { |
234 | max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height)); |
235 | line-clamp: 2; |
236 | -webkit-line-clamp: 2; |
237 | } |
238 | |
239 | .md-list .avatar img, |
240 | .md-list .avatar label, |
241 | .md-list .avatar .material-symbols-outlined:first-child { |
242 | flex-shrink: 0; |
243 | background-color: var(--md-sys-color-primary-container); |
244 | color: var(--md-sys-color-on-primary-container); |
245 | border-radius: 50%; |
246 | width: var(--avatarSize); |
247 | height: var(--avatarSize); |
248 | } |
249 | |
250 | .md-list .avatar label { |
251 | display: inline-block; |
252 | font-family: var(--md-sys-typescale-title-medium-font); |
253 | font-weight: var(--md-sys-typescale-title-medium-weight); |
254 | font-size: var(--md-sys-typescale-title-medium-size); |
255 | font-style: var(--md-sys-typescale-title-medium-font-style); |
256 | letter-spacing: var(--md-sys-typescale-title-medium-tracking); |
257 | line-height: var(--md-sys-typescale-title-medium-line-height); |
258 | text-transform: var(--md-sys-typescale-title-medium-text-transform); |
259 | text-decoration: var(--md-sys-typescale-title-medium-text-decoration); |
260 | overflow: hidden; |
261 | } |
262 | |
263 | .md-list .avatar .material-symbols-outlined:first-child { |
264 | font-size: var(--avatarSize); |
265 | } |
266 | |
267 | .md-list .avatar.md-two-line img, |
268 | .md-list .avatar.md-two-line label, |
269 | .md-list .avatar.md-two-line .material-symbols-outlined:first-child { |
270 | grid-area: img; |
271 | align-self: center; |
272 | } |
273 | |
274 | .md-list .avatar.md-three-line img, |
275 | .md-list .avatar.md-three-line label, |
276 | .md-list .avatar.md-three-line .material-symbols-outlined:first-child { |
277 | grid-area: img; |
278 | align-self: start; |
279 | } |
280 | |
281 | .md-list .icon img, |
282 | .md-list .icon .material-symbols-outlined:first-child { |
283 | flex-shrink: 0; |
284 | color: var(--md-sys-color-on-surface-variant); |
285 | width: var(--iconSize); |
286 | height: var(--iconSize); |
287 | } |
288 | |
289 | .md-list .icon .material-symbols-outlined:first-child { |
290 | font-size: var(--iconSize); |
291 | } |
292 | |
293 | .md-list .icon.md-two-line img, |
294 | .md-list .icon.md-two-line .material-symbols-outlined:first-child { |
295 | grid-area: img; |
296 | align-self: center; |
297 | } |
298 | |
299 | .md-list .icon.md-three-line img, |
300 | .md-list .icon.md-three-line .material-symbols-outlined:first-child { |
301 | grid-area: img; |
302 | align-self: start; |
303 | } |
304 | |
305 | .md-list .video img { |
306 | flex-shrink: 0; |
307 | color: var(--md-sys-color-on-surface-variant); |
308 | width: var(--videoWidth); |
309 | height: var(--videoHeight); |
310 | } |
311 | |
312 | .md-list .video.md-two-line img { |
313 | grid-area: img; |
314 | align-self: center; |
315 | } |
316 | |
317 | .md-list .video.md-three-line img { |
318 | grid-area: img; |
319 | align-self: start; |
320 | } |
321 | |
322 | .md-list .image img, |
323 | .md-list .image .material-symbols-outlined:first-child { |
324 | flex-shrink: 0; |
325 | color: var(--md-sys-color-on-surface-variant); |
326 | width: var(--imageSize); |
327 | height: var(--imageSize); |
328 | } |
329 | |
330 | .md-list .image .material-symbols-outlined:first-child { |
331 | font-size: var(--imageSize); |
332 | } |
333 | |
334 | .md-list .image.md-two-line img, |
335 | .md-list .image.md-two-line .material-symbols-outlined:first-child { |
336 | grid-area: img; |
337 | align-self: center; |
338 | } |
339 | |
340 | .md-list .image.md-three-line img, |
341 | .md-list .image.md-three-line .material-symbols-outlined:first-child { |
342 | grid-area: img; |
343 | align-self: start; |
344 | } |
1 | .md-menu { |
2 | display: block; |
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-property: transform; |
13 | transition-duration: var(--md-sys-motion-duration-500); |
14 | } |
15 | |
16 | .md-menu[hidden] { |
17 | display: none |
18 | } |
19 | |
20 | .md-menu.open { |
21 | transform: translateY(0) scaleY(1); |
22 | } |
23 | |
24 | /* container */ |
25 | .md-menu>*::after { |
26 | content: ""; |
27 | position: absolute; |
28 | z-index: -2; |
29 | top: 0; |
30 | right: 0; |
31 | left: 0; |
32 | bottom: 0; |
33 | } |
34 | |
35 | /* container */ |
36 | .md-menu>.selected::after { |
37 | background-color: var(--md-sys-color-secondary-container); |
38 | } |
39 | |
40 | /* label, shape */ |
41 | .md-menu>* { |
42 | position: relative; |
43 | display: block; |
44 | box-sizing: border-box; |
45 | height: 3rem; |
46 | line-height: 3rem; |
47 | padding: 0 0.75rem; |
48 | color: var(--md-sys-color-on-surface); |
49 | font-family: var(--md-sys-typescale-label-large-font); |
50 | font-weight: var(--md-sys-typescale-label-large-weight); |
51 | font-size: var(--md-sys-typescale-label-large-size); |
52 | font-style: var(--md-sys-typescale-label-large-font-style); |
53 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
54 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
55 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
56 | white-space: nowrap; |
57 | text-overflow: ellipsis; |
58 | overflow: hidden; |
59 | } |
60 | |
61 | /* label, shape */ |
62 | .md-menu>.selected { |
63 | color: var(--md-sys-color-on-secondary-container); |
64 | } |
65 | |
66 | /* state layer */ |
67 | .md-menu>*::before { |
68 | content: ""; |
69 | position: absolute; |
70 | z-index: -1; |
71 | top: 0; |
72 | right: 0; |
73 | left: 0; |
74 | bottom: 0; |
75 | } |
76 | |
77 | /* icon */ |
78 | .md-menu>* span { |
79 | position: relative; |
80 | margin-right: 0.75rem; |
81 | vertical-align: middle; |
82 | color: var(--md-sys-color-on-surface-variant); |
83 | font-size: 1.5rem; |
84 | width: 1.5rem; |
85 | height: 1.5rem; |
86 | } |
87 | |
88 | /* icon */ |
89 | .md-menu>.selected span { |
90 | color: var(--md-sys-color-on-secondary-container); |
91 | } |
92 | |
93 | /* state layer */ |
94 | .md-menu>:hover::before { |
95 | background-color: var(--md-sys-color-on-surface); |
96 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
97 | } |
98 | |
99 | /* label, shape */ |
100 | .md-menu>:hover { |
101 | color: var(--md-sys-color-on-surface); |
102 | } |
103 | |
104 | /* icon */ |
105 | .md-menu>:hover span { |
106 | color: var(--md-sys-color-on-surface-variant); |
107 | } |
108 | |
109 | /* state layer */ |
110 | .md-menu>:focus::before { |
111 | background-color: var(--md-sys-color-on-surface); |
112 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
113 | } |
114 | |
115 | /* label, shape */ |
116 | .md-menu>:focus { |
117 | color: var(--md-sys-color-on-surface); |
118 | outline: none; |
119 | } |
120 | |
121 | /* icon */ |
122 | .md-menu>:focus span { |
123 | color: var(--md-sys-color-on-surface-variant); |
124 | } |
125 | |
126 | /* label, shape */ |
127 | .md-menu>:active { |
128 | background-position: center; |
129 | background-image: |
130 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
131 | background-size: 100%; |
132 | animation-name: md-ripple; |
133 | animation-duration: var(--md-sys-motion-duration-500); |
134 | color: var(--md-sys-color-on-surface); |
135 | } |
136 | |
137 | /* state layer */ |
138 | .md-menu>:active::before { |
139 | background-color: var(--md-sys-color-on-surface); |
140 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
141 | } |
142 | |
143 | |
144 | /* icon */ |
145 | .md-menu>:active span { |
146 | color: var(--md-sys-color-on-surface-variant); |
147 | } |
148 | |
149 | .md-menu input[type="radio"] { |
150 | appearance: none; |
151 | transform: scaleX(0); |
152 | } |
1 | .md-navigation-bar { |
2 | display: flex; |
3 | justify-content: center; |
4 | align-items: stretch; |
5 | position: fixed; |
6 | left: 0; |
7 | right: 0; |
8 | bottom: 0; |
9 | background-color: var(--md-sys-color-surface-container-low); |
10 | } |
11 | |
12 | .md-navigation-bar a { |
13 | position: relative; |
14 | display: block; |
15 | flex: 0 1 auto; |
16 | color: var(--md-sys-color-on-surface-variant); |
17 | font-family: var(--md-sys-typescale-label-medium-font); |
18 | font-weight: var(--md-sys-typescale-label-medium-weight); |
19 | font-size: var(--md-sys-typescale-label-medium-size); |
20 | font-style: var(--md-sys-typescale-label-medium-font-style); |
21 | letter-spacing: var(--md-sys-typescale-label-medium-tracking); |
22 | line-height: var(--md-sys-typescale-label-medium-line-height); |
23 | text-transform: var(--md-sys-typescale-label-medium-text-transform); |
24 | text-decoration: var(--md-sys-typescale-label-medium-text-decoration); |
25 | text-decoration: none; |
26 | padding-top: 0.75rem; |
27 | padding-bottom: 1rem; |
28 | padding-left: 0.25rem; |
29 | padding-right: 0.25rem; |
30 | text-align: center; |
31 | overflow: hidden; |
32 | box-sizing: border-box; |
33 | } |
34 | |
35 | .md-navigation-bar a.active { |
36 | color: var(--md-sys-color-on-surface); |
37 | } |
38 | |
39 | /* state layer */ |
40 | .md-navigation-bar a::after { |
41 | content: ""; |
42 | position: absolute; |
43 | z-index: -2; |
44 | top: 0; |
45 | right: 0; |
46 | left: 0; |
47 | bottom: 0; |
48 | background-color: transparent; |
49 | } |
50 | |
51 | /* state layer */ |
52 | .md-navigation-bar a:hover::after { |
53 | background-color: var(--md-sys-color-on-surface-variant); |
54 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
55 | } |
56 | |
57 | /* state layer */ |
58 | .md-navigation-bar a.active:hover::after { |
59 | background-color: var(--md-sys-color-on-surface); |
60 | } |
61 | |
62 | .md-navigation-bar a:focus { |
63 | outline: none; |
64 | } |
65 | |
66 | /* state layer */ |
67 | .md-navigation-bar a:focus::after { |
68 | background-color: var(--md-sys-color-on-surface-variant); |
69 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
70 | } |
71 | |
72 | /* state layer */ |
73 | .md-navigation-bar a.active:focus::after { |
74 | background-color: var(--md-sys-color-on-surface); |
75 | } |
76 | |
77 | .md-navigation-bar a:active { |
78 | background-position: center; |
79 | background-image: |
80 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
81 | background-size: 100%; |
82 | animation-name: md-ripple; |
83 | animation-duration: var(--md-sys-motion-duration-500); |
84 | } |
85 | |
86 | /* state layer */ |
87 | .md-navigation-bar a:active::after { |
88 | background-color: var(--md-sys-color-on-surface-variant); |
89 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
90 | } |
91 | |
92 | /* state layer */ |
93 | .md-navigation-bar a.active:active::after { |
94 | background-color: var(--md-sys-color-on-surface); |
95 | } |
96 | |
97 | .md-navigation-bar span { |
98 | color: var(--md-sys-color-on-surface-variant); |
99 | position: relative; |
100 | display: block; |
101 | height: 2rem; |
102 | width: 4rem; |
103 | line-height: 2rem; |
104 | margin-bottom: 0.25rem; |
105 | box-sizing: border-box; |
106 | margin-left: auto; |
107 | margin-right: auto; |
108 | overflow: hidden; |
109 | } |
110 | |
111 | .md-navigation-bar a.active span { |
112 | color: var(--md-sys-color-on-secondary-container); |
113 | } |
114 | |
115 | .md-navigation-bar a.active { |
116 | font-variation-settings: 'FILL'1, 'wght'700, 'GRAD'0, 'opsz'48; |
117 | } |
118 | |
119 | .md-navigation-bar span::before { |
120 | content: ""; |
121 | background-color: var(--md-sys-color-secondary-container); |
122 | position: absolute; |
123 | z-index: -1; |
124 | top: 0; |
125 | left: 0; |
126 | height: 2rem; |
127 | width: 4rem; |
128 | border-radius: 1rem; |
129 | box-sizing: border-box; |
130 | transform: scaleX(0); |
131 | transition-property: transform; |
132 | transition-duration: var(--md-sys-motion-duration-500); |
133 | } |
134 | |
135 | .md-navigation-bar a.active span::before, |
136 | .md-navigation-bar a:active span::before { |
137 | transform: scaleX(1); |
138 | } |
1 | .md-outline-button { |
2 | position: relative; |
3 | box-sizing: border-box; |
4 | border-radius: 1.25rem; |
5 | height: 2.5rem; |
6 | padding: 0 1.5rem; |
7 | border: 0.0625rem solid var(--md-sys-color-outline); |
8 | background-color: transparent; |
9 | box-shadow: var(--md-box_shadow_level0); |
10 | font-family: var(--md-sys-typescale-label-large-font); |
11 | font-weight: var(--md-sys-typescale-label-large-weight); |
12 | font-size: var(--md-sys-typescale-label-large-size); |
13 | font-style: var(--md-sys-typescale-label-large-font-style); |
14 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
15 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
16 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
17 | color: var(--md-sys-color-primary); |
18 | white-space: nowrap; |
19 | text-overflow: ellipsis; |
20 | overflow: hidden; |
21 | } |
22 | |
23 | /* state layer */ |
24 | .md-outline-button::after { |
25 | content: ""; |
26 | position: absolute; |
27 | z-index: -1; |
28 | top: 0; |
29 | right: 0; |
30 | left: 0; |
31 | bottom: 0; |
32 | background-color: transparent; |
33 | } |
34 | |
35 | .md-outline-button:hover { |
36 | color: var(--md-sys-color-primary); |
37 | border-color: var(--md-sys-color-outline); |
38 | } |
39 | |
40 | /* state layer */ |
41 | .md-outline-button:hover::after { |
42 | background-color: var(--md-sys-color-primary); |
43 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
44 | } |
45 | |
46 | .md-outline-button:focus { |
47 | outline: none; |
48 | color: var(--md-sys-color-primary); |
49 | border-color: var(--md-sys-color-outline); |
50 | } |
51 | |
52 | /* state layer */ |
53 | .md-outline-button:focus::after { |
54 | background-color: var(--md-sys-color-primary); |
55 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
56 | } |
57 | |
58 | .md-outline-button:active { |
59 | color: var(--md-sys-color-primary); |
60 | border-color: var(--md-sys-color-outline); |
61 | background-position: center; |
62 | background-image: |
63 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
64 | background-size: 100%; |
65 | animation-name: md-ripple; |
66 | animation-duration: var(--md-sys-motion-duration-500); |
67 | box-shadow: var(--md-box_shadow_level0) !important; |
68 | } |
69 | |
70 | /* state layer */ |
71 | .md-outline-button:active::after { |
72 | background-color: var(--md-sys-color-primary); |
73 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
74 | } |
75 | |
76 | .md-outline-button:disabled { |
77 | background-color: transparent !important; |
78 | border-color: var(--md-sys-color-on-surface) !important; |
79 | color: var(--md-sys-color-on-surface) !important; |
80 | opacity: 0.38 !important; |
81 | } |
82 | |
83 | /* container */ |
84 | .md-outline-button:disabled::after { |
85 | background-color: transparent !important; |
86 | opacity: 1 !important; |
87 | } |
1 | @keyframes md-ripple { |
2 | |
3 | from { |
4 | background-size: 100%; |
5 | } |
6 | |
7 | to { |
8 | background-size: 15000%; |
9 | } |
10 | |
11 | } |
1 | .md-segmented-button { |
2 | display: flex; |
3 | align-items: stretch; |
4 | box-sizing: border-box; |
5 | border: 0.0625rem solid var(--md-sys-color-outline); |
6 | height: 2.5rem; |
7 | border-radius: 1.25rem; |
8 | overflow: hidden; |
9 | } |
10 | |
11 | .md-segmented-button[hidden] { |
12 | display: none; |
13 | } |
14 | |
15 | .md-segmented-button input { |
16 | -webkit-appearance: none; |
17 | appearance: none; |
18 | flex: 0 1 0.0625rem; |
19 | width: 0.0625rem; |
20 | height: 2.375rem; |
21 | margin: 0; |
22 | padding: 0; |
23 | background-color: var(--md-sys-color-outline); |
24 | } |
25 | |
26 | .md-segmented-button input:first-of-type { |
27 | transform: scaleX(0); |
28 | } |
29 | |
30 | .md-segmented-button input:focus { |
31 | outline: none; |
32 | } |
33 | |
34 | .md-segmented-button :checked+label { |
35 | color: var(--md-sys-color-on-secondary-container); |
36 | } |
37 | |
38 | .md-segmented-button label { |
39 | position: relative; |
40 | flex: 1 1 1.5rem; |
41 | display: block; |
42 | box-sizing: border-box; |
43 | height: 2.375rem; |
44 | line-height: 2.375rem; |
45 | text-align: center; |
46 | color: var(--md-sys-color-on-surface); |
47 | font-family: var(--md-sys-typescale-label-large-font); |
48 | font-weight: var(--md-sys-typescale-label-large-weight); |
49 | font-size: var(--md-sys-typescale-label-large-size); |
50 | font-style: var(--md-sys-typescale-label-large-font-style); |
51 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
52 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
53 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
54 | padding: 0 0.75rem; |
55 | overflow: hidden; |
56 | white-space: nowrap; |
57 | text-overflow: ellipsis; |
58 | overflow: hidden; |
59 | } |
60 | |
61 | .md-segmented-button label::before { |
62 | /* container */ |
63 | content: ""; |
64 | position: absolute; |
65 | z-index: -2; |
66 | top: 0; |
67 | right: 0; |
68 | left: 0; |
69 | bottom: 0; |
70 | } |
71 | |
72 | .md-segmented-button label::after { |
73 | /* state layer */ |
74 | content: ""; |
75 | position: absolute; |
76 | z-index: -1; |
77 | top: 0; |
78 | right: 0; |
79 | left: 0; |
80 | bottom: 0; |
81 | background-color: transparent; |
82 | } |
83 | |
84 | .md-segmented-button :checked+label::before { |
85 | /* container */ |
86 | background-color: var(--md-sys-color-secondary-container); |
87 | } |
88 | |
89 | .md-segmented-button label span { |
90 | vertical-align: middle; |
91 | color: var(--md-sys-color-on-surface); |
92 | font-size: 1.125rem; |
93 | width: 1.125rem; |
94 | height: 1.125rem; |
95 | margin-right: 0.5rem; |
96 | } |
97 | |
98 | |
99 | .md-segmented-button label span:first-child { |
100 | display: none; |
101 | } |
102 | |
103 | .md-segmented-button :checked+label span:first-child { |
104 | display: inline-block; |
105 | color: var(--md-sys-color-on-secondary-container); |
106 | } |
107 | |
108 | /* state layer */ |
109 | .md-segmented-button label:hover::after { |
110 | background-color: var(--md-sys-color-on-surface); |
111 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
112 | } |
113 | |
114 | /* state layer */ |
115 | .md-segmented-button :checked+label:hover::after { |
116 | background-color: var(--md-sys-color-on-secondary-container); |
117 | } |
118 | |
119 | /* state layer */ |
120 | .md-segmented-button :focus+label::after { |
121 | background-color: var(--md-sys-color-on-surface); |
122 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
123 | } |
124 | |
125 | /* state layer */ |
126 | .md-segmented-button :focus:checked+label::after { |
127 | background-color: var(--md-sys-color-on-secondary-container); |
128 | } |
129 | |
130 | .md-segmented-button label:active, |
131 | .md-segmented-button :active+label { |
132 | background-position: center; |
133 | background-image: |
134 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
135 | background-size: 100%; |
136 | animation-name: md-ripple; |
137 | animation-duration: var(--md-sys-motion-duration-500); |
138 | } |
139 | |
140 | /* state layer */ |
141 | .md-segmented-button :active+label::after { |
142 | background-color: var(--md-sys-color-on-surface); |
143 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
144 | } |
145 | |
146 | /* state layer */ |
147 | .md-segmented-button :active:checked+label::after { |
148 | background-color: var(--md-sys-color-on-secondary-container); |
149 | } |
1 | md-slider-field input::-webkit-slider-runnable-track { |
2 | height: 0.25rem; |
3 | border-radius: 0.125rem; |
4 | } |
5 | |
6 | md-slider-field input::-webkit-slider-thumb { |
7 | -webkit-appearance: none; |
8 | background-color: var(--md-sys-color-primary); |
9 | width: 1.25rem; |
10 | height: 1.25rem; |
11 | border-radius: 0.625rem; |
12 | margin-top: -0.5625rem; |
13 | } |
14 | |
15 | md-slider-field input:hover::-webkit-slider-thumb { |
16 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-hover-transparency-percentage)); |
17 | } |
18 | |
19 | md-slider-field input:focus::-webkit-slider-thumb { |
20 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-focus-transparency-percentage)); |
21 | } |
22 | |
23 | md-slider-field input:active::-webkit-slider-thumb { |
24 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important; |
25 | background-position: center; |
26 | background-image: |
27 | radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%); |
28 | background-size: 100%; |
29 | animation-name: md-ripple; |
30 | animation-duration: var(--md-sys-motion-duration-500); |
31 | } |
32 | |
33 | md-slider-field.material::-moz-range-track { |
34 | height: 0.25rem; |
35 | border-radius: 0.125rem; |
36 | } |
37 | |
38 | md-slider-field input::-moz-range-thumb { |
39 | -webkit-appearance: none; |
40 | appearance: none; |
41 | background-color: var(--md-sys-color-primary); |
42 | width: 1.25rem; |
43 | height: 1.25rem; |
44 | border: none; |
45 | border-radius: 0.625rem; |
46 | } |
47 | |
48 | md-slider-field input:hover::-moz-range-thumb { |
49 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-hover-transparency-percentage)); |
50 | } |
51 | |
52 | md-slider-field input:focus::-moz-range-thumb { |
53 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-focus-transparency-percentage)); |
54 | } |
55 | |
56 | md-slider-field input:active::-moz-range-thumb { |
57 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important; |
58 | background-position: center; |
59 | background-image: |
60 | radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%); |
61 | background-size: 100%; |
62 | animation-name: md-ripple; |
63 | animation-duration: var(--md-sys-motion-duration-500); |
64 | } |
1 | .md-standard-icon-button { |
2 | position: relative; |
3 | display: inline-block; |
4 | border: none; |
5 | padding: 0.25rem; |
6 | background-color: transparent; |
7 | text-decoration: none; |
8 | border-radius: 50%; |
9 | overflow: hidden; |
10 | } |
11 | |
12 | .md-standard-icon-button[hidden] { |
13 | display: none; |
14 | } |
15 | |
16 | /* state layer */ |
17 | .md-standard-icon-button::after { |
18 | content: ""; |
19 | position: absolute; |
20 | top: 0.25rem; |
21 | right: 0.25rem; |
22 | left: 0.25rem; |
23 | bottom: 0.25rem; |
24 | border-radius: 50%; |
25 | } |
26 | |
27 | .md-standard-icon-button span { |
28 | position: relative; |
29 | padding: 0.5rem; |
30 | color: var(--md-sys-color-on-surface-variant); |
31 | font-size: 1.5rem; |
32 | width: 1.5rem; |
33 | height: 1.5rem; |
34 | } |
35 | |
36 | .md-standard-icon-button.avatar span { |
37 | padding: 0.3125rem; |
38 | font-size: 1.875rem; |
39 | width: 1.875rem; |
40 | height: 1.875rem; |
41 | } |
42 | |
43 | .md-standard-icon-button:hover::after { |
44 | background-color: var(--md-sys-color-on-surface-variant); |
45 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
46 | } |
47 | |
48 | .md-standard-icon-button:hover span { |
49 | color: var(--md-sys-color-on-surface-variant); |
50 | } |
51 | |
52 | .md-standard-icon-button:focus { |
53 | outline: none; |
54 | } |
55 | |
56 | .md-standard-icon-button:focus::after { |
57 | background-color: var(--md-sys-color-on-surface-variant); |
58 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
59 | } |
60 | |
61 | .md-standard-icon-button:focus span { |
62 | color: var(--md-sys-color-on-surface-variant); |
63 | } |
64 | |
65 | .md-standard-icon-button:active { |
66 | background-position: center; |
67 | background-image: |
68 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
69 | background-size: 100%; |
70 | animation-name: md-ripple; |
71 | animation-duration: var(--md-sys-motion-duration-500); |
72 | } |
73 | |
74 | .md-standard-icon-button:active::after { |
75 | background-color: var(--md-sys-color-on-surface-variant); |
76 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
77 | } |
78 | |
79 | .md-standard-icon-button:active span { |
80 | -color: var(--md-sys-color-on-surface-variant); |
81 | } |
82 | |
83 | .md-standard-icon-button:disabled::after { |
84 | background-color: transparent !important; |
85 | opacity: 1; |
86 | } |
87 | |
88 | .md-standard-icon-button:disabled span { |
89 | color: var(--md-sys-color-on-surface) !important; |
90 | opacity: 0.38; |
91 | } |
92 | |
93 | .md-standard-icon-button:disabled:active { |
94 | background-image: none; |
95 | animation-name: none; |
96 | animation-duration: unset; |
97 | } |
1 | .md-switch { |
2 | -webkit-appearance: none; |
3 | appearance: none; |
4 | position: relative; |
5 | display: inline-block; |
6 | vertical-align: middle; |
7 | box-sizing: content-box; |
8 | padding: 0; |
9 | padding-block: 0; |
10 | padding-inline: 0; |
11 | } |
12 | |
13 | .md-switch:focus { |
14 | outline: none; |
15 | } |
16 | |
17 | /* Track */ |
18 | body.material .md-switch { |
19 | width: 3rem; |
20 | height: 1.75rem; |
21 | border-radius: 1rem; |
22 | border: 0.125rem solid var(--md-sys-color-outline); |
23 | background-color: var(--md-sys-color-surface-container-highest); |
24 | } |
25 | |
26 | body.material .md-switch:checked { |
27 | background-color: var(--md-sys-color-primary); |
28 | } |
29 | |
30 | /* State */ |
31 | body.material .md-switch::before { |
32 | content: ""; |
33 | display: none; |
34 | position: absolute; |
35 | height: 2.5rem; |
36 | width: 2.5rem; |
37 | border-radius: 1.25rem; |
38 | top: -0.375rem; |
39 | left: -0.375rem; |
40 | } |
41 | |
42 | body.material .md-switch:checked:before { |
43 | left: auto; |
44 | right: -0.375rem; |
45 | } |
46 | |
47 | /* Handle */ |
48 | body.material .md-switch::after { |
49 | content: ""; |
50 | display: inline-block; |
51 | position: absolute; |
52 | transition-property: all; |
53 | transition-duration: var(--md-sys-motion-duration-700); |
54 | height: 1rem; |
55 | width: 1rem; |
56 | border-radius: 0.5rem; |
57 | top: 0.375rem; |
58 | left: 0.375rem; |
59 | background-color: var(--md-sys-color-outline); |
60 | box-shadow: var(--md-box_shadow_level1); |
61 | } |
62 | |
63 | body.material .md-switch:checked:after { |
64 | height: 1.5rem; |
65 | width: 1.5rem; |
66 | border-radius: 0.75rem; |
67 | top: 0.125rem; |
68 | left: auto; |
69 | right: 0.125rem; |
70 | background-color: var(--md-sys-color-on-primary); |
71 | } |
72 | |
73 | body.material .md-switch:hover::before { |
74 | display: inline-block; |
75 | background-color: var(--md-sys-color-on-surface); |
76 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
77 | } |
78 | |
79 | body.material .md-switch:checked:hover::before { |
80 | background-color: var(--md-sys-color-primary); |
81 | } |
82 | |
83 | body.material .md-switch:hover::after { |
84 | background-color: var(--md-sys-color-on-surface-variant); |
85 | } |
86 | |
87 | body.material .md-switch:checked:hover::after { |
88 | background-color: var(--md-sys-color-primary-container); |
89 | } |
90 | |
91 | body.material .md-switch:focus::before { |
92 | display: inline-block; |
93 | background-color: var(--md-sys-color-on-surface); |
94 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
95 | } |
96 | |
97 | body.material .md-switch:checked:focus::before { |
98 | background-color: var(--md-sys-color-primary); |
99 | } |
100 | |
101 | body.material .md-switch:focus::after { |
102 | background-color: var(--md-sys-color-on-surface-variant); |
103 | } |
104 | |
105 | body.material .md-switch:checked:focus::after { |
106 | background-color: var(--md-sys-color-primary-container); |
107 | } |
108 | |
109 | body.material .md-switch:active::before { |
110 | display: inline-block; |
111 | background-color: var(--md-sys-color-on-surface); |
112 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
113 | } |
114 | |
115 | |
116 | body.material .md-switch:checked:active::before { |
117 | background-color: var(--md-sys-color-primary); |
118 | } |
119 | |
120 | body.material .md-switch:active::after { |
121 | width: 1.75rem; |
122 | height: 1.75rem; |
123 | top: 0; |
124 | left: 0; |
125 | border-radius: 0.875rem; |
126 | background-position: center; |
127 | animation-name: md-ripple; |
128 | animation-duration: var(--md-sys-motion-duration-500); |
129 | background-size: 100%; |
130 | background-color: var(--md-sys-color-on-surface-variant); |
131 | background-image: |
132 | radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%); |
133 | box-shadow: var(--md-box_shadow_level1), 0 0 0 0.375rem color-mix(in srgb, var(--md-sys-color-on-surface), transparent var(--state-pressed-transparency-percentage)) !important; |
134 | } |
135 | |
136 | body.material .md-switch:checked:active::after { |
137 | left: auto; |
138 | right: 0; |
139 | background-color: var(--md-sys-color-primary-container); |
140 | background-image: |
141 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
142 | box-shadow: var(--md-box_shadow_level1), 0 0 0 0.375rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important; |
143 | } |
144 | |
145 | body.apple .md-switch { |
146 | width: 3rem; |
147 | border-radius: 0.875rem; |
148 | height: 1.75rem; |
149 | background-color: var(--colIntIosOffBk); |
150 | } |
151 | |
152 | body.apple .md-switch:checked { |
153 | background-color: var(--colIntIosOnBk); |
154 | } |
155 | |
156 | body.apple .md-switch:focus { |
157 | background-color: var(--colIntIosOffBkFc); |
158 | } |
159 | |
160 | body.apple .md-switch:checked:focus { |
161 | background-color: var(--colIntIosOnBkFc); |
162 | } |
163 | |
164 | body.apple .md-switch::after { |
165 | content: ""; |
166 | display: inline-block; |
167 | position: absolute; |
168 | width: 1.5rem; |
169 | height: 1.5rem; |
170 | border-radius: 0.75rem; |
171 | top: 0.125rem; |
172 | left: 0.125rem; |
173 | background-color: var(--colIntIos); |
174 | } |
175 | |
176 | body.apple .md-switch:checked::after { |
177 | left: auto; |
178 | right: 0.125rem; |
179 | border-color: var(--colIntIosOnBk); |
180 | } |
181 | |
182 | body.apple .md-switch:focus::after { |
183 | border-color: var(--colIntIosOffBkFc); |
184 | } |
185 | |
186 | body.apple .md-switch:checked:focus::after { |
187 | border-color: var(--colIntIosOnBkFc); |
188 | } |
1 | .md-tab { |
2 | display: flex; |
3 | background-color: transparent; |
4 | align-items: stretch; |
5 | flex-wrap: nowrap; |
6 | overflow-x: auto; |
7 | position: sticky; |
8 | } |
9 | |
10 | .md-tab.fixed { |
11 | justify-content: center; |
12 | } |
13 | |
14 | .md-tab.scrollable { |
15 | padding-left: 2rem; |
16 | gap: 1rem; |
17 | } |
18 | |
19 | .md-tab.scroll { |
20 | background-color: var(--md-sys-color-surface-container-low); |
21 | } |
22 | |
23 | .md-tab a { |
24 | position: relative; |
25 | display: flex; |
26 | flex-direction: column; |
27 | justify-content: start; |
28 | align-items: center; |
29 | color: var(--md-sys-color-on-surface-variant); |
30 | font-family: var(--md-sys-typescale-title-small-font); |
31 | font-weight: var(--md-sys-typescale-title-small-weight); |
32 | font-size: var(--md-sys-typescale-title-small-size); |
33 | font-style: var(--md-sys-typescale-title-small-font-style); |
34 | letter-spacing: var(--md-sys-typescale-title-small-tracking); |
35 | line-height: var(--md-sys-typescale-title-small-line-height); |
36 | text-transform: var(--md-sys-typescale-title-small-text-transform); |
37 | text-decoration: var(--md-sys-typescale-title-small-text-decoration); |
38 | text-align: center; |
39 | box-sizing: border-box; |
40 | border-bottom: 0.1875rem solid var(--md-sys-color-surface); |
41 | } |
42 | |
43 | .md-tab.fixed a { |
44 | flex: 0 0 var(--tabWidth); |
45 | } |
46 | |
47 | .md-tab.scrollable a { |
48 | flex: 0 0 auto; |
49 | } |
50 | |
51 | .md-tab a.active { |
52 | border-bottom-color: var(--md-sys-color-primary); |
53 | } |
54 | |
55 | /* state layer */ |
56 | .md-tab a::after { |
57 | content: ""; |
58 | position: absolute; |
59 | z-index: -1; |
60 | top: 0; |
61 | right: 0; |
62 | left: 0; |
63 | bottom: 0; |
64 | background-color: transparent; |
65 | } |
66 | |
67 | .md-tab span { |
68 | font-size: var(--iconSize); |
69 | height: var(--iconSize); |
70 | width: var(--iconSize); |
71 | color: var(--md-sys-color-on-surface-variant); |
72 | } |
73 | |
74 | .md-tab .active span { |
75 | color: var(--md-sys-color-primary); |
76 | } |
77 | |
78 | .md-tab a:hover { |
79 | color: var(--md-sys-color-on-surface); |
80 | } |
81 | |
82 | /* state layer */ |
83 | .md-tab a:hover::after { |
84 | background-color: var(--md-sys-color-on-surface); |
85 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
86 | } |
87 | |
88 | .md-tab a.active:hover { |
89 | color: var(--md-sys-color-primary); |
90 | } |
91 | |
92 | /* state layer */ |
93 | .md-tab a.active:hover::after { |
94 | background-color: var(--md-sys-color-primary); |
95 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
96 | } |
97 | |
98 | .md-tab a:hover span { |
99 | color: var(--md-sys-color-on-surface); |
100 | } |
101 | |
102 | .md-tab a.active:hover span { |
103 | color: var(--md-sys-color-primary); |
104 | } |
105 | |
106 | .md-tab a:focus { |
107 | outline: none; |
108 | } |
109 | |
110 | /* state layer */ |
111 | .md-tab a:focus::after { |
112 | background-color: var(--md-sys-color-on-surface); |
113 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
114 | } |
115 | |
116 | /* state layer */ |
117 | .md-tab a.active:focus::after { |
118 | background-color: var(--md-sys-color-primary); |
119 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
120 | } |
121 | |
122 | .md-tab a:active { |
123 | background-position: center; |
124 | background-image: |
125 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
126 | background-size: 100%; |
127 | animation-name: md-ripple; |
128 | animation-duration: var(--md-sys-motion-duration-500); |
129 | } |
130 | |
131 | /* state layer */ |
132 | .md-tab a:active::after { |
133 | background-color: var(--md-sys-color-on-surface); |
134 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
135 | } |
136 | |
137 | /* state layer */ |
138 | .md-tab a.active:active::after { |
139 | background-color: var(--md-sys-color-primary); |
140 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
141 | } |
1 | .md-headline { |
2 | box-sizing: border-box; |
3 | margin: 0; |
4 | color: var(--md-sys-color-on-surface); |
5 | background-color: var(--md-sys-color-surface); |
6 | transition-property: color; |
7 | transition-duration: var(--md-sys-motion-duration-700); |
8 | } |
9 | |
10 | .md-headline.scroll-adicional { |
11 | color: var(--md-sys-color-surface-container-low); |
12 | background-color: var(--md-sys-color-surface-container-low); |
13 | } |
14 | |
15 | .md-headline.scroll { |
16 | color: var(--md-sys-color-surface); |
17 | } |
18 | |
19 | .md-headline.headline-small { |
20 | padding: 0 1rem 1.5rem 1rem; |
21 | } |
22 | |
23 | .md-headline.headline-medium { |
24 | padding: 0 1rem 1.75rem 1rem; |
25 | } |
1 | /* |
2 | Copyright 2016 Google Inc. All rights reserved. |
3 | |
4 | Licensed under the Apache License, Version 2.0 (the "License"); |
5 | you may not use this file except in compliance with the License. |
6 | You may obtain a copy of the License at |
7 | |
8 | http://www.apache.org/licenses/LICENSE-2.0 |
9 | |
10 | Unless required by applicable law or agreed to in writing, software |
11 | distributed under the License is distributed on an "AS IS" BASIS, |
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 | See the License for the specific language governing permissions and |
14 | limitations under the License. |
15 | */ |
16 | |
17 | :root { |
18 | /* Emphasized decelerate easing (out) */ |
19 | --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806; |
20 | --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071; |
21 | --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612; |
22 | --md-sys-motion-easing-emphasized-decelerate-y1: 1; |
23 | /* Emphasized accelerate easing (in) */ |
24 | --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896; |
25 | --md-sys-motion-easing-emphasized-accelerate-y0: 0; |
26 | --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929; |
27 | --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448; |
28 | /* Standard decelerate easing (out) */ |
29 | --md-sys-motion-easing-standard-decelerate-x0: 0; |
30 | --md-sys-motion-easing-standard-decelerate-y0: 0; |
31 | --md-sys-motion-easing-standard-decelerate-x1: 0; |
32 | --md-sys-motion-easing-standard-decelerate-y1: 1; |
33 | /* Standard accelerate easing (in) */ |
34 | --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896; |
35 | --md-sys-motion-easing-standard-accelerate-y0: 0; |
36 | --md-sys-motion-easing-standard-accelerate-x1: 1; |
37 | --md-sys-motion-easing-standard-accelerate-y1: 1; |
38 | /* Duration 1000ms */ |
39 | --md-sys-motion-duration-1000: 1000ms; |
40 | /* Duration 900ms */ |
41 | --md-sys-motion-duration-900: 900ms; |
42 | /* Duration 800ms */ |
43 | --md-sys-motion-duration-800: 800ms; |
44 | /* Duration 700ms */ |
45 | --md-sys-motion-duration-700: 700ms; |
46 | /* Duration 600ms */ |
47 | --md-sys-motion-duration-600: 600ms; |
48 | /* Duration 550ms */ |
49 | --md-sys-motion-duration-550: 550ms; |
50 | /* Duration 500ms */ |
51 | --md-sys-motion-duration-500: 500ms; |
52 | /* Duration 450ms */ |
53 | --md-sys-motion-duration-450: 450ms; |
54 | /* Duration 400ms */ |
55 | --md-sys-motion-duration-400: 400ms; |
56 | /* Duration 350ms */ |
57 | --md-sys-motion-duration-350: 350ms; |
58 | /* Duration 300ms */ |
59 | --md-sys-motion-duration-300: 300ms; |
60 | /* Duration 250ms */ |
61 | --md-sys-motion-duration-250: 250ms; |
62 | /* Duration 200ms */ |
63 | --md-sys-motion-duration-200: 200ms; |
64 | /* Duration 150ms */ |
65 | --md-sys-motion-duration-150: 150ms; |
66 | /* Duration 100ms */ |
67 | --md-sys-motion-duration-100: 100ms; |
68 | /* Duration 50ms */ |
69 | --md-sys-motion-duration-50: 50ms; |
70 | /* Standard easing (in and out) */ |
71 | --md-sys-motion-easing-standard-x0: 0.20000000298023224; |
72 | --md-sys-motion-easing-standard-y0: 0; |
73 | --md-sys-motion-easing-standard-x1: 0; |
74 | --md-sys-motion-easing-standard-y1: 1; |
75 | /* Linear easing */ |
76 | --md-sys-motion-easing-linear-x0: 0; |
77 | --md-sys-motion-easing-linear-y0: 0; |
78 | --md-sys-motion-easing-linear-x1: 1; |
79 | --md-sys-motion-easing-linear-y1: 1; |
80 | /* Emphasized */ |
81 | --md-sys-motion-easing-emphasized-x0: 0.20000000298023224; |
82 | --md-sys-motion-easing-emphasized-y0: 0; |
83 | --md-sys-motion-easing-emphasized-x1: 0; |
84 | --md-sys-motion-easing-emphasized-y1: 1; |
85 | /* Motion path */ |
86 | --md-sys-motion-path-standard-path: 1; |
87 | } |
88 | .duration-50 { |
89 | transition-duration: var(--md-sys-motion-duration-50); |
90 | } |
91 | .duration-100 { |
92 | transition-duration: var(--md-sys-motion-duration-100); |
93 | } |
94 | .duration-150 { |
95 | transition-duration: var(--md-sys-motion-duration-150); |
96 | } |
97 | .duration-200 { |
98 | transition-duration: var(--md-sys-motion-duration-200); |
99 | } |
100 | .duration-250 { |
101 | transition-duration: var(--md-sys-motion-duration-250); |
102 | } |
103 | .duration-300 { |
104 | transition-duration: var(--md-sys-motion-duration-300); |
105 | } |
106 | .duration-350 { |
107 | transition-duration: var(--md-sys-motion-duration-350); |
108 | } |
109 | .duration-400 { |
110 | transition-duration: var(--md-sys-motion-duration-400); |
111 | } |
112 | .duration-450 { |
113 | transition-duration: var(--md-sys-motion-duration-450); |
114 | } |
115 | .duration-500 { |
116 | transition-duration: var(--md-sys-motion-duration-500); |
117 | } |
118 | .duration-550 { |
119 | transition-duration: var(--md-sys-motion-duration-550); |
120 | } |
121 | .duration-600 { |
122 | transition-duration: var(--md-sys-motion-duration-600); |
123 | } |
124 | .duration-700 { |
125 | transition-duration: var(--md-sys-motion-duration-700); |
126 | } |
127 | .duration-800 { |
128 | transition-duration: var(--md-sys-motion-duration-800); |
129 | } |
130 | .duration-900 { |
131 | transition-duration: var(--md-sys-motion-duration-900); |
132 | } |
133 | .duration-1000 { |
134 | transition-duration: var(--md-sys-motion-duration-1000); |
135 | } |
136 | .easing-standard { |
137 | transition-timing-function: cubic-bezier( |
138 | var(--md-sys-motion-easing-standard-x0), |
139 | var(--md-sys-motion-easing-standard-y0), |
140 | var(--md-sys-motion-easing-standard-x1), |
141 | var(--md-sys-motion-easing-standard-y1) |
142 | ); |
143 | } |
144 | .easing-linear { |
145 | transition-timing-function: cubic-bezier( |
146 | var(--md-sys-motion-easing-linear-x0), |
147 | var(--md-sys-motion-easing-linear-y0), |
148 | var(--md-sys-motion-easing-linear-x1), |
149 | var(--md-sys-motion-easing-linear-y1) |
150 | ); |
151 | } |
152 | .easing-standard-accelerate { |
153 | transition-timing-function: cubic-bezier( |
154 | var(--md-sys-motion-easing-standard-accelerate-x0), |
155 | var(--md-sys-motion-easing-standard-accelerate-y0), |
156 | var(--md-sys-motion-easing-standard-accelerate-x1), |
157 | var(--md-sys-motion-easing-standard-accelerate-y1) |
158 | ); |
159 | } |
160 | .easing-standard-decelerate { |
161 | transition-timing-function: cubic-bezier( |
162 | var(--md-sys-motion-easing-standard-decelerate-x0), |
163 | var(--md-sys-motion-easing-standard-decelerate-y0), |
164 | var(--md-sys-motion-easing-standard-decelerate-x1), |
165 | var(--md-sys-motion-easing-standard-decelerate-y1) |
166 | ); |
167 | } |
168 | .easing-emphasized { |
169 | transition-timing-function: cubic-bezier( |
170 | var(--md-sys-motion-easing-emphasized-x0), |
171 | var(--md-sys-motion-easing-emphasized-y0), |
172 | var(--md-sys-motion-easing-emphasized-x1), |
173 | var(--md-sys-motion-easing-emphasized-y1) |
174 | ); |
175 | } |
176 |
1 | /* roboto-regular - latin */ |
2 | @font-face { |
3 | /* Revisa |
4 | * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display |
5 | * para otras opciones. */ |
6 | font-display: swap; |
7 | font-family: 'Roboto'; |
8 | font-style: normal; |
9 | font-weight: 400; |
10 | /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
11 | src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2'); |
12 | } |
1 | /* |
2 | Copyright 2016 Google Inc. All rights reserved. |
3 | |
4 | Licensed under the Apache License, Version 2.0 (the "License"); |
5 | you may not use this file except in compliance with the License. |
6 | You may obtain a copy of the License at |
7 | |
8 | http://www.apache.org/licenses/LICENSE-2.0 |
9 | |
10 | Unless required by applicable law or agreed to in writing, software |
11 | distributed under the License is distributed on an "AS IS" BASIS, |
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 | See the License for the specific language governing permissions and |
14 | limitations under the License. |
15 | */ |
16 | |
17 | :root { |
18 | /* Fully rounded */ |
19 | --md-sys-shape-corner-full-family: 3px; |
20 | /* Extra large top rounding */ |
21 | --md-sys-shape-corner-extra-large-top-family: 1px; |
22 | --md-sys-shape-corner-extra-large-top-default-size: 0px; |
23 | --md-sys-shape-corner-extra-large-top-top-left: 28px; |
24 | --md-sys-shape-corner-extra-large-top-top-right-unit: 1px; |
25 | --md-sys-shape-corner-extra-large-top-top-right: 28px; |
26 | /* Extra large rounding */ |
27 | --md-sys-shape-corner-extra-large-family: 1px; |
28 | --md-sys-shape-corner-extra-large-default-size-unit: 1px; |
29 | --md-sys-shape-corner-extra-large-default-size: 28px; |
30 | /* Large top rounding */ |
31 | --md-sys-shape-corner-large-top-family: 1px; |
32 | --md-sys-shape-corner-large-top-default-size-unit: 1px; |
33 | --md-sys-shape-corner-large-top-default-size: 0px; |
34 | --md-sys-shape-corner-large-top-top-left-unit: 1px; |
35 | --md-sys-shape-corner-large-top-top-left: 16px; |
36 | --md-sys-shape-corner-large-top-top-right-unit: 1px; |
37 | --md-sys-shape-corner-large-top-top-right: 16px; |
38 | /* Large end rounding */ |
39 | --md-sys-shape-corner-large-end-family: 1px; |
40 | --md-sys-shape-corner-large-end-default-size-unit: 1px; |
41 | --md-sys-shape-corner-large-end-default-size: 0px; |
42 | --md-sys-shape-corner-large-end-top-right-unit: 1px; |
43 | --md-sys-shape-corner-large-end-top-right: 16px; |
44 | --md-sys-shape-corner-large-end-bottom-right-unit: 1px; |
45 | --md-sys-shape-corner-large-end-bottom-right: 16px; |
46 | /* Large rounding */ |
47 | --md-sys-shape-corner-large-family: 1px; |
48 | --md-sys-shape-corner-large-default-size-unit: 1px; |
49 | --md-sys-shape-corner-large-default-size: 16px; |
50 | /* Medium rounding */ |
51 | --md-sys-shape-corner-medium-family: 1px; |
52 | --md-sys-shape-corner-medium-default-size-unit: 1px; |
53 | --md-sys-shape-corner-medium-default-size: 12px; |
54 | /* Small rounding */ |
55 | --md-sys-shape-corner-small-family: 1px; |
56 | --md-sys-shape-corner-small-default-size-unit: 1px; |
57 | --md-sys-shape-corner-small-default-size: 8px; |
58 | /* Extra small top rounding */ |
59 | --md-sys-shape-corner-extra-small-top-family: 1px; |
60 | --md-sys-shape-corner-extra-small-top-default-size-unit: 1px; |
61 | --md-sys-shape-corner-extra-small-top-default-size: 0px; |
62 | --md-sys-shape-corner-extra-small-top-top-left-unit: 1px; |
63 | --md-sys-shape-corner-extra-small-top-top-left: 4px; |
64 | --md-sys-shape-corner-extra-small-top-top-right-unit: 1px; |
65 | --md-sys-shape-corner-extra-small-top-top-right: 4px; |
66 | /* Extra small rounding */ |
67 | --md-sys-shape-corner-extra-small-family: 1px; |
68 | --md-sys-shape-corner-extra-small-default-size-unit: 1px; |
69 | --md-sys-shape-corner-extra-small-default-size: 4px; |
70 | /* No rounding */ |
71 | --md-sys-shape-corner-none-family: 1px; |
72 | --md-sys-shape-corner-none-default-size-unit: 1px; |
73 | --md-sys-shape-corner-none-default-size: 0px; |
74 | |
75 | --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size); |
76 | --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size); |
77 | --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size); |
78 | } |
79 | |
80 | .shape-none { |
81 | border-radius: var(--md-sys-shape-corner-none-default-size); |
82 | } |
83 | .shape-extra-small { |
84 | border-radius: var(--md-sys-shape-corner-extra-small-default-size); |
85 | } |
86 | .shape-small { |
87 | border-radius: var(--md-sys-shape-corner-small-default-size); |
88 | } |
89 | .shape-medium { |
90 | border-radius: var(--md-sys-shape-corner-medium-default-size); |
91 | } |
92 | .shape-large { |
93 | border-radius: var(--md-sys-shape-corner-large-default-size); |
94 | } |
95 | .shape-extra-large { |
96 | border-radius: var(--md-sys-shape-corner-extra-large-default-size); |
97 | } |
98 | .extra-small-top { |
99 | border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left); |
100 | border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right); |
101 | } |
102 | .large-end { |
103 | border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right); |
104 | border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right); |
105 | } |
106 | .large-top { |
107 | border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left); |
108 | border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right); |
109 | } |
110 | .extra-large-top { |
111 | border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left); |
112 | border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right); |
113 | } |
114 |
1 | /* |
2 | Copyright 2016 Google Inc. All rights reserved. |
3 | |
4 | Licensed under the Apache License, Version 2.0 (the "License"); |
5 | you may not use this file except in compliance with the License. |
6 | You may obtain a copy of the License at |
7 | |
8 | http://www.apache.org/licenses/LICENSE-2.0 |
9 | |
10 | Unless required by applicable law or agreed to in writing, software |
11 | distributed under the License is distributed on an "AS IS" BASIS, |
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 | See the License for the specific language governing permissions and |
14 | limitations under the License. |
15 | */ |
16 | |
17 | :root { |
18 | /* Dragged state layer opacity */ |
19 | --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213; |
20 | /* Pressed state layer opacity */ |
21 | /* --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099; */ |
22 | --md-sys-state-pressed-state-layer-opacity: 0.15999999731779099; |
23 | /* Focus state layer opacity */ |
24 | --md-sys-state-focus-state-layer-opacity: 0.11999999731779099; |
25 | /* Hover state layer opacity */ |
26 | --md-sys-state-hover-state-layer-opacity: 0.07999999821186066; |
27 | } |
28 | .hover-state-layer { |
29 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
30 | } |
31 | .pressed-state-layer { |
32 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
33 | } |
34 | .dragged-state-layer { |
35 | opacity: var(--md-sys-state-dragged-state-layer-opacity); |
36 | } |
37 | .focus-state-layer { |
38 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
39 | } |
40 |
1 | :root { |
2 | --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); |
3 | --md-sys-color-surface-tint-color: var(--md-sys-color-surface-tint-color-dark); |
4 | --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); |
5 | --md-sys-color-on-error: var(--md-sys-color-on-error-dark); |
6 | --md-sys-color-error-container: var(--md-sys-color-error-container-dark); |
7 | --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); |
8 | --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); |
9 | --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); |
10 | --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); |
11 | --md-sys-color-shadow: var(--md-sys-color-shadow-dark); |
12 | --md-sys-color-error: var(--md-sys-color-error-dark); |
13 | --md-sys-color-outline: var(--md-sys-color-outline-dark); |
14 | --md-sys-color-on-background: var(--md-sys-color-on-background-dark); |
15 | --md-sys-color-background: var(--md-sys-color-background-dark); |
16 | --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); |
17 | --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); |
18 | --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); |
19 | --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); |
20 | --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); |
21 | --md-sys-color-surface: var(--md-sys-color-surface-dark); |
22 | --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); |
23 | --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); |
24 | --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); |
25 | --md-sys-color-secondary: var(--md-sys-color-secondary-dark); |
26 | --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); |
27 | --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); |
28 | --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); |
29 | --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); |
30 | --md-sys-color-primary: var(--md-sys-color-primary-dark); |
31 | } |
32 |
1 | :root { |
2 | --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); |
3 | --md-sys-color-surface-tint-color: var(--md-sys-color-surface-tint-color-light); |
4 | --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); |
5 | --md-sys-color-on-error: var(--md-sys-color-on-error-light); |
6 | --md-sys-color-error-container: var(--md-sys-color-error-container-light); |
7 | --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); |
8 | --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); |
9 | --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); |
10 | --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); |
11 | --md-sys-color-shadow: var(--md-sys-color-shadow-light); |
12 | --md-sys-color-error: var(--md-sys-color-error-light); |
13 | --md-sys-color-outline: var(--md-sys-color-outline-light); |
14 | --md-sys-color-on-background: var(--md-sys-color-on-background-light); |
15 | --md-sys-color-background: var(--md-sys-color-background-light); |
16 | --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); |
17 | --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); |
18 | --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); |
19 | --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); |
20 | --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); |
21 | --md-sys-color-surface: var(--md-sys-color-surface-light); |
22 | --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); |
23 | --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); |
24 | --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); |
25 | --md-sys-color-secondary: var(--md-sys-color-secondary-light); |
26 | --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); |
27 | --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); |
28 | --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); |
29 | --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); |
30 | --md-sys-color-primary: var(--md-sys-color-primary-light); |
31 | } |
32 |
1 | /* |
2 | Copyright 2016 Google Inc. All rights reserved. |
3 | |
4 | Licensed under the Apache License, Version 2.0 (the "License"); |
5 | you may not use this file except in compliance with the License. |
6 | You may obtain a copy of the License at |
7 | |
8 | http://www.apache.org/licenses/LICENSE-2.0 |
9 | |
10 | Unless required by applicable law or agreed to in writing, software |
11 | distributed under the License is distributed on an "AS IS" BASIS, |
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 | See the License for the specific language governing permissions and |
14 | limitations under the License. |
15 | */ |
16 | |
17 | /* This file is generated */ |
18 | |
19 | /* DO NOT EDIT */ |
20 | |
21 | :root { |
22 | /* Label Small */ |
23 | --md-sys-typescale-label-small-text-transform: unset; |
24 | --md-sys-typescale-label-small-axis-value: unset; |
25 | --md-sys-typescale-label-small-font-style: unset; |
26 | --md-sys-typescale-label-small-text-decoration: unset; |
27 | /* Label Small line height */ |
28 | --md-sys-typescale-label-small-line-height-value: 16px; |
29 | --md-sys-typescale-label-small-line-height-unit: 2px; |
30 | --md-sys-typescale-label-small-line-height: 16px; |
31 | /* Label Small font tracking */ |
32 | --md-sys-typescale-label-small-tracking-value: 0.5px; |
33 | --md-sys-typescale-label-small-tracking-unit: 2px; |
34 | --md-sys-typescale-label-small-tracking: 0.5px; |
35 | /* Label Small font size */ |
36 | --md-sys-typescale-label-small-size-value: 11px; |
37 | --md-sys-typescale-label-small-size-unit: 2px; |
38 | --md-sys-typescale-label-small-size: 11px; |
39 | /* Label Small font weight */ |
40 | --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium); |
41 | /* Label Small font name */ |
42 | --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); |
43 | /* Label Medium */ |
44 | --md-sys-typescale-label-medium-axis-value: unset; |
45 | --md-sys-typescale-label-medium-font-style: unset; |
46 | --md-sys-typescale-label-medium-text-decoration: unset; |
47 | /* Label Medium text transform */ |
48 | --md-sys-typescale-label-medium-text-transform: 1; |
49 | /* Label Medium line height */ |
50 | --md-sys-typescale-label-medium-line-height-value: 16px; |
51 | --md-sys-typescale-label-medium-line-height-unit: 2px; |
52 | --md-sys-typescale-label-medium-line-height: 16px; |
53 | /* Label Medium font tracking */ |
54 | --md-sys-typescale-label-medium-tracking-value: 0.5px; |
55 | --md-sys-typescale-label-medium-tracking-unit: 2px; |
56 | --md-sys-typescale-label-medium-tracking: 0.5px; |
57 | /* Label Medium font size */ |
58 | --md-sys-typescale-label-medium-size-value: 12px; |
59 | --md-sys-typescale-label-medium-size-unit: 2px; |
60 | --md-sys-typescale-label-medium-size: 12px; |
61 | /* Label Medium font weight */ |
62 | --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium); |
63 | /* Label Medium font name */ |
64 | --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); |
65 | /* Label Large */ |
66 | --md-sys-typescale-label-large-text-transform: unset; |
67 | --md-sys-typescale-label-large-axis-value: unset; |
68 | --md-sys-typescale-label-large-font-style: unset; |
69 | --md-sys-typescale-label-large-text-decoration: unset; |
70 | /* Label Large line height */ |
71 | --md-sys-typescale-label-large-line-height-value: 20px; |
72 | --md-sys-typescale-label-large-line-height-unit: 2px; |
73 | --md-sys-typescale-label-large-line-height: 20px; |
74 | /* Label Large font tracking */ |
75 | --md-sys-typescale-label-large-tracking-value: 0.10000000149011612px; |
76 | --md-sys-typescale-label-large-tracking-unit: 2px; |
77 | --md-sys-typescale-label-large-tracking: 0.10000000149011612px; |
78 | /* Label Large font size */ |
79 | --md-sys-typescale-label-large-size-value: 14px; |
80 | --md-sys-typescale-label-large-size-unit: 2px; |
81 | --md-sys-typescale-label-large-size: 14px; |
82 | /* Label Large font weight */ |
83 | --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium); |
84 | /* Label Large font name */ |
85 | --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); |
86 | /* Body Small */ |
87 | --md-sys-typescale-body-small-text-transform: unset; |
88 | --md-sys-typescale-body-small-axis-value: unset; |
89 | --md-sys-typescale-body-small-font-style: unset; |
90 | --md-sys-typescale-body-small-text-decoration: unset; |
91 | /* Body Small line height */ |
92 | --md-sys-typescale-body-small-line-height-value: 16px; |
93 | --md-sys-typescale-body-small-line-height-unit: 2px; |
94 | --md-sys-typescale-body-small-line-height: 16px; |
95 | /* Body Small font tracking */ |
96 | --md-sys-typescale-body-small-tracking-value: 0.4000000059604645px; |
97 | --md-sys-typescale-body-small-tracking-unit: 2px; |
98 | --md-sys-typescale-body-small-tracking: 0.4000000059604645px; |
99 | /* Body Small font size */ |
100 | --md-sys-typescale-body-small-size-value: 12px; |
101 | --md-sys-typescale-body-small-size-unit: 2px; |
102 | --md-sys-typescale-body-small-size: 12px; |
103 | /* Body Small font weight */ |
104 | --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular); |
105 | /* Body Small font name */ |
106 | --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); |
107 | /* Body Medium */ |
108 | --md-sys-typescale-body-medium-text-transform: unset; |
109 | --md-sys-typescale-body-medium-axis-value: unset; |
110 | --md-sys-typescale-body-medium-font-style: unset; |
111 | --md-sys-typescale-body-medium-text-decoration: unset; |
112 | /* Body Medium line height */ |
113 | --md-sys-typescale-body-medium-line-height-value: 20px; |
114 | --md-sys-typescale-body-medium-line-height-unit: 2px; |
115 | --md-sys-typescale-body-medium-line-height: 20px; |
116 | /* Body Medium font tracking */ |
117 | --md-sys-typescale-body-medium-tracking-value: 0.25px; |
118 | --md-sys-typescale-body-medium-tracking-unit: 2px; |
119 | --md-sys-typescale-body-medium-tracking: 0.25px; |
120 | /* Body Medium font size */ |
121 | --md-sys-typescale-body-medium-size-value: 14px; |
122 | --md-sys-typescale-body-medium-size-unit: 2px; |
123 | --md-sys-typescale-body-medium-size: 14px; |
124 | /* Body Medium font weight */ |
125 | --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular); |
126 | /* Body Medium font name */ |
127 | --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); |
128 | /* Body Large */ |
129 | --md-sys-typescale-body-large-text-transform: unset; |
130 | --md-sys-typescale-body-large-axis-value: unset; |
131 | --md-sys-typescale-body-large-font-style: unset; |
132 | --md-sys-typescale-body-large-text-decoration: unset; |
133 | /* Body Large line height */ |
134 | --md-sys-typescale-body-large-line-height-value: 24px; |
135 | --md-sys-typescale-body-large-line-height-unit: 2px; |
136 | --md-sys-typescale-body-large-line-height: 24px; |
137 | /* Body Large font tracking */ |
138 | --md-sys-typescale-body-large-tracking-value: 0.5px; |
139 | --md-sys-typescale-body-large-tracking-unit: 2px; |
140 | --md-sys-typescale-body-large-tracking: 0.5px; |
141 | /* Body Large font size */ |
142 | --md-sys-typescale-body-large-size-value: 16px; |
143 | --md-sys-typescale-body-large-size-unit: 2px; |
144 | --md-sys-typescale-body-large-size: 16px; |
145 | /* Body Large font weight */ |
146 | --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular); |
147 | /* Body Large font name */ |
148 | --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); |
149 | /* Title Small */ |
150 | --md-sys-typescale-title-small-text-transform: unset; |
151 | --md-sys-typescale-title-small-axis-value: unset; |
152 | --md-sys-typescale-title-small-font-style: unset; |
153 | --md-sys-typescale-title-small-text-decoration: unset; |
154 | /* Title Small line height */ |
155 | --md-sys-typescale-title-small-line-height-value: 20px; |
156 | --md-sys-typescale-title-small-line-height-unit: 2px; |
157 | --md-sys-typescale-title-small-line-height: 20px; |
158 | /* Title Small font tracking */ |
159 | --md-sys-typescale-title-small-tracking-value: 0.10000000149011612px; |
160 | --md-sys-typescale-title-small-tracking-unit: 2px; |
161 | --md-sys-typescale-title-small-tracking: 0.10000000149011612px; |
162 | /* Title Small font size */ |
163 | --md-sys-typescale-title-small-size-value: 14px; |
164 | --md-sys-typescale-title-small-size-unit: 2px; |
165 | --md-sys-typescale-title-small-size: 14px; |
166 | /* Title Small font weight */ |
167 | --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium); |
168 | /* Title Small font name */ |
169 | --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain); |
170 | /* Title Medium */ |
171 | --md-sys-typescale-title-medium-text-transform: unset; |
172 | --md-sys-typescale-title-medium-axis-value: unset; |
173 | --md-sys-typescale-title-medium-font-style: unset; |
174 | --md-sys-typescale-title-medium-text-decoration: unset; |
175 | /* Title Medium line height */ |
176 | --md-sys-typescale-title-medium-line-height-value: 24px; |
177 | --md-sys-typescale-title-medium-line-height-unit: 2px; |
178 | --md-sys-typescale-title-medium-line-height: 24px; |
179 | /* Title Medium font tracking */ |
180 | --md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px; |
181 | --md-sys-typescale-title-medium-tracking-unit: 2px; |
182 | --md-sys-typescale-title-medium-tracking: 0.15000000596046448px; |
183 | /* Title Medium font size */ |
184 | --md-sys-typescale-title-medium-size-value: 16px; |
185 | --md-sys-typescale-title-medium-size-unit: 2px; |
186 | --md-sys-typescale-title-medium-size: 16px; |
187 | /* Title Medium font weight */ |
188 | --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium); |
189 | /* Title Medium font name */ |
190 | --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); |
191 | /* Title Large */ |
192 | --md-sys-typescale-title-large-text-transform: unset; |
193 | --md-sys-typescale-title-large-axis-value: unset; |
194 | --md-sys-typescale-title-large-font-style: unset; |
195 | --md-sys-typescale-title-large-text-decoration: unset; |
196 | /* Title Large line height */ |
197 | --md-sys-typescale-title-large-line-height-value: 28px; |
198 | --md-sys-typescale-title-large-line-height-unit: 2px; |
199 | --md-sys-typescale-title-large-line-height: 28px; |
200 | /* Title Large font tracking */ |
201 | --md-sys-typescale-title-large-tracking-value: 0px; |
202 | --md-sys-typescale-title-large-tracking-unit: 2px; |
203 | --md-sys-typescale-title-large-tracking: 0px; |
204 | /* Title Large font size */ |
205 | --md-sys-typescale-title-large-size-value: 22px; |
206 | --md-sys-typescale-title-large-size-unit: 2px; |
207 | --md-sys-typescale-title-large-size: 22px; |
208 | /* Title Large font weight */ |
209 | --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular); |
210 | /* Title Large font name */ |
211 | --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); |
212 | /* Headline Small */ |
213 | --md-sys-typescale-headline-small-text-transform: unset; |
214 | --md-sys-typescale-headline-small-axis-value: unset; |
215 | --md-sys-typescale-headline-small-font-style: unset; |
216 | --md-sys-typescale-headline-small-text-decoration: unset; |
217 | /* Headline Small line height */ |
218 | --md-sys-typescale-headline-small-line-height-value: 32px; |
219 | --md-sys-typescale-headline-small-line-height-unit: 2px; |
220 | --md-sys-typescale-headline-small-line-height: 32px; |
221 | /* Headline Small font tracking */ |
222 | --md-sys-typescale-headline-small-tracking-value: 0px; |
223 | --md-sys-typescale-headline-small-tracking-unit: 2px; |
224 | --md-sys-typescale-headline-small-tracking: 0px; |
225 | /* Headline Small font size */ |
226 | --md-sys-typescale-headline-small-size-value: 24px; |
227 | --md-sys-typescale-headline-small-size-unit: 2px; |
228 | --md-sys-typescale-headline-small-size: 24px; |
229 | /* Headline Small font weight */ |
230 | --md-sys-typescale-headline-small-weight: var( |
231 | --md-ref-typeface-weight-regular |
232 | ); |
233 | /* Headline Small font name */ |
234 | --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); |
235 | /* Headline Medium */ |
236 | --md-sys-typescale-headline-medium-text-transform: unset; |
237 | --md-sys-typescale-headline-medium-axis-value: unset; |
238 | --md-sys-typescale-headline-medium-font-style: unset; |
239 | --md-sys-typescale-headline-medium-text-decoration: unset; |
240 | /* Headline Medium line height */ |
241 | --md-sys-typescale-headline-medium-line-height-value: 36px; |
242 | --md-sys-typescale-headline-medium-line-height-unit: 2px; |
243 | --md-sys-typescale-headline-medium-line-height: 36px; |
244 | /* Headline Medium font tracking */ |
245 | --md-sys-typescale-headline-medium-tracking-value: 0px; |
246 | --md-sys-typescale-headline-medium-tracking-unit: 2px; |
247 | --md-sys-typescale-headline-medium-tracking: 0px; |
248 | /* Headline Medium font size */ |
249 | --md-sys-typescale-headline-medium-size-value: 28px; |
250 | --md-sys-typescale-headline-medium-size-unit: 2px; |
251 | --md-sys-typescale-headline-medium-size: 28px; |
252 | /* Headline Medium font weight */ |
253 | --md-sys-typescale-headline-medium-weight: var( |
254 | --md-ref-typeface-weight-regular |
255 | ); |
256 | /* Headline Medium font name */ |
257 | --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); |
258 | /* Headline Large */ |
259 | --md-sys-typescale-headline-large-text-transform: unset; |
260 | --md-sys-typescale-headline-large-axis-value: unset; |
261 | --md-sys-typescale-headline-large-font-style: unset; |
262 | --md-sys-typescale-headline-large-text-decoration: unset; |
263 | /* Headline Large line height */ |
264 | --md-sys-typescale-headline-large-line-height-value: 40px; |
265 | --md-sys-typescale-headline-large-line-height-unit: 2px; |
266 | --md-sys-typescale-headline-large-line-height: 40px; |
267 | /* Headline Large font tracking */ |
268 | --md-sys-typescale-headline-large-tracking-value: 0px; |
269 | --md-sys-typescale-headline-large-tracking-unit: 2px; |
270 | --md-sys-typescale-headline-large-tracking: 0px; |
271 | /* Headline Large font size */ |
272 | --md-sys-typescale-headline-large-size-value: 32px; |
273 | --md-sys-typescale-headline-large-size-unit: 2px; |
274 | --md-sys-typescale-headline-large-size: 32px; |
275 | /* Headline Large font name */ |
276 | --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); |
277 | /* Headline Large font weight */ |
278 | --md-sys-typescale-headline-large-weight: var( |
279 | --md-ref-typeface-weight-regular |
280 | ); |
281 | /* Display Small */ |
282 | --md-sys-typescale-display-small-text-transform: unset; |
283 | --md-sys-typescale-display-small-axis-value: unset; |
284 | --md-sys-typescale-display-small-font-style: unset; |
285 | --md-sys-typescale-display-small-text-decoration: unset; |
286 | /* Display Small line height */ |
287 | --md-sys-typescale-display-small-line-height-value: 44px; |
288 | --md-sys-typescale-display-small-line-height-unit: 2px; |
289 | --md-sys-typescale-display-small-line-height: 44px; |
290 | /* Display Small font tracking */ |
291 | --md-sys-typescale-display-small-tracking-value: 0px; |
292 | --md-sys-typescale-display-small-tracking-unit: 2px; |
293 | --md-sys-typescale-display-small-tracking: 0px; |
294 | /* Display Small font size */ |
295 | --md-sys-typescale-display-small-size-value: 36px; |
296 | --md-sys-typescale-display-small-size-unit: 2px; |
297 | --md-sys-typescale-display-small-size: 36px; |
298 | /* Display Small font weight */ |
299 | --md-sys-typescale-display-small-weight: var( |
300 | --md-ref-typeface-weight-regular |
301 | ); |
302 | /* Display Small font name */ |
303 | --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); |
304 | /* Display Medium */ |
305 | --md-sys-typescale-display-medium-text-transform: unset; |
306 | --md-sys-typescale-display-medium-axis-value: unset; |
307 | --md-sys-typescale-display-medium-font-style: unset; |
308 | --md-sys-typescale-display-medium-text-decoration: unset; |
309 | /* Display Medium line height */ |
310 | --md-sys-typescale-display-medium-line-height-value: 52px; |
311 | --md-sys-typescale-display-medium-line-height-unit: 2px; |
312 | --md-sys-typescale-display-medium-line-height: 52px; |
313 | /* Display Medium font tracking */ |
314 | --md-sys-typescale-display-medium-tracking-value: 0px; |
315 | --md-sys-typescale-display-medium-tracking-unit: 2px; |
316 | --md-sys-typescale-display-medium-tracking: 0px; |
317 | /* Display Medium font size */ |
318 | --md-sys-typescale-display-medium-size-value: 45px; |
319 | --md-sys-typescale-display-medium-size-unit: 2px; |
320 | --md-sys-typescale-display-medium-size: 45px; |
321 | /* Display Medium font weight */ |
322 | --md-sys-typescale-display-medium-weight: var( |
323 | --md-ref-typeface-weight-regular |
324 | ); |
325 | /* Display Medium font name */ |
326 | --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); |
327 | /* Display Large */ |
328 | --md-sys-typescale-display-large-text-transform: unset; |
329 | --md-sys-typescale-display-large-axis-value: unset; |
330 | --md-sys-typescale-display-large-font-style: unset; |
331 | --md-sys-typescale-display-large-text-decoration: unset; |
332 | /* Display Large line height */ |
333 | --md-sys-typescale-display-large-line-height-value: 64px; |
334 | --md-sys-typescale-display-large-line-height-unit: 2px; |
335 | --md-sys-typescale-display-large-line-height: 64px; |
336 | /* Display Large font tracking */ |
337 | --md-sys-typescale-display-large-tracking-value: -0.25px; |
338 | --md-sys-typescale-display-large-tracking-unit: 2px; |
339 | --md-sys-typescale-display-large-tracking: -0.25px; |
340 | /* Display Large font size */ |
341 | --md-sys-typescale-display-large-size-value: 57px; |
342 | --md-sys-typescale-display-large-size-unit: 2px; |
343 | --md-sys-typescale-display-large-size: 57px; |
344 | /* Display Large font weight */ |
345 | --md-sys-typescale-display-large-weight: var( |
346 | --md-ref-typeface-weight-regular |
347 | ); |
348 | /* Display Large font name */ |
349 | --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); |
350 | /* Plain typeface */ |
351 | --md-ref-typeface-plain: var(--Font); |
352 | /* Brand typeface */ |
353 | --md-ref-typeface-brand: var(--Font); |
354 | /* Bold weight */ |
355 | --md-ref-typeface-weight-bold: 700; |
356 | /* Medium weight */ |
357 | --md-ref-typeface-weight-medium: 500; |
358 | /* Regular weight */ |
359 | --md-ref-typeface-weight-regular: 400; |
360 | } |
361 | |
362 | /* Label Small */ |
363 | .label-small { |
364 | font-family: var(--md-sys-typescale-label-small-font); |
365 | font-weight: var(--md-sys-typescale-label-small-weight); |
366 | font-size: var(--md-sys-typescale-label-small-size); |
367 | font-style: var(--md-sys-typescale-label-small-font-style); |
368 | letter-spacing: var(--md-sys-typescale-label-small-tracking); |
369 | line-height: var(--md-sys-typescale-label-small-line-height); |
370 | text-transform: var(--md-sys-typescale-label-small-text-transform); |
371 | text-decoration: var(--md-sys-typescale-label-small-text-decoration); |
372 | } |
373 | /* Label Medium */ |
374 | .label-medium { |
375 | font-family: var(--md-sys-typescale-label-medium-font); |
376 | font-weight: var(--md-sys-typescale-label-medium-weight); |
377 | font-size: var(--md-sys-typescale-label-medium-size); |
378 | font-style: var(--md-sys-typescale-label-medium-font-style); |
379 | letter-spacing: var(--md-sys-typescale-label-medium-tracking); |
380 | line-height: var(--md-sys-typescale-label-medium-line-height); |
381 | text-transform: var(--md-sys-typescale-label-medium-text-transform); |
382 | text-decoration: var(--md-sys-typescale-label-medium-text-decoration); |
383 | } |
384 | /* Label Large */ |
385 | .label-large { |
386 | font-family: var(--md-sys-typescale-label-large-font); |
387 | font-weight: var(--md-sys-typescale-label-large-weight); |
388 | font-size: var(--md-sys-typescale-label-large-size); |
389 | font-style: var(--md-sys-typescale-label-large-font-style); |
390 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
391 | line-height: var(--md-sys-typescale-label-large-line-height); |
392 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
393 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
394 | } |
395 | /* Body Small */ |
396 | .body-small { |
397 | font-family: var(--md-sys-typescale-body-small-font); |
398 | font-weight: var(--md-sys-typescale-body-small-weight); |
399 | font-size: var(--md-sys-typescale-body-small-size); |
400 | font-style: var(--md-sys-typescale-body-small-font-style); |
401 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
402 | line-height: var(--md-sys-typescale-body-small-line-height); |
403 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
404 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
405 | } |
406 | /* Body Medium */ |
407 | .body-medium { |
408 | font-family: var(--md-sys-typescale-body-medium-font); |
409 | font-weight: var(--md-sys-typescale-body-medium-weight); |
410 | font-size: var(--md-sys-typescale-body-medium-size); |
411 | font-style: var(--md-sys-typescale-body-medium-font-style); |
412 | letter-spacing: var(--md-sys-typescale-body-medium-tracking); |
413 | line-height: var(--md-sys-typescale-body-medium-line-height); |
414 | text-transform: var(--md-sys-typescale-body-medium-text-transform); |
415 | text-decoration: var(--md-sys-typescale-body-medium-text-decoration); |
416 | } |
417 | /* Body Large */ |
418 | .body-large { |
419 | font-family: var(--md-sys-typescale-body-large-font); |
420 | font-weight: var(--md-sys-typescale-body-large-weight); |
421 | font-size: var(--md-sys-typescale-body-large-size); |
422 | font-style: var(--md-sys-typescale-body-large-font-style); |
423 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
424 | line-height: var(--md-sys-typescale-body-large-line-height); |
425 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
426 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
427 | } |
428 | /* Title Small */ |
429 | .title-small { |
430 | font-family: var(--md-sys-typescale-title-small-font); |
431 | font-weight: var(--md-sys-typescale-title-small-weight); |
432 | font-size: var(--md-sys-typescale-title-small-size); |
433 | font-style: var(--md-sys-typescale-title-small-font-style); |
434 | letter-spacing: var(--md-sys-typescale-title-small-tracking); |
435 | line-height: var(--md-sys-typescale-title-small-line-height); |
436 | text-transform: var(--md-sys-typescale-title-small-text-transform); |
437 | text-decoration: var(--md-sys-typescale-title-small-text-decoration); |
438 | } |
439 | /* Title Medium */ |
440 | .title-medium { |
441 | font-family: var(--md-sys-typescale-title-medium-font); |
442 | font-weight: var(--md-sys-typescale-title-medium-weight); |
443 | font-size: var(--md-sys-typescale-title-medium-size); |
444 | font-style: var(--md-sys-typescale-title-medium-font-style); |
445 | letter-spacing: var(--md-sys-typescale-title-medium-tracking); |
446 | line-height: var(--md-sys-typescale-title-medium-line-height); |
447 | text-transform: var(--md-sys-typescale-title-medium-text-transform); |
448 | text-decoration: var(--md-sys-typescale-title-medium-text-decoration); |
449 | } |
450 | /* Title Large */ |
451 | .title-large { |
452 | font-family: var(--md-sys-typescale-title-large-font); |
453 | font-weight: var(--md-sys-typescale-title-large-weight); |
454 | font-size: var(--md-sys-typescale-title-large-size); |
455 | font-style: var(--md-sys-typescale-title-large-font-style); |
456 | letter-spacing: var(--md-sys-typescale-title-large-tracking); |
457 | line-height: var(--md-sys-typescale-title-large-line-height); |
458 | text-transform: var(--md-sys-typescale-title-large-text-transform); |
459 | text-decoration: var(--md-sys-typescale-title-large-text-decoration); |
460 | } |
461 | /* Headline Small */ |
462 | .headline-small { |
463 | font-family: var(--md-sys-typescale-headline-small-font); |
464 | font-weight: var(--md-sys-typescale-headline-small-weight); |
465 | font-size: var(--md-sys-typescale-headline-small-size); |
466 | font-style: var(--md-sys-typescale-headline-small-font-style); |
467 | letter-spacing: var(--md-sys-typescale-headline-small-tracking); |
468 | line-height: var(--md-sys-typescale-headline-small-line-height); |
469 | text-transform: var(--md-sys-typescale-headline-small-text-transform); |
470 | text-decoration: var(--md-sys-typescale-headline-small-text-decoration); |
471 | } |
472 | /* Headline Medium */ |
473 | .headline-medium { |
474 | font-family: var(--md-sys-typescale-headline-medium-font); |
475 | font-weight: var(--md-sys-typescale-headline-medium-weight); |
476 | font-size: var(--md-sys-typescale-headline-medium-size); |
477 | font-style: var(--md-sys-typescale-headline-medium-font-style); |
478 | letter-spacing: var(--md-sys-typescale-headline-medium-tracking); |
479 | line-height: var(--md-sys-typescale-headline-medium-line-height); |
480 | text-transform: var(--md-sys-typescale-headline-medium-text-transform); |
481 | text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); |
482 | } |
483 | /* Headline Large */ |
484 | .headline-large { |
485 | font-family: var(--md-sys-typescale-headline-large-font); |
486 | font-weight: var(--md-sys-typescale-headline-large-weight); |
487 | font-size: var(--md-sys-typescale-headline-large-size); |
488 | font-style: var(--md-sys-typescale-headline-large-font-style); |
489 | letter-spacing: var(--md-sys-typescale-headline-large-tracking); |
490 | line-height: var(--md-sys-typescale-headline-large-line-height); |
491 | text-transform: var(--md-sys-typescale-headline-large-text-transform); |
492 | text-decoration: var(--md-sys-typescale-headline-large-text-decoration); |
493 | } |
494 | /* Display Small */ |
495 | .display-small { |
496 | font-family: var(--md-sys-typescale-display-small-font); |
497 | font-weight: var(--md-sys-typescale-display-small-weight); |
498 | font-size: var(--md-sys-typescale-display-small-size); |
499 | font-style: var(--md-sys-typescale-display-small-font-style); |
500 | letter-spacing: var(--md-sys-typescale-display-small-tracking); |
501 | line-height: var(--md-sys-typescale-display-small-line-height); |
502 | text-transform: var(--md-sys-typescale-display-small-text-transform); |
503 | text-decoration: var(--md-sys-typescale-display-small-text-decoration); |
504 | } |
505 | /* Display Medium */ |
506 | .display-medium { |
507 | font-family: var(--md-sys-typescale-display-medium-font); |
508 | font-weight: var(--md-sys-typescale-display-medium-weight); |
509 | font-size: var(--md-sys-typescale-display-medium-size); |
510 | font-style: var(--md-sys-typescale-display-medium-font-style); |
511 | letter-spacing: var(--md-sys-typescale-display-medium-tracking); |
512 | line-height: var(--md-sys-typescale-display-medium-line-height); |
513 | text-transform: var(--md-sys-typescale-display-medium-text-transform); |
514 | text-decoration: var(--md-sys-typescale-display-medium-text-decoration); |
515 | } |
516 | /* Display Large */ |
517 | .display-large { |
518 | font-family: var(--md-sys-typescale-display-large-font); |
519 | font-weight: var(--md-sys-typescale-display-large-weight); |
520 | font-size: var(--md-sys-typescale-display-large-size); |
521 | font-style: var(--md-sys-typescale-display-large-font-style); |
522 | letter-spacing: var(--md-sys-typescale-display-large-tracking); |
523 | line-height: var(--md-sys-typescale-display-large-line-height); |
524 | text-transform: var(--md-sys-typescale-display-large-text-transform); |
525 | text-decoration: var(--md-sys-typescale-display-large-text-decoration); |
526 | } |
527 |
1 | /** |
2 | * @param { HTMLElement } elementoHtml |
3 | */ |
4 | export function abreElementoHtml(elementoHtml) { |
5 | const list = elementoHtml.classList |
6 | if (!list.contains("open")) { |
7 | elementoHtml.hidden = false |
8 | setTimeout(() => list.add("open"), 100) |
9 | } |
10 | } |
1 | /** |
2 | * @param { HTMLElement } elementoHtml |
3 | */ |
4 | export function cierraElementoHtmo(elementoHtml) { |
5 | const list = elementoHtml.classList |
6 | if (list.contains("open")) { |
7 | list.remove("open") |
8 | setTimeout(() => elementoHtml.hidden = true, 500) |
9 | } |
10 | } |
11 |
1 | /** |
2 | * @param {HTMLElement} elementoHtml |
3 | * @param {string} nombre |
4 | * @returns {string} |
5 | */ |
6 | export function getAttribute(elementoHtml, nombre) { |
7 | const valor = elementoHtml.getAttribute(nombre) |
8 | return valor === null ? "" : valor |
9 | } |
1 | /** |
2 | * Codifica un texto para que cambie los caracteres |
3 | * especiales y no se pueda interpretar como |
4 | * etiiqueta HTML. Esta técnica evita la inyección |
5 | * de código. |
6 | * @param { string } texto |
7 | * @returns { string } un texto que no puede |
8 | * interpretarse como HTML. */ |
9 | export function htmlentities(texto) { |
10 | return texto.replace(/[<>"']/g, textoDetectado => { |
11 | switch (textoDetectado) { |
12 | case "<": return "<" |
13 | case ">": return ">" |
14 | case '"': return """ |
15 | case "'": return "'" |
16 | default: return textoDetectado |
17 | } |
18 | }) |
19 | } |
1 | import { ProblemDetails } from "./ProblemDetails.js" |
2 | |
3 | /** |
4 | * Muestra un error en la consola y en un cuadro de |
5 | * alerta el mensaje de una excepción. |
6 | * @param { ProblemDetails | Error | null } error descripción del error. |
7 | */ |
8 | export function muestraError(error) { |
9 | |
10 | if (error === null) { |
11 | |
12 | console.log("Error") |
13 | alert("Error") |
14 | |
15 | } else if (error instanceof ProblemDetails) { |
16 | |
17 | let mensaje = error.title |
18 | if (error.detail) { |
19 | mensaje += `\n\n${error.detail}` |
20 | } |
21 | mensaje += `\n\nCódigo: ${error.status}` |
22 | if (error.type) { |
23 | mensaje += ` ${error.type}` |
24 | } |
25 | |
26 | console.error(mensaje) |
27 | console.error(error) |
28 | console.error("Headers:") |
29 | error.headers.forEach((valor, llave) => console.error(llave, "=", valor)) |
30 | alert(mensaje) |
31 | |
32 | } else { |
33 | |
34 | console.error(error) |
35 | alert(error.message) |
36 | |
37 | } |
38 | |
39 | } |
40 | |
41 | // Permite que los eventos de html usen la función. |
42 | window["muestraError"] = muestraError |
1 | /** |
2 | * Si un elemento HTML tiene un mensaje de validación, lo |
3 | * muestra en su elemento de ayuda; en caso contrario, muestra |
4 | * un mensaje de ayuda. |
5 | * @param { { |
6 | * validity: { valid: boolean }; |
7 | * validationMessage: string |
8 | * } } elementoHtml elemento que contiene datos de validación. |
9 | * @param { HTMLElement } elementoDeAyuda elemento fonde |
10 | * se muestran los elementos de validación para elementoHtml. |
11 | * @param { string } mensajeDeAyuda mensaje de ayuda cuando el estado de |
12 | * elementoHtml es válido. |
13 | */ |
14 | export function muestraTextoDeAyuda(elementoHtml, elementoDeAyuda, |
15 | mensajeDeAyuda) { |
16 | if (elementoHtml.validity.valid) { |
17 | elementoDeAyuda.textContent = mensajeDeAyuda |
18 | } else { |
19 | elementoDeAyuda.textContent = elementoHtml.validationMessage |
20 | } |
21 | } |
22 | |
23 | // Permite que los eventos de html usen la función. |
24 | window["muestraTextoDeAyuda"] = muestraTextoDeAyuda |
1 | /** Detalle de los errores devueltos por un servicio. */ |
2 | export class ProblemDetails extends Error { |
3 | |
4 | /** |
5 | * @param {number} status |
6 | * @param {Headers} headers |
7 | * @param {string} title |
8 | * @param {string} [type] |
9 | * @param {string} [detail] |
10 | */ |
11 | constructor(status, headers, title, type, detail) { |
12 | super(title) |
13 | /** @readonly */ |
14 | this.status = status |
15 | /** @readonly */ |
16 | this.headers = headers |
17 | /** @readonly */ |
18 | this.type = type |
19 | /** @readonly */ |
20 | this.detail = detail |
21 | /** @readonly */ |
22 | this.title = title |
23 | } |
24 | |
25 | } |
1 | /** |
2 | * @template { HTMLElement } T |
3 | * @param { Document | Element | ShadowRoot } raiz |
4 | * @param { string } query |
5 | * @returns { T } |
6 | */ |
7 | export function querySelector(raiz, query) { |
8 | /** @type { T | null } */ |
9 | const resutado = raiz.querySelector(query) |
10 | if (resutado === null) |
11 | throw new Error(`No se encuentra ${query}.`) |
12 | return resutado |
13 | } |
1 | import { muestraError } from "./muestraError.js" |
2 | |
3 | /** |
4 | * @param { string | URL } urlDeServiceWorker |
5 | */ |
6 | export async function registraServiceWorkerSiEsSoportado(urlDeServiceWorker) { |
7 | try { |
8 | if ("serviceWorker" in navigator) { |
9 | const registro = await navigator.serviceWorker.register(urlDeServiceWorker) |
10 | console.log(urlDeServiceWorker, "registrado.") |
11 | console.log(registro) |
12 | } |
13 | } catch (error) { |
14 | muestraError(error) |
15 | } |
16 | } |
1 | |
2 | /** |
3 | * @param {string[]} paginas |
4 | */ |
5 | export function resaltaSiEstasEn(paginas) { |
6 | const pathname = location.pathname |
7 | return paginas.includes(pathname) ? `class="active"` : "" |
8 | } |
1 | export const ES_APPLE = /.*(iPad|iPhone|iPod|Mac).*/.test(navigator.userAgent) |
1 | export class MdMenuButton extends HTMLButtonElement { |
2 | |
3 | connectedCallback() { |
4 | this.type = "button" |
5 | this.classList.add("md-standard-icon-button") |
6 | this.innerHTML = /* HTML */ |
7 | `<span class="material-symbols-outlined">menu</span>` |
8 | } |
9 | |
10 | } |
11 | |
12 | customElements.define("md-menu-button", MdMenuButton, { extends: "button" }) |
1 | import { abreElementoHtml } from "../abreElementoHtml.js" |
2 | import { cierraElementoHtmo } from "../cierraElementoHtmo.js" |
3 | import { querySelector } from "../querySelector.js" |
4 | |
5 | export class MdOptionsMenu extends HTMLElement { |
6 | |
7 | getContent() { |
8 | return /* HTML */` |
9 | |
10 | <style> |
11 | |
12 | :host { |
13 | position: absolute; |
14 | } |
15 | |
16 | </style> |
17 | |
18 | <slot></slot>` |
19 | } |
20 | |
21 | constructor() { |
22 | super() |
23 | const shadow = this.attachShadow({ mode: "open" }) |
24 | shadow.innerHTML = this.getContent() |
25 | this._configuraOpciones = this._configuraOpciones.bind(this) |
26 | |
27 | /** |
28 | * @private |
29 | * @type { HTMLSlotElement } |
30 | */ |
31 | this._slot = querySelector(shadow, "slot") |
32 | /** |
33 | * @private |
34 | * @type { HTMLElement[] } |
35 | */ |
36 | this._opciones = [] |
37 | this._slot.addEventListener("slotchange", this._configuraOpciones) |
38 | } |
39 | |
40 | connectedCallback() { |
41 | this.classList.add("md-menu") |
42 | this.hidden = true |
43 | this.role = "listbox" |
44 | } |
45 | |
46 | /** |
47 | * @returns {readonly Readonly<HTMLElement>[]} |
48 | */ |
49 | get opciones() { |
50 | return this._opciones |
51 | } |
52 | |
53 | get seleccion() { |
54 | /** @type { HTMLInputElement | null } */ |
55 | const seleccionado = this.querySelector(".selected") |
56 | return seleccionado === null ? "" : seleccionado.value |
57 | } |
58 | |
59 | _configuraOpciones() { |
60 | /** |
61 | * @type {HTMLElement[]} |
62 | */ |
63 | const opciones = [] |
64 | for (const opcion of this._slot.assignedElements()) { |
65 | opcion.role = "option" |
66 | if (opcion instanceof HTMLElement) { |
67 | opciones.push(opcion) |
68 | } |
69 | } |
70 | this._opciones = opciones |
71 | } |
72 | |
73 | abre() { |
74 | abreElementoHtml(this) |
75 | } |
76 | |
77 | |
78 | cierra() { |
79 | cierraElementoHtmo(this) |
80 | } |
81 | |
82 | /** |
83 | * @param {string} value |
84 | */ |
85 | muestraValue(value) { |
86 | let texto = "" |
87 | for (const opcion of this._opciones) { |
88 | if (opcion.dataset.value === value) { |
89 | opcion.classList.add("selected") |
90 | let textContent = opcion.textContent |
91 | if (texto === "" && textContent !== null) { |
92 | textContent = textContent.trim() |
93 | if (textContent !== "") { |
94 | texto = textContent |
95 | } |
96 | } |
97 | } else { |
98 | opcion.classList.remove("selected") |
99 | } |
100 | } |
101 | return texto |
102 | } |
103 | |
104 | } |
105 | |
106 | customElements.define("md-options-menu", MdOptionsMenu) |
1 | import { ES_APPLE } from "../const/ES_APPLE.js" |
2 | |
3 | export class MdOverflowButton extends HTMLButtonElement { |
4 | |
5 | connectedCallback() { |
6 | this.type = "button" |
7 | this.classList.add("md-standard-icon-button") |
8 | this.innerHTML = ES_APPLE |
9 | ? /* HTML */ |
10 | `<span style="color: var(--md-sys-color-on-surface-variant)" |
11 | class="material-symbols-outlined"> |
12 | more_horiz |
13 | </span>` |
14 | : /* HTML */ |
15 | `<span style="color: var(--md-sys-color-on-surface-variant)" |
16 | class="material-symbols-outlined"> |
17 | more_vert |
18 | </span>` |
19 | } |
20 | |
21 | } |
22 | |
23 | customElements |
24 | .define("md-overflow-button", MdOverflowButton, { extends: "button" }) |
1 | import { abreElementoHtml } from "../abreElementoHtml.js" |
2 | import { cierraElementoHtmo } from "../cierraElementoHtmo.js" |
3 | |
4 | export class MdOverflowMenu extends HTMLElement { |
5 | |
6 | getContent() { |
7 | return /* HTML */` |
8 | |
9 | <style> |
10 | |
11 | :host { |
12 | position: fixed; |
13 | min-width: 7rem; |
14 | max-width: 280px; |
15 | } |
16 | |
17 | ::slotted(*) { |
18 | text-align: start; |
19 | width: 100%; |
20 | border: none; |
21 | background-color: transparent; |
22 | } |
23 | |
24 | </style> |
25 | |
26 | <slot></slot>` |
27 | } |
28 | |
29 | constructor() { |
30 | super() |
31 | const shadow = this.attachShadow({ mode: "open" }) |
32 | shadow.innerHTML = this.getContent() |
33 | this.clicCierra = this.clicCierra.bind(this) |
34 | /** |
35 | * @private |
36 | * @type {HTMLButtonElement| null} |
37 | */ |
38 | this._toggleButton = null |
39 | } |
40 | |
41 | connectedCallback() { |
42 | this.classList.add("md-menu") |
43 | this.hidden = true |
44 | this.role = "menu" |
45 | } |
46 | |
47 | /** |
48 | * @param {HTMLButtonElement} toggleButton |
49 | */ |
50 | alterna(toggleButton) { |
51 | this._toggleButton = toggleButton |
52 | const top = toggleButton.offsetTop + toggleButton.offsetHeight - 4 |
53 | const right = |
54 | innerWidth - (toggleButton.offsetLeft + toggleButton.offsetWidth) - 3 |
55 | this.style.top = `${top}px` |
56 | this.style.right = `${right}px` |
57 | const list = this.classList |
58 | if (list.contains("open")) { |
59 | this.cierra() |
60 | } else { |
61 | this.abre() |
62 | } |
63 | } |
64 | |
65 | abre() { |
66 | document.addEventListener("click", this.clicCierra) |
67 | abreElementoHtml(this) |
68 | } |
69 | |
70 | cierra() { |
71 | document.removeEventListener("click", this.clicCierra) |
72 | cierraElementoHtmo(this) |
73 | } |
74 | |
75 | /** |
76 | * @param {Event} evt |
77 | */ |
78 | clicCierra(evt) { |
79 | const target = evt.target |
80 | if (this.classList.contains("open") |
81 | && this._toggleButton !== null |
82 | && target instanceof HTMLElement |
83 | && !this._toggleButton.contains(target)) { |
84 | this.cierra() |
85 | } |
86 | } |
87 | } |
88 | |
89 | customElements.define("md-overflow-menu", MdOverflowMenu) |
1 | import { getAttribute } from "../getAttribute.js" |
2 | import { querySelector } from "../querySelector.js" |
3 | import { MdOptionsMenu } from "./md-options-menu.js" |
4 | |
5 | export class MdSelectMenu extends HTMLElement { |
6 | |
7 | static get observedAttributes() { |
8 | return ["options", "value", "required"] |
9 | } |
10 | |
11 | getContent() { |
12 | return /* HTML */ ` |
13 | <link rel="stylesheet" href="/lib/css/material-symbols-outlined.css"> |
14 | |
15 | <style> |
16 | :host { |
17 | display: block; |
18 | cursor: default; |
19 | } |
20 | |
21 | output { |
22 | display: block; |
23 | padding-right: 2rem; |
24 | white-space: nowrap; |
25 | text-overflow: ellipsis; |
26 | overflow: hidden; |
27 | } |
28 | |
29 | #up { |
30 | position: absolute; |
31 | bottom: 0.5rem; |
32 | right: 0.75rem; |
33 | display: none; |
34 | color: var(--md-sys-color-on-surface-variant); |
35 | } |
36 | |
37 | #down { |
38 | position: absolute; |
39 | bottom: 0.5rem; |
40 | right: 0.75rem; |
41 | color: var(--md-sys-color-on-surface-variant); |
42 | } |
43 | |
44 | :host(.open) #up { |
45 | display: inline-block; |
46 | } |
47 | |
48 | :host(.open) #down { |
49 | display: none; |
50 | } |
51 | |
52 | :host(:invalid) #up, |
53 | :host(:invalid) #down { |
54 | color: var(--md-sys-color-error); |
55 | } |
56 | |
57 | </style> |
58 | <output></output> |
59 | <span id="down" class="material-symbols-outlined"> |
60 | arrow_drop_down |
61 | </span> |
62 | <span id="up" class="material-symbols-outlined"> |
63 | arrow_drop_up |
64 | </span>` |
65 | } |
66 | |
67 | constructor() { |
68 | super() |
69 | |
70 | const shadow = this.attachShadow({ mode: "open" }) |
71 | shadow.innerHTML = this.getContent() |
72 | |
73 | this._alterna = this._alterna.bind(this) |
74 | this._onKeyDown = this._onKeyDown.bind(this) |
75 | this._cierra = this._cierra.bind(this) |
76 | this._clicEnDialogo = this._clicEnDialogo.bind(this) |
77 | this.clicExterno = this.clicExterno.bind(this) |
78 | this.muestraValue = this.muestraValue.bind(this) |
79 | |
80 | /** |
81 | * @private |
82 | * @type {string} |
83 | */ |
84 | this._customValidity = "" |
85 | |
86 | /** |
87 | * @private |
88 | * @type { HTMLOutputElement } |
89 | */ |
90 | this.output = querySelector(shadow, "output") |
91 | /** |
92 | * @private |
93 | * @type { MdOptionsMenu | null } |
94 | */ |
95 | this._optionsMenu = null |
96 | /** |
97 | * @protected |
98 | * @readonly |
99 | */ |
100 | this._internals = this.attachInternals() |
101 | this._internals.role = "select" |
102 | addEventListener("load", this.muestraValue) |
103 | } |
104 | |
105 | connectedCallback() { |
106 | this.tabIndex = 0 |
107 | this.role = "combobox" |
108 | this.ariaHasPopup = "listbox" |
109 | this.ariaExpanded = "false" |
110 | this["aria-controls"] = this.options |
111 | this.addEventListener("keydown", this._onKeyDown) |
112 | const parentElement = this.parentElement |
113 | if (parentElement !== null) { |
114 | parentElement.addEventListener("click", this._alterna) |
115 | } |
116 | } |
117 | |
118 | /** |
119 | * @param {string} nombreDeAtributo |
120 | * @param {string} _valorAnterior |
121 | * @param {string} _nuevoValor |
122 | */ |
123 | attributeChangedCallback(nombreDeAtributo, _valorAnterior, _nuevoValor) { |
124 | switch (nombreDeAtributo) { |
125 | case "options": |
126 | this._cambiaOptions() |
127 | break |
128 | case "value": |
129 | this.muestraValue() |
130 | break |
131 | case "required": |
132 | this.checkValidity() |
133 | break |
134 | } |
135 | } |
136 | |
137 | get options() { |
138 | return getAttribute(this, "options") |
139 | } |
140 | |
141 | set options(options) { |
142 | this.setAttribute("options", options) |
143 | } |
144 | |
145 | _cambiaOptions() { |
146 | if (this._optionsMenu !== null) { |
147 | this._optionsMenu = null |
148 | } |
149 | this["aria-controls"] = this.options |
150 | } |
151 | |
152 | get required() { |
153 | return this.hasAttribute("required") |
154 | } |
155 | |
156 | set required(required) { |
157 | this.toggleAttribute("required", Boolean(required)) |
158 | } |
159 | |
160 | get value() { |
161 | return getAttribute(this, "value") |
162 | } |
163 | |
164 | set value(value) { |
165 | this.setAttribute("value", value) |
166 | } |
167 | |
168 | get name() { |
169 | return getAttribute(this, "name") |
170 | } |
171 | |
172 | set name(name) { |
173 | this.setAttribute("name", name) |
174 | } |
175 | |
176 | muestraValue() { |
177 | const value = this.value |
178 | this._internals.setFormValue(value) |
179 | |
180 | // En un futuro se usará esto en vez de la clase populated. |
181 | // if (value === "") { |
182 | // this._internals.states.delete("populated") |
183 | // } else { |
184 | // this._internals.states.add("populated") |
185 | // } |
186 | |
187 | if (this.isConnected) { |
188 | if (value === "") { |
189 | this.classList.remove("populated") |
190 | } else { |
191 | this.classList.add("populated") |
192 | } |
193 | this._checkValidity() |
194 | const optionsMenu = this.optionsMenu |
195 | if (optionsMenu !== null) { |
196 | this.output.value = optionsMenu.muestraValue(value) |
197 | } |
198 | } |
199 | } |
200 | |
201 | get form() { |
202 | return this._internals && this._internals.form |
203 | } |
204 | |
205 | get willValidate() { |
206 | return this._internals ? this._internals.willValidate : true |
207 | } |
208 | |
209 | /** |
210 | * @param {string} message |
211 | */ |
212 | setCustomValidity(message) { |
213 | this._customValidity = message |
214 | this._checkValidity() |
215 | } |
216 | |
217 | /** |
218 | * @returns {ValidityState} |
219 | */ |
220 | get validity() { |
221 | return this._internals.validity |
222 | } |
223 | |
224 | checkValidity() { |
225 | return this._internals.checkValidity() |
226 | } |
227 | |
228 | reportValidity() { |
229 | return this._internals.reportValidity() |
230 | } |
231 | |
232 | get validationMessage() { |
233 | return this._internals.validationMessage |
234 | } |
235 | /** @returns {boolean} */ |
236 | _checkValidity() { |
237 | if (this._customValidity !== "") { |
238 | this._internals.setValidity({ customError: true }, this._customValidity) |
239 | return false |
240 | } else if (this.required && this.value === "") { |
241 | this._internals.setValidity({ valueMissing: true }, "Seleccione una opción.") |
242 | return false |
243 | } else { |
244 | this._internals.setValidity({}) |
245 | return true |
246 | } |
247 | } |
248 | |
249 | /** @private */ |
250 | _alterna() { |
251 | if (this.classList.contains("open")) { |
252 | this._cierra() |
253 | } else { |
254 | this._abre() |
255 | } |
256 | } |
257 | |
258 | /** @private */ |
259 | _abre() { |
260 | this.classList.add("open") |
261 | const parentElement = this.parentElement |
262 | if (parentElement !== null) { |
263 | const optionsMenu = this.optionsMenu |
264 | if (optionsMenu !== null) { |
265 | optionsMenu.style.top = `${parentElement.offsetTop + 58}px` |
266 | optionsMenu.style.left = `${parentElement.offsetLeft}px` |
267 | optionsMenu.style.width = `${parentElement.offsetWidth}px` |
268 | optionsMenu.abre() |
269 | this.focus() |
270 | optionsMenu.addEventListener("click", this._clicEnDialogo) |
271 | } |
272 | this.ariaExpanded = "true" |
273 | document.addEventListener("click", this.clicExterno) |
274 | } |
275 | } |
276 | |
277 | /** @private */ |
278 | _cierra() { |
279 | this.classList.remove("open") |
280 | const optionsMenu = this.optionsMenu |
281 | if (optionsMenu !== null) { |
282 | optionsMenu.cierra() |
283 | optionsMenu.removeEventListener("click", this._clicEnDialogo) |
284 | } |
285 | this.ariaExpanded = "false" |
286 | document.removeEventListener("click", this.clicExterno) |
287 | this.dispatchEvent(new Event("input", { bubbles: true })) |
288 | } |
289 | |
290 | get optionsMenu() { |
291 | if (this._optionsMenu === null) { |
292 | if (this.options !== "") { |
293 | const optionsMenu = document.getElementById(this.options) |
294 | if (optionsMenu instanceof MdOptionsMenu) { |
295 | this._optionsMenu = optionsMenu |
296 | } else { |
297 | throw new Error(`Valor incorrecto para options: "${this.options}".`) |
298 | } |
299 | } |
300 | } |
301 | return this._optionsMenu |
302 | } |
303 | |
304 | /** @private */ |
305 | _avanzaOpcion() { |
306 | const i = this._valueIndex |
307 | if (i > -1) { |
308 | const optionsMenu = this.optionsMenu |
309 | if (optionsMenu !== null) { |
310 | const opciones = optionsMenu.opciones |
311 | if (i < opciones.length - 1) { |
312 | this.value = getAttribute(opciones[i + 1], "data-value") |
313 | } |
314 | } |
315 | } |
316 | } |
317 | |
318 | /** @private */ |
319 | _retrocedeOpcion() { |
320 | const i = this._valueIndex |
321 | if (i > -1) { |
322 | const optionsMenu = this.optionsMenu |
323 | if (optionsMenu !== null) { |
324 | const opciones = optionsMenu.opciones |
325 | if (i > 0) { |
326 | this.value = getAttribute(opciones[i - 1], "data-value") |
327 | } |
328 | } |
329 | } |
330 | } |
331 | |
332 | /** |
333 | * @private |
334 | * @returns {number} |
335 | */ |
336 | get _valueIndex() { |
337 | const value = this.value |
338 | const optionsMenu = this.optionsMenu |
339 | return (optionsMenu === null |
340 | ? -1 |
341 | : optionsMenu.opciones.findIndex(opcion => opcion.dataset.value === value)) |
342 | } |
343 | |
344 | /** |
345 | * @private |
346 | * @param {Event} event |
347 | */ |
348 | _clicEnDialogo(event) { |
349 | const target = event.target |
350 | const optionsMenu = this.optionsMenu |
351 | let value = "" |
352 | if (optionsMenu !== null) { |
353 | for (const opcion of optionsMenu.opciones) { |
354 | if (opcion === target) { |
355 | opcion.classList.add("selected") |
356 | value = getAttribute(opcion, "data-value") |
357 | } else { |
358 | opcion.classList.remove("selected") |
359 | } |
360 | } |
361 | } |
362 | this.value = value |
363 | this._cierra() |
364 | this.focus() |
365 | } |
366 | |
367 | /** |
368 | * @param {Event} evt |
369 | */ |
370 | clicExterno(evt) { |
371 | const target = evt.target |
372 | const parentElement = this.parentElement |
373 | const optionsMenu = this._optionsMenu |
374 | if (this.classList.contains("open") |
375 | && target instanceof HTMLElement |
376 | && parentElement !== null |
377 | && !parentElement.contains(target) |
378 | && optionsMenu !== null |
379 | && !optionsMenu.contains(target)) { |
380 | this._cierra() |
381 | } |
382 | } |
383 | |
384 | /** |
385 | * @param { KeyboardEvent } event |
386 | */ |
387 | _onKeyDown(event) { |
388 | const key = event.key |
389 | const optionsMenu = this._optionsMenu |
390 | if (optionsMenu !== null) { |
391 | if (optionsMenu.classList.contains("open")) { |
392 | if (key === "ArrowDown") { |
393 | event.preventDefault() |
394 | this._avanzaOpcion() |
395 | } else if (key === "ArrowUp") { |
396 | event.preventDefault() |
397 | this._retrocedeOpcion() |
398 | } else if (key === "Escape") { |
399 | event.preventDefault() |
400 | this._cierra() |
401 | } else if (key === " ") { |
402 | event.preventDefault() |
403 | this._cierra() |
404 | } else if (key === "Tab") { |
405 | this._cierra() |
406 | } else { |
407 | event.preventDefault() |
408 | } |
409 | } else if (key === " ") { |
410 | event.preventDefault() |
411 | this._abre() |
412 | } else if (key === "Tab") { |
413 | this._cierra() |
414 | } else { |
415 | event.preventDefault() |
416 | } |
417 | } |
418 | } |
419 | |
420 | } |
421 | |
422 | MdSelectMenu.formAssociated = true |
423 | |
424 | customElements.define("md-select-menu", MdSelectMenu) |
1 | import { querySelector } from "../querySelector.js" |
2 | |
3 | export class MdSliderField extends HTMLElement { |
4 | |
5 | getContent() { |
6 | return /* HTML */` |
7 | <style> |
8 | :host { |
9 | display: block; |
10 | margin: 1rem; |
11 | } |
12 | |
13 | :host([hidden]) { |
14 | display: none; |
15 | } |
16 | |
17 | #label::slotted(*) { |
18 | display: block; |
19 | white-space: nowrap; |
20 | text-overflow: ellipsis; |
21 | overflow: hidden; |
22 | color: var(--md-sys-color-on-surface-variant); |
23 | font-family: var(--md-sys-typescale-body-small-font); |
24 | font-weight: var(--md-sys-typescale-body-small-weight); |
25 | font-size: var(--md-sys-typescale-body-small-size); |
26 | font-style: var(--md-sys-typescale-body-small-font-style); |
27 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
28 | line-height: var(--md-sys-typescale-body-small-line-height); |
29 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
30 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
31 | } |
32 | |
33 | [name="slider"]::slotted(input) { |
34 | -webkit-appearance: none; |
35 | appearance: none; |
36 | height: 0.25rem; |
37 | border-radius: 0.125rem; |
38 | background-image: |
39 | linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) 50%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-highest) 100%); |
40 | } |
41 | |
42 | [name="slider"]::slotted(input:focus) { |
43 | outline: none; |
44 | } |
45 | |
46 | [name="supporting"]::slotted(*) { |
47 | display: block; |
48 | color: var(--md-sys-color-on-surface-variant); |
49 | font-family: var(--md-sys-typescale-body-small-font); |
50 | font-weight: var(--md-sys-typescale-body-small-weight); |
51 | font-size: var(--md-sys-typescale-body-small-size); |
52 | font-style: var(--md-sys-typescale-body-small-font-style); |
53 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
54 | line-height: var(--md-sys-typescale-body-small-line-height); |
55 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
56 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
57 | padding-top: 0.5rem; |
58 | white-space: nowrap; |
59 | text-overflow: ellipsis; |
60 | overflow: hidden; |
61 | } |
62 | </style> |
63 | <slot id="label"></slot> |
64 | <slot name="slider"></slot> |
65 | <slot name="supporting"></slot>` |
66 | } |
67 | |
68 | constructor() { |
69 | super() |
70 | const shadow = this.attachShadow({ mode: "open", delegatesFocus: true }) |
71 | shadow.innerHTML = this.getContent() |
72 | this._configuraSlider = this._configuraSlider.bind(this) |
73 | this.analiza = this.analiza.bind(this) |
74 | |
75 | /** |
76 | * @private |
77 | * @type {HTMLSlotElement} |
78 | */ |
79 | this._slotSlider = querySelector(shadow, '[name="slider"]') |
80 | /** |
81 | * @private |
82 | * @type {HTMLInputElement|null} |
83 | */ |
84 | this._input = null |
85 | this._slotSlider.addEventListener("slotchange", this._configuraSlider) |
86 | } |
87 | |
88 | /** @private */ |
89 | _configuraSlider() { |
90 | if (this._input !== null) { |
91 | this._input.removeEventListener("input", this.analiza) |
92 | this._input = null |
93 | } |
94 | for (const input of this._slotSlider.assignedElements()) { |
95 | if (input instanceof HTMLInputElement) { |
96 | this._input = input |
97 | input.addEventListener("input", this.analiza) |
98 | this.analiza() |
99 | } |
100 | } |
101 | } |
102 | |
103 | analiza() { |
104 | const i = this._input |
105 | if (i !== null) { |
106 | const v = i.valueAsNumber |
107 | const min = parseFloat(i.min) |
108 | const max = parseFloat(i.max) |
109 | const value = (v - min) / (max - min) * 100 |
110 | i.title = v.toString() |
111 | i.style.background = |
112 | `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${value |
113 | }%, var(--md-sys-color-surface-container-highest) ${value |
114 | }%, var(--md-sys-color-surface-container-highest) 100%)` |
115 | } |
116 | } |
117 | |
118 | } |
119 | |
120 | customElements.define("md-slider-field", MdSliderField) |
1 | import { ES_APPLE } from "../const/ES_APPLE.js" |
2 | import { getAttribute } from "../getAttribute.js" |
3 | import { querySelector } from "../querySelector.js" |
4 | |
5 | class MdTopAppBar extends HTMLElement { |
6 | |
7 | getContent() { |
8 | return /* HTML */` |
9 | <style> |
10 | |
11 | :host { |
12 | display: flex; |
13 | box-sizing: border-box; |
14 | align-items: center; |
15 | padding: 0 0.25rem; |
16 | background-color: var(--md-sys-color-surface); |
17 | position: sticky; |
18 | z-index: 1; |
19 | left: env(titlebar-area-x, 0); |
20 | top: env(titlebar-area-y, 0); |
21 | height: env(titlebar-area-height, 4rem); |
22 | width: env(titlebar-area-width, 100%); |
23 | } |
24 | |
25 | :host(.apple) { |
26 | height: env(titlebar-area-height, 3rem); |
27 | } |
28 | |
29 | :host(.scroll) { |
30 | background-color: var(--md-sys-color-surface-container-low); |
31 | } |
32 | |
33 | #navigation { |
34 | flex: 0 0 auto; |
35 | overflow: hidden |
36 | } |
37 | |
38 | #navigation ::slotted(*) { |
39 | color: var(--md-sys-color-on-surface); |
40 | } |
41 | |
42 | #acciones { |
43 | margin-left: auto; |
44 | flex: 0 0 auto; |
45 | overflow: hidden |
46 | } |
47 | |
48 | :host(.centrado) #acciones, |
49 | :host(.center-aligned) #acciones { |
50 | flex: 0 0 3rem; |
51 | overflow: hidden |
52 | } |
53 | |
54 | #headline::slotted(*) { |
55 | -webkit-app-region: drag; |
56 | flex: 1 1 auto; |
57 | white-space: nowrap; |
58 | text-overflow: ellipsis; |
59 | overflow: hidden; |
60 | font-family: var(--md-sys-typescale-title-large-font); |
61 | font-weight: var(--md-sys-typescale-title-large-weight); |
62 | font-size: var(--md-sys-typescale-title-large-size); |
63 | font-style: var(--md-sys-typescale-title-large-font-style); |
64 | letter-spacing: var(--md-sys-typescale-title-large-tracking); |
65 | line-height: var(--md-sys-typescale-title-large-line-height); |
66 | text-transform: var(--md-sys-typescale-title-large-text-transform); |
67 | text-decoration: var(--md-sys-typescale-title-large-text-decoration); |
68 | color: var(--md-sys-color-on-surface); |
69 | transition-property: opacity; |
70 | transition-duration: var(--md-sys-motion-duration-700); |
71 | } |
72 | |
73 | :host(.headline) #headline::slotted(*) { |
74 | opacity: 0; |
75 | } |
76 | |
77 | :host(.scroll.headline) #headline::slotted(*) { |
78 | opacity: 1; |
79 | } |
80 | |
81 | :host(.center-aligned) #headline::slotted(*) { |
82 | flex: 1 1 auto; |
83 | text-align: center |
84 | } |
85 | |
86 | </style> |
87 | |
88 | <span id="navigation"> |
89 | <slot name="navigation"></slot> |
90 | </span> |
91 | <slot id="headline"></slot> |
92 | <span id="acciones"> |
93 | <slot name="action"></slot> |
94 | </span>` |
95 | } |
96 | |
97 | constructor() { |
98 | super() |
99 | if (ES_APPLE) { |
100 | document.body.classList.add("apple") |
101 | document.body.classList.remove("material") |
102 | } else { |
103 | document.body.classList.add("material") |
104 | document.body.classList.remove("apple") |
105 | } |
106 | |
107 | /** |
108 | * @private |
109 | * @readonly |
110 | */ |
111 | const shadow = this.attachShadow({ mode: "open" }) |
112 | shadow.innerHTML = this.getContent() |
113 | this._configuraAction = this._configuraAction.bind(this) |
114 | /** |
115 | * @private |
116 | * @type {number} |
117 | */ |
118 | this._posY = 0 |
119 | /** |
120 | * @private |
121 | * @type {boolean} |
122 | */ |
123 | this._scrolling = false |
124 | /** |
125 | * @private |
126 | * @type { HTMLSlotElement } |
127 | */ |
128 | this._navigation = querySelector(shadow, '[name="navigation"]') |
129 | /** |
130 | * @private |
131 | * @type { HTMLSlotElement } |
132 | */ |
133 | this._action = querySelector(shadow, '[name="action"]') |
134 | /** |
135 | * @private |
136 | * @type { HTMLHeadingElement | null } |
137 | */ |
138 | this._headline = null |
139 | /** |
140 | * @private |
141 | * @type { HTMLElement | null } |
142 | */ |
143 | this._adicional = null |
144 | this._action.addEventListener("slotchange", this._configuraAction) |
145 | addEventListener("scroll", () => this._onScroll()) |
146 | addEventListener("load", () => this.configurOtros()) |
147 | } |
148 | |
149 | connectedCallback() { |
150 | this.role = "toolbar" |
151 | this._configuraAction() |
152 | } |
153 | |
154 | configurOtros() { |
155 | const idHeadline = getAttribute(this, "headline") |
156 | if (idHeadline !== "") { |
157 | const headline = document.getElementById(idHeadline) |
158 | if (headline instanceof HTMLHeadingElement) { |
159 | this._headline = headline |
160 | this.classList.add("headline") |
161 | if (this.classList.contains("apple") || this.classList.contains("medium")) { |
162 | headline.classList.add("md-headline", "headline-small") |
163 | } else { |
164 | headline.classList.add("md-headline", "headline-medium") |
165 | } |
166 | } |
167 | } |
168 | const idAdicional = getAttribute(this, "adicional") |
169 | if (idAdicional !== "") { |
170 | this._adicional = document.getElementById(idAdicional) |
171 | if (this._adicional !== null) { |
172 | if (this.classList.contains("apple")) { |
173 | this._adicional.style.top = "env(titlebar-area-height, 3rem)" |
174 | } else { |
175 | this._adicional.style.top = "env(titlebar-area-height, 4rem)" |
176 | } |
177 | } |
178 | } |
179 | } |
180 | |
181 | _configuraAction() { |
182 | const assignedElements = this._action.assignedElements() |
183 | if (this.isConnected) { |
184 | if (ES_APPLE) { |
185 | this.classList.add("apple") |
186 | this.classList.remove("material") |
187 | } else { |
188 | this.classList.add("material") |
189 | this.classList.remove("apple") |
190 | } |
191 | if (this.classList.contains("center-aligned")) { |
192 | this.classList.remove("centrado") |
193 | this.classList.remove("justificado") |
194 | } else { |
195 | if (ES_APPLE && assignedElements.length <= 1) { |
196 | this.classList.add("centrado") |
197 | this.classList.remove("justificado") |
198 | } else { |
199 | this.classList.add("justificado") |
200 | this.classList.remove("centrado") |
201 | } |
202 | } |
203 | } |
204 | } |
205 | |
206 | /** @private */ |
207 | _onScroll() { |
208 | this._posY = scrollY |
209 | if (!this._scrolling) { |
210 | requestAnimationFrame(() => this._avanza()) |
211 | } |
212 | this._scrolling = true |
213 | } |
214 | |
215 | /** @private */ |
216 | _avanza() { |
217 | if (this._posY === 0) { |
218 | this.classList.remove("scroll") |
219 | if (this._headline !== null) { |
220 | if (this._adicional === null) { |
221 | this._headline.classList.remove("scroll") |
222 | } else { |
223 | this._headline.classList.remove("scroll-adicional") |
224 | } |
225 | } |
226 | if (this._adicional !== null) { |
227 | this._adicional.classList.remove("scroll") |
228 | } |
229 | } else { |
230 | this.classList.add("scroll") |
231 | if (this._headline !== null) { |
232 | if (this._adicional === null) { |
233 | this._headline.classList.add("scroll") |
234 | } else { |
235 | this._headline.classList.add("scroll-adicional") |
236 | } |
237 | } |
238 | if (this._adicional !== null) { |
239 | this._adicional.classList.add("scroll") |
240 | } |
241 | } |
242 | this._scrolling = false |
243 | } |
244 | |
245 | } |
246 | |
247 | customElements.define("md-top-app-bar", MdTopAppBar) |
1 | import { abreElementoHtml } from "../abreElementoHtml.js" |
2 | import { cierraElementoHtmo } from "../cierraElementoHtmo.js" |
3 | import { querySelector } from "../querySelector.js" |
4 | |
5 | export class MdNavigationDrawer extends HTMLElement { |
6 | |
7 | /** |
8 | * @returns {string} |
9 | */ |
10 | getHipervinculos() { throw new Error("abstract") } |
11 | |
12 | getContent() { |
13 | return /* HTML */` |
14 | |
15 | <link rel="stylesheet" href="/lib/css/material-symbols-outlined.css"> |
16 | <link rel="stylesheet" href="/lib/css/shape.css"> |
17 | <link rel="stylesheet" href="/lib/css/md-ripple.css"> |
18 | |
19 | <style> |
20 | |
21 | nav { |
22 | display: flex; |
23 | flex-direction: column; |
24 | position: fixed; |
25 | z-index: 4; |
26 | box-sizing: border-box; |
27 | top: 0; |
28 | left: 0; |
29 | bottom: 0; |
30 | width: var(--anchoNav); |
31 | max-width: 80vw; |
32 | overflow: hidden; |
33 | transform: translateX(-100%); |
34 | background-color: var(--md-sys-color-surface-container-low); |
35 | transition-property: transform; |
36 | transition-duration: var(--md-sys-motion-duration-700); |
37 | } |
38 | |
39 | :host(.open) nav { |
40 | transform: translateX(0); |
41 | } |
42 | |
43 | nav>div { |
44 | flex-grow: 1; |
45 | overflow: auto; |
46 | padding: 0.75rem 1rem; |
47 | } |
48 | |
49 | h1 { |
50 | margin: 0; |
51 | height: 3.5rem; |
52 | line-height: 3.5rem; |
53 | padding: 0 0 0 0.75rem; |
54 | white-space: nowrap; |
55 | text-overflow: ellipsis; |
56 | overflow: hidden; |
57 | color: var(--md-sys-color-on-surface-variant); |
58 | font-family: var(--md-sys-typescale-title-small-font); |
59 | font-weight: var(--md-sys-typescale-title-small-weight); |
60 | font-size: var(--md-sys-typescale-title-small-size); |
61 | font-style: var(--md-sys-typescale-title-small-font-style); |
62 | letter-spacing: var(--md-sys-typescale-title-small-tracking); |
63 | text-transform: var(--md-sys-typescale-title-small-text-transform); |
64 | text-decoration: var(--md-sys-typescale-title-small-text-decoration); |
65 | } |
66 | |
67 | a::after { /* container inactive */ |
68 | content: ""; |
69 | position: absolute; |
70 | z-index: -2; |
71 | top: 0; |
72 | right: 0; |
73 | left: 0; |
74 | bottom: 0; |
75 | } |
76 | |
77 | a.active::after { /* container */ |
78 | background-color: var(--md-sys-color-secondary-container); |
79 | } |
80 | |
81 | a { /* label, shape inactive */ |
82 | position: relative; |
83 | display: block; |
84 | box-sizing: border-box; |
85 | height: 3.5rem; |
86 | line-height: 3.5rem; |
87 | padding: 0 0.75rem; |
88 | border-radius: 1.75rem; |
89 | color: var(--md-sys-color-on-surface-variant); |
90 | font-family: var(--md-sys-typescale-label-large-font); |
91 | font-weight: var(--md-sys-typescale-label-large-weight); |
92 | font-size: var(--md-sys-typescale-label-large-size); |
93 | font-style: var(--md-sys-typescale-label-large-font-style); |
94 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
95 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
96 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
97 | overflow: hidden; |
98 | white-space: nowrap; |
99 | text-overflow: ellipsis; |
100 | } |
101 | |
102 | a.active { /* label, shape */ |
103 | font-weight: var(--md-sys-typescale-label-large-weight-prominent); |
104 | color: var(--md-sys-color-on-secondary-container); |
105 | } |
106 | |
107 | a::before { /* state layer */ |
108 | content: ""; |
109 | position: absolute; |
110 | z-index: -1; |
111 | top: 0; |
112 | right: 0; |
113 | left: 0; |
114 | bottom: 0; |
115 | } |
116 | |
117 | a span { /* inactive icon */ |
118 | position: relative; |
119 | margin-right: 0.75rem; |
120 | vertical-align: middle; |
121 | color: var(--md-sys-color-on-surface-variant); |
122 | font-size: 1.5rem; |
123 | width: 1.5rem; |
124 | height: 1.5rem; |
125 | } |
126 | |
127 | a.active span { /* icon */ |
128 | color: var(--md-sys-color-on-secondary-container); |
129 | } |
130 | |
131 | #scrim { |
132 | position: fixed; |
133 | z-index: 3; |
134 | top: 0; |
135 | left: 0; |
136 | bottom: 0; |
137 | right: 0; |
138 | background-color: var(--md-ref-palette-neutral-variant20); |
139 | opacity: 0.4; |
140 | transform: translateX(-100%); |
141 | transition-property: transform; |
142 | animation-duration: var(--md-sys-motion-duration-700); |
143 | } |
144 | |
145 | :host(.open) #scrim { |
146 | transform: translateX(0); |
147 | } |
148 | |
149 | a:hover { /* inactive label, shape */ |
150 | color: var(--md-sys-color-on-surface); |
151 | } |
152 | |
153 | a.active:hover { /* active label, shape */ |
154 | color: var(--md-sys-color-on-secondary-container); |
155 | } |
156 | |
157 | a:hover::before { /* inactive state layer */ |
158 | background-color: var(--md-sys-color-on-surface); |
159 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
160 | } |
161 | |
162 | a.active:hover::before { /* state layer */ |
163 | background-color: var(--md-sys-color-on-secondary-container); |
164 | } |
165 | |
166 | a:hover span { /* inactive icon */ |
167 | color: var(--md-sys-color-on-surface); |
168 | } |
169 | |
170 | a.active:hover span { /* icon */ |
171 | color: var(--md-sys-color-on-secondary-container); |
172 | } |
173 | |
174 | a:focus { /* inactive label, shape */ |
175 | outline: none; |
176 | color: var(--md-sys-color-on-surface); |
177 | } |
178 | |
179 | a.active:focus { /* label, shape */ |
180 | color: var(--md-sys-color-on-secondary-container); |
181 | } |
182 | |
183 | a:focus::before { /* inactive state layer */ |
184 | background-color: var(--md-sys-color-on-surface); |
185 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
186 | } |
187 | |
188 | a.active:focus::before { /* state layer */ |
189 | background-color: var(--md-sys-color-on-secondary-container); |
190 | } |
191 | |
192 | a:focus span { /* inactive icon */ |
193 | color: var(--md-sys-color-on-surface); |
194 | } |
195 | |
196 | a.active:focus span { /* icon */ |
197 | color: var(--md-sys-color-on-secondary-container); |
198 | } |
199 | |
200 | |
201 | a:active { /* inactive pressed label, shape */ |
202 | background-position: center; |
203 | background-image: |
204 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
205 | background-size: 100%; |
206 | animation-name: md-ripple; |
207 | animation-duration: var(--md-sys-motion-duration-500); |
208 | color: var(--md-sys-color-on-surface); |
209 | } |
210 | |
211 | a.active:active { /* active pressed label, shape */ |
212 | color: var(--md-sys-color-on-secondary-container); |
213 | } |
214 | |
215 | a:active::before { /* inactive pressed state layer */ |
216 | background-color: var(--md-sys-color-on-surface); |
217 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
218 | } |
219 | |
220 | a.active:active::before { /* active pressed state layer */ |
221 | background-color: var(--md-sys-color-on-secondary-container); |
222 | } |
223 | |
224 | a:active span { /* inactive pressed icon */ |
225 | color: var(--md-sys-color-on-surface); |
226 | } |
227 | |
228 | a.active:focus span { /* active pressed icon */ |
229 | color: var(--md-sys-color-on-secondary-container); |
230 | } |
231 | |
232 | </style> |
233 | |
234 | <div id="scrim"></div> |
235 | <nav class="large-end"><div></div></nav>` |
236 | } |
237 | |
238 | constructor() { |
239 | super() |
240 | const shadow = this.attachShadow({ mode: "open", delegatesFocus: true }) |
241 | shadow.innerHTML = this.getContent() |
242 | this.cierra = this.cierra.bind(this) |
243 | |
244 | /** @type {HTMLUListElement} */ |
245 | this._div = querySelector(shadow, "nav>div") |
246 | |
247 | /** @type {HTMLUListElement} */ |
248 | this._scrim = querySelector(shadow, "#scrim") |
249 | this._scrim.addEventListener("click", this.cierra) |
250 | } |
251 | |
252 | connectedCallback() { |
253 | this.hidden = true |
254 | this._div.innerHTML = this.getHipervinculos() |
255 | } |
256 | |
257 | abre() { |
258 | abreElementoHtml(this) |
259 | } |
260 | |
261 | cierra() { |
262 | cierraElementoHtmo(this) |
263 | } |
264 | |
265 | } |