@rolemodel/optics 0.4.1 → 0.5.0
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.
- package/NEW_COMPONENT.md +59 -0
- package/README.md +12 -0
- package/dist/css/optics.css +607 -220
- package/dist/css/optics.css.map +1 -1
- package/dist/scss/components/accordion.scss +38 -0
- package/dist/scss/components/avatar.scss +7 -6
- package/dist/scss/components/button.scss +1 -29
- package/dist/scss/components/card.scss +15 -5
- package/dist/scss/components/confirm-dialog.scss +7 -13
- package/dist/scss/components/form.scss +25 -2
- package/dist/scss/components/icon.scss +4 -1
- package/dist/scss/components/index.scss +7 -0
- package/dist/scss/components/modal.scss +16 -23
- package/dist/scss/components/navbar.scss +61 -0
- package/dist/scss/components/side_panel.scss +94 -0
- package/dist/scss/components/sidebar.scss +6 -6
- package/dist/scss/components/spinner.scss +55 -0
- package/dist/scss/components/switch.scss +106 -0
- package/dist/scss/components/tab.scss +84 -0
- package/dist/scss/components/table.scss +3 -3
- package/dist/scss/components/tag.scss +174 -0
- package/dist/scss/components/tooltip.scss +3 -3
- package/dist/scss/core/layout.scss +8 -1
- package/dist/scss/core/tokens/base_tokens.scss +57 -16
- package/dist/scss/core/tokens/dark_mode_tokens.scss +47 -42
- package/dist/scss/core/tokens/scale_color_tokens.scss +48 -51
- package/dist/scss/core/utilities.scss +15 -3
- package/dist/tokens/tokens.json +63 -2
- package/package.json +25 -24
package/dist/css/optics.css
CHANGED
|
@@ -74,9 +74,6 @@ select {
|
|
|
74
74
|
scroll-behavior: auto !important;
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
/**
|
|
78
|
-
* @tokens Breakpoints
|
|
79
|
-
*/
|
|
80
77
|
:root {
|
|
81
78
|
/**
|
|
82
79
|
* @tokens Basic Colors
|
|
@@ -127,6 +124,24 @@ select {
|
|
|
127
124
|
--op-color-alerts-notice-s: 61%;
|
|
128
125
|
--op-color-alerts-notice-l: 64%;
|
|
129
126
|
/**
|
|
127
|
+
* @tokens Opacities
|
|
128
|
+
* @presenter Opacity
|
|
129
|
+
*/
|
|
130
|
+
--op-opacity-none: 0;
|
|
131
|
+
--op-opacity-overlay: 0.2;
|
|
132
|
+
--op-opacity-disabled: 0.4;
|
|
133
|
+
--op-opacity-half: 0.5;
|
|
134
|
+
--op-opacity-full: 1;
|
|
135
|
+
/**
|
|
136
|
+
* @tokens Breakpoints
|
|
137
|
+
* @presenter Spacing
|
|
138
|
+
*/
|
|
139
|
+
--op-breakpoint-x-small: 512px;
|
|
140
|
+
--op-breakpoint-small: 768px;
|
|
141
|
+
--op-breakpoint-medium: 1024px;
|
|
142
|
+
--op-breakpoint-large: 1280px;
|
|
143
|
+
--op-breakpoint-x-large: 1440px;
|
|
144
|
+
/**
|
|
130
145
|
* @tokens Border Radius
|
|
131
146
|
* @presenter BorderRadius
|
|
132
147
|
*/
|
|
@@ -216,6 +231,7 @@ select {
|
|
|
216
231
|
/**
|
|
217
232
|
* @tokens Transition
|
|
218
233
|
*/
|
|
234
|
+
--op-transition-accordion: rotate 120ms ease-in;
|
|
219
235
|
--op-transition-input: all 120ms ease-in;
|
|
220
236
|
--op-transition-sidebar: all 200ms ease-in-out;
|
|
221
237
|
--op-transition-modal: all 300ms ease-in;
|
|
@@ -228,8 +244,13 @@ select {
|
|
|
228
244
|
/**
|
|
229
245
|
* @tokens Encoded Images
|
|
230
246
|
*/
|
|
231
|
-
--op-encoded-images-dropdown-arrow-width: var(--op-space-scale-unit);
|
|
232
|
-
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml
|
|
247
|
+
--op-encoded-images-dropdown-arrow-width: calc(1.2 * var(--op-space-scale-unit));
|
|
248
|
+
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==");
|
|
249
|
+
/**
|
|
250
|
+
* @tokens Size Scale
|
|
251
|
+
* @presenter Spacing
|
|
252
|
+
*/
|
|
253
|
+
--op-size-unit: 0.4rem;
|
|
233
254
|
/**
|
|
234
255
|
* @tokens Space Scale
|
|
235
256
|
* @presenter Spacing
|
|
@@ -282,10 +303,16 @@ select {
|
|
|
282
303
|
--op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
|
|
283
304
|
--op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
|
|
284
305
|
var(--op-input-outer-focus) var(--op-color-primary-plus-five);
|
|
306
|
+
--op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
|
|
307
|
+
var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
|
|
285
308
|
--op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
|
|
286
309
|
var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
|
|
287
310
|
--op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
|
|
288
311
|
var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
|
|
312
|
+
--op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
|
|
313
|
+
var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
|
|
314
|
+
--op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
|
|
315
|
+
var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
|
|
289
316
|
}
|
|
290
317
|
|
|
291
318
|
@keyframes rm-slide-in-out-flash {
|
|
@@ -431,9 +458,7 @@ select {
|
|
|
431
458
|
* @tokens Alerts Warning Colors
|
|
432
459
|
* @presenter Color
|
|
433
460
|
*/
|
|
434
|
-
--op-color-alerts-warning-original: hsl(
|
|
435
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l)
|
|
436
|
-
);
|
|
461
|
+
--op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
|
|
437
462
|
--op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
438
463
|
--op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
|
|
439
464
|
--op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -456,25 +481,17 @@ select {
|
|
|
456
481
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
457
482
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
458
483
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
459
|
-
--op-color-alerts-warning-on-plus-eight-alt: hsl(
|
|
460
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
461
|
-
);
|
|
484
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
462
485
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
463
|
-
--op-color-alerts-warning-on-plus-seven-alt: hsl(
|
|
464
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%
|
|
465
|
-
);
|
|
486
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
|
|
466
487
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
|
|
467
488
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
468
489
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
469
|
-
--op-color-alerts-warning-on-plus-five-alt: hsl(
|
|
470
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%
|
|
471
|
-
);
|
|
490
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%);
|
|
472
491
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
473
492
|
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
474
493
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
475
|
-
--op-color-alerts-warning-on-plus-three-alt: hsl(
|
|
476
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%
|
|
477
|
-
);
|
|
494
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
478
495
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
|
|
479
496
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
480
497
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
@@ -482,48 +499,28 @@ select {
|
|
|
482
499
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
483
500
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
484
501
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
485
|
-
--op-color-alerts-warning-on-minus-one-alt: hsl(
|
|
486
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%
|
|
487
|
-
);
|
|
502
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
488
503
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
489
|
-
--op-color-alerts-warning-on-minus-two-alt: hsl(
|
|
490
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%
|
|
491
|
-
);
|
|
504
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
|
|
492
505
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
|
|
493
|
-
--op-color-alerts-warning-on-minus-three-alt: hsl(
|
|
494
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%
|
|
495
|
-
);
|
|
506
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
496
507
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
497
|
-
--op-color-alerts-warning-on-minus-four-alt: hsl(
|
|
498
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%
|
|
499
|
-
);
|
|
508
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
|
|
500
509
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
501
|
-
--op-color-alerts-warning-on-minus-five-alt: hsl(
|
|
502
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%
|
|
503
|
-
);
|
|
510
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
|
|
504
511
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
|
|
505
|
-
--op-color-alerts-warning-on-minus-six-alt: hsl(
|
|
506
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%
|
|
507
|
-
);
|
|
512
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%);
|
|
508
513
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
509
|
-
--op-color-alerts-warning-on-minus-seven-alt: hsl(
|
|
510
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%
|
|
511
|
-
);
|
|
514
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
|
|
512
515
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
|
|
513
|
-
--op-color-alerts-warning-on-minus-eight-alt: hsl(
|
|
514
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%
|
|
515
|
-
);
|
|
516
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%);
|
|
516
517
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
517
|
-
--op-color-alerts-warning-on-minus-max-alt: hsl(
|
|
518
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%
|
|
519
|
-
);
|
|
518
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
520
519
|
/**
|
|
521
520
|
* @tokens Alerts Danger Colors
|
|
522
521
|
* @presenter Color
|
|
523
522
|
*/
|
|
524
|
-
--op-color-alerts-danger-original: hsl(
|
|
525
|
-
var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l)
|
|
526
|
-
);
|
|
523
|
+
--op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
|
|
527
524
|
--op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
|
|
528
525
|
--op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
|
|
529
526
|
--op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
|
|
@@ -585,9 +582,7 @@ select {
|
|
|
585
582
|
* @tokens Alerts Info Colors
|
|
586
583
|
* @presenter Color
|
|
587
584
|
*/
|
|
588
|
-
--op-color-alerts-info-original: hsl(
|
|
589
|
-
var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l)
|
|
590
|
-
);
|
|
585
|
+
--op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
|
|
591
586
|
--op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
|
|
592
587
|
--op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
|
|
593
588
|
--op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
|
|
@@ -649,9 +644,7 @@ select {
|
|
|
649
644
|
* @tokens Alerts Notice Colors
|
|
650
645
|
* @presenter Color
|
|
651
646
|
*/
|
|
652
|
-
--op-color-alerts-notice-original: hsl(
|
|
653
|
-
var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l)
|
|
654
|
-
);
|
|
647
|
+
--op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
|
|
655
648
|
--op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
|
|
656
649
|
--op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
|
|
657
650
|
--op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
|
|
@@ -715,6 +708,7 @@ select {
|
|
|
715
708
|
*/
|
|
716
709
|
--op-color-background: var(--op-color-neutral-plus-eight);
|
|
717
710
|
--op-color-on-background: var(--op-color-neutral-on-plus-eight);
|
|
711
|
+
--op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
|
|
718
712
|
}
|
|
719
713
|
|
|
720
714
|
@media (prefers-color-scheme: dark) {
|
|
@@ -867,27 +861,17 @@ select {
|
|
|
867
861
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
868
862
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
|
|
869
863
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
870
|
-
--op-color-alerts-warning-on-plus-eight-alt: hsl(
|
|
871
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
872
|
-
);
|
|
864
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
873
865
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
874
|
-
--op-color-alerts-warning-on-plus-seven-alt: hsl(
|
|
875
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
876
|
-
);
|
|
866
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
877
867
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
878
868
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
879
869
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
880
|
-
--op-color-alerts-warning-on-plus-five-alt: hsl(
|
|
881
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%
|
|
882
|
-
);
|
|
870
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
883
871
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
884
|
-
--op-color-alerts-warning-on-plus-four-alt: hsl(
|
|
885
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
886
|
-
);
|
|
872
|
+
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
887
873
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
888
|
-
--op-color-alerts-warning-on-plus-three-alt: hsl(
|
|
889
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
890
|
-
);
|
|
874
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
891
875
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
892
876
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
893
877
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -895,41 +879,23 @@ select {
|
|
|
895
879
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
896
880
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
897
881
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
898
|
-
--op-color-alerts-warning-on-minus-one-alt: hsl(
|
|
899
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
900
|
-
);
|
|
882
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
901
883
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
902
|
-
--op-color-alerts-warning-on-minus-two-alt: hsl(
|
|
903
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%
|
|
904
|
-
);
|
|
884
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
|
|
905
885
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
906
|
-
--op-color-alerts-warning-on-minus-three-alt: hsl(
|
|
907
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
908
|
-
);
|
|
886
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
909
887
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
910
|
-
--op-color-alerts-warning-on-minus-four-alt: hsl(
|
|
911
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
912
|
-
);
|
|
888
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
913
889
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
914
|
-
--op-color-alerts-warning-on-minus-five-alt: hsl(
|
|
915
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%
|
|
916
|
-
);
|
|
890
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
|
|
917
891
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
918
|
-
--op-color-alerts-warning-on-minus-six-alt: hsl(
|
|
919
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%
|
|
920
|
-
);
|
|
892
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
|
|
921
893
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
922
|
-
--op-color-alerts-warning-on-minus-seven-alt: hsl(
|
|
923
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
924
|
-
);
|
|
894
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
925
895
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
926
|
-
--op-color-alerts-warning-on-minus-eight-alt: hsl(
|
|
927
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%
|
|
928
|
-
);
|
|
896
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
929
897
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
930
|
-
--op-color-alerts-warning-on-minus-max-alt: hsl(
|
|
931
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
932
|
-
);
|
|
898
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
933
899
|
/**
|
|
934
900
|
* @tokens Alerts Danger Dark Colors
|
|
935
901
|
* @presenter Color
|
|
@@ -1122,6 +1088,7 @@ select {
|
|
|
1122
1088
|
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
|
|
1123
1089
|
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
|
|
1124
1090
|
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
|
|
1091
|
+
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
|
|
1125
1092
|
}
|
|
1126
1093
|
}
|
|
1127
1094
|
:root[data-theme-mode=dark] {
|
|
@@ -1273,27 +1240,17 @@ select {
|
|
|
1273
1240
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1274
1241
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
|
|
1275
1242
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
1276
|
-
--op-color-alerts-warning-on-plus-eight-alt: hsl(
|
|
1277
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
1278
|
-
);
|
|
1243
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1279
1244
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
1280
|
-
--op-color-alerts-warning-on-plus-seven-alt: hsl(
|
|
1281
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
1282
|
-
);
|
|
1245
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
1283
1246
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
1284
1247
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
1285
1248
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
1286
|
-
--op-color-alerts-warning-on-plus-five-alt: hsl(
|
|
1287
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%
|
|
1288
|
-
);
|
|
1249
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
1289
1250
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
1290
|
-
--op-color-alerts-warning-on-plus-four-alt: hsl(
|
|
1291
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
1292
|
-
);
|
|
1251
|
+
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
1293
1252
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
1294
|
-
--op-color-alerts-warning-on-plus-three-alt: hsl(
|
|
1295
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
1296
|
-
);
|
|
1253
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1297
1254
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
1298
1255
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1299
1256
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -1301,41 +1258,23 @@ select {
|
|
|
1301
1258
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1302
1259
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
1303
1260
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1304
|
-
--op-color-alerts-warning-on-minus-one-alt: hsl(
|
|
1305
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
1306
|
-
);
|
|
1261
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1307
1262
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1308
|
-
--op-color-alerts-warning-on-minus-two-alt: hsl(
|
|
1309
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%
|
|
1310
|
-
);
|
|
1263
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
|
|
1311
1264
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1312
|
-
--op-color-alerts-warning-on-minus-three-alt: hsl(
|
|
1313
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
1314
|
-
);
|
|
1265
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
1315
1266
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
1316
|
-
--op-color-alerts-warning-on-minus-four-alt: hsl(
|
|
1317
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
1318
|
-
);
|
|
1267
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
1319
1268
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
1320
|
-
--op-color-alerts-warning-on-minus-five-alt: hsl(
|
|
1321
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%
|
|
1322
|
-
);
|
|
1269
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
|
|
1323
1270
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
1324
|
-
--op-color-alerts-warning-on-minus-six-alt: hsl(
|
|
1325
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%
|
|
1326
|
-
);
|
|
1271
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
|
|
1327
1272
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
1328
|
-
--op-color-alerts-warning-on-minus-seven-alt: hsl(
|
|
1329
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
1330
|
-
);
|
|
1273
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
1331
1274
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
1332
|
-
--op-color-alerts-warning-on-minus-eight-alt: hsl(
|
|
1333
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%
|
|
1334
|
-
);
|
|
1275
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
1335
1276
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
1336
|
-
--op-color-alerts-warning-on-minus-max-alt: hsl(
|
|
1337
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
1338
|
-
);
|
|
1277
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
1339
1278
|
/**
|
|
1340
1279
|
* @tokens Alerts Danger Dark Colors
|
|
1341
1280
|
* @presenter Color
|
|
@@ -1528,6 +1467,7 @@ select {
|
|
|
1528
1467
|
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
|
|
1529
1468
|
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
|
|
1530
1469
|
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
|
|
1470
|
+
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
|
|
1531
1471
|
}
|
|
1532
1472
|
|
|
1533
1473
|
html {
|
|
@@ -1646,12 +1586,19 @@ small {
|
|
|
1646
1586
|
|
|
1647
1587
|
.app__content {
|
|
1648
1588
|
width: 100%;
|
|
1649
|
-
max-width:
|
|
1589
|
+
max-width: var(--op-breakpoint-medium);
|
|
1650
1590
|
flex-grow: 1;
|
|
1651
1591
|
padding: 0 var(--op-space-large);
|
|
1652
1592
|
margin: 0 auto;
|
|
1653
1593
|
}
|
|
1654
1594
|
|
|
1595
|
+
.app__content-no-margin {
|
|
1596
|
+
width: 100%;
|
|
1597
|
+
flex-grow: 1;
|
|
1598
|
+
padding: 0 var(--op-space-large);
|
|
1599
|
+
overflow-y: auto;
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1655
1602
|
.app__footer {
|
|
1656
1603
|
position: sticky;
|
|
1657
1604
|
z-index: var(--op-z-index-footer);
|
|
@@ -1662,13 +1609,13 @@ small {
|
|
|
1662
1609
|
|
|
1663
1610
|
.container {
|
|
1664
1611
|
width: 100%;
|
|
1665
|
-
max-width:
|
|
1612
|
+
max-width: var(--op-breakpoint-medium);
|
|
1666
1613
|
padding: 0 var(--op-space-large);
|
|
1667
1614
|
margin: 0 auto;
|
|
1668
1615
|
}
|
|
1669
1616
|
|
|
1670
1617
|
.container--sm {
|
|
1671
|
-
max-width:
|
|
1618
|
+
max-width: var(--op-breakpoint-small);
|
|
1672
1619
|
}
|
|
1673
1620
|
|
|
1674
1621
|
.container--md-padding {
|
|
@@ -1680,7 +1627,7 @@ small {
|
|
|
1680
1627
|
}
|
|
1681
1628
|
|
|
1682
1629
|
.container--xs {
|
|
1683
|
-
max-width:
|
|
1630
|
+
max-width: var(--op-breakpoint-x-small);
|
|
1684
1631
|
}
|
|
1685
1632
|
|
|
1686
1633
|
.full-width {
|
|
@@ -2097,6 +2044,42 @@ small {
|
|
|
2097
2044
|
}
|
|
2098
2045
|
}
|
|
2099
2046
|
|
|
2047
|
+
.sr-only {
|
|
2048
|
+
position: absolute !important;
|
|
2049
|
+
overflow: hidden;
|
|
2050
|
+
width: 1px;
|
|
2051
|
+
height: 1px;
|
|
2052
|
+
clip: rect(1px 1px 1px 1px);
|
|
2053
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
.accordion {
|
|
2057
|
+
--_op-accordion-summary-min-height: calc(8 * var(--op-size-unit));
|
|
2058
|
+
}
|
|
2059
|
+
.accordion summary {
|
|
2060
|
+
display: grid;
|
|
2061
|
+
min-height: var(--_op-accordion-summary-min-height);
|
|
2062
|
+
align-items: center;
|
|
2063
|
+
cursor: pointer;
|
|
2064
|
+
gap: var(--op-space-2x-small);
|
|
2065
|
+
grid-template-columns: auto 1fr auto;
|
|
2066
|
+
}
|
|
2067
|
+
.accordion summary .accordion__label {
|
|
2068
|
+
color: var(--op-color-neutral-on-plus-max);
|
|
2069
|
+
font-size: var(--op-font-x-small);
|
|
2070
|
+
font-weight: var(--op-font-weight-semi-bold);
|
|
2071
|
+
}
|
|
2072
|
+
.accordion summary .accordion__marker {
|
|
2073
|
+
--op-mso-optical-sizing: 48;
|
|
2074
|
+
font-size: var(--op-font-x-large);
|
|
2075
|
+
justify-self: flex-end;
|
|
2076
|
+
transition: var(--op-transition-accordion);
|
|
2077
|
+
user-select: none;
|
|
2078
|
+
}
|
|
2079
|
+
[open].accordion summary .accordion__marker {
|
|
2080
|
+
rotate: 0.25turn;
|
|
2081
|
+
}
|
|
2082
|
+
|
|
2100
2083
|
.alert-notice, .alert-info, .alert-danger,
|
|
2101
2084
|
.alert-alert, .alert-warning {
|
|
2102
2085
|
display: flex;
|
|
@@ -2254,11 +2237,11 @@ small {
|
|
|
2254
2237
|
--_op-avatar-outer-border-color: var(--op-color-neutral-base);
|
|
2255
2238
|
--_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
|
|
2256
2239
|
--_op-avatar-outer-border-width: var(--op-border-width-large);
|
|
2257
|
-
--_op-avatar-disabled-opacity:
|
|
2258
|
-
--_op-avatar-hover-opacity:
|
|
2259
|
-
--_op-avatar-size-small:
|
|
2260
|
-
--_op-avatar-size-medium:
|
|
2261
|
-
--_op-avatar-size-large:
|
|
2240
|
+
--_op-avatar-disabled-opacity: var(--op-opacity-disabled);
|
|
2241
|
+
--_op-avatar-hover-opacity: var(--op-opacity-overlay);
|
|
2242
|
+
--_op-avatar-size-small: calc(8 * var(--op-size-unit));
|
|
2243
|
+
--_op-avatar-size-medium: calc(10 * var(--op-size-unit));
|
|
2244
|
+
--_op-avatar-size-large: calc(14 * var(--op-size-unit));
|
|
2262
2245
|
--__op-avatar-size: var(--_op-avatar-size-large);
|
|
2263
2246
|
position: relative;
|
|
2264
2247
|
z-index: 1;
|
|
@@ -2440,7 +2423,7 @@ small {
|
|
|
2440
2423
|
--__op-btn-padding: var(--_op-btn-padding-large);
|
|
2441
2424
|
}
|
|
2442
2425
|
.btn--disabled.btn-warning, .btn--disabled.btn-delete, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-warning:disabled, .btn-delete:disabled, .btn-primary:disabled, .btn:disabled {
|
|
2443
|
-
opacity:
|
|
2426
|
+
opacity: var(--op-opacity-disabled);
|
|
2444
2427
|
pointer-events: none;
|
|
2445
2428
|
-webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
|
|
2446
2429
|
user-select: none;
|
|
@@ -2586,26 +2569,6 @@ small {
|
|
|
2586
2569
|
box-shadow: var(--op-input-focus-warning);
|
|
2587
2570
|
color: var(--op-color-alerts-warning-on-base);
|
|
2588
2571
|
}
|
|
2589
|
-
.btn-warning.btn--no-border {
|
|
2590
|
-
background-color: transparent;
|
|
2591
|
-
box-shadow: none;
|
|
2592
|
-
color: var(--op-color-alerts-warning-on-plus-max);
|
|
2593
|
-
}
|
|
2594
|
-
.btn-warning.btn--no-border.btn--active {
|
|
2595
|
-
background-color: var(--op-color-alerts-warning-plus-five);
|
|
2596
|
-
box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
|
|
2597
|
-
color: var(--op-color-alerts-warning-on-plus-five);
|
|
2598
|
-
}
|
|
2599
|
-
.btn-warning.btn--no-border:hover {
|
|
2600
|
-
background-color: var(--op-color-alerts-warning-plus-eight);
|
|
2601
|
-
box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-five);
|
|
2602
|
-
color: var(--op-color-alerts-warning-on-plus-eight);
|
|
2603
|
-
}
|
|
2604
|
-
.btn-warning.btn--no-border:focus-visible {
|
|
2605
|
-
background-color: var(--op-color-alerts-warning-plus-eight);
|
|
2606
|
-
box-shadow: var(--op-input-focus-warning);
|
|
2607
|
-
color: var(--op-color-alerts-warning-on-plus-eight);
|
|
2608
|
-
}
|
|
2609
2572
|
|
|
2610
2573
|
.btn-group {
|
|
2611
2574
|
--op-btn-group-hover-z-index: 1;
|
|
@@ -2753,26 +2716,20 @@ small {
|
|
|
2753
2716
|
.confirm-dialog-wrapper {
|
|
2754
2717
|
position: fixed;
|
|
2755
2718
|
z-index: var(--op-z-index-dialog);
|
|
2756
|
-
top: 0;
|
|
2757
|
-
right: 0;
|
|
2758
|
-
bottom: 0;
|
|
2759
|
-
left: 0;
|
|
2760
2719
|
display: flex;
|
|
2761
2720
|
overflow: hidden;
|
|
2762
2721
|
align-items: center;
|
|
2763
2722
|
justify-content: center;
|
|
2723
|
+
inset: 0;
|
|
2764
2724
|
outline: 0;
|
|
2765
2725
|
visibility: hidden;
|
|
2766
2726
|
}
|
|
2767
2727
|
.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
|
|
2768
2728
|
position: fixed;
|
|
2769
2729
|
z-index: var(--op-z-index-dialog-backdrop);
|
|
2770
|
-
top: 0;
|
|
2771
|
-
right: 0;
|
|
2772
|
-
bottom: 0;
|
|
2773
|
-
left: 0;
|
|
2774
2730
|
background: var(--op-color-black);
|
|
2775
|
-
|
|
2731
|
+
inset: 0;
|
|
2732
|
+
opacity: var(--op-opacity-none);
|
|
2776
2733
|
transition: var(--op-transition-modal);
|
|
2777
2734
|
visibility: hidden;
|
|
2778
2735
|
}
|
|
@@ -2780,16 +2737,16 @@ small {
|
|
|
2780
2737
|
visibility: visible;
|
|
2781
2738
|
}
|
|
2782
2739
|
.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog {
|
|
2783
|
-
opacity:
|
|
2740
|
+
opacity: var(--op-opacity-full);
|
|
2784
2741
|
transform: scale(1);
|
|
2785
2742
|
}
|
|
2786
2743
|
.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
|
|
2787
|
-
opacity:
|
|
2744
|
+
opacity: var(--op-opacity-half);
|
|
2788
2745
|
visibility: visible;
|
|
2789
2746
|
}
|
|
2790
2747
|
|
|
2791
2748
|
.confirm-dialog {
|
|
2792
|
-
--_op-confirm-dialog-width:
|
|
2749
|
+
--_op-confirm-dialog-width: calc(100 * var(--op-size-unit));
|
|
2793
2750
|
z-index: var(--op-z-index-dialog-content);
|
|
2794
2751
|
width: var(--_op-confirm-dialog-width);
|
|
2795
2752
|
border-radius: var(--op-radius-medium);
|
|
@@ -2799,7 +2756,7 @@ small {
|
|
|
2799
2756
|
contain: paint;
|
|
2800
2757
|
font-size: var(--op-font-medium);
|
|
2801
2758
|
line-height: var(--op-line-height-base);
|
|
2802
|
-
opacity:
|
|
2759
|
+
opacity: var(--op-opacity-none);
|
|
2803
2760
|
transform: scale(0.7);
|
|
2804
2761
|
transition: var(--op-transition-modal);
|
|
2805
2762
|
}
|
|
@@ -2891,7 +2848,7 @@ small {
|
|
|
2891
2848
|
}
|
|
2892
2849
|
|
|
2893
2850
|
.form-control:not([type=radio], [type=checkbox]) {
|
|
2894
|
-
--_op-form-control-opacity-disabled:
|
|
2851
|
+
--_op-form-control-opacity-disabled: var(--op-opacity-disabled);
|
|
2895
2852
|
--__op-form-control-border-color: var(--op-color-neutral-plus-four);
|
|
2896
2853
|
display: block;
|
|
2897
2854
|
width: 100%;
|
|
@@ -2952,8 +2909,10 @@ small {
|
|
|
2952
2909
|
select.form-control:not([multiple], [type=radio], [type=checkbox]) {
|
|
2953
2910
|
padding-right: var(--op-space-3x-large);
|
|
2954
2911
|
appearance: none;
|
|
2955
|
-
background: var(--op-encoded-images-dropdown-arrow)
|
|
2912
|
+
background-image: var(--op-encoded-images-dropdown-arrow);
|
|
2913
|
+
background-position: center right;
|
|
2956
2914
|
background-position-x: calc(100% - (var(--op-space-3x-large) / 2 - var(--op-encoded-images-dropdown-arrow-width) / 2));
|
|
2915
|
+
background-repeat: no-repeat;
|
|
2957
2916
|
cursor: pointer;
|
|
2958
2917
|
}
|
|
2959
2918
|
|
|
@@ -3101,6 +3060,23 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3101
3060
|
grid-row: 1;
|
|
3102
3061
|
}
|
|
3103
3062
|
|
|
3063
|
+
.form-group--inline {
|
|
3064
|
+
align-items: center;
|
|
3065
|
+
/* stylelint-disable no-descending-specificity */
|
|
3066
|
+
/* stylelint-enable no-descending-specificity */
|
|
3067
|
+
}
|
|
3068
|
+
.form-group--inline .form-label {
|
|
3069
|
+
grid-column: unset;
|
|
3070
|
+
}
|
|
3071
|
+
.form-group--inline .form-error,
|
|
3072
|
+
.form-group--inline .form-hint {
|
|
3073
|
+
grid-column: 1/3;
|
|
3074
|
+
}
|
|
3075
|
+
.form-group--inline .form-control:not([type=radio], [type=checkbox]),
|
|
3076
|
+
.form-group--inline .switch {
|
|
3077
|
+
grid-column: unset;
|
|
3078
|
+
}
|
|
3079
|
+
|
|
3104
3080
|
.material-symbols-outlined,
|
|
3105
3081
|
.material-symbols {
|
|
3106
3082
|
--op-mso-fill: 0;
|
|
@@ -3195,29 +3171,23 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3195
3171
|
}
|
|
3196
3172
|
|
|
3197
3173
|
.modal-wrapper {
|
|
3198
|
-
--_op-modal-backdrop-active-opacity:
|
|
3174
|
+
--_op-modal-backdrop-active-opacity: var(--op-opacity-half);
|
|
3199
3175
|
position: fixed;
|
|
3200
3176
|
z-index: var(--op-z-index-dialog);
|
|
3201
|
-
top: 0;
|
|
3202
|
-
right: 0;
|
|
3203
|
-
bottom: 0;
|
|
3204
|
-
left: 0;
|
|
3205
3177
|
display: flex;
|
|
3206
3178
|
overflow: hidden;
|
|
3207
3179
|
align-items: center;
|
|
3208
3180
|
justify-content: center;
|
|
3181
|
+
inset: 0;
|
|
3209
3182
|
outline: 0;
|
|
3210
3183
|
visibility: hidden;
|
|
3211
3184
|
}
|
|
3212
3185
|
.modal-wrapper .modal-wrapper__backdrop {
|
|
3213
3186
|
position: fixed;
|
|
3214
3187
|
z-index: var(--op-z-index-dialog-backdrop);
|
|
3215
|
-
top: 0;
|
|
3216
|
-
right: 0;
|
|
3217
|
-
bottom: 0;
|
|
3218
|
-
left: 0;
|
|
3219
3188
|
background: var(--op-color-black);
|
|
3220
|
-
|
|
3189
|
+
inset: 0;
|
|
3190
|
+
opacity: var(--op-opacity-none);
|
|
3221
3191
|
transition: var(--op-transition-modal);
|
|
3222
3192
|
visibility: hidden;
|
|
3223
3193
|
}
|
|
@@ -3225,7 +3195,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3225
3195
|
visibility: visible;
|
|
3226
3196
|
}
|
|
3227
3197
|
.modal-wrapper--active.modal-wrapper .modal {
|
|
3228
|
-
opacity:
|
|
3198
|
+
opacity: var(--op-opacity-full);
|
|
3229
3199
|
transform: scale(1);
|
|
3230
3200
|
}
|
|
3231
3201
|
.modal-wrapper--active.modal-wrapper .modal-wrapper__backdrop {
|
|
@@ -3234,8 +3204,8 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3234
3204
|
}
|
|
3235
3205
|
|
|
3236
3206
|
.modal {
|
|
3237
|
-
--_op-modal-width:
|
|
3238
|
-
--_op-modal-max-height:
|
|
3207
|
+
--_op-modal-width: calc(141 * var(--op-size-unit));
|
|
3208
|
+
--_op-modal-max-height: calc(125 * var(--op-size-unit));
|
|
3239
3209
|
z-index: var(--op-z-index-dialog-content);
|
|
3240
3210
|
width: var(--_op-modal-width);
|
|
3241
3211
|
border-radius: var(--op-radius-medium);
|
|
@@ -3245,7 +3215,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3245
3215
|
contain: paint;
|
|
3246
3216
|
font-size: var(--op-font-medium);
|
|
3247
3217
|
line-height: var(--op-line-height-base);
|
|
3248
|
-
opacity:
|
|
3218
|
+
opacity: var(--op-opacity-none);
|
|
3249
3219
|
transform: scale(0.7);
|
|
3250
3220
|
transition: var(--op-transition-modal);
|
|
3251
3221
|
}
|
|
@@ -3275,7 +3245,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3275
3245
|
|
|
3276
3246
|
@keyframes show-backdrop {
|
|
3277
3247
|
from {
|
|
3278
|
-
opacity:
|
|
3248
|
+
opacity: var(--op-opacity-none);
|
|
3279
3249
|
}
|
|
3280
3250
|
to {
|
|
3281
3251
|
opacity: var(--_op-modal-backdrop-active-opacity);
|
|
@@ -3286,37 +3256,81 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3286
3256
|
opacity: var(--_op-modal-backdrop-active-opacity);
|
|
3287
3257
|
}
|
|
3288
3258
|
to {
|
|
3289
|
-
opacity:
|
|
3259
|
+
opacity: var(--op-opacity-none);
|
|
3290
3260
|
}
|
|
3291
3261
|
}
|
|
3292
3262
|
dialog.modal {
|
|
3293
3263
|
position: fixed;
|
|
3294
|
-
top: 0;
|
|
3295
|
-
right: 0;
|
|
3296
|
-
bottom: 0;
|
|
3297
|
-
left: 0;
|
|
3298
3264
|
display: block;
|
|
3299
3265
|
padding: 0;
|
|
3300
3266
|
border: none;
|
|
3267
|
+
inset: 0;
|
|
3301
3268
|
}
|
|
3302
3269
|
dialog.modal::backdrop {
|
|
3303
3270
|
--op-color-black: hsl(0deg 0% 0%);
|
|
3304
3271
|
--_op-modal-backdrop-active-opacity: 0.5;
|
|
3272
|
+
--op-opacity-none: 0;
|
|
3273
|
+
--op-opacity-full: 1;
|
|
3305
3274
|
animation: show-backdrop 300ms ease-in;
|
|
3306
3275
|
background: var(--op-color-black);
|
|
3307
3276
|
opacity: var(--_op-modal-backdrop-active-opacity);
|
|
3308
3277
|
}
|
|
3309
3278
|
dialog.modal[open] {
|
|
3310
|
-
opacity:
|
|
3279
|
+
opacity: var(--op-opacity-full);
|
|
3311
3280
|
transform: scale(1);
|
|
3312
3281
|
}
|
|
3313
3282
|
dialog.modal.modal--closing {
|
|
3314
|
-
opacity:
|
|
3283
|
+
opacity: var(--op-opacity-none);
|
|
3315
3284
|
transform: scale(0.7);
|
|
3316
3285
|
}
|
|
3317
3286
|
dialog.modal.modal--closing::backdrop {
|
|
3318
3287
|
animation: hide-backdrop 300ms ease-in;
|
|
3319
|
-
opacity:
|
|
3288
|
+
opacity: var(--op-opacity-none);
|
|
3289
|
+
}
|
|
3290
|
+
|
|
3291
|
+
.navbar-primary, .navbar {
|
|
3292
|
+
--_op-navbar-background-color: var(--op-color-neutral-plus-eight);
|
|
3293
|
+
--_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
|
|
3294
|
+
--_op-navbar-border-color: var(--op-color-neutral-plus-four);
|
|
3295
|
+
--_op-navbar-brand-height: calc(12 * var(--op-size-unit));
|
|
3296
|
+
--_op-navbar-horizontal-spacing: var(--op-space-x-large);
|
|
3297
|
+
--_op-navbar-content-spacing: var(--op-space-x-small);
|
|
3298
|
+
--_op-navbar-content-item-spacing: var(--op-space-2x-small);
|
|
3299
|
+
display: flex;
|
|
3300
|
+
align-items: center;
|
|
3301
|
+
padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
|
|
3302
|
+
background-color: var(--_op-navbar-background-color);
|
|
3303
|
+
box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
|
|
3304
|
+
color: var(--_op-navbar-text-color);
|
|
3305
|
+
gap: var(--_op-navbar-content-spacing);
|
|
3306
|
+
}
|
|
3307
|
+
.navbar-primary .navbar__brand, .navbar .navbar__brand {
|
|
3308
|
+
height: var(--_op-navbar-brand-height);
|
|
3309
|
+
margin-right: var(--_op-navbar-horizontal-spacing);
|
|
3310
|
+
}
|
|
3311
|
+
.navbar-primary .navbar__brand img, .navbar .navbar__brand img {
|
|
3312
|
+
height: 100%;
|
|
3313
|
+
}
|
|
3314
|
+
.navbar-primary .navbar__content, .navbar .navbar__content {
|
|
3315
|
+
display: flex;
|
|
3316
|
+
flex-wrap: wrap;
|
|
3317
|
+
align-items: center;
|
|
3318
|
+
gap: var(--_op-navbar-content-item-spacing);
|
|
3319
|
+
}
|
|
3320
|
+
.navbar-primary .navbar__content.navbar__content--justify-start, .navbar .navbar__content.navbar__content--justify-start {
|
|
3321
|
+
margin-inline-end: auto;
|
|
3322
|
+
}
|
|
3323
|
+
.navbar-primary .navbar__content.navbar__content--justify-center, .navbar .navbar__content.navbar__content--justify-center {
|
|
3324
|
+
margin-inline: auto;
|
|
3325
|
+
}
|
|
3326
|
+
.navbar-primary .navbar__content.navbar__content--justify-end, .navbar .navbar__content.navbar__content--justify-end {
|
|
3327
|
+
margin-inline-start: auto;
|
|
3328
|
+
}
|
|
3329
|
+
|
|
3330
|
+
.navbar-primary {
|
|
3331
|
+
--_op-navbar-background-color: var(--op-color-primary-plus-six);
|
|
3332
|
+
--_op-navbar-text-color: var(--op-color-primary-on-plus-six);
|
|
3333
|
+
--_op-navbar-border-color: var(--op-color-primary-plus-four);
|
|
3320
3334
|
}
|
|
3321
3335
|
|
|
3322
3336
|
.pagination {
|
|
@@ -3342,12 +3356,12 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3342
3356
|
--_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
|
|
3343
3357
|
--_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
|
|
3344
3358
|
--_op-sidebar-border-color: var(--op-color-neutral-plus-four);
|
|
3345
|
-
--_op-sidebar-rail-width:
|
|
3346
|
-
--_op-sidebar-compact-width:
|
|
3347
|
-
--_op-sidebar-drawer-width:
|
|
3348
|
-
--_op-sidebar-rail-brand-width:
|
|
3349
|
-
--_op-sidebar-compact-brand-width:
|
|
3350
|
-
--_op-sidebar-drawer-brand-width:
|
|
3359
|
+
--_op-sidebar-rail-width: calc(22 * var(--op-size-unit));
|
|
3360
|
+
--_op-sidebar-compact-width: calc(42 * var(--op-size-unit));
|
|
3361
|
+
--_op-sidebar-drawer-width: calc(54 * var(--op-size-unit));
|
|
3362
|
+
--_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit));
|
|
3363
|
+
--_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit));
|
|
3364
|
+
--_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit));
|
|
3351
3365
|
--_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
|
|
3352
3366
|
--_op-sidebar-brand-spacing: var(--op-space-medium);
|
|
3353
3367
|
--_op-sidebar-content-spacing: var(--op-space-x-small);
|
|
@@ -3494,10 +3508,253 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3494
3508
|
--_op-sidebar-border-color: var(--op-color-primary-plus-four);
|
|
3495
3509
|
}
|
|
3496
3510
|
|
|
3511
|
+
.side-panel {
|
|
3512
|
+
--_op-side-panel-width: calc(54 * var(--op-size-unit));
|
|
3513
|
+
--_op-side-panel-header-padding: var(--op-space-medium);
|
|
3514
|
+
--_op-side-panel-body-padding: var(--op-space-medium);
|
|
3515
|
+
--_op-side-panel-footer-padding: var(--op-space-medium);
|
|
3516
|
+
--_op-side-panel-section-padding: var(--op-space-medium);
|
|
3517
|
+
display: flex;
|
|
3518
|
+
width: var(--_op-side-panel-width);
|
|
3519
|
+
min-width: var(--_op-side-panel-width);
|
|
3520
|
+
height: 100vh;
|
|
3521
|
+
max-height: 100%;
|
|
3522
|
+
flex-direction: column;
|
|
3523
|
+
background-color: var(--op-color-background);
|
|
3524
|
+
color: var(--op-color-on-background);
|
|
3525
|
+
}
|
|
3526
|
+
.side-panel--border-left.side-panel {
|
|
3527
|
+
box-shadow: var(--op-border-left) var(--op-border-color);
|
|
3528
|
+
}
|
|
3529
|
+
.side-panel--border-right.side-panel {
|
|
3530
|
+
box-shadow: var(--op-border-right) var(--op-border-color);
|
|
3531
|
+
}
|
|
3532
|
+
.side-panel--border-left.side-panel--border-right.side-panel {
|
|
3533
|
+
box-shadow: var(--op-border-x);
|
|
3534
|
+
}
|
|
3535
|
+
.side-panel .side-panel__header.side-panel__header--padded {
|
|
3536
|
+
padding: var(--_op-side-panel-header-padding);
|
|
3537
|
+
}
|
|
3538
|
+
.side-panel .side-panel__header.side-panel__header--padded-x {
|
|
3539
|
+
padding-inline: var(--_op-side-panel-header-padding);
|
|
3540
|
+
}
|
|
3541
|
+
.side-panel .side-panel__header.side-panel__header--padded-y {
|
|
3542
|
+
padding-block: var(--_op-side-panel-header-padding);
|
|
3543
|
+
}
|
|
3544
|
+
.side-panel .side-panel__body {
|
|
3545
|
+
flex: 1;
|
|
3546
|
+
overflow-y: auto;
|
|
3547
|
+
}
|
|
3548
|
+
.side-panel .side-panel__body.side-panel__body--padded {
|
|
3549
|
+
padding: var(--_op-side-panel-body-padding);
|
|
3550
|
+
}
|
|
3551
|
+
.side-panel .side-panel__body.side-panel__body--padded-x {
|
|
3552
|
+
padding-inline: var(--_op-side-panel-body-padding);
|
|
3553
|
+
}
|
|
3554
|
+
.side-panel .side-panel__body.side-panel__body--padded-y {
|
|
3555
|
+
padding-block: var(--_op-side-panel-body-padding);
|
|
3556
|
+
}
|
|
3557
|
+
.side-panel .side-panel__footer.side-panel__footer--padded {
|
|
3558
|
+
padding: var(--_op-side-panel-footer-padding);
|
|
3559
|
+
}
|
|
3560
|
+
.side-panel .side-panel__footer.side-panel__footer--padded-x {
|
|
3561
|
+
padding-inline: var(--_op-side-panel-footer-padding);
|
|
3562
|
+
}
|
|
3563
|
+
.side-panel .side-panel__footer.side-panel__footer--padded-y {
|
|
3564
|
+
padding-block: var(--_op-side-panel-footer-padding);
|
|
3565
|
+
}
|
|
3566
|
+
.side-panel .side-panel__section.side-panel__section--padded {
|
|
3567
|
+
padding: var(--_op-side-panel-section-padding);
|
|
3568
|
+
}
|
|
3569
|
+
.side-panel .side-panel__section.side-panel__section--padded-x {
|
|
3570
|
+
padding-inline: var(--_op-side-panel-section-padding);
|
|
3571
|
+
}
|
|
3572
|
+
.side-panel .side-panel__section.side-panel__section--padded-y {
|
|
3573
|
+
padding-block: var(--_op-side-panel-section-padding);
|
|
3574
|
+
}
|
|
3575
|
+
|
|
3576
|
+
.spinner {
|
|
3577
|
+
--_op-spinner-indicator-color: var(--op-color-primary-base);
|
|
3578
|
+
--_op-spinner-track-color: var(--op-color-neutral-plus-four);
|
|
3579
|
+
--_op-spinner-track-width-x-small: var(--op-border-width);
|
|
3580
|
+
--_op-spinner-track-width-small: var(--op-border-width-large);
|
|
3581
|
+
--_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
|
|
3582
|
+
--_op-spinner-track-width-large: var(--op-border-width-x-large);
|
|
3583
|
+
--_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit));
|
|
3584
|
+
--_op-spinner-diameter-small: calc(10 * var(--op-size-unit));
|
|
3585
|
+
--_op-spinner-diameter-medium: calc(15 * var(--op-size-unit));
|
|
3586
|
+
--_op-spinner-diameter-large: calc(20 * var(--op-size-unit));
|
|
3587
|
+
--_op-spinner-animation-duration: 0.8s;
|
|
3588
|
+
--_op-spinner-animation-timing-function: linear;
|
|
3589
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-large);
|
|
3590
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-large);
|
|
3591
|
+
width: var(--__op-spinner-diameter);
|
|
3592
|
+
height: var(--__op-spinner-diameter);
|
|
3593
|
+
border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
|
|
3594
|
+
border-radius: var(--__op-spinner-diameter);
|
|
3595
|
+
border-top-color: var(--_op-spinner-indicator-color);
|
|
3596
|
+
animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
|
|
3597
|
+
}
|
|
3598
|
+
.spinner--x-small.spinner {
|
|
3599
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
|
|
3600
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
|
|
3601
|
+
}
|
|
3602
|
+
.spinner--small.spinner {
|
|
3603
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-small);
|
|
3604
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-small);
|
|
3605
|
+
}
|
|
3606
|
+
.spinner--medium.spinner {
|
|
3607
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-medium);
|
|
3608
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-medium);
|
|
3609
|
+
}
|
|
3610
|
+
.spinner--large.spinner {
|
|
3611
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-large);
|
|
3612
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-large);
|
|
3613
|
+
}
|
|
3614
|
+
|
|
3615
|
+
@keyframes spinner {
|
|
3616
|
+
to {
|
|
3617
|
+
transform: rotate(360deg);
|
|
3618
|
+
}
|
|
3619
|
+
}
|
|
3620
|
+
.switch {
|
|
3621
|
+
--_op-switch-height-small: calc(4 * var(--op-size-unit));
|
|
3622
|
+
--_op-switch-height-large: calc(6 * var(--op-size-unit));
|
|
3623
|
+
--_op-switch-width-small: calc(7 * var(--op-size-unit));
|
|
3624
|
+
--_op-switch-width-large: calc(11 * var(--op-size-unit));
|
|
3625
|
+
--_op-switch-opacity-disabled: var(--op-opacity-disabled);
|
|
3626
|
+
--_op-switch-switch-padding: var(--op-space-2x-small);
|
|
3627
|
+
--__op-switch-width: var(--_op-switch-width-large);
|
|
3628
|
+
--__op-switch-height: var(--_op-switch-height-large);
|
|
3629
|
+
--__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
|
|
3630
|
+
--__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);
|
|
3631
|
+
position: relative;
|
|
3632
|
+
display: flex;
|
|
3633
|
+
}
|
|
3634
|
+
.switch input {
|
|
3635
|
+
width: 0;
|
|
3636
|
+
height: 0;
|
|
3637
|
+
margin-right: calc(-1 * var(--op-space-2x-small));
|
|
3638
|
+
}
|
|
3639
|
+
.switch input:disabled + label {
|
|
3640
|
+
cursor: not-allowed;
|
|
3641
|
+
opacity: var(--_op-switch-opacity-disabled);
|
|
3642
|
+
}
|
|
3643
|
+
.switch input:checked + label {
|
|
3644
|
+
background-color: var(--op-color-primary-base);
|
|
3645
|
+
box-shadow: none;
|
|
3646
|
+
}
|
|
3647
|
+
.switch input:checked + label::after {
|
|
3648
|
+
left: calc(100% - var(--__op-switch-half-switch-padding));
|
|
3649
|
+
transform: translateX(-100%);
|
|
3650
|
+
}
|
|
3651
|
+
.switch input:hover + label::after {
|
|
3652
|
+
background-color: var(--op-color-primary-plus-five);
|
|
3653
|
+
}
|
|
3654
|
+
.switch input:focus-visible + label {
|
|
3655
|
+
box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six), inset var(--op-border-all) var(--op-color-primary-minus-three);
|
|
3656
|
+
}
|
|
3657
|
+
.switch input:focus-visible + label::after {
|
|
3658
|
+
background-color: var(--op-color-neutral-plus-five);
|
|
3659
|
+
box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
|
|
3660
|
+
}
|
|
3661
|
+
.switch input:focus-visible:checked + label::after {
|
|
3662
|
+
background-color: var(--op-color-primary-plus-six);
|
|
3663
|
+
box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
|
|
3664
|
+
}
|
|
3665
|
+
.switch label {
|
|
3666
|
+
position: relative;
|
|
3667
|
+
display: block;
|
|
3668
|
+
width: var(--__op-switch-width);
|
|
3669
|
+
height: var(--__op-switch-height);
|
|
3670
|
+
border-radius: var(--op-radius-pill);
|
|
3671
|
+
background: var(--op-color-neutral-base);
|
|
3672
|
+
box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
|
|
3673
|
+
text-indent: -9999px;
|
|
3674
|
+
}
|
|
3675
|
+
.switch label::after {
|
|
3676
|
+
position: absolute;
|
|
3677
|
+
top: var(--__op-switch-half-switch-padding);
|
|
3678
|
+
left: var(--__op-switch-half-switch-padding);
|
|
3679
|
+
width: var(--__op-switch-switch-size);
|
|
3680
|
+
height: var(--__op-switch-switch-size);
|
|
3681
|
+
border-radius: var(--op-radius-circle);
|
|
3682
|
+
background-color: var(--op-color-neutral-plus-eight);
|
|
3683
|
+
content: "";
|
|
3684
|
+
transition: var(--op-transition-input);
|
|
3685
|
+
}
|
|
3686
|
+
.switch--small.switch {
|
|
3687
|
+
--__op-switch-width: var(--_op-switch-width-small);
|
|
3688
|
+
--__op-switch-height: var(--_op-switch-height-small);
|
|
3689
|
+
}
|
|
3690
|
+
.switch--large.switch {
|
|
3691
|
+
--__op-switch-width: var(--_op-switch-width-large);
|
|
3692
|
+
--__op-switch-height: var(--_op-switch-height-large);
|
|
3693
|
+
}
|
|
3694
|
+
.switch + label {
|
|
3695
|
+
width: fit-content;
|
|
3696
|
+
}
|
|
3697
|
+
|
|
3698
|
+
.tab-group {
|
|
3699
|
+
display: flex;
|
|
3700
|
+
align-items: center;
|
|
3701
|
+
}
|
|
3702
|
+
|
|
3703
|
+
.tab {
|
|
3704
|
+
--_op-tab-font-small: var(--op-font-x-small);
|
|
3705
|
+
--_op-tab-font-large: var(--op-font-small);
|
|
3706
|
+
--_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
|
|
3707
|
+
--_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
|
|
3708
|
+
--_op-tab-indicator-width-small: var(--op-border-width-large);
|
|
3709
|
+
--_op-tab-indicator-width-large: var(--op-border-width-x-large);
|
|
3710
|
+
--_op-tab-disabled-opacity: var(--op-opacity-disabled);
|
|
3711
|
+
--__op-tab-font-size: var(--_op-tab-font-large);
|
|
3712
|
+
--__op-tab-padding: var(--_op-tab-padding-large);
|
|
3713
|
+
--__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
|
|
3714
|
+
--__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;
|
|
3715
|
+
padding: var(--__op-tab-padding);
|
|
3716
|
+
background-color: var(--op-color-background);
|
|
3717
|
+
color: var(--op-color-on-background);
|
|
3718
|
+
font-size: var(--__op-tab-font-size);
|
|
3719
|
+
text-decoration: none;
|
|
3720
|
+
}
|
|
3721
|
+
.tab--active.tab {
|
|
3722
|
+
box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
|
|
3723
|
+
}
|
|
3724
|
+
.tab:focus, .tab:focus-within, .tab:focus-visible {
|
|
3725
|
+
outline: none;
|
|
3726
|
+
}
|
|
3727
|
+
.tab:focus-visible:not(.tab--disabled) {
|
|
3728
|
+
z-index: 1;
|
|
3729
|
+
box-shadow: var(--op-input-focus-primary);
|
|
3730
|
+
}
|
|
3731
|
+
.tab:focus-visible:not(.tab--disabled).tab--active {
|
|
3732
|
+
box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one), var(--op-input-focus-primary);
|
|
3733
|
+
}
|
|
3734
|
+
.tab--disabled.tab {
|
|
3735
|
+
opacity: var(--_op-tab-disabled-opacity);
|
|
3736
|
+
pointer-events: none;
|
|
3737
|
+
}
|
|
3738
|
+
.tab:hover {
|
|
3739
|
+
background-color: var(--op-color-primary-plus-seven);
|
|
3740
|
+
box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
|
|
3741
|
+
color: var(--op-color-primary-on-plus-seven);
|
|
3742
|
+
}
|
|
3743
|
+
.tab--small.tab {
|
|
3744
|
+
--__op-tab-padding: var(--_op-tab-padding-small);
|
|
3745
|
+
--__op-tab-font-size: var(--_op-tab-font-small);
|
|
3746
|
+
--__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
|
|
3747
|
+
}
|
|
3748
|
+
.tab--large.tab {
|
|
3749
|
+
--__op-tab-padding: var(--_op-tab-padding-large);
|
|
3750
|
+
--__op-tab-font-size: var(--_op-tab-font-large);
|
|
3751
|
+
--__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
|
|
3752
|
+
}
|
|
3753
|
+
|
|
3497
3754
|
.table-container, .table-danger, .table-primary, .table {
|
|
3498
|
-
--_op-table-cell-height-default: calc(var(--op-
|
|
3499
|
-
--_op-table-cell-height-comfortable: calc(var(--op-
|
|
3500
|
-
--_op-table-cell-height-compact: calc(var(--op-
|
|
3755
|
+
--_op-table-cell-height-default: calc(11 * var(--op-size-unit));
|
|
3756
|
+
--_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit));
|
|
3757
|
+
--_op-table-cell-height-compact: calc(8 * var(--op-size-unit));
|
|
3501
3758
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
3502
3759
|
width: 100%;
|
|
3503
3760
|
border-radius: var(--op-radius-medium);
|
|
@@ -3588,8 +3845,138 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3588
3845
|
overflow-y: auto;
|
|
3589
3846
|
}
|
|
3590
3847
|
|
|
3848
|
+
.tag-notice, .tag-info, .tag-warning, .tag-danger, .tag-primary, .tag-readonly {
|
|
3849
|
+
display: inline-flex;
|
|
3850
|
+
align-items: center;
|
|
3851
|
+
justify-content: center;
|
|
3852
|
+
padding: var(--op-space-2x-small);
|
|
3853
|
+
border-radius: var(--op-radius-pill);
|
|
3854
|
+
background-color: var(--op-color-neutral-plus-four);
|
|
3855
|
+
color: var(--op-color-neutral-on-plus-four);
|
|
3856
|
+
font-size: var(--op-font-x-small);
|
|
3857
|
+
font-weight: var(--op-font-weight-bold);
|
|
3858
|
+
letter-spacing: var(--op-letter-spacing-label);
|
|
3859
|
+
line-height: var(--op-line-height-dense);
|
|
3860
|
+
user-select: none;
|
|
3861
|
+
white-space: nowrap;
|
|
3862
|
+
}
|
|
3863
|
+
.tag-notice .tag__label, .tag-info .tag__label, .tag-warning .tag__label, .tag-danger .tag__label, .tag-primary .tag__label, .tag-readonly .tag__label {
|
|
3864
|
+
padding-inline: var(--op-space-2x-small);
|
|
3865
|
+
}
|
|
3866
|
+
.tag-notice .btn--icon, .tag-info .btn--icon, .tag-warning .btn--icon, .tag-danger .btn--icon, .tag-primary .btn--icon, .tag-readonly .btn--icon {
|
|
3867
|
+
--__op-btn-height: var(--op-font-medium);
|
|
3868
|
+
}
|
|
3869
|
+
.tag-notice .btn--icon:hover, .tag-info .btn--icon:hover, .tag-warning .btn--icon:hover, .tag-danger .btn--icon:hover, .tag-primary .btn--icon:hover, .tag-readonly .btn--icon:hover {
|
|
3870
|
+
background-color: var(--op-color-neutral-minus-three);
|
|
3871
|
+
box-shadow: none;
|
|
3872
|
+
color: var(--op-color-neutral-on-minus-three);
|
|
3873
|
+
}
|
|
3874
|
+
.tag-notice .btn--icon:focus-visible, .tag-info .btn--icon:focus-visible, .tag-warning .btn--icon:focus-visible, .tag-danger .btn--icon:focus-visible, .tag-primary .btn--icon:focus-visible, .tag-readonly .btn--icon:focus-visible {
|
|
3875
|
+
background-color: var(--op-color-neutral-base);
|
|
3876
|
+
box-shadow: var(--op-input-focus-neutral);
|
|
3877
|
+
color: var(--op-color-neutral-on-base);
|
|
3878
|
+
}
|
|
3879
|
+
|
|
3880
|
+
.tag-primary {
|
|
3881
|
+
background-color: var(--op-color-primary-base);
|
|
3882
|
+
color: var(--op-color-primary-on-base);
|
|
3883
|
+
}
|
|
3884
|
+
.tag-primary .btn--icon {
|
|
3885
|
+
color: var(--op-color-primary-on-base);
|
|
3886
|
+
}
|
|
3887
|
+
.tag-primary .btn--icon:hover {
|
|
3888
|
+
background-color: var(--op-color-primary-minus-three);
|
|
3889
|
+
box-shadow: none;
|
|
3890
|
+
color: var(--op-color-primary-on-minus-three);
|
|
3891
|
+
}
|
|
3892
|
+
.tag-primary .btn--icon:focus-visible {
|
|
3893
|
+
background-color: var(--op-color-primary-base);
|
|
3894
|
+
box-shadow: var(--op-input-focus-primary);
|
|
3895
|
+
color: var(--op-color-primary-on-base);
|
|
3896
|
+
}
|
|
3897
|
+
|
|
3898
|
+
.tag-danger {
|
|
3899
|
+
background-color: var(--op-color-alerts-danger-base);
|
|
3900
|
+
color: var(--op-color-alerts-danger-on-base);
|
|
3901
|
+
/* stylelint-disable no-descending-specificity */
|
|
3902
|
+
/* stylelint-enable no-descending-specificity */
|
|
3903
|
+
}
|
|
3904
|
+
.tag-danger .btn--icon {
|
|
3905
|
+
color: var(--op-color-alerts-danger-on-base);
|
|
3906
|
+
}
|
|
3907
|
+
.tag-danger .btn--icon:hover {
|
|
3908
|
+
background-color: var(--op-color-alerts-danger-minus-three);
|
|
3909
|
+
box-shadow: none;
|
|
3910
|
+
color: var(--op-color-alerts-danger-on-minus-three);
|
|
3911
|
+
}
|
|
3912
|
+
.tag-danger .btn--icon:focus-visible {
|
|
3913
|
+
background-color: var(--op-color-alerts-danger-base);
|
|
3914
|
+
box-shadow: var(--op-input-focus-danger);
|
|
3915
|
+
color: var(--op-color-alerts-danger-on-base);
|
|
3916
|
+
}
|
|
3917
|
+
|
|
3918
|
+
.tag-warning {
|
|
3919
|
+
background-color: var(--op-color-alerts-warning-base);
|
|
3920
|
+
color: var(--op-color-alerts-warning-on-base);
|
|
3921
|
+
/* stylelint-disable no-descending-specificity */
|
|
3922
|
+
/* stylelint-enable no-descending-specificity */
|
|
3923
|
+
}
|
|
3924
|
+
.tag-warning .btn--icon {
|
|
3925
|
+
color: var(--op-color-alerts-warning-on-base);
|
|
3926
|
+
}
|
|
3927
|
+
.tag-warning .btn--icon:hover {
|
|
3928
|
+
background-color: var(--op-color-alerts-warning-minus-three);
|
|
3929
|
+
box-shadow: none;
|
|
3930
|
+
color: var(--op-color-alerts-warning-on-minus-three);
|
|
3931
|
+
}
|
|
3932
|
+
.tag-warning .btn--icon:focus-visible {
|
|
3933
|
+
background-color: var(--op-color-alerts-warning-base);
|
|
3934
|
+
box-shadow: var(--op-input-focus-warning);
|
|
3935
|
+
color: var(--op-color-alerts-warning-on-base);
|
|
3936
|
+
}
|
|
3937
|
+
|
|
3938
|
+
.tag-info {
|
|
3939
|
+
background-color: var(--op-color-alerts-info-base);
|
|
3940
|
+
color: var(--op-color-alerts-info-on-base);
|
|
3941
|
+
/* stylelint-disable no-descending-specificity */
|
|
3942
|
+
/* stylelint-enable no-descending-specificity */
|
|
3943
|
+
}
|
|
3944
|
+
.tag-info .btn--icon {
|
|
3945
|
+
color: var(--op-color-alerts-info-on-base);
|
|
3946
|
+
}
|
|
3947
|
+
.tag-info .btn--icon:hover {
|
|
3948
|
+
background-color: var(--op-color-alerts-info-minus-three);
|
|
3949
|
+
box-shadow: none;
|
|
3950
|
+
color: var(--op-color-alerts-info-on-minus-three);
|
|
3951
|
+
}
|
|
3952
|
+
.tag-info .btn--icon:focus-visible {
|
|
3953
|
+
background-color: var(--op-color-alerts-info-base);
|
|
3954
|
+
box-shadow: var(--op-input-focus-info);
|
|
3955
|
+
color: var(--op-color-alerts-info-on-base);
|
|
3956
|
+
}
|
|
3957
|
+
|
|
3958
|
+
.tag-notice {
|
|
3959
|
+
background-color: var(--op-color-alerts-notice-base);
|
|
3960
|
+
color: var(--op-color-alerts-notice-on-base);
|
|
3961
|
+
/* stylelint-disable no-descending-specificity */
|
|
3962
|
+
/* stylelint-enable no-descending-specificity */
|
|
3963
|
+
}
|
|
3964
|
+
.tag-notice .btn--icon {
|
|
3965
|
+
color: var(--op-color-alerts-notice-on-base);
|
|
3966
|
+
}
|
|
3967
|
+
.tag-notice .btn--icon:hover {
|
|
3968
|
+
background-color: var(--op-color-alerts-notice-minus-three);
|
|
3969
|
+
box-shadow: none;
|
|
3970
|
+
color: var(--op-color-alerts-notice-on-minus-three);
|
|
3971
|
+
}
|
|
3972
|
+
.tag-notice .btn--icon:focus-visible {
|
|
3973
|
+
background-color: var(--op-color-alerts-notice-base);
|
|
3974
|
+
box-shadow: var(--op-input-focus-notice);
|
|
3975
|
+
color: var(--op-color-alerts-notice-on-base);
|
|
3976
|
+
}
|
|
3977
|
+
|
|
3591
3978
|
[data-tooltip-text] {
|
|
3592
|
-
--_op-tooltip-max-width: calc(
|
|
3979
|
+
--_op-tooltip-max-width: calc(50 * var(--op-size-unit));
|
|
3593
3980
|
--_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
|
|
3594
3981
|
--_op-tooltip-background-color: var(--op-color-neutral-minus-max);
|
|
3595
3982
|
--_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
|
|
@@ -3600,7 +3987,7 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3600
3987
|
position: relative;
|
|
3601
3988
|
}
|
|
3602
3989
|
[data-tooltip-text]::before, [data-tooltip-text]::after {
|
|
3603
|
-
opacity:
|
|
3990
|
+
opacity: var(--op-opacity-none);
|
|
3604
3991
|
transition: var(--op-transition-tooltip);
|
|
3605
3992
|
visibility: hidden;
|
|
3606
3993
|
}
|
|
@@ -3630,7 +4017,7 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3630
4017
|
pointer-events: none;
|
|
3631
4018
|
}
|
|
3632
4019
|
[data-tooltip-text]:hover::before, [data-tooltip-text]:hover::after {
|
|
3633
|
-
opacity:
|
|
4020
|
+
opacity: var(--op-opacity-full);
|
|
3634
4021
|
visibility: visible;
|
|
3635
4022
|
}
|
|
3636
4023
|
[data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::before, [data-tooltip-text]:not([data-tooltip-position])::after {
|