@itwin/itwinui-css 0.63.1 → 0.63.2-dev.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.
Files changed (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/tree.css CHANGED
@@ -2,151 +2,153 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-tree{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- list-style:none;
11
- }
5
+ @layer itwinui-v1{
6
+ .iui-tree{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ list-style:none;
12
+ }
12
13
 
13
- .iui-sub-tree{
14
- margin:0;
15
- padding:0;
16
- border:none;
17
- vertical-align:baseline;
18
- list-style:none;
19
- }
14
+ .iui-sub-tree{
15
+ margin:0;
16
+ padding:0;
17
+ border:none;
18
+ vertical-align:baseline;
19
+ list-style:none;
20
+ }
20
21
 
21
- .iui-tree-item:focus-visible{
22
- outline:none;
23
- }
24
- .iui-tree-item:focus-visible > .iui-tree-node{
25
- outline:1px solid var(--iui-color-foreground-primary);
26
- outline-offset:-1px;
27
- }
28
- .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
29
- outline:2px solid var(--iui-color-foreground-primary);
30
- outline-offset:-2px;
31
- }
32
- @supports not selector(*:focus-visible){
33
- .iui-tree-item:focus{
22
+ .iui-tree-item:focus-visible{
34
23
  outline:none;
35
24
  }
36
- .iui-tree-item:focus > .iui-tree-node{
25
+ .iui-tree-item:focus-visible > .iui-tree-node{
37
26
  outline:1px solid var(--iui-color-foreground-primary);
38
27
  outline-offset:-1px;
39
28
  }
40
- .iui-tree-item:focus > .iui-tree-node.iui-active{
29
+ .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
41
30
  outline:2px solid var(--iui-color-foreground-primary);
42
31
  outline-offset:-2px;
43
32
  }
44
- }
33
+ @supports not selector(*:focus-visible){
34
+ .iui-tree-item:focus{
35
+ outline:none;
36
+ }
37
+ .iui-tree-item:focus > .iui-tree-node{
38
+ outline:1px solid var(--iui-color-foreground-primary);
39
+ outline-offset:-1px;
40
+ }
41
+ .iui-tree-item:focus > .iui-tree-node.iui-active{
42
+ outline:2px solid var(--iui-color-foreground-primary);
43
+ outline-offset:-2px;
44
+ }
45
+ }
45
46
 
46
- .iui-tree-node{
47
- display:flex;
48
- cursor:pointer;
49
- padding:0 8px;
50
- align-items:center;
51
- }
52
- .iui-tree-node-checkbox{
53
- margin-right:8px;
54
- }
55
- .iui-tree-node-content{
56
- display:flex;
57
- align-items:center;
58
- box-sizing:border-box;
59
- min-height:33px;
60
- margin-left:calc(28px * (var(--level, 0)));
61
- overflow:hidden;
62
- padding-left:2px;
63
- }
64
- .iui-tree-node-content-icon{
65
- fill:rgba(0, 0, 0, 0.4);
66
- fill:var(--iui-icons-color);
67
- display:inline-flex;
68
- width:16px;
69
- height:16px;
70
- margin:0 6px;
71
- flex-shrink:0;
72
- }
73
- @media (forced-colors: active){
47
+ .iui-tree-node{
48
+ display:flex;
49
+ cursor:pointer;
50
+ padding:0 8px;
51
+ align-items:center;
52
+ }
53
+ .iui-tree-node-checkbox{
54
+ margin-right:8px;
55
+ }
56
+ .iui-tree-node-content{
57
+ display:flex;
58
+ align-items:center;
59
+ box-sizing:border-box;
60
+ min-height:33px;
61
+ margin-left:calc(28px * (var(--level, 0)));
62
+ overflow:hidden;
63
+ padding-left:2px;
64
+ }
74
65
  .iui-tree-node-content-icon{
75
- fill:CanvasText;
76
- }
77
- }
78
- .iui-tree-node-content-icon.iui-informational{
79
- fill:#008ae0;
80
- fill:var(--iui-icons-color-primary);
81
- }
82
- .iui-tree-node-content-icon.iui-positive{
83
- fill:#53a21a;
84
- fill:var(--iui-icons-color-positive);
85
- }
86
- .iui-tree-node-content-icon.iui-warning{
87
- fill:#f18d13;
88
- fill:var(--iui-icons-color-warning);
89
- }
90
- .iui-tree-node-content-icon.iui-negative{
91
- fill:#d10a0a;
92
- fill:var(--iui-icons-color-negative);
93
- }
94
- .iui-tree-node-content-icon:first-child{
95
- margin-left:34px;
96
- }
97
- @media (prefers-reduced-motion: no-preference){
98
- .iui-tree-node-content-expander-icon{
99
- transition:transform 0.2s ease-out;
100
- }
101
- }
102
- .iui-tree-node-content-expander-icon-expanded{
103
- transform:rotate(90deg);
104
- }
105
- .iui-tree-node-content-label{
106
- min-width:0;
107
- padding-left:6px;
108
- }
109
- .iui-tree-node-content-label:first-child{
110
- margin-left:28px;
111
- }
112
- .iui-tree-node-content-title, .iui-tree-node-content-caption{
113
- white-space:nowrap;
114
- overflow:hidden;
115
- text-overflow:ellipsis;
116
- }
117
- .iui-tree-node-content-title{
118
- font-size:14px;
119
- }
120
- .iui-tree-node-content-caption{
121
- font-size:12px;
122
- color:rgba(0, 0, 0, 0.4);
123
- color:var(--iui-text-color-muted);
124
- }
125
- .iui-tree-node:hover{
126
- background-color:rgba(0, 138, 224, 0.1);
127
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
128
- }
129
- .iui-tree-node:hover .iui-tree-node-content-caption{
130
- color:black;
131
- color:var(--iui-color-foreground-body);
132
- transition:color 0.2s ease;
133
- }
134
- .iui-tree-node.iui-active{
135
- background-color:rgba(0, 138, 224, 0.2);
136
- outline:thin solid var(--iui-color-foreground-primary);
137
- outline-offset:-1px;
138
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
139
- outline:thin solid var(--iui-color-foreground-primary);
140
- outline-offset:-1px;
141
- }
142
- .iui-tree-node.iui-disabled{
143
- cursor:not-allowed;
144
- outline:none;
145
- background-color:transparent;
146
- color:rgba(0, 0, 0, 0.2);
147
- color:var(--iui-text-color-placeholder);
148
- }
149
- .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
150
- color:rgba(0, 0, 0, 0.2);
151
- color:var(--iui-text-color-placeholder);
66
+ fill:rgba(0, 0, 0, 0.4);
67
+ fill:var(--iui-icons-color);
68
+ display:inline-flex;
69
+ width:16px;
70
+ height:16px;
71
+ margin:0 6px;
72
+ flex-shrink:0;
73
+ }
74
+ @media (forced-colors: active){
75
+ .iui-tree-node-content-icon{
76
+ fill:CanvasText;
77
+ }
78
+ }
79
+ .iui-tree-node-content-icon.iui-informational{
80
+ fill:#008ae0;
81
+ fill:var(--iui-icons-color-primary);
82
+ }
83
+ .iui-tree-node-content-icon.iui-positive{
84
+ fill:#53a21a;
85
+ fill:var(--iui-icons-color-positive);
86
+ }
87
+ .iui-tree-node-content-icon.iui-warning{
88
+ fill:#f18d13;
89
+ fill:var(--iui-icons-color-warning);
90
+ }
91
+ .iui-tree-node-content-icon.iui-negative{
92
+ fill:#d10a0a;
93
+ fill:var(--iui-icons-color-negative);
94
+ }
95
+ .iui-tree-node-content-icon:first-child{
96
+ margin-left:34px;
97
+ }
98
+ @media (prefers-reduced-motion: no-preference){
99
+ .iui-tree-node-content-expander-icon{
100
+ transition:transform 0.2s ease-out;
101
+ }
102
+ }
103
+ .iui-tree-node-content-expander-icon-expanded{
104
+ transform:rotate(90deg);
105
+ }
106
+ .iui-tree-node-content-label{
107
+ min-width:0;
108
+ padding-left:6px;
109
+ }
110
+ .iui-tree-node-content-label:first-child{
111
+ margin-left:28px;
112
+ }
113
+ .iui-tree-node-content-title, .iui-tree-node-content-caption{
114
+ white-space:nowrap;
115
+ overflow:hidden;
116
+ text-overflow:ellipsis;
117
+ }
118
+ .iui-tree-node-content-title{
119
+ font-size:14px;
120
+ }
121
+ .iui-tree-node-content-caption{
122
+ font-size:12px;
123
+ color:rgba(0, 0, 0, 0.4);
124
+ color:var(--iui-text-color-muted);
125
+ }
126
+ .iui-tree-node:hover{
127
+ background-color:rgba(0, 138, 224, 0.1);
128
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
129
+ }
130
+ .iui-tree-node:hover .iui-tree-node-content-caption{
131
+ color:black;
132
+ color:var(--iui-color-foreground-body);
133
+ transition:color 0.2s ease;
134
+ }
135
+ .iui-tree-node.iui-active{
136
+ background-color:rgba(0, 138, 224, 0.2);
137
+ outline:thin solid var(--iui-color-foreground-primary);
138
+ outline-offset:-1px;
139
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
140
+ outline:thin solid var(--iui-color-foreground-primary);
141
+ outline-offset:-1px;
142
+ }
143
+ .iui-tree-node.iui-disabled{
144
+ cursor:not-allowed;
145
+ outline:none;
146
+ background-color:transparent;
147
+ color:rgba(0, 0, 0, 0.2);
148
+ color:var(--iui-text-color-placeholder);
149
+ }
150
+ .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
151
+ color:rgba(0, 0, 0, 0.2);
152
+ color:var(--iui-text-color-placeholder);
153
+ }
152
154
  }