spoko-design-system 0.1.6 → 0.1.8
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
|
@@ -17,8 +17,8 @@ const props = defineProps({
|
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
|
-
<h2 class="font-headregular mb-
|
|
21
|
-
<ul class="mb-
|
|
20
|
+
<h2 class="font-headregular mb-2 font-medium text-lg colon-after" v-if="props.caption">{{ props.caption }}</h2>
|
|
21
|
+
<ul class="mb-6">
|
|
22
22
|
<li v-for="item in props.items" class="leading-5">
|
|
23
23
|
{{ item }}
|
|
24
24
|
</li>
|
|
@@ -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
|
+
}
|