@itwin/itwinui-css 0.56.0 → 0.59.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/all.css +706 -346
- package/css/anchor.css +21 -17
- package/css/breadcrumbs.css +312 -57
- package/css/button.css +9 -12
- package/css/dialog.css +201 -0
- package/css/footer.css +1 -17
- package/css/global.css +1 -17
- package/css/information-panel.css +2 -2
- package/css/radio-tile.css +9 -13
- package/css/side-navigation.css +1 -1
- package/css/table.css +148 -61
- package/css/tag.css +1 -17
- package/package.json +1 -1
- package/scss/anchor/classes.scss +4 -0
- package/scss/breadcrumbs/breadcrumbs.scss +77 -18
- package/scss/breadcrumbs/classes.scss +12 -0
- package/scss/button/button.scss +17 -16
- package/scss/button/classes.scss +4 -0
- package/scss/button/cta.scss +3 -1
- package/scss/button/default.scss +0 -2
- package/scss/button/high-visibility.scss +3 -1
- package/scss/classes.scss +1 -1
- package/scss/dialog/classes.scss +47 -0
- package/scss/dialog/dialog.scss +213 -0
- package/scss/{modal → dialog}/index.scss +1 -1
- package/scss/index.scss +1 -1
- package/scss/information-panel/information-panel.scss +2 -2
- package/scss/radio-tile/radio-tile.scss +12 -17
- package/scss/side-navigation/side-navigation.scss +2 -2
- package/scss/style/anchor.scss +19 -16
- package/scss/style/elevation.scss +6 -5
- package/scss/table/classes.scss +16 -0
- package/scss/table/condensed.scss +4 -1
- package/scss/table/extra-condensed.scss +8 -1
- package/scss/table/paginator.scss +4 -0
- package/scss/table/table.scss +137 -37
- package/css/modal.css +0 -132
- package/scss/modal/classes.scss +0 -15
- package/scss/modal/modal.scss +0 -155
package/css/dialog.css
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
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-dialog-backdrop{
|
|
6
|
+
margin:0;
|
|
7
|
+
padding:0;
|
|
8
|
+
border:none;
|
|
9
|
+
vertical-align:baseline;
|
|
10
|
+
z-index:999;
|
|
11
|
+
isolation:isolate;
|
|
12
|
+
position:fixed;
|
|
13
|
+
top:0;
|
|
14
|
+
left:0;
|
|
15
|
+
width:100%;
|
|
16
|
+
height:100%;
|
|
17
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
18
|
+
background-color:rgba(0, 0, 0, var(--iui-opacity-4));
|
|
19
|
+
visibility:hidden;
|
|
20
|
+
opacity:0;
|
|
21
|
+
transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
|
|
22
|
+
}
|
|
23
|
+
.iui-dialog-backdrop.iui-dialog-visible{
|
|
24
|
+
visibility:visible;
|
|
25
|
+
opacity:1;
|
|
26
|
+
transition-delay:0s;
|
|
27
|
+
}
|
|
28
|
+
.iui-dialog-backdrop.iui-dialog-backdrop-relative{
|
|
29
|
+
position:relative;
|
|
30
|
+
overflow:hidden;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.iui-dialog{
|
|
34
|
+
border-radius:3px;
|
|
35
|
+
box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
|
|
36
|
+
box-sizing:border-box;
|
|
37
|
+
position:absolute;
|
|
38
|
+
padding:11px 16px;
|
|
39
|
+
box-sizing:border-box;
|
|
40
|
+
padding:11px 16px;
|
|
41
|
+
overflow:hidden;
|
|
42
|
+
background-color:white;
|
|
43
|
+
background-color:var(--iui-color-background-1);
|
|
44
|
+
}
|
|
45
|
+
@media (forced-colors: active){
|
|
46
|
+
.iui-dialog{
|
|
47
|
+
border:1px solid;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.iui-dialog-default .iui-dialog{
|
|
52
|
+
left:50%;
|
|
53
|
+
top:33%;
|
|
54
|
+
transform:translate(-50%, -33%);
|
|
55
|
+
max-width:50%;
|
|
56
|
+
min-width:380px;
|
|
57
|
+
max-height:100vh;
|
|
58
|
+
}
|
|
59
|
+
@media screen and (max-width: 400px){
|
|
60
|
+
.iui-dialog-default .iui-dialog{
|
|
61
|
+
max-width:95%;
|
|
62
|
+
width:95%;
|
|
63
|
+
min-width:95%;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (prefers-reduced-motion: no-preference){
|
|
68
|
+
.iui-dialog-full-page{
|
|
69
|
+
transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
.iui-dialog-full-page .iui-dialog{
|
|
73
|
+
border-radius:0;
|
|
74
|
+
height:100vh;
|
|
75
|
+
width:100vw;
|
|
76
|
+
top:0;
|
|
77
|
+
left:0;
|
|
78
|
+
max-width:initial;
|
|
79
|
+
min-width:initial;
|
|
80
|
+
display:flex;
|
|
81
|
+
flex-direction:column;
|
|
82
|
+
will-change:transform;
|
|
83
|
+
}
|
|
84
|
+
@media (prefers-reduced-motion: no-preference){
|
|
85
|
+
.iui-dialog-full-page .iui-dialog{
|
|
86
|
+
transform:translateY(100%);
|
|
87
|
+
transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
.iui-dialog-full-page.iui-dialog-visible .iui-dialog{
|
|
91
|
+
transform:translateY(0);
|
|
92
|
+
}
|
|
93
|
+
@media (prefers-reduced-motion: no-preference){
|
|
94
|
+
.iui-dialog-full-page.iui-dialog-visible .iui-dialog{
|
|
95
|
+
transition:transform 0.4s ease-out;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.iui-dialog-draggable{
|
|
100
|
+
background-color:transparent;
|
|
101
|
+
pointer-events:none;
|
|
102
|
+
z-index:998;
|
|
103
|
+
}
|
|
104
|
+
.iui-dialog-draggable .iui-dialog{
|
|
105
|
+
pointer-events:initial;
|
|
106
|
+
max-width:100vw;
|
|
107
|
+
max-height:100vh;
|
|
108
|
+
min-width:380px;
|
|
109
|
+
min-height:144px;
|
|
110
|
+
display:flex;
|
|
111
|
+
flex-direction:column;
|
|
112
|
+
padding:0;
|
|
113
|
+
border:1px solid #c7ccd1;
|
|
114
|
+
border:1px solid var(--iui-color-background-border);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.iui-dialog-title{
|
|
118
|
+
font-size:inherit;
|
|
119
|
+
white-space:nowrap;
|
|
120
|
+
overflow:hidden;
|
|
121
|
+
text-overflow:ellipsis;
|
|
122
|
+
line-height:1.5;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.iui-dialog-title-bar{
|
|
126
|
+
display:flex;
|
|
127
|
+
align-items:center;
|
|
128
|
+
margin-bottom:11px;
|
|
129
|
+
justify-content:space-between;
|
|
130
|
+
box-sizing:border-box;
|
|
131
|
+
font-size:18px;
|
|
132
|
+
}
|
|
133
|
+
.iui-dialog-draggable .iui-dialog-title-bar{
|
|
134
|
+
-webkit-user-select:none;
|
|
135
|
+
-moz-user-select:none;
|
|
136
|
+
-ms-user-select:none;
|
|
137
|
+
user-select:none;
|
|
138
|
+
font-size:16px;
|
|
139
|
+
padding:6px 16px;
|
|
140
|
+
cursor:-webkit-grab;
|
|
141
|
+
cursor:grab;
|
|
142
|
+
background-color:#edeff2;
|
|
143
|
+
border-bottom:1px solid #c7ccd1;
|
|
144
|
+
background-color:var(--iui-color-background-3);
|
|
145
|
+
border-bottom:1px solid var(--iui-color-background-border);
|
|
146
|
+
}
|
|
147
|
+
.iui-dialog-draggable .iui-dialog-title-bar:active{
|
|
148
|
+
cursor:-webkit-grabbing;
|
|
149
|
+
cursor:grabbing;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.iui-dialog-content{
|
|
153
|
+
flex-grow:2;
|
|
154
|
+
margin:0 -16px;
|
|
155
|
+
padding:0 16px;
|
|
156
|
+
overflow-y:auto;
|
|
157
|
+
overflow-y:overlay;
|
|
158
|
+
}
|
|
159
|
+
.iui-dialog-draggable .iui-dialog-content{
|
|
160
|
+
margin:0;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.iui-dialog-button-bar{
|
|
164
|
+
margin-top:11px;
|
|
165
|
+
display:flex;
|
|
166
|
+
align-items:center;
|
|
167
|
+
justify-content:flex-end;
|
|
168
|
+
}
|
|
169
|
+
.iui-dialog-draggable .iui-dialog-button-bar{
|
|
170
|
+
padding:0 16px 11px 16px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.iui-dialog-button-bar > .iui-button:not(:last-child){
|
|
174
|
+
margin-right:8px;
|
|
175
|
+
}
|
|
176
|
+
@supports ((-moz-column-gap: 8px) or (column-gap: 8px)){
|
|
177
|
+
.iui-dialog-button-bar{
|
|
178
|
+
-moz-column-gap:8px;
|
|
179
|
+
column-gap:8px;
|
|
180
|
+
}
|
|
181
|
+
.iui-dialog-button-bar > .iui-button:not(:last-child){
|
|
182
|
+
margin-right:0;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.iui-dialog-animation-enter .iui-dialog-full-page .iui-dialog{
|
|
187
|
+
transform:translateY(100%);
|
|
188
|
+
opacity:0;
|
|
189
|
+
}
|
|
190
|
+
.iui-dialog-animation-enter-active .iui-dialog-full-page .iui-dialog{
|
|
191
|
+
transform:translateY(0);
|
|
192
|
+
opacity:1;
|
|
193
|
+
}
|
|
194
|
+
.iui-dialog-animation-enter .iui-dialog-backdrop{
|
|
195
|
+
visibility:hidden;
|
|
196
|
+
opacity:0;
|
|
197
|
+
}
|
|
198
|
+
.iui-dialog-animation-enter-active .iui-dialog-backdrop{
|
|
199
|
+
visibility:visible;
|
|
200
|
+
opacity:1;
|
|
201
|
+
}
|
package/css/footer.css
CHANGED
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
background-color:var(--iui-text-color-muted);
|
|
42
42
|
}
|
|
43
43
|
.iui-legal-footer > ul > li > a{
|
|
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>");
|
|
45
44
|
color:#008ae0;
|
|
46
45
|
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
47
46
|
color:var(--iui-color-foreground-primary);
|
|
48
47
|
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
49
48
|
border-radius:3px;
|
|
49
|
+
box-sizing:border-box;
|
|
50
50
|
cursor:pointer;
|
|
51
51
|
text-decoration:none;
|
|
52
52
|
}
|
|
@@ -64,22 +64,6 @@
|
|
|
64
64
|
color:#006bad;
|
|
65
65
|
color:var(--iui-color-foreground-primary-overlay);
|
|
66
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
67
|
.iui-legal-footer > ul > li > a:hover{
|
|
84
68
|
text-decoration:underline;
|
|
85
69
|
}
|
package/css/global.css
CHANGED
|
@@ -583,12 +583,12 @@ html.iui-theme-dark-hc{
|
|
|
583
583
|
}
|
|
584
584
|
|
|
585
585
|
.iui-anchor{
|
|
586
|
-
--_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>");
|
|
587
586
|
color:#008ae0;
|
|
588
587
|
-webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
|
|
589
588
|
color:var(--iui-color-foreground-primary);
|
|
590
589
|
-webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
591
590
|
border-radius:3px;
|
|
591
|
+
box-sizing:border-box;
|
|
592
592
|
cursor:pointer;
|
|
593
593
|
text-decoration:none;
|
|
594
594
|
}
|
|
@@ -606,22 +606,6 @@ html.iui-theme-dark-hc{
|
|
|
606
606
|
color:#006bad;
|
|
607
607
|
color:var(--iui-color-foreground-primary-overlay);
|
|
608
608
|
}
|
|
609
|
-
.iui-anchor-external::after{
|
|
610
|
-
content:"";
|
|
611
|
-
display:inline-block;
|
|
612
|
-
width:1.5ch;
|
|
613
|
-
height:1.5ch;
|
|
614
|
-
margin-left:0.5ch;
|
|
615
|
-
vertical-align:-0.1ch;
|
|
616
|
-
background-color:currentColor;
|
|
617
|
-
-webkit-mask:var(--_iui-anchor-external-svg);
|
|
618
|
-
mask:var(--_iui-anchor-external-svg);
|
|
619
|
-
}
|
|
620
|
-
@media (forced-colors: active){
|
|
621
|
-
.iui-anchor-external::after{
|
|
622
|
-
background-color:LinkText;
|
|
623
|
-
}
|
|
624
|
-
}
|
|
625
609
|
.iui-anchor:hover{
|
|
626
610
|
text-decoration:underline;
|
|
627
611
|
}
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
min-width:192px;
|
|
99
99
|
height:100%;
|
|
100
100
|
transform:translateX(100%);
|
|
101
|
-
box-shadow:-1px 0
|
|
101
|
+
box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
|
|
102
102
|
-webkit-clip-path:inset(0 0 0 -15px);
|
|
103
103
|
clip-path:inset(0 0 0 -15px);
|
|
104
104
|
}
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
min-height:192px;
|
|
132
132
|
width:100%;
|
|
133
133
|
transform:translateY(100%);
|
|
134
|
-
box-shadow:0 -1px
|
|
134
|
+
box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
|
|
135
135
|
-webkit-clip-path:inset(-15px 0 0 0);
|
|
136
136
|
clip-path:inset(-15px 0 0 0);
|
|
137
137
|
}
|
package/css/radio-tile.css
CHANGED
|
@@ -39,12 +39,12 @@
|
|
|
39
39
|
border-color:rgba(0, 0, 0, 0.8);
|
|
40
40
|
border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
|
|
41
41
|
}
|
|
42
|
-
.iui-radio-tile-content:hover
|
|
42
|
+
.iui-radio-tile-content:hover .iui-radio-tile-icon{
|
|
43
43
|
fill:rgba(0, 0, 0, 0.8);
|
|
44
44
|
fill:var(--iui-icons-color-actionable);
|
|
45
45
|
}
|
|
46
46
|
@media (forced-colors: active){
|
|
47
|
-
.iui-radio-tile-content:hover
|
|
47
|
+
.iui-radio-tile-content:hover .iui-radio-tile-icon{
|
|
48
48
|
fill:CanvasText;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
@@ -102,12 +102,12 @@
|
|
|
102
102
|
border-color:Highlight;
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
.iui-radio-tile-input:checked + *
|
|
105
|
+
.iui-radio-tile-input:checked + * .iui-radio-tile-icon{
|
|
106
106
|
fill:#008ae0;
|
|
107
107
|
fill:var(--iui-icons-color-primary);
|
|
108
108
|
}
|
|
109
109
|
@media (forced-colors: active){
|
|
110
|
-
.iui-radio-tile-input:checked + *
|
|
110
|
+
.iui-radio-tile-input:checked + * .iui-radio-tile-icon{
|
|
111
111
|
fill:Highlight;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
@@ -145,18 +145,16 @@
|
|
|
145
145
|
background-color:GrayText;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
-
.iui-radio-tile-input:disabled + *
|
|
148
|
+
.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
|
|
149
|
+
filter:grayscale(100%);
|
|
149
150
|
fill:rgba(0, 0, 0, 0.2);
|
|
150
151
|
fill:var(--iui-icons-color-actionable-disabled);
|
|
151
152
|
}
|
|
152
153
|
@media (forced-colors: active){
|
|
153
|
-
.iui-radio-tile-input:disabled + *
|
|
154
|
+
.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
|
|
154
155
|
fill:GrayText;
|
|
155
156
|
}
|
|
156
157
|
}
|
|
157
|
-
.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
|
|
158
|
-
filter:grayscale(100%);
|
|
159
|
-
}
|
|
160
158
|
@media (forced-colors: active){
|
|
161
159
|
.iui-radio-tile-input:disabled + * .iui-radio-tile-label,
|
|
162
160
|
.iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
|
|
@@ -185,18 +183,16 @@
|
|
|
185
183
|
margin:0 auto;
|
|
186
184
|
padding-top:6px;
|
|
187
185
|
padding-bottom:11px;
|
|
188
|
-
}
|
|
189
|
-
.iui-radio-tile-icon svg{
|
|
190
186
|
fill:rgba(0, 0, 0, 0.4);
|
|
191
187
|
fill:var(--iui-icons-color);
|
|
192
188
|
}
|
|
193
189
|
@media (prefers-reduced-motion: no-preference){
|
|
194
|
-
.iui-radio-tile-icon
|
|
190
|
+
.iui-radio-tile-icon{
|
|
195
191
|
transition:fill 0.2s ease-out;
|
|
196
192
|
}
|
|
197
193
|
}
|
|
198
194
|
@media (forced-colors: active){
|
|
199
|
-
.iui-radio-tile-icon
|
|
195
|
+
.iui-radio-tile-icon{
|
|
200
196
|
fill:CanvasText;
|
|
201
197
|
}
|
|
202
198
|
}
|
package/css/side-navigation.css
CHANGED
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
border-right:none;
|
|
72
72
|
overflow:hidden;
|
|
73
73
|
justify-content:flex-start;
|
|
74
|
-
--_iui-button-active-stripe-inset:0 calc(100% - 2px)
|
|
74
|
+
--_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
|
|
75
75
|
}
|
|
76
76
|
.iui-side-navigation .iui-sidenav-button:not(.iui-expand){
|
|
77
77
|
height:55px;
|