spoko-design-system 0.2.46 → 0.2.48

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 (23) hide show
  1. package/package.json +1 -1
  2. package/src/components/Breadcrumbs.vue +17 -20
  3. package/src/components/Category/CategoriesCarousel.astro +2 -2
  4. package/src/components/Category/CategoriesSidebar.astro +1 -1
  5. package/src/components/Category/CategorySection.astro +1 -1
  6. package/src/components/FeaturesList.vue +1 -1
  7. package/src/components/FuckRussia.vue +17 -35
  8. package/src/components/HandDrive.astro +1 -1
  9. package/src/components/Header/Header.astro +151 -155
  10. package/src/components/Headline.vue +1 -1
  11. package/src/components/Jumbatron.vue +1 -1
  12. package/src/components/Modal.astro +1 -1
  13. package/src/components/PostHeader.astro +1 -1
  14. package/src/components/PrCode.vue +111 -126
  15. package/src/components/Product/ProductCodes.vue +103 -96
  16. package/src/components/Product/ProductColors.vue +1 -1
  17. package/src/components/Product/ProductEngineType.vue +1 -1
  18. package/src/components/Product/ProductModel.vue +1 -1
  19. package/src/components/Product/ProductModels.vue +1 -1
  20. package/src/components/Product/ProductPositions.vue +1 -2
  21. package/src/components/ProductDetailName.vue +2 -2
  22. package/src/components/ProductDetailsList.vue +1 -1
  23. package/src/components/layout/Header.astro +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "0.2.46",
3
+ "version": "0.2.48",
4
4
  "private": false,
5
5
  "main": "./index.ts",
6
6
  "module": "./index.ts",
package/src/components/Breadcrumbs.vue CHANGED
@@ -74,37 +74,34 @@ const isLast = (index: Number) => {
74
74
  </nav>
75
75
  </template>
76
76
 
77
- <style lang="scss" scoped>
78
- .breadcrumbs {
77
+ <style scoped>.breadcrumbs {
79
78
  list-style: none;
80
79
  font-size: 0.875rem;
81
80
  }
82
81
 
83
- .breadcrumb-item {
84
-
85
- &+.breadcrumb-item:before {
86
- @apply py-4.25 sm:py-1 px-1;
87
- display: inline-block;
88
- padding-right: .5rem;
89
- color: #bdbdbd;
90
- content: "/";
91
- }
82
+ .breadcrumb-item + .breadcrumb-item::before {
83
+ @apply py-4.25 sm:py-1 px-1;
84
+ display: inline-block;
85
+ padding-right: .5rem;
86
+ color: #bdbdbd;
87
+ content: "/";
88
+ }
92
89
 
93
- b {
94
- @apply hidden sm:inline font-normal;
95
- }
90
+ .breadcrumb-item b {
91
+ @apply hidden sm:inline font-normal;
96
92
  }
97
93
 
98
94
  .breadcrumb-link {
99
95
  border: 0;
100
96
  cursor: pointer;
97
+ }
101
98
 
102
- &--disabled {
103
- cursor: default;
99
+ .breadcrumb-link--disabled {
100
+ cursor: default;
101
+ }
104
102
 
105
- &:hover {
106
- color: inherit;
107
- }
108
- }
103
+ .breadcrumb-link--disabled:hover {
104
+ color: inherit;
109
105
  }
106
+
110
107
  </style>
package/src/components/Category/CategoriesCarousel.astro CHANGED
@@ -73,13 +73,13 @@ const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slu
73
73
  </swiper-container>
74
74
  <!-- </div> -->
75
75
 
76
- <style lang="scss">
76
+ <style >
77
77
  .active {
78
78
  @apply bg-blue-700 text-white bg-opacity-100;
79
79
 
80
80
  &:not(:hover) .cats-img {
81
81
  filter: invert(100%);
82
- // @apply filter-invert;
82
+ /* // @apply filter-invert; */
83
83
  }
84
84
 
85
85
  }
package/src/components/Category/CategoriesSidebar.astro CHANGED
@@ -135,7 +135,7 @@ sidebar mb-4 fixed top-0 ease delay-100 flex-col ml-0 overflow-hidden z-40 sm:z-
135
135
  <div id="ga-sidebar"></div>
136
136
  </div>
137
137
 
138
- <style lang="scss" scoped>
138
+ <style scoped>
139
139
 
140
140
  .sidebar {
141
141
 
package/src/components/Category/CategorySection.astro CHANGED
@@ -58,7 +58,7 @@ const categoryLink = subsubcategory ? createSubSubCatLink(locale, category.slug,
58
58
  </swiper-container>
59
59
  </div>
60
60
 
61
- <style lang="scss">
61
+ <style >
62
62
  .category-section {
63
63
  content-visibility: auto;
64
64
 
package/src/components/FeaturesList.vue CHANGED
@@ -26,7 +26,7 @@ const props = defineProps({
26
26
  </template>
27
27
 
28
28
 
29
- <style lang="scss" scoped>
29
+ <style scoped>
30
30
  ul {
31
31
  @apply list-square pl-5;
32
32
 
package/src/components/FuckRussia.vue CHANGED
@@ -19,62 +19,44 @@
19
19
  </div>
20
20
  </template>
21
21
 
22
- <style lang="scss">
22
+ <style >
23
23
  .bg-ukraine {
24
- background: linear-gradient(180deg, #0066cc 56%, rgba(255, 204, 0, 1) 44%);
25
- }
24
+ background: linear-gradient(180deg, #0066cc 56%, #ffcc00 44%); }
26
25
 
27
26
  .animate-bull {
28
27
  top: -2px;
29
- // @apply rotate-90;
30
-
31
- animation-iteration-count: infinite;
32
-
33
- &--1 {
28
+ animation-iteration-count: infinite; }
29
+
30
+ .animate-bull--1 {
34
31
  animation-duration: 2s;
35
- animation-name: AnimateBull1;
36
- }
32
+ animation-name: AnimateBull1; }
37
33
 
38
- &--2 {
34
+ .animate-bull--2 {
39
35
  animation-duration: 1.332s;
40
36
  animation-name: AnimateBull2;
41
- animation-delay: 1s;
42
- }
37
+ animation-delay: 1s; }
43
38
 
44
- &--3 {
39
+ .animate-bull--3 {
45
40
  animation-duration: 0.666s;
46
41
  animation-name: AnimateBull3;
47
- animation-delay: 2s;
48
- }
49
- }
42
+ animation-delay: 2s; }
50
43
 
51
44
  @keyframes AnimateBull1 {
52
45
  0% {
53
- transform: translate(14px, 0px);
54
- }
55
-
46
+ transform: translate(14px, 0px); }
56
47
  100% {
57
- transform: translate(86px, 0px);
58
- }
59
- }
48
+ transform: translate(86px, 0px); } }
60
49
 
61
50
  @keyframes AnimateBull2 {
62
51
  0% {
63
- transform: translate(38px, 0px);
64
- }
65
-
52
+ transform: translate(38px, 0px); }
66
53
  100% {
67
- transform: translate(80px, 0px);
68
- }
69
- }
54
+ transform: translate(80px, 0px); } }
70
55
 
71
56
  @keyframes AnimateBull3 {
72
57
  0% {
73
- transform: translate(62px, 0px);
74
- }
75
-
58
+ transform: translate(62px, 0px); }
76
59
  100% {
77
- transform: translate(88px, 0px);
78
- }
79
- }
60
+ transform: translate(88px, 0px); } }
61
+
80
62
  </style>
package/src/components/HandDrive.astro CHANGED
@@ -23,7 +23,7 @@ const handDriveName = getHandDriveName(handDrive)
23
23
  />
24
24
  </div>
25
25
 
26
- <style lang="scss">
26
+ <style>
27
27
  .rhd {
28
28
  transform: scaleX(-1);
29
29
  }
package/src/components/Header/Header.astro CHANGED
@@ -55,160 +55,156 @@ import Search from "astro-pagefind/components/Search";
55
55
  </nav>
56
56
  </header>
57
57
 
58
- <style lang="scss" is:global>
59
- #search {
60
- @apply ml-6;
61
-
62
- &.search-container {
63
- box-sizing: border-box;
64
- @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
65
- }
66
- .pagefind-ui {
67
- @apply font-textlight text-base;
68
-
69
- &__search-input {
70
- height: 40px !important;
71
- border: 0;
72
- @apply rounded-none sm-rounded-3xl h-10 w-full;
73
- }
74
-
75
- &__result-excerpt,
76
- __button {
77
- font-size: 14px !important;
78
- }
58
+ <style is:global>
59
+ #search {
60
+ @apply ml-6;
61
+ }
62
+
63
+ .search-container {
64
+ box-sizing: border-box;
65
+ @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
66
+ }
67
+
68
+ .pagefind-ui {
69
+ @apply font-textlight text-base;
70
+ }
71
+
72
+ .pagefind-ui__search-input {
73
+ height: 40px !important;
74
+ border: 0;
75
+ @apply rounded-none sm:rounded-3xl h-10 w-full;
76
+ }
77
+
78
+ .pagefind-ui__result-excerpt,
79
+ .pagefind-ui__button {
80
+ font-size: 14px !important;
81
+ }
82
+
83
+ .pagefind-ui__filter-name {
84
+ font-size: 12px !important;
85
+ }
86
+
87
+ .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
88
+ @apply p-4;
89
+ }
90
+
91
+ .pagefind-ui__result-link {
92
+ color: var(--pagefind-ui-primary);
93
+ font-family: vw_headlight;
94
+ font-size: 1rem;
95
+ }
96
+
97
+ .pagefind-ui__result-link::before {
98
+ top: 0;
99
+ bottom: 0;
100
+ left: 0;
101
+ right: 0;
102
+ content: "";
103
+ position: absolute;
104
+ }
105
+
106
+ .pagefind-ui__result-excerpt {
107
+ color: var(--pagefind-ui-text);
108
+ order: 3;
109
+ }
110
+
111
+ .pagefind-ui__drawer {
112
+ @apply bg-white md:fixed shadow-lg rounded-b-lg border-t border-t-transparent overflow-auto top-17 md:max-w-[calc(100vw-10%)] max-h-[calc(100vh-10%)] gap-[30px];
113
+ }
114
+
115
+ .pagefind-ui__search-clear {
116
+ height: 38px;
117
+ top: 0;
118
+ @apply sm:rounded-3xl;
119
+ }
120
+
121
+ .pagefind-ui__search-input {
122
+ font-size: 1rem;
123
+ font-weight: 400;
124
+ padding: 0 2.5rem 2px;
125
+ }
126
+
127
+ .pagefind-ui__form::before {
128
+ top: 14px;
129
+ left: 16px;
130
+ width: 14px;
131
+ height: 14px;
132
+ }
133
+
134
+ .pagefind-ui__result {
135
+ padding: 0.875rem 0;
136
+ gap: 1rem;
137
+ @apply relative;
138
+ }
139
+
140
+ .pagefind-ui__filter-block {
141
+ padding: 0.875rem 0;
142
+ border-width: 1px;
143
+ }
144
+
145
+ .pagefind-ui__filter-group {
146
+ gap: 0.5rem;
147
+ padding-top: 0.875rem;
148
+ }
149
+
150
+ .pagefind-ui__filter-value {
151
+ gap: 10px;
152
+ }
153
+
154
+ .pagefind-ui__filter-checkbox {
155
+ border-radius: 3px;
156
+ margin-top: 1px;
157
+ min-width: calc(16px * var(--pagefind-ui-scale));
158
+ }
159
+
160
+ .pagefind-ui__result-image {
161
+ @apply drop-shadow-sm w-full h-full object-contain rounded-none;
162
+ }
163
+
164
+ .pagefind-ui__filter-panel {
165
+ @apply hidden;
166
+ }
167
+
168
+ .pagefind-ui__filter-label {
169
+ font-size: 0.9rem;
170
+ }
171
+
172
+ .pagefind-ui__button {
173
+ font-weight: 400;
174
+ height: 40px;
175
+ }
176
+
177
+ .pagefind-ui__result-tag {
178
+ background: inherit;
179
+ padding: 0;
180
+ color: #9ca3af;
181
+ }
182
+
183
+ .pagefind-ui__result-thumb {
184
+ max-width: 120px;
185
+ }
186
+
187
+ .pagefind-ui__result-tags {
188
+ margin-top: 0.4rem;
189
+ order: 2;
190
+ }
191
+
192
+ .pagefind-ui__filter-name::after {
193
+ color: var(--pagefind-ui-primary);
194
+ }
195
+
196
+ .pagefind-ui__result-title {
197
+ font-size: inherit;
198
+ line-height: 1;
199
+ }
200
+
201
+ .pagefind-ui__filter-panel,
202
+ .pagefind-ui__results-area {
203
+ margin-top: 0;
204
+ }
205
+
206
+ .pagefind-ui__message {
207
+ padding: 0.875rem 0;
208
+ }
79
209
 
80
- &__filter-name {
81
- font-size: 12px !important;
82
- }
83
- &__drawer:not(.pagefind-ui__hidden) {
84
- @apply p-4;
85
- }
86
-
87
- &__result-link {
88
- color: var(--pagefind-ui-primary);
89
- // font-family: 'vw_headregular';
90
- font-family: vw_headlight;
91
- font-size: 1rem;
92
-
93
- &:before {
94
- top: 0;
95
- bottom: 0;
96
- left: 0;
97
- right: 0;
98
- content: "";
99
- position: absolute;
100
- }
101
- }
102
-
103
- &__result-excerpt {
104
- color: var(--pagefind-ui-text);
105
- order: 3;
106
- }
107
-
108
- &__drawer {
109
- @apply bg-white md-position-fixed shadow-lg rounded-b-lg border-t border-t-transparent overflow-auto top-17 md:max-w-[calc(100vw-10%)] max-h-[calc(100vh-10%)];
110
- gap: 30px;
111
- }
112
-
113
- &__search-clear {
114
- height: 38px;
115
- top: 0;
116
- @apply sm-rounded-3xl;
117
- }
118
-
119
- &__search-input {
120
- font-size: 1rem;
121
- font-weight: 400;
122
- padding: 0 2.5rem 2px;
123
- }
124
-
125
- &__form {
126
- &:before {
127
- top: 14px;
128
- left: 16px;
129
- width: 14px;
130
- height: 14px;
131
- }
132
- }
133
-
134
- &__result {
135
- padding: 0.875rem 0;
136
- gap: 1rem;
137
- @apply position-relative;
138
- }
139
-
140
- &__filter-block {
141
- padding: 0.875rem 0;
142
- border-width: 1px;
143
- }
144
-
145
- &__filter-group {
146
- gap: 0.5rem;
147
- padding-top: 0.875rem;
148
- }
149
-
150
- &__filter-value {
151
- gap: 10px;
152
- }
153
-
154
- &__filter-checkbox {
155
- border-radius: 3px;
156
- margin-top: 1px;
157
- min-width: calc(16px * var(--pagefind-ui-scale));
158
- }
159
-
160
- &__result-image {
161
- @apply drop-shadow-sm w-full h-full object-contain rounded-none;
162
- }
163
-
164
- &__filter-panel {
165
- // min-width: 220px;
166
- @apply hidden;
167
- }
168
-
169
- &__filter-label {
170
- font-size: 0.9rem;
171
- }
172
-
173
- &__button {
174
- font-weight: 400;
175
- height: 40px;
176
- }
177
-
178
- &__result-tag {
179
- background: inherit;
180
- padding: 0;
181
- color: #9ca3af;
182
- }
183
-
184
- &__result-thumb {
185
- max-width: 120px;
186
- }
187
-
188
- &__result-tags {
189
- margin-top: 0.4rem;
190
- order: 2;
191
- }
192
-
193
- &__filter-name {
194
- &:after {
195
- color: var(--pagefind-ui-primary);
196
- }
197
- }
198
-
199
- &__result-title {
200
- font-size: inherit;
201
- line-height: 1;
202
- }
203
-
204
- &__filter-panel,
205
- &__results-area {
206
- margin-top: 0;
207
- }
208
-
209
- &__message {
210
- padding: 0.875rem 0;
211
- }
212
- }
213
- }
214
210
  </style>
package/src/components/Headline.vue CHANGED
@@ -27,7 +27,7 @@ const props = defineProps({
27
27
  </component>
28
28
  </template>
29
29
 
30
- <style lang="scss">
30
+ <style>
31
31
  .headline--underline {
32
32
  @apply relative pb-4;
33
33
 
package/src/components/Jumbatron.vue CHANGED
@@ -32,7 +32,7 @@ const props = defineProps({
32
32
  </div>
33
33
  </header>
34
34
  </template>
35
- <style lang="scss">
35
+ <style>
36
36
  .bg-vw {
37
37
  background: radial-gradient(circle at 50% 85%,
38
38
  #00437A 0%,
package/src/components/Modal.astro CHANGED
@@ -3,7 +3,7 @@ const { id, open } = Astro.props;
3
3
  import Button from "../components/Button.vue";
4
4
  ---
5
5
 
6
- <style lang="scss">
6
+ <style >
7
7
  dialog {
8
8
  @apply fixed top-0 left-0 right-0 bottom-0;
9
9
 
package/src/components/PostHeader.astro CHANGED
@@ -52,7 +52,7 @@ import Date from "./Date.astro";
52
52
  </div>
53
53
  </header>
54
54
 
55
- <style lang="scss">
55
+ <style >
56
56
  .post-header {
57
57
  @apply flex relative items-center;
58
58
  min-height: 19vw;
package/src/components/PrCode.vue CHANGED
@@ -26,132 +26,117 @@ const props = defineProps({
26
26
  </span>
27
27
  </template>
28
28
 
29
- <style lang="scss" scoped>
30
- .btn-prcode {
31
-
32
- &--pdp {
33
- @apply mb-1
34
- }
35
-
36
- &:before {
37
- @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
38
-
39
- display: none;
40
- position: absolute;
41
- top: -10px;
42
- transform: translateY(-50%) translateX(-50%);
43
- left: 50%;
44
- }
45
-
46
- &:hover:before {
47
- display: block;
48
- }
49
-
50
- &--2JK {
51
- color: #f3881d;
52
-
53
- &:before {
54
- content: 'CROSS';
55
- }
56
- }
57
-
58
- &--1LR,
59
- &--1ZG,
60
- &--1ZJ {
61
- &:before {
62
- content: '⌀ 256 mm';
63
- }
64
- }
65
-
66
- &--1KD,
67
- &--1ZP,
68
- &--1ZR {
69
- &:before {
70
- content: '⌀ 310 mm';
71
- }
72
- }
73
-
74
- &--1ZD,
75
- &--1ZC,
76
- &--1LN {
77
- &:before {
78
- content: '⌀ 288 mm; LUCAS';
79
- }
80
- }
81
-
82
- &--2JZ {
83
- @apply: text-lightBlue-500;
84
-
85
- &:before {
86
- content: 'Bluemotion';
87
- }
88
- }
89
-
90
- &--7L6 {
91
- @apply: text-lightBlue-500;
92
-
93
- &:before {
94
- content: 'Bluemotion (CFWA + start-stop)';
95
- }
96
- }
97
-
98
- &--1KK,
99
- &--1KT,
100
- &--1KV,
101
- &--1LV,
102
- &--2EJ {
103
- &:before {
104
- content: '⌀ 230 mm';
105
- }
106
- }
107
-
108
- &--2JE {
109
- @apply text-lightBlue-700;
110
-
111
- &:before {
112
- content: 'BlueGT';
113
- }
114
- }
115
-
116
- &--2JP {
117
- &:before {
118
- content: 'R-Line';
119
- }
120
- }
121
-
122
- // WRC Street R
123
- &--E5M,
124
-
125
- // emblems/stickers
126
- &--1KD,
127
-
128
- //brakes
129
- &--1ZP,
130
-
131
- //brakes
132
- &--2JQ,
133
-
134
- //bumpers / engine parts
135
- &--TA2 {
136
- color: blue;
137
-
138
- &:before {
139
- content: 'R WRC Street';
140
- }
141
- }
142
-
143
- // GTI
144
- &--1KV,
145
- &--1ZD,
146
- &--1ZR,
147
- &--0NH,
148
- &--2JD {
149
- color: red;
150
-
151
- &:before {
152
- content: 'GTI';
153
- }
154
- }
29
+ <style scoped>
30
+ .btn-prcode--pdp {
31
+ @apply mb-1;
32
+ }
33
+
34
+ .btn-prcode::before {
35
+ @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
36
+ display: none;
37
+ position: absolute;
38
+ top: -10px;
39
+ transform: translateY(-50%) translateX(-50%);
40
+ left: 50%;
41
+ }
42
+
43
+ .btn-prcode:hover::before {
44
+ display: block;
45
+ }
46
+
47
+ .btn-prcode--2JK {
48
+ color: #f3881d;
49
+ }
50
+
51
+ .btn-prcode--2JK::before {
52
+ content: 'CROSS';
53
+ }
54
+
55
+ .btn-prcode--1LR::before,
56
+ .btn-prcode--1ZG::before,
57
+ .btn-prcode--1ZJ::before {
58
+ content: '⌀ 256 mm';
59
+ }
60
+
61
+ .btn-prcode--1KD::before,
62
+ .btn-prcode--1ZP::before,
63
+ .btn-prcode--1ZR::before {
64
+ content: '⌀ 310 mm';
65
+ }
66
+
67
+ .btn-prcode--1ZD::before,
68
+ .btn-prcode--1ZC::before,
69
+ .btn-prcode--1LN::before {
70
+ content: '⌀ 288 mm; LUCAS';
71
+ }
155
72
 
73
+ .btn-prcode--2JZ {
74
+ @apply text-lightBlue-500;
156
75
  }
76
+
77
+ .btn-prcode--2JZ::before {
78
+ content: 'Bluemotion';
79
+ }
80
+
81
+ .btn-prcode--7L6 {
82
+ @apply text-lightBlue-500;
83
+ }
84
+
85
+ .btn-prcode--7L6::before {
86
+ content: 'Bluemotion (CFWA + start-stop)';
87
+ }
88
+
89
+ .btn-prcode--1KK::before,
90
+ .btn-prcode--1KT::before,
91
+ .btn-prcode--1KV::before,
92
+ .btn-prcode--1LV::before,
93
+ .btn-prcode--2EJ::before {
94
+ content: '⌀ 230 mm';
95
+ }
96
+
97
+ .btn-prcode--2JE {
98
+ @apply text-lightBlue-700;
99
+ }
100
+
101
+ .btn-prcode--2JE::before {
102
+ content: 'BlueGT';
103
+ }
104
+
105
+ .btn-prcode--2JP::before {
106
+ content: 'R-Line';
107
+ }
108
+
109
+ .btn-prcode--E5M,
110
+ .btn-prcode--1KD,
111
+ .btn-prcode--1ZP,
112
+ .btn-prcode--2JQ,
113
+ .btn-prcode--TA2 {
114
+ color: blue;
115
+ }
116
+
117
+ .btn-prcode--E5M::before,
118
+ .btn-prcode--1KD::before,
119
+ .btn-prcode--1ZP::before,
120
+ .btn-prcode--2JQ::before,
121
+ .btn-prcode--TA2::before {
122
+ content: 'R WRC Street';
123
+ }
124
+
125
+ .btn-prcode--1KV,
126
+ .btn-prcode--1ZD,
127
+ .btn-prcode--1ZR,
128
+ .btn-prcode--0NH,
129
+ .btn-prcode--2JD {
130
+ color: red;
131
+ }
132
+
133
+ .btn-prcode--1KV::before,
134
+ .btn-prcode--1ZD::before,
135
+ .btn-prcode--1ZR::before,
136
+ .btn-prcode--0NH::before,
137
+ .btn-prcode--2JD::before {
138
+ content: 'GTI';
139
+ }
140
+
141
+
157
142
  </style>
package/src/components/Product/ProductCodes.vue CHANGED
@@ -45,123 +45,130 @@ const settings = {
45
45
 
46
46
  </template>
47
47
 
48
- <style lang="scss" scoped>
48
+ <style scoped>
49
49
  .btn-prcode {
50
50
  @apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-700 after:absolute after:w-4 text-center;
51
+ }
51
52
 
52
- &--pdp {
53
- @apply mb-1
54
- }
53
+ .btn-prcode--pdp {
54
+ @apply mb-1;
55
+ }
55
56
 
56
- &:before {
57
- @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500;
58
-
59
- display: none;
60
- position: absolute;
61
- text-align: center;
62
- // bottom: 100%;
63
- top: -10px;
64
- transform: translateY(-50%) translateX(-50%);
65
- left: 50%;
66
- z-index: 50;
67
- }
57
+ .btn-prcode::before {
58
+ @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500;
59
+ display: none;
60
+ position: absolute;
61
+ text-align: center;
62
+ top: -10px;
63
+ transform: translateY(-50%) translateX(-50%);
64
+ left: 50%;
65
+ z-index: 50;
66
+ }
68
67
 
69
- &:hover:before {
70
- display:block;
71
- }
68
+ .btn-prcode:hover::before {
69
+ display: block;
70
+ }
72
71
 
73
- &--2JK {
74
- color: #f3881d;
75
- &:before {
76
- content: 'CROSS';
77
- }
78
- }
72
+ .btn-prcode--2JK {
73
+ color: #f3881d;
74
+ }
79
75
 
80
- &--1LR,
81
- &--1ZG,
82
- &--1ZJ {
83
- &:before {
84
- content: '⌀ 256 mm';
85
- }
86
- }
76
+ .btn-prcode--2JK::before {
77
+ content: 'CROSS';
78
+ }
87
79
 
88
- &--1KD,
89
- &--1ZP,
90
- &--1ZR {
91
- &:before {
92
- content: '⌀ 310 mm';
93
- }
80
+ .btn-prcode--1LR,
81
+ .btn-prcode--1ZG,
82
+ .btn-prcode--1ZJ {
83
+ &::before {
84
+ content: '⌀ 256 mm';
94
85
  }
86
+ }
95
87
 
96
- &--1ZD,
97
- &--1ZC,
98
- &--1LN {
99
- &:before {
100
- content: '⌀ 288 mm; LUCAS';
101
- }
88
+ .btn-prcode--1KD,
89
+ .btn-prcode--1ZP,
90
+ .btn-prcode--1ZR {
91
+ &::before {
92
+ content: '⌀ 310 mm';
102
93
  }
94
+ }
103
95
 
104
- &--2JZ {
105
- @apply: text-lightBlue-500;
106
- &:before {
107
- content: 'Bluemotion';
108
- }
96
+ .btn-prcode--1ZD,
97
+ .btn-prcode--1ZC,
98
+ .btn-prcode--1LN {
99
+ &::before {
100
+ content: '⌀ 288 mm; LUCAS';
109
101
  }
102
+ }
110
103
 
111
- &--7L6 {
112
- @apply: text-lightBlue-500;
113
- &:before {
114
- content: 'Bluemotion (CFWA + start-stop)';
115
- }
116
- }
104
+ .btn-prcode--2JZ {
105
+ @apply text-lightBlue-500;
106
+ }
117
107
 
118
- &--1KK,
119
- &--1KT,
120
- &--1KV,
121
- &--1LV,
122
- &--2EJ {
123
- &:before {
124
- content: '⌀ 230 mm';
125
- }
126
- }
108
+ .btn-prcode--2JZ::before {
109
+ content: 'Bluemotion';
110
+ }
127
111
 
128
- &--2JE {
129
- @apply text-lightBlue-700;
112
+ .btn-prcode--7L6 {
113
+ @apply text-lightBlue-500;
114
+ }
130
115
 
131
- &:before {
132
- content: 'BlueGT';
133
- }
134
- }
116
+ .btn-prcode--7L6::before {
117
+ content: 'Bluemotion (CFWA + start-stop)';
118
+ }
135
119
 
136
- &--2JP {
137
- &:before {
138
- content: 'R-Line';
139
- }
120
+ .btn-prcode--1KK,
121
+ .btn-prcode--1KT,
122
+ .btn-prcode--1KV,
123
+ .btn-prcode--1LV,
124
+ .btn-prcode--2EJ {
125
+ &::before {
126
+ content: '⌀ 230 mm';
140
127
  }
128
+ }
141
129
 
142
- // WRC Street R
143
- &--E5M, // emblems/stickers
144
- &--1KD, //brakes
145
- &--1ZP, //brakes
146
- &--2JQ,//bumpers
147
- &--TA2 { //engine parts
148
- color: blue;
149
- &:before {
150
- content: 'R WRC Street';
151
- }
152
- }
130
+ .btn-prcode--2JE {
131
+ @apply text-lightBlue-700;
132
+ }
153
133
 
154
- // GTI
155
- &--1KV,
156
- &--1ZD,
157
- &--1ZR,
158
- &--0NH,
159
- &--2JD {
160
- color: red;
161
- &:before {
162
- content: 'GTI';
163
- }
164
- }
134
+ .btn-prcode--2JE::before {
135
+ content: 'BlueGT';
136
+ }
165
137
 
138
+ .btn-prcode--2JP::before {
139
+ content: 'R-Line';
166
140
  }
141
+
142
+ .btn-prcode--E5M,
143
+ .btn-prcode--1KD,
144
+ .btn-prcode--1ZP,
145
+ .btn-prcode--2JQ,
146
+ .btn-prcode--TA2 {
147
+ color: blue;
148
+ }
149
+
150
+ .btn-prcode--E5M::before,
151
+ .btn-prcode--1KD::before,
152
+ .btn-prcode--1ZP::before,
153
+ .btn-prcode--2JQ::before,
154
+ .btn-prcode--TA2::before {
155
+ content: 'R WRC Street';
156
+ }
157
+
158
+ .btn-prcode--1KV,
159
+ .btn-prcode--1ZD,
160
+ .btn-prcode--1ZR,
161
+ .btn-prcode--0NH,
162
+ .btn-prcode--2JD {
163
+ color: red;
164
+ }
165
+
166
+ .btn-prcode--1KV::before,
167
+ .btn-prcode--1ZD::before,
168
+ .btn-prcode--1ZR::before,
169
+ .btn-prcode--0NH::before,
170
+ .btn-prcode--2JD::before {
171
+ content: 'GTI';
172
+ }
173
+
167
174
  </style>
package/src/components/Product/ProductColors.vue CHANGED
@@ -31,7 +31,7 @@ const props = defineProps({
31
31
  </span>
32
32
  </template>
33
33
 
34
- <style lang="scss">
34
+ <style >
35
35
  .product-color:not(:last-child) {
36
36
  @apply mr-1;
37
37
 
package/src/components/Product/ProductEngineType.vue CHANGED
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
24
24
  </ul>
25
25
  </template>
26
26
 
27
- <style lang="scss">
27
+ <style >
28
28
  .engine-types {
29
29
  @apply flex flex-wrap items-center;
30
30
  }
package/src/components/Product/ProductModel.vue CHANGED
@@ -13,7 +13,7 @@ const props = defineProps({
13
13
  <template>
14
14
  <strong class="product-model" :data-pagefind-filter="`model:${props.carModel.name}`">{{ props.carModel.name }}</strong>
15
15
  </template>
16
- <style lang="scss">
16
+ <style >
17
17
  .product-model:not(:last-child) {
18
18
  @apply mr-1;
19
19
 
package/src/components/Product/ProductModels.vue CHANGED
@@ -20,7 +20,7 @@ const props = defineProps({
20
20
  </div>
21
21
  </template>
22
22
 
23
- <style lang="scss">
23
+ <style>
24
24
  .product-model:not(:last-child) {
25
25
  @apply mr-1;
26
26
 
package/src/components/Product/ProductPositions.vue CHANGED
@@ -23,9 +23,8 @@ const props = defineProps({
23
23
  </span>
24
24
  </template>
25
25
 
26
- <style lang="scss">
26
+ <style >
27
27
  .product-position:not(:last-child) {
28
- // @apply mr-1;
29
28
  margin-right: 0.25rem;
30
29
 
31
30
  &:after {
package/src/components/ProductDetailName.vue CHANGED
@@ -29,7 +29,7 @@ const props = defineProps({
29
29
  </template>
30
30
 
31
31
 
32
- <style lang="scss">
32
+ <style>
33
33
  .detail-name {
34
34
  @apply overflow-hidden relative;
35
35
 
@@ -37,7 +37,7 @@ const props = defineProps({
37
37
  @apply block bg-white relative z-10 pr-1.5 w-full;
38
38
 
39
39
  &:before {
40
- // order: 2;
40
+ /* // order: 2; */
41
41
  @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
42
42
  height: 1em;
43
43
  white-space: nowrap;
package/src/components/ProductDetailsList.vue CHANGED
@@ -35,7 +35,7 @@ const props = defineProps({
35
35
  </table>
36
36
  </template>
37
37
 
38
- <style lang="scss" scoped>
38
+ <style scoped>
39
39
  .details {
40
40
  @apply border-none shadow-none w-full md:w-auto
41
41
  box-shadow: none;
package/src/components/layout/Header.astro CHANGED
@@ -72,7 +72,7 @@ const navItemsLeft = [
72
72
  </div>
73
73
  </nav>
74
74
 
75
- <style lang="scss" is:global>
75
+ <style is:global>
76
76
  nav {
77
77
  /* display: grid; */
78
78
  place-items: center;