spoko-design-system 0.1.5 → 0.1.7
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "astro dev",
|
|
@@ -33,7 +33,6 @@
|
|
|
33
33
|
"@astrojs/sitemap": "^3.0.5",
|
|
34
34
|
"@astrojs/vue": "^4.0.8",
|
|
35
35
|
"@docsearch/css": "^3.5.2",
|
|
36
|
-
"@docsearch/react": "^3.5.2",
|
|
37
36
|
"@iconify-json/ant-design": "^1.1.15",
|
|
38
37
|
"@iconify-json/bi": "^1.1.23",
|
|
39
38
|
"@iconify-json/bx": "^1.1.10",
|
|
@@ -55,7 +54,6 @@
|
|
|
55
54
|
"@iconify/json": "^2.2.178",
|
|
56
55
|
"@iconify/vue": "^4.1.1",
|
|
57
56
|
"@types/node": "^20.11.16",
|
|
58
|
-
"@types/react": "^18.2.51",
|
|
59
57
|
"@unocss/astro": "^0.58.4",
|
|
60
58
|
"@unocss/preset-attributify": "^0.58.4",
|
|
61
59
|
"@unocss/preset-typography": "^0.58.4",
|
|
@@ -17,8 +17,8 @@ const props = defineProps({
|
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
|
-
<h2 class="font-headregular mb-
|
|
21
|
-
<ul class="">
|
|
20
|
+
<h2 class="font-headregular mb-6 font-medium text-lg colon-after" v-if="props.caption">{{ props.caption }}</h2>
|
|
21
|
+
<ul class="mb-4">
|
|
22
22
|
<li v-for="item in props.items" class="leading-5">
|
|
23
23
|
{{ item }}
|
|
24
24
|
</li>
|
|
@@ -212,4 +212,83 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
212
212
|
</a>
|
|
213
213
|
</div>
|
|
214
214
|
</div>
|
|
215
|
-
```
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
## Card with skewed background
|
|
218
|
+
Skewed background with CSS & SVG.
|
|
219
|
+
|
|
220
|
+
<div class="component-preview">
|
|
221
|
+
|
|
222
|
+
<div class="columns-3 gap-8">
|
|
223
|
+
|
|
224
|
+
<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
|
|
225
|
+
<img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
|
|
226
|
+
<blockquote class="relative p-8 mb-4 text-white/90">
|
|
227
|
+
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
|
|
228
|
+
<h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
|
|
229
|
+
<p class="text-md font-light mt-2 text-white">
|
|
230
|
+
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
|
|
231
|
+
</p>
|
|
232
|
+
</blockquote>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
|
|
236
|
+
<img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
|
|
237
|
+
<blockquote class="relative p-8 mb-4 text-white/90">
|
|
238
|
+
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
|
|
239
|
+
<h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
|
|
240
|
+
<p class="text-md font-light mt-2 text-white">
|
|
241
|
+
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
|
|
242
|
+
</p>
|
|
243
|
+
</blockquote>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
|
|
247
|
+
<img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
|
|
248
|
+
<blockquote class="relative p-8 mb-4 text-white/90">
|
|
249
|
+
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
|
|
250
|
+
<h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
|
|
251
|
+
<p class="text-md font-light mt-2 text-white">
|
|
252
|
+
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
|
|
253
|
+
</p>
|
|
254
|
+
</blockquote>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
|
|
258
|
+
<img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
|
|
259
|
+
<blockquote class="relative p-8 mb-4 text-white/90">
|
|
260
|
+
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
|
|
261
|
+
<h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
|
|
262
|
+
<p class="text-md font-light mt-2 text-white">
|
|
263
|
+
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
|
|
264
|
+
</p>
|
|
265
|
+
</blockquote>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
|
|
269
|
+
<img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
|
|
270
|
+
<blockquote class="relative p-8 mb-4 text-white/90">
|
|
271
|
+
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
|
|
272
|
+
<h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
|
|
273
|
+
<p class="text-md font-light mt-2 text-white">
|
|
274
|
+
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
|
|
275
|
+
</p>
|
|
276
|
+
</blockquote>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
|
|
280
|
+
<img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
|
|
281
|
+
<blockquote class="relative p-8 mb-4 text-white/90">
|
|
282
|
+
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
|
|
283
|
+
<h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
|
|
284
|
+
<p class="text-md font-light mt-2 text-white">
|
|
285
|
+
Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
|
|
286
|
+
</p>
|
|
287
|
+
</blockquote>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
|
|
@@ -38,7 +38,7 @@ const ICONS = {
|
|
|
38
38
|
{ICONS[key].map((value) => (
|
|
39
39
|
<div class="mx-1 mb-2">
|
|
40
40
|
<div class="component-preview ">
|
|
41
|
-
<Icon name={`${key}:${value}`} class="text-3xl mx-auto" />
|
|
41
|
+
<Icon name={`${key}:${value}`} class="text-3xl mx-auto text-light-blue-400" />
|
|
42
42
|
</div>
|
|
43
43
|
<pre class="astro-code bg-slate-800 text-white text-sm text-center"><Icon name={`"${key}:${value}"`} /></pre>
|
|
44
44
|
</div>
|
|
@@ -1,150 +1,144 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--primary: #{$blue};
|
|
3
|
-
--secondary: #{$gray-500}
|
|
3
|
+
--secondary: #{$gray-500};
|
|
4
4
|
--tertiary: #{$verydarkblue};
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
* {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
-webkit-font-smoothing: antialiased;
|
|
9
|
+
-moz-osx-font-smoothing: grayscale;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
body {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
overflow-x: hidden;
|
|
13
|
+
font-family: 'vw_textregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
|
|
14
|
+
overflow-y: scroll;
|
|
15
|
+
overflow-x: hidden;
|
|
17
16
|
}
|
|
18
17
|
|
|
18
|
+
/*
|
|
19
|
+
Chrome 121 added support for scrollbar-width and scrollbar-color.
|
|
20
|
+
If you have scrollbar-width it will disable the --webkit-scrollbar pseudo elements.
|
|
21
|
+
https://developer.chrome.com/blog/new-in-chrome-121
|
|
22
|
+
https://developer.chrome.com/docs/css-ui/scrollbar-styling
|
|
23
|
+
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
|
|
24
|
+
*/
|
|
19
25
|
::-webkit-scrollbar {
|
|
20
|
-
|
|
21
|
-
|
|
26
|
+
width: 5px;
|
|
27
|
+
height: 3px;
|
|
22
28
|
}
|
|
23
29
|
|
|
24
30
|
::-webkit-scrollbar-track {
|
|
25
|
-
|
|
26
|
-
|
|
31
|
+
background: rgba(0, 0, 0, 0.1); //$secondary;
|
|
32
|
+
border-radius: 0;
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
::-webkit-scrollbar-thumb {
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
border-radius: 0;
|
|
37
|
+
background-color: var(--primary);
|
|
32
38
|
}
|
|
33
39
|
|
|
34
|
-
|
|
35
|
-
|
|
40
|
+
// Fallback to browsers without webkit-scrollbar support
|
|
41
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
42
|
+
* {
|
|
43
|
+
scrollbar-width: thin;
|
|
44
|
+
scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1)
|
|
45
|
+
}
|
|
36
46
|
}
|
|
37
47
|
|
|
48
|
+
*:focus {
|
|
49
|
+
outline: none !important;
|
|
50
|
+
}
|
|
38
51
|
|
|
39
52
|
.bg-spoko {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
53
|
+
background: radial-gradient(circle at 50% 85%, #00437A 0%, #001E50 100%);
|
|
54
|
+
color: #fff;
|
|
55
|
+
width: 100%;
|
|
43
56
|
}
|
|
44
57
|
|
|
45
58
|
.bg-vw {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
);
|
|
51
|
-
color: #fff;
|
|
59
|
+
background: radial-gradient(circle at 50% 85%,
|
|
60
|
+
#00437A 0%,
|
|
61
|
+
#001E50 100%);
|
|
62
|
+
color: #fff;
|
|
52
63
|
}
|
|
53
64
|
|
|
54
65
|
.display-3 {
|
|
55
|
-
|
|
66
|
+
letter-spacing: -0.96px;
|
|
56
67
|
}
|
|
57
68
|
|
|
58
69
|
code {
|
|
59
|
-
|
|
70
|
+
@apply font-novamono;
|
|
60
71
|
}
|
|
61
72
|
|
|
62
73
|
|
|
63
74
|
html {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
width: 7px; /* width of the entire scrollbar */
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&::-webkit-scrollbar-track {
|
|
71
|
-
background: #00437A; /* color of the tracking area */
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&::-webkit-scrollbar-thumb {
|
|
75
|
-
background-color: var(--primary); /* color of the scroll thumb */
|
|
76
|
-
border-radius: 0; /* roundness of the scroll thumb */
|
|
77
|
-
border: 0 solid #00437A; /* creates padding around scroll thumb */
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
scrollbar-width: thin;
|
|
81
|
-
scrollbar-color: var(--primary) #00437A;
|
|
82
|
-
}
|
|
75
|
+
scroll-behavior: smooth;
|
|
76
|
+
}
|
|
77
|
+
|
|
83
78
|
|
|
84
|
-
|
|
85
79
|
//Swiper styles
|
|
86
80
|
:root {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
81
|
+
// --swiper-navigation-color: #0099da;
|
|
82
|
+
--swiper-navigation-size: 22px;
|
|
83
|
+
--swiper-scrollbar-drag-bg-color: var(--primary);
|
|
84
|
+
--swiper-scrollbar-size: 1px;
|
|
85
|
+
--swiper-scrollbar-bottom: 0px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.swiper-horizontal {
|
|
89
|
+
&>.swiper-scrollbar {
|
|
96
90
|
height: 1px;
|
|
97
91
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.fade-enter-active,
|
|
95
|
+
.fade-leave-active {
|
|
102
96
|
transition: opacity 0.5s ease;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.fade-enter-from,
|
|
100
|
+
.fade-leave-to {
|
|
107
101
|
opacity: 0;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.colon-after {
|
|
111
105
|
&:after {
|
|
112
106
|
content: ':'
|
|
113
107
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.items {
|
|
111
|
+
&>.item {
|
|
118
112
|
&:not(:last-child) {
|
|
119
113
|
&:after {
|
|
120
114
|
content: ', '
|
|
121
115
|
}
|
|
122
116
|
}
|
|
123
117
|
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* override styles when printing */
|
|
121
|
+
@media print {
|
|
122
|
+
@page :footer {
|
|
123
|
+
display: none;
|
|
124
|
+
margin-top: 0;
|
|
125
|
+
margin-bottom: 0;
|
|
124
126
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
margin-top: 0;
|
|
131
|
-
margin-bottom: 0;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
@page :header {
|
|
135
|
-
display: none;
|
|
136
|
-
margin-top: 0;
|
|
137
|
-
margin-bottom: 0;
|
|
138
|
-
}
|
|
127
|
+
|
|
128
|
+
@page :header {
|
|
129
|
+
display: none;
|
|
130
|
+
margin-top: 0;
|
|
131
|
+
margin-bottom: 0;
|
|
139
132
|
}
|
|
133
|
+
}
|
|
140
134
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
135
|
+
.comma:not(:last-child) {
|
|
136
|
+
@apply mr-1;
|
|
137
|
+
|
|
138
|
+
&:after {
|
|
139
|
+
content: ','
|
|
147
140
|
}
|
|
141
|
+
}
|
|
148
142
|
|
|
149
143
|
#l-page {
|
|
150
144
|
table {
|
|
@@ -155,10 +149,11 @@ html {
|
|
|
155
149
|
table-layout: fixed;
|
|
156
150
|
text-indent: 0;
|
|
157
151
|
width: 100%;
|
|
158
|
-
|
|
159
|
-
td,
|
|
152
|
+
|
|
153
|
+
td,
|
|
154
|
+
th {
|
|
160
155
|
border: 1px solid;
|
|
161
156
|
padding: 0.5em;
|
|
162
157
|
}
|
|
163
158
|
}
|
|
164
|
-
}
|
|
159
|
+
}
|