@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/time-picker.css CHANGED
@@ -2,141 +2,143 @@
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-time-picker{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- -webkit-user-select:none;
11
- -moz-user-select:none;
12
- -ms-user-select:none;
13
- user-select:none;
14
- text-align:center;
15
- height:286px;
16
- display:inline-flex;
17
- background-color:white;
18
- background-color:var(--iui-color-background-1);
19
- }
20
- .iui-time-picker:not(:first-child){
21
- border-left:1px solid #c7ccd1;
22
- border-left:1px solid var(--iui-color-background-border);
23
- }
24
- .iui-time-picker:first-child{
25
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
26
- }
5
+ @layer itwinui-v1{
6
+ .iui-time-picker{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ -webkit-user-select:none;
12
+ -moz-user-select:none;
13
+ -ms-user-select:none;
14
+ user-select:none;
15
+ text-align:center;
16
+ height:286px;
17
+ display:inline-flex;
18
+ background-color:white;
19
+ background-color:var(--iui-color-background-1);
20
+ }
21
+ .iui-time-picker:not(:first-child){
22
+ border-left:1px solid #c7ccd1;
23
+ border-left:1px solid var(--iui-color-background-border);
24
+ }
25
+ .iui-time-picker:first-child{
26
+ box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
27
+ }
27
28
 
28
- .iui-time{
29
- padding:11px 8px;
30
- overflow-y:auto;
31
- overflow-y:overlay;
32
- scrollbar-width:none;
33
- }
34
- .iui-time:not(:first-child){
35
- border-left:1px solid #c7ccd1;
36
- border-left:1px solid var(--iui-color-background-border);
37
- }
38
- .iui-time > ol{
39
- margin:0;
40
- padding:0;
41
- border:none;
42
- vertical-align:baseline;
43
- list-style:none;
44
- }
45
- .iui-time > ol > li{
46
- padding:6px 16px;
47
- border-radius:4px;
48
- }
49
- .iui-time > ol > li:focus-visible{
50
- outline:1px solid var(--iui-color-foreground-primary);
51
- outline-offset:-1px;
52
- }
53
- @supports not selector(*:focus-visible){
54
- .iui-time > ol > li:focus{
29
+ .iui-time{
30
+ padding:11px 8px;
31
+ overflow-y:auto;
32
+ overflow-y:overlay;
33
+ scrollbar-width:none;
34
+ }
35
+ .iui-time:not(:first-child){
36
+ border-left:1px solid #c7ccd1;
37
+ border-left:1px solid var(--iui-color-background-border);
38
+ }
39
+ .iui-time > ol{
40
+ margin:0;
41
+ padding:0;
42
+ border:none;
43
+ vertical-align:baseline;
44
+ list-style:none;
45
+ }
46
+ .iui-time > ol > li{
47
+ padding:6px 16px;
48
+ border-radius:4px;
49
+ }
50
+ .iui-time > ol > li:focus-visible{
55
51
  outline:1px solid var(--iui-color-foreground-primary);
56
52
  outline-offset:-1px;
57
53
  }
58
- }
59
- .iui-time > ol > li:hover{
60
- cursor:pointer;
61
- color:#008ae0;
62
- background-color:rgba(0, 138, 224, 0.1);
63
- color:var(--iui-color-foreground-primary);
64
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
65
- }
66
- .iui-time > ol > li.iui-selected{
67
- font-weight:600;
68
- cursor:default;
69
- background-color:#008ae0;
70
- color:white;
71
- background-color:var(--iui-color-background-primary);
72
- color:var(--iui-color-foreground-accessory);
73
- }
74
- .iui-time > ol > li.iui-selected:focus-visible{
75
- outline:1px solid var(--iui-color-foreground-accessory);
76
- outline-offset:-3px;
77
- }
78
- @supports not selector(*:focus-visible){
79
- .iui-time > ol > li.iui-selected:focus{
54
+ @supports not selector(*:focus-visible){
55
+ .iui-time > ol > li:focus{
56
+ outline:1px solid var(--iui-color-foreground-primary);
57
+ outline-offset:-1px;
58
+ }
59
+ }
60
+ .iui-time > ol > li:hover{
61
+ cursor:pointer;
62
+ color:#008ae0;
63
+ background-color:rgba(0, 138, 224, 0.1);
64
+ color:var(--iui-color-foreground-primary);
65
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
66
+ }
67
+ .iui-time > ol > li.iui-selected{
68
+ font-weight:600;
69
+ cursor:default;
70
+ background-color:#008ae0;
71
+ color:white;
72
+ background-color:var(--iui-color-background-primary);
73
+ color:var(--iui-color-foreground-accessory);
74
+ }
75
+ .iui-time > ol > li.iui-selected:focus-visible{
80
76
  outline:1px solid var(--iui-color-foreground-accessory);
81
77
  outline-offset:-3px;
82
78
  }
83
- }
79
+ @supports not selector(*:focus-visible){
80
+ .iui-time > ol > li.iui-selected:focus{
81
+ outline:1px solid var(--iui-color-foreground-accessory);
82
+ outline-offset:-3px;
83
+ }
84
+ }
84
85
 
85
- .iui-period{
86
- padding:11px 8px;
87
- overflow-y:auto;
88
- overflow-y:overlay;
89
- scrollbar-width:none;
90
- display:flex;
91
- align-items:center;
92
- }
93
- .iui-period:not(:first-child){
94
- border-left:1px solid #c7ccd1;
95
- border-left:1px solid var(--iui-color-background-border);
96
- }
97
- .iui-period > ol{
98
- margin:0;
99
- padding:0;
100
- border:none;
101
- vertical-align:baseline;
102
- list-style:none;
103
- }
104
- .iui-period > ol > li{
105
- padding:6px 16px;
106
- border-radius:4px;
107
- }
108
- .iui-period > ol > li:focus-visible{
109
- outline:1px solid var(--iui-color-foreground-primary);
110
- outline-offset:-1px;
111
- }
112
- @supports not selector(*:focus-visible){
113
- .iui-period > ol > li:focus{
86
+ .iui-period{
87
+ padding:11px 8px;
88
+ overflow-y:auto;
89
+ overflow-y:overlay;
90
+ scrollbar-width:none;
91
+ display:flex;
92
+ align-items:center;
93
+ }
94
+ .iui-period:not(:first-child){
95
+ border-left:1px solid #c7ccd1;
96
+ border-left:1px solid var(--iui-color-background-border);
97
+ }
98
+ .iui-period > ol{
99
+ margin:0;
100
+ padding:0;
101
+ border:none;
102
+ vertical-align:baseline;
103
+ list-style:none;
104
+ }
105
+ .iui-period > ol > li{
106
+ padding:6px 16px;
107
+ border-radius:4px;
108
+ }
109
+ .iui-period > ol > li:focus-visible{
114
110
  outline:1px solid var(--iui-color-foreground-primary);
115
111
  outline-offset:-1px;
116
112
  }
117
- }
118
- .iui-period > ol > li:hover{
119
- cursor:pointer;
120
- color:#008ae0;
121
- background-color:rgba(0, 138, 224, 0.1);
122
- color:var(--iui-color-foreground-primary);
123
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
124
- }
125
- .iui-period > ol > li.iui-selected{
126
- font-weight:600;
127
- cursor:default;
128
- background-color:#008ae0;
129
- color:white;
130
- background-color:var(--iui-color-background-primary);
131
- color:var(--iui-color-foreground-accessory);
132
- }
133
- .iui-period > ol > li.iui-selected:focus-visible{
134
- outline:1px solid var(--iui-color-foreground-accessory);
135
- outline-offset:-3px;
136
- }
137
- @supports not selector(*:focus-visible){
138
- .iui-period > ol > li.iui-selected:focus{
113
+ @supports not selector(*:focus-visible){
114
+ .iui-period > ol > li:focus{
115
+ outline:1px solid var(--iui-color-foreground-primary);
116
+ outline-offset:-1px;
117
+ }
118
+ }
119
+ .iui-period > ol > li:hover{
120
+ cursor:pointer;
121
+ color:#008ae0;
122
+ background-color:rgba(0, 138, 224, 0.1);
123
+ color:var(--iui-color-foreground-primary);
124
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
125
+ }
126
+ .iui-period > ol > li.iui-selected{
127
+ font-weight:600;
128
+ cursor:default;
129
+ background-color:#008ae0;
130
+ color:white;
131
+ background-color:var(--iui-color-background-primary);
132
+ color:var(--iui-color-foreground-accessory);
133
+ }
134
+ .iui-period > ol > li.iui-selected:focus-visible{
139
135
  outline:1px solid var(--iui-color-foreground-accessory);
140
136
  outline-offset:-3px;
141
137
  }
138
+ @supports not selector(*:focus-visible){
139
+ .iui-period > ol > li.iui-selected:focus{
140
+ outline:1px solid var(--iui-color-foreground-accessory);
141
+ outline-offset:-3px;
142
+ }
143
+ }
142
144
  }