srcdev-nuxt-components 1.2.0 → 1.2.1
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.
|
@@ -120,9 +120,14 @@ watch(
|
|
|
120
120
|
|
|
121
121
|
<style scoped lang="css">
|
|
122
122
|
.masonry-grid-ordered {
|
|
123
|
+
--_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
|
|
124
|
+
--_transition-duration: 0.3s;
|
|
125
|
+
|
|
123
126
|
container-type: inline-size;
|
|
124
127
|
position: relative;
|
|
125
128
|
|
|
129
|
+
transition: max-width var(--_transition-duration) ease;
|
|
130
|
+
|
|
126
131
|
.masonry-grid-ordered-wrapper {
|
|
127
132
|
display: grid;
|
|
128
133
|
justify-self: v-bind(justify);
|
|
@@ -144,12 +149,16 @@ watch(
|
|
|
144
149
|
}
|
|
145
150
|
|
|
146
151
|
.masonry-grid-ordered-item {
|
|
147
|
-
transition: position
|
|
152
|
+
transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease, left var(--_transition-duration) ease;
|
|
148
153
|
|
|
149
154
|
position: var(--_position);
|
|
150
155
|
top: var(--_position-top);
|
|
151
156
|
left: var(--_position-left);
|
|
152
157
|
width: var(--_element-width);
|
|
158
|
+
|
|
159
|
+
outline: 0.1rem solid var(--_border-color);
|
|
160
|
+
padding: 1.2rem;
|
|
161
|
+
border-radius: 4px;
|
|
153
162
|
}
|
|
154
163
|
}
|
|
155
164
|
}
|
|
@@ -46,12 +46,15 @@ watch(
|
|
|
46
46
|
|
|
47
47
|
<style lang="css">
|
|
48
48
|
.masonry-grid-wrapper {
|
|
49
|
+
--_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
|
|
50
|
+
--_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
|
|
51
|
+
|
|
49
52
|
columns: var(--_item-min-width);
|
|
50
|
-
gap:
|
|
53
|
+
gap: 12px;
|
|
51
54
|
|
|
52
55
|
.masonry-grid-item {
|
|
53
56
|
break-inside: avoid;
|
|
54
|
-
outline: 0.1rem solid
|
|
57
|
+
outline: 0.1rem solid var(--_border-color);
|
|
55
58
|
padding: 1.2rem;
|
|
56
59
|
margin-block-end: var(--_masonry-grid-gap);
|
|
57
60
|
}
|
|
@@ -100,12 +100,14 @@ watch(
|
|
|
100
100
|
|
|
101
101
|
<style lang="css">
|
|
102
102
|
.masonry-grid-wrapper {
|
|
103
|
+
--_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
|
|
104
|
+
|
|
103
105
|
columns: var(--_item-min-width);
|
|
104
106
|
gap: var(--_masonry-grid-gap);
|
|
105
107
|
|
|
106
108
|
.masonry-grid-item {
|
|
107
109
|
break-inside: avoid;
|
|
108
|
-
outline: 0.1rem solid
|
|
110
|
+
outline: 0.1rem solid var(--_border-color);
|
|
109
111
|
padding: 1.2rem;
|
|
110
112
|
margin-block-end: var(--_masonry-grid-gap);
|
|
111
113
|
}
|
package/package.json
CHANGED