elements-kit 0.6.2 → 0.7.0
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/dist/ui/card/card.css +62 -1
- package/dist/ui/marketing/marketing.css +16 -4
- package/package.json +1 -1
package/dist/ui/card/card.css
CHANGED
|
@@ -3,8 +3,11 @@
|
|
|
3
3
|
font-family: var(--default-font-family);
|
|
4
4
|
font-weight: var(--font-weight-regular);
|
|
5
5
|
text-align: start;
|
|
6
|
-
padding: var(--card-padding);
|
|
7
6
|
box-sizing: border-box;
|
|
7
|
+
padding-block-start: var(--card-padding-block-start, var(--card-padding));
|
|
8
|
+
padding-block-end: var(--card-padding-block-end, var(--card-padding));
|
|
9
|
+
padding-inline-start: var(--card-padding-inline-start, var(--card-padding));
|
|
10
|
+
padding-inline-end: var(--card-padding-inline-end, var(--card-padding));
|
|
8
11
|
font-style: normal;
|
|
9
12
|
display: block;
|
|
10
13
|
position: relative;
|
|
@@ -127,3 +130,61 @@
|
|
|
127
130
|
.x-card:where(:focus-visible):after {
|
|
128
131
|
outline: inherit;
|
|
129
132
|
}
|
|
133
|
+
|
|
134
|
+
.x-card > [data-inset] {
|
|
135
|
+
--inset-radius: calc(var(--card-border-radius) - var(--card-border-width));
|
|
136
|
+
box-sizing: border-box;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.x-card > [data-inset="top"] {
|
|
141
|
+
border-start-start-radius: var(--inset-radius);
|
|
142
|
+
border-start-end-radius: var(--inset-radius);
|
|
143
|
+
border-end-end-radius: 0;
|
|
144
|
+
border-end-start-radius: 0;
|
|
145
|
+
margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
|
|
146
|
+
var(--card-border-width));
|
|
147
|
+
margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
|
|
148
|
+
var(--card-border-width));
|
|
149
|
+
margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
|
|
150
|
+
var(--card-border-width));
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.x-card > [data-inset="bottom"] {
|
|
154
|
+
border-start-start-radius: 0;
|
|
155
|
+
border-start-end-radius: 0;
|
|
156
|
+
border-end-end-radius: var(--inset-radius);
|
|
157
|
+
border-end-start-radius: var(--inset-radius);
|
|
158
|
+
margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
|
|
159
|
+
var(--card-border-width));
|
|
160
|
+
margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
|
|
161
|
+
var(--card-border-width));
|
|
162
|
+
margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
|
|
163
|
+
var(--card-border-width));
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.x-card > [data-inset="start"] {
|
|
167
|
+
border-start-start-radius: var(--inset-radius);
|
|
168
|
+
border-start-end-radius: 0;
|
|
169
|
+
border-end-end-radius: 0;
|
|
170
|
+
border-end-start-radius: var(--inset-radius);
|
|
171
|
+
margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
|
|
172
|
+
var(--card-border-width));
|
|
173
|
+
margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
|
|
174
|
+
var(--card-border-width));
|
|
175
|
+
margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
|
|
176
|
+
var(--card-border-width));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.x-card > [data-inset="end"] {
|
|
180
|
+
border-start-start-radius: 0;
|
|
181
|
+
border-start-end-radius: var(--inset-radius);
|
|
182
|
+
border-end-end-radius: var(--inset-radius);
|
|
183
|
+
border-end-start-radius: 0;
|
|
184
|
+
margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
|
|
185
|
+
var(--card-border-width));
|
|
186
|
+
margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
|
|
187
|
+
var(--card-border-width));
|
|
188
|
+
margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
|
|
189
|
+
var(--card-border-width));
|
|
190
|
+
}
|
|
@@ -394,7 +394,10 @@
|
|
|
394
394
|
|
|
395
395
|
@media (min-width: 64rem) {
|
|
396
396
|
.testimonial {
|
|
397
|
-
--card-padding: 6rem
|
|
397
|
+
--card-padding-block-start: 6rem;
|
|
398
|
+
--card-padding-block-end: 6rem;
|
|
399
|
+
--card-padding-inline-start: 8rem;
|
|
400
|
+
--card-padding-inline-end: 8rem;
|
|
398
401
|
}
|
|
399
402
|
}
|
|
400
403
|
|
|
@@ -456,7 +459,10 @@
|
|
|
456
459
|
}
|
|
457
460
|
|
|
458
461
|
.cta-banner {
|
|
459
|
-
--card-padding: 3rem
|
|
462
|
+
--card-padding-block-start: 3rem;
|
|
463
|
+
--card-padding-block-end: 3rem;
|
|
464
|
+
--card-padding-inline-start: 1.5rem;
|
|
465
|
+
--card-padding-inline-end: 1.5rem;
|
|
460
466
|
text-align: center;
|
|
461
467
|
flex-direction: column;
|
|
462
468
|
align-items: center;
|
|
@@ -465,13 +471,19 @@
|
|
|
465
471
|
|
|
466
472
|
@media (min-width: 48rem) {
|
|
467
473
|
.cta-banner {
|
|
468
|
-
--card-padding: 5rem
|
|
474
|
+
--card-padding-block-start: 5rem;
|
|
475
|
+
--card-padding-block-end: 5rem;
|
|
476
|
+
--card-padding-inline-start: 2.5rem;
|
|
477
|
+
--card-padding-inline-end: 2.5rem;
|
|
469
478
|
}
|
|
470
479
|
}
|
|
471
480
|
|
|
472
481
|
@media (min-width: 64rem) {
|
|
473
482
|
.cta-banner {
|
|
474
|
-
--card-padding: 8rem
|
|
483
|
+
--card-padding-block-start: 8rem;
|
|
484
|
+
--card-padding-block-end: 8rem;
|
|
485
|
+
--card-padding-inline-start: 4.5rem;
|
|
486
|
+
--card-padding-inline-end: 4.5rem;
|
|
475
487
|
}
|
|
476
488
|
}
|
|
477
489
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "elements-kit",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.7.0",
|
|
5
5
|
"description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"webcomponents",
|