mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-26 04:34:04 +03:00
Jeff Sagal
134 lines
3.7 KiB
CSS
134 lines
3.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
@apply scroll-smooth;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Satoshi';
|
|
src:
|
|
url('~/assets/fonts/Satoshi-Light.woff2') format('woff2'),
|
|
url('~/assets/fonts/Satoshi-Light.woff') format('woff'),
|
|
url('~/assets/fonts/Satoshi-Light.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-display: swap;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Satoshi';
|
|
src:
|
|
url('~/assets/fonts/Satoshi-Regular.woff2') format('woff2'),
|
|
url('~/assets/fonts/Satoshi-Regular.woff') format('woff'),
|
|
url('~/assets/fonts/Satoshi-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Satoshi';
|
|
src:
|
|
url('~/assets/fonts/Satoshi-Medium.woff2') format('woff2'),
|
|
url('~/assets/fonts/Satoshi-Medium.woff') format('woff'),
|
|
url('~/assets/fonts/Satoshi-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Satoshi';
|
|
src:
|
|
url('~/assets/fonts/Satoshi-Bold.woff2') format('woff2'),
|
|
url('~/assets/fonts/Satoshi-Bold.woff') format('woff'),
|
|
url('~/assets/fonts/Satoshi-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Satoshi';
|
|
src:
|
|
url('~/assets/fonts/Satoshi-Black.woff2') format('woff2'),
|
|
url('~/assets/fonts/Satoshi-Black.woff') format('woff'),
|
|
url('~/assets/fonts/Satoshi-Black.ttf') format('truetype');
|
|
font-weight: 900;
|
|
font-display: swap;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.dark .v-select {
|
|
--vs-colors--lightest: rgba(60, 60, 60, 0.26);
|
|
--vs-colors--light: rgba(60, 60, 60, 0.5);
|
|
--vs-colors--dark: #333;
|
|
--vs-colors--darkest: rgba(0, 0, 0, 0.15);
|
|
|
|
/* Search Input */
|
|
--vs-search-input-color: inherit;
|
|
--vs-search-input-placeholder-color: inherit;
|
|
|
|
/* Font */
|
|
--vs-font-size: 1rem;
|
|
--vs-line-height: 1.4;
|
|
|
|
/* Disabled State */
|
|
--vs-state-disabled-bg: rgb(248, 248, 248);
|
|
--vs-state-disabled-color: var(--vs-colors--light);
|
|
--vs-state-disabled-controls-color: var(--vs-colors--light);
|
|
--vs-state-disabled-cursor: not-allowed;
|
|
|
|
/* Borders */
|
|
--vs-border-color: #24292e;
|
|
--vs-border-width: 1px;
|
|
--vs-border-style: solid;
|
|
--vs-border-radius: 4px;
|
|
|
|
/* Actions: house the component controls */
|
|
--vs-actions-padding: 4px 6px 0 3px;
|
|
|
|
/* Component Controls: Clear, Open Indicator */
|
|
--vs-controls-color: #c9c2c2;
|
|
--vs-controls-size: 1;
|
|
--vs-controls--deselect-text-shadow: 0 1px 0 #fff;
|
|
|
|
/* Selected */
|
|
--vs-selected-bg: #f0f0f0;
|
|
--vs-selected-color: #fff;
|
|
--vs-selected-border-color: var(--vs-border-color);
|
|
--vs-selected-border-style: var(--vs-border-style);
|
|
--vs-selected-border-width: var(--vs-border-width);
|
|
|
|
/* Dropdown */
|
|
--vs-dropdown-bg: #343434;
|
|
--vs-dropdown-color: inherit;
|
|
--vs-dropdown-z-index: 1000;
|
|
--vs-dropdown-min-width: 160px;
|
|
--vs-dropdown-max-height: 350px;
|
|
--vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
|
|
|
|
/* Options */
|
|
--vs-dropdown-option-bg: #000;
|
|
--vs-dropdown-option-color: #fff;
|
|
--vs-dropdown-option-padding: 3px 20px;
|
|
|
|
/* Active State */
|
|
--vs-dropdown-option--active-bg: #5897fb;
|
|
--vs-dropdown-option--active-color: #fff;
|
|
|
|
/* Deselect State */
|
|
--vs-dropdown-option--deselect-bg: #fb5858;
|
|
--vs-dropdown-option--deselect-color: #fff;
|
|
|
|
/* Transitions */
|
|
--vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
|
|
--vs-transition-duration: 150ms;
|
|
}
|
|
}
|