Skip to content

Commit b958f62

Browse files
joselriojoselrio
committed
Update _virtualselect.scss
1 parent 582000c commit b958f62

File tree

1 file changed

+50
-52
lines changed

1 file changed

+50
-52
lines changed

‎src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* VirtualSelect Library Core Styles */
2-
31
// Set the transform values to checkBox Checked Icon
42
@mixin CheckBoxCheckIconTransform {
53
transform: rotate(45deg) translate(3px, -3px);
@@ -16,10 +14,10 @@
1614

1715
&.pop-comp-active {
1816
.vscomp-toggle-button {
19-
border-color: var(--color-primary);
17+
border-color: get-border-color('primary');
2018

2119
&:after {
22-
color: var(--color-primary);
20+
color: get-text-color('primary');
2321
transform: rotate(180deg) translateY(50%);
2422
}
2523
}
@@ -52,20 +50,20 @@
5250
}
5351

5452
&-clear-button:hover {
55-
background-color: var(--color-neutral-4);
53+
background-color: get-background-color('neutral-4');
5654

5755
.vscomp-clear-icon {
5856
&::after,
5957
&::before {
6058
background-color: transparent;
61-
color: var(--color-neutral-7);
59+
color: get-text-color('neutral-7');
6260
}
6361
}
6462
}
6563

6664
&-search-clear:hover:after {
6765
background-color: transparent;
68-
color: var(--color-neutral-7);
66+
color: get-text-color('neutral-7');
6967
}
7068
}
7169

@@ -78,7 +76,7 @@
7876
}
7977

8078
.checkbox-icon {
81-
border-color: var(--color-neutral-6);
79+
border-color: get-border-color('neutral-6');
8280
}
8381
}
8482

@@ -96,7 +94,7 @@
9694

9795
&:not(.has-value) {
9896
.vscomp-value {
99-
color: var(--color-neutral-7);
97+
color: get-text-color('neutral-7');
10098
opacity: 1;
10199
}
102100
}
@@ -113,11 +111,11 @@
113111
.vscomp-option {
114112
&.selected {
115113
.checkbox-icon {
116-
background-color: var(--color-primary);
117-
border-color: var(--color-primary);
114+
background-color: get-background-color('primary');
115+
border-color: get-border-color('primary');
118116

119117
&:after {
120-
border-color: var(--color-neutral-0);
118+
border-color: get-border-color('neutral-0');
121119
border-left-color: transparent;
122120
border-top-color: transparent;
123121
height: 80%;
@@ -149,9 +147,9 @@
149147
}
150148

151149
.vscomp-value-tag {
152-
background-color: var(--color-neutral-3);
150+
background-color: get-background-color('neutral-3');
153151
border: var(--border-size-none);
154-
color: var(--color-neutral-7);
152+
color: get-text-color('neutral-7');
155153
font-size: var(--font-size-xs);
156154
font-weight: var(--font-semi-bold);
157155
padding: 6px 35px 6px 10px;
@@ -162,7 +160,7 @@
162160
}
163161

164162
.vscomp-value-tag-clear-button {
165-
background-color: var(--color-neutral-7);
163+
background-color: get-background-color('neutral-7');
166164
border-radius: 100%;
167165
height: 14px;
168166
position: absolute;
@@ -178,7 +176,7 @@
178176

179177
&:before,
180178
&:after {
181-
color: var(--color-neutral-4);
179+
color: get-text-color('neutral-4');
182180
}
183181
}
184182
}
@@ -196,7 +194,7 @@
196194
border: none;
197195

198196
&-container {
199-
background-color: var(--overlay-background);
197+
background-color: var(--background-color-overlay, --overlay-background);
200198
// The !important is needed in order to overwrite the inline style added by library!
201199
z-index: var(--layer-global-elevated) !important;
202200
}
@@ -301,9 +299,9 @@
301299

302300
// Checkbox
303301
.checkbox-icon {
304-
background-color: var(--color-neutral-0);
302+
background-color: get-background-color('neutral-0');
305303
border-radius: var(--border-radius-soft);
306-
border: var(--border-size-s) solid var(--color-neutral-5);
304+
border: var(--border-size-s) solid get-border-color('neutral-5');
307305
height: 16px;
308306
margin-right: var(--space-s);
309307
overflow: visible;
@@ -312,19 +310,19 @@
312310

313311
&:after {
314312
backface-visibility: hidden;
315-
border-color: transparent;
313+
border-color: get-border-color('transparent');
316314
height: 85%;
317315
opacity: 0;
318316
transition: opacity 0.25s ease;
319317
width: 40%;
320318
}
321319

322320
&.checked {
323-
background-color: var(--color-primary);
324-
border-color: var(--color-primary);
321+
background-color: get-background-color('primary');
322+
border-color: get-border-color('primary');
325323

326324
&:after {
327-
border-color: var(--color-neutral-0);
325+
border-color: get-border-color('neutral-0');
328326
border-left-color: transparent;
329327
border-top-color: transparent;
330328
height: 80%;
@@ -342,10 +340,10 @@
342340
--vscomp-toogle-btn-height: 40px;
343341
--vscomp-toogle-btn-mobile-height: 48px;
344342

345-
background-color: var(--color-neutral-0);
343+
background-color: get-background-color('neutral-0');
346344
border-radius: var(--border-radius-soft);
347-
border: var(--border-size-s) solid var(--color-neutral-5);
348-
color: var(--color-neutral-9);
345+
border: var(--border-size-s) solid get-border-color('neutral-5');
346+
color: get-text-color('neutral-9');
349347
cursor: pointer;
350348
display: inline-flex;
351349
height: var(--vscomp-toogle-btn-height);
@@ -361,7 +359,7 @@
361359

362360
// Create new arrow for all dropdown types
363361
&:after {
364-
color: var(--color-neutral-7);
362+
color: get-text-color('neutral-7');
365363
content: '';
366364
font: normal normal normal var(--vscomp-toogle-btn-arrow-size) / 1 FontAwesome;
367365
position: absolute;
@@ -373,7 +371,7 @@
373371
}
374372

375373
&:hover {
376-
border-color: var(--color-neutral-6);
374+
border-color: get-border-color('neutral-6');
377375
}
378376
}
379377

@@ -394,10 +392,10 @@
394392

395393
// Wrapper options container
396394
.vscomp-dropbox {
397-
--border-color: var(--color-neutral-5);
395+
--border-color: #{$get-border-color('neutral-5')};
398396
--border-size: var(--border-size-s);
399397

400-
background-color: var(--color-neutral-0);
398+
background-color: get-background-color('neutral-0');
401399
border-radius: var(--border-radius-soft);
402400
/* use inner shadow to workaround the border issue that causes content to be blurry */
403401
box-shadow: inset var(--border-color) 0 0 0 var(--border-size);
@@ -413,13 +411,13 @@
413411

414412
// Options container input search wrapper
415413
.vscomp-search-container {
416-
border-bottom: var(--border-size-s) solid var(--color-neutral-5);
414+
border-bottom: var(--border-size-s) solid get-border-color('neutral-5');
417415
padding: var(--space-none) var(--space-s) var(--space-none) var(--space-xl);
418416
position: relative;
419417

420418
&:before {
421419
align-items: center;
422-
color: var(--color-neutral-7);
420+
color: get-text-color('neutral-7');
423421
content: '';
424422
display: flex;
425423
font: normal normal normal 14px/1 FontAwesome;
@@ -431,7 +429,7 @@
431429

432430
.vscomp-search-clear {
433431
border-radius: var(--border-radius-circle);
434-
color: var(--color-neutral-7);
432+
color: get-text-color('neutral-7');
435433
display: table;
436434
font-size: var(--font-size-h5);
437435
font-weight: var(--font-semi-bold);
@@ -452,7 +450,7 @@
452450
}
453451

454452
&:hover {
455-
background-color: var(--color-neutral-4);
453+
background-color: get-background-color('neutral-4');
456454
}
457455
}
458456
}
@@ -462,7 +460,7 @@
462460
font-size: var(--font-size-s);
463461

464462
&::placeholder {
465-
color: var(--color-neutral-9);
463+
color: get-text-color('neutral-9');
466464
opacity: 0.5;
467465
}
468466
}
@@ -476,17 +474,17 @@
476474
}
477475

478476
&::-webkit-scrollbar-track {
479-
background: var(--color-neutral-4);
477+
background: get-background-color('neutral-4');
480478
}
481479

482480
&::-webkit-scrollbar-thumb {
483-
background-color: var(--color-neutral-6);
481+
background-color: get-background-color('neutral-6');
484482
}
485483
}
486484

487485
// Option Item text
488486
.vscomp-option-text {
489-
color: var(--color-neutral-9);
487+
color: get-text-color('neutral-9');
490488
display: inline-block;
491489
font-size: var(--font-size-s);
492490

@@ -500,16 +498,16 @@
500498
// Option Item
501499
.vscomp-option {
502500
align-content: center;
503-
background-color: var(--color-neutral-0);
501+
background-color: get-background-color('neutral-0');
504502
transition: background-color 0.25s ease;
505503

506504
&.focused,
507505
&.selected {
508-
background-color: var(--color-neutral-3);
506+
background-color: get-background-color('neutral-3');
509507
}
510508

511509
&.focused {
512-
background-color: var(--color-neutral-2);
510+
background-color: get-background-color('neutral-2');
513511
}
514512

515513
// Style dropdown group title
@@ -519,7 +517,7 @@
519517
// Style group title in single select dropdown
520518
// this selector is necessary so that the style is not applied when the option has a checkbox
521519
&:only-child {
522-
color: var(--color-neutral-7);
520+
color: get-text-color('neutral-7');
523521
font-size: var(--font-size-label);
524522
font-weight: var(--font-semi-bold);
525523
text-transform: uppercase;
@@ -530,15 +528,15 @@
530528

531529
// Option Item description
532530
.vscomp-option-description {
533-
color: var(--color-neutral-7);
531+
color: get-text-color('neutral-7');
534532
font-size: var(--font-size-label);
535533
margin-top: 1px;
536534
}
537535

538536
// When using the extensibility property allowNewOption
539537
.vscomp-new-option-icon {
540538
&::before {
541-
border: 15px solid var(--color-primary);
539+
border: 15px solid get-border-color('primary');
542540
border-bottom-color: rgba(0, 0, 0, 0);
543541
border-left-color: rgba(0, 0, 0, 0);
544542
}
@@ -548,11 +546,11 @@
548546
///
549547
.has-accessible-features {
550548
.vscomp-toggle-button {
551-
border-color: var(--color-neutral-7);
552-
color: var(--color-neutral-10);
549+
border-color: get-border-color('neutral-7');
550+
color: get-text-color('neutral-10');
553551

554552
&:after {
555-
color: var(--color-neutral-9);
553+
color: get-text-color('neutral-9');
556554
}
557555
}
558556

@@ -575,14 +573,14 @@
575573
.vscomp-wrapper {
576574
&.show-value-as-tags {
577575
.vscomp-value-tag {
578-
border: var(--border-size-s) solid var(--color-neutral-7);
576+
border: var(--border-size-s) solid get-border-color('neutral-7');
579577
}
580578
}
581579

582580
.vscomp-option {
583581
&.focused {
584582
&:before {
585-
border: var(--border-size-m) solid var(--color-neutral-7);
583+
border: var(--border-size-m) solid get-border-color('neutral-7');
586584
bottom: 0;
587585
content: '';
588586
display: block;
@@ -606,7 +604,7 @@
606604

607605
.pop-comp-content,
608606
.vscomp-dropbox-container {
609-
border: var(--border-size-m) solid var(--color-neutral-7);
607+
border: var(--border-size-m) solid get-border-color('neutral-7');
610608
}
611609

612610
.vscomp-options-container {
@@ -615,11 +613,11 @@
615613
}
616614

617615
&::-webkit-scrollbar-track {
618-
border: var(--border-size-l) solid var(--color-neutral-4);
616+
border: var(--border-size-l) solid get-border-color('neutral-4');
619617
}
620618

621619
&::-webkit-scrollbar-thumb {
622-
border: var(--border-size-s) solid var(--color-neutral-4);
620+
border: var(--border-size-s) solid get-border-color('neutral-4');
623621
}
624622
}
625623
}

0 commit comments

Comments
 (0)