Add description

README.md

@@ -0,0 +1,17 @@
+# Tabs #
+
+There are two options of tabs, firstly choose your version, with the scrollbar or vertical tabs for mobile.
+
+### How to use  ###
+
+When styling an element, call the .skeleton() mixin with required arguments:
+
+1. Copy less, js and xslt code from index.xslt and src directory into your component in .Composer
+2. Leave only necessary sections id in index.xslt. [data-tab] attribute is responsible for the tab that will be displayed after click. The id goes the same as in relevant component in .Composer
+3. Leave only required sectionIds in main.js
+4. Leave only required section ids in style.less
+5. Do not forget to show required components in .Composer 
+
+---
+
+Created by • **[IdoMods](https://idomods.pl/)** • 2025

mobile-scrollbar/src/style.less

@@ -1,18 +1,17 @@
-@keyframes slide-in {
+// Leave only necessary sections id
-  from {
+#projector_longdescription,
-    transform: scaleX(0);
+#projector_dictionary,
-  }
+#projector_enclosures,
-  to {
+#projector_warranty,
-    transform: scaleX(1);
+#product_questions_list,
-  }
+#opinions_section,
-}
+#projector_blog,
-
+#products_associated_zone1 {
-@keyframes slide-in-opacity {
+  display: none;
-  from {
+  animation: slide-in-opacity .3s ease;
-    opacity: 0;
+  padding-top: 5rem;
-  }
+  &.idm-active {
-  to {
+    display: block;
-    opacity: 1;
   }
 }
 
@@ -94,19 +93,20 @@
   }
 }
 
-// Leave only necessary sections id
+@keyframes slide-in {
-#projector_longdescription,
+  from {
-#projector_dictionary,
+    transform: scaleX(0);
-#projector_enclosures,
+  }
-#projector_warranty,
+  to {
-#product_questions_list,
+    transform: scaleX(1);
-#opinions_section,
+  }
-#projector_blog,
+}
-#products_associated_zone1 {
+
-  display: none;
+@keyframes slide-in-opacity {
-  animation: slide-in-opacity .3s ease;
+  from {
-  padding-top: 5rem;
+    opacity: 0;
-  &.idm-active {
+  }
-    display: block;
+  to {
+    opacity: 1;
   }
 }

mobile-tabs /src/style.less

@@ -1,9 +1,18 @@
-@keyframes slide-in-opacity {
+// Leave only necessary sections id
-  from {
+#projector_longdescription,
-    opacity: 0;
+#projector_dictionary,
-  }
+#projector_enclosures,
-  to {
+#projector_warranty,
-    opacity: 1;
+#product_questions_list,
+#opinions_section,
+#projector_blog,
+#products_associated_zone1 {
+  display: none;
+  animation: slide-in-opacity .3s ease;
+  padding-top: 5rem;
+
+  &.idm-active {
+    display: block;
   }
 }
 
@@ -94,20 +103,11 @@
   }
 }
 
-// Leave only necessary sections id
+@keyframes slide-in-opacity {
-#projector_longdescription,
+  from {
-#projector_dictionary,
+    opacity: 0;
-#projector_enclosures,
+  }
-#projector_warranty,
+  to {
-#product_questions_list,
+    opacity: 1;
-#opinions_section,
-#projector_blog,
-#products_associated_zone1 {
-  display: none;
-  animation: slide-in-opacity .3s ease;
-  padding-top: 5rem;
-
-  &.idm-active {
-    display: block;
   }
 }