Skip to content

Commit 6a37fa4

Browse files
TotomIncTotomInc
committed
feat(select): rework CSS variables
1 parent 4f1690e commit 6a37fa4

File tree

4 files changed

+109
-95
lines changed

4 files changed

+109
-95
lines changed

Diff for: ‎src/Indicators.vue

+8-9
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@ defineExpose({ container, clearButton, dropdownButton });
7676
padding: 0;
7777
margin: 0;
7878
border: 0;
79-
width: var(--vs-icon-size);
80-
height: var(--vs-icon-size);
81-
color: var(--vs-icon-color);
79+
width: var(--vs-indicator-icon-size);
80+
height: var(--vs-indicator-icon-size);
81+
color: var(--vs-indicator-icon-colo);
8282
background: none;
8383
outline: none;
84-
cursor: pointer;
84+
cursor: var(--vs-indicator-icon-cursor);
8585
}
8686
8787
.dropdown-icon {
@@ -90,12 +90,11 @@ defineExpose({ container, clearButton, dropdownButton });
9090
padding: 0;
9191
margin: 0;
9292
border: 0;
93-
width: var(--vs-icon-size);
94-
height: var(--vs-icon-size);
95-
color: var(--vs-icon-color);
93+
width: var(--vs-indicator-icon-size);
94+
height: var(--vs-indicator-icon-size);
95+
color: var(vs-indicator-icon-colo);
9696
background: none;
9797
outline: none;
98-
cursor: pointer;
99-
transition: var(--vs-dropdown-transition);
98+
cursor: var(--vs-indicator-icon-cursor);
10099
}
101100
</style>

Diff for: ‎src/MenuOption.vue

+40-1
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,10 @@ watch(
4444
<template>
4545
<div
4646
ref="option"
47+
class="menu-option"
48+
:class="{ focused: isFocused, selected: isSelected, disabled: isDisabled }"
4749
tabindex="-1"
4850
role="option"
49-
:class="{ focused: isFocused, selected: isSelected, disabled: isDisabled }"
5051
:aria-disabled="isDisabled"
5152
:aria-selected="isSelected"
5253
@click="emit('select')"
@@ -55,3 +56,41 @@ watch(
5556
<slot />
5657
</div>
5758
</template>
59+
60+
<style lang="css" scoped>
61+
.menu-option {
62+
display: flex;
63+
width: var(--vs-option-width);
64+
border: 0;
65+
margin: 0;
66+
padding: var(--vs-option-padding);
67+
font-size: var(--vs-option-font-size);
68+
font-weight: var(--vs-option-font-weight);
69+
font-family: var(--vs-font-family);
70+
color: var(--vs-option-text-color);
71+
white-space: break-spaces;
72+
background-color: var(--vs-option-background-color);
73+
text-align: var(--vs-option-text-align);
74+
cursor: var(--vs-option-cursor);
75+
}
76+
77+
.menu-option:hover {
78+
background-color: var(--vs-option-hover-background-color);
79+
color: var(--vs-option-hover-text-color);
80+
}
81+
82+
.menu-option.focused {
83+
background-color: var(--vs-option-focused-background-color);
84+
color: var(--vs-option-focused-text-color);
85+
}
86+
87+
.menu-option.selected {
88+
background-color: var(--vs-option-selected-background-color);
89+
color: var(--vs-option-selected-text-color);
90+
}
91+
92+
.menu-option.disabled {
93+
background-color: var(--vs-option-disabled-background-color);
94+
color: var(--vs-option-disabled-text-color);
95+
}
96+
</style>

Diff for: ‎src/MultiValue.vue

+19-8
Original file line numberDiff line numberDiff line change
@@ -33,36 +33,47 @@ const emit = defineEmits<{
3333
.multi-value {
3434
display: flex;
3535
min-width: 0px;
36-
margin: 2px;
36+
margin: var(--vs-multi-value-margin);
3737
border-radius: var(--vs-multi-value-border-radius);
38-
background: var(--vs-multi-value-bg);
38+
background: var(--vs-multi-value-background-color);
3939
}
4040
4141
.multi-value-label {
42+
padding: var(--vs-multi-value-label-padding);
43+
border: var(--vs-multi-value-border);
4244
border-radius: var(--vs-multi-value-border-radius);
43-
padding: 3px 3px 3px 6px;
4445
overflow: hidden;
4546
text-overflow: ellipsis;
4647
white-space: nowrap;
47-
font-size: 85%;
48-
color: var(--vs-multi-value-text-color);
48+
font-size: var(--vs-multi-value-label-font-size);
49+
font-weight: var(--vs-multi-value-label-font-weight);
50+
line-height: var(--vs-multi-value-label-line-height);
51+
color: var(--vs-multi-value-label-text-color);
4952
}
5053
5154
.multi-value-remove {
5255
border-radius: var(--vs-multi-value-border-radius);
5356
appearance: none;
5457
display: flex;
5558
align-items: center;
56-
padding: 0 4px;
59+
padding: var(--vs-multi-value-delete-padding);
5760
border: none;
5861
outline: none;
59-
cursor: pointer;
60-
background-color: var(--vs-multi-value-bg);
62+
cursor: var(--vs-multi-value-xmark-cursor);
63+
background-color: var(--vs-multi-value-background-color);
64+
}
65+
66+
.multi-value-remove:hover {
67+
background-color: var(--vs-multi-value-delete-hover-background-color);
6168
}
6269
6370
.multi-value-remove svg {
6471
width: var(--vs-multi-value-xmark-size);
6572
height: var(--vs-multi-value-xmark-size);
6673
fill: var(--vs-multi-value-xmark-color);
6774
}
75+
76+
.multi-value-remove:hover svg {
77+
fill: var(--vs-multi-value-xmark-hover-color);
78+
}
6879
</style>

Diff for: ‎src/Select.vue

+42-77
Original file line numberDiff line numberDiff line change
@@ -465,8 +465,6 @@ onBeforeUnmount(() => {
465465
v-for="(option, i) in availableOptions"
466466
:key="i"
467467
type="button"
468-
class="menu-option"
469-
:class="{ focused: focusedOption === i, selected: option.value === selected }"
470468
:menu="menu"
471469
:index="i"
472470
:is-focused="focusedOption === i"
@@ -504,8 +502,9 @@ onBeforeUnmount(() => {
504502

505503
<style>
506504
:root {
505+
--vs-width: 100%;
507506
--vs-min-height: 38px;
508-
--vs-padding: 2px 8px;
507+
--vs-padding: 4px 8px;
509508
--vs-border: 1px solid #e4e4e7;
510509
--vs-border-radius: 4px;
511510
--vs-font-size: 16px;
@@ -516,69 +515,75 @@ onBeforeUnmount(() => {
516515
--vs-placeholder-color: #52525b;
517516
--vs-background-color: #fff;
518517
--vs-disabled-background-color: #f4f4f5;
519-
--vs-outline: #3b82f6;
518+
--vs-outline-width: 1px;
519+
--vs-outline-color: #3b82f6;
520520
521521
--vs-menu-offset-top: 8px;
522522
--vs-menu-height: 200px;
523-
--vs-menu-padding: 0;
524-
--vs-menu-border: 1px solid #e4e4e7;
525-
--vs-menu-bg: #fff;
526-
--vs-menu-box-shadow: none;
523+
--vs-menu-border: var(--vs-border);
524+
--vs-menu-background-color: var(--vs-background-color);
525+
--vs-menu-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
527526
--vs-menu-z-index: 2;
528527
528+
--vs-option-width: 100%;
529529
--vs-option-padding: 8px 12px;
530+
--vs-option-cursor: pointer;
530531
--vs-option-font-size: var(--vs-font-size);
531532
--vs-option-font-weight: var(--vs-font-weight);
533+
--vs-option-text-align: -webkit-auto;
532534
--vs-option-text-color: var(--vs-text-color);
533-
--vs-option-bg: var(--vs-menu-bg);
534-
--vs-option-hover-color: #dbeafe;
535-
--vs-option-focused-color: var(--vs-option-hover-color);
536-
--vs-option-selected-color: #93c5fd;
537-
--vs-option-disabled-color: #f4f4f5;
535+
--vs-option-hover-text-color: var(--vs-text-color);
536+
--vs-option-focused-text-color: var(--vs-text-color);
537+
--vs-option-selected-text-color: var(--vs-text-color);
538538
--vs-option-disabled-text-color: #52525b;
539+
--vs-option-background-color: var(--vs-menu-background);
540+
--vs-option-hover-background-color: #dbeafe;
541+
--vs-option-focused-background-color: var(--vs-option-hover-background-color);
542+
--vs-option-selected-background-color: #93c5fd;
543+
--vs-option-disabled-background-color: #f4f4f5;
544+
--vs-option-opacity-menu-open: 0.4;
539545
540-
--vs-multi-value-gap: 0px;
541-
--vs-multi-value-padding: 4px;
542546
--vs-multi-value-margin: 2px;
543547
--vs-multi-value-border: 0px;
544548
--vs-multi-value-border-radius: 2px;
545-
--vs-multi-value-font-size: 14px;
546-
--vs-multi-value-font-weight: 400;
547-
--vs-multi-value-line-height: 1;
548-
--vs-multi-value-text-color: #3f3f46;
549-
--vs-multi-value-bg: #f4f4f5;
549+
--vs-multi-value-background-color: #f4f4f5;
550+
551+
--vs-multi-value-label-padding: 4px 4px 4px 8px;
552+
--vs-multi-value-label-font-size: 12px;
553+
--vs-multi-value-label-font-weight: 400;
554+
--vs-multi-value-label-line-height: 1;
555+
--vs-multi-value-label-text-color: #3f3f46;
556+
557+
--vs-multi-value-delete-padding: 0 3px;
558+
--vs-multi-value-delete-hover-background-color: #FF6467;
550559
--vs-multi-value-xmark-size: 16px;
551-
--vs-multi-value-xmark-color: var(--vs-multi-value-text-color);
560+
--vs-multi-value-xmark-cursor: pointer;
561+
--vs-multi-value-xmark-color: var(--vs-multi-value-label-text-color);
562+
--vs-multi-value-xmark-hover-color: #fff;
552563
553-
--vs-indicators-gap: 4px;
554-
--vs-icon-size: 20px;
555-
--vs-icon-color: var(--vs-text-color);
564+
--vs-indicators-gap: 0px;
565+
--vs-indicator-icon-size: 20px;
566+
--vs-indicator-icon-color: var(--vs-text-color);
567+
--vs-indicator-icon-cursor: pointer;
556568
557569
--vs-spinner-color: var(--vs-text-color);
558-
--vs-spinner-size: 20px;
559-
560-
--vs-dropdown-transition: transform 0.25s ease-out;
570+
--vs-spinner-size: 16px;
561571
}
562572
</style>
563573

564574
<style lang="scss" scoped>
565575
.vue-select {
566576
position: relative;
567577
box-sizing: border-box;
568-
width: 100%;
578+
width: var(--vs-width);
569579
570580
* {
571581
box-sizing: border-box;
572582
}
573583
574584
&.open {
575585
.single-value {
576-
position: absolute;
577-
opacity: 0.4;
578-
}
579-
580-
.dropdown-icon {
581-
transform: rotate(180deg);
586+
opacity: var(--vs-option-opacity-menu-open);
582587
}
583588
}
584589
@@ -600,8 +605,8 @@ onBeforeUnmount(() => {
600605
background-color: var(--vs-background-color);
601606
602607
&.focused {
603-
box-shadow: 0 0 0 1px var(--vs-outline);
604-
border-color: var(--vs-outline);
608+
box-shadow: 0 0 0 var(--vs-outline-width) var(--vs-outline-color);
609+
border-color: var(--vs-outline-color);
605610
}
606611
607612
&.disabled {
@@ -673,60 +678,20 @@ onBeforeUnmount(() => {
673678
color: var(--vs-text-color);
674679
opacity: 1;
675680
outline: none;
676-
677-
&::placeholder {
678-
color: var(--vs-placeholder-color);
679-
}
680681
}
681682
682683
.menu {
683684
position: absolute;
684-
left: 0;
685-
right: 0;
686-
padding: var(--vs-menu-padding);
687685
margin-top: var(--vs-menu-offset-top);
688686
max-height: var(--vs-menu-height);
689687
overflow-y: auto;
690688
border: var(--vs-menu-border);
691689
border-radius: var(--vs-border-radius);
692690
box-shadow: var(--vs-menu-box-shadow);
693-
background-color: var(--vs-menu-bg);
691+
background-color: var(--vs-menu-background-color);
694692
z-index: var(--vs-menu-z-index);
695693
}
696694
697-
.menu-option {
698-
display: flex;
699-
width: 100%;
700-
border: 0;
701-
margin: 0;
702-
padding: var(--vs-option-padding);
703-
font-size: var(--vs-option-font-size);
704-
font-weight: var(--vs-option-font-weight);
705-
font-family: var(--vs-font-family);
706-
color: var(--vs-option-text-color);
707-
white-space: break-spaces;
708-
background-color: var(--vs-option-bg);
709-
text-align: -webkit-auto;
710-
cursor: pointer;
711-
712-
&:hover {
713-
background-color: var(--vs-option-hover-color);
714-
}
715-
716-
&.focused {
717-
background-color: var(--vs-option-focused-color);
718-
}
719-
720-
&.selected {
721-
background-color: var(--vs-option-selected-color);
722-
}
723-
724-
&.disabled {
725-
background-color: var(--vs-option-disabled-color);
726-
color: var(--vs-option-disabled-text-color);
727-
}
728-
}
729-
730695
.no-results {
731696
padding: var(--vs-option-padding);
732697
font-size: var(--vs-font-size);

0 commit comments

Comments
 (0)