mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-29 05:14:04 +03:00
Jeff Sagal
258 lines
7.1 KiB
CSS
258 lines
7.1 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme {
|
|
--text-*: initial;
|
|
--text-xs: 0.75rem;
|
|
--text-xs--line-height: 1rem;
|
|
--text-sm: 0.875rem;
|
|
--text-sm--line-height: 1.5rem;
|
|
--text-base: 1rem;
|
|
--text-base--line-height: 2rem;
|
|
--text-lg: 1.125rem;
|
|
--text-lg--line-height: 1.75rem;
|
|
--text-xl: 1.25rem;
|
|
--text-xl--line-height: 2rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-2xl--line-height: 2.5rem;
|
|
--text-3xl: 2rem;
|
|
--text-3xl--line-height: 2.5rem;
|
|
--text-4xl: 2.5rem;
|
|
--text-4xl--line-height: 3rem;
|
|
--text-5xl: 3rem;
|
|
--text-5xl--line-height: 3.5rem;
|
|
--text-6xl: 3.75rem;
|
|
--text-6xl--line-height: 1;
|
|
--text-7xl: 4.5rem;
|
|
--text-7xl--line-height: 1;
|
|
--text-8xl: 6rem;
|
|
--text-8xl--line-height: 1;
|
|
--text-9xl: 8rem;
|
|
--text-9xl--line-height: 1;
|
|
|
|
--font-sans: Public Sans, Inter var, Inter, sans-serif;
|
|
--font-display: Satoshi, Public Sans, Inter var, Inter, sans-serif;
|
|
|
|
--container-8xl: 88rem;
|
|
}
|
|
|
|
/*
|
|
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
so we've added these compatibility styles to make sure everything still
|
|
looks the same as it did with Tailwind CSS v3.
|
|
|
|
If we ever want to remove these styles, we need to add an explicit border
|
|
color utility to any element that depends on these defaults.
|
|
*/
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
@utility 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;
|
|
}
|
|
}
|
|
|
|
@utility v-select {
|
|
.dark & {
|
|
--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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|