@itwin/itwinui-css 0.53.1 → 0.54.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/css/alert.css +61 -43
- package/css/all.css +388 -126
- package/css/anchor.css +68 -0
- package/css/breadcrumbs.css +48 -5
- package/css/color-picker.css +4 -0
- package/css/footer.css +48 -5
- package/css/global.css +0 -23
- package/css/modal.css +5 -5
- package/css/skip-to-content.css +5 -2
- package/css/table.css +9 -9
- package/css/tag.css +47 -5
- package/css/toast-notification.css +94 -27
- package/css/tree.css +2 -2
- package/package.json +1 -1
- package/scss/alert/alert.scss +5 -25
- package/scss/anchor/anchor.scss +79 -0
- package/scss/anchor/classes.scss +7 -0
- package/scss/anchor/index.scss +3 -0
- package/scss/breadcrumbs/breadcrumbs.scss +2 -1
- package/scss/classes.scss +1 -0
- package/scss/color-picker/color-picker.scss +4 -0
- package/scss/footer/footer.scss +1 -0
- package/scss/index.scss +1 -0
- package/scss/modal/modal.scss +8 -5
- package/scss/skip-to-content/skip-to-content.scss +7 -3
- package/scss/style/global.scss +0 -4
- package/scss/style/mixins.scss +0 -17
- package/scss/table/table.scss +5 -5
- package/scss/tag/classes.scss +1 -0
- package/scss/toast-notification/categories.scss +3 -20
- package/scss/toast-notification/toast.scss +5 -6
- package/scss/tree/tree.scss +2 -2
package/css/anchor.css
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
.iui-anchor{
|
|
6
|
+
--_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
|
|
7
|
+
color:#008ae0;
|
|
8
|
+
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
9
|
+
color:var(--iui-color-foreground-primary);
|
|
10
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
11
|
+
border-radius:3px;
|
|
12
|
+
cursor:pointer;
|
|
13
|
+
text-decoration:none;
|
|
14
|
+
}
|
|
15
|
+
.iui-anchor:focus-visible{
|
|
16
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
17
|
+
outline-offset:1px;
|
|
18
|
+
}
|
|
19
|
+
@supports not selector(*:focus-visible){
|
|
20
|
+
.iui-anchor:focus{
|
|
21
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
22
|
+
outline-offset:1px;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
.iui-anchor:hover{
|
|
26
|
+
color:#006bad;
|
|
27
|
+
color:var(--iui-color-foreground-primary-overlay);
|
|
28
|
+
}
|
|
29
|
+
.iui-anchor-external::after{
|
|
30
|
+
content:"";
|
|
31
|
+
display:inline-block;
|
|
32
|
+
width:1.5ch;
|
|
33
|
+
height:1.5ch;
|
|
34
|
+
margin-left:0.5ch;
|
|
35
|
+
vertical-align:-0.1ch;
|
|
36
|
+
background-color:currentColor;
|
|
37
|
+
-webkit-mask:var(--_iui-anchor-external-svg);
|
|
38
|
+
mask:var(--_iui-anchor-external-svg);
|
|
39
|
+
}
|
|
40
|
+
@media (forced-colors: active){
|
|
41
|
+
.iui-anchor-external::after{
|
|
42
|
+
background-color:LinkText;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.iui-anchor:hover{
|
|
46
|
+
text-decoration:underline;
|
|
47
|
+
}
|
|
48
|
+
@media (prefers-contrast: more){
|
|
49
|
+
.iui-anchor{
|
|
50
|
+
text-decoration:underline;
|
|
51
|
+
}
|
|
52
|
+
.iui-anchor:hover{
|
|
53
|
+
text-decoration:none;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
|
|
57
|
+
text-decoration:none;
|
|
58
|
+
}
|
|
59
|
+
.iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
|
|
60
|
+
text-decoration:underline;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
|
|
64
|
+
text-decoration:underline;
|
|
65
|
+
}
|
|
66
|
+
.iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
|
|
67
|
+
text-decoration:none;
|
|
68
|
+
}
|
package/css/breadcrumbs.css
CHANGED
|
@@ -33,27 +33,70 @@
|
|
|
33
33
|
margin:0 12px;
|
|
34
34
|
}
|
|
35
35
|
.iui-breadcrumbs-item a{
|
|
36
|
-
|
|
37
|
-
text-decoration:none;
|
|
38
|
-
cursor:pointer;
|
|
36
|
+
--_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
|
|
39
37
|
color:#008ae0;
|
|
38
|
+
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
40
39
|
color:var(--iui-color-foreground-primary);
|
|
40
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
41
|
+
border-radius:3px;
|
|
42
|
+
cursor:pointer;
|
|
43
|
+
text-decoration:none;
|
|
41
44
|
}
|
|
42
45
|
.iui-breadcrumbs-item a:focus-visible{
|
|
43
46
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
44
|
-
outline-offset:
|
|
47
|
+
outline-offset:1px;
|
|
45
48
|
}
|
|
46
49
|
@supports not selector(*:focus-visible){
|
|
47
50
|
.iui-breadcrumbs-item a:focus{
|
|
48
51
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
49
|
-
outline-offset:
|
|
52
|
+
outline-offset:1px;
|
|
50
53
|
}
|
|
51
54
|
}
|
|
52
55
|
.iui-breadcrumbs-item a:hover{
|
|
53
56
|
color:#006bad;
|
|
54
57
|
color:var(--iui-color-foreground-primary-overlay);
|
|
58
|
+
}
|
|
59
|
+
.iui-breadcrumbs-item a-external::after{
|
|
60
|
+
content:"";
|
|
61
|
+
display:inline-block;
|
|
62
|
+
width:1.5ch;
|
|
63
|
+
height:1.5ch;
|
|
64
|
+
margin-left:0.5ch;
|
|
65
|
+
vertical-align:-0.1ch;
|
|
66
|
+
background-color:currentColor;
|
|
67
|
+
-webkit-mask:var(--_iui-anchor-external-svg);
|
|
68
|
+
mask:var(--_iui-anchor-external-svg);
|
|
69
|
+
}
|
|
70
|
+
@media (forced-colors: active){
|
|
71
|
+
.iui-breadcrumbs-item a-external::after{
|
|
72
|
+
background-color:LinkText;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
.iui-breadcrumbs-item a:hover{
|
|
55
76
|
text-decoration:underline;
|
|
56
77
|
}
|
|
78
|
+
@media (prefers-contrast: more){
|
|
79
|
+
.iui-breadcrumbs-item a{
|
|
80
|
+
text-decoration:underline;
|
|
81
|
+
}
|
|
82
|
+
.iui-breadcrumbs-item a:hover{
|
|
83
|
+
text-decoration:none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.iui-theme-light .iui-breadcrumbs-item a, .iui-theme-dark .iui-breadcrumbs-item a{
|
|
87
|
+
text-decoration:none;
|
|
88
|
+
}
|
|
89
|
+
.iui-theme-light .iui-breadcrumbs-item a:hover, .iui-theme-dark .iui-breadcrumbs-item a:hover{
|
|
90
|
+
text-decoration:underline;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.iui-theme-light-hc .iui-breadcrumbs-item a, .iui-theme-dark-hc .iui-breadcrumbs-item a{
|
|
94
|
+
text-decoration:underline;
|
|
95
|
+
}
|
|
96
|
+
.iui-theme-light-hc .iui-breadcrumbs-item a:hover, .iui-theme-dark-hc .iui-breadcrumbs-item a:hover{
|
|
97
|
+
text-decoration:none;
|
|
98
|
+
}
|
|
99
|
+
|
|
57
100
|
.iui-breadcrumbs-item .iui-button{
|
|
58
101
|
border-color:transparent;
|
|
59
102
|
background-color:transparent;
|
package/css/color-picker.css
CHANGED
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
margin-right:4px;
|
|
123
123
|
position:relative;
|
|
124
124
|
background-color:var(--iui-color-swatch-background);
|
|
125
|
+
forced-color-adjust:none;
|
|
125
126
|
background-position:0 0, 8px 8px;
|
|
126
127
|
background-size:16px 16px;
|
|
127
128
|
background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
|
|
@@ -184,6 +185,7 @@
|
|
|
184
185
|
cursor:crosshair;
|
|
185
186
|
width:100%;
|
|
186
187
|
height:209px;
|
|
188
|
+
forced-color-adjust:none;
|
|
187
189
|
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
|
|
188
190
|
}
|
|
189
191
|
.iui-color-field:not(:last-child){
|
|
@@ -192,6 +194,7 @@
|
|
|
192
194
|
|
|
193
195
|
.iui-hue-slider .iui-slider-rail{
|
|
194
196
|
height:8px;
|
|
197
|
+
forced-color-adjust:none;
|
|
195
198
|
background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
|
|
196
199
|
background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
|
|
197
200
|
}
|
|
@@ -201,6 +204,7 @@
|
|
|
201
204
|
|
|
202
205
|
.iui-opacity-slider .iui-slider-rail{
|
|
203
206
|
height:8px;
|
|
207
|
+
forced-color-adjust:none;
|
|
204
208
|
background-position:0 0, 4px 4px;
|
|
205
209
|
background-size:8px 8px;
|
|
206
210
|
background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
|
package/css/footer.css
CHANGED
|
@@ -41,27 +41,70 @@
|
|
|
41
41
|
background-color:var(--iui-text-color-muted);
|
|
42
42
|
}
|
|
43
43
|
.iui-legal-footer > ul > li > a{
|
|
44
|
-
|
|
45
|
-
text-decoration:none;
|
|
46
|
-
cursor:pointer;
|
|
44
|
+
--_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
|
|
47
45
|
color:#008ae0;
|
|
46
|
+
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
48
47
|
color:var(--iui-color-foreground-primary);
|
|
48
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
49
|
+
border-radius:3px;
|
|
50
|
+
cursor:pointer;
|
|
51
|
+
text-decoration:none;
|
|
49
52
|
}
|
|
50
53
|
.iui-legal-footer > ul > li > a:focus-visible{
|
|
51
54
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
52
|
-
outline-offset:
|
|
55
|
+
outline-offset:1px;
|
|
53
56
|
}
|
|
54
57
|
@supports not selector(*:focus-visible){
|
|
55
58
|
.iui-legal-footer > ul > li > a:focus{
|
|
56
59
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
57
|
-
outline-offset:
|
|
60
|
+
outline-offset:1px;
|
|
58
61
|
}
|
|
59
62
|
}
|
|
60
63
|
.iui-legal-footer > ul > li > a:hover{
|
|
61
64
|
color:#006bad;
|
|
62
65
|
color:var(--iui-color-foreground-primary-overlay);
|
|
66
|
+
}
|
|
67
|
+
.iui-legal-footer > ul > li > a-external::after{
|
|
68
|
+
content:"";
|
|
69
|
+
display:inline-block;
|
|
70
|
+
width:1.5ch;
|
|
71
|
+
height:1.5ch;
|
|
72
|
+
margin-left:0.5ch;
|
|
73
|
+
vertical-align:-0.1ch;
|
|
74
|
+
background-color:currentColor;
|
|
75
|
+
-webkit-mask:var(--_iui-anchor-external-svg);
|
|
76
|
+
mask:var(--_iui-anchor-external-svg);
|
|
77
|
+
}
|
|
78
|
+
@media (forced-colors: active){
|
|
79
|
+
.iui-legal-footer > ul > li > a-external::after{
|
|
80
|
+
background-color:LinkText;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
.iui-legal-footer > ul > li > a:hover{
|
|
63
84
|
text-decoration:underline;
|
|
64
85
|
}
|
|
86
|
+
@media (prefers-contrast: more){
|
|
87
|
+
.iui-legal-footer > ul > li > a{
|
|
88
|
+
text-decoration:underline;
|
|
89
|
+
}
|
|
90
|
+
.iui-legal-footer > ul > li > a:hover{
|
|
91
|
+
text-decoration:none;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
.iui-theme-light .iui-legal-footer > ul > li > a, .iui-theme-dark .iui-legal-footer > ul > li > a{
|
|
95
|
+
text-decoration:none;
|
|
96
|
+
}
|
|
97
|
+
.iui-theme-light .iui-legal-footer > ul > li > a:hover, .iui-theme-dark .iui-legal-footer > ul > li > a:hover{
|
|
98
|
+
text-decoration:underline;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.iui-theme-light-hc .iui-legal-footer > ul > li > a, .iui-theme-dark-hc .iui-legal-footer > ul > li > a{
|
|
102
|
+
text-decoration:underline;
|
|
103
|
+
}
|
|
104
|
+
.iui-theme-light-hc .iui-legal-footer > ul > li > a:hover, .iui-theme-dark-hc .iui-legal-footer > ul > li > a:hover{
|
|
105
|
+
text-decoration:none;
|
|
106
|
+
}
|
|
107
|
+
|
|
65
108
|
.iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
|
|
66
109
|
color:rgba(0, 0, 0, 0.4);
|
|
67
110
|
color:var(--iui-text-color-muted);
|
package/css/global.css
CHANGED
|
@@ -582,29 +582,6 @@ html.iui-theme-dark-hc{
|
|
|
582
582
|
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
|
|
583
583
|
}
|
|
584
584
|
|
|
585
|
-
.iui-anchor{
|
|
586
|
-
border-radius:3px;
|
|
587
|
-
text-decoration:none;
|
|
588
|
-
cursor:pointer;
|
|
589
|
-
color:#008ae0;
|
|
590
|
-
color:var(--iui-color-foreground-primary);
|
|
591
|
-
}
|
|
592
|
-
.iui-anchor:focus-visible{
|
|
593
|
-
outline:1px solid var(--iui-color-foreground-primary);
|
|
594
|
-
outline-offset:2px;
|
|
595
|
-
}
|
|
596
|
-
@supports not selector(*:focus-visible){
|
|
597
|
-
.iui-anchor:focus{
|
|
598
|
-
outline:1px solid var(--iui-color-foreground-primary);
|
|
599
|
-
outline-offset:2px;
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
.iui-anchor:hover{
|
|
603
|
-
color:#006bad;
|
|
604
|
-
color:var(--iui-color-foreground-primary-overlay);
|
|
605
|
-
text-decoration:underline;
|
|
606
|
-
}
|
|
607
|
-
|
|
608
585
|
[class*=iui-],
|
|
609
586
|
[class*=iui-] *{
|
|
610
587
|
scrollbar-color:rgba(0, 0, 0, 0.4) transparent;
|
package/css/modal.css
CHANGED
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
}
|
|
96
96
|
@media (prefers-reduced-motion: no-preference){
|
|
97
97
|
.iui-modal-full-page{
|
|
98
|
-
transition:visibility 0s linear 0.
|
|
98
|
+
transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
.iui-modal-full-page > .iui-modal-dialog{
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
}
|
|
104
104
|
@media (prefers-reduced-motion: no-preference){
|
|
105
105
|
.iui-modal-full-page > .iui-modal-dialog{
|
|
106
|
-
transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.
|
|
106
|
+
transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
|
|
@@ -111,14 +111,14 @@
|
|
|
111
111
|
}
|
|
112
112
|
@media (prefers-reduced-motion: no-preference){
|
|
113
113
|
.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
|
|
114
|
-
transition:transform 0.
|
|
114
|
+
transition:transform 0.3s ease-out;
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
|
-
.iui-modal-animation-enter .iui-modal .iui-modal-dialog{
|
|
117
|
+
.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
|
|
118
118
|
transform:translateY(100%);
|
|
119
119
|
opacity:0;
|
|
120
120
|
}
|
|
121
|
-
.iui-modal-animation-enter-active .iui-modal .iui-modal-dialog{
|
|
121
|
+
.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
|
|
122
122
|
transform:translateY(0);
|
|
123
123
|
opacity:1;
|
|
124
124
|
}
|
package/css/skip-to-content.css
CHANGED
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
text-align:center;
|
|
19
19
|
left:50%;
|
|
20
20
|
top:22px;
|
|
21
|
+
opacity:0;
|
|
22
|
+
z-index:99;
|
|
21
23
|
transform:translateX(-50%) translateY(-170%);
|
|
22
24
|
transition:background-color 0.2s ease-in-out;
|
|
23
25
|
}
|
|
@@ -40,7 +42,7 @@
|
|
|
40
42
|
}
|
|
41
43
|
@media (prefers-reduced-motion: no-preference){
|
|
42
44
|
.iui-skip-to-content-link{
|
|
43
|
-
transition:background-color 0.
|
|
45
|
+
transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
.iui-skip-to-content-link:hover{
|
|
@@ -55,11 +57,12 @@
|
|
|
55
57
|
}
|
|
56
58
|
}
|
|
57
59
|
.iui-skip-to-content-link:focus{
|
|
60
|
+
opacity:1;
|
|
58
61
|
transform:translateX(-50%) translateY(0);
|
|
59
62
|
box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
|
|
60
63
|
}
|
|
61
64
|
@media (prefers-reduced-motion: no-preference){
|
|
62
65
|
.iui-skip-to-content-link:focus{
|
|
63
|
-
transition:transform 0.2s ease-in-out;
|
|
66
|
+
transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
64
67
|
}
|
|
65
68
|
}
|
package/css/table.css
CHANGED
|
@@ -205,10 +205,10 @@
|
|
|
205
205
|
background-color:rgba(0, 138, 224, 0.1);
|
|
206
206
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
207
207
|
}
|
|
208
|
-
.iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot > .iui-more-options{
|
|
208
|
+
.iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
|
|
209
209
|
visibility:visible;
|
|
210
210
|
}
|
|
211
|
-
.iui-table-body .iui-row:
|
|
211
|
+
.iui-table-body .iui-row:focus-within > .iui-slot:not(.iui-disabled) > .iui-more-options{
|
|
212
212
|
visibility:visible;
|
|
213
213
|
}
|
|
214
214
|
@media (prefers-reduced-motion: no-preference){
|
|
@@ -303,20 +303,20 @@
|
|
|
303
303
|
color:#53a21a;
|
|
304
304
|
color:var(--iui-color-foreground-positive);
|
|
305
305
|
}
|
|
306
|
-
.iui-table-body .iui-row.iui-disabled, .iui-table-body .iui-row.iui-
|
|
306
|
+
.iui-table-body .iui-row .iui-cell.iui-disabled, .iui-table-body .iui-row.iui-expanded-content.iui-disabled{
|
|
307
307
|
font-style:italic;
|
|
308
308
|
cursor:not-allowed;
|
|
309
309
|
color:rgba(0, 0, 0, 0.4);
|
|
310
310
|
color:var(--iui-text-color-muted);
|
|
311
311
|
}
|
|
312
|
-
.iui-table-body .iui-row.iui-disabled
|
|
312
|
+
.iui-table-body .iui-row .iui-cell.iui-disabled.iui-slot:hover > .iui-more-options, .iui-table-body .iui-row.iui-expanded-content.iui-disabled.iui-slot:hover > .iui-more-options{
|
|
313
313
|
visibility:hidden;
|
|
314
314
|
}
|
|
315
|
-
.iui-table-body .iui-row.iui-disabled img,
|
|
316
|
-
.iui-table-body .iui-row.iui-disabled svg:not(.iui-radial),
|
|
317
|
-
.iui-table-body .iui-row.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-
|
|
318
|
-
.iui-table-body .iui-row.iui-
|
|
319
|
-
.iui-table-body .iui-row.iui-
|
|
315
|
+
.iui-table-body .iui-row .iui-cell.iui-disabled img,
|
|
316
|
+
.iui-table-body .iui-row .iui-cell.iui-disabled svg:not(.iui-radial),
|
|
317
|
+
.iui-table-body .iui-row .iui-cell.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-expanded-content.iui-disabled img,
|
|
318
|
+
.iui-table-body .iui-row.iui-expanded-content.iui-disabled svg:not(.iui-radial),
|
|
319
|
+
.iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
|
|
320
320
|
filter:grayscale(100%);
|
|
321
321
|
}
|
|
322
322
|
.iui-table-body .iui-row.iui-positive,
|
package/css/tag.css
CHANGED
|
@@ -77,27 +77,69 @@
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
a.iui-tag{
|
|
80
|
-
|
|
81
|
-
text-decoration:none;
|
|
82
|
-
cursor:pointer;
|
|
80
|
+
--_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
|
|
83
81
|
color:#008ae0;
|
|
82
|
+
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
84
83
|
color:var(--iui-color-foreground-primary);
|
|
84
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
85
|
+
border-radius:3px;
|
|
86
|
+
cursor:pointer;
|
|
87
|
+
text-decoration:none;
|
|
85
88
|
}
|
|
86
89
|
a.iui-tag:focus-visible{
|
|
87
90
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
88
|
-
outline-offset:
|
|
91
|
+
outline-offset:1px;
|
|
89
92
|
}
|
|
90
93
|
@supports not selector(*:focus-visible){
|
|
91
94
|
a.iui-tag:focus{
|
|
92
95
|
outline:1px solid var(--iui-color-foreground-primary);
|
|
93
|
-
outline-offset:
|
|
96
|
+
outline-offset:1px;
|
|
94
97
|
}
|
|
95
98
|
}
|
|
96
99
|
a.iui-tag:hover{
|
|
97
100
|
color:#006bad;
|
|
98
101
|
color:var(--iui-color-foreground-primary-overlay);
|
|
102
|
+
}
|
|
103
|
+
a.iui-tag-external::after{
|
|
104
|
+
content:"";
|
|
105
|
+
display:inline-block;
|
|
106
|
+
width:1.5ch;
|
|
107
|
+
height:1.5ch;
|
|
108
|
+
margin-left:0.5ch;
|
|
109
|
+
vertical-align:-0.1ch;
|
|
110
|
+
background-color:currentColor;
|
|
111
|
+
-webkit-mask:var(--_iui-anchor-external-svg);
|
|
112
|
+
mask:var(--_iui-anchor-external-svg);
|
|
113
|
+
}
|
|
114
|
+
@media (forced-colors: active){
|
|
115
|
+
a.iui-tag-external::after{
|
|
116
|
+
background-color:LinkText;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
a.iui-tag:hover{
|
|
99
120
|
text-decoration:underline;
|
|
100
121
|
}
|
|
122
|
+
@media (prefers-contrast: more){
|
|
123
|
+
a.iui-tag{
|
|
124
|
+
text-decoration:underline;
|
|
125
|
+
}
|
|
126
|
+
a.iui-tag:hover{
|
|
127
|
+
text-decoration:none;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
.iui-theme-light a.iui-tag, .iui-theme-dark a.iui-tag{
|
|
131
|
+
text-decoration:none;
|
|
132
|
+
}
|
|
133
|
+
.iui-theme-light a.iui-tag:hover, .iui-theme-dark a.iui-tag:hover{
|
|
134
|
+
text-decoration:underline;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.iui-theme-light-hc a.iui-tag, .iui-theme-dark-hc a.iui-tag{
|
|
138
|
+
text-decoration:underline;
|
|
139
|
+
}
|
|
140
|
+
.iui-theme-light-hc a.iui-tag:hover, .iui-theme-dark-hc a.iui-tag:hover{
|
|
141
|
+
text-decoration:none;
|
|
142
|
+
}
|
|
101
143
|
|
|
102
144
|
.iui-tag-container{
|
|
103
145
|
color:rgba(0, 0, 0, 0.4);
|
|
@@ -122,17 +122,19 @@
|
|
|
122
122
|
color:rgba(0, 0, 0, 0.8);
|
|
123
123
|
color:var(--iui-text-color);
|
|
124
124
|
}
|
|
125
|
-
.iui-toast
|
|
125
|
+
.iui-toast-anchor{
|
|
126
|
+
text-decoration:underline;
|
|
127
|
+
border-radius:3px;
|
|
128
|
+
cursor:pointer;
|
|
126
129
|
font-size:12px;
|
|
127
130
|
margin-right:16px;
|
|
128
131
|
-webkit-user-select:none;
|
|
129
132
|
-moz-user-select:none;
|
|
130
133
|
-ms-user-select:none;
|
|
131
134
|
user-select:none;
|
|
132
|
-
text-decoration:underline;
|
|
133
135
|
white-space:nowrap;
|
|
134
136
|
}
|
|
135
|
-
.iui-toast
|
|
137
|
+
.iui-toast-anchor:hover{
|
|
136
138
|
text-decoration:none;
|
|
137
139
|
}
|
|
138
140
|
.iui-toast > .iui-button{
|
|
@@ -166,6 +168,26 @@
|
|
|
166
168
|
background-color:#008ae0;
|
|
167
169
|
background-color:var(--iui-color-background-primary);
|
|
168
170
|
}
|
|
171
|
+
.iui-toast.iui-informational > .iui-toast-anchor{
|
|
172
|
+
color:#008ae0;
|
|
173
|
+
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
174
|
+
color:var(--iui-color-foreground-primary);
|
|
175
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
176
|
+
}
|
|
177
|
+
.iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
|
|
178
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
179
|
+
outline-offset:1px;
|
|
180
|
+
}
|
|
181
|
+
@supports not selector(*:focus-visible){
|
|
182
|
+
.iui-toast.iui-informational > .iui-toast-anchor:focus{
|
|
183
|
+
outline:1px solid var(--iui-color-foreground-primary);
|
|
184
|
+
outline-offset:1px;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
.iui-toast.iui-informational > .iui-toast-anchor:hover{
|
|
188
|
+
color:#006bad;
|
|
189
|
+
color:var(--iui-color-foreground-primary-overlay);
|
|
190
|
+
}
|
|
169
191
|
.iui-toast.iui-positive{
|
|
170
192
|
border-color:#53a21a;
|
|
171
193
|
border-color:var(--iui-color-foreground-positive);
|
|
@@ -183,19 +205,34 @@
|
|
|
183
205
|
background-color:#53a21a;
|
|
184
206
|
background-color:var(--iui-color-background-positive);
|
|
185
207
|
}
|
|
186
|
-
.iui-toast.iui-positive > .iui-anchor{
|
|
208
|
+
.iui-toast.iui-positive > .iui-toast-anchor{
|
|
187
209
|
color:#53a21a;
|
|
210
|
+
-webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
|
|
188
211
|
color:var(--iui-color-foreground-positive);
|
|
212
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
|
|
189
213
|
}
|
|
190
|
-
.iui-toast.iui-positive > .iui-anchor:
|
|
191
|
-
color
|
|
192
|
-
|
|
214
|
+
.iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
|
|
215
|
+
outline:1px solid var(--iui-color-foreground-positive);
|
|
216
|
+
outline-offset:1px;
|
|
193
217
|
}
|
|
194
|
-
|
|
195
|
-
|
|
218
|
+
@supports not selector(*:focus-visible){
|
|
219
|
+
.iui-toast.iui-positive > .iui-toast-anchor:focus{
|
|
220
|
+
outline:1px solid var(--iui-color-foreground-positive);
|
|
221
|
+
outline-offset:1px;
|
|
222
|
+
}
|
|
196
223
|
}
|
|
197
|
-
.iui-toast.iui-positive > .iui-
|
|
198
|
-
|
|
224
|
+
.iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
|
|
225
|
+
background-color:rgba(83, 162, 26, 0.2);
|
|
226
|
+
background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
|
|
227
|
+
}
|
|
228
|
+
.iui-toast.iui-positive > .iui-toast-anchor::selection,
|
|
229
|
+
.iui-toast.iui-positive > .iui-toast-anchor *::selection{
|
|
230
|
+
background-color:rgba(83, 162, 26, 0.2);
|
|
231
|
+
background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
|
|
232
|
+
}
|
|
233
|
+
.iui-toast.iui-positive > .iui-toast-anchor:hover{
|
|
234
|
+
color:#3d7613;
|
|
235
|
+
color:var(--iui-color-foreground-positive-overlay);
|
|
199
236
|
}
|
|
200
237
|
.iui-toast.iui-negative{
|
|
201
238
|
border-color:#d10a0a;
|
|
@@ -214,19 +251,34 @@
|
|
|
214
251
|
background-color:#d10a0a;
|
|
215
252
|
background-color:var(--iui-color-background-negative);
|
|
216
253
|
}
|
|
217
|
-
.iui-toast.iui-negative > .iui-anchor{
|
|
254
|
+
.iui-toast.iui-negative > .iui-toast-anchor{
|
|
218
255
|
color:#d10a0a;
|
|
256
|
+
-webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
|
|
219
257
|
color:var(--iui-color-foreground-negative);
|
|
258
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
|
|
220
259
|
}
|
|
221
|
-
.iui-toast.iui-negative > .iui-anchor:
|
|
222
|
-
color
|
|
223
|
-
|
|
260
|
+
.iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
|
|
261
|
+
outline:1px solid var(--iui-color-foreground-negative);
|
|
262
|
+
outline-offset:1px;
|
|
224
263
|
}
|
|
225
|
-
|
|
226
|
-
|
|
264
|
+
@supports not selector(*:focus-visible){
|
|
265
|
+
.iui-toast.iui-negative > .iui-toast-anchor:focus{
|
|
266
|
+
outline:1px solid var(--iui-color-foreground-negative);
|
|
267
|
+
outline-offset:1px;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
.iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
|
|
271
|
+
background-color:rgba(209, 10, 10, 0.2);
|
|
272
|
+
background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
|
|
273
|
+
}
|
|
274
|
+
.iui-toast.iui-negative > .iui-toast-anchor::selection,
|
|
275
|
+
.iui-toast.iui-negative > .iui-toast-anchor *::selection{
|
|
276
|
+
background-color:rgba(209, 10, 10, 0.2);
|
|
277
|
+
background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
|
|
227
278
|
}
|
|
228
|
-
.iui-toast.iui-negative > .iui-
|
|
229
|
-
|
|
279
|
+
.iui-toast.iui-negative > .iui-toast-anchor:hover{
|
|
280
|
+
color:#a10808;
|
|
281
|
+
color:var(--iui-color-foreground-negative-overlay);
|
|
230
282
|
}
|
|
231
283
|
.iui-toast.iui-warning{
|
|
232
284
|
border-color:#f18d13;
|
|
@@ -245,17 +297,32 @@
|
|
|
245
297
|
background-color:#f18d13;
|
|
246
298
|
background-color:var(--iui-color-background-warning);
|
|
247
299
|
}
|
|
248
|
-
.iui-toast.iui-warning > .iui-anchor{
|
|
300
|
+
.iui-toast.iui-warning > .iui-toast-anchor{
|
|
249
301
|
color:#f18d13;
|
|
302
|
+
-webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
|
|
250
303
|
color:var(--iui-color-foreground-warning);
|
|
304
|
+
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
|
|
251
305
|
}
|
|
252
|
-
.iui-toast.iui-warning > .iui-anchor:
|
|
253
|
-
color
|
|
254
|
-
|
|
306
|
+
.iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
|
|
307
|
+
outline:1px solid var(--iui-color-foreground-warning);
|
|
308
|
+
outline-offset:1px;
|
|
309
|
+
}
|
|
310
|
+
@supports not selector(*:focus-visible){
|
|
311
|
+
.iui-toast.iui-warning > .iui-toast-anchor:focus{
|
|
312
|
+
outline:1px solid var(--iui-color-foreground-warning);
|
|
313
|
+
outline-offset:1px;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
.iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
|
|
317
|
+
background-color:rgba(241, 141, 19, 0.2);
|
|
318
|
+
background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
|
|
255
319
|
}
|
|
256
|
-
.iui-toast.iui-warning > .iui-anchor
|
|
257
|
-
|
|
320
|
+
.iui-toast.iui-warning > .iui-toast-anchor::selection,
|
|
321
|
+
.iui-toast.iui-warning > .iui-toast-anchor *::selection{
|
|
322
|
+
background-color:rgba(241, 141, 19, 0.2);
|
|
323
|
+
background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
|
|
258
324
|
}
|
|
259
|
-
.iui-toast.iui-warning > .iui-
|
|
260
|
-
|
|
325
|
+
.iui-toast.iui-warning > .iui-toast-anchor:hover{
|
|
326
|
+
color:#c6720c;
|
|
327
|
+
color:var(--iui-color-foreground-warning-overlay);
|
|
261
328
|
}
|
package/css/tree.css
CHANGED
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
display:inline-flex;
|
|
68
68
|
width:16px;
|
|
69
69
|
height:16px;
|
|
70
|
-
|
|
70
|
+
margin:0 6px;
|
|
71
71
|
flex-shrink:0;
|
|
72
72
|
}
|
|
73
73
|
.iui-tree-node-content-icon.iui-informational{
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
fill:var(--iui-icons-color-negative);
|
|
88
88
|
}
|
|
89
89
|
.iui-tree-node-content-icon:first-child{
|
|
90
|
-
margin-left:
|
|
90
|
+
margin-left:34px;
|
|
91
91
|
}
|
|
92
92
|
@media (prefers-reduced-motion: no-preference){
|
|
93
93
|
.iui-tree-node-content-expander-icon{
|