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 {
-  from {
-    transform: scaleX(0);
-  }
-  to {
-    transform: scaleX(1);
-  }
-}
-
-@keyframes slide-in-opacity {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+// Leave only necessary sections id
+#projector_longdescription,
+#projector_dictionary,
+#projector_enclosures,
+#projector_warranty,
+#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,19 +93,20 @@
   }
 }
 
-// Leave only necessary sections id
-#projector_longdescription,
-#projector_dictionary,
-#projector_enclosures,
-#projector_warranty,
-#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;
+@keyframes slide-in {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes slide-in-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }

mobile-tabs /src/style.less

@@ -1,9 +1,18 @@
-@keyframes slide-in-opacity {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+// Leave only necessary sections id
+#projector_longdescription,
+#projector_dictionary,
+#projector_enclosures,
+#projector_warranty,
+#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
-#projector_longdescription,
-#projector_dictionary,
-#projector_enclosures,
-#projector_warranty,
-#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;
+@keyframes slide-in-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }