@itwin/itwinui-css 1.0.0-dev.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 (239) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/css/alert.css +16 -27
  3. package/css/all.css +723 -817
  4. package/css/avatar.css +1 -1
  5. package/css/blockquote.css +2 -2
  6. package/css/breadcrumbs.css +19 -13
  7. package/css/button.css +30 -56
  8. package/css/carousel.css +5 -4
  9. package/css/checkbox.css +10 -7
  10. package/css/code.css +1 -0
  11. package/css/color-picker.css +10 -10
  12. package/css/date-picker.css +1 -1
  13. package/css/dialog.css +12 -9
  14. package/css/expandable-block.css +8 -19
  15. package/css/fieldset.css +2 -2
  16. package/css/file-upload.css +11 -20
  17. package/css/footer.css +28 -28
  18. package/css/global.css +65 -65
  19. package/css/header.css +12 -6
  20. package/css/information-panel.css +12 -7
  21. package/css/input.css +18 -10
  22. package/css/location-marker.css +8 -2
  23. package/css/menu.css +14 -7
  24. package/css/non-ideal-state.css +5 -5
  25. package/css/progress-indicator.css +10 -6
  26. package/css/radio-tile.css +19 -10
  27. package/css/radio.css +10 -7
  28. package/css/select.css +25 -19
  29. package/css/side-navigation.css +14 -19
  30. package/css/skip-to-content.css +2 -2
  31. package/css/slider.css +108 -40
  32. package/css/stepper.css +4 -4
  33. package/css/table.css +28 -28
  34. package/css/tabs.css +17 -10
  35. package/css/tag.css +5 -5
  36. package/css/text.css +7 -7
  37. package/css/tile.css +45 -69
  38. package/css/time-picker.css +3 -3
  39. package/css/toast.css +13 -11
  40. package/css/toggle-switch.css +5 -5
  41. package/css/tree.css +13 -20
  42. package/css/utils.css +104 -44
  43. package/css/workflow-diagram.css +1 -1
  44. package/package.json +8 -11
  45. package/css/icon.css +0 -117
  46. package/css/textarea.css +0 -96
  47. package/scss/alert/alert.scss +0 -89
  48. package/scss/alert/classes.scss +0 -33
  49. package/scss/alert/index.scss +0 -3
  50. package/scss/anchor/anchor.scss +0 -78
  51. package/scss/anchor/classes.scss +0 -11
  52. package/scss/anchor/index.scss +0 -3
  53. package/scss/avatar/avatar-sizes.scss +0 -23
  54. package/scss/avatar/avatar.scss +0 -215
  55. package/scss/avatar/classes.scss +0 -27
  56. package/scss/avatar/index.scss +0 -3
  57. package/scss/backdrop/backdrop.scss +0 -27
  58. package/scss/backdrop/classes.scss +0 -7
  59. package/scss/backdrop/index.scss +0 -3
  60. package/scss/badge/badge.scss +0 -34
  61. package/scss/badge/classes.scss +0 -7
  62. package/scss/badge/index.scss +0 -3
  63. package/scss/blockquote/blockquote.scss +0 -26
  64. package/scss/blockquote/classes.scss +0 -7
  65. package/scss/blockquote/index.scss +0 -3
  66. package/scss/breadcrumbs/breadcrumbs.scss +0 -119
  67. package/scss/breadcrumbs/classes.scss +0 -31
  68. package/scss/breadcrumbs/index.scss +0 -3
  69. package/scss/button/borderless.scss +0 -36
  70. package/scss/button/button-group.scss +0 -118
  71. package/scss/button/button.scss +0 -119
  72. package/scss/button/classes.scss +0 -80
  73. package/scss/button/default.scss +0 -51
  74. package/scss/button/idea.scss +0 -12
  75. package/scss/button/index.scss +0 -9
  76. package/scss/button/split-button.scss +0 -45
  77. package/scss/button/variant.scss +0 -44
  78. package/scss/carousel/carousel.scss +0 -113
  79. package/scss/carousel/classes.scss +0 -15
  80. package/scss/carousel/index.scss +0 -3
  81. package/scss/checkbox/checkbox.scss +0 -154
  82. package/scss/checkbox/classes.scss +0 -7
  83. package/scss/checkbox/index.scss +0 -3
  84. package/scss/classes.scss +0 -52
  85. package/scss/code/classes.scss +0 -11
  86. package/scss/code/code.scss +0 -16
  87. package/scss/code/codeblock.scss +0 -59
  88. package/scss/code/index.scss +0 -4
  89. package/scss/color-picker/classes.scss +0 -43
  90. package/scss/color-picker/color-picker.scss +0 -241
  91. package/scss/color-picker/index.scss +0 -3
  92. package/scss/date-picker/classes.scss +0 -47
  93. package/scss/date-picker/date-picker.scss +0 -246
  94. package/scss/date-picker/index.scss +0 -3
  95. package/scss/dialog/classes.scss +0 -48
  96. package/scss/dialog/dialog.scss +0 -178
  97. package/scss/dialog/index.scss +0 -3
  98. package/scss/expandable-block/block.scss +0 -165
  99. package/scss/expandable-block/classes.scss +0 -7
  100. package/scss/expandable-block/index.scss +0 -3
  101. package/scss/fieldset/classes.scss +0 -7
  102. package/scss/fieldset/fieldset.scss +0 -29
  103. package/scss/fieldset/index.scss +0 -3
  104. package/scss/file-upload/classes.scss +0 -7
  105. package/scss/file-upload/file-upload.scss +0 -80
  106. package/scss/file-upload/index.scss +0 -3
  107. package/scss/footer/classes.scss +0 -7
  108. package/scss/footer/footer.scss +0 -55
  109. package/scss/footer/index.scss +0 -3
  110. package/scss/header/classes.scss +0 -79
  111. package/scss/header/header-buttons.scss +0 -316
  112. package/scss/header/header.scss +0 -75
  113. package/scss/header/index.scss +0 -4
  114. package/scss/icon/classes.scss +0 -27
  115. package/scss/icon/icon.scss +0 -65
  116. package/scss/icon/index.scss +0 -3
  117. package/scss/index.scss +0 -50
  118. package/scss/information-panel/classes.scss +0 -27
  119. package/scss/information-panel/index.scss +0 -3
  120. package/scss/information-panel/information-panel.scss +0 -215
  121. package/scss/input/classes.scss +0 -15
  122. package/scss/input/index.scss +0 -4
  123. package/scss/input/input-with-icon.scss +0 -37
  124. package/scss/input/input.scss +0 -70
  125. package/scss/keyboard/classes.scss +0 -7
  126. package/scss/keyboard/index.scss +0 -3
  127. package/scss/keyboard/keyboard.scss +0 -29
  128. package/scss/location-marker/classes.scss +0 -15
  129. package/scss/location-marker/data-rich.scss +0 -49
  130. package/scss/location-marker/default.scss +0 -19
  131. package/scss/location-marker/index.scss +0 -6
  132. package/scss/location-marker/location-marker.scss +0 -11
  133. package/scss/location-marker/me.scss +0 -29
  134. package/scss/menu/classes.scss +0 -21
  135. package/scss/menu/index.scss +0 -3
  136. package/scss/menu/menu.scss +0 -185
  137. package/scss/non-ideal-state/classes.scss +0 -7
  138. package/scss/non-ideal-state/index.scss +0 -3
  139. package/scss/non-ideal-state/non-ideal-state.scss +0 -56
  140. package/scss/progress-indicator/classes.scss +0 -31
  141. package/scss/progress-indicator/index.scss +0 -5
  142. package/scss/progress-indicator/linear.scss +0 -108
  143. package/scss/progress-indicator/overlay.scss +0 -51
  144. package/scss/progress-indicator/radial.scss +0 -155
  145. package/scss/radio/classes.scss +0 -7
  146. package/scss/radio/index.scss +0 -3
  147. package/scss/radio/radio.scss +0 -18
  148. package/scss/radio-tile/classes.scss +0 -31
  149. package/scss/radio-tile/index.scss +0 -3
  150. package/scss/radio-tile/radio-tile.scss +0 -167
  151. package/scss/select/classes.scss +0 -27
  152. package/scss/select/index.scss +0 -3
  153. package/scss/select/select.scss +0 -124
  154. package/scss/side-navigation/classes.scss +0 -15
  155. package/scss/side-navigation/index.scss +0 -3
  156. package/scss/side-navigation/side-navigation.scss +0 -202
  157. package/scss/skip-to-content/classes.scss +0 -7
  158. package/scss/skip-to-content/index.scss +0 -3
  159. package/scss/skip-to-content/skip-to-content.scss +0 -40
  160. package/scss/slider/classes.scss +0 -27
  161. package/scss/slider/index.scss +0 -3
  162. package/scss/slider/slider.scss +0 -135
  163. package/scss/stepper/classes.scss +0 -32
  164. package/scss/stepper/index.scss +0 -3
  165. package/scss/stepper/stepper.scss +0 -151
  166. package/scss/style/baseline.scss +0 -4
  167. package/scss/style/color.scss +0 -39
  168. package/scss/style/elevation.scss +0 -11
  169. package/scss/style/global-variables.scss +0 -23
  170. package/scss/style/global.scss +0 -69
  171. package/scss/style/icon-sizes.scss +0 -14
  172. package/scss/style/index.scss +0 -11
  173. package/scss/style/space.scss +0 -11
  174. package/scss/style/speed.scss +0 -8
  175. package/scss/style/theme.scss +0 -443
  176. package/scss/style/typography.scss +0 -55
  177. package/scss/surface/classes.scss +0 -7
  178. package/scss/surface/index.scss +0 -3
  179. package/scss/surface/surface.scss +0 -17
  180. package/scss/table/classes.scss +0 -64
  181. package/scss/table/column-filter.scss +0 -34
  182. package/scss/table/index.scss +0 -6
  183. package/scss/table/paginator.scss +0 -79
  184. package/scss/table/sizes.scss +0 -31
  185. package/scss/table/table-densities.scss +0 -11
  186. package/scss/table/table.scss +0 -482
  187. package/scss/tabs/borderless.scss +0 -59
  188. package/scss/tabs/classes.scss +0 -44
  189. package/scss/tabs/default.scss +0 -89
  190. package/scss/tabs/index.scss +0 -6
  191. package/scss/tabs/pill.scss +0 -38
  192. package/scss/tabs/tabs.scss +0 -192
  193. package/scss/tag/classes.scss +0 -30
  194. package/scss/tag/index.scss +0 -3
  195. package/scss/tag/tag.scss +0 -89
  196. package/scss/text/classes.scss +0 -40
  197. package/scss/text/index.scss +0 -5
  198. package/scss/text/mixins.scss +0 -43
  199. package/scss/text/muted.scss +0 -7
  200. package/scss/text/skeleton.scss +0 -43
  201. package/scss/textarea/classes.scss +0 -7
  202. package/scss/textarea/index.scss +0 -3
  203. package/scss/textarea/textarea.scss +0 -15
  204. package/scss/tile/classes.scss +0 -51
  205. package/scss/tile/index.scss +0 -3
  206. package/scss/tile/tile.scss +0 -340
  207. package/scss/time-picker/classes.scss +0 -16
  208. package/scss/time-picker/index.scss +0 -3
  209. package/scss/time-picker/time-picker.scss +0 -63
  210. package/scss/toast/categories.scss +0 -22
  211. package/scss/toast/classes.scss +0 -98
  212. package/scss/toast/index.scss +0 -4
  213. package/scss/toast/toast.scss +0 -70
  214. package/scss/toggle-switch/classes.scss +0 -11
  215. package/scss/toggle-switch/index.scss +0 -3
  216. package/scss/toggle-switch/toggle-switch.scss +0 -203
  217. package/scss/tooltip/classes.scss +0 -24
  218. package/scss/tooltip/index.scss +0 -3
  219. package/scss/tooltip/tooltip.scss +0 -40
  220. package/scss/tree/classes.scss +0 -19
  221. package/scss/tree/index.scss +0 -3
  222. package/scss/tree/tree.scss +0 -126
  223. package/scss/utils/classes.scss +0 -6
  224. package/scss/utils/index.scss +0 -6
  225. package/scss/utils/input-container/classes.scss +0 -39
  226. package/scss/utils/input-container/index.scss +0 -3
  227. package/scss/utils/input-container/input-container.scss +0 -285
  228. package/scss/utils/mixins.scss +0 -171
  229. package/scss/utils/notification-marker/classes.scss +0 -9
  230. package/scss/utils/notification-marker/index.scss +0 -3
  231. package/scss/utils/notification-marker/notification-marker.scss +0 -55
  232. package/scss/utils/popover/classes.scss +0 -7
  233. package/scss/utils/popover/index.scss +0 -3
  234. package/scss/utils/popover/popover.scss +0 -21
  235. package/scss/variables.scss +0 -3
  236. package/scss/workflow-diagram/classes.scss +0 -15
  237. package/scss/workflow-diagram/index.scss +0 -3
  238. package/scss/workflow-diagram/workflow-diagram.scss +0 -64
  239. package/src/index.scss +0 -50
package/scss/style/theme.scss DELETED
@@ -1,443 +0,0 @@
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
-
4
- // LIGHT THEME //
5
- // Light theme > Background
6
- $iui-color-background-1--light: hsl(0, 0%, 100%);
7
- $iui-color-background-2--light: hsl(220, 27%, 98%);
8
- $iui-color-background-3--light: hsl(216, 17%, 94%);
9
- $iui-color-background-4--light: hsl(206, 11%, 88%);
10
- $iui-color-background-5--light: hsl(210, 10%, 80%);
11
- $iui-color-background-primary--light: hsl(203, 100%, 44%);
12
- $iui-color-background-positive--light: hsl(95, 72%, 37%);
13
- $iui-color-background-warning--light: hsl(33, 89%, 51%);
14
- $iui-color-background-negative--light: hsl(0, 91%, 43%);
15
- $iui-color-background-disabled--light: $iui-color-background-3--light;
16
- $iui-color-background-border--light: $iui-color-background-5--light;
17
-
18
- // Light theme > Foreground
19
- $iui-color-foreground-body--light: hsl(0, 0%, 0%);
20
- $iui-color-foreground-body-invert--light: invert($iui-color-foreground-body--light);
21
- $iui-color-foreground-accessory--light: hsl(0, 0%, 100%);
22
- $iui-color-foreground-primary--light: hsl(203, 100%, 44%);
23
- $iui-color-foreground-positive--light: hsl(95, 72%, 37%);
24
- $iui-color-foreground-warning--light: hsl(33, 89%, 51%);
25
- $iui-color-foreground-negative--light: hsl(0, 91%, 43%);
26
-
27
- // Light theme > Overlays
28
- $iui-color-background-1-overlay--light: darken($iui-color-background-1--light, 5%);
29
- $iui-color-background-primary-overlay--light: darken($iui-color-background-primary--light, 10%);
30
- $iui-color-background-positive-overlay--light: darken($iui-color-background-positive--light, 10%);
31
- $iui-color-foreground-primary-overlay--light: darken($iui-color-foreground-primary--light, 10%);
32
- $iui-color-foreground-positive-overlay--light: darken($iui-color-foreground-positive--light, 10%);
33
- $iui-color-foreground-warning-overlay--light: darken($iui-color-foreground-warning--light, 10%);
34
- $iui-color-foreground-negative-overlay--light: darken($iui-color-foreground-negative--light, 10%);
35
-
36
- // Light theme > Opacity stops
37
- $iui-opacity-1--light: 1;
38
- $iui-opacity-2--light: 0.8;
39
- $iui-opacity-3--light: 0.6;
40
- $iui-opacity-4--light: 0.4;
41
- $iui-opacity-5--light: 0.2;
42
- $iui-opacity-6--light: 0.1;
43
-
44
- // Light theme > Text colors
45
- $iui-text-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
46
- $iui-text-color-muted--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
47
- $iui-text-color-placeholder--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
48
-
49
- // Light theme > Icon colors
50
- $iui-icons-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
51
- $iui-icons-color-actionable--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
52
- $iui-icons-color-actionable-hover--light: rgba($iui-color-foreground-body--light, $iui-opacity-1--light);
53
- $iui-icons-color-actionable-disabled--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
54
- $iui-icons-color-primary--light: $iui-color-foreground-primary--light;
55
- $iui-icons-color-positive--light: $iui-color-foreground-positive--light;
56
- $iui-icons-color-negative--light: $iui-color-foreground-negative--light;
57
- $iui-icons-color-warning--light: $iui-color-foreground-warning--light;
58
-
59
- // LIGHT HIGH CONTRAST THEME //
60
- // Light high contrast theme > Background
61
- $iui-color-background-1--light-hc: hsl(200, 12%, 100%);
62
- $iui-color-background-2--light-hc: hsl(200, 12%, 98%);
63
- $iui-color-background-3--light-hc: hsl(200, 12%, 94%);
64
- $iui-color-background-4--light-hc: hsl(200, 12%, 88%);
65
- $iui-color-background-5--light-hc: hsl(200, 12%, 80%);
66
- $iui-color-background-primary--light-hc: hsl(200, 100%, 26%);
67
- $iui-color-background-positive--light-hc: hsl(140, 100%, 19%);
68
- $iui-color-background-warning--light-hc: hsl(45, 100%, 22%);
69
- $iui-color-background-negative--light-hc: hsl(0, 100%, 31%);
70
- $iui-color-background-disabled--light-hc: $iui-color-background-3--light-hc;
71
- $iui-color-background-border--light-hc: hsl(0 0% 0% / 0.3);
72
-
73
- // Light high contrast theme > Foreground
74
- $iui-color-foreground-body--light-hc: hsl(0, 0%, 0%);
75
- $iui-color-foreground-body-invert--light-hc: invert($iui-color-foreground-body--light-hc);
76
- $iui-color-foreground-accessory--light-hc: hsl(0, 0%, 100%);
77
- $iui-color-foreground-primary--light-hc: hsl(200, 100%, 23%);
78
- $iui-color-foreground-positive--light-hc: hsl(140, 100%, 16%);
79
- $iui-color-foreground-warning--light-hc: hsl(45, 100%, 19%);
80
- $iui-color-foreground-negative--light-hc: hsl(0, 100%, 28%);
81
-
82
- // Light high contrast theme > Overlays
83
- $iui-color-background-1-overlay--light-hc: darken($iui-color-background-1--light-hc, 10%);
84
- $iui-color-background-primary-overlay--light-hc: darken($iui-color-background-primary--light-hc, 10%);
85
- $iui-color-background-positive-overlay--light-hc: darken($iui-color-background-positive--light-hc, 10%);
86
- $iui-color-foreground-primary-overlay--light-hc: darken($iui-color-foreground-primary--light-hc, 10%);
87
- $iui-color-foreground-positive-overlay--light-hc: darken($iui-color-foreground-positive--light-hc, 10%);
88
- $iui-color-foreground-warning-overlay--light-hc: darken($iui-color-foreground-warning--light-hc, 10%);
89
- $iui-color-foreground-negative-overlay--light-hc: darken($iui-color-foreground-negative--light-hc, 10%);
90
-
91
- // Light high contrast theme > Opacity stops
92
- $iui-opacity-1--light-hc: 1;
93
- $iui-opacity-2--light-hc: 0.86;
94
- $iui-opacity-3--light-hc: 0.72;
95
- $iui-opacity-4--light-hc: 0.67;
96
- $iui-opacity-5--light-hc: 0.3;
97
- $iui-opacity-6--light-hc: 0.06;
98
-
99
- // Light high contrast theme > Text colors
100
- $iui-text-color--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-2--light-hc);
101
- $iui-text-color-muted--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
102
- $iui-text-color-placeholder--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
103
-
104
- // Light high contrast theme > Icon colors
105
- $iui-icons-color--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
106
- $iui-icons-color-actionable--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-2--light-hc);
107
- $iui-icons-color-actionable-hover--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-1--light-hc);
108
- $iui-icons-color-actionable-disabled--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-5--light-hc);
109
- $iui-icons-color-primary--light-hc: $iui-color-foreground-primary--light-hc;
110
- $iui-icons-color-positive--light-hc: $iui-color-foreground-positive--light-hc;
111
- $iui-icons-color-negative--light-hc: $iui-color-foreground-negative--light-hc;
112
- $iui-icons-color-warning--light-hc: $iui-color-foreground-warning--light-hc;
113
-
114
- // DARK THEME //
115
- // Dark theme > Background
116
- $iui-color-background-1--dark: hsl(204, 12%, 40%);
117
- $iui-color-background-2--dark: hsl(202, 12%, 35%);
118
- $iui-color-background-3--dark: hsl(204, 13%, 31%);
119
- $iui-color-background-4--dark: hsl(200, 14%, 25%);
120
- $iui-color-background-5--dark: hsl(200, 14%, 21%);
121
- $iui-color-background-primary--dark: hsl(203, 100%, 44%);
122
- $iui-color-background-positive--dark: hsl(95, 72%, 37%);
123
- $iui-color-background-warning--dark: hsl(33, 89%, 51%);
124
- $iui-color-background-negative--dark: hsl(0, 91%, 43%);
125
- $iui-color-background-disabled--dark: $iui-color-background-3--dark;
126
- $iui-color-background-border--dark: $iui-color-background-5--dark;
127
-
128
- // Dark theme > Foreground
129
- $iui-color-foreground-body--dark: hsl(0, 0%, 100%);
130
- $iui-color-foreground-body-invert--dark: invert($iui-color-foreground-body--dark);
131
- $iui-color-foreground-body-invert--dark: hsl(0, 0%, 0%);
132
- $iui-color-foreground-accessory--dark: hsl(0, 0%, 100%);
133
- $iui-color-foreground-primary--dark: hsl(203, 80%, 80%);
134
- $iui-color-foreground-positive--dark: hsl(96, 45%, 78%);
135
- $iui-color-foreground-warning--dark: hsl(34, 87%, 82%);
136
- $iui-color-foreground-negative--dark: hsl(0, 69%, 80%);
137
-
138
- // Dark theme > Overlays
139
- $iui-color-background-1-overlay--dark: lighten($iui-color-background-1--dark, 5%);
140
- $iui-color-background-primary-overlay--dark: lighten($iui-color-background-primary--dark, 5%);
141
- $iui-color-background-positive-overlay--dark: lighten($iui-color-background-positive--dark, 5%);
142
- $iui-color-foreground-primary-overlay--dark: lighten($iui-color-foreground-primary--dark, 10%);
143
- $iui-color-foreground-positive-overlay--dark: lighten($iui-color-foreground-positive--dark, 10%);
144
- $iui-color-foreground-warning-overlay--dark: lighten($iui-color-foreground-warning--dark, 10%);
145
- $iui-color-foreground-negative-overlay--dark: lighten($iui-color-foreground-negative--dark, 10%);
146
-
147
- // Dark theme > Opacity stops
148
- $iui-opacity-1--dark: 1;
149
- $iui-opacity-2--dark: 0.85;
150
- $iui-opacity-3--dark: 0.65;
151
- $iui-opacity-4--dark: 0.45;
152
- $iui-opacity-5--dark: 0.25;
153
- $iui-opacity-6--dark: 0.1;
154
-
155
- // Dark theme > Text colors
156
- $iui-text-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
157
- $iui-text-color-muted--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
158
- $iui-text-color-placeholder--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
159
-
160
- // Dark theme > Icon colors
161
- $iui-icons-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
162
- $iui-icons-color-actionable--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
163
- $iui-icons-color-actionable-hover--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-1--dark);
164
- $iui-icons-color-actionable-disabled--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
165
- $iui-icons-color-primary--dark: $iui-color-foreground-primary--dark;
166
- $iui-icons-color-positive--dark: $iui-color-foreground-positive--dark;
167
- $iui-icons-color-negative--dark: $iui-color-foreground-negative--dark;
168
- $iui-icons-color-warning--dark: $iui-color-foreground-warning--dark;
169
-
170
- // DARK HIGH CONTRAST THEME //
171
- // Dark high contrast theme > Background
172
- $iui-color-background-1--dark-hc: hsl(200, 12%, 20%);
173
- $iui-color-background-2--dark-hc: hsl(200, 12%, 15%);
174
- $iui-color-background-3--dark-hc: hsl(200, 12%, 10%);
175
- $iui-color-background-4--dark-hc: hsl(200, 12%, 25%);
176
- $iui-color-background-5--dark-hc: hsl(200, 12%, 30%);
177
- $iui-color-background-primary--dark-hc: hsl(200, 100%, 26%);
178
- $iui-color-background-positive--dark-hc: hsl(140, 100%, 19%);
179
- $iui-color-background-warning--dark-hc: hsl(45, 100%, 22%);
180
- $iui-color-background-negative--dark-hc: hsl(0, 100%, 31%);
181
- $iui-color-background-disabled--dark-hc: $iui-color-background-4--dark-hc;
182
- $iui-color-background-border--dark-hc: hsl(0 0% 100% / 0.34);
183
-
184
- // Dark high contrast theme > Foreground
185
- $iui-color-foreground-body--dark-hc: hsl(0, 0%, 100%);
186
- $iui-color-foreground-body-invert--dark-hc: invert($iui-color-foreground-body--dark-hc);
187
- $iui-color-foreground-accessory--dark-hc: hsl(0, 0%, 100%);
188
- $iui-color-foreground-primary--dark-hc: hsl(200, 100%, 79%);
189
- $iui-color-foreground-positive--dark-hc: hsl(140, 100%, 72%);
190
- $iui-color-foreground-warning--dark-hc: hsl(45, 100%, 75%);
191
- $iui-color-foreground-negative--dark-hc: hsl(0, 100%, 88%);
192
-
193
- // Dark high contrast theme > Overlays
194
- $iui-color-background-1-overlay--dark-hc: lighten($iui-color-background-1--dark-hc, 10%);
195
- $iui-color-background-primary-overlay--dark-hc: lighten($iui-color-background-primary--dark-hc, 10%);
196
- $iui-color-background-positive-overlay--dark-hc: lighten($iui-color-background-positive--dark-hc, 10%);
197
- $iui-color-foreground-primary-overlay--dark-hc: lighten($iui-color-foreground-primary--dark-hc, 10%);
198
- $iui-color-foreground-positive-overlay--dark-hc: lighten($iui-color-foreground-positive--dark-hc, 10%);
199
- $iui-color-foreground-warning-overlay--dark-hc: lighten($iui-color-foreground-warning--dark-hc, 10%);
200
- $iui-color-foreground-negative-overlay--dark-hc: lighten($iui-color-foreground-negative--dark-hc, 10%);
201
-
202
- // Dark high contrast theme > Opacity stops
203
- $iui-opacity-1--dark-hc: 1;
204
- $iui-opacity-2--dark-hc: 0.94;
205
- $iui-opacity-3--dark-hc: 0.88;
206
- $iui-opacity-4--dark-hc: 0.76;
207
- $iui-opacity-5--dark-hc: 0.34;
208
- $iui-opacity-6--dark-hc: 0.07;
209
-
210
- // Dark high contrast theme > Text colors
211
- $iui-text-color--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-2--dark-hc);
212
- $iui-text-color-muted--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-4--dark-hc);
213
- $iui-text-color-placeholder--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-5--dark-hc);
214
-
215
- // Dark high contrast theme > Icon colors
216
- $iui-icons-color--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-4--dark-hc);
217
- $iui-icons-color-actionable--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-2--dark-hc);
218
- $iui-icons-color-actionable-hover--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-1--dark-hc);
219
- $iui-icons-color-actionable-disabled--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-5--dark-hc);
220
- $iui-icons-color-primary--dark-hc: $iui-color-foreground-primary--dark-hc;
221
- $iui-icons-color-positive--dark-hc: $iui-color-foreground-positive--dark-hc;
222
- $iui-icons-color-warning--dark-hc: $iui-color-foreground-warning--dark-hc;
223
- $iui-icons-color-negative--dark-hc: $iui-color-foreground-negative--dark-hc;
224
-
225
- // Theme values
226
- $themes: (
227
- light: (
228
- iui-color-background-1: $iui-color-background-1--light,
229
- iui-color-background-2: $iui-color-background-2--light,
230
- iui-color-background-3: $iui-color-background-3--light,
231
- iui-color-background-4: $iui-color-background-4--light,
232
- iui-color-background-5: $iui-color-background-5--light,
233
- iui-color-background-primary: $iui-color-background-primary--light,
234
- iui-color-background-positive: $iui-color-background-positive--light,
235
- iui-color-background-warning: $iui-color-background-warning--light,
236
- iui-color-background-negative: $iui-color-background-negative--light,
237
- iui-color-background-disabled: $iui-color-background-disabled--light,
238
- iui-color-background-border: $iui-color-background-border--light,
239
- iui-color-foreground-body: $iui-color-foreground-body--light,
240
- iui-color-foreground-body-invert: $iui-color-foreground-body-invert--light,
241
- iui-color-foreground-accessory: $iui-color-foreground-accessory--light,
242
- iui-color-foreground-primary: $iui-color-foreground-primary--light,
243
- iui-color-foreground-positive: $iui-color-foreground-positive--light,
244
- iui-color-foreground-warning: $iui-color-foreground-warning--light,
245
- iui-color-foreground-negative: $iui-color-foreground-negative--light,
246
- iui-color-background-1-overlay: $iui-color-background-1-overlay--light,
247
- iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light,
248
- iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light,
249
- iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--light,
250
- iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--light,
251
- iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--light,
252
- iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--light,
253
- iui-opacity-1: $iui-opacity-1--light,
254
- iui-opacity-2: $iui-opacity-2--light,
255
- iui-opacity-3: $iui-opacity-3--light,
256
- iui-opacity-4: $iui-opacity-4--light,
257
- iui-opacity-5: $iui-opacity-5--light,
258
- iui-opacity-6: $iui-opacity-6--light,
259
- iui-text-color: $iui-text-color--light,
260
- iui-text-color-muted: $iui-text-color-muted--light,
261
- iui-text-color-placeholder: $iui-text-color-placeholder--light,
262
- iui-icons-color: $iui-icons-color--light,
263
- iui-icons-color-actionable: $iui-icons-color-actionable--light,
264
- iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light,
265
- iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light,
266
- iui-icons-color-primary: $iui-icons-color-primary--light,
267
- iui-icons-color-positive: $iui-icons-color-positive--light,
268
- iui-icons-color-warning: $iui-icons-color-warning--light,
269
- iui-icons-color-negative: $iui-icons-color-negative--light,
270
- ),
271
- dark: (
272
- iui-color-background-1: $iui-color-background-1--dark,
273
- iui-color-background-2: $iui-color-background-2--dark,
274
- iui-color-background-3: $iui-color-background-3--dark,
275
- iui-color-background-4: $iui-color-background-4--dark,
276
- iui-color-background-5: $iui-color-background-5--dark,
277
- iui-color-background-primary: $iui-color-background-primary--dark,
278
- iui-color-background-positive: $iui-color-background-positive--dark,
279
- iui-color-background-warning: $iui-color-background-warning--dark,
280
- iui-color-background-negative: $iui-color-background-negative--dark,
281
- iui-color-background-disabled: $iui-color-background-disabled--dark,
282
- iui-color-background-border: $iui-color-background-border--dark,
283
- iui-color-foreground-body: $iui-color-foreground-body--dark,
284
- iui-color-foreground-body-invert: $iui-color-foreground-body-invert--dark,
285
- iui-color-foreground-accessory: $iui-color-foreground-accessory--dark,
286
- iui-color-foreground-primary: $iui-color-foreground-primary--dark,
287
- iui-color-foreground-positive: $iui-color-foreground-positive--dark,
288
- iui-color-foreground-warning: $iui-color-foreground-warning--dark,
289
- iui-color-foreground-negative: $iui-color-foreground-negative--dark,
290
- iui-color-background-1-overlay: $iui-color-background-1-overlay--dark,
291
- iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark,
292
- iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark,
293
- iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--dark,
294
- iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--dark,
295
- iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--dark,
296
- iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--dark,
297
- iui-opacity-1: $iui-opacity-1--dark,
298
- iui-opacity-2: $iui-opacity-2--dark,
299
- iui-opacity-3: $iui-opacity-3--dark,
300
- iui-opacity-4: $iui-opacity-4--dark,
301
- iui-opacity-5: $iui-opacity-5--dark,
302
- iui-opacity-6: $iui-opacity-6--dark,
303
- iui-text-color: $iui-text-color--dark,
304
- iui-text-color-muted: $iui-text-color-muted--dark,
305
- iui-text-color-placeholder: $iui-text-color-placeholder--dark,
306
- iui-icons-color: $iui-icons-color--dark,
307
- iui-icons-color-actionable: $iui-icons-color-actionable--dark,
308
- iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark,
309
- iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark,
310
- iui-icons-color-primary: $iui-icons-color-primary--dark,
311
- iui-icons-color-positive: $iui-icons-color-positive--dark,
312
- iui-icons-color-warning: $iui-icons-color-warning--dark,
313
- iui-icons-color-negative: $iui-icons-color-negative--dark,
314
- ),
315
- dark-hc: (
316
- iui-color-background-1: $iui-color-background-1--dark-hc,
317
- iui-color-background-2: $iui-color-background-2--dark-hc,
318
- iui-color-background-3: $iui-color-background-3--dark-hc,
319
- iui-color-background-4: $iui-color-background-4--dark-hc,
320
- iui-color-background-5: $iui-color-background-5--dark-hc,
321
- iui-color-background-primary: $iui-color-background-primary--dark-hc,
322
- iui-color-background-positive: $iui-color-background-positive--dark-hc,
323
- iui-color-background-warning: $iui-color-background-warning--dark-hc,
324
- iui-color-background-negative: $iui-color-background-negative--dark-hc,
325
- iui-color-background-disabled: $iui-color-background-disabled--dark-hc,
326
- iui-color-background-border: $iui-color-background-border--dark-hc,
327
- iui-color-foreground-body: $iui-color-foreground-body--dark-hc,
328
- iui-color-foreground-accessory: $iui-color-foreground-accessory--dark-hc,
329
- iui-color-foreground-primary: $iui-color-foreground-primary--dark-hc,
330
- iui-color-foreground-positive: $iui-color-foreground-positive--dark-hc,
331
- iui-color-foreground-warning: $iui-color-foreground-warning--dark-hc,
332
- iui-color-foreground-negative: $iui-color-foreground-negative--dark-hc,
333
- iui-color-background-1-overlay: $iui-color-background-1-overlay--dark-hc,
334
- iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark-hc,
335
- iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark-hc,
336
- iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--dark-hc,
337
- iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--dark-hc,
338
- iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--dark-hc,
339
- iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--dark-hc,
340
- iui-opacity-1: $iui-opacity-1--dark-hc,
341
- iui-opacity-2: $iui-opacity-2--dark-hc,
342
- iui-opacity-3: $iui-opacity-3--dark-hc,
343
- iui-opacity-4: $iui-opacity-4--dark-hc,
344
- iui-opacity-5: $iui-opacity-5--dark-hc,
345
- iui-opacity-6: $iui-opacity-6--dark-hc,
346
- iui-text-color: $iui-text-color--dark-hc,
347
- iui-text-color-muted: $iui-text-color-muted--dark-hc,
348
- iui-text-color-placeholder: $iui-text-color-placeholder--dark-hc,
349
- iui-icons-color: $iui-icons-color--dark-hc,
350
- iui-icons-color-actionable: $iui-icons-color-actionable--dark-hc,
351
- iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark-hc,
352
- iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark-hc,
353
- iui-icons-color-primary: $iui-icons-color-primary--dark-hc,
354
- iui-icons-color-positive: $iui-icons-color-positive--dark-hc,
355
- iui-icons-color-warning: $iui-icons-color-warning--dark-hc,
356
- iui-icons-color-negative: $iui-icons-color-negative--dark-hc,
357
- ),
358
- light-hc: (
359
- iui-color-background-1: $iui-color-background-1--light-hc,
360
- iui-color-background-2: $iui-color-background-2--light-hc,
361
- iui-color-background-3: $iui-color-background-3--light-hc,
362
- iui-color-background-4: $iui-color-background-4--light-hc,
363
- iui-color-background-5: $iui-color-background-5--light-hc,
364
- iui-color-background-primary: $iui-color-background-primary--light-hc,
365
- iui-color-background-positive: $iui-color-background-positive--light-hc,
366
- iui-color-background-warning: $iui-color-background-warning--light-hc,
367
- iui-color-background-negative: $iui-color-background-negative--light-hc,
368
- iui-color-background-disabled: $iui-color-background-disabled--light-hc,
369
- iui-color-background-border: $iui-color-background-border--light-hc,
370
- iui-color-foreground-body: $iui-color-foreground-body--light-hc,
371
- iui-color-foreground-accessory: $iui-color-foreground-accessory--light-hc,
372
- iui-color-foreground-primary: $iui-color-foreground-primary--light-hc,
373
- iui-color-foreground-positive: $iui-color-foreground-positive--light-hc,
374
- iui-color-foreground-warning: $iui-color-foreground-warning--light-hc,
375
- iui-color-foreground-negative: $iui-color-foreground-negative--light-hc,
376
- iui-color-background-1-overlay: $iui-color-background-1-overlay--light-hc,
377
- iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light-hc,
378
- iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light-hc,
379
- iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--light-hc,
380
- iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--light-hc,
381
- iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--light-hc,
382
- iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--light-hc,
383
- iui-opacity-1: $iui-opacity-1--light-hc,
384
- iui-opacity-2: $iui-opacity-2--light-hc,
385
- iui-opacity-3: $iui-opacity-3--light-hc,
386
- iui-opacity-4: $iui-opacity-4--light-hc,
387
- iui-opacity-5: $iui-opacity-5--light-hc,
388
- iui-opacity-6: $iui-opacity-6--light-hc,
389
- iui-text-color: $iui-text-color--light-hc,
390
- iui-text-color-muted: $iui-text-color-muted--light-hc,
391
- iui-text-color-placeholder: $iui-text-color-placeholder--light-hc,
392
- iui-icons-color: $iui-icons-color--light-hc,
393
- iui-icons-color-actionable: $iui-icons-color-actionable--light-hc,
394
- iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light-hc,
395
- iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light-hc,
396
- iui-icons-color-primary: $iui-icons-color-primary--light-hc,
397
- iui-icons-color-positive: $iui-icons-color-positive--light-hc,
398
- iui-icons-color-warning: $iui-icons-color-warning--light-hc,
399
- iui-icons-color-negative: $iui-icons-color-negative--light-hc,
400
- ),
401
- );
402
-
403
- // Overrides of $themes used when creating CSS variables
404
- $cssVariables: (
405
- iui-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
406
- iui-text-color-muted: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
407
- iui-text-color-placeholder: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
408
- iui-icons-color-primary: var(--iui-color-foreground-primary),
409
- iui-icons-color-positive: var(--iui-color-foreground-positive),
410
- iui-icons-color-warning: var(--iui-color-foreground-warning),
411
- iui-icons-color-negative: var(--iui-color-foreground-negative),
412
- iui-icons-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
413
- iui-icons-color-actionable: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
414
- iui-icons-color-actionable-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)),
415
- iui-icons-color-actionable-disabled: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
416
- );
417
-
418
- @function hextorgb($hex) {
419
- @return red($hex), green($hex), blue($hex);
420
- }
421
-
422
- @mixin theme-variables($theme) {
423
- $variableList: map-get($themes, $theme);
424
-
425
- @each $key, $value in $variableList {
426
- @if (map-has-key($cssVariables, $key)) {
427
- $cssVarValue: map-get($cssVariables, $key);
428
-
429
- --#{$key}: #{$cssVarValue};
430
- } @else if (type-of($value) == color) {
431
- @if alpha($value) < 1 {
432
- --#{$key}: #{$value};
433
- } @else {
434
- $rgbVal: hextorgb($value);
435
-
436
- --#{$key}-rgb: #{$rgbVal};
437
- --#{$key}: rgb(var(--#{$key}-rgb));
438
- }
439
- } @else {
440
- --#{$key}: #{$value};
441
- }
442
- }
443
- }
package/scss/style/typography.scss DELETED
@@ -1,55 +0,0 @@
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 './baseline';
4
- @import './theme';
5
-
6
- /// Constants ------------------------------------------------------------------
7
- $iui-sans-fallback: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial,
8
- sans-serif;
9
- $iui-sans: 'Noto Sans';
10
- $iui-monospace: 'Noto Sans Mono', ui-monospace, Menlo, 'Segoe UI Mono', Consolas, 'Roboto Mono', 'Courier New',
11
- monospace;
12
-
13
- $iui-font-family: $iui-sans, $iui-sans-fallback;
14
-
15
- $iui-font-size: 14px;
16
- $iui-font-size-small: 12px;
17
- $iui-font-size-leading: 16px;
18
- $iui-font-size-subheading: 18px;
19
- $iui-font-size-title: 24px;
20
- $iui-font-size-headline: 32px;
21
-
22
- $iui-cap-size: 10px;
23
- $iui-cap-size-small: 9px;
24
- $iui-cap-size-leading: 12px;
25
- $iui-cap-size-subheading: 13px;
26
- $iui-cap-size-title: 17px;
27
- $iui-cap-size-headline: 23px;
28
-
29
- $iui-font-weight-light: 300;
30
- $iui-font-weight-normal: 400;
31
- $iui-font-weight-semibold: 600;
32
- $iui-font-weight-bold: 700;
33
-
34
- /// Font loading helpers -------------------------------------------------------
35
- /// See: https://www.zachleat.com/web/comprehensive-webfonts
36
-
37
- $iui-font-loaded-class: null !default;
38
-
39
- @mixin iui-font-family {
40
- @if $iui-font-loaded-class {
41
- font-family: $iui-sans-fallback;
42
-
43
- &.#{ $iui-font-loaded-class } {
44
- font-family: $iui-font-family;
45
- }
46
-
47
- @at-root {
48
- body.#{ $iui-font-loaded-class } & {
49
- font-family: $iui-font-family;
50
- }
51
- }
52
- } @else {
53
- font-family: $iui-font-family;
54
- }
55
- }
package/scss/surface/classes.scss DELETED
@@ -1,7 +0,0 @@
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 './index';
4
-
5
- .iui-surface {
6
- @include iui-surface;
7
- }
package/scss/surface/index.scss DELETED
@@ -1,3 +0,0 @@
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 './surface';
package/scss/surface/surface.scss DELETED
@@ -1,17 +0,0 @@
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
-
5
- @mixin iui-surface($background-color: var(--iui-color-background-1), $border-radius: 0, $elevation: $iui-elevation-2) {
6
- --iui-surface-background-color: #{$background-color};
7
- --iui-surface-border-radius: #{$border-radius};
8
- --iui-surface-elevation: #{$elevation};
9
-
10
- background-color: var(--iui-surface-background-color);
11
- border-radius: var(--iui-surface-border-radius);
12
- box-shadow: var(--iui-surface-elevation);
13
- color: var(--iui-text-color);
14
- @media (forced-colors: active) {
15
- border: 1px solid transparent;
16
- }
17
- }
package/scss/table/classes.scss DELETED
@@ -1,64 +0,0 @@
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 './index';
4
-
5
- .iui-table {
6
- @include iui-table;
7
- @include iui-table-sizes;
8
- }
9
-
10
- .iui-table-header-wrapper {
11
- @include iui-table-header-wrapper;
12
- }
13
-
14
- .iui-table-header {
15
- @include iui-table-header;
16
- }
17
-
18
- .iui-table-row {
19
- @include iui-table-row;
20
- }
21
-
22
- .iui-table-header-actions-container {
23
- @include iui-table-header-actions-container;
24
- }
25
-
26
- .iui-table-body {
27
- @include iui-table-body;
28
- }
29
-
30
- .iui-table-cell {
31
- @include iui-table-cell;
32
- }
33
-
34
- .iui-table-cell-shadow-left {
35
- @include iui-table-cell-shadow(left);
36
- }
37
-
38
- .iui-table-cell-shadow-right {
39
- @include iui-table-cell-shadow(right);
40
- }
41
-
42
- .iui-table-paginator {
43
- @include iui-table-paginator;
44
- }
45
-
46
- .iui-table-paginator-page-size-label {
47
- @include iui-table-paginator-page-size-label;
48
- }
49
-
50
- .iui-table-paginator-ellipsis {
51
- @include iui-table-paginator-ellipsis;
52
- }
53
-
54
- .iui-table-paginator-pages-group {
55
- @include iui-table-paginator-pages-group;
56
- }
57
-
58
- .iui-table-paginator-page-button {
59
- @include iui-table-paginator-page-button;
60
- }
61
-
62
- .iui-table-column-filter {
63
- @include iui-table-column-filter;
64
- }
package/scss/table/column-filter.scss DELETED
@@ -1,34 +0,0 @@
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 '../surface/index';
5
-
6
- @mixin iui-table-column-filter {
7
- @include iui-surface;
8
- padding: $iui-baseline $iui-sm;
9
- display: inline-flex;
10
- flex-direction: column;
11
- align-items: flex-end;
12
-
13
- > .iui-input-container:not(.iui-inline-label) {
14
- width: 100%;
15
- }
16
-
17
- > .iui-input-container,
18
- > .iui-input {
19
- margin-bottom: $iui-baseline;
20
- }
21
-
22
- > .iui-button-bar {
23
- display: flex;
24
- width: 100%;
25
- align-content: center;
26
- gap: $iui-s;
27
-
28
- > .iui-button {
29
- &:first-of-type {
30
- margin-left: auto;
31
- }
32
- }
33
- }
34
- }
package/scss/table/index.scss DELETED
@@ -1,6 +0,0 @@
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 './table';
4
- @import './column-filter';
5
- @import './paginator';
6
- @import './sizes';