spoko-design-system 0.2.45 → 0.2.48

package/index.ts

@@ -16,6 +16,14 @@ export { default as FeaturesList } from './src/components/FeaturesList.vue';
 export { default as ProductCodes } from './src/components/ProductCodes.vue';
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
+export { default as ProductColors } from './src/components/Product/ProductColors.vue';
+export { default as ProductDetailName } from './src/components/Product/ProductDetailName.vue';
+export { default as ProductDetails } from './src/components/Product/ProductDetails.vue';
+export { default as ProductDoc } from './src/components/Product/ProductDoc.vue';
+export { default as ProductModel } from './src/components/Product/ProductModel.vue';
+export { default as ProductModels } from './src/components/Product/ProductModels.vue';
+export { default as ProductName } from './src/components/Product/ProductName.vue';
+export { default as ProductPositions } from './src/components/Product/ProductPositions.vue';
 
 export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
 export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.45",
+  "version": "0.2.48",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Breadcrumbs.vue

@@ -74,37 +74,34 @@ const isLast = (index: Number) => {
   </nav>
 </template>
 
-<style lang="scss" scoped>
-.breadcrumbs {
+<style scoped>.breadcrumbs {
   list-style: none;
   font-size: 0.875rem;
 }
 
-.breadcrumb-item {
-
-  &+.breadcrumb-item:before {
-    @apply py-4.25 sm:py-1 px-1;
-    display: inline-block;
-    padding-right: .5rem;
-    color: #bdbdbd;
-    content: "/";
-  }
+.breadcrumb-item + .breadcrumb-item::before {
+  @apply py-4.25 sm:py-1 px-1;
+  display: inline-block;
+  padding-right: .5rem;
+  color: #bdbdbd;
+  content: "/";
+}
 
-  b {
-    @apply hidden sm:inline font-normal;
-  }
+.breadcrumb-item b {
+  @apply hidden sm:inline font-normal;
 }
 
 .breadcrumb-link {
   border: 0;
   cursor: pointer;
+}
 
-  &--disabled {
-    cursor: default;
+.breadcrumb-link--disabled {
+  cursor: default;
+}
 
-    &:hover {
-      color: inherit;
-    }
-  }
+.breadcrumb-link--disabled:hover {
+  color: inherit;
 }
+
 </style>

package/src/components/Category/CategoriesCarousel.astro

@@ -73,13 +73,13 @@ const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slu
   </swiper-container>
 <!-- </div> -->
 
-<style lang="scss">
+<style >
 .active {
   @apply bg-blue-700 text-white bg-opacity-100;
 
   &:not(:hover) .cats-img {
     filter: invert(100%);
-    // @apply filter-invert;
+    /* // @apply filter-invert; */
   }
   
 }

package/src/components/Category/CategoriesSidebar.astro

@@ -135,7 +135,7 @@ sidebar mb-4 fixed top-0 ease delay-100 flex-col ml-0 overflow-hidden z-40 sm:z-
   <div id="ga-sidebar"></div>
 </div>
 
-<style lang="scss" scoped>
+<style  scoped>
 
 .sidebar {
 

package/src/components/Category/CategoryDetails.astro

@@ -1,5 +1,5 @@
 ---
-import CategorySidebarToggler from "@components/Category/CategorySidebarToggler.vue";
+import CategorySidebarToggler from '@components/Category/CategorySidebarToggler.vue';
 import { Icon } from 'astro-icon/components';
 const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
 import { t } from "i18next";

package/src/components/Category/CategorySection.astro

@@ -58,7 +58,7 @@ const categoryLink = subsubcategory ? createSubSubCatLink(locale, category.slug,
   </swiper-container>
 </div>
 
-<style lang="scss">
+<style >
   .category-section {
     content-visibility: auto;
 

package/src/components/FeaturesList.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 </template>
 
 
-<style lang="scss" scoped>
+<style  scoped>
 ul {
     @apply list-square pl-5;
 

package/src/components/FuckRussia.vue

@@ -19,62 +19,44 @@
   </div>
 </template>
 
-<style lang="scss">
+<style >
 .bg-ukraine {
-  background: linear-gradient(180deg, #0066cc 56%, rgba(255, 204, 0, 1) 44%);
-}
+  background: linear-gradient(180deg, #0066cc 56%, #ffcc00 44%); }
 
 .animate-bull {
   top: -2px;
-  // @apply rotate-90;
-
-  animation-iteration-count: infinite;
-
-  &--1 {
+  animation-iteration-count: infinite; }
+  
+  .animate-bull--1 {
     animation-duration: 2s;
-    animation-name: AnimateBull1;
-  }
+    animation-name: AnimateBull1; }
 
-  &--2 {
+  .animate-bull--2 {
     animation-duration: 1.332s;
     animation-name: AnimateBull2;
-    animation-delay: 1s;
-  }
+    animation-delay: 1s; }
 
-  &--3 {
+  .animate-bull--3 {
     animation-duration: 0.666s;
     animation-name: AnimateBull3;
-    animation-delay: 2s;
-  }
-}
+    animation-delay: 2s; }
 
 @keyframes AnimateBull1 {
   0% {
-    transform: translate(14px, 0px);
-  }
-
+    transform: translate(14px, 0px); }
   100% {
-    transform: translate(86px, 0px);
-  }
-}
+    transform: translate(86px, 0px); } }
 
 @keyframes AnimateBull2 {
   0% {
-    transform: translate(38px, 0px);
-  }
-
+    transform: translate(38px, 0px); }
   100% {
-    transform: translate(80px, 0px);
-  }
-}
+    transform: translate(80px, 0px); } }
 
 @keyframes AnimateBull3 {
   0% {
-    transform: translate(62px, 0px);
-  }
-
+    transform: translate(62px, 0px); }
   100% {
-    transform: translate(88px, 0px);
-  }
-}
+    transform: translate(88px, 0px); } }
+
 </style>

package/src/components/HandDrive.astro

@@ -23,7 +23,7 @@ const handDriveName =  getHandDriveName(handDrive)
   />
 </div>
 
-<style lang="scss">
+<style>
   .rhd {
           transform: scaleX(-1);
   }

package/src/components/Header/Header.astro

@@ -55,160 +55,156 @@ import Search from "astro-pagefind/components/Search";
   </nav>
 </header>
 
-<style lang="scss" is:global>
-  #search {
-    @apply ml-6;
-
-    &.search-container {
-      box-sizing: border-box;
-      @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
-    }
-    .pagefind-ui {
-      @apply font-textlight text-base;
-
-      &__search-input {
-        height: 40px !important;
-        border: 0;
-        @apply rounded-none sm-rounded-3xl h-10 w-full;
-      }
-
-      &__result-excerpt,
-      __button {
-        font-size: 14px !important;
-      }
+<style  is:global>
+#search {
+  @apply ml-6;
+}
+
+.search-container {
+  box-sizing: border-box;
+  @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
+}
+
+.pagefind-ui {
+  @apply font-textlight text-base;
+}
+
+.pagefind-ui__search-input {
+  height: 40px !important;
+  border: 0;
+  @apply rounded-none sm:rounded-3xl h-10 w-full;
+}
+
+.pagefind-ui__result-excerpt,
+.pagefind-ui__button {
+  font-size: 14px !important;
+}
+
+.pagefind-ui__filter-name {
+  font-size: 12px !important;
+}
+
+.pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  @apply p-4;
+}
+
+.pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+  font-family: vw_headlight;
+  font-size: 1rem;
+}
+
+.pagefind-ui__result-link::before {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: "";
+  position: absolute;
+}
+
+.pagefind-ui__result-excerpt {
+  color: var(--pagefind-ui-text);
+  order: 3;
+}
+
+.pagefind-ui__drawer {
+  @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];
+}
+
+.pagefind-ui__search-clear {
+  height: 38px;
+  top: 0;
+  @apply sm:rounded-3xl;
+}
+
+.pagefind-ui__search-input {
+  font-size: 1rem;
+  font-weight: 400;
+  padding: 0 2.5rem 2px;
+}
+
+.pagefind-ui__form::before {
+  top: 14px;
+  left: 16px;
+  width: 14px;
+  height: 14px;
+}
+
+.pagefind-ui__result {
+  padding: 0.875rem 0;
+  gap: 1rem;
+  @apply relative;
+}
+
+.pagefind-ui__filter-block {
+  padding: 0.875rem 0;
+  border-width: 1px;
+}
+
+.pagefind-ui__filter-group {
+  gap: 0.5rem;
+  padding-top: 0.875rem;
+}
+
+.pagefind-ui__filter-value {
+  gap: 10px;
+}
+
+.pagefind-ui__filter-checkbox {
+  border-radius: 3px;
+  margin-top: 1px;
+  min-width: calc(16px * var(--pagefind-ui-scale));
+}
+
+.pagefind-ui__result-image {
+  @apply drop-shadow-sm w-full h-full object-contain rounded-none;
+}
+
+.pagefind-ui__filter-panel {
+  @apply hidden;
+}
+
+.pagefind-ui__filter-label {
+  font-size: 0.9rem;
+}
+
+.pagefind-ui__button {
+  font-weight: 400;
+  height: 40px;
+}
+
+.pagefind-ui__result-tag {
+  background: inherit;
+  padding: 0;
+  color: #9ca3af;
+}
+
+.pagefind-ui__result-thumb {
+  max-width: 120px;
+}
+
+.pagefind-ui__result-tags {
+  margin-top: 0.4rem;
+  order: 2;
+}
+
+.pagefind-ui__filter-name::after {
+  color: var(--pagefind-ui-primary);
+}
+
+.pagefind-ui__result-title {
+  font-size: inherit;
+  line-height: 1;
+}
+
+.pagefind-ui__filter-panel,
+.pagefind-ui__results-area {
+  margin-top: 0;
+}
+
+.pagefind-ui__message {
+  padding: 0.875rem 0;
+}
 
-      &__filter-name {
-        font-size: 12px !important;
-      }
-      &__drawer:not(.pagefind-ui__hidden) {
-        @apply p-4;
-      }
-
-      &__result-link {
-        color: var(--pagefind-ui-primary);
-        // font-family: 'vw_headregular';
-        font-family: vw_headlight;
-        font-size: 1rem;
-
-        &:before {
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          content: "";
-          position: absolute;
-        }
-      }
-
-      &__result-excerpt {
-        color: var(--pagefind-ui-text);
-        order: 3;
-      }
-
-      &__drawer {
-        @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%)];
-        gap: 30px;
-      }
-
-      &__search-clear {
-        height: 38px;
-        top: 0;
-        @apply sm-rounded-3xl;
-      }
-
-      &__search-input {
-        font-size: 1rem;
-        font-weight: 400;
-        padding: 0 2.5rem 2px;
-      }
-
-      &__form {
-        &:before {
-          top: 14px;
-          left: 16px;
-          width: 14px;
-          height: 14px;
-        }
-      }
-
-      &__result {
-        padding: 0.875rem 0;
-        gap: 1rem;
-        @apply position-relative;
-      }
-
-      &__filter-block {
-        padding: 0.875rem 0;
-        border-width: 1px;
-      }
-
-      &__filter-group {
-        gap: 0.5rem;
-        padding-top: 0.875rem;
-      }
-
-      &__filter-value {
-        gap: 10px;
-      }
-
-      &__filter-checkbox {
-        border-radius: 3px;
-        margin-top: 1px;
-        min-width: calc(16px * var(--pagefind-ui-scale));
-      }
-
-      &__result-image {
-        @apply drop-shadow-sm w-full h-full object-contain rounded-none;
-      }
-
-      &__filter-panel {
-        // min-width: 220px;
-        @apply hidden;
-      }
-
-      &__filter-label {
-        font-size: 0.9rem;
-      }
-
-      &__button {
-        font-weight: 400;
-        height: 40px;
-      }
-
-      &__result-tag {
-        background: inherit;
-        padding: 0;
-        color: #9ca3af;
-      }
-
-      &__result-thumb {
-        max-width: 120px;
-      }
-
-      &__result-tags {
-        margin-top: 0.4rem;
-        order: 2;
-      }
-
-      &__filter-name {
-        &:after {
-          color: var(--pagefind-ui-primary);
-        }
-      }
-
-      &__result-title {
-        font-size: inherit;
-        line-height: 1;
-      }
-
-      &__filter-panel,
-      &__results-area {
-        margin-top: 0;
-      }
-
-      &__message {
-        padding: 0.875rem 0;
-      }
-    }
-  }
 </style>

package/src/components/Headline.vue

@@ -27,7 +27,7 @@ const props = defineProps({
   </component>
 </template>
 
-<style lang="scss">
+<style>
 .headline--underline {
   @apply relative pb-4;
 

package/src/components/Jumbatron.vue

@@ -32,7 +32,7 @@ const props = defineProps({
       </div>
     </header>
 </template>
-<style lang="scss">
+<style>
 .bg-vw {
   background: radial-gradient(circle at 50% 85%,
       #00437A 0%,

package/src/components/Modal.astro

@@ -3,7 +3,7 @@ const { id, open } = Astro.props;
 import Button from "../components/Button.vue";
 ---
 
-<style lang="scss">
+<style >
   dialog {
     @apply fixed top-0 left-0 right-0 bottom-0;
 

package/src/components/PostHeader.astro

@@ -52,7 +52,7 @@ import Date from "./Date.astro";
   </div>
 </header>
 
-<style lang="scss">
+<style >
   .post-header {
     @apply flex relative items-center;
     min-height: 19vw;