fulldev-ui 0.3.14 → 0.3.16
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/package.json +1 -1
- package/src/components/_Component.astro +2 -0
- package/src/components/base/Avatar.astro +24 -4
- package/src/components/segment/Footer.astro +1 -0
- package/src/components/segment/Header.astro +20 -13
- package/src/components/structure/Bento.astro +9 -3
- package/src/components/structure/Column.astro +1 -1
- package/src/components/typography/Label.astro +1 -0
- package/src/css/space.scss +9 -1
package/package.json
CHANGED
|
@@ -30,6 +30,7 @@ const {
|
|
|
30
30
|
html,
|
|
31
31
|
radius,
|
|
32
32
|
level,
|
|
33
|
+
mask,
|
|
33
34
|
...rest
|
|
34
35
|
} = Astro.props
|
|
35
36
|
|
|
@@ -64,6 +65,7 @@ const render =
|
|
|
64
65
|
[`color-${color}`]: color,
|
|
65
66
|
[`underline-${underline}`]: underline,
|
|
66
67
|
[`radius-${radius}`]: radius,
|
|
68
|
+
[`mask-${mask}`]: mask,
|
|
67
69
|
},
|
|
68
70
|
]}
|
|
69
71
|
{...rest}
|
|
@@ -2,13 +2,18 @@
|
|
|
2
2
|
import type { ComponentProps } from 'astro/types'
|
|
3
3
|
import { Image } from 'fulldev-ui'
|
|
4
4
|
|
|
5
|
-
type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {
|
|
5
|
+
type Props = Omit<ComponentProps<typeof Image>, 'position' | 'frame'> & {
|
|
6
|
+
radius?: 'none' | 'auto' | 'full'
|
|
7
|
+
variant?: 'subtle' | 'outline' | 'ghost'
|
|
8
|
+
}
|
|
6
9
|
|
|
7
|
-
const { ...rest } = Astro.props
|
|
10
|
+
const { radius = 'auto', variant = 'ghost', ...rest } = Astro.props
|
|
8
11
|
---
|
|
9
12
|
|
|
10
13
|
<Image
|
|
11
14
|
class="avatar"
|
|
15
|
+
{variant}
|
|
16
|
+
{radius}
|
|
12
17
|
{...rest}
|
|
13
18
|
/>
|
|
14
19
|
|
|
@@ -16,8 +21,23 @@ const { ...rest } = Astro.props
|
|
|
16
21
|
@import '../../css/utils.scss';
|
|
17
22
|
|
|
18
23
|
@include component('avatar') {
|
|
24
|
+
display: block;
|
|
25
|
+
border: 1px solid var(--border);
|
|
19
26
|
border-radius: var(--radius-3);
|
|
20
|
-
|
|
21
|
-
height:
|
|
27
|
+
width: calc(var(--text-1) + 2 * var(--space-4));
|
|
28
|
+
height: calc(var(--text-1) + 2 * var(--space-4));
|
|
29
|
+
object-fit: cover;
|
|
30
|
+
|
|
31
|
+
&.radius-none {
|
|
32
|
+
border-radius: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.radius-auto {
|
|
36
|
+
border-radius: var(--radius-1);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.radius-full {
|
|
40
|
+
border-radius: 9999px;
|
|
41
|
+
}
|
|
22
42
|
}
|
|
23
43
|
</style>
|
|
@@ -42,33 +42,40 @@ const {
|
|
|
42
42
|
--gutter: max(4vw, calc(100vw - var(--screen)) / 2);
|
|
43
43
|
|
|
44
44
|
display: flex;
|
|
45
|
+
position: relative;
|
|
45
46
|
top: 0;
|
|
46
47
|
right: 0;
|
|
47
48
|
left: 0;
|
|
48
49
|
z-index: 10;
|
|
50
|
+
margin: var(--outer-y) var(--outer-x);
|
|
49
51
|
border-bottom: 1px solid var(--border);
|
|
50
52
|
background-color: var(--background);
|
|
51
|
-
padding
|
|
52
|
-
padding-bottom: var(--space-4);
|
|
53
|
+
padding: var(--inner-y) var(--inner-x);
|
|
53
54
|
width: 100%;
|
|
55
|
+
max-width: calc(100% - (2 * var(--outer-x)));
|
|
54
56
|
|
|
55
57
|
&.frame-fill {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
--inner-x: var(--gutter);
|
|
59
|
+
--outer-x: 0;
|
|
60
|
+
--inner-y: var(--space-3);
|
|
61
|
+
--outer-y: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.frame-contain {
|
|
65
|
+
--inner-x: max(4vw, var(--space-3));
|
|
66
|
+
--outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
|
|
67
|
+
--inner-y: var(--space-3);
|
|
68
|
+
--outer-y: 0;
|
|
60
69
|
}
|
|
61
70
|
|
|
62
71
|
&.frame-panel {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
72
|
+
--inner-x: min(4vw, var(--space-3));
|
|
73
|
+
--outer-x: var(--gutter);
|
|
74
|
+
--inner-y: var(--space-3);
|
|
75
|
+
--outer-y: var(--space-3);
|
|
76
|
+
|
|
66
77
|
border: 1px solid var(--border);
|
|
67
78
|
border-radius: var(--radius-3);
|
|
68
|
-
padding-top: var(--space-2);
|
|
69
|
-
padding-right: var(--space-4);
|
|
70
|
-
padding-bottom: var(--space-2);
|
|
71
|
-
padding-left: var(--space-4);
|
|
72
79
|
}
|
|
73
80
|
|
|
74
81
|
&.position-fixed {
|
|
@@ -25,13 +25,19 @@ const { ...rest } = Astro.props
|
|
|
25
25
|
display: grid;
|
|
26
26
|
position: relative;
|
|
27
27
|
grid-template-columns: 1fr;
|
|
28
|
+
gap: var(--space-4);
|
|
28
29
|
width: 100%;
|
|
29
30
|
|
|
30
31
|
@media (min-width: 1024px) {
|
|
31
|
-
grid-template-columns:
|
|
32
|
+
grid-template-columns: repeat(5, 1fr);
|
|
32
33
|
|
|
33
|
-
& >
|
|
34
|
-
grid-column
|
|
34
|
+
& > * {
|
|
35
|
+
grid-column: span 2;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
& > *:nth-child(3n + 2),
|
|
39
|
+
& > *:nth-child(3n + 3) {
|
|
40
|
+
grid-column: span 3;
|
|
35
41
|
}
|
|
36
42
|
}
|
|
37
43
|
}
|
package/src/css/space.scss
CHANGED
|
@@ -45,7 +45,9 @@
|
|
|
45
45
|
|
|
46
46
|
@mixin space-y {
|
|
47
47
|
> {
|
|
48
|
-
.full + .full
|
|
48
|
+
.full + .full,
|
|
49
|
+
.full + .box,
|
|
50
|
+
.full + .masonry {
|
|
49
51
|
margin-top: var(--space-6);
|
|
50
52
|
}
|
|
51
53
|
|
|
@@ -53,6 +55,7 @@
|
|
|
53
55
|
.full + .row,
|
|
54
56
|
.full + .wrap,
|
|
55
57
|
.full + .button,
|
|
58
|
+
.full + .price,
|
|
56
59
|
.full + .switch {
|
|
57
60
|
margin-top: var(--space-5);
|
|
58
61
|
}
|
|
@@ -86,6 +89,11 @@
|
|
|
86
89
|
margin-top: var(--space-2);
|
|
87
90
|
}
|
|
88
91
|
|
|
92
|
+
.rating + .text,
|
|
93
|
+
.text + .rating {
|
|
94
|
+
margin-top: var(--space-1);
|
|
95
|
+
}
|
|
96
|
+
|
|
89
97
|
.image + .full,
|
|
90
98
|
.icon + .full {
|
|
91
99
|
margin-top: var(--space-6);
|