@itwin/itwinui-css 0.35.2 → 0.36.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 (5) hide show
  1. package/css/all.css +72 -33
  2. package/css/color-picker.css +72 -33
  3. package/package.json +1 -1
  4. package/scss/color-picker/classes.scss +12 -4
  5. package/scss/color-picker/color-picker.scss +92 -37
package/css/all.css CHANGED
@@ -1098,8 +1098,6 @@ html.iui-theme-dark{
1098
1098
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
1099
1099
  background-color:#FFF;
1100
1100
  background-color:var(--iui-color-background-1);
1101
- max-width:336px;
1102
- max-height:334px;
1103
1101
  box-sizing:border-box;
1104
1102
  border-radius:3px;
1105
1103
  display:inline-flex;
@@ -1108,17 +1106,28 @@ html.iui-theme-dark{
1108
1106
  -moz-user-select:none;
1109
1107
  -ms-user-select:none;
1110
1108
  user-select:none;
1111
- overflow-y:auto; }
1109
+ overflow-y:auto;
1110
+ flex-direction:column;
1111
+ max-width:336px;
1112
+ max-height:495px; }
1112
1113
  @supports (overflow-y: overlay){
1113
1114
  .iui-color-picker{
1114
1115
  overflow-y:overlay; } }
1115
- .iui-color-picker.iui-advanced{
1116
- max-width:261px;
1117
- flex-direction:column; }
1116
+ @supports (row-gap: 11px){
1117
+ .iui-color-picker{
1118
+ row-gap:11px; } }
1119
+ .iui-color-picker > div:not(:last-child){
1120
+ margin-bottom:11px; }
1121
+ @supports (row-gap: 11px){
1122
+ .iui-color-picker > div:not(:last-child){
1123
+ margin-bottom:0; } }
1118
1124
 
1119
1125
  .iui-color-palette{
1120
1126
  display:flex;
1121
- flex-wrap:wrap; }
1127
+ flex-wrap:wrap;
1128
+ align-content:flex-start;
1129
+ min-height:24px;
1130
+ min-width:24px; }
1122
1131
  @supports (gap: 8px){
1123
1132
  .iui-color-palette{
1124
1133
  gap:8px; } }
@@ -1127,6 +1136,27 @@ html.iui-theme-dark{
1127
1136
  width:24px;
1128
1137
  padding:0; }
1129
1138
 
1139
+ .iui-color-input{
1140
+ display:flex;
1141
+ align-items:center; }
1142
+ .iui-color-input .iui-button{
1143
+ margin-right:4px; }
1144
+ .iui-color-input-fields{
1145
+ display:flex;
1146
+ width:100%; }
1147
+ .iui-color-input-fields .iui-input:not(:last-child){
1148
+ margin-right:2px; }
1149
+ .iui-color-input-fields input{
1150
+ text-transform:uppercase; }
1151
+ .iui-color-input-fields input[type=number]{
1152
+ -webkit-appearance:textfield;
1153
+ -moz-appearance:textfield;
1154
+ appearance:textfield;
1155
+ text-align:right; }
1156
+ .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
1157
+ -webkit-appearance:none;
1158
+ appearance:none; }
1159
+
1130
1160
  .iui-color-swatch{
1131
1161
  height:24px;
1132
1162
  width:24px;
@@ -1161,32 +1191,51 @@ html.iui-theme-dark{
1161
1191
  box-shadow: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));
1162
1192
  box-shadow: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)); }
1163
1193
 
1164
- .iui-saved-colors{
1165
- margin-top:11px;
1194
+ .iui-color-picker-section-label{
1166
1195
  margin-bottom:5.5px;
1167
1196
  overflow:hidden;
1168
1197
  text-overflow:ellipsis;
1198
+ white-space:nowrap;
1169
1199
  flex-shrink:0; }
1170
1200
 
1171
1201
  .iui-color-selection-wrapper{
1172
- display:flex; }
1202
+ display:flex;
1203
+ flex-direction:column; }
1173
1204
 
1174
1205
  .iui-color-field{
1175
1206
  position:relative;
1176
1207
  cursor:crosshair;
1177
- width:209px;
1178
- height:209px;
1179
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color));
1180
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color)); }
1208
+ width:100%;
1209
+ min-width:312px;
1210
+ height:242px;
1211
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
1212
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
1181
1213
 
1182
- .iui-color-slider{
1183
- margin-left:12px;
1184
- margin-right:8px;
1185
- position:relative;
1186
- width:8px;
1187
- border-radius:3px;
1188
- background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
1189
- background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
1214
+ .iui-hue-slider .iui-slider-rail{
1215
+ height:8px;
1216
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
1217
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
1218
+
1219
+ .iui-hue-slider .iui-slider-thumb{
1220
+ top:7px; }
1221
+
1222
+ .iui-opacity-slider .iui-slider-rail{
1223
+ height:8px;
1224
+ 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);
1225
+ background-position:0 0, 4px 4px;
1226
+ background-size:8px 8px;
1227
+ 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));
1228
+ background-position:0 0, 4px 4px;
1229
+ background-size:8px 8px; }
1230
+ .iui-opacity-slider .iui-slider-rail::before{
1231
+ display:block;
1232
+ content:'';
1233
+ width:100%;
1234
+ height:100%;
1235
+ background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
1236
+
1237
+ .iui-opacity-slider .iui-slider-thumb{
1238
+ top:7px; }
1190
1239
 
1191
1240
  .iui-color-dot{
1192
1241
  position:absolute;
@@ -1196,21 +1245,11 @@ html.iui-theme-dark{
1196
1245
  height:16px;
1197
1246
  border-radius:50%;
1198
1247
  transform:translate(-8px, -8px);
1199
- cursor:-webkit-grab;
1200
- cursor:grab;
1248
+ cursor:crosshair;
1201
1249
  box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1202
1250
  background-color:var(--selected-color);
1203
1251
  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));
1204
1252
  background-color:var(--selected-color); }
1205
- .iui-color-dot:active{
1206
- cursor:-webkit-grabbing;
1207
- cursor:grabbing; }
1208
- .iui-color-dot.iui-white{
1209
- transform:translate(-4px, -9px);
1210
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
1211
- background-color:#FFF;
1212
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
1213
- background-color:#FFF; }
1214
1253
  .iui-color-dot:hover{
1215
1254
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1216
1255
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
package/css/color-picker.css CHANGED
@@ -10,8 +10,6 @@
10
10
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
11
11
  background-color:#FFF;
12
12
  background-color:var(--iui-color-background-1);
13
- max-width:336px;
14
- max-height:334px;
15
13
  box-sizing:border-box;
16
14
  border-radius:3px;
17
15
  display:inline-flex;
@@ -20,17 +18,28 @@
20
18
  -moz-user-select:none;
21
19
  -ms-user-select:none;
22
20
  user-select:none;
23
- overflow-y:auto; }
21
+ overflow-y:auto;
22
+ flex-direction:column;
23
+ max-width:336px;
24
+ max-height:495px; }
24
25
  @supports (overflow-y: overlay){
25
26
  .iui-color-picker{
26
27
  overflow-y:overlay; } }
27
- .iui-color-picker.iui-advanced{
28
- max-width:261px;
29
- flex-direction:column; }
28
+ @supports (row-gap: 11px){
29
+ .iui-color-picker{
30
+ row-gap:11px; } }
31
+ .iui-color-picker > div:not(:last-child){
32
+ margin-bottom:11px; }
33
+ @supports (row-gap: 11px){
34
+ .iui-color-picker > div:not(:last-child){
35
+ margin-bottom:0; } }
30
36
 
31
37
  .iui-color-palette{
32
38
  display:flex;
33
- flex-wrap:wrap; }
39
+ flex-wrap:wrap;
40
+ align-content:flex-start;
41
+ min-height:24px;
42
+ min-width:24px; }
34
43
  @supports (gap: 8px){
35
44
  .iui-color-palette{
36
45
  gap:8px; } }
@@ -39,6 +48,27 @@
39
48
  width:24px;
40
49
  padding:0; }
41
50
 
51
+ .iui-color-input{
52
+ display:flex;
53
+ align-items:center; }
54
+ .iui-color-input .iui-button{
55
+ margin-right:4px; }
56
+ .iui-color-input-fields{
57
+ display:flex;
58
+ width:100%; }
59
+ .iui-color-input-fields .iui-input:not(:last-child){
60
+ margin-right:2px; }
61
+ .iui-color-input-fields input{
62
+ text-transform:uppercase; }
63
+ .iui-color-input-fields input[type=number]{
64
+ -webkit-appearance:textfield;
65
+ -moz-appearance:textfield;
66
+ appearance:textfield;
67
+ text-align:right; }
68
+ .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
69
+ -webkit-appearance:none;
70
+ appearance:none; }
71
+
42
72
  .iui-color-swatch{
43
73
  height:24px;
44
74
  width:24px;
@@ -73,32 +103,51 @@
73
103
  box-shadow: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));
74
104
  box-shadow: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)); }
75
105
 
76
- .iui-saved-colors{
77
- margin-top:11px;
106
+ .iui-color-picker-section-label{
78
107
  margin-bottom:5.5px;
79
108
  overflow:hidden;
80
109
  text-overflow:ellipsis;
110
+ white-space:nowrap;
81
111
  flex-shrink:0; }
82
112
 
83
113
  .iui-color-selection-wrapper{
84
- display:flex; }
114
+ display:flex;
115
+ flex-direction:column; }
85
116
 
86
117
  .iui-color-field{
87
118
  position:relative;
88
119
  cursor:crosshair;
89
- width:209px;
90
- height:209px;
91
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color));
92
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color)); }
120
+ width:100%;
121
+ min-width:312px;
122
+ height:242px;
123
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
124
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
93
125
 
94
- .iui-color-slider{
95
- margin-left:12px;
96
- margin-right:8px;
97
- position:relative;
98
- width:8px;
99
- border-radius:3px;
100
- background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
101
- background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
126
+ .iui-hue-slider .iui-slider-rail{
127
+ height:8px;
128
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
129
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
130
+
131
+ .iui-hue-slider .iui-slider-thumb{
132
+ top:7px; }
133
+
134
+ .iui-opacity-slider .iui-slider-rail{
135
+ height:8px;
136
+ 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);
137
+ background-position:0 0, 4px 4px;
138
+ background-size:8px 8px;
139
+ 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));
140
+ background-position:0 0, 4px 4px;
141
+ background-size:8px 8px; }
142
+ .iui-opacity-slider .iui-slider-rail::before{
143
+ display:block;
144
+ content:'';
145
+ width:100%;
146
+ height:100%;
147
+ background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
148
+
149
+ .iui-opacity-slider .iui-slider-thumb{
150
+ top:7px; }
102
151
 
103
152
  .iui-color-dot{
104
153
  position:absolute;
@@ -108,21 +157,11 @@
108
157
  height:16px;
109
158
  border-radius:50%;
110
159
  transform:translate(-8px, -8px);
111
- cursor:-webkit-grab;
112
- cursor:grab;
160
+ cursor:crosshair;
113
161
  box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
114
162
  background-color:var(--selected-color);
115
163
  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));
116
164
  background-color:var(--selected-color); }
117
- .iui-color-dot:active{
118
- cursor:-webkit-grabbing;
119
- cursor:grabbing; }
120
- .iui-color-dot.iui-white{
121
- transform:translate(-4px, -9px);
122
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
123
- background-color:#FFF;
124
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
125
- background-color:#FFF; }
126
165
  .iui-color-dot:hover{
127
166
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
128
167
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.35.2",
3
+ "version": "0.36.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/color-picker/classes.scss CHANGED
@@ -10,12 +10,16 @@
10
10
  @include iui-color-palette;
11
11
  }
12
12
 
13
+ .iui-color-input {
14
+ @include iui-color-input;
15
+ }
16
+
13
17
  .iui-color-swatch {
14
18
  @include iui-color-swatch;
15
19
  }
16
20
 
17
- .iui-saved-colors {
18
- @include iui-saved-colors;
21
+ .iui-color-picker-section-label {
22
+ @include iui-color-picker-section-label;
19
23
  }
20
24
 
21
25
  .iui-color-selection-wrapper {
@@ -26,8 +30,12 @@
26
30
  @include iui-color-field;
27
31
  }
28
32
 
29
- .iui-color-slider {
30
- @include iui-color-slider;
33
+ .iui-hue-slider {
34
+ @include iui-hue-slider;
35
+ }
36
+
37
+ .iui-opacity-slider {
38
+ @include iui-opacity-slider;
31
39
  }
32
40
 
33
41
  .iui-color-dot {
package/scss/color-picker/color-picker.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @import '../menu/index';
5
5
  @import '../button/borderless';
6
6
 
7
- $iui-color-field-size: $iui-baseline * 19;
7
+ $iui-color-picker-content-width: ($iui-l * 10) + ($iui-s * 9); // (10 swatches per row) + (gaps)
8
8
  $iui-color-swatch-border-radius: 5px;
9
9
  $iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
10
10
  $iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
@@ -13,24 +13,27 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
13
13
 
14
14
  @mixin iui-color-picker {
15
15
  @include iui-dropdown;
16
- max-width: ($iui-l * 10) + ($iui-s * 9) + ($iui-sm * 2);
17
- // max-width: (10 swatches per row) + (gaps) + (container padding)
18
- max-height: ($iui-l * 10) + ($iui-s * 9) + ($iui-baseline * 2);
19
- // max-height: (10 rows) + (gaps) + (container padding)
20
16
  box-sizing: border-box;
21
17
  border-radius: $iui-border-radius;
22
18
  display: inline-flex;
23
19
  padding: $iui-baseline $iui-sm;
24
20
  user-select: none;
25
21
  overflow-y: auto;
22
+ flex-direction: column;
23
+ max-width: $iui-color-picker-content-width + ($iui-sm * 2);
24
+ max-height: $iui-baseline * 45;
26
25
  @supports (overflow-y: overlay) {
27
26
  overflow-y: overlay;
28
27
  }
28
+ @supports (row-gap: $iui-baseline) {
29
+ row-gap: $iui-baseline;
30
+ }
29
31
 
30
- &.iui-advanced {
31
- max-width: ($iui-color-field-size) + ($iui-sm) + ($iui-s) + ($iui-s) + ($iui-sm * 2);
32
- // max-width: (color field width) + (color slider margins) + (color slider width) + (container padding);
33
- flex-direction: column;
32
+ > div:not(:last-child) {
33
+ margin-bottom: $iui-baseline;
34
+ @supports (row-gap: $iui-baseline) {
35
+ margin-bottom: 0;
36
+ }
34
37
  }
35
38
  }
36
39
 
@@ -94,6 +97,9 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
94
97
  //Contains the color swatches
95
98
  display: flex;
96
99
  flex-wrap: wrap;
100
+ align-content: flex-start;
101
+ min-height: $iui-l;
102
+ min-width: $iui-l;
97
103
  @supports (gap: $iui-s) {
98
104
  gap: $iui-s;
99
105
  }
@@ -105,39 +111,67 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
105
111
  }
106
112
  }
107
113
 
108
- @mixin iui-saved-colors {
109
- margin-top: $iui-baseline;
114
+ @mixin iui-color-input {
115
+ display: flex;
116
+ align-items: center;
117
+
118
+ .iui-button {
119
+ margin-right: $iui-xs;
120
+ }
121
+
122
+ &-fields {
123
+ display: flex;
124
+ width: 100%;
125
+
126
+ .iui-input:not(:last-child) {
127
+ margin-right: $iui-xxs;
128
+ }
129
+
130
+ input {
131
+ text-transform: uppercase;
132
+ }
133
+
134
+ input[type=number] {
135
+ appearance: textfield;
136
+ text-align: right;
137
+
138
+ &::-webkit-inner-spin-button {
139
+ appearance: none;
140
+ }
141
+ }
142
+ }
143
+ }
144
+
145
+ @mixin iui-color-picker-section-label {
110
146
  margin-bottom: $iui-baseline * 0.5;
111
147
  overflow: hidden;
112
148
  text-overflow: ellipsis;
149
+ white-space: nowrap;
113
150
  flex-shrink: 0;
114
151
  }
115
152
 
116
153
  @mixin iui-color-selection-wrapper {
117
154
  display: flex;
155
+ flex-direction: column;
118
156
  }
119
157
 
120
158
  @mixin iui-color-field {
121
159
  position: relative;
122
160
  cursor: crosshair;
123
- width: $iui-color-field-size;
124
- height: $iui-color-field-size;
125
-
161
+ width: 100%;
162
+ min-width: $iui-color-picker-content-width;
163
+ height: $iui-baseline * 22;
126
164
  @include themed {
127
165
  background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
128
- linear-gradient(90deg, rgb(255, 255, 255), var(--color));
166
+ linear-gradient(90deg, rgb(255, 255, 255), var(--hue));
129
167
  }
130
168
  }
131
169
 
132
- @mixin iui-color-slider {
133
- margin-left: $iui-sm;
134
- margin-right: $iui-s;
135
- position: relative;
136
- width: $iui-s;
137
- border-radius: $iui-border-radius;
138
-
139
- @include themed {
140
- background: linear-gradient(
170
+ @mixin iui-hue-slider {
171
+ .iui-slider-rail {
172
+ height: $iui-s;
173
+ @include themed {
174
+ background: linear-gradient(to right,
141
175
  $iui-color-system-red 0%,
142
176
  $iui-color-system-yellow 17%,
143
177
  rgb(0, 255, 0) 33%,
@@ -146,6 +180,39 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
146
180
  $iui-color-system-magenta 83%,
147
181
  $iui-color-system-red 100%
148
182
  );
183
+ }
184
+ }
185
+
186
+ .iui-slider-thumb {
187
+ top: 7px;
188
+ }
189
+ }
190
+
191
+ @mixin iui-opacity-slider {
192
+ .iui-slider-rail {
193
+ height: $iui-s;
194
+ @include themed {
195
+ // Checkered transparency background pattern.
196
+ background-image: repeating-linear-gradient(45deg, t(iui-color-background-3) 25%, transparent 25%, transparent 75%, t(iui-color-background-3) 75%, t(iui-color-background-3)), repeating-linear-gradient(45deg, t(iui-color-background-3) 25%, t(iui-color-background-5) 25%, t(iui-color-background-5) 75%, t(iui-color-background-3) 75%, t(iui-color-background-3));
197
+ background-position: 0 0, ($iui-s * 0.5) ($iui-s * 0.5);
198
+ background-size: $iui-s $iui-s;
199
+ }
200
+
201
+ &::before {
202
+ display: block;
203
+ content: '';
204
+ width: 100%;
205
+ height: 100%;
206
+ background-image:
207
+ linear-gradient(to right,
208
+ transparent 0%,
209
+ var(--selected-color) 100%
210
+ );
211
+ }
212
+ }
213
+
214
+ .iui-slider-thumb {
215
+ top: 7px;
149
216
  }
150
217
  }
151
218
 
@@ -157,25 +224,13 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
157
224
  height: $iui-m;
158
225
  border-radius: 50%;
159
226
  transform: translate(-$iui-s, -$iui-s);
160
- cursor: grab;
227
+ cursor: crosshair;
161
228
  @include themed {
162
229
  box-shadow: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-1)) 0 0 0 $iui-xxs - 1,
163
230
  inset 0 0 0 $iui-xxs - 1 rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-6));
164
231
  background-color: var(--selected-color);
165
232
  }
166
233
 
167
- &:active {
168
- cursor: grabbing;
169
- }
170
-
171
- &.iui-white {
172
- transform: translate(-4px, -9px);
173
- @include themed {
174
- box-shadow: $iui-elevation-2;
175
- background-color: #FFF;
176
- }
177
- }
178
-
179
234
  &:hover {
180
235
  @include themed {
181
236
  box-shadow: $iui-hover-box-shadow;