@vifui/styles 0.4.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +224 -0
- package/base/base.css +154 -0
- package/components/accordion.css +240 -0
- package/components/alert.css +213 -0
- package/components/avatar.css +140 -0
- package/components/badge.css +297 -0
- package/components/breadcrumb.css +250 -0
- package/components/button.css +564 -0
- package/components/card.css +393 -0
- package/components/checkbox.css +293 -0
- package/components/divider.css +282 -0
- package/components/index.css +10 -0
- package/components/spinner.css +594 -0
- package/index.css +24 -0
- package/package.json +99 -0
- package/themes/default.css +335 -0
- package/utilities/index.css +488 -0
package/README.md
ADDED
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
# @vifui/styles
|
|
2
|
+
|
|
3
|
+
> CSS styles and design tokens for VifUI component library
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@vifui/styles)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
This package contains all the CSS styles, design tokens, and themes for VifUI components. It's built with Tailwind CSS 4.0 and uses modern CSS features like CSS variables and `oklch()` colors.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @vifui/styles
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
**Note:** This package is typically installed automatically as a peer dependency of `@vifui/core`.
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
### Import All Styles
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
// In your main.js or main entry file
|
|
26
|
+
import '@vifui/styles'
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Import Specific Components
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
// Import only what you need for better tree-shaking
|
|
33
|
+
import '@vifui/styles/base'
|
|
34
|
+
import '@vifui/styles/components/button'
|
|
35
|
+
import '@vifui/styles/components/card'
|
|
36
|
+
import '@vifui/styles/themes/default'
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Structure
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
@vifui/styles/
|
|
43
|
+
├── base/ # Base styles and resets
|
|
44
|
+
│ └── base.css
|
|
45
|
+
├── components/ # Component-specific styles
|
|
46
|
+
│ ├── accordion.css
|
|
47
|
+
│ ├── alert.css
|
|
48
|
+
│ ├── avatar.css
|
|
49
|
+
│ ├── badge.css
|
|
50
|
+
│ ├── breadcrumb.css
|
|
51
|
+
│ ├── button.css
|
|
52
|
+
│ ├── card.css
|
|
53
|
+
│ ├── checkbox.css
|
|
54
|
+
│ ├── divider.css
|
|
55
|
+
│ └── spinner.css
|
|
56
|
+
├── themes/ # Theme definitions
|
|
57
|
+
│ └── default.css # Light/dark mode themes
|
|
58
|
+
├── utilities/ # Utility classes
|
|
59
|
+
│ └── index.css
|
|
60
|
+
└── index.css # Main entry (imports all)
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Design Tokens
|
|
64
|
+
|
|
65
|
+
### Colors
|
|
66
|
+
|
|
67
|
+
```css
|
|
68
|
+
/* Primary palette (Vuesax authentic) */
|
|
69
|
+
--vuesax-primary: oklch(0.61 0.2 263.6); /* Blue */
|
|
70
|
+
--vuesax-success: oklch(0.77 0.2 145.5); /* Green */
|
|
71
|
+
--vuesax-warning: oklch(0.82 0.18 83.7); /* Yellow */
|
|
72
|
+
--vuesax-danger: oklch(0.62 0.22 10); /* Red */
|
|
73
|
+
|
|
74
|
+
/* Semantic tokens */
|
|
75
|
+
--primary: var(--vuesax-primary);
|
|
76
|
+
--success: var(--vuesax-success);
|
|
77
|
+
--warning: var(--vuesax-warning);
|
|
78
|
+
--danger: var(--vuesax-danger);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Spacing
|
|
82
|
+
|
|
83
|
+
```css
|
|
84
|
+
--spacing: 0.25rem;
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Border Radius
|
|
88
|
+
|
|
89
|
+
```css
|
|
90
|
+
--radius: 0.875rem;
|
|
91
|
+
--radius-sm: 0.5rem;
|
|
92
|
+
--radius-md: 0.875rem;
|
|
93
|
+
--radius-lg: 1rem;
|
|
94
|
+
--radius-xl: 1.25rem;
|
|
95
|
+
--radius-2xl: 1.5rem;
|
|
96
|
+
--radius-full: 9999px;
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Shadows
|
|
100
|
+
|
|
101
|
+
```css
|
|
102
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
103
|
+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
104
|
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
105
|
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
106
|
+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Transitions
|
|
110
|
+
|
|
111
|
+
```css
|
|
112
|
+
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
113
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
114
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
115
|
+
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
116
|
+
|
|
117
|
+
--transition-fast: 150ms;
|
|
118
|
+
--transition-base: 200ms;
|
|
119
|
+
--transition-slow: 300ms;
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Dark Mode
|
|
123
|
+
|
|
124
|
+
Dark mode is automatically supported. The theme switches based on:
|
|
125
|
+
|
|
126
|
+
1. User's system preference (`prefers-color-scheme`)
|
|
127
|
+
2. Manual toggle via `dark` class on root element
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<!-- Enable dark mode -->
|
|
131
|
+
<html class="dark">
|
|
132
|
+
<!-- Your app -->
|
|
133
|
+
</html>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Dark Mode Customization
|
|
137
|
+
|
|
138
|
+
```css
|
|
139
|
+
.dark {
|
|
140
|
+
/* Override dark mode colors */
|
|
141
|
+
--background: oklch(15% 0.005 286);
|
|
142
|
+
--foreground: oklch(99.11% 0 0);
|
|
143
|
+
--primary: oklch(0.65 0.2 263.6);
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## Customization
|
|
148
|
+
|
|
149
|
+
### Override Design Tokens
|
|
150
|
+
|
|
151
|
+
```css
|
|
152
|
+
/* In your global CSS file */
|
|
153
|
+
@import '@vifui/styles';
|
|
154
|
+
|
|
155
|
+
:root {
|
|
156
|
+
/* Customize primary color */
|
|
157
|
+
--primary: oklch(0.7 0.25 270);
|
|
158
|
+
|
|
159
|
+
/* Customize radius */
|
|
160
|
+
--radius: 0.5rem;
|
|
161
|
+
|
|
162
|
+
/* Customize transitions */
|
|
163
|
+
--transition-base: 300ms;
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Create Custom Themes
|
|
168
|
+
|
|
169
|
+
```css
|
|
170
|
+
/* custom-theme.css */
|
|
171
|
+
@import '@vifui/styles/base';
|
|
172
|
+
@import '@vifui/styles/utilities';
|
|
173
|
+
|
|
174
|
+
:root {
|
|
175
|
+
/* Your custom colors */
|
|
176
|
+
--primary: oklch(0.65 0.25 150);
|
|
177
|
+
--success: oklch(0.8 0.2 140);
|
|
178
|
+
/* ... more tokens */
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Import only needed components */
|
|
182
|
+
@import '@vifui/styles/components/button';
|
|
183
|
+
@import '@vifui/styles/components/card';
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Tailwind CSS Integration
|
|
187
|
+
|
|
188
|
+
This package requires Tailwind CSS 4.0+. Make sure your project is configured:
|
|
189
|
+
|
|
190
|
+
```js
|
|
191
|
+
// tailwind.config.js
|
|
192
|
+
export default {
|
|
193
|
+
content: [
|
|
194
|
+
'./index.html',
|
|
195
|
+
'./src/**/*.{vue,js,ts,jsx,tsx}',
|
|
196
|
+
],
|
|
197
|
+
// VifUI uses theme colors automatically
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Browser Support
|
|
202
|
+
|
|
203
|
+
- Chrome (latest)
|
|
204
|
+
- Firefox (latest)
|
|
205
|
+
- Safari (latest)
|
|
206
|
+
- Edge (latest)
|
|
207
|
+
|
|
208
|
+
Modern CSS features used:
|
|
209
|
+
- CSS Variables
|
|
210
|
+
- `oklch()` color space
|
|
211
|
+
- CSS Grid
|
|
212
|
+
- Flexbox
|
|
213
|
+
|
|
214
|
+
## License
|
|
215
|
+
|
|
216
|
+
MIT © [AbdulAzeez Olamide](https://github.com/I-am-abdulazeez)
|
|
217
|
+
|
|
218
|
+
## Related Packages
|
|
219
|
+
|
|
220
|
+
- [@vifui/core](https://www.npmjs.com/package/@vifui/core) - Vue components
|
|
221
|
+
|
|
222
|
+
---
|
|
223
|
+
|
|
224
|
+
Part of the [VifUI](https://github.com/I-am-abdulazeez/vifui) component library
|
package/base/base.css
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base Styles
|
|
3
|
+
* Foundation layout tokens and interactions for VifUI
|
|
4
|
+
* Theme-agnostic variables (no colors)
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
/* ============================================ */
|
|
9
|
+
/* Spacing */
|
|
10
|
+
/* ============================================ */
|
|
11
|
+
|
|
12
|
+
--spacing: 0.25rem;
|
|
13
|
+
|
|
14
|
+
/* ============================================ */
|
|
15
|
+
/* Border */
|
|
16
|
+
/* ============================================ */
|
|
17
|
+
|
|
18
|
+
--border-width: 1px;
|
|
19
|
+
|
|
20
|
+
/* ============================================ */
|
|
21
|
+
/* Radius */
|
|
22
|
+
/* ============================================ */
|
|
23
|
+
|
|
24
|
+
--radius: 0.875rem;
|
|
25
|
+
--radius-sm: 0.5rem;
|
|
26
|
+
--radius-md: 0.875rem;
|
|
27
|
+
--radius-lg: 1rem;
|
|
28
|
+
--radius-xl: 1.25rem;
|
|
29
|
+
--radius-2xl: 1.5rem;
|
|
30
|
+
--radius-full: 9999px;
|
|
31
|
+
|
|
32
|
+
/* ============================================ */
|
|
33
|
+
/* Ring & Focus */
|
|
34
|
+
/* ============================================ */
|
|
35
|
+
|
|
36
|
+
--ring-offset-width: 2px;
|
|
37
|
+
|
|
38
|
+
/* ============================================ */
|
|
39
|
+
/* Typography */
|
|
40
|
+
/* ============================================ */
|
|
41
|
+
|
|
42
|
+
--font-size-base: 1rem;
|
|
43
|
+
--font-weight-medium: 500;
|
|
44
|
+
--font-weight-semibold: 600;
|
|
45
|
+
|
|
46
|
+
/* ============================================ */
|
|
47
|
+
/* States */
|
|
48
|
+
/* ============================================ */
|
|
49
|
+
|
|
50
|
+
--disabled-opacity: 0.5;
|
|
51
|
+
--cursor-interactive: pointer;
|
|
52
|
+
--cursor-disabled: not-allowed;
|
|
53
|
+
|
|
54
|
+
/* ============================================ */
|
|
55
|
+
/* Transitions & Easing */
|
|
56
|
+
/* ============================================ */
|
|
57
|
+
|
|
58
|
+
/* Durations */
|
|
59
|
+
--transition-fast: 150ms;
|
|
60
|
+
--transition-base: 200ms;
|
|
61
|
+
--transition-slow: 300ms;
|
|
62
|
+
|
|
63
|
+
/* Easing functions - inspired by Vuesax */
|
|
64
|
+
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
65
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
66
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
67
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
|
|
68
|
+
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
69
|
+
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
70
|
+
|
|
71
|
+
/* ============================================ */
|
|
72
|
+
/* Component-Specific */
|
|
73
|
+
/* ============================================ */
|
|
74
|
+
|
|
75
|
+
/* Card */
|
|
76
|
+
--card-image-scale: 1.1; /* Zoom scale on hover */
|
|
77
|
+
|
|
78
|
+
/* Form Fields */
|
|
79
|
+
--field-border-width: 1px;
|
|
80
|
+
--field-radius: calc(var(--radius) * 1.2);
|
|
81
|
+
|
|
82
|
+
/* Animations */
|
|
83
|
+
--skeleton-animation: shimmer; /* shimmer, pulse, none */
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ============================================ */
|
|
87
|
+
/* Global Base Styles */
|
|
88
|
+
/* ============================================ */
|
|
89
|
+
|
|
90
|
+
@layer base {
|
|
91
|
+
* {
|
|
92
|
+
@apply border-border;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
body {
|
|
96
|
+
@apply bg-background text-foreground;
|
|
97
|
+
font-feature-settings:
|
|
98
|
+
"rlig" 1,
|
|
99
|
+
"calt" 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Smooth scrolling */
|
|
103
|
+
html {
|
|
104
|
+
scroll-behavior: smooth;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Focus visible outline */
|
|
108
|
+
*:focus-visible {
|
|
109
|
+
outline: 2px solid var(--focus);
|
|
110
|
+
outline-offset: var(--ring-offset-width);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Custom scrollbar */
|
|
114
|
+
::-webkit-scrollbar {
|
|
115
|
+
width: 8px;
|
|
116
|
+
height: 8px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
::-webkit-scrollbar-track {
|
|
120
|
+
background: transparent;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
::-webkit-scrollbar-thumb {
|
|
124
|
+
background: var(--scrollbar);
|
|
125
|
+
border-radius: var(--radius-full);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
::-webkit-scrollbar-thumb:hover {
|
|
129
|
+
background: var(--muted);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Selection */
|
|
133
|
+
::selection {
|
|
134
|
+
background-color: var(--primary);
|
|
135
|
+
color: var(--primary-foreground);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Disable iOS tap highlight */
|
|
139
|
+
* {
|
|
140
|
+
-webkit-tap-highlight-color: transparent;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Reduced motion support */
|
|
144
|
+
@media (prefers-reduced-motion: reduce) {
|
|
145
|
+
*,
|
|
146
|
+
*::before,
|
|
147
|
+
*::after {
|
|
148
|
+
animation-duration: 0.01ms !important;
|
|
149
|
+
animation-iteration-count: 1 !important;
|
|
150
|
+
transition-duration: 0.01ms !important;
|
|
151
|
+
scroll-behavior: auto !important;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accordion Component
|
|
3
|
+
*
|
|
4
|
+
* Architecture inspired by Vuesax v3 (MIT License)
|
|
5
|
+
* Built with modern Tailwind CSS and CSS variables
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* ============================================ */
|
|
9
|
+
/* Base Accordion */
|
|
10
|
+
/* ============================================ */
|
|
11
|
+
|
|
12
|
+
.vif-accordion {
|
|
13
|
+
@apply w-full;
|
|
14
|
+
/* Performance optimization */
|
|
15
|
+
contain: layout style;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* ============================================ */
|
|
19
|
+
/* Accordion Item */
|
|
20
|
+
/* ============================================ */
|
|
21
|
+
|
|
22
|
+
.vif-accordion__item {
|
|
23
|
+
@apply relative;
|
|
24
|
+
border: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Divider between items */
|
|
28
|
+
.vif-accordion__item::after {
|
|
29
|
+
content: "";
|
|
30
|
+
@apply absolute inset-x-0 bottom-0 h-px;
|
|
31
|
+
border-bottom: 1px solid var(--divider);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Remove divider from last item */
|
|
35
|
+
.vif-accordion__item:last-child::after {
|
|
36
|
+
content: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* ============================================ */
|
|
40
|
+
/* Accordion Header */
|
|
41
|
+
/* ============================================ */
|
|
42
|
+
|
|
43
|
+
.vif-accordion__header {
|
|
44
|
+
@apply flex;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ============================================ */
|
|
48
|
+
/* Accordion Trigger */
|
|
49
|
+
/* ============================================ */
|
|
50
|
+
|
|
51
|
+
.vif-accordion__trigger {
|
|
52
|
+
/* Layout */
|
|
53
|
+
@apply relative flex flex-1 items-center justify-between;
|
|
54
|
+
@apply px-4 py-4;
|
|
55
|
+
@apply text-left text-sm font-medium;
|
|
56
|
+
|
|
57
|
+
/* Cursor */
|
|
58
|
+
cursor: var(--cursor-interactive);
|
|
59
|
+
|
|
60
|
+
/* Transitions - smooth like Vuesax */
|
|
61
|
+
transition:
|
|
62
|
+
background-color 150ms var(--ease-smooth),
|
|
63
|
+
opacity 150ms var(--ease-smooth);
|
|
64
|
+
|
|
65
|
+
/* Hover state - only when closed */
|
|
66
|
+
&:hover:not([data-state="open"]) {
|
|
67
|
+
background: color-mix(in srgb, var(--foreground) 2%, transparent);
|
|
68
|
+
border-radius: var(--radius);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Focus state */
|
|
72
|
+
&:focus-visible {
|
|
73
|
+
outline: 1px solid var(--focus);
|
|
74
|
+
outline-offset: -2px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Disabled state */
|
|
78
|
+
&:disabled,
|
|
79
|
+
&[data-disabled] {
|
|
80
|
+
opacity: var(--disabled-opacity);
|
|
81
|
+
cursor: var(--cursor-disabled);
|
|
82
|
+
pointer-events: none;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ============================================ */
|
|
87
|
+
/* Accordion Icon/Indicator */
|
|
88
|
+
/* ============================================ */
|
|
89
|
+
|
|
90
|
+
.vif-accordion__icon {
|
|
91
|
+
@apply ml-auto shrink-0;
|
|
92
|
+
@apply size-4;
|
|
93
|
+
color: var(--muted);
|
|
94
|
+
|
|
95
|
+
/* Smooth rotation transition */
|
|
96
|
+
transition: rotate 250ms var(--ease-smooth);
|
|
97
|
+
|
|
98
|
+
/* Rotate when open */
|
|
99
|
+
[data-state="open"] & {
|
|
100
|
+
rotate: 180deg;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* ============================================ */
|
|
105
|
+
/* Accordion Content */
|
|
106
|
+
/* ============================================ */
|
|
107
|
+
|
|
108
|
+
.vif-accordion__content {
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
|
|
111
|
+
/* Smooth height animation */
|
|
112
|
+
transition:
|
|
113
|
+
height 350ms var(--ease-smooth),
|
|
114
|
+
opacity 250ms var(--ease-smooth);
|
|
115
|
+
|
|
116
|
+
/* Animate on open */
|
|
117
|
+
&[data-state="open"] {
|
|
118
|
+
animation: vif-accordion-open 350ms var(--ease-smooth);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Animate on close */
|
|
122
|
+
&[data-state="closed"] {
|
|
123
|
+
animation: vif-accordion-close 350ms var(--ease-smooth);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Content inner wrapper */
|
|
128
|
+
.vif-accordion__body {
|
|
129
|
+
@apply px-4 pb-4 pt-0;
|
|
130
|
+
@apply text-sm;
|
|
131
|
+
color: var(--muted);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* ============================================ */
|
|
135
|
+
/* Variant: Bordered */
|
|
136
|
+
/* ============================================ */
|
|
137
|
+
|
|
138
|
+
.vif-accordion--bordered {
|
|
139
|
+
.vif-accordion__item {
|
|
140
|
+
@apply border border-default rounded-lg mb-2;
|
|
141
|
+
|
|
142
|
+
&::after {
|
|
143
|
+
content: none;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* ============================================ */
|
|
149
|
+
/* Variant: Shadow */
|
|
150
|
+
/* ============================================ */
|
|
151
|
+
|
|
152
|
+
.vif-accordion--shadow {
|
|
153
|
+
.vif-accordion__item {
|
|
154
|
+
@apply rounded-lg mb-2;
|
|
155
|
+
box-shadow: 0 2px 8px 0
|
|
156
|
+
color-mix(in srgb, var(--foreground) 8%, transparent);
|
|
157
|
+
|
|
158
|
+
&::after {
|
|
159
|
+
content: none;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* ============================================ */
|
|
165
|
+
/* Variant: Flat */
|
|
166
|
+
/* ============================================ */
|
|
167
|
+
|
|
168
|
+
.vif-accordion--flat {
|
|
169
|
+
.vif-accordion__item {
|
|
170
|
+
@apply bg-default rounded-lg mb-2;
|
|
171
|
+
|
|
172
|
+
&::after {
|
|
173
|
+
content: none;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.vif-accordion__trigger {
|
|
178
|
+
&:hover:not([data-state="open"]) {
|
|
179
|
+
background: var(--default-hover);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* ============================================ */
|
|
185
|
+
/* Size Variants */
|
|
186
|
+
/* ============================================ */
|
|
187
|
+
|
|
188
|
+
.vif-accordion--sm {
|
|
189
|
+
.vif-accordion__trigger {
|
|
190
|
+
@apply px-3 py-3 text-xs;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.vif-accordion__body {
|
|
194
|
+
@apply px-3 pb-3;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.vif-accordion__icon {
|
|
198
|
+
@apply size-3.5;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.vif-accordion--lg {
|
|
203
|
+
.vif-accordion__trigger {
|
|
204
|
+
@apply px-5 py-5 text-base;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.vif-accordion__body {
|
|
208
|
+
@apply px-5 pb-5;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.vif-accordion__icon {
|
|
212
|
+
@apply size-5;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* ============================================ */
|
|
217
|
+
/* Animations */
|
|
218
|
+
/* ============================================ */
|
|
219
|
+
|
|
220
|
+
@keyframes vif-accordion-open {
|
|
221
|
+
from {
|
|
222
|
+
block-size: 0;
|
|
223
|
+
opacity: 0;
|
|
224
|
+
}
|
|
225
|
+
to {
|
|
226
|
+
block-size: var(--reka-accordion-content-height);
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
@keyframes vif-accordion-close {
|
|
232
|
+
from {
|
|
233
|
+
block-size: var(--reka-accordion-content-height);
|
|
234
|
+
opacity: 1;
|
|
235
|
+
}
|
|
236
|
+
to {
|
|
237
|
+
block-size: 0;
|
|
238
|
+
opacity: 0;
|
|
239
|
+
}
|
|
240
|
+
}
|