@rolemodel/optics 0.4.2 → 0.5.1
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 +688 -233
- package/dist/css/optics.css.map +1 -1
- package/dist/scss/components/accordion.scss +7 -1
- package/dist/scss/components/avatar.scss +7 -6
- package/dist/scss/components/breadcrumbs.scss +41 -0
- 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 +48 -2
- package/dist/scss/components/icon.scss +4 -1
- package/dist/scss/components/index.scss +8 -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 +111 -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/text_pair.scss +59 -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 +64 -3
- 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
|
*/
|
|
@@ -221,6 +236,7 @@ select {
|
|
|
221
236
|
--op-transition-sidebar: all 200ms ease-in-out;
|
|
222
237
|
--op-transition-modal: all 300ms ease-in;
|
|
223
238
|
--op-transition-panel: right 400ms ease-in;
|
|
239
|
+
--op-transition-tooltip: all 300ms ease-in 300ms;
|
|
224
240
|
/**
|
|
225
241
|
* @tokens Animation
|
|
226
242
|
* @presenter Animation
|
|
@@ -229,8 +245,13 @@ select {
|
|
|
229
245
|
/**
|
|
230
246
|
* @tokens Encoded Images
|
|
231
247
|
*/
|
|
232
|
-
--op-encoded-images-dropdown-arrow-width: var(--op-space-scale-unit);
|
|
233
|
-
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml
|
|
248
|
+
--op-encoded-images-dropdown-arrow-width: calc(1.2 * var(--op-space-scale-unit));
|
|
249
|
+
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==");
|
|
250
|
+
/**
|
|
251
|
+
* @tokens Size Scale
|
|
252
|
+
* @presenter Spacing
|
|
253
|
+
*/
|
|
254
|
+
--op-size-unit: 0.4rem;
|
|
234
255
|
/**
|
|
235
256
|
* @tokens Space Scale
|
|
236
257
|
* @presenter Spacing
|
|
@@ -283,10 +304,16 @@ select {
|
|
|
283
304
|
--op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
|
|
284
305
|
--op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
|
|
285
306
|
var(--op-input-outer-focus) var(--op-color-primary-plus-five);
|
|
307
|
+
--op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
|
|
308
|
+
var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
|
|
286
309
|
--op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
|
|
287
310
|
var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
|
|
288
311
|
--op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
|
|
289
312
|
var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
|
|
313
|
+
--op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
|
|
314
|
+
var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
|
|
315
|
+
--op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
|
|
316
|
+
var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
|
|
290
317
|
}
|
|
291
318
|
|
|
292
319
|
@keyframes rm-slide-in-out-flash {
|
|
@@ -432,9 +459,7 @@ select {
|
|
|
432
459
|
* @tokens Alerts Warning Colors
|
|
433
460
|
* @presenter Color
|
|
434
461
|
*/
|
|
435
|
-
--op-color-alerts-warning-original: hsl(
|
|
436
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l)
|
|
437
|
-
);
|
|
462
|
+
--op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
|
|
438
463
|
--op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
439
464
|
--op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
|
|
440
465
|
--op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -457,25 +482,17 @@ select {
|
|
|
457
482
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
458
483
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
459
484
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
460
|
-
--op-color-alerts-warning-on-plus-eight-alt: hsl(
|
|
461
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
462
|
-
);
|
|
485
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
463
486
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
464
|
-
--op-color-alerts-warning-on-plus-seven-alt: hsl(
|
|
465
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%
|
|
466
|
-
);
|
|
487
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
|
|
467
488
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
|
|
468
489
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
469
490
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
470
|
-
--op-color-alerts-warning-on-plus-five-alt: hsl(
|
|
471
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%
|
|
472
|
-
);
|
|
491
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%);
|
|
473
492
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
474
493
|
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
475
494
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
476
|
-
--op-color-alerts-warning-on-plus-three-alt: hsl(
|
|
477
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%
|
|
478
|
-
);
|
|
495
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
479
496
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
|
|
480
497
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
481
498
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
@@ -483,48 +500,28 @@ select {
|
|
|
483
500
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
484
501
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
485
502
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
486
|
-
--op-color-alerts-warning-on-minus-one-alt: hsl(
|
|
487
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%
|
|
488
|
-
);
|
|
503
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
489
504
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
490
|
-
--op-color-alerts-warning-on-minus-two-alt: hsl(
|
|
491
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%
|
|
492
|
-
);
|
|
505
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
|
|
493
506
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
|
|
494
|
-
--op-color-alerts-warning-on-minus-three-alt: hsl(
|
|
495
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%
|
|
496
|
-
);
|
|
507
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
497
508
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
498
|
-
--op-color-alerts-warning-on-minus-four-alt: hsl(
|
|
499
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%
|
|
500
|
-
);
|
|
509
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
|
|
501
510
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
502
|
-
--op-color-alerts-warning-on-minus-five-alt: hsl(
|
|
503
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%
|
|
504
|
-
);
|
|
511
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
|
|
505
512
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
|
|
506
|
-
--op-color-alerts-warning-on-minus-six-alt: hsl(
|
|
507
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%
|
|
508
|
-
);
|
|
513
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%);
|
|
509
514
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
510
|
-
--op-color-alerts-warning-on-minus-seven-alt: hsl(
|
|
511
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%
|
|
512
|
-
);
|
|
515
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
|
|
513
516
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
|
|
514
|
-
--op-color-alerts-warning-on-minus-eight-alt: hsl(
|
|
515
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%
|
|
516
|
-
);
|
|
517
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%);
|
|
517
518
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
|
|
518
|
-
--op-color-alerts-warning-on-minus-max-alt: hsl(
|
|
519
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%
|
|
520
|
-
);
|
|
519
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
521
520
|
/**
|
|
522
521
|
* @tokens Alerts Danger Colors
|
|
523
522
|
* @presenter Color
|
|
524
523
|
*/
|
|
525
|
-
--op-color-alerts-danger-original: hsl(
|
|
526
|
-
var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l)
|
|
527
|
-
);
|
|
524
|
+
--op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
|
|
528
525
|
--op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
|
|
529
526
|
--op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
|
|
530
527
|
--op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
|
|
@@ -586,9 +583,7 @@ select {
|
|
|
586
583
|
* @tokens Alerts Info Colors
|
|
587
584
|
* @presenter Color
|
|
588
585
|
*/
|
|
589
|
-
--op-color-alerts-info-original: hsl(
|
|
590
|
-
var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l)
|
|
591
|
-
);
|
|
586
|
+
--op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
|
|
592
587
|
--op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
|
|
593
588
|
--op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
|
|
594
589
|
--op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
|
|
@@ -650,9 +645,7 @@ select {
|
|
|
650
645
|
* @tokens Alerts Notice Colors
|
|
651
646
|
* @presenter Color
|
|
652
647
|
*/
|
|
653
|
-
--op-color-alerts-notice-original: hsl(
|
|
654
|
-
var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l)
|
|
655
|
-
);
|
|
648
|
+
--op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
|
|
656
649
|
--op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
|
|
657
650
|
--op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
|
|
658
651
|
--op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
|
|
@@ -716,6 +709,7 @@ select {
|
|
|
716
709
|
*/
|
|
717
710
|
--op-color-background: var(--op-color-neutral-plus-eight);
|
|
718
711
|
--op-color-on-background: var(--op-color-neutral-on-plus-eight);
|
|
712
|
+
--op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
|
|
719
713
|
}
|
|
720
714
|
|
|
721
715
|
@media (prefers-color-scheme: dark) {
|
|
@@ -868,27 +862,17 @@ select {
|
|
|
868
862
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
869
863
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
|
|
870
864
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
871
|
-
--op-color-alerts-warning-on-plus-eight-alt: hsl(
|
|
872
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
873
|
-
);
|
|
865
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
874
866
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
875
|
-
--op-color-alerts-warning-on-plus-seven-alt: hsl(
|
|
876
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
877
|
-
);
|
|
867
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
878
868
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
879
869
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
880
870
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
881
|
-
--op-color-alerts-warning-on-plus-five-alt: hsl(
|
|
882
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%
|
|
883
|
-
);
|
|
871
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
884
872
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
885
|
-
--op-color-alerts-warning-on-plus-four-alt: hsl(
|
|
886
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
887
|
-
);
|
|
873
|
+
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
888
874
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
889
|
-
--op-color-alerts-warning-on-plus-three-alt: hsl(
|
|
890
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
891
|
-
);
|
|
875
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
892
876
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
893
877
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
894
878
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -896,41 +880,23 @@ select {
|
|
|
896
880
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
897
881
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
898
882
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
899
|
-
--op-color-alerts-warning-on-minus-one-alt: hsl(
|
|
900
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
901
|
-
);
|
|
883
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
902
884
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
903
|
-
--op-color-alerts-warning-on-minus-two-alt: hsl(
|
|
904
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%
|
|
905
|
-
);
|
|
885
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
|
|
906
886
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
907
|
-
--op-color-alerts-warning-on-minus-three-alt: hsl(
|
|
908
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
909
|
-
);
|
|
887
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
910
888
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
911
|
-
--op-color-alerts-warning-on-minus-four-alt: hsl(
|
|
912
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
913
|
-
);
|
|
889
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
914
890
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
915
|
-
--op-color-alerts-warning-on-minus-five-alt: hsl(
|
|
916
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%
|
|
917
|
-
);
|
|
891
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
|
|
918
892
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
919
|
-
--op-color-alerts-warning-on-minus-six-alt: hsl(
|
|
920
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%
|
|
921
|
-
);
|
|
893
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
|
|
922
894
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
923
|
-
--op-color-alerts-warning-on-minus-seven-alt: hsl(
|
|
924
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
925
|
-
);
|
|
895
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
926
896
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
927
|
-
--op-color-alerts-warning-on-minus-eight-alt: hsl(
|
|
928
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%
|
|
929
|
-
);
|
|
897
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
930
898
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
931
|
-
--op-color-alerts-warning-on-minus-max-alt: hsl(
|
|
932
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
933
|
-
);
|
|
899
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
934
900
|
/**
|
|
935
901
|
* @tokens Alerts Danger Dark Colors
|
|
936
902
|
* @presenter Color
|
|
@@ -1123,6 +1089,7 @@ select {
|
|
|
1123
1089
|
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
|
|
1124
1090
|
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
|
|
1125
1091
|
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
|
|
1092
|
+
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
|
|
1126
1093
|
}
|
|
1127
1094
|
}
|
|
1128
1095
|
:root[data-theme-mode=dark] {
|
|
@@ -1274,27 +1241,17 @@ select {
|
|
|
1274
1241
|
--op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1275
1242
|
--op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
|
|
1276
1243
|
--op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
1277
|
-
--op-color-alerts-warning-on-plus-eight-alt: hsl(
|
|
1278
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
1279
|
-
);
|
|
1244
|
+
--op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1280
1245
|
--op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
1281
|
-
--op-color-alerts-warning-on-plus-seven-alt: hsl(
|
|
1282
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
1283
|
-
);
|
|
1246
|
+
--op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
1284
1247
|
--op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
1285
1248
|
--op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
1286
1249
|
--op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
|
|
1287
|
-
--op-color-alerts-warning-on-plus-five-alt: hsl(
|
|
1288
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%
|
|
1289
|
-
);
|
|
1250
|
+
--op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
|
|
1290
1251
|
--op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
|
|
1291
|
-
--op-color-alerts-warning-on-plus-four-alt: hsl(
|
|
1292
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
|
|
1293
|
-
);
|
|
1252
|
+
--op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
|
|
1294
1253
|
--op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
1295
|
-
--op-color-alerts-warning-on-plus-three-alt: hsl(
|
|
1296
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
1297
|
-
);
|
|
1254
|
+
--op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1298
1255
|
--op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
|
|
1299
1256
|
--op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1300
1257
|
--op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
|
|
@@ -1302,41 +1259,23 @@ select {
|
|
|
1302
1259
|
--op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1303
1260
|
--op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
|
|
1304
1261
|
--op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1305
|
-
--op-color-alerts-warning-on-minus-one-alt: hsl(
|
|
1306
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
|
|
1307
|
-
);
|
|
1262
|
+
--op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
|
|
1308
1263
|
--op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1309
|
-
--op-color-alerts-warning-on-minus-two-alt: hsl(
|
|
1310
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%
|
|
1311
|
-
);
|
|
1264
|
+
--op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
|
|
1312
1265
|
--op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
|
|
1313
|
-
--op-color-alerts-warning-on-minus-three-alt: hsl(
|
|
1314
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
1315
|
-
);
|
|
1266
|
+
--op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
1316
1267
|
--op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
|
|
1317
|
-
--op-color-alerts-warning-on-minus-four-alt: hsl(
|
|
1318
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
|
|
1319
|
-
);
|
|
1268
|
+
--op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
|
|
1320
1269
|
--op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
1321
|
-
--op-color-alerts-warning-on-minus-five-alt: hsl(
|
|
1322
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%
|
|
1323
|
-
);
|
|
1270
|
+
--op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
|
|
1324
1271
|
--op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
|
|
1325
|
-
--op-color-alerts-warning-on-minus-six-alt: hsl(
|
|
1326
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%
|
|
1327
|
-
);
|
|
1272
|
+
--op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
|
|
1328
1273
|
--op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
|
|
1329
|
-
--op-color-alerts-warning-on-minus-seven-alt: hsl(
|
|
1330
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
1331
|
-
);
|
|
1274
|
+
--op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
1332
1275
|
--op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
|
|
1333
|
-
--op-color-alerts-warning-on-minus-eight-alt: hsl(
|
|
1334
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%
|
|
1335
|
-
);
|
|
1276
|
+
--op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
|
|
1336
1277
|
--op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
|
|
1337
|
-
--op-color-alerts-warning-on-minus-max-alt: hsl(
|
|
1338
|
-
var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
|
|
1339
|
-
);
|
|
1278
|
+
--op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
|
|
1340
1279
|
/**
|
|
1341
1280
|
* @tokens Alerts Danger Dark Colors
|
|
1342
1281
|
* @presenter Color
|
|
@@ -1529,6 +1468,7 @@ select {
|
|
|
1529
1468
|
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
|
|
1530
1469
|
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
|
|
1531
1470
|
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
|
|
1471
|
+
--op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
|
|
1532
1472
|
}
|
|
1533
1473
|
|
|
1534
1474
|
html {
|
|
@@ -1647,12 +1587,19 @@ small {
|
|
|
1647
1587
|
|
|
1648
1588
|
.app__content {
|
|
1649
1589
|
width: 100%;
|
|
1650
|
-
max-width:
|
|
1590
|
+
max-width: var(--op-breakpoint-medium);
|
|
1651
1591
|
flex-grow: 1;
|
|
1652
1592
|
padding: 0 var(--op-space-large);
|
|
1653
1593
|
margin: 0 auto;
|
|
1654
1594
|
}
|
|
1655
1595
|
|
|
1596
|
+
.app__content-no-margin {
|
|
1597
|
+
width: 100%;
|
|
1598
|
+
flex-grow: 1;
|
|
1599
|
+
padding: 0 var(--op-space-large);
|
|
1600
|
+
overflow-y: auto;
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1656
1603
|
.app__footer {
|
|
1657
1604
|
position: sticky;
|
|
1658
1605
|
z-index: var(--op-z-index-footer);
|
|
@@ -1663,13 +1610,13 @@ small {
|
|
|
1663
1610
|
|
|
1664
1611
|
.container {
|
|
1665
1612
|
width: 100%;
|
|
1666
|
-
max-width:
|
|
1613
|
+
max-width: var(--op-breakpoint-medium);
|
|
1667
1614
|
padding: 0 var(--op-space-large);
|
|
1668
1615
|
margin: 0 auto;
|
|
1669
1616
|
}
|
|
1670
1617
|
|
|
1671
1618
|
.container--sm {
|
|
1672
|
-
max-width:
|
|
1619
|
+
max-width: var(--op-breakpoint-small);
|
|
1673
1620
|
}
|
|
1674
1621
|
|
|
1675
1622
|
.container--md-padding {
|
|
@@ -1681,7 +1628,7 @@ small {
|
|
|
1681
1628
|
}
|
|
1682
1629
|
|
|
1683
1630
|
.container--xs {
|
|
1684
|
-
max-width:
|
|
1631
|
+
max-width: var(--op-breakpoint-x-small);
|
|
1685
1632
|
}
|
|
1686
1633
|
|
|
1687
1634
|
.full-width {
|
|
@@ -2098,8 +2045,17 @@ small {
|
|
|
2098
2045
|
}
|
|
2099
2046
|
}
|
|
2100
2047
|
|
|
2048
|
+
.sr-only {
|
|
2049
|
+
position: absolute !important;
|
|
2050
|
+
overflow: hidden;
|
|
2051
|
+
width: 1px;
|
|
2052
|
+
height: 1px;
|
|
2053
|
+
clip: rect(1px 1px 1px 1px);
|
|
2054
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
2055
|
+
}
|
|
2056
|
+
|
|
2101
2057
|
.accordion {
|
|
2102
|
-
--_op-accordion-summary-min-height: calc(
|
|
2058
|
+
--_op-accordion-summary-min-height: calc(8 * var(--op-size-unit));
|
|
2103
2059
|
}
|
|
2104
2060
|
.accordion summary {
|
|
2105
2061
|
display: grid;
|
|
@@ -2109,6 +2065,10 @@ small {
|
|
|
2109
2065
|
gap: var(--op-space-2x-small);
|
|
2110
2066
|
grid-template-columns: auto 1fr auto;
|
|
2111
2067
|
}
|
|
2068
|
+
.accordion summary::marker, .accordion summary::-webkit-details-marker {
|
|
2069
|
+
display: none;
|
|
2070
|
+
content: "";
|
|
2071
|
+
}
|
|
2112
2072
|
.accordion summary .accordion__label {
|
|
2113
2073
|
color: var(--op-color-neutral-on-plus-max);
|
|
2114
2074
|
font-size: var(--op-font-x-small);
|
|
@@ -2282,11 +2242,11 @@ small {
|
|
|
2282
2242
|
--_op-avatar-outer-border-color: var(--op-color-neutral-base);
|
|
2283
2243
|
--_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
|
|
2284
2244
|
--_op-avatar-outer-border-width: var(--op-border-width-large);
|
|
2285
|
-
--_op-avatar-disabled-opacity:
|
|
2286
|
-
--_op-avatar-hover-opacity:
|
|
2287
|
-
--_op-avatar-size-small:
|
|
2288
|
-
--_op-avatar-size-medium:
|
|
2289
|
-
--_op-avatar-size-large:
|
|
2245
|
+
--_op-avatar-disabled-opacity: var(--op-opacity-disabled);
|
|
2246
|
+
--_op-avatar-hover-opacity: var(--op-opacity-overlay);
|
|
2247
|
+
--_op-avatar-size-small: calc(8 * var(--op-size-unit));
|
|
2248
|
+
--_op-avatar-size-medium: calc(10 * var(--op-size-unit));
|
|
2249
|
+
--_op-avatar-size-large: calc(14 * var(--op-size-unit));
|
|
2290
2250
|
--__op-avatar-size: var(--_op-avatar-size-large);
|
|
2291
2251
|
position: relative;
|
|
2292
2252
|
z-index: 1;
|
|
@@ -2410,7 +2370,34 @@ small {
|
|
|
2410
2370
|
color: var(--op-color-alerts-notice-on-base);
|
|
2411
2371
|
}
|
|
2412
2372
|
|
|
2413
|
-
.
|
|
2373
|
+
.breadcrumbs {
|
|
2374
|
+
--_op-breadcrumbs-font-size-small: var(--op-font-x-small);
|
|
2375
|
+
--_op-breadcrumbs-font-size-large: var(--op-font-small);
|
|
2376
|
+
--__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
|
|
2377
|
+
display: flex;
|
|
2378
|
+
flex-wrap: wrap;
|
|
2379
|
+
align-items: baseline;
|
|
2380
|
+
gap: var(--op-space-x-small);
|
|
2381
|
+
}
|
|
2382
|
+
.breadcrumbs .breadcrumbs__link {
|
|
2383
|
+
font-size: var(--__op-breadcrumbs-font-size);
|
|
2384
|
+
text-decoration: none;
|
|
2385
|
+
}
|
|
2386
|
+
.breadcrumbs .breadcrumbs__link:hover {
|
|
2387
|
+
text-decoration: underline;
|
|
2388
|
+
}
|
|
2389
|
+
.breadcrumbs .breadcrumbs__text {
|
|
2390
|
+
font-size: var(--__op-breadcrumbs-font-size);
|
|
2391
|
+
font-weight: var(--op-font-weight-bold);
|
|
2392
|
+
}
|
|
2393
|
+
.breadcrumbs--small.breadcrumbs {
|
|
2394
|
+
--__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
|
|
2395
|
+
}
|
|
2396
|
+
.breadcrumbs--large.breadcrumbs {
|
|
2397
|
+
--__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
|
|
2398
|
+
}
|
|
2399
|
+
|
|
2400
|
+
.form-control[type=file]::file-selector-button, .btn-warning, .btn-delete, .btn-primary, .btn {
|
|
2414
2401
|
--_op-btn-height-small: var(--op-input-height-small);
|
|
2415
2402
|
--_op-btn-height-medium: var(--op-input-height-medium);
|
|
2416
2403
|
--_op-btn-height-large: var(--op-input-height-large);
|
|
@@ -2439,52 +2426,52 @@ small {
|
|
|
2439
2426
|
transition: var(--op-transition-input);
|
|
2440
2427
|
white-space: nowrap;
|
|
2441
2428
|
}
|
|
2442
|
-
.btn--pill.btn-warning, .btn--pill.btn-delete, .btn--pill.btn-primary, .btn--pill.btn {
|
|
2429
|
+
.btn--pill.form-control[type=file]::file-selector-button, .btn--pill.btn-warning, .btn--pill.btn-delete, .btn--pill.btn-primary, .btn--pill.btn {
|
|
2443
2430
|
border-radius: var(--op-radius-pill);
|
|
2444
2431
|
}
|
|
2445
|
-
.btn--icon.btn-warning, .btn--icon.btn-delete, .btn--icon.btn-primary, .btn--icon.btn {
|
|
2432
|
+
.btn--icon.form-control[type=file]::file-selector-button, .btn--icon.btn-warning, .btn--icon.btn-delete, .btn--icon.btn-primary, .btn--icon.btn {
|
|
2446
2433
|
width: var(--__op-btn-height);
|
|
2447
2434
|
min-width: var(--__op-btn-height);
|
|
2448
2435
|
padding: 0;
|
|
2449
2436
|
}
|
|
2450
|
-
.btn--icon-with-label.btn-warning, .btn--icon-with-label.btn-delete, .btn--icon-with-label.btn-primary, .btn--icon-with-label.btn {
|
|
2437
|
+
.btn--icon-with-label.form-control[type=file]::file-selector-button, .btn--icon-with-label.btn-warning, .btn--icon-with-label.btn-delete, .btn--icon-with-label.btn-primary, .btn--icon-with-label.btn {
|
|
2451
2438
|
flex-direction: column;
|
|
2452
2439
|
padding: var(--op-space-small);
|
|
2453
2440
|
gap: var(--op-space-3x-small);
|
|
2454
2441
|
}
|
|
2455
|
-
.btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn {
|
|
2442
|
+
.btn--small.form-control[type=file]::file-selector-button, .btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn {
|
|
2456
2443
|
--__op-btn-height: var(--_op-btn-height-small);
|
|
2457
2444
|
--__op-btn-font-size: var(--_op-btn-font-small);
|
|
2458
2445
|
--__op-btn-padding: var(--_op-btn-padding-small);
|
|
2459
2446
|
}
|
|
2460
|
-
.btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn {
|
|
2447
|
+
.btn--medium.form-control[type=file]::file-selector-button, .btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn {
|
|
2461
2448
|
--__op-btn-height: var(--_op-btn-height-medium);
|
|
2462
2449
|
--__op-btn-font-size: var(--_op-btn-font-medium);
|
|
2463
2450
|
--__op-btn-padding: var(--_op-btn-padding-medium);
|
|
2464
2451
|
}
|
|
2465
|
-
.btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
|
|
2452
|
+
.btn--large.form-control[type=file]::file-selector-button, .btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
|
|
2466
2453
|
--__op-btn-height: var(--_op-btn-height-large);
|
|
2467
2454
|
--__op-btn-font-size: var(--_op-btn-font-large);
|
|
2468
2455
|
--__op-btn-padding: var(--_op-btn-padding-large);
|
|
2469
2456
|
}
|
|
2470
|
-
.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 {
|
|
2471
|
-
opacity:
|
|
2457
|
+
.btn--disabled.form-control[type=file]::file-selector-button, .btn--disabled.btn-warning, .btn--disabled.btn-delete, .btn--disabled.btn-primary, .btn--disabled.btn, .form-control[type=file]:disabled::file-selector-button, .btn-warning:disabled, .btn-delete:disabled, .btn-primary:disabled, .btn:disabled {
|
|
2458
|
+
opacity: var(--op-opacity-disabled);
|
|
2472
2459
|
pointer-events: none;
|
|
2473
2460
|
-webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
|
|
2474
2461
|
user-select: none;
|
|
2475
2462
|
}
|
|
2476
|
-
.btn--with-badge.btn-warning, .btn--with-badge.btn-delete, .btn--with-badge.btn-primary, .btn--with-badge.btn {
|
|
2463
|
+
.btn--with-badge.form-control[type=file]::file-selector-button, .btn--with-badge.btn-warning, .btn--with-badge.btn-delete, .btn--with-badge.btn-primary, .btn--with-badge.btn {
|
|
2477
2464
|
position: relative;
|
|
2478
2465
|
}
|
|
2479
|
-
.btn-warning:focus, .btn-delete:focus, .btn-primary:focus, .btn:focus, .btn-warning:focus-within, .btn-delete:focus-within, .btn-primary:focus-within, .btn:focus-within, .btn-warning:focus-visible, .btn-delete:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
|
|
2466
|
+
.form-control[type=file]:focus::file-selector-button, .btn-warning:focus, .btn-delete:focus, .btn-primary:focus, .btn:focus, .form-control[type=file]:focus-within::file-selector-button, .btn-warning:focus-within, .btn-delete:focus-within, .btn-primary:focus-within, .btn:focus-within, .form-control[type=file]:focus-visible::file-selector-button, .btn-warning:focus-visible, .btn-delete:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
|
|
2480
2467
|
outline: none;
|
|
2481
2468
|
}
|
|
2482
2469
|
@media (max-width: 768px) {
|
|
2483
|
-
.btn-warning, .btn-delete, .btn-primary, .btn {
|
|
2470
|
+
.form-control[type=file]::file-selector-button, .btn-warning, .btn-delete, .btn-primary, .btn {
|
|
2484
2471
|
--__op-btn-height: var(--_op-btn-height-large);
|
|
2485
2472
|
--__op-btn-font-size: var(--_op-btn-font-large);
|
|
2486
2473
|
}
|
|
2487
|
-
.btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
|
|
2474
|
+
.btn--small.form-control[type=file]::file-selector-button, .btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn, .btn--medium.form-control[type=file]::file-selector-button, .btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.form-control[type=file]::file-selector-button, .btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
|
|
2488
2475
|
--__op-btn-height: var(--_op-btn-height-large);
|
|
2489
2476
|
--__op-btn-font-size: var(--_op-btn-font-large);
|
|
2490
2477
|
--__op-btn-padding: var(--_op-btn-padding-large);
|
|
@@ -2614,26 +2601,6 @@ small {
|
|
|
2614
2601
|
box-shadow: var(--op-input-focus-warning);
|
|
2615
2602
|
color: var(--op-color-alerts-warning-on-base);
|
|
2616
2603
|
}
|
|
2617
|
-
.btn-warning.btn--no-border {
|
|
2618
|
-
background-color: transparent;
|
|
2619
|
-
box-shadow: none;
|
|
2620
|
-
color: var(--op-color-alerts-warning-on-plus-max);
|
|
2621
|
-
}
|
|
2622
|
-
.btn-warning.btn--no-border.btn--active {
|
|
2623
|
-
background-color: var(--op-color-alerts-warning-plus-five);
|
|
2624
|
-
box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
|
|
2625
|
-
color: var(--op-color-alerts-warning-on-plus-five);
|
|
2626
|
-
}
|
|
2627
|
-
.btn-warning.btn--no-border:hover {
|
|
2628
|
-
background-color: var(--op-color-alerts-warning-plus-eight);
|
|
2629
|
-
box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-five);
|
|
2630
|
-
color: var(--op-color-alerts-warning-on-plus-eight);
|
|
2631
|
-
}
|
|
2632
|
-
.btn-warning.btn--no-border:focus-visible {
|
|
2633
|
-
background-color: var(--op-color-alerts-warning-plus-eight);
|
|
2634
|
-
box-shadow: var(--op-input-focus-warning);
|
|
2635
|
-
color: var(--op-color-alerts-warning-on-plus-eight);
|
|
2636
|
-
}
|
|
2637
2604
|
|
|
2638
2605
|
.btn-group {
|
|
2639
2606
|
--op-btn-group-hover-z-index: 1;
|
|
@@ -2781,26 +2748,20 @@ small {
|
|
|
2781
2748
|
.confirm-dialog-wrapper {
|
|
2782
2749
|
position: fixed;
|
|
2783
2750
|
z-index: var(--op-z-index-dialog);
|
|
2784
|
-
top: 0;
|
|
2785
|
-
right: 0;
|
|
2786
|
-
bottom: 0;
|
|
2787
|
-
left: 0;
|
|
2788
2751
|
display: flex;
|
|
2789
2752
|
overflow: hidden;
|
|
2790
2753
|
align-items: center;
|
|
2791
2754
|
justify-content: center;
|
|
2755
|
+
inset: 0;
|
|
2792
2756
|
outline: 0;
|
|
2793
2757
|
visibility: hidden;
|
|
2794
2758
|
}
|
|
2795
2759
|
.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
|
|
2796
2760
|
position: fixed;
|
|
2797
2761
|
z-index: var(--op-z-index-dialog-backdrop);
|
|
2798
|
-
top: 0;
|
|
2799
|
-
right: 0;
|
|
2800
|
-
bottom: 0;
|
|
2801
|
-
left: 0;
|
|
2802
2762
|
background: var(--op-color-black);
|
|
2803
|
-
|
|
2763
|
+
inset: 0;
|
|
2764
|
+
opacity: var(--op-opacity-none);
|
|
2804
2765
|
transition: var(--op-transition-modal);
|
|
2805
2766
|
visibility: hidden;
|
|
2806
2767
|
}
|
|
@@ -2808,16 +2769,16 @@ small {
|
|
|
2808
2769
|
visibility: visible;
|
|
2809
2770
|
}
|
|
2810
2771
|
.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog {
|
|
2811
|
-
opacity:
|
|
2772
|
+
opacity: var(--op-opacity-full);
|
|
2812
2773
|
transform: scale(1);
|
|
2813
2774
|
}
|
|
2814
2775
|
.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
|
|
2815
|
-
opacity:
|
|
2776
|
+
opacity: var(--op-opacity-half);
|
|
2816
2777
|
visibility: visible;
|
|
2817
2778
|
}
|
|
2818
2779
|
|
|
2819
2780
|
.confirm-dialog {
|
|
2820
|
-
--_op-confirm-dialog-width:
|
|
2781
|
+
--_op-confirm-dialog-width: calc(100 * var(--op-size-unit));
|
|
2821
2782
|
z-index: var(--op-z-index-dialog-content);
|
|
2822
2783
|
width: var(--_op-confirm-dialog-width);
|
|
2823
2784
|
border-radius: var(--op-radius-medium);
|
|
@@ -2827,7 +2788,7 @@ small {
|
|
|
2827
2788
|
contain: paint;
|
|
2828
2789
|
font-size: var(--op-font-medium);
|
|
2829
2790
|
line-height: var(--op-line-height-base);
|
|
2830
|
-
opacity:
|
|
2791
|
+
opacity: var(--op-opacity-none);
|
|
2831
2792
|
transform: scale(0.7);
|
|
2832
2793
|
transition: var(--op-transition-modal);
|
|
2833
2794
|
}
|
|
@@ -2919,7 +2880,7 @@ small {
|
|
|
2919
2880
|
}
|
|
2920
2881
|
|
|
2921
2882
|
.form-control:not([type=radio], [type=checkbox]) {
|
|
2922
|
-
--_op-form-control-opacity-disabled:
|
|
2883
|
+
--_op-form-control-opacity-disabled: var(--op-opacity-disabled);
|
|
2923
2884
|
--__op-form-control-border-color: var(--op-color-neutral-plus-four);
|
|
2924
2885
|
display: block;
|
|
2925
2886
|
width: 100%;
|
|
@@ -2928,6 +2889,7 @@ small {
|
|
|
2928
2889
|
padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
|
|
2929
2890
|
border: none;
|
|
2930
2891
|
border-radius: var(--op-radius-medium);
|
|
2892
|
+
appearance: none;
|
|
2931
2893
|
background-color: var(--op-color-neutral-plus-eight);
|
|
2932
2894
|
box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
|
|
2933
2895
|
color: var(--op-color-neutral-on-plus-eight);
|
|
@@ -2980,8 +2942,10 @@ small {
|
|
|
2980
2942
|
select.form-control:not([multiple], [type=radio], [type=checkbox]) {
|
|
2981
2943
|
padding-right: var(--op-space-3x-large);
|
|
2982
2944
|
appearance: none;
|
|
2983
|
-
background: var(--op-encoded-images-dropdown-arrow)
|
|
2945
|
+
background-image: var(--op-encoded-images-dropdown-arrow);
|
|
2946
|
+
background-position: center right;
|
|
2984
2947
|
background-position-x: calc(100% - (var(--op-space-3x-large) / 2 - var(--op-encoded-images-dropdown-arrow-width) / 2));
|
|
2948
|
+
background-repeat: no-repeat;
|
|
2985
2949
|
cursor: pointer;
|
|
2986
2950
|
}
|
|
2987
2951
|
|
|
@@ -3003,6 +2967,22 @@ select.form-control:not([multiple], [type=radio], [type=checkbox]) {
|
|
|
3003
2967
|
border: none;
|
|
3004
2968
|
border-radius: var(--op-radius-medium);
|
|
3005
2969
|
}
|
|
2970
|
+
.form-control[type=file] {
|
|
2971
|
+
padding-block: 0;
|
|
2972
|
+
}
|
|
2973
|
+
.form-control[type=file]::file-selector-button {
|
|
2974
|
+
--__op-btn-height: var(--_op-btn-height-small);
|
|
2975
|
+
--__op-btn-font-size: var(--_op-btn-font-small);
|
|
2976
|
+
--__op-btn-padding: var(--_op-btn-padding-small);
|
|
2977
|
+
border: none;
|
|
2978
|
+
background-color: var(--op-color-neutral-plus-eight);
|
|
2979
|
+
box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
|
|
2980
|
+
color: var(--op-color-neutral-on-plus-eight);
|
|
2981
|
+
margin-block: calc(var(--__op-form-control-height) / 2 - var(--__op-btn-height) / 2);
|
|
2982
|
+
}
|
|
2983
|
+
.form-control[type=file].form-control--small::file-selector-button {
|
|
2984
|
+
--__op-btn-height: calc(var(--_op-btn-height-small) - var(--op-space-x-small));
|
|
2985
|
+
}
|
|
3006
2986
|
.form-control:disabled {
|
|
3007
2987
|
cursor: not-allowed;
|
|
3008
2988
|
opacity: var(--_op-form-control-opacity-disabled);
|
|
@@ -3129,6 +3109,23 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3129
3109
|
grid-row: 1;
|
|
3130
3110
|
}
|
|
3131
3111
|
|
|
3112
|
+
.form-group--inline {
|
|
3113
|
+
align-items: center;
|
|
3114
|
+
/* stylelint-disable no-descending-specificity */
|
|
3115
|
+
/* stylelint-enable no-descending-specificity */
|
|
3116
|
+
}
|
|
3117
|
+
.form-group--inline .form-label {
|
|
3118
|
+
grid-column: unset;
|
|
3119
|
+
}
|
|
3120
|
+
.form-group--inline .form-error,
|
|
3121
|
+
.form-group--inline .form-hint {
|
|
3122
|
+
grid-column: 1/3;
|
|
3123
|
+
}
|
|
3124
|
+
.form-group--inline .form-control:not([type=radio], [type=checkbox]),
|
|
3125
|
+
.form-group--inline .switch {
|
|
3126
|
+
grid-column: unset;
|
|
3127
|
+
}
|
|
3128
|
+
|
|
3132
3129
|
.material-symbols-outlined,
|
|
3133
3130
|
.material-symbols {
|
|
3134
3131
|
--op-mso-fill: 0;
|
|
@@ -3223,29 +3220,23 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3223
3220
|
}
|
|
3224
3221
|
|
|
3225
3222
|
.modal-wrapper {
|
|
3226
|
-
--_op-modal-backdrop-active-opacity:
|
|
3223
|
+
--_op-modal-backdrop-active-opacity: var(--op-opacity-half);
|
|
3227
3224
|
position: fixed;
|
|
3228
3225
|
z-index: var(--op-z-index-dialog);
|
|
3229
|
-
top: 0;
|
|
3230
|
-
right: 0;
|
|
3231
|
-
bottom: 0;
|
|
3232
|
-
left: 0;
|
|
3233
3226
|
display: flex;
|
|
3234
3227
|
overflow: hidden;
|
|
3235
3228
|
align-items: center;
|
|
3236
3229
|
justify-content: center;
|
|
3230
|
+
inset: 0;
|
|
3237
3231
|
outline: 0;
|
|
3238
3232
|
visibility: hidden;
|
|
3239
3233
|
}
|
|
3240
3234
|
.modal-wrapper .modal-wrapper__backdrop {
|
|
3241
3235
|
position: fixed;
|
|
3242
3236
|
z-index: var(--op-z-index-dialog-backdrop);
|
|
3243
|
-
top: 0;
|
|
3244
|
-
right: 0;
|
|
3245
|
-
bottom: 0;
|
|
3246
|
-
left: 0;
|
|
3247
3237
|
background: var(--op-color-black);
|
|
3248
|
-
|
|
3238
|
+
inset: 0;
|
|
3239
|
+
opacity: var(--op-opacity-none);
|
|
3249
3240
|
transition: var(--op-transition-modal);
|
|
3250
3241
|
visibility: hidden;
|
|
3251
3242
|
}
|
|
@@ -3253,7 +3244,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3253
3244
|
visibility: visible;
|
|
3254
3245
|
}
|
|
3255
3246
|
.modal-wrapper--active.modal-wrapper .modal {
|
|
3256
|
-
opacity:
|
|
3247
|
+
opacity: var(--op-opacity-full);
|
|
3257
3248
|
transform: scale(1);
|
|
3258
3249
|
}
|
|
3259
3250
|
.modal-wrapper--active.modal-wrapper .modal-wrapper__backdrop {
|
|
@@ -3262,8 +3253,8 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3262
3253
|
}
|
|
3263
3254
|
|
|
3264
3255
|
.modal {
|
|
3265
|
-
--_op-modal-width:
|
|
3266
|
-
--_op-modal-max-height:
|
|
3256
|
+
--_op-modal-width: calc(141 * var(--op-size-unit));
|
|
3257
|
+
--_op-modal-max-height: calc(125 * var(--op-size-unit));
|
|
3267
3258
|
z-index: var(--op-z-index-dialog-content);
|
|
3268
3259
|
width: var(--_op-modal-width);
|
|
3269
3260
|
border-radius: var(--op-radius-medium);
|
|
@@ -3273,7 +3264,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3273
3264
|
contain: paint;
|
|
3274
3265
|
font-size: var(--op-font-medium);
|
|
3275
3266
|
line-height: var(--op-line-height-base);
|
|
3276
|
-
opacity:
|
|
3267
|
+
opacity: var(--op-opacity-none);
|
|
3277
3268
|
transform: scale(0.7);
|
|
3278
3269
|
transition: var(--op-transition-modal);
|
|
3279
3270
|
}
|
|
@@ -3303,7 +3294,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3303
3294
|
|
|
3304
3295
|
@keyframes show-backdrop {
|
|
3305
3296
|
from {
|
|
3306
|
-
opacity:
|
|
3297
|
+
opacity: var(--op-opacity-none);
|
|
3307
3298
|
}
|
|
3308
3299
|
to {
|
|
3309
3300
|
opacity: var(--_op-modal-backdrop-active-opacity);
|
|
@@ -3314,37 +3305,81 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
|
|
|
3314
3305
|
opacity: var(--_op-modal-backdrop-active-opacity);
|
|
3315
3306
|
}
|
|
3316
3307
|
to {
|
|
3317
|
-
opacity:
|
|
3308
|
+
opacity: var(--op-opacity-none);
|
|
3318
3309
|
}
|
|
3319
3310
|
}
|
|
3320
3311
|
dialog.modal {
|
|
3321
3312
|
position: fixed;
|
|
3322
|
-
top: 0;
|
|
3323
|
-
right: 0;
|
|
3324
|
-
bottom: 0;
|
|
3325
|
-
left: 0;
|
|
3326
3313
|
display: block;
|
|
3327
3314
|
padding: 0;
|
|
3328
3315
|
border: none;
|
|
3316
|
+
inset: 0;
|
|
3329
3317
|
}
|
|
3330
3318
|
dialog.modal::backdrop {
|
|
3331
3319
|
--op-color-black: hsl(0deg 0% 0%);
|
|
3332
3320
|
--_op-modal-backdrop-active-opacity: 0.5;
|
|
3321
|
+
--op-opacity-none: 0;
|
|
3322
|
+
--op-opacity-full: 1;
|
|
3333
3323
|
animation: show-backdrop 300ms ease-in;
|
|
3334
3324
|
background: var(--op-color-black);
|
|
3335
3325
|
opacity: var(--_op-modal-backdrop-active-opacity);
|
|
3336
3326
|
}
|
|
3337
3327
|
dialog.modal[open] {
|
|
3338
|
-
opacity:
|
|
3328
|
+
opacity: var(--op-opacity-full);
|
|
3339
3329
|
transform: scale(1);
|
|
3340
3330
|
}
|
|
3341
3331
|
dialog.modal.modal--closing {
|
|
3342
|
-
opacity:
|
|
3332
|
+
opacity: var(--op-opacity-none);
|
|
3343
3333
|
transform: scale(0.7);
|
|
3344
3334
|
}
|
|
3345
3335
|
dialog.modal.modal--closing::backdrop {
|
|
3346
3336
|
animation: hide-backdrop 300ms ease-in;
|
|
3347
|
-
opacity:
|
|
3337
|
+
opacity: var(--op-opacity-none);
|
|
3338
|
+
}
|
|
3339
|
+
|
|
3340
|
+
.navbar-primary, .navbar {
|
|
3341
|
+
--_op-navbar-background-color: var(--op-color-neutral-plus-eight);
|
|
3342
|
+
--_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
|
|
3343
|
+
--_op-navbar-border-color: var(--op-color-neutral-plus-four);
|
|
3344
|
+
--_op-navbar-brand-height: calc(12 * var(--op-size-unit));
|
|
3345
|
+
--_op-navbar-horizontal-spacing: var(--op-space-x-large);
|
|
3346
|
+
--_op-navbar-content-spacing: var(--op-space-x-small);
|
|
3347
|
+
--_op-navbar-content-item-spacing: var(--op-space-2x-small);
|
|
3348
|
+
display: flex;
|
|
3349
|
+
align-items: center;
|
|
3350
|
+
padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
|
|
3351
|
+
background-color: var(--_op-navbar-background-color);
|
|
3352
|
+
box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
|
|
3353
|
+
color: var(--_op-navbar-text-color);
|
|
3354
|
+
gap: var(--_op-navbar-content-spacing);
|
|
3355
|
+
}
|
|
3356
|
+
.navbar-primary .navbar__brand, .navbar .navbar__brand {
|
|
3357
|
+
height: var(--_op-navbar-brand-height);
|
|
3358
|
+
margin-right: var(--_op-navbar-horizontal-spacing);
|
|
3359
|
+
}
|
|
3360
|
+
.navbar-primary .navbar__brand img, .navbar .navbar__brand img {
|
|
3361
|
+
height: 100%;
|
|
3362
|
+
}
|
|
3363
|
+
.navbar-primary .navbar__content, .navbar .navbar__content {
|
|
3364
|
+
display: flex;
|
|
3365
|
+
flex-wrap: wrap;
|
|
3366
|
+
align-items: center;
|
|
3367
|
+
gap: var(--_op-navbar-content-item-spacing);
|
|
3368
|
+
}
|
|
3369
|
+
.navbar-primary .navbar__content.navbar__content--justify-start, .navbar .navbar__content.navbar__content--justify-start {
|
|
3370
|
+
margin-inline-end: auto;
|
|
3371
|
+
}
|
|
3372
|
+
.navbar-primary .navbar__content.navbar__content--justify-center, .navbar .navbar__content.navbar__content--justify-center {
|
|
3373
|
+
margin-inline: auto;
|
|
3374
|
+
}
|
|
3375
|
+
.navbar-primary .navbar__content.navbar__content--justify-end, .navbar .navbar__content.navbar__content--justify-end {
|
|
3376
|
+
margin-inline-start: auto;
|
|
3377
|
+
}
|
|
3378
|
+
|
|
3379
|
+
.navbar-primary {
|
|
3380
|
+
--_op-navbar-background-color: var(--op-color-primary-plus-six);
|
|
3381
|
+
--_op-navbar-text-color: var(--op-color-primary-on-plus-six);
|
|
3382
|
+
--_op-navbar-border-color: var(--op-color-primary-plus-four);
|
|
3348
3383
|
}
|
|
3349
3384
|
|
|
3350
3385
|
.pagination {
|
|
@@ -3370,12 +3405,12 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3370
3405
|
--_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
|
|
3371
3406
|
--_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
|
|
3372
3407
|
--_op-sidebar-border-color: var(--op-color-neutral-plus-four);
|
|
3373
|
-
--_op-sidebar-rail-width:
|
|
3374
|
-
--_op-sidebar-compact-width:
|
|
3375
|
-
--_op-sidebar-drawer-width:
|
|
3376
|
-
--_op-sidebar-rail-brand-width:
|
|
3377
|
-
--_op-sidebar-compact-brand-width:
|
|
3378
|
-
--_op-sidebar-drawer-brand-width:
|
|
3408
|
+
--_op-sidebar-rail-width: calc(22 * var(--op-size-unit));
|
|
3409
|
+
--_op-sidebar-compact-width: calc(42 * var(--op-size-unit));
|
|
3410
|
+
--_op-sidebar-drawer-width: calc(54 * var(--op-size-unit));
|
|
3411
|
+
--_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit));
|
|
3412
|
+
--_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit));
|
|
3413
|
+
--_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit));
|
|
3379
3414
|
--_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
|
|
3380
3415
|
--_op-sidebar-brand-spacing: var(--op-space-medium);
|
|
3381
3416
|
--_op-sidebar-content-spacing: var(--op-space-x-small);
|
|
@@ -3522,10 +3557,257 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3522
3557
|
--_op-sidebar-border-color: var(--op-color-primary-plus-four);
|
|
3523
3558
|
}
|
|
3524
3559
|
|
|
3560
|
+
.side-panel {
|
|
3561
|
+
--_op-side-panel-width: calc(54 * var(--op-size-unit));
|
|
3562
|
+
--_op-side-panel-header-padding: var(--op-space-medium);
|
|
3563
|
+
--_op-side-panel-body-padding: var(--op-space-medium);
|
|
3564
|
+
--_op-side-panel-footer-padding: var(--op-space-medium);
|
|
3565
|
+
--_op-side-panel-section-padding: var(--op-space-medium);
|
|
3566
|
+
display: flex;
|
|
3567
|
+
width: var(--_op-side-panel-width);
|
|
3568
|
+
min-width: var(--_op-side-panel-width);
|
|
3569
|
+
height: 100vh;
|
|
3570
|
+
max-height: 100%;
|
|
3571
|
+
flex-direction: column;
|
|
3572
|
+
background-color: var(--op-color-background);
|
|
3573
|
+
color: var(--op-color-on-background);
|
|
3574
|
+
}
|
|
3575
|
+
.side-panel--border-left.side-panel {
|
|
3576
|
+
box-shadow: var(--op-border-left) var(--op-border-color);
|
|
3577
|
+
}
|
|
3578
|
+
.side-panel--border-right.side-panel {
|
|
3579
|
+
box-shadow: var(--op-border-right) var(--op-border-color);
|
|
3580
|
+
}
|
|
3581
|
+
.side-panel--border-left.side-panel--border-right.side-panel {
|
|
3582
|
+
box-shadow: var(--op-border-x);
|
|
3583
|
+
}
|
|
3584
|
+
.side-panel .side-panel__header.side-panel__header--padded {
|
|
3585
|
+
padding: var(--_op-side-panel-header-padding);
|
|
3586
|
+
}
|
|
3587
|
+
.side-panel .side-panel__header.side-panel__header--padded-x {
|
|
3588
|
+
padding-inline: var(--_op-side-panel-header-padding);
|
|
3589
|
+
}
|
|
3590
|
+
.side-panel .side-panel__header.side-panel__header--padded-y {
|
|
3591
|
+
padding-block: var(--_op-side-panel-header-padding);
|
|
3592
|
+
}
|
|
3593
|
+
.side-panel .side-panel__body {
|
|
3594
|
+
flex: 1;
|
|
3595
|
+
overflow-y: auto;
|
|
3596
|
+
}
|
|
3597
|
+
.side-panel .side-panel__body.side-panel__body--padded {
|
|
3598
|
+
padding: var(--_op-side-panel-body-padding);
|
|
3599
|
+
}
|
|
3600
|
+
.side-panel .side-panel__body.side-panel__body--padded-x {
|
|
3601
|
+
padding-inline: var(--_op-side-panel-body-padding);
|
|
3602
|
+
}
|
|
3603
|
+
.side-panel .side-panel__body.side-panel__body--padded-y {
|
|
3604
|
+
padding-block: var(--_op-side-panel-body-padding);
|
|
3605
|
+
}
|
|
3606
|
+
.side-panel .side-panel__footer.side-panel__footer--padded {
|
|
3607
|
+
padding: var(--_op-side-panel-footer-padding);
|
|
3608
|
+
}
|
|
3609
|
+
.side-panel .side-panel__footer.side-panel__footer--padded-x {
|
|
3610
|
+
padding-inline: var(--_op-side-panel-footer-padding);
|
|
3611
|
+
}
|
|
3612
|
+
.side-panel .side-panel__footer.side-panel__footer--padded-y {
|
|
3613
|
+
padding-block: var(--_op-side-panel-footer-padding);
|
|
3614
|
+
}
|
|
3615
|
+
.side-panel .side-panel__section.side-panel__section--padded {
|
|
3616
|
+
padding: var(--_op-side-panel-section-padding);
|
|
3617
|
+
}
|
|
3618
|
+
.side-panel .side-panel__section.side-panel__section--padded-x {
|
|
3619
|
+
padding-inline: var(--_op-side-panel-section-padding);
|
|
3620
|
+
}
|
|
3621
|
+
.side-panel .side-panel__section.side-panel__section--padded-y {
|
|
3622
|
+
padding-block: var(--_op-side-panel-section-padding);
|
|
3623
|
+
}
|
|
3624
|
+
|
|
3625
|
+
.spinner {
|
|
3626
|
+
--_op-spinner-indicator-color: var(--op-color-primary-base);
|
|
3627
|
+
--_op-spinner-track-color: var(--op-color-neutral-plus-four);
|
|
3628
|
+
--_op-spinner-track-width-x-small: var(--op-border-width);
|
|
3629
|
+
--_op-spinner-track-width-small: var(--op-border-width-large);
|
|
3630
|
+
--_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
|
|
3631
|
+
--_op-spinner-track-width-large: var(--op-border-width-x-large);
|
|
3632
|
+
--_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit));
|
|
3633
|
+
--_op-spinner-diameter-small: calc(10 * var(--op-size-unit));
|
|
3634
|
+
--_op-spinner-diameter-medium: calc(15 * var(--op-size-unit));
|
|
3635
|
+
--_op-spinner-diameter-large: calc(20 * var(--op-size-unit));
|
|
3636
|
+
--_op-spinner-animation-duration: 0.8s;
|
|
3637
|
+
--_op-spinner-animation-timing-function: linear;
|
|
3638
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-large);
|
|
3639
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-large);
|
|
3640
|
+
width: var(--__op-spinner-diameter);
|
|
3641
|
+
height: var(--__op-spinner-diameter);
|
|
3642
|
+
border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
|
|
3643
|
+
border-radius: var(--__op-spinner-diameter);
|
|
3644
|
+
border-top-color: var(--_op-spinner-indicator-color);
|
|
3645
|
+
animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
|
|
3646
|
+
}
|
|
3647
|
+
.spinner--x-small.spinner {
|
|
3648
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
|
|
3649
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
|
|
3650
|
+
}
|
|
3651
|
+
.spinner--small.spinner {
|
|
3652
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-small);
|
|
3653
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-small);
|
|
3654
|
+
}
|
|
3655
|
+
.spinner--medium.spinner {
|
|
3656
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-medium);
|
|
3657
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-medium);
|
|
3658
|
+
}
|
|
3659
|
+
.spinner--large.spinner {
|
|
3660
|
+
--__op-spinner-diameter: var(--_op-spinner-diameter-large);
|
|
3661
|
+
--__op-spinner-track-width: var(--_op-spinner-track-width-large);
|
|
3662
|
+
}
|
|
3663
|
+
|
|
3664
|
+
@keyframes spinner {
|
|
3665
|
+
to {
|
|
3666
|
+
transform: rotate(360deg);
|
|
3667
|
+
}
|
|
3668
|
+
}
|
|
3669
|
+
.switch {
|
|
3670
|
+
--_op-switch-height-small: calc(4 * var(--op-size-unit));
|
|
3671
|
+
--_op-switch-height-large: calc(6 * var(--op-size-unit));
|
|
3672
|
+
--_op-switch-width-small: calc(7 * var(--op-size-unit));
|
|
3673
|
+
--_op-switch-width-large: calc(11 * var(--op-size-unit));
|
|
3674
|
+
--_op-switch-opacity-disabled: var(--op-opacity-disabled);
|
|
3675
|
+
--_op-switch-switch-padding: var(--op-space-2x-small);
|
|
3676
|
+
--__op-switch-width: var(--_op-switch-width-large);
|
|
3677
|
+
--__op-switch-height: var(--_op-switch-height-large);
|
|
3678
|
+
--__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
|
|
3679
|
+
--__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);
|
|
3680
|
+
position: relative;
|
|
3681
|
+
display: flex;
|
|
3682
|
+
align-items: center;
|
|
3683
|
+
}
|
|
3684
|
+
.switch input {
|
|
3685
|
+
width: 0;
|
|
3686
|
+
height: 0;
|
|
3687
|
+
margin-right: calc(-1 * var(--op-space-x-small));
|
|
3688
|
+
}
|
|
3689
|
+
.switch input:disabled {
|
|
3690
|
+
visibility: hidden;
|
|
3691
|
+
}
|
|
3692
|
+
.switch input:disabled + label {
|
|
3693
|
+
cursor: not-allowed;
|
|
3694
|
+
opacity: var(--_op-switch-opacity-disabled);
|
|
3695
|
+
}
|
|
3696
|
+
.switch input:checked + label {
|
|
3697
|
+
background-color: var(--op-color-primary-base);
|
|
3698
|
+
box-shadow: none;
|
|
3699
|
+
}
|
|
3700
|
+
.switch input:checked + label::after {
|
|
3701
|
+
left: calc(100% - var(--__op-switch-half-switch-padding));
|
|
3702
|
+
transform: translateX(-100%);
|
|
3703
|
+
}
|
|
3704
|
+
.switch input:hover + label::after {
|
|
3705
|
+
background-color: var(--op-color-primary-plus-five);
|
|
3706
|
+
}
|
|
3707
|
+
.switch input:focus-visible + label {
|
|
3708
|
+
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);
|
|
3709
|
+
}
|
|
3710
|
+
.switch input:focus-visible + label::after {
|
|
3711
|
+
background-color: var(--op-color-neutral-plus-five);
|
|
3712
|
+
box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
|
|
3713
|
+
}
|
|
3714
|
+
.switch input:focus-visible:checked + label::after {
|
|
3715
|
+
background-color: var(--op-color-primary-plus-six);
|
|
3716
|
+
box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
|
|
3717
|
+
}
|
|
3718
|
+
.switch label {
|
|
3719
|
+
position: relative;
|
|
3720
|
+
display: block;
|
|
3721
|
+
width: var(--__op-switch-width);
|
|
3722
|
+
height: var(--__op-switch-height);
|
|
3723
|
+
border-radius: var(--op-radius-pill);
|
|
3724
|
+
background: var(--op-color-neutral-base);
|
|
3725
|
+
box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
|
|
3726
|
+
text-indent: -9999px;
|
|
3727
|
+
}
|
|
3728
|
+
.switch label::after {
|
|
3729
|
+
position: absolute;
|
|
3730
|
+
top: var(--__op-switch-half-switch-padding);
|
|
3731
|
+
left: var(--__op-switch-half-switch-padding);
|
|
3732
|
+
width: var(--__op-switch-switch-size);
|
|
3733
|
+
height: var(--__op-switch-switch-size);
|
|
3734
|
+
border-radius: var(--op-radius-circle);
|
|
3735
|
+
background-color: var(--op-color-neutral-plus-eight);
|
|
3736
|
+
content: "";
|
|
3737
|
+
transition: var(--op-transition-input);
|
|
3738
|
+
}
|
|
3739
|
+
.switch--small.switch {
|
|
3740
|
+
--__op-switch-width: var(--_op-switch-width-small);
|
|
3741
|
+
--__op-switch-height: var(--_op-switch-height-small);
|
|
3742
|
+
}
|
|
3743
|
+
.switch--large.switch {
|
|
3744
|
+
--__op-switch-width: var(--_op-switch-width-large);
|
|
3745
|
+
--__op-switch-height: var(--_op-switch-height-large);
|
|
3746
|
+
}
|
|
3747
|
+
.switch + label {
|
|
3748
|
+
width: fit-content;
|
|
3749
|
+
}
|
|
3750
|
+
|
|
3751
|
+
.tab-group {
|
|
3752
|
+
display: flex;
|
|
3753
|
+
align-items: center;
|
|
3754
|
+
}
|
|
3755
|
+
|
|
3756
|
+
.tab {
|
|
3757
|
+
--_op-tab-font-small: var(--op-font-x-small);
|
|
3758
|
+
--_op-tab-font-large: var(--op-font-small);
|
|
3759
|
+
--_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
|
|
3760
|
+
--_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
|
|
3761
|
+
--_op-tab-indicator-width-small: var(--op-border-width-large);
|
|
3762
|
+
--_op-tab-indicator-width-large: var(--op-border-width-x-large);
|
|
3763
|
+
--_op-tab-disabled-opacity: var(--op-opacity-disabled);
|
|
3764
|
+
--__op-tab-font-size: var(--_op-tab-font-large);
|
|
3765
|
+
--__op-tab-padding: var(--_op-tab-padding-large);
|
|
3766
|
+
--__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
|
|
3767
|
+
--__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;
|
|
3768
|
+
padding: var(--__op-tab-padding);
|
|
3769
|
+
background-color: var(--op-color-background);
|
|
3770
|
+
color: var(--op-color-on-background);
|
|
3771
|
+
font-size: var(--__op-tab-font-size);
|
|
3772
|
+
text-decoration: none;
|
|
3773
|
+
}
|
|
3774
|
+
.tab--active.tab {
|
|
3775
|
+
box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
|
|
3776
|
+
}
|
|
3777
|
+
.tab:focus, .tab:focus-within, .tab:focus-visible {
|
|
3778
|
+
outline: none;
|
|
3779
|
+
}
|
|
3780
|
+
.tab:focus-visible:not(.tab--disabled) {
|
|
3781
|
+
z-index: 1;
|
|
3782
|
+
box-shadow: var(--op-input-focus-primary);
|
|
3783
|
+
}
|
|
3784
|
+
.tab:focus-visible:not(.tab--disabled).tab--active {
|
|
3785
|
+
box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one), var(--op-input-focus-primary);
|
|
3786
|
+
}
|
|
3787
|
+
.tab--disabled.tab {
|
|
3788
|
+
opacity: var(--_op-tab-disabled-opacity);
|
|
3789
|
+
pointer-events: none;
|
|
3790
|
+
}
|
|
3791
|
+
.tab:hover {
|
|
3792
|
+
background-color: var(--op-color-primary-plus-seven);
|
|
3793
|
+
box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
|
|
3794
|
+
color: var(--op-color-primary-on-plus-seven);
|
|
3795
|
+
}
|
|
3796
|
+
.tab--small.tab {
|
|
3797
|
+
--__op-tab-padding: var(--_op-tab-padding-small);
|
|
3798
|
+
--__op-tab-font-size: var(--_op-tab-font-small);
|
|
3799
|
+
--__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
|
|
3800
|
+
}
|
|
3801
|
+
.tab--large.tab {
|
|
3802
|
+
--__op-tab-padding: var(--_op-tab-padding-large);
|
|
3803
|
+
--__op-tab-font-size: var(--_op-tab-font-large);
|
|
3804
|
+
--__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
|
|
3805
|
+
}
|
|
3806
|
+
|
|
3525
3807
|
.table-container, .table-danger, .table-primary, .table {
|
|
3526
|
-
--_op-table-cell-height-default: calc(var(--op-
|
|
3527
|
-
--_op-table-cell-height-comfortable: calc(var(--op-
|
|
3528
|
-
--_op-table-cell-height-compact: calc(var(--op-
|
|
3808
|
+
--_op-table-cell-height-default: calc(11 * var(--op-size-unit));
|
|
3809
|
+
--_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit));
|
|
3810
|
+
--_op-table-cell-height-compact: calc(8 * var(--op-size-unit));
|
|
3529
3811
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
3530
3812
|
width: 100%;
|
|
3531
3813
|
border-radius: var(--op-radius-medium);
|
|
@@ -3616,8 +3898,181 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3616
3898
|
overflow-y: auto;
|
|
3617
3899
|
}
|
|
3618
3900
|
|
|
3901
|
+
.tag-notice, .tag-info, .tag-warning, .tag-danger, .tag-primary, .tag-readonly {
|
|
3902
|
+
display: inline-flex;
|
|
3903
|
+
align-items: center;
|
|
3904
|
+
justify-content: center;
|
|
3905
|
+
padding: var(--op-space-2x-small);
|
|
3906
|
+
border-radius: var(--op-radius-pill);
|
|
3907
|
+
background-color: var(--op-color-neutral-plus-four);
|
|
3908
|
+
color: var(--op-color-neutral-on-plus-four);
|
|
3909
|
+
font-size: var(--op-font-x-small);
|
|
3910
|
+
font-weight: var(--op-font-weight-bold);
|
|
3911
|
+
letter-spacing: var(--op-letter-spacing-label);
|
|
3912
|
+
line-height: var(--op-line-height-dense);
|
|
3913
|
+
user-select: none;
|
|
3914
|
+
white-space: nowrap;
|
|
3915
|
+
}
|
|
3916
|
+
.tag-notice .tag__label, .tag-info .tag__label, .tag-warning .tag__label, .tag-danger .tag__label, .tag-primary .tag__label, .tag-readonly .tag__label {
|
|
3917
|
+
padding-inline: var(--op-space-2x-small);
|
|
3918
|
+
}
|
|
3919
|
+
.tag-notice .btn--icon, .tag-info .btn--icon, .tag-warning .btn--icon, .tag-danger .btn--icon, .tag-primary .btn--icon, .tag-readonly .btn--icon {
|
|
3920
|
+
--__op-btn-height: var(--op-font-medium);
|
|
3921
|
+
}
|
|
3922
|
+
.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 {
|
|
3923
|
+
background-color: var(--op-color-neutral-minus-three);
|
|
3924
|
+
box-shadow: none;
|
|
3925
|
+
color: var(--op-color-neutral-on-minus-three);
|
|
3926
|
+
}
|
|
3927
|
+
.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 {
|
|
3928
|
+
background-color: var(--op-color-neutral-base);
|
|
3929
|
+
box-shadow: var(--op-input-focus-neutral);
|
|
3930
|
+
color: var(--op-color-neutral-on-base);
|
|
3931
|
+
}
|
|
3932
|
+
|
|
3933
|
+
.tag-primary {
|
|
3934
|
+
background-color: var(--op-color-primary-base);
|
|
3935
|
+
color: var(--op-color-primary-on-base);
|
|
3936
|
+
}
|
|
3937
|
+
.tag-primary .btn--icon {
|
|
3938
|
+
color: var(--op-color-primary-on-base);
|
|
3939
|
+
}
|
|
3940
|
+
.tag-primary .btn--icon:hover {
|
|
3941
|
+
background-color: var(--op-color-primary-minus-three);
|
|
3942
|
+
box-shadow: none;
|
|
3943
|
+
color: var(--op-color-primary-on-minus-three);
|
|
3944
|
+
}
|
|
3945
|
+
.tag-primary .btn--icon:focus-visible {
|
|
3946
|
+
background-color: var(--op-color-primary-base);
|
|
3947
|
+
box-shadow: var(--op-input-focus-primary);
|
|
3948
|
+
color: var(--op-color-primary-on-base);
|
|
3949
|
+
}
|
|
3950
|
+
|
|
3951
|
+
.tag-danger {
|
|
3952
|
+
background-color: var(--op-color-alerts-danger-base);
|
|
3953
|
+
color: var(--op-color-alerts-danger-on-base);
|
|
3954
|
+
/* stylelint-disable no-descending-specificity */
|
|
3955
|
+
/* stylelint-enable no-descending-specificity */
|
|
3956
|
+
}
|
|
3957
|
+
.tag-danger .btn--icon {
|
|
3958
|
+
color: var(--op-color-alerts-danger-on-base);
|
|
3959
|
+
}
|
|
3960
|
+
.tag-danger .btn--icon:hover {
|
|
3961
|
+
background-color: var(--op-color-alerts-danger-minus-three);
|
|
3962
|
+
box-shadow: none;
|
|
3963
|
+
color: var(--op-color-alerts-danger-on-minus-three);
|
|
3964
|
+
}
|
|
3965
|
+
.tag-danger .btn--icon:focus-visible {
|
|
3966
|
+
background-color: var(--op-color-alerts-danger-base);
|
|
3967
|
+
box-shadow: var(--op-input-focus-danger);
|
|
3968
|
+
color: var(--op-color-alerts-danger-on-base);
|
|
3969
|
+
}
|
|
3970
|
+
|
|
3971
|
+
.tag-warning {
|
|
3972
|
+
background-color: var(--op-color-alerts-warning-base);
|
|
3973
|
+
color: var(--op-color-alerts-warning-on-base);
|
|
3974
|
+
/* stylelint-disable no-descending-specificity */
|
|
3975
|
+
/* stylelint-enable no-descending-specificity */
|
|
3976
|
+
}
|
|
3977
|
+
.tag-warning .btn--icon {
|
|
3978
|
+
color: var(--op-color-alerts-warning-on-base);
|
|
3979
|
+
}
|
|
3980
|
+
.tag-warning .btn--icon:hover {
|
|
3981
|
+
background-color: var(--op-color-alerts-warning-minus-three);
|
|
3982
|
+
box-shadow: none;
|
|
3983
|
+
color: var(--op-color-alerts-warning-on-minus-three);
|
|
3984
|
+
}
|
|
3985
|
+
.tag-warning .btn--icon:focus-visible {
|
|
3986
|
+
background-color: var(--op-color-alerts-warning-base);
|
|
3987
|
+
box-shadow: var(--op-input-focus-warning);
|
|
3988
|
+
color: var(--op-color-alerts-warning-on-base);
|
|
3989
|
+
}
|
|
3990
|
+
|
|
3991
|
+
.tag-info {
|
|
3992
|
+
background-color: var(--op-color-alerts-info-base);
|
|
3993
|
+
color: var(--op-color-alerts-info-on-base);
|
|
3994
|
+
/* stylelint-disable no-descending-specificity */
|
|
3995
|
+
/* stylelint-enable no-descending-specificity */
|
|
3996
|
+
}
|
|
3997
|
+
.tag-info .btn--icon {
|
|
3998
|
+
color: var(--op-color-alerts-info-on-base);
|
|
3999
|
+
}
|
|
4000
|
+
.tag-info .btn--icon:hover {
|
|
4001
|
+
background-color: var(--op-color-alerts-info-minus-three);
|
|
4002
|
+
box-shadow: none;
|
|
4003
|
+
color: var(--op-color-alerts-info-on-minus-three);
|
|
4004
|
+
}
|
|
4005
|
+
.tag-info .btn--icon:focus-visible {
|
|
4006
|
+
background-color: var(--op-color-alerts-info-base);
|
|
4007
|
+
box-shadow: var(--op-input-focus-info);
|
|
4008
|
+
color: var(--op-color-alerts-info-on-base);
|
|
4009
|
+
}
|
|
4010
|
+
|
|
4011
|
+
.tag-notice {
|
|
4012
|
+
background-color: var(--op-color-alerts-notice-base);
|
|
4013
|
+
color: var(--op-color-alerts-notice-on-base);
|
|
4014
|
+
/* stylelint-disable no-descending-specificity */
|
|
4015
|
+
/* stylelint-enable no-descending-specificity */
|
|
4016
|
+
}
|
|
4017
|
+
.tag-notice .btn--icon {
|
|
4018
|
+
color: var(--op-color-alerts-notice-on-base);
|
|
4019
|
+
}
|
|
4020
|
+
.tag-notice .btn--icon:hover {
|
|
4021
|
+
background-color: var(--op-color-alerts-notice-minus-three);
|
|
4022
|
+
box-shadow: none;
|
|
4023
|
+
color: var(--op-color-alerts-notice-on-minus-three);
|
|
4024
|
+
}
|
|
4025
|
+
.tag-notice .btn--icon:focus-visible {
|
|
4026
|
+
background-color: var(--op-color-alerts-notice-base);
|
|
4027
|
+
box-shadow: var(--op-input-focus-notice);
|
|
4028
|
+
color: var(--op-color-alerts-notice-on-base);
|
|
4029
|
+
}
|
|
4030
|
+
|
|
4031
|
+
.text-pair {
|
|
4032
|
+
--_op-text-pair-font-size-small: var(--op-font-small);
|
|
4033
|
+
--_op-text-pair-font-size-medium: var(--op-font-medium);
|
|
4034
|
+
--_op-text-pair-font-size-large: var(--op-font-large);
|
|
4035
|
+
--__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
|
|
4036
|
+
--__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
|
|
4037
|
+
display: flex;
|
|
4038
|
+
flex-direction: column;
|
|
4039
|
+
gap: var(--op-space-x-small);
|
|
4040
|
+
}
|
|
4041
|
+
.text-pair--inline.text-pair {
|
|
4042
|
+
flex-direction: row;
|
|
4043
|
+
align-items: baseline;
|
|
4044
|
+
}
|
|
4045
|
+
.text-pair .text-pair__title {
|
|
4046
|
+
font-size: var(--__op-text-pair-title-font-size);
|
|
4047
|
+
font-weight: var(--op-font-weight-semi-bold);
|
|
4048
|
+
line-height: var(--op-line-height-dense);
|
|
4049
|
+
}
|
|
4050
|
+
.text-pair .text-pair__title.text-pair__title--small {
|
|
4051
|
+
--__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
|
|
4052
|
+
}
|
|
4053
|
+
.text-pair .text-pair__title.text-pair__title--medium {
|
|
4054
|
+
--__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
|
|
4055
|
+
}
|
|
4056
|
+
.text-pair .text-pair__title.text-pair__title--large {
|
|
4057
|
+
--__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
|
|
4058
|
+
}
|
|
4059
|
+
.text-pair .text-pair__subtitle {
|
|
4060
|
+
font-size: var(--__op-text-pair-subtitle-font-size);
|
|
4061
|
+
font-weight: var(--op-font-weight-normal);
|
|
4062
|
+
line-height: var(--op-line-height-dense);
|
|
4063
|
+
}
|
|
4064
|
+
.text-pair .text-pair__subtitle.text-pair__subtitle--small {
|
|
4065
|
+
--__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
|
|
4066
|
+
}
|
|
4067
|
+
.text-pair .text-pair__subtitle.text-pair__subtitle--medium {
|
|
4068
|
+
--__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
|
|
4069
|
+
}
|
|
4070
|
+
.text-pair .text-pair__subtitle.text-pair__subtitle--large {
|
|
4071
|
+
--__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
|
|
4072
|
+
}
|
|
4073
|
+
|
|
3619
4074
|
[data-tooltip-text] {
|
|
3620
|
-
--_op-tooltip-max-width: calc(
|
|
4075
|
+
--_op-tooltip-max-width: calc(50 * var(--op-size-unit));
|
|
3621
4076
|
--_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
|
|
3622
4077
|
--_op-tooltip-background-color: var(--op-color-neutral-minus-max);
|
|
3623
4078
|
--_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
|
|
@@ -3628,7 +4083,7 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3628
4083
|
position: relative;
|
|
3629
4084
|
}
|
|
3630
4085
|
[data-tooltip-text]::before, [data-tooltip-text]::after {
|
|
3631
|
-
opacity:
|
|
4086
|
+
opacity: var(--op-opacity-none);
|
|
3632
4087
|
transition: var(--op-transition-tooltip);
|
|
3633
4088
|
visibility: hidden;
|
|
3634
4089
|
}
|
|
@@ -3658,7 +4113,7 @@ dialog.modal.modal--closing::backdrop {
|
|
|
3658
4113
|
pointer-events: none;
|
|
3659
4114
|
}
|
|
3660
4115
|
[data-tooltip-text]:hover::before, [data-tooltip-text]:hover::after {
|
|
3661
|
-
opacity:
|
|
4116
|
+
opacity: var(--op-opacity-full);
|
|
3662
4117
|
visibility: visible;
|
|
3663
4118
|
}
|
|
3664
4119
|
[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 {
|