@itwin/itwinui-css 0.41.0 → 0.43.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 +197 -161
- package/css/button.css +138 -112
- package/css/header.css +16 -14
- package/css/inputs.css +12 -12
- package/css/table.css +31 -23
- package/package.json +1 -1
- package/scss/button/button-group.scss +68 -46
- package/scss/button/split-menu.scss +34 -20
- package/scss/header/header.scss +16 -8
- package/scss/inputs/classes.scss +2 -2
- package/scss/inputs/labeled-inputs.scss +3 -3
- package/scss/style/mixins.scss +1 -1
- package/scss/table/paginator.scss +20 -21
- package/scss/table/table.scss +17 -8
|
@@ -5,72 +5,94 @@
|
|
|
5
5
|
@mixin iui-button-group {
|
|
6
6
|
display: inline-flex;
|
|
7
7
|
align-items: center;
|
|
8
|
+
isolation: isolate;
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
&:not(.iui-borderless) {
|
|
11
|
-
border-radius: 0;
|
|
12
|
-
}
|
|
10
|
+
$childSelector: 'input, button'; // target nested inputs and buttons
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
border-bottom-left-radius: $iui-border-radius;
|
|
17
|
-
}
|
|
12
|
+
> * {
|
|
13
|
+
display: flex;
|
|
18
14
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
border-bottom-right-radius: $iui-border-radius;
|
|
22
|
-
}
|
|
15
|
+
#{$childSelector} {
|
|
16
|
+
position: relative;
|
|
23
17
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
&:hover {
|
|
19
|
+
z-index: 1;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:focus {
|
|
23
|
+
z-index: 2;
|
|
27
24
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
&:where(:not(:focus-visible):not(:hover)) {
|
|
26
|
+
z-index: revert;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:disabled {
|
|
31
|
+
z-index: -1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
transition-duration: 0ms; // disable exit animation to avoid border flicker
|
|
35
|
+
|
|
36
|
+
&:hover,
|
|
37
|
+
&:focus {
|
|
38
|
+
transition-duration: $iui-speed-fast; // re-enable enter animation
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Adds stripe above active button
|
|
42
|
+
&.iui-active {
|
|
43
|
+
&::after {
|
|
44
|
+
content: '';
|
|
45
|
+
position: absolute;
|
|
46
|
+
height: $iui-xxs;
|
|
47
|
+
opacity: 1;
|
|
48
|
+
top: $iui-xxs;
|
|
49
|
+
left: $iui-xxs;
|
|
50
|
+
width: calc(100% - #{$iui-xs});
|
|
32
51
|
@include themed {
|
|
33
|
-
|
|
52
|
+
background-color: t(iui-color-foreground-primary);
|
|
34
53
|
}
|
|
35
54
|
}
|
|
36
55
|
|
|
37
|
-
&:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
56
|
+
&:disabled {
|
|
57
|
+
&::after {
|
|
58
|
+
@include themed {
|
|
59
|
+
background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
|
|
60
|
+
}
|
|
42
61
|
}
|
|
43
62
|
}
|
|
44
63
|
}
|
|
45
64
|
|
|
46
|
-
//
|
|
47
|
-
&:
|
|
48
|
-
|
|
49
|
-
border-left-color: t(iui-color-background-4);
|
|
50
|
-
}
|
|
65
|
+
// Reset border radius only for non-borderless items
|
|
66
|
+
&:not(.iui-borderless) {
|
|
67
|
+
border-radius: 0;
|
|
51
68
|
}
|
|
52
69
|
}
|
|
53
|
-
}
|
|
54
70
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
height: $iui-xxs;
|
|
61
|
-
opacity: 1;
|
|
62
|
-
top: $iui-xxs;
|
|
63
|
-
left: $iui-xxs;
|
|
64
|
-
width: calc(100% - #{$iui-xs});
|
|
65
|
-
@include themed {
|
|
66
|
-
background-color: t(iui-color-foreground-primary);
|
|
71
|
+
// Add rounded corners to first and last items
|
|
72
|
+
&:first-child {
|
|
73
|
+
#{$childSelector}:not(.iui-borderless) {
|
|
74
|
+
border-top-left-radius: $iui-border-radius;
|
|
75
|
+
border-bottom-left-radius: $iui-border-radius;
|
|
67
76
|
}
|
|
68
77
|
}
|
|
69
78
|
|
|
70
|
-
&:
|
|
71
|
-
|
|
79
|
+
&:last-child {
|
|
80
|
+
#{$childSelector}:not(.iui-borderless) {
|
|
81
|
+
border-top-right-radius: $iui-border-radius;
|
|
82
|
+
border-bottom-right-radius: $iui-border-radius;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Use negative margin to make adjacent borders overlap
|
|
87
|
+
&:not(:last-child) {
|
|
88
|
+
margin-right: -1px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Add slight border between disabled items
|
|
92
|
+
&:not(:first-child) {
|
|
93
|
+
.iui-default:disabled {
|
|
72
94
|
@include themed {
|
|
73
|
-
|
|
95
|
+
border-left-color: t(iui-color-background-4);
|
|
74
96
|
}
|
|
75
97
|
}
|
|
76
98
|
}
|
|
@@ -11,31 +11,45 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
> * {
|
|
15
|
+
&:first-child {
|
|
16
|
+
> .iui-borderless:hover {
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
}
|
|
17
19
|
}
|
|
18
|
-
}
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
// Sizes
|
|
22
|
+
&:last-child {
|
|
23
|
+
> .iui-button {
|
|
24
|
+
padding: $iui-xs;
|
|
25
|
+
}
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
> .iui-small {
|
|
28
|
+
padding: $iui-xxs;
|
|
29
|
+
}
|
|
28
30
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
> .iui-large {
|
|
32
|
+
padding: $iui-s;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
32
35
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
// Border between buttons for high-visibility and cta
|
|
37
|
+
&:first-child {
|
|
38
|
+
> .iui-high-visibility,
|
|
39
|
+
> .iui-cta {
|
|
40
|
+
@include themed {
|
|
41
|
+
border-right-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:last-child {
|
|
47
|
+
> .iui-high-visibility,
|
|
48
|
+
> .iui-cta {
|
|
49
|
+
@include themed {
|
|
50
|
+
border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
39
53
|
}
|
|
40
54
|
}
|
|
41
55
|
|
package/scss/header/header.scss
CHANGED
|
@@ -314,9 +314,13 @@
|
|
|
314
314
|
}
|
|
315
315
|
|
|
316
316
|
@mixin iui-header-split-button {
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
317
|
+
&,
|
|
318
|
+
> * {
|
|
319
|
+
height: 100%;
|
|
320
|
+
display: flex;
|
|
321
|
+
overflow: hidden;
|
|
322
|
+
}
|
|
323
|
+
|
|
320
324
|
max-width: 25vw;
|
|
321
325
|
|
|
322
326
|
.iui-button {
|
|
@@ -324,8 +328,10 @@
|
|
|
324
328
|
padding: 0 $iui-xs;
|
|
325
329
|
}
|
|
326
330
|
|
|
327
|
-
|
|
328
|
-
|
|
331
|
+
> *:first-child {
|
|
332
|
+
.iui-button {
|
|
333
|
+
padding-left: $iui-sm;
|
|
334
|
+
}
|
|
329
335
|
}
|
|
330
336
|
|
|
331
337
|
&.iui-active {
|
|
@@ -343,8 +349,10 @@
|
|
|
343
349
|
display: none;
|
|
344
350
|
}
|
|
345
351
|
}
|
|
352
|
+
}
|
|
346
353
|
|
|
347
|
-
|
|
354
|
+
> *:last-child {
|
|
355
|
+
> .iui-button:hover {
|
|
348
356
|
@include themed {
|
|
349
357
|
background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
|
|
350
358
|
}
|
|
@@ -415,13 +423,13 @@
|
|
|
415
423
|
box-shadow: 0 $iui-xxs 0 0 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
|
|
416
424
|
}
|
|
417
425
|
|
|
418
|
-
.iui-label {
|
|
426
|
+
.iui-button-label {
|
|
419
427
|
@include themed {
|
|
420
428
|
color: t(iui-icons-color-actionable-disabled);
|
|
421
429
|
}
|
|
422
430
|
}
|
|
423
431
|
|
|
424
|
-
.iui-icon,
|
|
432
|
+
.iui-button-icon,
|
|
425
433
|
svg {
|
|
426
434
|
@include themed {
|
|
427
435
|
fill: t(iui-icons-color-actionable-disabled);
|
package/scss/inputs/classes.scss
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@include iui-input-container-label;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.iui-input-icon {
|
|
12
|
+
> .iui-input-icon {
|
|
13
13
|
@include iui-input-icon;
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
&.iui-inline-icon {
|
|
27
|
-
.iui-input-icon {
|
|
27
|
+
> .iui-input-icon {
|
|
28
28
|
@include iui-input-icon-inline;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
'label label'
|
|
14
14
|
'inputs inputs' / auto 1fr;
|
|
15
15
|
|
|
16
|
-
&.iui-inline-icon:not(.iui-inline-label) .iui-input-icon {
|
|
16
|
+
&.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon {
|
|
17
17
|
// stylelint-disable -- fix position in IE
|
|
18
18
|
-ms-grid-row: 2;
|
|
19
19
|
-ms-grid-column: 2;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
'icon message' / auto 1fr;
|
|
39
39
|
|
|
40
40
|
// add margin to the icon if it is below input
|
|
41
|
-
&:not(.iui-inline-icon) .iui-input-icon {
|
|
41
|
+
&:not(.iui-inline-icon) > .iui-input-icon {
|
|
42
42
|
margin-top: $iui-component-offset;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
'label inputs inputs'
|
|
106
106
|
'. icon message' / auto auto 1fr;
|
|
107
107
|
|
|
108
|
-
&:not(.iui-inline-icon) .iui-input-icon {
|
|
108
|
+
&:not(.iui-inline-icon) > .iui-input-icon {
|
|
109
109
|
// stylelint-disable -- fix position in IE
|
|
110
110
|
-ms-grid-row: 2;
|
|
111
111
|
-ms-grid-column: 2;
|
package/scss/style/mixins.scss
CHANGED
|
@@ -38,32 +38,31 @@
|
|
|
38
38
|
.iui-button-group {
|
|
39
39
|
margin: 0 $iui-s;
|
|
40
40
|
|
|
41
|
-
>
|
|
42
|
-
|
|
43
|
-
width: $iui-component-height;
|
|
41
|
+
> * {
|
|
42
|
+
margin-right: 0; // unset negative margin from button-group
|
|
44
43
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
44
|
+
> .iui-button,
|
|
45
|
+
> .iui-ellipsis {
|
|
46
|
+
width: $iui-component-height;
|
|
49
47
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
&.iui-small {
|
|
49
|
+
width: $iui-component-height-small;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
54
52
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
> .iui-ellipsis {
|
|
54
|
+
display: flex;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
align-items: center;
|
|
57
|
+
@include themed {
|
|
58
|
+
color: t(iui-text-color-muted);
|
|
59
|
+
}
|
|
61
60
|
}
|
|
62
|
-
}
|
|
63
61
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
> .iui-active::after {
|
|
63
|
+
top: auto;
|
|
64
|
+
bottom: $iui-xxs;
|
|
65
|
+
}
|
|
67
66
|
}
|
|
68
67
|
}
|
|
69
68
|
}
|
package/scss/table/table.scss
CHANGED
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
box-sizing: border-box;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
&.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected) {
|
|
17
|
-
@include themed {
|
|
18
|
-
background: rgba(t(iui-color-foreground-body-rgb), 0.02);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
16
|
@include iui-table-cell-icon;
|
|
23
17
|
}
|
|
24
18
|
|
|
25
19
|
@mixin iui-table-header {
|
|
26
20
|
user-select: none;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
// Fix for Firefox columns misalignment
|
|
23
|
+
@supports not (overflow: overlay) {
|
|
24
|
+
overflow-y: scroll;
|
|
25
|
+
}
|
|
26
|
+
flex-shrink: 0;
|
|
27
27
|
@include themed {
|
|
28
28
|
background-color: t(iui-color-background-3);
|
|
29
29
|
}
|
|
@@ -123,18 +123,26 @@
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
@mixin iui-table-body {
|
|
126
|
-
overflow-x: hidden;
|
|
127
126
|
overflow-y: scroll;
|
|
128
|
-
overflow
|
|
127
|
+
overflow: overlay;
|
|
129
128
|
display: flex;
|
|
130
129
|
flex-direction: column;
|
|
131
130
|
flex-grow: 1;
|
|
131
|
+
// Allows columns with static width to take more space than the table width
|
|
132
|
+
align-items: flex-start;
|
|
132
133
|
@include iui-scroll-snapping('.iui-row');
|
|
133
134
|
@include themed {
|
|
134
135
|
background-color: t(iui-color-background-1);
|
|
135
136
|
}
|
|
136
137
|
|
|
138
|
+
&.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected) {
|
|
139
|
+
@include themed {
|
|
140
|
+
background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
137
144
|
.iui-row {
|
|
145
|
+
min-width: 100%;
|
|
138
146
|
display: flex;
|
|
139
147
|
border: solid 1px transparent;
|
|
140
148
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -296,6 +304,7 @@
|
|
|
296
304
|
justify-content: center;
|
|
297
305
|
align-items: center;
|
|
298
306
|
flex-grow: 1;
|
|
307
|
+
align-self: center;
|
|
299
308
|
@include themed {
|
|
300
309
|
color: t(iui-text-color-muted);
|
|
301
310
|
background-color: t(iui-color-background-1);
|