spoko-design-system 0.1.6 → 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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/base/_base.scss +88 -93
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "astro dev",
package/src/styles/base/_base.scss CHANGED
@@ -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
- -webkit-font-smoothing: antialiased;
9
- -moz-osx-font-smoothing: grayscale;
8
+ -webkit-font-smoothing: antialiased;
9
+ -moz-osx-font-smoothing: grayscale;
10
10
  }
11
11
 
12
12
  body {
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
- scrollbar-width: thin;
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
- width: 5px;
21
- height: 3px;
26
+ width: 5px;
27
+ height: 3px;
22
28
  }
23
29
 
24
30
  ::-webkit-scrollbar-track {
25
- background: rgba(0, 0, 0, 0.1); //$secondary;
26
- border-radius: 0;
31
+ background: rgba(0, 0, 0, 0.1); //$secondary;
32
+ border-radius: 0;
27
33
  }
28
34
 
29
35
  ::-webkit-scrollbar-thumb {
30
- border-radius: 0;
31
- background-color: var(--primary);
36
+ border-radius: 0;
37
+ background-color: var(--primary);
32
38
  }
33
39
 
34
- *:focus {
35
- outline: none !important;
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
- background: radial-gradient(circle at 50% 85%, #00437A 0%, #001E50 100%);
41
- color: #fff;
42
- width: 100%;
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
- background: radial-gradient(
47
- circle at 50% 85%,
48
- #00437A 0%,
49
- #001E50 100%
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
- letter-spacing: -0.96px;
66
+ letter-spacing: -0.96px;
56
67
  }
57
68
 
58
69
  code {
59
- @apply font-novamono;
70
+ @apply font-novamono;
60
71
  }
61
72
 
62
73
 
63
74
  html {
64
- scroll-behavior: smooth;
65
-
66
- &::-webkit-scrollbar {
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
- // --swiper-navigation-color: #0099da;
88
- --swiper-navigation-size: 22px;
89
- --swiper-scrollbar-drag-bg-color: var(--primary);
90
- --swiper-scrollbar-size: 1px;
91
- --swiper-scrollbar-bottom: 0px;
92
- }
93
-
94
- .swiper-horizontal{
95
- &> .swiper-scrollbar {
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
- .fade-enter-active,
101
- .fade-leave-active {
92
+ }
93
+
94
+ .fade-enter-active,
95
+ .fade-leave-active {
102
96
  transition: opacity 0.5s ease;
103
- }
104
-
105
- .fade-enter-from,
106
- .fade-leave-to {
97
+ }
98
+
99
+ .fade-enter-from,
100
+ .fade-leave-to {
107
101
  opacity: 0;
108
- }
109
-
110
- .colon-after {
102
+ }
103
+
104
+ .colon-after {
111
105
  &:after {
112
106
  content: ':'
113
107
  }
114
- }
115
-
116
- .items {
117
- & > .item {
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
- /* override styles when printing */
127
- @media print {
128
- @page :footer {
129
- display: none;
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
- .comma:not(:last-child) {
142
- @apply mr-1;
143
-
144
- &:after {
145
- content: ','
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, th {
152
+
153
+ td,
154
+ th {
160
155
  border: 1px solid;
161
156
  padding: 0.5em;
162
157
  }
163
158
  }
164
- }
159
+ }