@itwin/itwinui-css 0.49.0 → 0.51.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 (63) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7251 -5567
  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 -315
  7. package/css/carousel.css +125 -78
  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 +54 -42
  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 +204 -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 +38 -8
  47. package/scss/button/classes.scss +4 -0
  48. package/scss/carousel/carousel.scss +17 -6
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/inputs/checkbox.scss +1 -0
  51. package/scss/inputs/labeled-inputs.scss +8 -8
  52. package/scss/inputs/radio.scss +0 -4
  53. package/scss/location-marker/data-rich.scss +1 -1
  54. package/scss/location-marker/me.scss +4 -4
  55. package/scss/modal/modal.scss +1 -0
  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/table/table.scss +23 -14
  61. package/scss/toast-notification/categories.scss +1 -5
  62. package/scss/toggle-switch/classes.scss +4 -0
  63. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/carousel.css CHANGED
@@ -4,27 +4,45 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-carousel{
6
6
  overflow:hidden;
7
- border-radius:3px; }
8
- .iui-carousel:focus-visible{
7
+ border-radius:3px;
8
+ }
9
+ .iui-carousel:focus-visible{
10
+ outline:1px solid var(--iui-color-foreground-primary);
11
+ outline-offset:4px;
12
+ }
13
+ @supports not selector(*:focus-visible){
14
+ .iui-carousel:focus{
9
15
  outline:1px solid var(--iui-color-foreground-primary);
10
- outline-offset:4px; }
11
- @supports not selector(*:focus-visible){
12
- .iui-carousel:focus{
13
- outline:1px solid var(--iui-color-foreground-primary);
14
- outline-offset:4px; } }
16
+ outline-offset:4px;
17
+ }
18
+ }
15
19
 
16
20
  .iui-carousel-slider{
17
21
  display:flex;
22
+ gap:8px;
18
23
  list-style:none;
19
24
  margin:0;
20
- padding:0; }
21
- @media (prefers-reduced-motion: no-preference){
22
- .iui-carousel-slider{
23
- transition:transform 0.8s ease-in-out; } }
24
- .iui-carousel-slider-item{
25
- width:100%;
26
- flex-shrink:0;
27
- box-sizing:border-box; }
25
+ padding:0;
26
+ overflow-x:auto;
27
+ overflow-x:overlay;
28
+ -ms-scroll-snap-type:x mandatory;
29
+ scroll-snap-type:x mandatory;
30
+ scrollbar-width:none;
31
+ }
32
+ @media (prefers-reduced-motion: no-preference){
33
+ .iui-carousel-slider{
34
+ scroll-behavior:smooth;
35
+ }
36
+ }
37
+ .iui-carousel-slider::-webkit-scrollbar{
38
+ display:none;
39
+ }
40
+ .iui-carousel-slider-item{
41
+ width:100%;
42
+ flex-shrink:0;
43
+ box-sizing:border-box;
44
+ scroll-snap-align:center;
45
+ }
28
46
 
29
47
  .iui-carousel-navigation{
30
48
  display:flex;
@@ -32,66 +50,95 @@
32
50
  height:33px;
33
51
  box-sizing:border-box;
34
52
  border-top:2px solid #DCE0E3;
35
- border-top:2px solid var(--iui-color-background-4); }
36
- .iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
37
- display:flex;
38
- align-items:center;
39
- flex:1; }
40
- .iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
41
- outline-offset:-1px;
42
- outline:1px solid #008BE1;
43
- outline:1px solid var(--iui-color-foreground-primary); }
44
- .iui-carousel-navigation-dots{
45
- margin:0;
46
- padding:0;
47
- border:none;
48
- vertical-align:baseline;
49
- border-radius:3px;
50
- white-space:nowrap;
51
- overflow:hidden;
52
- justify-content:center;
53
- list-style:none; }
54
- .iui-carousel-navigation-dots:focus-visible{
55
- outline:1px solid var(--iui-color-foreground-primary);
56
- outline-offset:-1px; }
57
- @supports not selector(*:focus-visible){
58
- .iui-carousel-navigation-dots:focus{
59
- outline:1px solid var(--iui-color-foreground-primary);
60
- outline-offset:-1px; } }
61
- .iui-carousel-navigation-dot{
62
- padding:0 8px;
63
- height:27px;
64
- gap:4px;
65
- background-color:transparent;
66
- border:none;
67
- cursor:pointer; }
68
- .iui-carousel-navigation-dot:hover::after{
69
- background-color:rgba(0, 0, 0, 0.6);
70
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
71
- .iui-carousel-navigation-dot.iui-invisible{
72
- display:none; }
73
- .iui-carousel-navigation-dot::after{
74
- content:'';
75
- display:block;
76
- width:12px;
77
- height:12px;
78
- border-radius:50%;
79
- transition:background-color 0.2s ease;
80
- background-color:rgba(0, 0, 0, 0.4);
81
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
82
- @media (prefers-reduced-motion: no-preference){
83
- .iui-carousel-navigation-dot::after{
84
- transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
85
- .iui-carousel-navigation-dot.iui-first::after{
86
- transform:scale(0.5); }
87
- .iui-carousel-navigation-dot.iui-second::after{
88
- transform:scale(0.75); }
89
- .iui-carousel-navigation-dot.iui-invisible::after{
90
- transform:scale(0);
91
- background-color:rgba(0, 0, 0, 0);
92
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
93
- .iui-carousel-navigation-dot.iui-active::after{
94
- background-color:#008BE1;
95
- background-color:var(--iui-color-foreground-primary); }
96
- .iui-carousel-navigation-right{
97
- justify-content:flex-end; }
53
+ border-top:2px solid var(--iui-color-background-4);
54
+ }
55
+ .iui-carousel-navigation-left, .iui-carousel-navigation-right{
56
+ display:flex;
57
+ align-items:center;
58
+ flex:1;
59
+ }
60
+ .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
61
+ outline-offset:-1px;
62
+ outline:1px solid #008BE1;
63
+ outline:1px solid var(--iui-color-foreground-primary);
64
+ }
65
+ .iui-carousel-navigation-dots{
66
+ margin:0;
67
+ padding:0;
68
+ border:none;
69
+ vertical-align:baseline;
70
+ display:flex;
71
+ align-items:center;
72
+ flex:2;
73
+ max-width:256px;
74
+ border-radius:3px;
75
+ white-space:nowrap;
76
+ overflow:hidden;
77
+ justify-content:center;
78
+ list-style:none;
79
+ }
80
+ .iui-carousel-navigation-dots:focus-visible{
81
+ outline:1px solid var(--iui-color-foreground-primary);
82
+ outline-offset:-1px;
83
+ }
84
+ @supports not selector(*:focus-visible){
85
+ .iui-carousel-navigation-dots:focus{
86
+ outline:1px solid var(--iui-color-foreground-primary);
87
+ outline-offset:-1px;
88
+ }
89
+ }
90
+ .iui-carousel-navigation-dot{
91
+ padding:0 8px;
92
+ height:27px;
93
+ gap:4px;
94
+ background-color:transparent;
95
+ border:none;
96
+ cursor:pointer;
97
+ }
98
+ .iui-carousel-navigation-dot:hover::after{
99
+ background-color:rgba(0, 0, 0, 0.6);
100
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
101
+ }
102
+ .iui-carousel-navigation-dot.iui-invisible{
103
+ -webkit-clip-path:inset(50%);
104
+ clip-path:inset(50%);
105
+ overflow:hidden;
106
+ position:absolute;
107
+ white-space:nowrap;
108
+ height:1px;
109
+ width:1px;
110
+ padding:0;
111
+ margin:-1px;
112
+ border-width:0;
113
+ }
114
+ .iui-carousel-navigation-dot::after{
115
+ content:"";
116
+ display:block;
117
+ width:12px;
118
+ height:12px;
119
+ border-radius:50%;
120
+ transition:background-color 0.2s ease;
121
+ background-color:rgba(0, 0, 0, 0.4);
122
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
123
+ }
124
+ @media (prefers-reduced-motion: no-preference){
125
+ .iui-carousel-navigation-dot::after{
126
+ transition:background-color 0.2s 0.2s ease, transform 0.4s ease;
127
+ }
128
+ }
129
+ .iui-carousel-navigation-dot.iui-first::after{
130
+ transform:scale(0.5);
131
+ }
132
+ .iui-carousel-navigation-dot.iui-second::after{
133
+ transform:scale(0.75);
134
+ }
135
+ .iui-carousel-navigation-dot.iui-invisible::after{
136
+ transform:scale(0);
137
+ }
138
+ .iui-carousel-navigation-dot.iui-active::after{
139
+ background-color:#008BE1;
140
+ background-color:var(--iui-color-foreground-primary);
141
+ }
142
+ .iui-carousel-navigation-right{
143
+ justify-content:flex-end;
144
+ }
package/css/code.css CHANGED
@@ -18,65 +18,78 @@
18
18
  background-color:#EEF0F3;
19
19
  color:rgba(0, 0, 0, 0.8);
20
20
  background-color:var(--iui-color-background-3);
21
- color:var(--iui-text-color); }
21
+ color:var(--iui-text-color);
22
+ }
22
23
 
23
24
  .iui-codeblock{
24
25
  margin:0;
25
26
  padding:0;
26
27
  border:none;
27
28
  vertical-align:baseline;
28
- margin:6px 0; }
29
- .iui-codeblock > .iui-title-bar{
30
- display:flex;
31
- align-items:center;
32
- border-radius:3px 3px 0 0;
33
- background-color:#EEF0F3;
34
- background-color:var(--iui-color-background-3); }
35
- .iui-codeblock > .iui-title-bar > .iui-title{
36
- margin-left:12px;
37
- -webkit-user-select:all;
38
- -moz-user-select:all;
39
- user-select:all; }
40
- .iui-codeblock > .iui-title-bar > .iui-button{
41
- margin-left:auto; }
42
- .iui-codeblock .iui-button{
43
- gap:0; }
44
- .iui-codeblock > .iui-codeblock-content{
45
- margin:0;
46
- overflow-x:auto;
47
- overflow-y:auto;
48
- border-radius:0 0 3px 3px;
49
- white-space:normal;
50
- border:1px solid #EEF0F3;
51
- border:1px solid var(--iui-color-background-3); }
52
- .iui-codeblock > .iui-codeblock-content:focus-visible{
53
- outline:1px solid var(--iui-color-foreground-primary);
54
- outline-offset:-1px; }
55
- @supports not selector(*:focus-visible){
56
- .iui-codeblock > .iui-codeblock-content:focus{
57
- outline:1px solid var(--iui-color-foreground-primary);
58
- outline-offset:-1px; } }
59
- .iui-codeblock > .iui-codeblock-content > code{
60
- display:block;
61
- width:100%;
62
- white-space:nowrap;
63
- -webkit-hyphens:auto;
64
- -ms-hyphens:auto;
65
- hyphens:auto;
66
- counter-increment:section;
67
- font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
68
- background-color:#FFF;
69
- background-color:var(--iui-color-background-1); }
70
- .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
71
- background:rgba(0, 0, 0, 0.02);
72
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
73
- .iui-codeblock > .iui-codeblock-content > code::before{
74
- content:counter(section);
75
- text-align:right;
76
- display:inline-block;
77
- padding:0 8px;
78
- width:24px;
79
- background-color:#F8F9FB;
80
- color:rgba(0, 0, 0, 0.4);
81
- background-color:var(--iui-color-background-2);
82
- color:var(--iui-text-color-muted); }
29
+ margin:6px 0;
30
+ }
31
+ .iui-codeblock > .iui-title-bar{
32
+ display:flex;
33
+ align-items:center;
34
+ border-radius:3px 3px 0 0;
35
+ background-color:#EEF0F3;
36
+ background-color:var(--iui-color-background-3);
37
+ }
38
+ .iui-codeblock > .iui-title-bar > .iui-title{
39
+ margin-left:12px;
40
+ -webkit-user-select:all;
41
+ -moz-user-select:all;
42
+ user-select:all;
43
+ }
44
+ .iui-codeblock > .iui-title-bar > .iui-button{
45
+ margin-left:auto;
46
+ }
47
+ .iui-codeblock .iui-button{
48
+ gap:0;
49
+ }
50
+ .iui-codeblock > .iui-codeblock-content{
51
+ margin:0;
52
+ overflow-x:auto;
53
+ overflow-y:auto;
54
+ border-radius:0 0 3px 3px;
55
+ white-space:normal;
56
+ border:1px solid #EEF0F3;
57
+ border:1px solid var(--iui-color-background-3);
58
+ }
59
+ .iui-codeblock > .iui-codeblock-content:focus-visible{
60
+ outline:1px solid var(--iui-color-foreground-primary);
61
+ outline-offset:-1px;
62
+ }
63
+ @supports not selector(*:focus-visible){
64
+ .iui-codeblock > .iui-codeblock-content:focus{
65
+ outline:1px solid var(--iui-color-foreground-primary);
66
+ outline-offset:-1px;
67
+ }
68
+ }
69
+ .iui-codeblock > .iui-codeblock-content > code{
70
+ display:block;
71
+ width:100%;
72
+ white-space:nowrap;
73
+ -webkit-hyphens:auto;
74
+ -ms-hyphens:auto;
75
+ hyphens:auto;
76
+ counter-increment:section;
77
+ font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
78
+ background-color:#FFF;
79
+ background-color:var(--iui-color-background-1);
80
+ }
81
+ .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
82
+ background:rgba(0, 0, 0, 0.02);
83
+ background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
84
+ }
85
+ .iui-codeblock > .iui-codeblock-content > code::before{
86
+ content:counter(section);
87
+ text-align:right;
88
+ display:inline-block;
89
+ padding:0 8px;
90
+ width:24px;
91
+ background-color:#F8F9FB;
92
+ color:rgba(0, 0, 0, 0.4);
93
+ background-color:var(--iui-color-background-2);
94
+ color:var(--iui-text-color-muted);
95
+ }
package/css/color-picker.css CHANGED
@@ -23,65 +23,90 @@
23
23
  user-select:none;
24
24
  overflow-y:auto;
25
25
  flex-direction:column;
26
- max-height:495px; }
27
- @supports (overflow-y: overlay){
28
- .iui-color-picker{
29
- overflow-y:overlay; } }
30
- @supports (row-gap: 11px){
31
- .iui-color-picker{
32
- row-gap:11px; } }
26
+ max-height:495px;
27
+ }
28
+ @supports (overflow-y: overlay){
29
+ .iui-color-picker{
30
+ overflow-y:overlay;
31
+ }
32
+ }
33
+ @supports (row-gap: 11px){
34
+ .iui-color-picker{
35
+ row-gap:11px;
36
+ }
37
+ }
38
+ .iui-color-picker > div:not(:last-child){
39
+ margin-bottom:11px;
40
+ }
41
+ @supports (row-gap: 11px){
33
42
  .iui-color-picker > div:not(:last-child){
34
- margin-bottom:11px; }
35
- @supports (row-gap: 11px){
36
- .iui-color-picker > div:not(:last-child){
37
- margin-bottom:0; } }
43
+ margin-bottom:0;
44
+ }
45
+ }
38
46
 
39
47
  .iui-color-palette{
40
48
  display:flex;
41
49
  flex-wrap:wrap;
42
50
  align-content:flex-start;
43
51
  min-height:24px;
44
- min-width:24px; }
45
- @supports (gap: 8px){
46
- .iui-color-palette{
47
- gap:8px; } }
48
- .iui-color-palette button.iui-button.iui-borderless{
49
- height:24px;
50
- width:24px;
51
- padding:0; }
52
- .iui-color-palette-wrapper{
53
- max-width:280px; }
54
- .iui-color-palette-wrapper:only-child{
55
- max-width:312px; }
52
+ min-width:24px;
53
+ }
54
+ @supports (gap: 8px){
55
+ .iui-color-palette{
56
+ gap:8px;
57
+ }
58
+ }
59
+ .iui-color-palette button.iui-button.iui-borderless{
60
+ height:24px;
61
+ width:24px;
62
+ padding:0;
63
+ }
64
+ .iui-color-palette-wrapper{
65
+ max-width:280px;
66
+ }
67
+ .iui-color-palette-wrapper:only-child{
68
+ max-width:312px;
69
+ }
56
70
 
57
71
  .iui-color-input{
58
72
  display:flex;
59
- align-items:center; }
60
- .iui-color-input-wrapper{
61
- max-width:280px; }
62
- .iui-color-input .iui-button{
63
- margin-right:4px; }
64
- .iui-color-input-fields{
65
- display:flex;
66
- width:100%;
67
- gap:2px; }
68
- .iui-color-input-fields > *{
69
- flex-grow:1; }
70
- .iui-color-input-fields > *:not(:last-child){
71
- margin-right:2px; }
72
- @supports (gap: 2px){
73
- .iui-color-input-fields > *:not(:last-child){
74
- margin-right:0; } }
75
- .iui-color-input-fields input{
76
- text-transform:uppercase; }
77
- .iui-color-input-fields input[type='number']{
78
- -webkit-appearance:textfield;
79
- -moz-appearance:textfield;
80
- appearance:textfield;
81
- text-align:right; }
82
- .iui-color-input-fields input[type='number']::-webkit-inner-spin-button{
83
- -webkit-appearance:none;
84
- appearance:none; }
73
+ align-items:center;
74
+ }
75
+ .iui-color-input-wrapper{
76
+ max-width:280px;
77
+ }
78
+ .iui-color-input .iui-button{
79
+ margin-right:4px;
80
+ }
81
+ .iui-color-input-fields{
82
+ display:flex;
83
+ width:100%;
84
+ gap:2px;
85
+ }
86
+ .iui-color-input-fields > *{
87
+ flex-grow:1;
88
+ }
89
+ .iui-color-input-fields > *:not(:last-child){
90
+ margin-right:2px;
91
+ }
92
+ @supports (gap: 2px){
93
+ .iui-color-input-fields > *:not(:last-child){
94
+ margin-right:0;
95
+ }
96
+ }
97
+ .iui-color-input-fields input{
98
+ text-transform:uppercase;
99
+ }
100
+ .iui-color-input-fields input[type=number]{
101
+ -webkit-appearance:textfield;
102
+ -moz-appearance:textfield;
103
+ appearance:textfield;
104
+ text-align:right;
105
+ }
106
+ .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
107
+ -webkit-appearance:none;
108
+ appearance:none;
109
+ }
85
110
 
86
111
  .iui-color-swatch{
87
112
  --iui-color-swatch-background:initial;
@@ -96,46 +121,58 @@
96
121
  background-position:0 0, 8px 8px;
97
122
  background-size:16px 16px;
98
123
  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
99
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
100
- @supports (gap: 8px){
101
- .iui-color-swatch{
102
- margin-bottom:0;
103
- margin-right:0; } }
104
- .iui-color-swatch::after{
105
- content:'';
106
- position:absolute;
107
- left:0;
108
- top:0;
109
- width:inherit;
110
- height:inherit;
111
- border-radius:inherit;
112
- background-color:inherit;
113
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
114
- .iui-color-swatch:hover{
115
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
116
- .iui-color-swatch:focus-visible{
124
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
125
+ }
126
+ @supports (gap: 8px){
127
+ .iui-color-swatch{
128
+ margin-bottom:0;
129
+ margin-right:0;
130
+ }
131
+ }
132
+ .iui-color-swatch::after{
133
+ content:"";
134
+ position:absolute;
135
+ left:0;
136
+ top:0;
137
+ width:inherit;
138
+ height:inherit;
139
+ border-radius:inherit;
140
+ background-color:inherit;
141
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
142
+ }
143
+ .iui-color-swatch:hover{
144
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
145
+ }
146
+ .iui-color-swatch:focus-visible{
147
+ outline:2px solid var(--iui-color-foreground-primary);
148
+ outline-offset:1px;
149
+ }
150
+ @supports not selector(*:focus-visible){
151
+ .iui-color-swatch:focus{
117
152
  outline:2px solid var(--iui-color-foreground-primary);
118
- outline-offset:1px; }
119
- @supports not selector(*:focus-visible){
120
- .iui-color-swatch:focus{
121
- outline:2px solid var(--iui-color-foreground-primary);
122
- outline-offset:1px; } }
123
- .iui-color-swatch.iui-active{
124
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
125
- .iui-color-swatch.iui-active:hover{
126
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
153
+ outline-offset:1px;
154
+ }
155
+ }
156
+ .iui-color-swatch.iui-active{
157
+ box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
158
+ }
159
+ .iui-color-swatch.iui-active:hover{
160
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
161
+ }
127
162
 
128
163
  .iui-color-picker-section-label{
129
164
  margin-bottom:5.5px;
130
165
  overflow:hidden;
131
166
  text-overflow:ellipsis;
132
167
  white-space:nowrap;
133
- flex-shrink:0; }
168
+ flex-shrink:0;
169
+ }
134
170
 
135
171
  .iui-color-selection-wrapper{
136
172
  display:flex;
137
173
  flex-direction:column;
138
- min-width:280px; }
174
+ min-width:280px;
175
+ }
139
176
 
140
177
  .iui-color-field{
141
178
  --iui-color-field-hue:initial;
@@ -143,33 +180,38 @@
143
180
  cursor:crosshair;
144
181
  width:100%;
145
182
  height:209px;
146
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
147
- .iui-color-field:not(:last-child){
148
- margin-bottom:6px; }
183
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
184
+ }
185
+ .iui-color-field:not(:last-child){
186
+ margin-bottom:6px;
187
+ }
149
188
 
150
189
  .iui-hue-slider .iui-slider-rail{
151
190
  height:8px;
152
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
153
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
154
-
191
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
192
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
193
+ }
155
194
  .iui-hue-slider .iui-slider-thumb{
156
- top:7px; }
195
+ top:7px;
196
+ }
157
197
 
158
198
  .iui-opacity-slider .iui-slider-rail{
159
199
  height:8px;
160
200
  background-position:0 0, 4px 4px;
161
201
  background-size:8px 8px;
162
202
  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
163
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
164
- .iui-opacity-slider .iui-slider-rail::before{
165
- display:block;
166
- content:'';
167
- width:100%;
168
- height:100%;
169
- background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
170
-
203
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
204
+ }
205
+ .iui-opacity-slider .iui-slider-rail::before{
206
+ display:block;
207
+ content:"";
208
+ width:100%;
209
+ height:100%;
210
+ background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
211
+ }
171
212
  .iui-opacity-slider .iui-slider-thumb{
172
- top:7px; }
213
+ top:7px;
214
+ }
173
215
 
174
216
  .iui-color-dot{
175
217
  --iui-color-dot-inset:initial;
@@ -181,13 +223,18 @@
181
223
  transform:translate(-8px, -8px);
182
224
  cursor:crosshair;
183
225
  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
184
- background-color:var(--iui-color-picker-selected-color); }
185
- .iui-color-dot:hover{
186
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
187
- .iui-color-dot:focus-visible{
226
+ background-color:var(--iui-color-picker-selected-color);
227
+ }
228
+ .iui-color-dot:hover{
229
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
230
+ }
231
+ .iui-color-dot:focus-visible{
232
+ outline:2px solid var(--iui-color-foreground-primary);
233
+ outline-offset:0;
234
+ }
235
+ @supports not selector(*:focus-visible){
236
+ .iui-color-dot:focus{
188
237
  outline:2px solid var(--iui-color-foreground-primary);
189
- outline-offset:0; }
190
- @supports not selector(*:focus-visible){
191
- .iui-color-dot:focus{
192
- outline:2px solid var(--iui-color-foreground-primary);
193
- outline-offset:0; } }
238
+ outline-offset:0;
239
+ }
240
+ }