@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  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 +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/badge.css CHANGED
@@ -3,7 +3,7 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-badge{
6
- --iui-badge-background-color:#C7CCD1;
6
+ --iui-badge-background-color:#c7ccd1;
7
7
  --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
8
8
  margin:0;
9
9
  padding:0;
@@ -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
@@ -14,13 +14,16 @@
14
14
  text-align:justify;
15
15
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
16
16
  border-radius:3px;
17
- background-color:#FFF;
18
- border-left:8px solid #008BE1;
17
+ background-color:white;
18
+ border-left:8px solid #008ae0;
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:#008ae0;
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:#006bad;
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, 138, 224, 0.1);
77
+ color:#008ae0;
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:#edeff2;
85
+ border-color:#edeff2;
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:#008ae0;
107
+ color:var(--iui-color-foreground-primary);
108
+ }
109
+ .iui-breadcrumbs-item:not(.iui-current) > .iui-button:hover{
110
+ color:#006bad;
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:#008ae0;
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:#f18d13;
135
+ fill:var(--iui-icons-color-warning);
136
+ }
137
+ .iui-breadcrumbs-separator svg.iui-negative{
138
+ fill:#d10a0a;
139
+ fill:var(--iui-icons-color-negative);
140
+ }