@itwin/itwinui-css 0.50.0 → 0.52.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 (67) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7324 -5608
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +443 -344
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +223 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/button/button-group.scss +4 -1
  47. package/scss/carousel/carousel.scss +4 -1
  48. package/scss/code/codeblock.scss +1 -1
  49. package/scss/inputs/checkbox.scss +1 -0
  50. package/scss/inputs/labeled-inputs.scss +8 -8
  51. package/scss/inputs/radio.scss +0 -4
  52. package/scss/location-marker/data-rich.scss +1 -1
  53. package/scss/location-marker/me.scss +4 -4
  54. package/scss/modal/classes.scss +4 -0
  55. package/scss/modal/modal.scss +81 -7
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/style/ripple.scss +1 -1
  61. package/scss/style/speed.scss +1 -0
  62. package/scss/table/table.scss +23 -14
  63. package/scss/toast-notification/categories.scss +1 -5
  64. package/scss/toggle-switch/classes.scss +4 -0
  65. package/scss/toggle-switch/toggle-switch.scss +141 -162
  66. package/scss/tooltip/tooltip.scss +1 -1
  67. package/scss/user-icon/user-icon.scss +38 -19
package/css/badge.css CHANGED
@@ -25,4 +25,5 @@
25
25
  white-space:nowrap;
26
26
  overflow:hidden;
27
27
  text-overflow:ellipsis;
28
- font-weight:600; }
28
+ font-weight:600;
29
+ }
package/css/blockquote.css CHANGED
@@ -17,10 +17,13 @@
17
17
  background-color:#FFF;
18
18
  border-left:8px solid #008BE1;
19
19
  background-color:var(--iui-color-background-1);
20
- border-left:8px solid var(--iui-color-foreground-primary); }
21
- .iui-blockquote > footer{
22
- text-align:right;
23
- color:rgba(0, 0, 0, 0.4);
24
- color:var(--iui-text-color-muted); }
25
- .iui-blockquote > footer > cite{
26
- font-style:normal; }
20
+ border-left:8px solid var(--iui-color-foreground-primary);
21
+ }
22
+ .iui-blockquote > footer{
23
+ text-align:right;
24
+ color:rgba(0, 0, 0, 0.4);
25
+ color:var(--iui-text-color-muted);
26
+ }
27
+ .iui-blockquote > footer > cite{
28
+ font-style:normal;
29
+ }
package/css/breadcrumbs.css CHANGED
@@ -8,7 +8,8 @@
8
8
  border:none;
9
9
  vertical-align:baseline;
10
10
  display:flex;
11
- align-items:center; }
11
+ align-items:center;
12
+ }
12
13
 
13
14
  .iui-breadcrumbs-list{
14
15
  margin:0;
@@ -21,97 +22,119 @@
21
22
  -webkit-user-select:none;
22
23
  -moz-user-select:none;
23
24
  -ms-user-select:none;
24
- user-select:none; }
25
+ user-select:none;
26
+ }
25
27
 
26
28
  .iui-breadcrumbs-item{
27
29
  display:flex;
28
30
  line-height:38px;
29
31
  height:38px;
30
32
  max-width:192px;
31
- margin:0 12px; }
32
- .iui-breadcrumbs-item a{
33
- border-radius:3px;
34
- text-decoration:none;
35
- cursor:pointer;
36
- color:#008BE1;
37
- color:var(--iui-color-foreground-primary); }
38
- .iui-breadcrumbs-item a:focus-visible{
39
- outline:1px solid var(--iui-color-foreground-primary);
40
- outline-offset:2px; }
41
- @supports not selector(*:focus-visible){
42
- .iui-breadcrumbs-item a:focus{
43
- outline:1px solid var(--iui-color-foreground-primary);
44
- outline-offset:2px; } }
45
- .iui-breadcrumbs-item a:hover{
46
- color:#006bae;
47
- color:var(--iui-color-foreground-primary-overlay);
48
- text-decoration:underline; }
49
- .iui-breadcrumbs-item .iui-button{
50
- border-color:transparent;
51
- background-color:transparent;
52
- padding:0 8px;
53
- height:38px;
54
- gap:8px;
55
- margin:0 -9px; }
56
- .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
57
- margin-left:3px;
58
- margin-right:3px; }
59
- .iui-breadcrumbs-item .iui-button:hover{
60
- background-color:rgba(0, 0, 0, 0.1);
61
- border-color:transparent;
62
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
63
- border-color:transparent; }
64
- .iui-breadcrumbs-item .iui-button.iui-active{
65
- background-color:rgba(0, 139, 225, 0.1);
66
- color:#008BE1;
67
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
68
- color:var(--iui-color-foreground-primary);
69
- border-color:transparent; }
70
- .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
71
- cursor:not-allowed;
72
- background:#EEF0F3;
73
- border-color:#EEF0F3;
74
- color:rgba(0, 0, 0, 0.2);
75
- background:var(--iui-color-background-disabled);
76
- border-color:var(--iui-color-background-disabled);
77
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
78
- background-color:transparent;
79
- border-color:transparent;
80
- background-color:transparent;
81
- border-color:transparent; }
82
- .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
83
- background-color:rgba(0, 0, 0, 0.05);
84
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
85
- .iui-breadcrumbs-item > *,
86
- .iui-breadcrumbs-item .iui-button-label{
87
- overflow:hidden;
88
- white-space:nowrap;
89
- text-overflow:ellipsis; }
90
- .iui-breadcrumbs-item:not(.iui-current) > .iui-button{
91
- color:#008BE1;
92
- color:var(--iui-color-foreground-primary); }
93
- .iui-breadcrumbs-item:not(.iui-current) > .iui-button:hover{
94
- color:#006bae;
95
- color:var(--iui-color-foreground-primary-overlay); }
33
+ margin:0 12px;
34
+ }
35
+ .iui-breadcrumbs-item a{
36
+ border-radius:3px;
37
+ text-decoration:none;
38
+ cursor:pointer;
39
+ color:#008BE1;
40
+ color:var(--iui-color-foreground-primary);
41
+ }
42
+ .iui-breadcrumbs-item a:focus-visible{
43
+ outline:1px solid var(--iui-color-foreground-primary);
44
+ outline-offset:2px;
45
+ }
46
+ @supports not selector(*:focus-visible){
47
+ .iui-breadcrumbs-item a:focus{
48
+ outline:1px solid var(--iui-color-foreground-primary);
49
+ outline-offset:2px;
50
+ }
51
+ }
52
+ .iui-breadcrumbs-item a:hover{
53
+ color:#006bae;
54
+ color:var(--iui-color-foreground-primary-overlay);
55
+ text-decoration:underline;
56
+ }
57
+ .iui-breadcrumbs-item .iui-button{
58
+ border-color:transparent;
59
+ background-color:transparent;
60
+ padding:0 8px;
61
+ height:38px;
62
+ gap:8px;
63
+ margin:0 -9px;
64
+ }
65
+ .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
66
+ margin-left:3px;
67
+ margin-right:3px;
68
+ }
69
+ .iui-breadcrumbs-item .iui-button:hover{
70
+ background-color:rgba(0, 0, 0, 0.1);
71
+ border-color:transparent;
72
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
73
+ border-color:transparent;
74
+ }
75
+ .iui-breadcrumbs-item .iui-button.iui-active{
76
+ background-color:rgba(0, 139, 225, 0.1);
77
+ color:#008BE1;
78
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
79
+ color:var(--iui-color-foreground-primary);
80
+ border-color:transparent;
81
+ }
82
+ .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
83
+ cursor:not-allowed;
84
+ background:#EEF0F3;
85
+ border-color:#EEF0F3;
86
+ color:rgba(0, 0, 0, 0.2);
87
+ background:var(--iui-color-background-disabled);
88
+ border-color:var(--iui-color-background-disabled);
89
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
90
+ background-color:transparent;
91
+ border-color:transparent;
92
+ background-color:transparent;
93
+ border-color:transparent;
94
+ }
95
+ .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
96
+ background-color:rgba(0, 0, 0, 0.05);
97
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
98
+ }
99
+ .iui-breadcrumbs-item > *,
100
+ .iui-breadcrumbs-item .iui-button-label{
101
+ overflow:hidden;
102
+ white-space:nowrap;
103
+ text-overflow:ellipsis;
104
+ }
105
+ .iui-breadcrumbs-item:not(.iui-current) > .iui-button{
106
+ color:#008BE1;
107
+ color:var(--iui-color-foreground-primary);
108
+ }
109
+ .iui-breadcrumbs-item:not(.iui-current) > .iui-button:hover{
110
+ color:#006bae;
111
+ color:var(--iui-color-foreground-primary-overlay);
112
+ }
96
113
 
97
114
  .iui-breadcrumbs-separator{
98
- display:flex; }
99
- .iui-breadcrumbs-separator svg{
100
- fill:rgba(0, 0, 0, 0.4);
101
- fill:var(--iui-icons-color);
102
- display:inline-flex;
103
- width:12px;
104
- height:12px;
105
- display:flex; }
106
- .iui-breadcrumbs-separator svg.iui-informational{
107
- fill:#008BE1;
108
- fill:var(--iui-icons-color-primary); }
109
- .iui-breadcrumbs-separator svg.iui-positive{
110
- fill:#53A21A;
111
- fill:var(--iui-icons-color-positive); }
112
- .iui-breadcrumbs-separator svg.iui-warning{
113
- fill:#F18B12;
114
- fill:var(--iui-icons-color-warning); }
115
- .iui-breadcrumbs-separator svg.iui-negative{
116
- fill:#D30A0A;
117
- fill:var(--iui-icons-color-negative); }
115
+ display:flex;
116
+ }
117
+ .iui-breadcrumbs-separator svg{
118
+ fill:rgba(0, 0, 0, 0.4);
119
+ fill:var(--iui-icons-color);
120
+ display:inline-flex;
121
+ width:12px;
122
+ height:12px;
123
+ display:flex;
124
+ }
125
+ .iui-breadcrumbs-separator svg.iui-informational{
126
+ fill:#008BE1;
127
+ fill:var(--iui-icons-color-primary);
128
+ }
129
+ .iui-breadcrumbs-separator svg.iui-positive{
130
+ fill:#53A21A;
131
+ fill:var(--iui-icons-color-positive);
132
+ }
133
+ .iui-breadcrumbs-separator svg.iui-warning{
134
+ fill:#F18B12;
135
+ fill:var(--iui-icons-color-warning);
136
+ }
137
+ .iui-breadcrumbs-separator svg.iui-negative{
138
+ fill:#D30A0A;
139
+ fill:var(--iui-icons-color-negative);
140
+ }