srcdev-nuxt-components 1.1.3 → 1.1.4
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.
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.container-glow-wrapper {
|
|
2
|
+
--container-bg-colour: light-dark(hsl(250, 18%, 93%), hsl(246 44% 7%));
|
|
3
|
+
--container-border-colour: hsl(280 10% 50% / 1);
|
|
4
|
+
--card: light-dark(white, hsl(246 44% 7%));
|
|
5
|
+
--container-border-width: 2px;
|
|
6
|
+
--container-border-radius: 12px;
|
|
7
|
+
--gradient: conic-gradient(
|
|
8
|
+
from 180deg at 50% 70%,
|
|
9
|
+
hsla(0, 0%, 98%, 1) 0deg,
|
|
10
|
+
#eec32d 72.0000010728836deg,
|
|
11
|
+
#fc0303 144.0000021457672deg,
|
|
12
|
+
#709ab9 216.00000858306885deg,
|
|
13
|
+
#4dffbf 288.0000042915344deg,
|
|
14
|
+
hsla(0, 0%, 98%, 1) 1turn
|
|
15
|
+
);
|
|
16
|
+
}
|
|
@@ -32,6 +32,8 @@ const props = defineProps({
|
|
|
32
32
|
|
|
33
33
|
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
34
34
|
|
|
35
|
+
const controller = new AbortController();
|
|
36
|
+
|
|
35
37
|
const containerGlowWrapper = ref<HTMLElement>();
|
|
36
38
|
const containerGlowItem = ref<HTMLElement[]>([]);
|
|
37
39
|
|
|
@@ -80,21 +82,26 @@ const RESTYLE = () => {
|
|
|
80
82
|
// document.body.addEventListener('pointermove', UPDATE);
|
|
81
83
|
|
|
82
84
|
onMounted(() => {
|
|
85
|
+
RESTYLE();
|
|
83
86
|
if (containerGlowWrapper.value) {
|
|
84
|
-
|
|
85
|
-
|
|
87
|
+
document.body.addEventListener('pointermove', UPDATE, {
|
|
88
|
+
signal: controller.signal,
|
|
89
|
+
});
|
|
86
90
|
}
|
|
87
91
|
});
|
|
92
|
+
|
|
93
|
+
onBeforeUnmount(() => {
|
|
94
|
+
return controller.abort();
|
|
95
|
+
});
|
|
88
96
|
</script>
|
|
89
97
|
|
|
90
98
|
<style lang="css">
|
|
91
|
-
|
|
92
|
-
--bg: hsl(246 44% 7%);
|
|
93
|
-
--border: hsl(280 10% 50% / 1);
|
|
94
|
-
--card: hsl(
|
|
95
|
-
--
|
|
96
|
-
--border-
|
|
97
|
-
--border-radius: 12px;
|
|
99
|
+
.container-glow-wrapper {
|
|
100
|
+
--container-bg-colour: light-dark(hsl(250, 18%, 93%), hsl(246 44% 7%));
|
|
101
|
+
--container-border-colour: hsl(280 10% 50% / 1);
|
|
102
|
+
--card: light-dark(white, hsl(246 44% 7%));
|
|
103
|
+
--container-border-width: 2px;
|
|
104
|
+
--container-border-radius: 12px;
|
|
98
105
|
--gradient: conic-gradient(
|
|
99
106
|
from 180deg at 50% 70%,
|
|
100
107
|
hsla(0, 0%, 98%, 1) 0deg,
|
|
@@ -104,103 +111,101 @@ onMounted(() => {
|
|
|
104
111
|
#4dffbf 288.0000042915344deg,
|
|
105
112
|
hsla(0, 0%, 98%, 1) 1turn
|
|
106
113
|
);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
@property --start {
|
|
110
|
-
syntax: '<number>';
|
|
111
|
-
inherits: true;
|
|
112
|
-
initial-value: 0;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.container-glow-wrapper {
|
|
116
|
-
display: flex;
|
|
117
|
-
gap: 3.2rem;
|
|
118
|
-
}
|
|
119
114
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
box-sizing: border-box;
|
|
115
|
+
@property --start {
|
|
116
|
+
syntax: '<number>';
|
|
117
|
+
inherits: true;
|
|
118
|
+
initial-value: 0;
|
|
125
119
|
}
|
|
126
120
|
|
|
127
|
-
--active: 0.15;
|
|
128
|
-
--start: 0;
|
|
129
|
-
height: 100%;
|
|
130
|
-
background: var(--card);
|
|
131
|
-
padding: 2rem;
|
|
132
|
-
aspect-ratio: 330 / 400;
|
|
133
|
-
border-radius: var(--border-radius);
|
|
134
|
-
min-width: 280px;
|
|
135
|
-
max-width: 280px;
|
|
136
121
|
display: flex;
|
|
137
|
-
|
|
138
|
-
gap: 0.25rem;
|
|
139
|
-
position: relative;
|
|
140
|
-
|
|
141
|
-
&:is(:hover, :focus-visible) {
|
|
142
|
-
z-index: 2;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
&::before {
|
|
146
|
-
position: absolute;
|
|
147
|
-
inset: 0;
|
|
148
|
-
border: var(--border-width) solid transparent;
|
|
149
|
-
content: '';
|
|
150
|
-
border-radius: var(--border-radius);
|
|
151
|
-
pointer-events: none;
|
|
152
|
-
background: var(--border);
|
|
153
|
-
background-attachment: fixed;
|
|
154
|
-
border-radius: var(--border-radius);
|
|
155
|
-
mask: linear-gradient(#0000, #0000),
|
|
156
|
-
conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsl(0 0% 100% / 0.15) 0deg, white, hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
|
|
157
|
-
mask-clip: padding-box, border-box;
|
|
158
|
-
mask-composite: intersect;
|
|
159
|
-
opacity: var(--active);
|
|
160
|
-
transition: opacity 1s;
|
|
161
|
-
}
|
|
122
|
+
gap: 3.2rem;
|
|
162
123
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
background-attachment: fixed;
|
|
170
|
-
border-radius: var(--border-radius);
|
|
171
|
-
opacity: var(--active, 0);
|
|
172
|
-
transition: opacity 1s;
|
|
173
|
-
--alpha: 0;
|
|
174
|
-
inset: 0;
|
|
175
|
-
border: var(--border-width) solid transparent;
|
|
176
|
-
mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
|
|
177
|
-
filter: brightness(1.5);
|
|
178
|
-
mask-clip: padding-box, border-box;
|
|
179
|
-
mask-composite: intersect;
|
|
180
|
-
}
|
|
124
|
+
.container-glow-core {
|
|
125
|
+
& *,
|
|
126
|
+
& *:after,
|
|
127
|
+
& *:before {
|
|
128
|
+
box-sizing: border-box;
|
|
129
|
+
}
|
|
181
130
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
131
|
+
--active: 0.15;
|
|
132
|
+
--start: 0;
|
|
133
|
+
height: 100%;
|
|
134
|
+
background: var(--card);
|
|
135
|
+
padding: 2rem;
|
|
136
|
+
aspect-ratio: 330 / 400;
|
|
137
|
+
border-radius: var(--container-border-radius);
|
|
138
|
+
min-width: 280px;
|
|
139
|
+
max-width: 280px;
|
|
140
|
+
display: flex;
|
|
141
|
+
flex-direction: column;
|
|
142
|
+
gap: 0.25rem;
|
|
143
|
+
position: relative;
|
|
144
|
+
|
|
145
|
+
&:is(:hover, :focus-visible) {
|
|
146
|
+
z-index: 2;
|
|
147
|
+
}
|
|
187
148
|
|
|
188
|
-
&::after,
|
|
189
149
|
&::before {
|
|
190
|
-
|
|
150
|
+
position: absolute;
|
|
151
|
+
inset: 0;
|
|
152
|
+
border: var(--container-border-width) solid transparent;
|
|
191
153
|
content: '';
|
|
192
|
-
|
|
154
|
+
border-radius: var(--container-border-radius);
|
|
155
|
+
pointer-events: none;
|
|
156
|
+
background: var(--container-border-colour);
|
|
193
157
|
background-attachment: fixed;
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
border-radius: var(--border-radius);
|
|
198
|
-
mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
|
|
199
|
-
mask-composite: intersect;
|
|
158
|
+
border-radius: var(--container-border-radius);
|
|
159
|
+
mask: linear-gradient(#0000, #0000),
|
|
160
|
+
conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsl(0 0% 100% / 0.15) 0deg, white, hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
|
|
200
161
|
mask-clip: padding-box, border-box;
|
|
162
|
+
mask-composite: intersect;
|
|
201
163
|
opacity: var(--active);
|
|
202
164
|
transition: opacity 1s;
|
|
203
165
|
}
|
|
166
|
+
|
|
167
|
+
&::after {
|
|
168
|
+
/* --container-bg-colour-size: 100%; */
|
|
169
|
+
content: '';
|
|
170
|
+
pointer-events: none;
|
|
171
|
+
position: absolute;
|
|
172
|
+
background: var(--gradient);
|
|
173
|
+
background-attachment: fixed;
|
|
174
|
+
border-radius: var(--container-border-radius);
|
|
175
|
+
opacity: var(--active, 0);
|
|
176
|
+
transition: opacity 1s;
|
|
177
|
+
--alpha: 0;
|
|
178
|
+
inset: 0;
|
|
179
|
+
border: var(--container-border-width) solid transparent;
|
|
180
|
+
mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
|
|
181
|
+
filter: brightness(1.5);
|
|
182
|
+
mask-clip: padding-box, border-box;
|
|
183
|
+
mask-composite: intersect;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.glows {
|
|
187
|
+
pointer-events: none;
|
|
188
|
+
position: absolute;
|
|
189
|
+
inset: 0;
|
|
190
|
+
filter: blur(calc(var(--blur) * 1px));
|
|
191
|
+
|
|
192
|
+
&::after,
|
|
193
|
+
&::before {
|
|
194
|
+
--alpha: 0;
|
|
195
|
+
content: '';
|
|
196
|
+
background: var(--gradient);
|
|
197
|
+
background-attachment: fixed;
|
|
198
|
+
position: absolute;
|
|
199
|
+
inset: -5px;
|
|
200
|
+
border: 10px solid transparent;
|
|
201
|
+
border-radius: var(--container-border-radius);
|
|
202
|
+
mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
|
|
203
|
+
mask-composite: intersect;
|
|
204
|
+
mask-clip: padding-box, border-box;
|
|
205
|
+
opacity: var(--active);
|
|
206
|
+
transition: opacity 1s;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
204
209
|
}
|
|
205
210
|
}
|
|
206
211
|
</style>
|
package/package.json
CHANGED