Feat/ca vertical promise (#38)

* feat: vertical promise tabs * feat: cherry pick * feat: resolved commit added blue color for tab Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]>
ClearTax · Oct 30, 2020 · 853d9a4 · 853d9a4
1 parent be40531
commit 853d9a4
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 1 deletion.
diff --git a/docs/docs/vertical-promise-tabs.md b/docs/docs/vertical-promise-tabs.md
@@ -0,0 +1,49 @@
+---
+id: vertical-promise-tabs
+title: Vertical Promise Tabs
+sidebar_label: Vertical Promise Tabs
+---
+
+``` html live
+<>
+<div class="lil-flex">
+    <div class="lil-w-1/3">
+        <ul class="lil-vertical-promise-tabs">
+            <li class="lil-promise-tab">
+                <a class="lil-flex lil-items-center">
+                    <div class="lil-w-1/5">
+                        <img src="https://assets1.cleartax-cdn.com/cleartax/images/1602839421_security_database_icon.png"/>
+                    </div>
+                    <div class="lil-w-4/5">
+                        <h6 class="sm:lil-text-s-20"> Saving for your clients </h6>
+                    </div>
+                </a>
+            </li>
+            <li class="lil-promise-tab lil-promise-tab-active">
+                <a class="lil-flex lil-items-center">
+                    <div class="lil-w-1/5">
+                        <img src="https://assets1.cleartax-cdn.com/cleartax/images/1602839421_security_database_icon.png"/>
+                    </div>
+                    <div class="lil-w-4/5">
+                        <h6 class="sm:lil-text-s-20"> Saving for your clients </h6>
+                    </div>
+                </a>
+            </li>
+            <li class="lil-promise-tab">
+                <a class="lil-flex lil-items-center">
+                    <div class="lil-w-1/5">
+                        <img src="https://assets1.cleartax-cdn.com/cleartax/images/1602839421_security_database_icon.png"/>
+                    </div>
+                    <div class="lil-w-4/5">
+                        <h6 class="sm:lil-text-s-20"> Saving for your clients </h6>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="lil-w-2/3 lil-items-center lil-flex lil-justify-center">
+        <h1>Content</h1>
+    </div>
+</div>
+</>
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -32,7 +32,14 @@ module.exports = {
         items: ["promise-h", "promise-v"],
       },
       "reinforcement",
-      "tabs",
+      {
+        type: "category",
+        label: "Tabs",
+        items: [
+          "tabs",
+          "vertical-promise-tabs"
+        ]
+      },
       {
         type: "category",
         label: "Typography",

diff --git a/src/components/Tabs/verticalPromiseTabs.css b/src/components/Tabs/verticalPromiseTabs.css
@@ -0,0 +1,21 @@
+.lil-vertical-promise-tabs{
+    @apply lil-list-none lil-overflow-x-auto;
+}
+.lil-vertical-promise-tabs > .lil-promise-tab{
+    min-height:100px;
+    @apply lil-bg-grey-100 lil-opacity-50 lil-p-5 lil-outline-none lil-flex lil-whitespace-normal lil-rounded-xl lil-cursor-pointer;
+}
+
+.lil-vertical-promise-tabs .lil-promise-tab-active{
+    @apply lil-opacity-100 lil-bg-blue-50;
+}
+
+@screen sm {
+    .lil-vertical-promise-tabs {
+        @apply lil-flex lil-overflow-x-auto;
+    }
+
+    .lil-vertical-promise-tabs > .lil-promise-tab{
+        min-width: 300px;
+    }
+}
diff --git a/src/index.css b/src/index.css
@@ -13,3 +13,5 @@
 @import "./components/Common/navbar.css";
 @import "./components/Common/caret.css";
 @import "./components/SideNav/sidenav.css";
+@import "./components/Tabs/verticalPromiseTabs.css";
+
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,7 @@ module.exports = {
     colors: {
       transparent: "transparent",
       blue: {
+        50:  "#F1F7FF",
         100: "#D0E4FE",
         150: "#CFE4FF",
         200: "#8ABBFD",