@itwin/itwinui-css 0.63.0 → 1.0.0-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 (243) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +1 -4
  3. package/css/alert.css +263 -145
  4. package/css/all.css +5470 -6944
  5. package/css/anchor.css +0 -4
  6. package/css/{user-icon.css → avatar.css} +52 -72
  7. package/css/badge.css +1 -1
  8. package/css/blockquote.css +2 -5
  9. package/css/breadcrumbs.css +68 -135
  10. package/css/button.css +237 -348
  11. package/css/carousel.css +10 -17
  12. package/css/checkbox.css +152 -0
  13. package/css/code.css +3 -10
  14. package/css/color-picker.css +9 -47
  15. package/css/date-picker.css +1 -60
  16. package/css/dialog.css +11 -13
  17. package/css/expandable-block.css +8 -55
  18. package/css/fieldset.css +2 -7
  19. package/css/file-upload.css +6 -36
  20. package/css/footer.css +2 -10
  21. package/css/global.css +73 -128
  22. package/css/header.css +318 -403
  23. package/css/information-panel.css +13 -22
  24. package/css/input.css +170 -0
  25. package/css/keyboard.css +1 -5
  26. package/css/location-marker.css +8 -13
  27. package/css/menu.css +14 -23
  28. package/css/non-ideal-state.css +5 -5
  29. package/css/progress-indicator.css +11 -99
  30. package/css/radio-tile.css +56 -74
  31. package/css/radio.css +159 -0
  32. package/css/select.css +236 -0
  33. package/css/side-navigation.css +15 -40
  34. package/css/skip-to-content.css +2 -5
  35. package/css/slider.css +11 -70
  36. package/css/stepper.css +141 -0
  37. package/css/surface.css +0 -1
  38. package/css/table.css +266 -353
  39. package/css/tabs.css +22 -58
  40. package/css/tag.css +8 -26
  41. package/css/text.css +7 -9
  42. package/css/tile.css +119 -231
  43. package/css/time-picker.css +3 -15
  44. package/css/{toast-notification.css → toast.css} +14 -54
  45. package/css/toggle-switch.css +17 -64
  46. package/css/tooltip.css +0 -3
  47. package/css/tree.css +9 -35
  48. package/css/utils.css +669 -0
  49. package/css/workflow-diagram.css +67 -0
  50. package/package.json +7 -10
  51. package/css/icon.css +0 -177
  52. package/css/inputs.css +0 -1339
  53. package/css/notification-marker.css +0 -293
  54. package/css/popover.css +0 -14
  55. package/css/reset-global-styles.css +0 -50
  56. package/css/wizard.css +0 -190
  57. package/scss/alert/alert.scss +0 -83
  58. package/scss/alert/classes.scss +0 -13
  59. package/scss/alert/index.scss +0 -3
  60. package/scss/anchor/anchor.scss +0 -3
  61. package/scss/anchor/classes.scss +0 -11
  62. package/scss/anchor/index.scss +0 -3
  63. package/scss/backdrop/backdrop.scss +0 -27
  64. package/scss/backdrop/classes.scss +0 -7
  65. package/scss/backdrop/index.scss +0 -3
  66. package/scss/badge/badge.scss +0 -32
  67. package/scss/badge/classes.scss +0 -7
  68. package/scss/badge/index.scss +0 -3
  69. package/scss/blockquote/blockquote.scss +0 -31
  70. package/scss/blockquote/classes.scss +0 -7
  71. package/scss/blockquote/index.scss +0 -3
  72. package/scss/breadcrumbs/breadcrumbs.scss +0 -124
  73. package/scss/breadcrumbs/classes.scss +0 -31
  74. package/scss/breadcrumbs/index.scss +0 -3
  75. package/scss/button/borderless.scss +0 -48
  76. package/scss/button/button-group.scss +0 -110
  77. package/scss/button/button-icon.scss +0 -12
  78. package/scss/button/button.scss +0 -97
  79. package/scss/button/classes.scss +0 -70
  80. package/scss/button/cta.scss +0 -31
  81. package/scss/button/default.scss +0 -59
  82. package/scss/button/disabled.scss +0 -13
  83. package/scss/button/high-visibility.scss +0 -31
  84. package/scss/button/idea.scss +0 -10
  85. package/scss/button/index.scss +0 -12
  86. package/scss/button/split-menu.scss +0 -66
  87. package/scss/carousel/carousel.scss +0 -124
  88. package/scss/carousel/classes.scss +0 -15
  89. package/scss/carousel/index.scss +0 -3
  90. package/scss/classes.scss +0 -48
  91. package/scss/code/classes.scss +0 -11
  92. package/scss/code/code.scss +0 -18
  93. package/scss/code/codeblock.scss +0 -73
  94. package/scss/code/index.scss +0 -4
  95. package/scss/color-picker/classes.scss +0 -43
  96. package/scss/color-picker/color-picker.scss +0 -274
  97. package/scss/color-picker/index.scss +0 -3
  98. package/scss/date-picker/classes.scss +0 -47
  99. package/scss/date-picker/date-picker.scss +0 -280
  100. package/scss/date-picker/index.scss +0 -3
  101. package/scss/dialog/classes.scss +0 -48
  102. package/scss/dialog/dialog.scss +0 -183
  103. package/scss/dialog/index.scss +0 -3
  104. package/scss/expandable-block/block.scss +0 -193
  105. package/scss/expandable-block/classes.scss +0 -7
  106. package/scss/expandable-block/index.scss +0 -3
  107. package/scss/fieldset/classes.scss +0 -7
  108. package/scss/fieldset/fieldset.scss +0 -35
  109. package/scss/fieldset/index.scss +0 -3
  110. package/scss/file-upload/classes.scss +0 -7
  111. package/scss/file-upload/file-upload.scss +0 -90
  112. package/scss/file-upload/index.scss +0 -3
  113. package/scss/footer/classes.scss +0 -23
  114. package/scss/footer/footer.scss +0 -62
  115. package/scss/footer/index.scss +0 -3
  116. package/scss/header/classes.scss +0 -11
  117. package/scss/header/header.scss +0 -443
  118. package/scss/header/index.scss +0 -3
  119. package/scss/icon/classes.scss +0 -27
  120. package/scss/icon/index.scss +0 -4
  121. package/scss/icon/mixins.scss +0 -78
  122. package/scss/icon/variables.scss +0 -14
  123. package/scss/index.scss +0 -46
  124. package/scss/information-panel/classes.scss +0 -27
  125. package/scss/information-panel/index.scss +0 -3
  126. package/scss/information-panel/information-panel.scss +0 -233
  127. package/scss/inputs/checkbox-radio.scss +0 -73
  128. package/scss/inputs/checkbox.scss +0 -106
  129. package/scss/inputs/classes.scss +0 -87
  130. package/scss/inputs/index.scss +0 -10
  131. package/scss/inputs/input-with-icon.scss +0 -36
  132. package/scss/inputs/input.scss +0 -80
  133. package/scss/inputs/labeled-inputs.scss +0 -382
  134. package/scss/inputs/radio.scss +0 -18
  135. package/scss/inputs/select.scss +0 -132
  136. package/scss/inputs/textarea.scss +0 -14
  137. package/scss/keyboard/classes.scss +0 -7
  138. package/scss/keyboard/index.scss +0 -3
  139. package/scss/keyboard/keyboard.scss +0 -33
  140. package/scss/location-marker/classes.scss +0 -15
  141. package/scss/location-marker/data-rich.scss +0 -58
  142. package/scss/location-marker/default.scss +0 -21
  143. package/scss/location-marker/index.scss +0 -6
  144. package/scss/location-marker/location-marker.scss +0 -13
  145. package/scss/location-marker/me.scss +0 -36
  146. package/scss/menu/classes.scss +0 -21
  147. package/scss/menu/index.scss +0 -3
  148. package/scss/menu/menu.scss +0 -205
  149. package/scss/non-ideal-state/classes.scss +0 -7
  150. package/scss/non-ideal-state/index.scss +0 -3
  151. package/scss/non-ideal-state/non-ideal-state.scss +0 -55
  152. package/scss/notification-marker/classes.scss +0 -9
  153. package/scss/notification-marker/index.scss +0 -3
  154. package/scss/notification-marker/notification-marker.scss +0 -63
  155. package/scss/popover/classes.scss +0 -7
  156. package/scss/popover/index.scss +0 -3
  157. package/scss/popover/popover.scss +0 -22
  158. package/scss/progress-indicator/classes.scss +0 -35
  159. package/scss/progress-indicator/index.scss +0 -5
  160. package/scss/progress-indicator/linear.scss +0 -126
  161. package/scss/progress-indicator/overlay.scss +0 -57
  162. package/scss/progress-indicator/radial.scss +0 -243
  163. package/scss/radio-tile/classes.scss +0 -31
  164. package/scss/radio-tile/index.scss +0 -3
  165. package/scss/radio-tile/radio-tile.scss +0 -209
  166. package/scss/reset-global-styles.scss +0 -33
  167. package/scss/side-navigation/classes.scss +0 -15
  168. package/scss/side-navigation/index.scss +0 -3
  169. package/scss/side-navigation/side-navigation.scss +0 -210
  170. package/scss/skip-to-content/classes.scss +0 -7
  171. package/scss/skip-to-content/index.scss +0 -3
  172. package/scss/skip-to-content/skip-to-content.scss +0 -41
  173. package/scss/slider/classes.scss +0 -40
  174. package/scss/slider/index.scss +0 -3
  175. package/scss/slider/slider.scss +0 -256
  176. package/scss/style/anchor.scss +0 -82
  177. package/scss/style/baseline.scss +0 -4
  178. package/scss/style/color.scss +0 -39
  179. package/scss/style/elevation.scss +0 -11
  180. package/scss/style/global.scss +0 -70
  181. package/scss/style/index.scss +0 -11
  182. package/scss/style/mixins.scss +0 -188
  183. package/scss/style/ripple.scss +0 -18
  184. package/scss/style/space.scss +0 -11
  185. package/scss/style/speed.scss +0 -8
  186. package/scss/style/theme.scss +0 -482
  187. package/scss/style/typography.scss +0 -54
  188. package/scss/style/variables.scss +0 -21
  189. package/scss/surface/classes.scss +0 -7
  190. package/scss/surface/index.scss +0 -3
  191. package/scss/surface/surface.scss +0 -18
  192. package/scss/table/classes.scss +0 -63
  193. package/scss/table/column-filter.scss +0 -37
  194. package/scss/table/condensed.scss +0 -15
  195. package/scss/table/extra-condensed.scss +0 -19
  196. package/scss/table/index.scss +0 -7
  197. package/scss/table/paginator.scss +0 -87
  198. package/scss/table/table.scss +0 -558
  199. package/scss/table/variables.scss +0 -10
  200. package/scss/tabs/borderless.scss +0 -71
  201. package/scss/tabs/classes.scss +0 -44
  202. package/scss/tabs/default.scss +0 -102
  203. package/scss/tabs/index.scss +0 -6
  204. package/scss/tabs/pill.scss +0 -48
  205. package/scss/tabs/tabs.scss +0 -220
  206. package/scss/tag/classes.scss +0 -29
  207. package/scss/tag/index.scss +0 -3
  208. package/scss/tag/tag.scss +0 -99
  209. package/scss/text/classes.scss +0 -40
  210. package/scss/text/index.scss +0 -5
  211. package/scss/text/mixins.scss +0 -42
  212. package/scss/text/muted.scss +0 -9
  213. package/scss/text/skeleton.scss +0 -46
  214. package/scss/tile/classes.scss +0 -51
  215. package/scss/tile/index.scss +0 -3
  216. package/scss/tile/tile.scss +0 -370
  217. package/scss/time-picker/classes.scss +0 -16
  218. package/scss/time-picker/index.scss +0 -3
  219. package/scss/time-picker/time-picker.scss +0 -72
  220. package/scss/toast-notification/categories.scss +0 -26
  221. package/scss/toast-notification/classes.scss +0 -98
  222. package/scss/toast-notification/index.scss +0 -4
  223. package/scss/toast-notification/toast.scss +0 -79
  224. package/scss/toggle-switch/classes.scss +0 -11
  225. package/scss/toggle-switch/index.scss +0 -3
  226. package/scss/toggle-switch/toggle-switch.scss +0 -222
  227. package/scss/tooltip/classes.scss +0 -24
  228. package/scss/tooltip/index.scss +0 -3
  229. package/scss/tooltip/tooltip.scss +0 -41
  230. package/scss/tree/classes.scss +0 -19
  231. package/scss/tree/index.scss +0 -3
  232. package/scss/tree/tree.scss +0 -138
  233. package/scss/user-icon/classes.scss +0 -27
  234. package/scss/user-icon/index.scss +0 -4
  235. package/scss/user-icon/sizes.scss +0 -22
  236. package/scss/user-icon/user-icon.scss +0 -250
  237. package/scss/variables.scss +0 -3
  238. package/scss/wizard/classes.scss +0 -27
  239. package/scss/wizard/index.scss +0 -5
  240. package/scss/wizard/long.scss +0 -19
  241. package/scss/wizard/wizard.scss +0 -160
  242. package/scss/wizard/workflow.scss +0 -43
  243. package/src/index.scss +0 -46
package/css/stepper.css ADDED
@@ -0,0 +1,141 @@
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-stepper{
6
+ display:flex;
7
+ flex-direction:column;
8
+ row-gap:6px;
9
+ }
10
+ .iui-stepper > ol{
11
+ margin:0;
12
+ padding:0;
13
+ border:none;
14
+ vertical-align:baseline;
15
+ display:flex;
16
+ justify-content:space-around;
17
+ align-items:flex-start;
18
+ width:100%;
19
+ }
20
+
21
+ .iui-stepper-step{
22
+ --_iui-stepper-step-background-color:var(--iui-color-background-1);
23
+ --_iui-stepper-step-border-color:var(--iui-color-foreground-positive);
24
+ --_iui-stepper-step-number-color:var(--iui-color-foreground-positive);
25
+ --_iui-stepper-step-text-color:var(--iui-color-foreground-positive);
26
+ --_iui-stepper-step-track-before-color:var(--iui-color-foreground-positive);
27
+ --_iui-stepper-step-track-after-color:var(--iui-color-foreground-positive);
28
+ flex:1;
29
+ align-items:center;
30
+ display:flex;
31
+ flex-direction:column;
32
+ margin:0;
33
+ padding:0;
34
+ border:none;
35
+ vertical-align:baseline;
36
+ font-size:12px;
37
+ font-weight:400;
38
+ line-height:24px;
39
+ color:var(--_iui-stepper-step-text-color);
40
+ }
41
+ .iui-stepper-step:first-of-type{
42
+ --_iui-stepper-step-track-before-color:transparent;
43
+ }
44
+ .iui-stepper-step:last-of-type{
45
+ --_iui-stepper-step-track-after-color:transparent;
46
+ }
47
+ .iui-stepper-step.iui-current{
48
+ --_iui-stepper-step-background-color:var(--iui-color-background-positive);
49
+ --_iui-stepper-step-border-color:var(--iui-color-background-positive);
50
+ --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
51
+ --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
52
+ font-weight:600;
53
+ }
54
+ .iui-stepper-step.iui-current ~ .iui-stepper-step{
55
+ --_iui-stepper-step-background-color:var(--iui-color-background-1);
56
+ --_iui-stepper-step-border-color:var(--iui-color-background-border);
57
+ --_iui-stepper-step-number-color:var(--iui-text-color-muted);
58
+ --_iui-stepper-step-text-color:var(--iui-text-color-muted);
59
+ --_iui-stepper-step-track-before-color:var(--iui-color-background-border);
60
+ }
61
+ .iui-stepper-step.iui-current ~ .iui-stepper-step:not(:last-of-type){
62
+ --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
63
+ }
64
+ .iui-stepper-step.iui-clickable:focus{
65
+ outline:0;
66
+ }
67
+
68
+ .iui-stepper-circle{
69
+ align-items:center;
70
+ border-radius:9999px;
71
+ display:flex;
72
+ width:24px;
73
+ height:24px;
74
+ justify-content:center;
75
+ overflow-wrap:break-word;
76
+ -webkit-user-select:none;
77
+ -moz-user-select:none;
78
+ -ms-user-select:none;
79
+ user-select:none;
80
+ border:1px solid var(--_iui-stepper-step-border-color);
81
+ background-color:var(--_iui-stepper-step-background-color);
82
+ color:var(--_iui-stepper-step-number-color);
83
+ }
84
+ .iui-clickable .iui-stepper-circle{
85
+ cursor:pointer;
86
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
87
+ }
88
+ .iui-clickable .iui-stepper-circle:hover{
89
+ --_iui-stepper-step-background-color:var(--iui-color-background-positive);
90
+ --_iui-stepper-step-border-color:var(--iui-color-background-positive);
91
+ --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
92
+ }
93
+
94
+ .iui-clickable:focus .iui-stepper-circle{
95
+ outline:2px solid var(--iui-color-foreground-positive);
96
+ outline-offset:-1px;
97
+ }
98
+
99
+ .iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{
100
+ outline:none;
101
+ }
102
+
103
+ .iui-stepper-track-content{
104
+ display:flex;
105
+ align-items:center;
106
+ width:100%;
107
+ }
108
+ .iui-stepper-track-content::before, .iui-stepper-track-content::after{
109
+ content:"";
110
+ height:2px;
111
+ flex:1 2 auto;
112
+ }
113
+ .iui-stepper-track-content::before{
114
+ background-color:var(--_iui-stepper-step-track-before-color);
115
+ }
116
+ .iui-stepper-track-content::after{
117
+ background-color:var(--_iui-stepper-step-track-after-color);
118
+ }
119
+
120
+ .iui-stepper-step-name{
121
+ text-align:center;
122
+ -webkit-user-select:all;
123
+ -moz-user-select:all;
124
+ user-select:all;
125
+ color:var(--_iui-stepper-step-text-color);
126
+ }
127
+
128
+ .iui-stepper-steps-label{
129
+ display:block;
130
+ font-size:18px;
131
+ text-align:center;
132
+ }
133
+
134
+ .iui-stepper-steps-label-count{
135
+ -webkit-user-select:none;
136
+ -moz-user-select:none;
137
+ -ms-user-select:none;
138
+ user-select:none;
139
+ margin-right:8px;
140
+ color:var(--iui-text-color-muted);
141
+ }
package/css/surface.css CHANGED
@@ -9,7 +9,6 @@
9
9
  background-color:var(--iui-surface-background-color);
10
10
  border-radius:var(--iui-surface-border-radius);
11
11
  box-shadow:var(--iui-surface-elevation);
12
- box-sizing:border-box;
13
12
  color:var(--iui-text-color);
14
13
  }
15
14
  @media (forced-colors: active){