Skip to content

Commit 750986f

Browse files
TotomIncTotomInc
committed
feat(docs): update styling docs
1 parent b0b51b7 commit 750986f

File tree

1 file changed

+73
-36
lines changed

1 file changed

+73
-36
lines changed

‎docs/styling.md‎

Lines changed: 73 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,77 +4,95 @@ title: 'Styling'
44

55
# Styling
66

7-
Vue 3 Select Component provides 2 types of customization available in the component.
7+
Vue 3 Select Component provides multiple types of customization.
88

99
::: tip
10-
The default component styling is already included with the VueSelect component, you don't need to import any CSS file to make it work.
10+
The default component styling is already included and bundled with the `<VueSelect />` component.
11+
You don't need to import any other CSS file to make it work, by default.
1112
:::
1213

1314
## CSS variables
1415

15-
CSS variables is the easiest way to customize the component style but provides less flexibility over your design. When importing the component, you will notice that CSS variables are injected into the `:root` scope and are prefixed with `--vs-select-[...]`.
16+
Using CSS variables, it is possible to customize the component style easily _but_ this method provides less flexibility over your design. When importing the component, you will notice that CSS variables are injected into the `:root` scope and are prefixed with `--vs-[...]`.
1617

17-
For a complete list of CSS variables, we recommend to take a look at the source-code ([`/src/Select.vue`](https://github.com/TotomInc/vue3-select-component/blob/master/src/Select.vue)) or look at your DevTools when using the component _(open DevTools => `Elements` tab => pick `<html />` node => view all CSS variables inside the `:root` scope)_.
18+
For a complete list of CSS variables, we recommend to take a look at the source-code ([`/src/Select.vue`](https://github.com/TotomInc/vue3-select-component/blob/master/src/Select.vue)) or look at your DevTools _(open DevTools => `Elements` tab => pick `<html />` node => view all CSS variables inside the `:root` scope)_.
1819

19-
List of available CSS variables (pulled from the demo):
20+
### List of CSS variables
2021

2122
```css
2223
:root {
23-
--vs-input-bg: #fff;
24-
--vs-input-outline: #3b82f6;
25-
--vs-input-placeholder-color: #52525b;
26-
27-
--vs-padding: 0.25rem 0.5rem;
24+
--vs-width: 100%;
25+
--vs-min-height: 38px;
26+
--vs-padding: 4px 8px;
2827
--vs-border: 1px solid #e4e4e7;
2928
--vs-border-radius: 4px;
3029
--vs-font-size: 16px;
3130
--vs-font-weight: 400;
3231
--vs-font-family: inherit;
3332
--vs-text-color: #18181b;
3433
--vs-line-height: 1.5;
34+
--vs-placeholder-color: #52525b;
35+
--vs-background-color: #fff;
36+
--vs-disabled-background-color: #f4f4f5;
37+
--vs-outline-width: 1px;
38+
--vs-outline-color: #3b82f6;
3539

3640
--vs-menu-offset-top: 8px;
3741
--vs-menu-height: 200px;
38-
--vs-menu-padding: 0;
39-
--vs-menu-border: 1px solid #e4e4e7;
40-
--vs-menu-bg: #fff;
41-
--vs-menu-box-shadow: none;
42+
--vs-menu-border: var(--vs-border);
43+
--vs-menu-background-color: var(--vs-background-color);
44+
--vs-menu-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
4245
--vs-menu-z-index: 2;
4346

47+
--vs-option-width: 100%;
4448
--vs-option-padding: 8px 12px;
49+
--vs-option-cursor: pointer;
4550
--vs-option-font-size: var(--vs-font-size);
4651
--vs-option-font-weight: var(--vs-font-weight);
52+
--vs-option-text-align: -webkit-auto;
4753
--vs-option-text-color: var(--vs-text-color);
48-
--vs-option-bg: var(--vs-menu-bg);
49-
--vs-option-hover-color: #dbeafe;
50-
--vs-option-focused-color: var(--vs-option-hover-color);
51-
--vs-option-selected-color: #93c5fd;
52-
--vs-option-disabled-color: #f4f4f5;
54+
--vs-option-hover-text-color: var(--vs-text-color);
55+
--vs-option-focused-text-color: var(--vs-text-color);
56+
--vs-option-selected-text-color: var(--vs-text-color);
5357
--vs-option-disabled-text-color: #52525b;
54-
55-
--vs-multi-value-gap: 0px;
56-
--vs-multi-value-padding: 4px;
57-
--vs-multi-value-margin: 4px 0px 4px 6px;
58-
--vs-multi-value-font-size: 14px;
59-
--vs-multi-value-font-weight: 400;
60-
--vs-multi-value-line-height: 1;
61-
--vs-multi-value-text-color: #3f3f46;
62-
--vs-multi-value-bg: #f4f4f5;
58+
--vs-option-background-color: var(--vs-menu-background);
59+
--vs-option-hover-background-color: #dbeafe;
60+
--vs-option-focused-background-color: var(--vs-option-hover-background-color);
61+
--vs-option-selected-background-color: #93c5fd;
62+
--vs-option-disabled-background-color: #f4f4f5;
63+
--vs-option-opacity-menu-open: 0.4;
64+
65+
--vs-multi-value-margin: 2px;
66+
--vs-multi-value-border: 0px;
67+
--vs-multi-value-border-radius: 2px;
68+
--vs-multi-value-background-color: #f4f4f5;
69+
70+
--vs-multi-value-label-padding: 4px 4px 4px 8px;
71+
--vs-multi-value-label-font-size: 12px;
72+
--vs-multi-value-label-font-weight: 400;
73+
--vs-multi-value-label-line-height: 1;
74+
--vs-multi-value-label-text-color: #3f3f46;
75+
76+
--vs-multi-value-delete-padding: 0 3px;
77+
--vs-multi-value-delete-hover-background-color: #FF6467;
6378
--vs-multi-value-xmark-size: 16px;
64-
--vs-multi-value-xmark-color: var(--vs-multi-value-text-color);
79+
--vs-multi-value-xmark-cursor: pointer;
80+
--vs-multi-value-xmark-color: var(--vs-multi-value-label-text-color);
81+
--vs-multi-value-xmark-hover-color: #fff;
6582

66-
--vs-indicators-gap: 4px;
67-
--vs-icon-size: 20px;
68-
--vs-icon-color: var(--vs-text-color);
83+
--vs-indicators-gap: 0px;
84+
--vs-indicator-icon-size: 20px;
85+
--vs-indicator-icon-color: var(--vs-text-color);
86+
--vs-indicator-icon-cursor: pointer;
6987

7088
--vs-spinner-color: var(--vs-text-color);
71-
--vs-spinner-size: 20px;
72-
73-
--vs-dropdown-transition: transform 0.25s ease-out;
89+
--vs-spinner-size: 16px;
7490
}
7591
```
7692

77-
Inside the SFC that is using the component, you must add a class to the component and apply the CSS variables to that class.
93+
### Editing CSS variables
94+
95+
Inside the SFC (`.vue`) that is using the `<VueSelect />` component, you can add a class to the component and edit the CSS variables to that class.
7896

7997
```vue
8098
<template>
@@ -89,11 +107,30 @@ Inside the SFC that is using the component, you must add a class to the componen
89107
</style>
90108
```
91109

110+
You can also use the `:deep` selector to apply the CSS variables to the component's children if you prefer to no add a custom class:
111+
112+
```vue
113+
<template>
114+
<VueSelect />
115+
</template>
116+
117+
<style lang scoped>
118+
:deep(.vue-select) {
119+
--vs-border-radius: 12px;
120+
--vs-text-color: #334155;
121+
}
122+
</style>
123+
```
124+
92125
## Scoped styling inside SFC
93126

94127
You can apply any custom styling using [the `:deep` selector](https://vuejs.org/api/sfc-css-features.html#deep-selectors) inside a `<style scoped>`.
95128

96129
```vue
130+
<template>
131+
<VueSelect />
132+
</template>
133+
97134
<style scoped>
98135
:deep(.vue-select) {
99136
width: 320px;

0 commit comments

Comments
 (0)