@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/keyboard.css CHANGED
@@ -2,38 +2,40 @@
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-keyboard{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- border-radius:4px;
11
- display:inline-block;
12
- font-size:12px;
13
- font-weight:600;
14
- font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
15
- line-height:1;
16
- padding:4px 8px;
17
- white-space:nowrap;
18
- text-transform:uppercase;
19
- -webkit-user-select:none;
20
- -moz-user-select:none;
21
- -ms-user-select:none;
22
- user-select:none;
23
- cursor:default;
24
- background-color:white;
25
- border:1px solid #c7ccd1;
26
- box-shadow:0 1px 1px #c7ccd1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
27
- background-color:var(--iui-color-background-1);
28
- border:1px solid var(--iui-color-background-5);
29
- box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
30
- }
31
- @media (prefers-reduced-motion: no-preference){
5
+ @layer itwinui-v1{
32
6
  .iui-keyboard{
33
- transition:box-shadow 0.2s ease-out;
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ border-radius:4px;
12
+ display:inline-block;
13
+ font-size:12px;
14
+ font-weight:600;
15
+ font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
16
+ line-height:1;
17
+ padding:4px 8px;
18
+ white-space:nowrap;
19
+ text-transform:uppercase;
20
+ -webkit-user-select:none;
21
+ -moz-user-select:none;
22
+ -ms-user-select:none;
23
+ user-select:none;
24
+ cursor:default;
25
+ background-color:white;
26
+ border:1px solid #c7ccd1;
27
+ box-shadow:0 1px 1px #c7ccd1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
28
+ background-color:var(--iui-color-background-1);
29
+ border:1px solid var(--iui-color-background-5);
30
+ box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
31
+ }
32
+ @media (prefers-reduced-motion: no-preference){
33
+ .iui-keyboard{
34
+ transition:box-shadow 0.2s ease-out;
35
+ }
36
+ }
37
+ .iui-keyboard:hover{
38
+ box-shadow:0 0 0 #c7ccd1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
39
+ box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
34
40
  }
35
- }
36
- .iui-keyboard:hover{
37
- box-shadow:0 0 0 #c7ccd1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
38
- box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
39
41
  }
package/css/location-marker.css CHANGED
@@ -2,114 +2,116 @@
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-location-marker-default{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:inline-block;
11
- -webkit-user-select:none;
12
- -moz-user-select:none;
13
- -ms-user-select:none;
14
- user-select:none;
15
- position:relative;
16
- width:24px;
17
- height:24px;
18
- cursor:pointer;
19
- }
20
- .iui-location-marker-default > .iui-location-marker-default-pin{
21
- filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
22
- }
23
- .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
24
- fill:white;
25
- fill:var(--iui-color-foreground-accessory);
26
- }
5
+ @layer itwinui-v1{
6
+ .iui-location-marker-default{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ display:inline-block;
12
+ -webkit-user-select:none;
13
+ -moz-user-select:none;
14
+ -ms-user-select:none;
15
+ user-select:none;
16
+ position:relative;
17
+ width:24px;
18
+ height:24px;
19
+ cursor:pointer;
20
+ }
21
+ .iui-location-marker-default > .iui-location-marker-default-pin{
22
+ filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
23
+ }
24
+ .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
25
+ fill:white;
26
+ fill:var(--iui-color-foreground-accessory);
27
+ }
27
28
 
28
- .iui-location-marker-data-rich{
29
- margin:0;
30
- padding:0;
31
- border:none;
32
- vertical-align:baseline;
33
- display:inline-block;
34
- -webkit-user-select:none;
35
- -moz-user-select:none;
36
- -ms-user-select:none;
37
- user-select:none;
38
- position:relative;
39
- cursor:pointer;
40
- }
41
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
42
- min-width:32px;
43
- border-radius:4px;
44
- text-align:center;
45
- font-size:16px;
46
- padding:3px 8px;
47
- filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
48
- box-sizing:border-box;
49
- position:relative;
50
- border:solid 1px white;
51
- background-color:white;
52
- color:white;
53
- border:solid 1px var(--iui-color-foreground-accessory);
54
- background-color:var(--iui-color-foreground-accessory);
55
- color:var(--iui-color-foreground-accessory);
56
- }
57
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
58
- content:"";
59
- position:absolute;
60
- display:block;
61
- width:0;
62
- height:0;
63
- bottom:-9px;
64
- left:0;
65
- right:0;
66
- margin:auto;
67
- border-width:4px;
68
- border-style:solid;
69
- border-color:white transparent transparent transparent;
70
- border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
71
- }
72
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
73
- display:inline-block;
74
- width:16px;
75
- height:16px;
76
- font-size:inherit;
77
- vertical-align:-2px;
78
- }
79
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
80
- fill:white;
81
- fill:var(--iui-color-foreground-accessory);
82
- }
29
+ .iui-location-marker-data-rich{
30
+ margin:0;
31
+ padding:0;
32
+ border:none;
33
+ vertical-align:baseline;
34
+ display:inline-block;
35
+ -webkit-user-select:none;
36
+ -moz-user-select:none;
37
+ -ms-user-select:none;
38
+ user-select:none;
39
+ position:relative;
40
+ cursor:pointer;
41
+ }
42
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
43
+ min-width:32px;
44
+ border-radius:4px;
45
+ text-align:center;
46
+ font-size:16px;
47
+ padding:3px 8px;
48
+ filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
49
+ box-sizing:border-box;
50
+ position:relative;
51
+ border:solid 1px white;
52
+ background-color:white;
53
+ color:white;
54
+ border:solid 1px var(--iui-color-foreground-accessory);
55
+ background-color:var(--iui-color-foreground-accessory);
56
+ color:var(--iui-color-foreground-accessory);
57
+ }
58
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
59
+ content:"";
60
+ position:absolute;
61
+ display:block;
62
+ width:0;
63
+ height:0;
64
+ bottom:-9px;
65
+ left:0;
66
+ right:0;
67
+ margin:auto;
68
+ border-width:4px;
69
+ border-style:solid;
70
+ border-color:white transparent transparent transparent;
71
+ border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
72
+ }
73
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
74
+ display:inline-block;
75
+ width:16px;
76
+ height:16px;
77
+ font-size:inherit;
78
+ vertical-align:-2px;
79
+ }
80
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
81
+ fill:white;
82
+ fill:var(--iui-color-foreground-accessory);
83
+ }
83
84
 
84
- .iui-location-marker-me{
85
- margin:0;
86
- padding:0;
87
- border:none;
88
- vertical-align:baseline;
89
- display:inline-block;
90
- -webkit-user-select:none;
91
- -moz-user-select:none;
92
- -ms-user-select:none;
93
- user-select:none;
94
- position:relative;
95
- position:relative;
96
- width:24px;
97
- height:24px;
98
- border-radius:50%;
99
- cursor:default;
100
- background:radial-gradient(circle at center, rgba(0, 138, 224, 0), rgba(0, 138, 224, 0.2));
101
- background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
102
- }
103
- .iui-location-marker-me > .iui-location-marker-me-dot{
104
- width:12px;
105
- height:12px;
106
- position:absolute;
107
- top:6px;
108
- left:6px;
109
- border-radius:50%;
110
- box-sizing:border-box;
111
- border:1px solid white;
112
- background-color:#008ae0;
113
- border:1px solid var(--iui-color-foreground-accessory);
114
- background-color:var(--iui-color-background-primary);
85
+ .iui-location-marker-me{
86
+ margin:0;
87
+ padding:0;
88
+ border:none;
89
+ vertical-align:baseline;
90
+ display:inline-block;
91
+ -webkit-user-select:none;
92
+ -moz-user-select:none;
93
+ -ms-user-select:none;
94
+ user-select:none;
95
+ position:relative;
96
+ position:relative;
97
+ width:24px;
98
+ height:24px;
99
+ border-radius:50%;
100
+ cursor:default;
101
+ background:radial-gradient(circle at center, rgba(0, 138, 224, 0), rgba(0, 138, 224, 0.2));
102
+ background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
103
+ }
104
+ .iui-location-marker-me > .iui-location-marker-me-dot{
105
+ width:12px;
106
+ height:12px;
107
+ position:absolute;
108
+ top:6px;
109
+ left:6px;
110
+ border-radius:50%;
111
+ box-sizing:border-box;
112
+ border:1px solid white;
113
+ background-color:#008ae0;
114
+ border:1px solid var(--iui-color-foreground-accessory);
115
+ background-color:var(--iui-color-background-primary);
116
+ }
115
117
  }
package/css/menu.css CHANGED
@@ -2,176 +2,178 @@
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-menu{
6
- --iui-surface-background-color:var(--iui-color-background-1);
7
- --iui-surface-border-radius:0;
8
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
9
- background-color:var(--iui-surface-background-color);
10
- border-radius:var(--iui-surface-border-radius);
11
- box-shadow:var(--iui-surface-elevation);
12
- box-sizing:border-box;
13
- color:var(--iui-text-color);
14
- margin:0;
15
- padding:0;
16
- border:none;
17
- vertical-align:baseline;
18
- list-style-type:none;
19
- -webkit-user-select:none;
20
- -moz-user-select:none;
21
- -ms-user-select:none;
22
- user-select:none;
23
- width:100%;
24
- margin:0;
25
- padding:0;
26
- }
27
- @media (forced-colors: active){
5
+ @layer itwinui-v1{
28
6
  .iui-menu{
29
- border:1px solid transparent;
30
- }
31
- }
32
- .iui-menu .iui-header-menu-icon{
33
- margin:0 4px;
34
- }
35
- .iui-menu div.iui-header-menu-icon{
36
- margin:0;
37
- width:24px;
38
- height:24px;
39
- border-radius:4px;
40
- }
41
- .iui-menu.iui-scroll{
42
- overflow-y:auto;
43
- overflow-y:overlay;
44
- }
7
+ --iui-surface-background-color:var(--iui-color-background-1);
8
+ --iui-surface-border-radius:0;
9
+ --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
10
+ background-color:var(--iui-surface-background-color);
11
+ border-radius:var(--iui-surface-border-radius);
12
+ box-shadow:var(--iui-surface-elevation);
13
+ box-sizing:border-box;
14
+ color:var(--iui-text-color);
15
+ margin:0;
16
+ padding:0;
17
+ border:none;
18
+ vertical-align:baseline;
19
+ list-style-type:none;
20
+ -webkit-user-select:none;
21
+ -moz-user-select:none;
22
+ -ms-user-select:none;
23
+ user-select:none;
24
+ width:100%;
25
+ margin:0;
26
+ padding:0;
27
+ }
28
+ @media (forced-colors: active){
29
+ .iui-menu{
30
+ border:1px solid transparent;
31
+ }
32
+ }
33
+ .iui-menu .iui-header-menu-icon{
34
+ margin:0 4px;
35
+ }
36
+ .iui-menu div.iui-header-menu-icon{
37
+ margin:0;
38
+ width:24px;
39
+ height:24px;
40
+ border-radius:4px;
41
+ }
42
+ .iui-menu.iui-scroll{
43
+ overflow-y:auto;
44
+ overflow-y:overlay;
45
+ }
45
46
 
46
- .iui-menu-item{
47
- display:flex;
48
- align-items:center;
49
- font-size:14px;
50
- padding:0 13px;
51
- height:38px;
52
- cursor:pointer;
53
- box-sizing:border-box;
54
- line-height:normal;
55
- }
56
- .iui-menu-item + .iui-menu-item{
57
- margin-top:-1px;
58
- }
59
- .iui-menu-item .iui-content,
47
+ .iui-menu-item{
48
+ display:flex;
49
+ align-items:center;
50
+ font-size:14px;
51
+ padding:0 13px;
52
+ height:38px;
53
+ cursor:pointer;
54
+ box-sizing:border-box;
55
+ line-height:normal;
56
+ }
57
+ .iui-menu-item + .iui-menu-item{
58
+ margin-top:-1px;
59
+ }
60
+ .iui-menu-item .iui-content,
60
61
  .iui-menu-item .iui-menu-label,
61
62
  .iui-menu-item .iui-menu-description{
62
- white-space:nowrap;
63
- overflow:hidden;
64
- text-overflow:ellipsis;
65
- }
66
- .iui-menu-item .iui-content{
67
- flex:1 1 auto;
68
- }
69
- .iui-menu-item .iui-content + .iui-icon{
70
- margin-right:0;
71
- margin-left:8px;
72
- }
73
- .iui-menu-item .iui-menu-description{
74
- display:none;
75
- font-size:12px;
76
- opacity:0.6;
77
- opacity:var(--iui-opacity-3);
78
- }
79
- .iui-menu-item > .iui-icon{
80
- width:16px;
81
- height:16px;
82
- flex:0 0 auto;
83
- fill:rgba(0, 0, 0, 0.8);
84
- fill:var(--iui-icons-color-actionable);
85
- }
86
- .iui-menu-item > .iui-icon + .iui-content{
87
- margin-left:8px;
88
- }
89
- .iui-menu-item:hover{
90
- background-color:rgba(0, 138, 224, 0.1);
91
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
92
- }
93
- .iui-menu-item:focus, .iui-menu-item.iui-focused{
94
- outline:thin solid var(--iui-color-foreground-primary);
95
- outline-offset:-1px;
96
- outline:thin solid var(--iui-color-foreground-primary);
97
- outline-offset:-1px;
98
- }
99
- .iui-menu-item:focus:not(:focus-visible){
100
- outline:none;
101
- }
102
- .iui-menu-item.iui-large{
103
- height:49px;
104
- }
105
- .iui-menu-item.iui-large .iui-menu-description{
106
- display:block;
107
- }
108
- .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
109
- background-color:rgba(0, 138, 224, 0.1);
110
- color:#008ae0;
111
- outline:thin solid var(--iui-color-foreground-primary);
112
- outline-offset:-1px;
113
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
114
- color:var(--iui-color-foreground-primary);
115
- outline:thin solid var(--iui-color-foreground-primary);
116
- outline-offset:-1px;
117
- }
118
- .iui-menu-item.iui-active .iui-menu-description{
119
- opacity:1;
120
- }
121
- .iui-menu-item.iui-active > .iui-icon{
122
- fill:#008ae0;
123
- fill:var(--iui-icons-color-primary);
124
- }
125
- .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
126
- outline-width:2px;
127
- outline-offset:-2px;
128
- }
129
- .iui-menu-item.iui-active:focus:not(:focus-visible){
130
- outline:thin solid var(--iui-color-foreground-primary);
131
- outline-offset:-1px;
132
- }
133
- .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
134
- cursor:not-allowed;
135
- outline:none;
136
- background-color:white;
137
- color:rgba(0, 0, 0, 0.2);
138
- background-color:var(--iui-color-background-1);
139
- color:var(--iui-text-color-placeholder);
140
- }
141
- .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
142
- fill:rgba(0, 0, 0, 0.2);
143
- fill:var(--iui-icons-color-actionable-disabled);
144
- }
145
- .iui-menu-item-skeleton{
146
- --iui-menu-item-content-skeleton-max-width:30%;
147
- cursor:auto;
148
- }
149
- .iui-menu-item-skeleton .iui-content{
150
- max-width:var(--iui-menu-item-content-skeleton-max-width);
151
- }
152
- .iui-menu-item-skeleton .iui-menu-label{
153
- width:100%;
154
- height:14px;
155
- vertical-align:middle;
156
- }
157
- .iui-menu-item-skeleton .iui-menu-description{
158
- width:70%;
159
- height:12px;
160
- vertical-align:middle;
161
- margin-top:4px;
162
- }
163
- .iui-menu-item-skeleton:hover{
164
- background-color:unset;
165
- }
63
+ white-space:nowrap;
64
+ overflow:hidden;
65
+ text-overflow:ellipsis;
66
+ }
67
+ .iui-menu-item .iui-content{
68
+ flex:1 1 auto;
69
+ }
70
+ .iui-menu-item .iui-content + .iui-icon{
71
+ margin-right:0;
72
+ margin-left:8px;
73
+ }
74
+ .iui-menu-item .iui-menu-description{
75
+ display:none;
76
+ font-size:12px;
77
+ opacity:0.6;
78
+ opacity:var(--iui-opacity-3);
79
+ }
80
+ .iui-menu-item > .iui-icon{
81
+ width:16px;
82
+ height:16px;
83
+ flex:0 0 auto;
84
+ fill:rgba(0, 0, 0, 0.8);
85
+ fill:var(--iui-icons-color-actionable);
86
+ }
87
+ .iui-menu-item > .iui-icon + .iui-content{
88
+ margin-left:8px;
89
+ }
90
+ .iui-menu-item:hover{
91
+ background-color:rgba(0, 138, 224, 0.1);
92
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
93
+ }
94
+ .iui-menu-item:focus, .iui-menu-item.iui-focused{
95
+ outline:thin solid var(--iui-color-foreground-primary);
96
+ outline-offset:-1px;
97
+ outline:thin solid var(--iui-color-foreground-primary);
98
+ outline-offset:-1px;
99
+ }
100
+ .iui-menu-item:focus:not(:focus-visible){
101
+ outline:none;
102
+ }
103
+ .iui-menu-item.iui-large{
104
+ height:49px;
105
+ }
106
+ .iui-menu-item.iui-large .iui-menu-description{
107
+ display:block;
108
+ }
109
+ .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
110
+ background-color:rgba(0, 138, 224, 0.1);
111
+ color:#008ae0;
112
+ outline:thin solid var(--iui-color-foreground-primary);
113
+ outline-offset:-1px;
114
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
115
+ color:var(--iui-color-foreground-primary);
116
+ outline:thin solid var(--iui-color-foreground-primary);
117
+ outline-offset:-1px;
118
+ }
119
+ .iui-menu-item.iui-active .iui-menu-description{
120
+ opacity:1;
121
+ }
122
+ .iui-menu-item.iui-active > .iui-icon{
123
+ fill:#008ae0;
124
+ fill:var(--iui-icons-color-primary);
125
+ }
126
+ .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
127
+ outline-width:2px;
128
+ outline-offset:-2px;
129
+ }
130
+ .iui-menu-item.iui-active:focus:not(:focus-visible){
131
+ outline:thin solid var(--iui-color-foreground-primary);
132
+ outline-offset:-1px;
133
+ }
134
+ .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
135
+ cursor:not-allowed;
136
+ outline:none;
137
+ background-color:white;
138
+ color:rgba(0, 0, 0, 0.2);
139
+ background-color:var(--iui-color-background-1);
140
+ color:var(--iui-text-color-placeholder);
141
+ }
142
+ .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
143
+ fill:rgba(0, 0, 0, 0.2);
144
+ fill:var(--iui-icons-color-actionable-disabled);
145
+ }
146
+ .iui-menu-item-skeleton{
147
+ --iui-menu-item-content-skeleton-max-width:30%;
148
+ cursor:auto;
149
+ }
150
+ .iui-menu-item-skeleton .iui-content{
151
+ max-width:var(--iui-menu-item-content-skeleton-max-width);
152
+ }
153
+ .iui-menu-item-skeleton .iui-menu-label{
154
+ width:100%;
155
+ height:14px;
156
+ vertical-align:middle;
157
+ }
158
+ .iui-menu-item-skeleton .iui-menu-description{
159
+ width:70%;
160
+ height:12px;
161
+ vertical-align:middle;
162
+ margin-top:4px;
163
+ }
164
+ .iui-menu-item-skeleton:hover{
165
+ background-color:unset;
166
+ }
166
167
 
167
- .iui-menu-content{
168
- padding:11px 13px;
169
- }
168
+ .iui-menu-content{
169
+ padding:11px 13px;
170
+ }
170
171
 
171
- .iui-menu-divider{
172
- height:1px;
173
- width:calc(100% - 24px);
174
- margin:1px auto;
175
- background-color:#c7ccd1;
176
- background-color:var(--iui-color-background-border);
172
+ .iui-menu-divider{
173
+ height:1px;
174
+ width:calc(100% - 24px);
175
+ margin:1px auto;
176
+ background-color:#c7ccd1;
177
+ background-color:var(--iui-color-background-border);
178
+ }
177
179
  }