@brightspace-ui/core 3.219.6 → 3.219.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/components/dropdown/README.md +0 -1
  2. package/components/dropdown/dropdown-content.js +10 -38
  3. package/components/dropdown/dropdown-menu.js +126 -316
  4. package/components/dropdown/dropdown-opener-mixin.js +3 -28
  5. package/components/dropdown/dropdown-popover-mixin.js +2 -7
  6. package/components/dropdown/dropdown-tabs.js +45 -113
  7. package/components/expand-collapse/expand-collapse-content.js +4 -3
  8. package/components/filter/filter.js +1 -20
  9. package/components/table/table-col-sort-button.js +1 -2
  10. package/components/table/table-wrapper.js +1 -2
  11. package/custom-elements.json +99 -144
  12. package/helpers/README.md +0 -14
  13. package/helpers/demo/prism.html +0 -1784
  14. package/helpers/visualReady.js +0 -2
  15. package/package.json +1 -1
  16. package/components/dropdown/dropdown-content-mixin.js +0 -1299
  17. package/components/dropdown/dropdown-content-styles.js +0 -327
package/components/dropdown/dropdown-content-styles.js DELETED
@@ -1,327 +0,0 @@
1
- import '../colors/colors.js';
2
- import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
3
- import { css } from 'lit';
4
-
5
- const pointerLength = 16;
6
-
7
- export const dropdownContentStyles = css`
8
-
9
- :host {
10
- --d2l-dropdown-above-animation-name: d2l-dropdown-above-animation;
11
- --d2l-dropdown-animation-name: d2l-dropdown-animation;
12
- --d2l-dropdown-background-color: #ffffff;
13
- --d2l-dropdown-border-color: var(--d2l-color-mica);
14
- --d2l-dropdown-foreground-color: var(--d2l-color-ferrite);
15
- --d2l-dropdown-shadow-color: rgba(0, 0, 0, 0.15);
16
- box-sizing: border-box;
17
- color: var(--d2l-dropdown-foreground-color);
18
- display: none;
19
- left: 0;
20
- position: fixed;
21
- text-align: left;
22
- top: 0;
23
- width: 100%;
24
- z-index: 998; /* position on top of floating buttons */
25
- }
26
-
27
- :host([theme="dark"]) {
28
- --d2l-dropdown-above-animation-name: d2l-dropdown-above-animation-dark;
29
- --d2l-dropdown-animation-name: d2l-dropdown-animation-dark;
30
- --d2l-dropdown-background-color: #333536; /* tungsten @ 70% */
31
- --d2l-dropdown-border-color: var(--d2l-color-tungsten);
32
- --d2l-dropdown-foreground-color: var(--d2l-color-sylvite);
33
- --d2l-dropdown-shadow-color: rgba(0, 0, 0, 1);
34
- opacity: 0.9;
35
- }
36
-
37
- :host([opened]) {
38
- animation: var(--d2l-dropdown-animation-name) 300ms ease;
39
- display: inline-block;
40
- }
41
-
42
- :host([opened-above]) {
43
- animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
44
- bottom: 0;
45
- top: auto;
46
- }
47
-
48
- :host([data-mobile][opened]:not([mobile-tray])) {
49
- animation: var(--d2l-dropdown-animation-name) 300ms ease;
50
- display: inline-block;
51
- }
52
-
53
- :host([data-mobile][opened-above]:not([mobile-tray])) {
54
- animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
55
- bottom: 0;
56
- top: auto;
57
- }
58
-
59
- .d2l-dropdown-content-pointer {
60
- clip: rect(-5px, 21px, 8px, -7px);
61
- display: inline-block;
62
- position: absolute;
63
- z-index: 1;
64
- }
65
-
66
- .d2l-dropdown-content-pointer > div {
67
- background-color: var(--d2l-dropdown-background-color);
68
- border: 1px solid var(--d2l-dropdown-border-color);
69
- border-radius: 0.1rem;
70
- box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
71
- height: ${pointerLength}px;
72
- -webkit-transform: rotate(45deg);
73
- transform: rotate(45deg);
74
- width: ${pointerLength}px;
75
- }
76
-
77
- :host([opened-above]) .d2l-dropdown-content-pointer {
78
- bottom: auto;
79
- clip: rect(9px, 21px, 22px, -3px);
80
- top: auto;
81
- }
82
-
83
- :host([opened-above]) .d2l-dropdown-content-pointer > div {
84
- box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
85
- }
86
-
87
- :host([no-pointer]) .d2l-dropdown-content-pointer {
88
- display: none;
89
- }
90
-
91
- .d2l-dropdown-content-position {
92
- border-radius: 0.3rem;
93
- display: inline-block;
94
- position: absolute;
95
- }
96
-
97
- .d2l-dropdown-content-width {
98
- align-items: flex-start;
99
- background-color: var(--d2l-dropdown-background-color);
100
- border: 1px solid var(--d2l-dropdown-border-color);
101
- border-radius: 0.3rem;
102
- box-shadow: 0 2px 12px 0 var(--d2l-dropdown-shadow-color);
103
- box-sizing: border-box;
104
- display: flex;
105
- flex-direction: column;
106
- max-width: 370px;
107
- min-width: 70px;
108
- position: absolute;
109
- width: 100vw;
110
- }
111
-
112
- d2l-focus-trap {
113
- position: absolute;
114
- }
115
-
116
- :host([opened-above]) .d2l-dropdown-content-width {
117
- bottom: 100%;
118
- }
119
-
120
- .d2l-dropdown-content-container {
121
- box-sizing: border-box;
122
- max-width: 100%;
123
- outline: none;
124
- overflow-y: auto;
125
- padding: 1rem;
126
- }
127
-
128
- .d2l-dropdown-content-top,
129
- .d2l-dropdown-content-bottom {
130
- box-sizing: border-box;
131
- max-width: 100%;
132
- min-height: 5px;
133
- position: relative;
134
- z-index: 2;
135
- }
136
-
137
- .d2l-dropdown-content-header {
138
- border-bottom: 1px solid var(--d2l-dropdown-border-color);
139
- padding: 1rem;
140
- }
141
-
142
- .d2l-dropdown-content-footer {
143
- border-top: 1px solid var(--d2l-dropdown-border-color);
144
- padding: 1rem;
145
- }
146
-
147
- :host([no-padding]) .d2l-dropdown-content-container,
148
- :host([no-padding-header]) .d2l-dropdown-content-header,
149
- :host([no-padding-footer]) .d2l-dropdown-content-footer {
150
- padding: 0;
151
- }
152
-
153
- .d2l-dropdown-content-top {
154
- border-top-left-radius: 0.3rem;
155
- border-top-right-radius: 0.3rem;
156
- }
157
-
158
- .d2l-dropdown-content-bottom {
159
- border-bottom-left-radius: 0.3rem;
160
- border-bottom-right-radius: 0.3rem;
161
- }
162
-
163
- .d2l-dropdown-content-top-scroll {
164
- box-shadow: 0 3px 3px 0 var(--d2l-dropdown-shadow-color);
165
- }
166
-
167
- .d2l-dropdown-content-bottom-scroll {
168
- box-shadow: 0 -3px 3px 0 var(--d2l-dropdown-shadow-color);
169
- }
170
-
171
- :host([dir="rtl"]) {
172
- left: auto;
173
- right: 0;
174
- text-align: right;
175
- }
176
-
177
- :host(.d2l-dropdown-content-fading) {
178
- opacity: 0;
179
- /* matches DropdownOpenerMixin _closeTimerStart function */
180
- transition: opacity 0.4s ease-out 0.3s;
181
- }
182
-
183
- @media (prefers-reduced-motion: reduce) {
184
- :host(.d2l-dropdown-content-fading) {
185
- opacity: 1;
186
- transition: none;
187
- }
188
- }
189
-
190
- @media (prefers-reduced-motion: reduce) {
191
- :host([opened]), :host([opened-above]) {
192
- animation: none !important;
193
- }
194
- }
195
-
196
- @keyframes d2l-dropdown-animation {
197
- 0% { opacity: 0; transform: translate(0, -10px); }
198
- 100% { opacity: 1; transform: translate(0, 0); }
199
- }
200
- @keyframes d2l-dropdown-animation-dark {
201
- 0% { opacity: 0; transform: translate(0, -10px); }
202
- 100% { opacity: 0.9; transform: translate(0, 0); }
203
- }
204
- @keyframes d2l-dropdown-above-animation {
205
- 0% { opacity: 0; transform: translate(0, 10px); }
206
- 100% { opacity: 1; transform: translate(0, 0); }
207
- }
208
- @keyframes d2l-dropdown-above-animation-dark {
209
- 0% { opacity: 0; transform: translate(0, 10px); }
210
- 100% { opacity: 0.9; transform: translate(0, 0); }
211
- }
212
-
213
- @keyframes d2l-dropdown-mobile-tray-right {
214
- 0% { opacity: 0; transform: translateX(100%); }
215
- 100% { opacity: 1; transform: translate(0, 0); }
216
- }
217
-
218
- @keyframes d2l-dropdown-mobile-tray-right-close {
219
- 0% { opacity: 1; transform: translate(0, 0); }
220
- 100% { opacity: 0; transform: translateX(100%); }
221
- }
222
-
223
- @keyframes d2l-dropdown-mobile-tray-left {
224
- 0% { opacity: 0; transform: translateX(-100%); }
225
- 100% { opacity: 1; transform: translate(0, 0); }
226
- }
227
-
228
- @keyframes d2l-dropdown-mobile-tray-left-close {
229
- 0% { opacity: 1; transform: translate(0, 0); }
230
- 100% { opacity: 0; transform: translateX(-100%); }
231
- }
232
-
233
- @keyframes d2l-dropdown-mobile-tray-bottom {
234
- 0% { opacity: 0; transform: translateY(100%); }
235
- 100% { opacity: 1; transform: translate(0, 0); }
236
- }
237
-
238
- @keyframes d2l-dropdown-mobile-tray-bottom-close {
239
- 0% { opacity: 1; transform: translate(0, 0); }
240
- 100% { opacity: 0; transform: translateY(100%); }
241
- }
242
-
243
- :host([data-mobile][mobile-tray="left"]) .d2l-dropdown-content-width {
244
- border-bottom-left-radius: 0;
245
- border-top-left-radius: 0;
246
- bottom: 0;
247
- position: fixed;
248
- top: 0;
249
- z-index: 1000;
250
- }
251
-
252
- :host([data-mobile][mobile-tray="right"]) .d2l-dropdown-content-width {
253
- border-bottom-right-radius: 0;
254
- border-top-right-radius: 0;
255
- bottom: 0;
256
- position: fixed;
257
- top: 0;
258
- z-index: 1000;
259
- }
260
-
261
- :host([data-mobile][mobile-tray="bottom"]) .d2l-dropdown-content-width {
262
- border-bottom-left-radius: 0;
263
- border-bottom-right-radius: 0;
264
- left: 0;
265
- position: fixed;
266
- z-index: 1000;
267
- }
268
-
269
- :host([data-mobile][mobile-tray="right"][opened]) .d2l-dropdown-content-width {
270
- animation: d2l-dropdown-mobile-tray-right 300ms ease-out;
271
- right: 0;
272
- }
273
-
274
- :host([data-mobile][mobile-tray="left"][opened]) .d2l-dropdown-content-width {
275
- animation: d2l-dropdown-mobile-tray-left 300ms ease-out;
276
- left: 0;
277
- }
278
-
279
- :host([data-mobile][mobile-tray="bottom"][opened]) .d2l-dropdown-content-width {
280
- animation: d2l-dropdown-mobile-tray-bottom 300ms ease-out;
281
- bottom: 0;
282
- }
283
-
284
- :host([data-mobile][mobile-tray="right"][opened]) .d2l-dropdown-content-width[data-closing] {
285
- animation: d2l-dropdown-mobile-tray-right-close 300ms ease-out;
286
- }
287
-
288
- :host([data-mobile][mobile-tray="left"][opened]) .d2l-dropdown-content-width[data-closing] {
289
- animation: d2l-dropdown-mobile-tray-left-close 300ms ease-out;
290
- }
291
-
292
- :host([data-mobile][mobile-tray="bottom"][opened]) .d2l-dropdown-content-width[data-closing] {
293
- animation: d2l-dropdown-mobile-tray-bottom-close 300ms ease-out;
294
- }
295
-
296
- :host([data-mobile][mobile-tray="left"][opened]) .d2l-dropdown-content-container,
297
- :host([data-mobile][mobile-tray="right"][opened]) .d2l-dropdown-content-container {
298
- height: 100vh;
299
- }
300
-
301
- :host([data-mobile][mobile-tray]) > .d2l-dropdown-content-pointer {
302
- display: none;
303
- }
304
-
305
- :host([data-mobile][mobile-tray][opened]) {
306
- animation: none;
307
- }
308
-
309
- :host([data-mobile][mobile-tray]) .d2l-dropdown-content-bottom,
310
- :host([data-mobile][mobile-tray]) .d2l-dropdown-content-top {
311
- min-height: auto;
312
- }
313
-
314
- @media (prefers-reduced-motion: reduce) {
315
- :host([data-mobile][mobile-tray][opened]) .d2l-dropdown-content-width {
316
- animation: none;
317
- }
318
-
319
- :host([data-mobile][mobile-tray][opened]) .d2l-dropdown-content-width[data-closing] {
320
- animation: none;
321
- }
322
- }
323
-
324
- :host([offscreen]) {
325
- ${_offscreenStyleDeclarations}
326
- }
327
- `;