@itwin/itwinui-css 0.39.1 → 0.40.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 +343 -262
- package/css/breadcrumbs.css +26 -15
- package/css/button.css +192 -137
- package/css/code.css +2 -0
- package/css/header.css +34 -16
- package/css/inputs.css +14 -28
- package/css/side-navigation.css +27 -24
- package/css/table.css +2 -2
- package/css/tile.css +46 -40
- package/package.json +1 -1
- package/scss/breadcrumbs/breadcrumbs.scss +1 -1
- package/scss/button/borderless.scss +30 -39
- package/scss/button/button-group.scss +3 -3
- package/scss/button/button-icon.scss +12 -0
- package/scss/button/button.scss +27 -32
- package/scss/button/classes.scss +25 -3
- package/scss/button/cta.scss +22 -19
- package/scss/button/default.scss +29 -41
- package/scss/button/disabled.scss +3 -14
- package/scss/button/high-visibility.scss +22 -19
- package/scss/button/index.scss +1 -0
- package/scss/button/split-menu.scss +5 -0
- package/scss/code/codeblock.scss +4 -0
- package/scss/header/header.scss +22 -10
- package/scss/inputs/checkbox-radio.scss +1 -3
- package/scss/inputs/checkbox.scss +5 -2
- package/scss/side-navigation/side-navigation.scss +27 -22
- package/scss/table/table.scss +2 -2
- package/scss/tile/tile.scss +4 -2
package/css/header.css
CHANGED
|
@@ -40,7 +40,14 @@
|
|
|
40
40
|
.iui-page-header .iui-header-button-icon{
|
|
41
41
|
transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
|
|
42
42
|
.iui-page-header .iui-header-button.iui-header-button{
|
|
43
|
+
padding:0 12px;
|
|
44
|
+
height:49px;
|
|
45
|
+
font-size:16px;
|
|
46
|
+
gap:12px;
|
|
47
|
+
gap:0;
|
|
43
48
|
max-width:25vw;
|
|
49
|
+
height:100%;
|
|
50
|
+
border-radius:0;
|
|
44
51
|
overflow:hidden;
|
|
45
52
|
padding-right:8px; }
|
|
46
53
|
.iui-page-header .iui-header-button.iui-header-button:focus{
|
|
@@ -50,22 +57,24 @@
|
|
|
50
57
|
outline:1px solid var(--iui-color-foreground-primary); }
|
|
51
58
|
.iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
|
|
52
59
|
outline:0; }
|
|
53
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label{
|
|
60
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
|
|
54
61
|
text-align:left;
|
|
55
62
|
font-size:14px;
|
|
56
63
|
overflow:hidden; }
|
|
57
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label > div{
|
|
64
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
|
|
58
65
|
overflow:hidden;
|
|
59
66
|
text-overflow:ellipsis; }
|
|
60
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
|
|
67
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
|
|
61
68
|
height:22px;
|
|
62
69
|
opacity:0.6;
|
|
63
70
|
opacity:var(--iui-opacity-3); }
|
|
64
71
|
@media (prefers-reduced-motion: no-preference){
|
|
65
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
|
|
72
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
|
|
66
73
|
transition:all 0.2s ease; } }
|
|
67
|
-
.iui-page-header .iui-header-button.iui-header-button > .iui-icon{
|
|
74
|
+
.iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
|
|
68
75
|
flex-shrink:0; }
|
|
76
|
+
.iui-page-header .iui-header-button.iui-header-button > * + *{
|
|
77
|
+
margin-left:12px; }
|
|
69
78
|
.iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
|
|
70
79
|
padding:4px;
|
|
71
80
|
width:16px;
|
|
@@ -91,7 +100,7 @@
|
|
|
91
100
|
background-color:rgba(0, 139, 225, 0.1);
|
|
92
101
|
fill:var(--iui-icons-color-primary);
|
|
93
102
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
94
|
-
.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-label{
|
|
103
|
+
.iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
|
|
95
104
|
color:#008BE1;
|
|
96
105
|
color:var(--iui-color-foreground-primary); }
|
|
97
106
|
.iui-page-header .iui-header-button.iui-header-button.iui-active:focus{
|
|
@@ -122,7 +131,7 @@
|
|
|
122
131
|
width:12px;
|
|
123
132
|
height:12px;
|
|
124
133
|
padding:2px; }
|
|
125
|
-
.iui-page-header.iui-slim > .iui-left .iui-button
|
|
134
|
+
.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
|
|
126
135
|
opacity:0;
|
|
127
136
|
height:0.1px;
|
|
128
137
|
width:0.1px;
|
|
@@ -134,7 +143,14 @@
|
|
|
134
143
|
overflow:hidden;
|
|
135
144
|
max-width:25vw; }
|
|
136
145
|
.iui-page-header .iui-header-split-button .iui-button{
|
|
146
|
+
padding:0 12px;
|
|
147
|
+
height:49px;
|
|
148
|
+
font-size:16px;
|
|
149
|
+
gap:12px;
|
|
150
|
+
gap:0;
|
|
137
151
|
max-width:25vw;
|
|
152
|
+
height:100%;
|
|
153
|
+
border-radius:0;
|
|
138
154
|
overflow:hidden;
|
|
139
155
|
padding-right:8px;
|
|
140
156
|
padding:0 4px; }
|
|
@@ -145,22 +161,24 @@
|
|
|
145
161
|
outline:1px solid var(--iui-color-foreground-primary); }
|
|
146
162
|
.iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
|
|
147
163
|
outline:0; }
|
|
148
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label{
|
|
164
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
|
|
149
165
|
text-align:left;
|
|
150
166
|
font-size:14px;
|
|
151
167
|
overflow:hidden; }
|
|
152
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label > div{
|
|
168
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
|
|
153
169
|
overflow:hidden;
|
|
154
170
|
text-overflow:ellipsis; }
|
|
155
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
|
|
171
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
|
|
156
172
|
height:22px;
|
|
157
173
|
opacity:0.6;
|
|
158
174
|
opacity:var(--iui-opacity-3); }
|
|
159
175
|
@media (prefers-reduced-motion: no-preference){
|
|
160
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
|
|
176
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
|
|
161
177
|
transition:all 0.2s ease; } }
|
|
162
|
-
.iui-page-header .iui-header-split-button .iui-button > .iui-icon{
|
|
178
|
+
.iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
|
|
163
179
|
flex-shrink:0; }
|
|
180
|
+
.iui-page-header .iui-header-split-button .iui-button > * + *{
|
|
181
|
+
margin-left:12px; }
|
|
164
182
|
.iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
|
|
165
183
|
padding:4px;
|
|
166
184
|
width:16px;
|
|
@@ -186,7 +204,7 @@
|
|
|
186
204
|
background-color:rgba(0, 139, 225, 0.1);
|
|
187
205
|
fill:var(--iui-icons-color-primary);
|
|
188
206
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
189
|
-
.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-label{
|
|
207
|
+
.iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
|
|
190
208
|
color:#008BE1;
|
|
191
209
|
color:var(--iui-color-foreground-primary); }
|
|
192
210
|
.iui-page-header .iui-header-split-button .iui-button.iui-active:focus{
|
|
@@ -217,7 +235,7 @@
|
|
|
217
235
|
width:12px;
|
|
218
236
|
height:12px;
|
|
219
237
|
padding:2px; }
|
|
220
|
-
.iui-page-header.iui-slim > .iui-left .iui-button
|
|
238
|
+
.iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
|
|
221
239
|
opacity:0;
|
|
222
240
|
height:0.1px;
|
|
223
241
|
width:0.1px;
|
|
@@ -238,7 +256,7 @@
|
|
|
238
256
|
background-color:rgba(0, 139, 225, 0.1);
|
|
239
257
|
fill:var(--iui-icons-color-primary);
|
|
240
258
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
|
|
241
|
-
.iui-page-header .iui-header-split-button.iui-active .iui-label{
|
|
259
|
+
.iui-page-header .iui-header-split-button.iui-active .iui-button-label{
|
|
242
260
|
color:#008BE1;
|
|
243
261
|
color:var(--iui-color-foreground-primary); }
|
|
244
262
|
.iui-page-header .iui-header-split-button.iui-active:focus{
|
|
@@ -343,7 +361,7 @@
|
|
|
343
361
|
width:0.1px;
|
|
344
362
|
margin:0;
|
|
345
363
|
padding:0; }
|
|
346
|
-
.iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-label{
|
|
364
|
+
.iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
|
|
347
365
|
margin-left:0; } }
|
|
348
366
|
@media (max-width: 1024px){
|
|
349
367
|
.iui-page-header .iui-left .iui-header-logo > .iui-label{
|
package/css/inputs.css
CHANGED
|
@@ -711,22 +711,14 @@
|
|
|
711
711
|
.iui-checkbox .iui-radio-dot svg:not(.iui-radial){
|
|
712
712
|
width:12px;
|
|
713
713
|
height:12px; }
|
|
714
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
715
|
-
.iui-checkbox .iui-
|
|
716
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
717
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
|
|
718
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
719
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
|
|
714
|
+
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
715
|
+
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
|
|
720
716
|
opacity:0;
|
|
721
717
|
fill:#008BE1;
|
|
722
718
|
fill:var(--iui-icons-color-primary); }
|
|
723
719
|
@media (prefers-reduced-motion: no-preference){
|
|
724
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
725
|
-
.iui-checkbox .iui-
|
|
726
|
-
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
727
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
|
|
728
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
729
|
-
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
|
|
720
|
+
.iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
721
|
+
.iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
|
|
730
722
|
transition:opacity 0.2s ease; } }
|
|
731
723
|
.iui-checkbox > .iui-label{
|
|
732
724
|
margin-right:8px; }
|
|
@@ -809,8 +801,8 @@
|
|
|
809
801
|
.iui-checkbox.iui-loading input:disabled ~ .iui-label{
|
|
810
802
|
cursor:wait; }
|
|
811
803
|
.iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
|
|
812
|
-
background-color
|
|
813
|
-
background-color:var(--iui-color-
|
|
804
|
+
background-color:rgba(0, 0, 0, 0.1);
|
|
805
|
+
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
|
|
814
806
|
.iui-checkbox-visibility input ~ .iui-checkbox-checkmark,
|
|
815
807
|
.iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
|
|
816
808
|
border:none; }
|
|
@@ -822,9 +814,11 @@
|
|
|
822
814
|
.iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
|
|
823
815
|
.iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
|
|
824
816
|
opacity:0; }
|
|
825
|
-
.iui-checkbox-visibility input ~ .iui-checkbox-checkmark
|
|
817
|
+
.iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
|
|
826
818
|
opacity:1;
|
|
827
|
-
transition:opacity 0.2s ease;
|
|
819
|
+
transition:opacity 0.2s ease;
|
|
820
|
+
fill:rgba(0, 0, 0, 0.8);
|
|
821
|
+
fill:var(--iui-icons-color-actionable); }
|
|
828
822
|
|
|
829
823
|
.iui-radio{
|
|
830
824
|
margin:0;
|
|
@@ -872,22 +866,14 @@
|
|
|
872
866
|
.iui-radio .iui-radio-dot svg:not(.iui-radial){
|
|
873
867
|
width:12px;
|
|
874
868
|
height:12px; }
|
|
875
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
876
|
-
.iui-radio .iui-
|
|
877
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
878
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
|
|
879
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
880
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
|
|
869
|
+
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
870
|
+
.iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
|
|
881
871
|
opacity:0;
|
|
882
872
|
fill:#008BE1;
|
|
883
873
|
fill:var(--iui-icons-color-primary); }
|
|
884
874
|
@media (prefers-reduced-motion: no-preference){
|
|
885
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) >
|
|
886
|
-
.iui-radio .iui-
|
|
887
|
-
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
|
|
888
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
|
|
889
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
|
|
890
|
-
.iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
|
|
875
|
+
.iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
|
|
876
|
+
.iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
|
|
891
877
|
transition:opacity 0.2s ease; } }
|
|
892
878
|
.iui-radio > .iui-label{
|
|
893
879
|
margin-right:8px; }
|
package/css/side-navigation.css
CHANGED
|
@@ -46,10 +46,11 @@
|
|
|
46
46
|
.iui-side-navigation.iui-expanded,
|
|
47
47
|
.iui-side-navigation > .iui-sidenav-content{
|
|
48
48
|
max-width:288px; }
|
|
49
|
-
.iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-icon,
|
|
50
|
-
.iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-icon{
|
|
49
|
+
.iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
|
|
50
|
+
.iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
|
|
51
51
|
transform:scaleX(-1); }
|
|
52
52
|
.iui-side-navigation .iui-sidenav-button{
|
|
53
|
+
gap:24px;
|
|
53
54
|
border-radius:0;
|
|
54
55
|
border-left:none;
|
|
55
56
|
border-right:none;
|
|
@@ -60,28 +61,33 @@
|
|
|
60
61
|
@supports (padding: max(0px)){
|
|
61
62
|
.iui-side-navigation .iui-sidenav-button:not(.iui-expand){
|
|
62
63
|
padding-left:max(24px, 24px + env(safe-area-inset-left)); } }
|
|
63
|
-
.iui-side-navigation .iui-sidenav-button
|
|
64
|
+
.iui-side-navigation .iui-sidenav-button > .iui-button-label{
|
|
65
|
+
white-space:nowrap;
|
|
66
|
+
overflow:hidden;
|
|
67
|
+
text-overflow:ellipsis; }
|
|
68
|
+
.iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus{
|
|
64
69
|
border-color:#C7CCD1;
|
|
65
70
|
border-color:var(--iui-color-background-5); }
|
|
66
|
-
.iui-side-navigation .iui-sidenav-button
|
|
71
|
+
.iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
|
|
72
|
+
border-color:#C7CCD1;
|
|
73
|
+
border-color:var(--iui-color-background-5); }
|
|
74
|
+
.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
|
|
67
75
|
width:24px;
|
|
68
76
|
height:24px;
|
|
69
77
|
flex-shrink:0; }
|
|
70
|
-
|
|
71
|
-
margin-left:24px;
|
|
72
|
-
white-space:nowrap;
|
|
73
|
-
overflow:hidden;
|
|
74
|
-
text-overflow:ellipsis; }
|
|
75
|
-
.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-icon{
|
|
78
|
+
.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
|
|
76
79
|
fill:#008BE1;
|
|
77
80
|
fill:var(--iui-color-foreground-primary); }
|
|
78
|
-
.iui-side-navigation .iui-sidenav-button.iui-active
|
|
79
|
-
box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
|
|
80
|
-
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
81
|
-
.iui-side-navigation .iui-sidenav-button.iui-active, .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
|
|
81
|
+
.iui-side-navigation .iui-sidenav-button.iui-active{
|
|
82
82
|
box-shadow:inset 2px 0 0 0 #008BE1;
|
|
83
83
|
box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
84
|
-
|
|
84
|
+
.iui-side-navigation .iui-sidenav-button.iui-active:focus{
|
|
85
|
+
box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
|
|
86
|
+
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
87
|
+
.iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
|
|
88
|
+
box-shadow:inset 2px 0 0 0 #008BE1;
|
|
89
|
+
box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
|
|
90
|
+
.iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
|
|
85
91
|
background-color:#F8F9FB;
|
|
86
92
|
background-color:var(--iui-color-background-2); }
|
|
87
93
|
.iui-side-navigation .iui-sidenav-button:focus{
|
|
@@ -90,35 +96,32 @@
|
|
|
90
96
|
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
|
|
91
97
|
.iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
|
|
92
98
|
box-shadow:none; }
|
|
93
|
-
.iui-side-navigation .iui-sidenav-button:focus-visible{
|
|
94
|
-
outline:0;
|
|
95
|
-
box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
|
|
96
99
|
.iui-side-navigation .iui-sidenav-button.iui-expand{
|
|
97
100
|
height:22px;
|
|
98
101
|
justify-content:center;
|
|
99
102
|
border:none;
|
|
100
103
|
border-bottom:1px solid #C7CCD1;
|
|
101
104
|
border-bottom:1px solid var(--iui-color-background-5); }
|
|
102
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
|
|
105
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
|
|
103
106
|
fill:rgba(0, 0, 0, 0.4);
|
|
104
107
|
fill:var(--iui-icons-color);
|
|
105
108
|
display:inline-flex;
|
|
106
109
|
width:12px;
|
|
107
110
|
height:12px; }
|
|
108
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-informational{
|
|
111
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
|
|
109
112
|
fill:#008BE1;
|
|
110
113
|
fill:var(--iui-icons-color-primary); }
|
|
111
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-positive{
|
|
114
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
|
|
112
115
|
fill:#53A21A;
|
|
113
116
|
fill:var(--iui-icons-color-positive); }
|
|
114
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-warning{
|
|
117
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
|
|
115
118
|
fill:#F18B12;
|
|
116
119
|
fill:var(--iui-icons-color-warning); }
|
|
117
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-negative{
|
|
120
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
|
|
118
121
|
fill:#D30A0A;
|
|
119
122
|
fill:var(--iui-icons-color-negative); }
|
|
120
123
|
@media (prefers-reduced-motion: no-preference){
|
|
121
|
-
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
|
|
124
|
+
.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
|
|
122
125
|
transition:transform 0.4s ease-out; } }
|
|
123
126
|
|
|
124
127
|
.iui-side-navigation-submenu{
|
package/css/table.css
CHANGED
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
.iui-table-body .iui-row:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options{
|
|
148
148
|
visibility:visible; }
|
|
149
149
|
@media (prefers-reduced-motion: no-preference){
|
|
150
|
-
.iui-table-body .iui-row .iui-row-expander > .iui-icon{
|
|
150
|
+
.iui-table-body .iui-row .iui-row-expander > .iui-button-icon{
|
|
151
151
|
transition:transform 0.2s ease-out; } }
|
|
152
152
|
.iui-table-body .iui-row.iui-row-expanded{
|
|
153
153
|
overflow:hidden;
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
border-left-color:var(--iui-color-background-4);
|
|
158
158
|
border-right-color:var(--iui-color-background-4);
|
|
159
159
|
border-bottom-color:transparent; }
|
|
160
|
-
.iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-icon{
|
|
160
|
+
.iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-button-icon{
|
|
161
161
|
transform:rotate(90deg); }
|
|
162
162
|
.iui-table-body .iui-row.iui-row-expanded + .iui-expanded-content{
|
|
163
163
|
border-left-color:#DCE0E3;
|
package/css/tile.css
CHANGED
|
@@ -32,57 +32,60 @@
|
|
|
32
32
|
border-bottom:1px solid var(--iui-color-background-4); }
|
|
33
33
|
.iui-tile .iui-thumbnail > .iui-type-indicator,
|
|
34
34
|
.iui-tile .iui-thumbnail > .iui-quick-action{
|
|
35
|
-
background-color:transparent;
|
|
36
35
|
border-color:transparent;
|
|
36
|
+
background-color:transparent;
|
|
37
37
|
padding:0 8px;
|
|
38
|
+
height:38px;
|
|
39
|
+
gap:8px;
|
|
40
|
+
padding:0 2px;
|
|
41
|
+
height:27px;
|
|
42
|
+
gap:4px;
|
|
38
43
|
position:absolute;
|
|
39
44
|
border-radius:50%;
|
|
40
45
|
top:6px; }
|
|
41
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator.iui-
|
|
42
|
-
.iui-tile .iui-thumbnail > .iui-quick-action.iui-
|
|
43
|
-
padding:0 2px; }
|
|
44
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator.iui-large,
|
|
45
|
-
.iui-tile .iui-thumbnail > .iui-quick-action.iui-large{
|
|
46
|
-
padding:0 12px; }
|
|
47
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator > .iui-icon:only-child,
|
|
48
|
-
.iui-tile .iui-thumbnail > .iui-quick-action > .iui-icon:only-child{
|
|
46
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator > .iui-button-icon:only-child,
|
|
47
|
+
.iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
|
|
49
48
|
margin-left:3px;
|
|
50
49
|
margin-right:3px; }
|
|
51
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator:
|
|
52
|
-
.iui-tile .iui-thumbnail > .iui-quick-action:
|
|
53
|
-
.iui-tile .iui-thumbnail > .iui-quick-action:
|
|
54
|
-
.iui-tile .iui-thumbnail > .iui-quick-action:focus-visible{
|
|
50
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
|
|
51
|
+
.iui-tile .iui-thumbnail > .iui-quick-action:hover,
|
|
52
|
+
.iui-tile .iui-thumbnail > .iui-quick-action:focus{
|
|
55
53
|
background-color:rgba(0, 0, 0, 0.1);
|
|
56
54
|
border-color:transparent;
|
|
57
55
|
background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
|
|
58
56
|
border-color:transparent; }
|
|
59
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator
|
|
60
|
-
.iui-tile .iui-thumbnail > .iui-quick-action
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible),
|
|
58
|
+
.iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible){
|
|
59
|
+
border-color:transparent;
|
|
60
|
+
background-color:transparent; }
|
|
61
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible) > .iui-button-icon:only-child,
|
|
62
|
+
.iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible) > .iui-button-icon:only-child{
|
|
63
|
+
margin-left:3px;
|
|
64
|
+
margin-right:3px; }
|
|
65
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator.iui-active,
|
|
66
|
+
.iui-tile .iui-thumbnail > .iui-quick-action.iui-active{
|
|
64
67
|
background-color:rgba(0, 139, 225, 0.1);
|
|
68
|
+
color:#008BE1;
|
|
65
69
|
background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
70
|
+
color:var(--iui-color-foreground-primary);
|
|
66
71
|
border-color:transparent; }
|
|
67
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator
|
|
72
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator:disabled,
|
|
68
73
|
.iui-tile .iui-thumbnail > .iui-quick-action[disabled],
|
|
69
|
-
.iui-tile .iui-thumbnail > .iui-quick-action
|
|
70
|
-
|
|
71
|
-
|
|
74
|
+
.iui-tile .iui-thumbnail > .iui-quick-action:disabled{
|
|
75
|
+
cursor:not-allowed;
|
|
76
|
+
background:#EEF0F3;
|
|
77
|
+
border-color:#EEF0F3;
|
|
78
|
+
color:rgba(0, 0, 0, 0.2);
|
|
79
|
+
background:var(--iui-color-background-disabled);
|
|
80
|
+
border-color:var(--iui-color-background-disabled);
|
|
81
|
+
color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
82
|
+
background-color:transparent;
|
|
83
|
+
border-color:transparent;
|
|
72
84
|
background-color:transparent;
|
|
73
85
|
border-color:transparent; }
|
|
74
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled]
|
|
75
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled] > .iui-icon,
|
|
76
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover > .iui-icon,
|
|
77
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active > .iui-icon,
|
|
78
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus > .iui-icon{
|
|
79
|
-
fill:rgba(0, 0, 0, 0.2);
|
|
80
|
-
fill:var(--iui-icons-color-actionable-disabled); }
|
|
81
|
-
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover.iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active.iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus.iui-active,
|
|
86
|
+
.iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator:disabled.iui-active,
|
|
82
87
|
.iui-tile .iui-thumbnail > .iui-quick-action[disabled].iui-active,
|
|
83
|
-
.iui-tile .iui-thumbnail > .iui-quick-action
|
|
84
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active.iui-active,
|
|
85
|
-
.iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus.iui-active{
|
|
88
|
+
.iui-tile .iui-thumbnail > .iui-quick-action:disabled.iui-active{
|
|
86
89
|
background-color:rgba(0, 0, 0, 0.05);
|
|
87
90
|
background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
|
|
88
91
|
.iui-tile .iui-thumbnail > .iui-type-indicator{
|
|
@@ -155,8 +158,8 @@
|
|
|
155
158
|
backdrop-filter:blur(5px);
|
|
156
159
|
background-color:rgba(0, 0, 0, var(--iui-opacity-5));
|
|
157
160
|
backdrop-filter:blur(5px); } }
|
|
158
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-icon,
|
|
159
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-icon{
|
|
161
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-button-icon,
|
|
162
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-button-icon{
|
|
160
163
|
fill:#FFF;
|
|
161
164
|
filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
|
|
162
165
|
fill:var(--iui-color-foreground-accessory);
|
|
@@ -168,11 +171,11 @@
|
|
|
168
171
|
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active{
|
|
169
172
|
background-color:rgba(0, 0, 0, 0.4);
|
|
170
173
|
background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
|
|
171
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover
|
|
172
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover
|
|
173
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled
|
|
174
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover
|
|
175
|
-
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active
|
|
174
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active .iui-button-icon,
|
|
175
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover .iui-button-icon,
|
|
176
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled .iui-button-icon,
|
|
177
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover .iui-button-icon,
|
|
178
|
+
.iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active .iui-button-icon{
|
|
176
179
|
fill:#FFF;
|
|
177
180
|
fill:var(--iui-color-foreground-accessory); }
|
|
178
181
|
.iui-tile > .iui-content{
|
|
@@ -275,6 +278,9 @@
|
|
|
275
278
|
overflow:hidden;
|
|
276
279
|
text-overflow:ellipsis; }
|
|
277
280
|
.iui-tile > .iui-content > .iui-more-options{
|
|
281
|
+
padding:0 2px;
|
|
282
|
+
height:27px;
|
|
283
|
+
gap:4px;
|
|
278
284
|
position:absolute;
|
|
279
285
|
bottom:5.5px;
|
|
280
286
|
right:8px;
|
package/package.json
CHANGED
|
@@ -2,59 +2,40 @@
|
|
|
2
2
|
// See LICENSE.md in the project root for license terms and full copyright notice.
|
|
3
3
|
@import '../style/index';
|
|
4
4
|
@import './button';
|
|
5
|
+
@import './disabled';
|
|
6
|
+
@import './button-icon';
|
|
5
7
|
|
|
6
8
|
@mixin iui-button-borderless {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
padding: 0 $iui-s;
|
|
10
|
-
|
|
11
|
-
// Sizes
|
|
12
|
-
&.iui-small {
|
|
13
|
-
padding: 0 $iui-xxs;
|
|
14
|
-
}
|
|
9
|
+
@include iui-button-borderless-base;
|
|
10
|
+
@include iui-button-size(medium, borderless);
|
|
15
11
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// If icon is by itself, button takes 1:1 size ratio
|
|
21
|
-
> .iui-icon:only-child {
|
|
22
|
-
margin-left: $iui-component-offset;
|
|
23
|
-
margin-right: $iui-component-offset;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:enabled:hover,
|
|
27
|
-
&:enabled:active,
|
|
28
|
-
&:focus-visible {
|
|
12
|
+
&:hover,
|
|
13
|
+
&:focus {
|
|
29
14
|
@include themed {
|
|
30
15
|
background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
|
|
31
16
|
border-color: transparent;
|
|
32
17
|
}
|
|
33
18
|
}
|
|
34
19
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
border-color: transparent;
|
|
20
|
+
&:focus:not(:focus-visible) {
|
|
21
|
+
@include iui-button-borderless-base;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.iui-active {
|
|
25
|
+
@include themed {
|
|
26
|
+
background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
|
|
27
|
+
color: t(iui-color-foreground-primary);
|
|
44
28
|
}
|
|
29
|
+
border-color: transparent;
|
|
45
30
|
}
|
|
46
31
|
|
|
47
32
|
&[disabled],
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
&[disabled]:focus {
|
|
51
|
-
background-color: transparent;
|
|
52
|
-
border-color: transparent;
|
|
33
|
+
&:disabled {
|
|
34
|
+
@include iui-button-disabled;
|
|
53
35
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
36
|
+
@include themed {
|
|
37
|
+
background-color: transparent;
|
|
38
|
+
border-color: transparent;
|
|
58
39
|
}
|
|
59
40
|
|
|
60
41
|
&.iui-active {
|
|
@@ -64,3 +45,13 @@
|
|
|
64
45
|
}
|
|
65
46
|
}
|
|
66
47
|
}
|
|
48
|
+
|
|
49
|
+
@mixin iui-button-borderless-base {
|
|
50
|
+
border-color: transparent;
|
|
51
|
+
background-color: transparent;
|
|
52
|
+
|
|
53
|
+
> .iui-button-icon:only-child {
|
|
54
|
+
margin-left: $iui-component-offset;
|
|
55
|
+
margin-right: $iui-component-offset;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
border-bottom-right-radius: $iui-border-radius;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
&.iui-default:not(:last-of-type) {
|
|
25
25
|
border-right: none;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
&.iui-default {
|
|
29
29
|
// Border trick for grouped default & disabled buttons
|
|
30
|
-
&:
|
|
30
|
+
&:not(:disabled) {
|
|
31
31
|
+ :disabled {
|
|
32
32
|
@include themed {
|
|
33
33
|
border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
2
|
+
// See LICENSE.md in the project root for license terms and full copyright notice.
|
|
3
|
+
@import '../style/index';
|
|
4
|
+
@import '../icon/index';
|
|
5
|
+
|
|
6
|
+
/// Mixin for button icons
|
|
7
|
+
@mixin iui-button-icon {
|
|
8
|
+
width: $iui-icons-default;
|
|
9
|
+
height: $iui-icons-default;
|
|
10
|
+
transition: fill $iui-speed-fast ease-out;
|
|
11
|
+
fill: currentColor;
|
|
12
|
+
}
|