@itwin/itwinui-css 0.63.1 → 0.63.2-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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  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/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/file-upload.css CHANGED
@@ -2,110 +2,112 @@
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-file-upload{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- font-size:14px;
11
- font-weight:400;
12
- position:relative;
13
- display:flex;
14
- }
15
- .iui-file-upload > .iui-content{
16
- visibility:hidden;
17
- position:absolute;
18
- top:0;
19
- left:0;
20
- width:100%;
21
- height:100%;
22
- display:flex;
23
- flex-direction:column;
24
- justify-content:center;
25
- align-items:center;
26
- box-sizing:border-box;
27
- -webkit-user-select:none;
28
- -moz-user-select:none;
29
- -ms-user-select:none;
30
- user-select:none;
31
- padding:6px 12px;
32
- background-color:#f9f9fb;
33
- border:1px solid #f9f9fb;
34
- background-color:var(--iui-color-background-2);
35
- border:1px solid var(--iui-color-background-2);
36
- }
37
- .iui-file-upload > .iui-content .iui-browse-input{
38
- width:0.1px;
39
- height:0.1px;
40
- opacity:0;
41
- overflow:hidden;
42
- position:absolute;
43
- z-index:-1;
44
- }
45
- .iui-file-upload > .iui-content > svg,
46
- .iui-file-upload > .iui-content .iui-template-icon{
47
- fill:rgba(0, 0, 0, 0.4);
48
- fill:var(--iui-icons-color);
49
- display:inline-flex;
50
- width:64px;
51
- height:64px;
52
- margin-top:11px;
53
- margin-bottom:11px;
54
- }
55
- @media (forced-colors: active){
5
+ @layer itwinui-v1{
6
+ .iui-file-upload{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ font-size:14px;
12
+ font-weight:400;
13
+ position:relative;
14
+ display:flex;
15
+ }
16
+ .iui-file-upload > .iui-content{
17
+ visibility:hidden;
18
+ position:absolute;
19
+ top:0;
20
+ left:0;
21
+ width:100%;
22
+ height:100%;
23
+ display:flex;
24
+ flex-direction:column;
25
+ justify-content:center;
26
+ align-items:center;
27
+ box-sizing:border-box;
28
+ -webkit-user-select:none;
29
+ -moz-user-select:none;
30
+ -ms-user-select:none;
31
+ user-select:none;
32
+ padding:6px 12px;
33
+ background-color:#f9f9fb;
34
+ border:1px solid #f9f9fb;
35
+ background-color:var(--iui-color-background-2);
36
+ border:1px solid var(--iui-color-background-2);
37
+ }
38
+ .iui-file-upload > .iui-content .iui-browse-input{
39
+ width:0.1px;
40
+ height:0.1px;
41
+ opacity:0;
42
+ overflow:hidden;
43
+ position:absolute;
44
+ z-index:-1;
45
+ }
56
46
  .iui-file-upload > .iui-content > svg,
57
47
  .iui-file-upload > .iui-content .iui-template-icon{
58
- fill:CanvasText;
48
+ fill:rgba(0, 0, 0, 0.4);
49
+ fill:var(--iui-icons-color);
50
+ display:inline-flex;
51
+ width:64px;
52
+ height:64px;
53
+ margin-top:11px;
54
+ margin-bottom:11px;
59
55
  }
60
- }
61
- .iui-file-upload > .iui-content > svg.iui-informational,
56
+ @media (forced-colors: active){
57
+ .iui-file-upload > .iui-content > svg,
58
+ .iui-file-upload > .iui-content .iui-template-icon{
59
+ fill:CanvasText;
60
+ }
61
+ }
62
+ .iui-file-upload > .iui-content > svg.iui-informational,
62
63
  .iui-file-upload > .iui-content .iui-template-icon.iui-informational{
63
- fill:#008ae0;
64
- fill:var(--iui-icons-color-primary);
65
- }
66
- .iui-file-upload > .iui-content > svg.iui-positive,
64
+ fill:#008ae0;
65
+ fill:var(--iui-icons-color-primary);
66
+ }
67
+ .iui-file-upload > .iui-content > svg.iui-positive,
67
68
  .iui-file-upload > .iui-content .iui-template-icon.iui-positive{
68
- fill:#53a21a;
69
- fill:var(--iui-icons-color-positive);
70
- }
71
- .iui-file-upload > .iui-content > svg.iui-warning,
69
+ fill:#53a21a;
70
+ fill:var(--iui-icons-color-positive);
71
+ }
72
+ .iui-file-upload > .iui-content > svg.iui-warning,
72
73
  .iui-file-upload > .iui-content .iui-template-icon.iui-warning{
73
- fill:#f18d13;
74
- fill:var(--iui-icons-color-warning);
75
- }
76
- .iui-file-upload > .iui-content > svg.iui-negative,
74
+ fill:#f18d13;
75
+ fill:var(--iui-icons-color-warning);
76
+ }
77
+ .iui-file-upload > .iui-content > svg.iui-negative,
77
78
  .iui-file-upload > .iui-content .iui-template-icon.iui-negative{
78
- fill:#d10a0a;
79
- fill:var(--iui-icons-color-negative);
80
- }
81
- .iui-file-upload > .iui-content:only-child{
82
- visibility:visible;
83
- position:relative;
84
- flex-direction:row;
85
- }
86
- .iui-file-upload > .iui-content:only-child:focus-within{
87
- outline:2px solid #008ae0;
88
- outline-offset:-2px;
89
- outline:2px solid var(--iui-color-foreground-primary);
90
- outline-offset:-2px;
91
- }
92
- .iui-file-upload > .iui-content .iui-template-text{
93
- margin-left:24px;
94
- }
95
- .iui-file-upload > .iui-content .iui-template-text > label{
96
- font-weight:700;
97
- }
98
- .iui-file-upload.iui-drag > .iui-content{
99
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
100
- border-color:#008ae0;
101
- color:#008ae0;
102
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
103
- border-color:var(--iui-color-foreground-primary);
104
- color:var(--iui-color-foreground-primary);
105
- visibility:visible;
106
- }
107
- .iui-file-upload.iui-drag > .iui-content > svg,
79
+ fill:#d10a0a;
80
+ fill:var(--iui-icons-color-negative);
81
+ }
82
+ .iui-file-upload > .iui-content:only-child{
83
+ visibility:visible;
84
+ position:relative;
85
+ flex-direction:row;
86
+ }
87
+ .iui-file-upload > .iui-content:only-child:focus-within{
88
+ outline:2px solid #008ae0;
89
+ outline-offset:-2px;
90
+ outline:2px solid var(--iui-color-foreground-primary);
91
+ outline-offset:-2px;
92
+ }
93
+ .iui-file-upload > .iui-content .iui-template-text{
94
+ margin-left:24px;
95
+ }
96
+ .iui-file-upload > .iui-content .iui-template-text > label{
97
+ font-weight:700;
98
+ }
99
+ .iui-file-upload.iui-drag > .iui-content{
100
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
101
+ border-color:#008ae0;
102
+ color:#008ae0;
103
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
104
+ border-color:var(--iui-color-foreground-primary);
105
+ color:var(--iui-color-foreground-primary);
106
+ visibility:visible;
107
+ }
108
+ .iui-file-upload.iui-drag > .iui-content > svg,
108
109
  .iui-file-upload.iui-drag > .iui-content .iui-template-icon{
109
- fill:#008ae0;
110
- fill:var(--iui-icons-color-primary);
110
+ fill:#008ae0;
111
+ fill:var(--iui-icons-color-primary);
112
+ }
111
113
  }
package/css/footer.css CHANGED
@@ -2,102 +2,104 @@
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-legal-footer{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- text-align:center;
11
- width:100%;
12
- padding:11px 0;
13
- font-size:12px;
14
- }
5
+ @layer itwinui-v1{
6
+ .iui-legal-footer{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ text-align:center;
12
+ width:100%;
13
+ padding:11px 0;
14
+ font-size:12px;
15
+ }
15
16
 
16
- .iui-legal-footer-list{
17
- list-style-type:none;
18
- margin:0 auto;
19
- padding:0;
20
- display:flex;
21
- justify-content:center;
22
- align-items:center;
23
- flex-wrap:wrap;
24
- }
17
+ .iui-legal-footer-list{
18
+ list-style-type:none;
19
+ margin:0 auto;
20
+ padding:0;
21
+ display:flex;
22
+ justify-content:center;
23
+ align-items:center;
24
+ flex-wrap:wrap;
25
+ }
25
26
 
26
- .iui-legal-footer-item{
27
- display:flex;
28
- align-items:center;
29
- -webkit-user-select:none;
30
- -moz-user-select:none;
31
- -ms-user-select:none;
32
- user-select:none;
33
- white-space:nowrap;
34
- word-break:keep-all;
35
- color:rgba(0, 0, 0, 0.4);
36
- color:var(--iui-text-color-muted);
37
- }
38
- .iui-legal-footer-item > a{
39
- color:#008ae0;
40
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
41
- color:var(--iui-color-foreground-primary);
42
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
43
- border-radius:4px;
44
- box-sizing:border-box;
45
- cursor:pointer;
46
- text-decoration:none;
47
- }
48
- .iui-legal-footer-item > a:focus-visible{
49
- outline:1px solid var(--iui-color-foreground-primary);
50
- outline-offset:1px;
51
- }
52
- @supports not selector(*:focus-visible){
53
- .iui-legal-footer-item > a:focus{
27
+ .iui-legal-footer-item{
28
+ display:flex;
29
+ align-items:center;
30
+ -webkit-user-select:none;
31
+ -moz-user-select:none;
32
+ -ms-user-select:none;
33
+ user-select:none;
34
+ white-space:nowrap;
35
+ word-break:keep-all;
36
+ color:rgba(0, 0, 0, 0.4);
37
+ color:var(--iui-text-color-muted);
38
+ }
39
+ .iui-legal-footer-item > a{
40
+ color:#008ae0;
41
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
42
+ color:var(--iui-color-foreground-primary);
43
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
44
+ border-radius:4px;
45
+ box-sizing:border-box;
46
+ cursor:pointer;
47
+ text-decoration:none;
48
+ }
49
+ .iui-legal-footer-item > a:focus-visible{
54
50
  outline:1px solid var(--iui-color-foreground-primary);
55
51
  outline-offset:1px;
56
52
  }
57
- }
58
- .iui-legal-footer-item > a:hover{
59
- color:#006bad;
60
- color:var(--iui-color-foreground-primary-overlay);
61
- }
62
- .iui-legal-footer-item > a:hover{
63
- text-decoration:underline;
64
- }
65
- @media (prefers-contrast: more){
66
- .iui-legal-footer-item > a{
67
- text-decoration:underline;
53
+ @supports not selector(*:focus-visible){
54
+ .iui-legal-footer-item > a:focus{
55
+ outline:1px solid var(--iui-color-foreground-primary);
56
+ outline-offset:1px;
57
+ }
68
58
  }
69
59
  .iui-legal-footer-item > a:hover{
60
+ color:#006bad;
61
+ color:var(--iui-color-foreground-primary-overlay);
62
+ }
63
+ .iui-legal-footer-item > a:hover{
64
+ text-decoration:underline;
65
+ }
66
+ @media (prefers-contrast: more){
67
+ .iui-legal-footer-item > a{
68
+ text-decoration:underline;
69
+ }
70
+ .iui-legal-footer-item > a:hover{
71
+ text-decoration:none;
72
+ }
73
+ }
74
+ .iui-theme-light .iui-legal-footer-item > a, .iui-theme-dark .iui-legal-footer-item > a{
70
75
  text-decoration:none;
71
76
  }
72
- }
73
- .iui-theme-light .iui-legal-footer-item > a, .iui-theme-dark .iui-legal-footer-item > a{
74
- text-decoration:none;
75
- }
76
- .iui-theme-light .iui-legal-footer-item > a:hover, .iui-theme-dark .iui-legal-footer-item > a:hover{
77
- text-decoration:underline;
78
- }
77
+ .iui-theme-light .iui-legal-footer-item > a:hover, .iui-theme-dark .iui-legal-footer-item > a:hover{
78
+ text-decoration:underline;
79
+ }
79
80
 
80
- .iui-theme-light-hc .iui-legal-footer-item > a, .iui-theme-dark-hc .iui-legal-footer-item > a{
81
- text-decoration:underline;
82
- }
83
- .iui-theme-light-hc .iui-legal-footer-item > a:hover, .iui-theme-dark-hc .iui-legal-footer-item > a:hover{
84
- text-decoration:none;
85
- }
81
+ .iui-theme-light-hc .iui-legal-footer-item > a, .iui-theme-dark-hc .iui-legal-footer-item > a{
82
+ text-decoration:underline;
83
+ }
84
+ .iui-theme-light-hc .iui-legal-footer-item > a:hover, .iui-theme-dark-hc .iui-legal-footer-item > a:hover{
85
+ text-decoration:none;
86
+ }
86
87
 
87
- .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
88
- color:rgba(0, 0, 0, 0.4);
89
- color:var(--iui-text-color-muted);
90
- }
88
+ .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
89
+ color:rgba(0, 0, 0, 0.4);
90
+ color:var(--iui-text-color-muted);
91
+ }
91
92
 
92
- .iui-legal-footer-separator{
93
- margin:0 8px;
94
- width:1px;
95
- height:11px;
96
- background-color:rgba(0, 0, 0, 0.4);
97
- background-color:var(--iui-text-color-muted);
98
- }
93
+ .iui-legal-footer-separator{
94
+ margin:0 8px;
95
+ width:1px;
96
+ height:11px;
97
+ background-color:rgba(0, 0, 0, 0.4);
98
+ background-color:var(--iui-text-color-muted);
99
+ }
99
100
 
100
- .iui-legal-footer-developer{
101
- color:rgba(0, 0, 0, 0.4);
102
- color:var(--iui-text-color-muted);
101
+ .iui-legal-footer-developer{
102
+ color:rgba(0, 0, 0, 0.4);
103
+ color:var(--iui-text-color-muted);
104
+ }
103
105
  }