@itwin/itwinui-css 1.0.0-dev.9 → 1.1.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.
Files changed (51) hide show
  1. package/CHANGELOG.md +36 -954
  2. package/README.md +50 -29
  3. package/css/alert.css +1 -387
  4. package/css/all.css +1 -9061
  5. package/css/anchor.css +1 -64
  6. package/css/avatar.css +1 -222
  7. package/css/backdrop.css +1 -22
  8. package/css/badge.css +1 -25
  9. package/css/blockquote.css +1 -22
  10. package/css/breadcrumbs.css +1 -372
  11. package/css/button.css +1 -381
  12. package/css/carousel.css +1 -121
  13. package/css/checkbox.css +1 -150
  14. package/css/code.css +1 -81
  15. package/css/color-picker.css +1 -203
  16. package/css/date-picker.css +1 -399
  17. package/css/dialog.css +1 -159
  18. package/css/expandable-block.css +1 -171
  19. package/css/fieldset.css +1 -27
  20. package/css/file-upload.css +1 -78
  21. package/css/footer.css +1 -91
  22. package/css/global.css +1 -59
  23. package/css/header.css +1 -432
  24. package/css/information-panel.css +1 -189
  25. package/css/input.css +1 -166
  26. package/css/keyboard.css +1 -27
  27. package/css/location-marker.css +1 -114
  28. package/css/menu.css +1 -171
  29. package/css/non-ideal-state.css +1 -61
  30. package/css/progress-indicator.css +1 -299
  31. package/css/radio-tile.css +1 -187
  32. package/css/radio.css +1 -157
  33. package/css/select.css +1 -235
  34. package/css/side-navigation.css +1 -198
  35. package/css/skip-to-content.css +1 -61
  36. package/css/slider.css +1 -258
  37. package/css/stepper.css +1 -137
  38. package/css/surface.css +1 -14
  39. package/css/table.css +1 -717
  40. package/css/tabs.css +1 -321
  41. package/css/tag.css +1 -140
  42. package/css/text.css +1 -115
  43. package/css/tile.css +1 -488
  44. package/css/time-picker.css +1 -128
  45. package/css/toast.css +1 -284
  46. package/css/toggle-switch.css +1 -212
  47. package/css/tooltip.css +1 -48
  48. package/css/tree.css +1 -124
  49. package/css/utils.css +1 -679
  50. package/css/workflow-diagram.css +1 -63
  51. package/package.json +8 -4
package/css/tree.css CHANGED
@@ -2,127 +2,4 @@
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
- border-radius:var(--iui-border-radius-1);
12
- }
13
-
14
- .iui-sub-tree{
15
- margin:0;
16
- padding:0;
17
- border:none;
18
- vertical-align:baseline;
19
- list-style:none;
20
- }
21
-
22
- .iui-tree-item:focus-visible{
23
- outline:none;
24
- }
25
- .iui-tree-item:focus-visible > .iui-tree-node{
26
- outline:1px solid var(--iui-color-foreground-primary);
27
- outline-offset:-1px;
28
- }
29
- .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
30
- outline:2px solid var(--iui-color-foreground-primary);
31
- outline-offset:-2px;
32
- }
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
- }
46
-
47
- .iui-tree-node{
48
- display:flex;
49
- cursor:pointer;
50
- padding:0 var(--iui-size-xs);
51
- align-items:center;
52
- border-radius:var(--iui-border-radius-1);
53
- }
54
- .iui-tree-node-checkbox{
55
- margin-right:var(--iui-size-xs);
56
- }
57
- .iui-tree-node-content{
58
- display:flex;
59
- align-items:center;
60
- min-height:calc(var(--iui-size-s) * 3);
61
- margin-left:calc(calc(var(--iui-component-height-small) + 2px) * (var(--level, 0)));
62
- overflow:hidden;
63
- padding-left:var(--iui-size-3xs);
64
- }
65
- .iui-tree-node-content-icon{
66
- display:flex;
67
- flex-shrink:0;
68
- width:var(--iui-size-m);
69
- height:var(--iui-size-m);
70
- fill:var(--iui-color-foreground-4);
71
- margin:0 calc(var(--iui-size-2xs) + 1px);
72
- }
73
- @media (forced-colors: active){
74
- .iui-tree-node-content-icon{
75
- fill:CanvasText;
76
- }
77
- }
78
- .iui-tree-node-content-icon:first-child{
79
- margin-left:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px);
80
- }
81
- @media (prefers-reduced-motion: no-preference){
82
- .iui-tree-node-content-expander-icon{
83
- transition:transform var(--iui-duration-1) ease-out;
84
- }
85
- }
86
- .iui-tree-node-content-expander-icon-expanded{
87
- transform:rotate(90deg);
88
- }
89
- .iui-tree-node-content-label{
90
- min-width:0;
91
- padding-left:calc(var(--iui-size-2xs) + 1px);
92
- }
93
- .iui-tree-node-content-label:first-child{
94
- margin-left:calc(var(--iui-component-height-small) + 2px);
95
- }
96
- .iui-tree-node-content-title, .iui-tree-node-content-caption{
97
- white-space:nowrap;
98
- overflow:hidden;
99
- text-overflow:ellipsis;
100
- }
101
- .iui-tree-node-content-title{
102
- font-size:var(--iui-font-size-1);
103
- }
104
- .iui-tree-node-content-caption{
105
- font-size:var(--iui-font-size-0);
106
- color:var(--iui-color-foreground-4);
107
- }
108
- .iui-tree-node:hover{
109
- background-color:var(--iui-color-background-transparent-hover);
110
- }
111
- .iui-tree-node:hover .iui-tree-node-content-caption{
112
- color:var(--iui-color-foreground-1);
113
- transition:color var(--iui-duration-1) ease;
114
- }
115
- .iui-tree-node.iui-active{
116
- background-color:var(--iui-color-background-subtle-primary);
117
- outline:thin solid var(--iui-color-foreground-primary);
118
- outline-offset:-1px;
119
- }
120
- .iui-tree-node.iui-disabled{
121
- cursor:not-allowed;
122
- outline:none;
123
- background-color:transparent;
124
- color:var(--iui-color-foreground-5);
125
- }
126
- .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
127
- color:var(--iui-color-foreground-5);
128
- }
5
+ .iui-tree{vertical-align:baseline;border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;margin:0;padding:0;list-style:none}.iui-sub-tree{vertical-align:baseline;border:none;margin:0;padding:0;list-style:none}.iui-tree-item:focus-visible{outline:none}.iui-tree-item:focus-visible>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus-visible>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@supports not selector(*:focus-visible){.iui-tree-item:focus{outline:none}.iui-tree-item:focus>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}.iui-tree-node{cursor:pointer;padding:0 var(--iui-size-xs);border-radius:var(--iui-border-radius-1);align-items:center;display:flex}.iui-tree-node-checkbox{margin-right:var(--iui-size-xs)}.iui-tree-node-content{min-height:calc(var(--iui-size-s)*3);margin-left:calc(calc(var(--iui-component-height-small) + 2px)*(var(--level,0)));padding-left:var(--iui-size-3xs);align-items:center;display:flex;overflow:hidden}.iui-tree-node-content-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);margin:0 calc(var(--iui-size-2xs) + 1px);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-tree-node-content-icon{fill:CanvasText}}.iui-tree-node-content-icon:first-child{margin-left:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px)}@media (prefers-reduced-motion:no-preference){.iui-tree-node-content-expander-icon{transition:transform var(--iui-duration-1)ease-out}}.iui-tree-node-content-expander-icon-expanded{transform:rotate(90deg)}.iui-tree-node-content-label{min-width:0;padding-left:calc(var(--iui-size-2xs) + 1px)}.iui-tree-node-content-label:first-child{margin-left:calc(var(--iui-component-height-small) + 2px)}.iui-tree-node-content-title,.iui-tree-node-content-caption{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-tree-node-content-title{font-size:var(--iui-font-size-1)}.iui-tree-node-content-caption{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted)}.iui-tree-node:hover{background-color:var(--iui-color-background-hover);color:var(--iui-color-text-hover)}.iui-tree-node:hover .iui-tree-node-content-caption{color:var(--iui-color-text-hover);transition:color var(--iui-duration-1)ease}.iui-tree-node.iui-active{background-color:var(--iui-color-background-accent-muted);outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-node.iui-disabled{cursor:not-allowed;background-color:#0000;outline:none}.iui-tree-node.iui-disabled,.iui-tree-node.iui-disabled .iui-tree-node-content-caption{color:var(--iui-color-text-disabled)}