From 73ecf3366cbef849075324708d1437237cd29064 Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Tue, 3 Nov 2020 11:22:10 +0530 Subject: [PATCH 1/5] feat: vertical tab with line --- docs/docs/vertical-tab-w-line.md | 114 +++++++++++++++++++++++ docs/sidebars.js | 1 + src/components/Tabs/verticalTabWLine.css | 61 ++++++++++++ src/index.css | 1 + src/variables.css | 1 + tailwind.config.js | 2 +- 6 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 docs/docs/vertical-tab-w-line.md create mode 100644 src/components/Tabs/verticalTabWLine.css diff --git a/docs/docs/vertical-tab-w-line.md b/docs/docs/vertical-tab-w-line.md new file mode 100644 index 0000000..a73a1bb --- /dev/null +++ b/docs/docs/vertical-tab-w-line.md @@ -0,0 +1,114 @@ +--- +id: vertical-tabs-w-line +title: Vertical Tabs With Line +sidebar_label: Vertical Tabs With Line +--- + +``` html live +<> +
+
+ +
+
+
+

Don't Get Started

+

File in under 30 seconds with power workflows such as NIL + filing and auto-filed 3B and 9 Forms.

+ +
+
+
+ +``` diff --git a/docs/sidebars.js b/docs/sidebars.js index 4ab6270..f52844d 100755 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -37,6 +37,7 @@ module.exports = { label: "Tabs", items: [ "tabs", + "vertical-tabs-w-line", "vertical-promise-tabs" ] }, diff --git a/src/components/Tabs/verticalTabWLine.css b/src/components/Tabs/verticalTabWLine.css new file mode 100644 index 0000000..722facd --- /dev/null +++ b/src/components/Tabs/verticalTabWLine.css @@ -0,0 +1,61 @@ +.lil-vertical-tabs{ + @apply lil-list-none lil-inline-block lil-overflow-x-auto; +} +.lil-vertical-tabs .lil-vertical-tab{ + min-height:100px; + @apply lil-opacity-50 lil-flex lil-whitespace-normal lil-cursor-pointer lil-outline-none; +} +.lil-vertical-tab .lil-vertical-tab-container{ + @apply lil-flex lil-items-center lil-w-full lil-border-l-xl lil-border-font-200 lil-pb-5 lil-flex-wrap; +} +.lil-vertical-tabs li:last-child .lil-vertical-tab-container{ + @apply lil-pb-0; +} +.lil-vertical-tab-container .lil-vertical-tab-content{ + @apply lil-border-b-sm lil-border-font-200 lil-flex lil-items-center lil-h-full lil-justify-between lil-w-10/12 lil-pb-6 lil-flex-wrap; +} +.lil-vertical-tab-container .lil-vertical-tab-line{ + border-bottom: none; + @apply lil-flex lil-w-1/12 lil-h-full; +} + +.lil-vertical-tab .lil-vertical-tab-heading{ + @apply lil-text-s-20 lil-text-font-500 lil-w-full; +} + +.lil-vertical-tab .lil-vertical-tab-arrow{ + @apply lil-text-s-24 lil-text-font-500 lil-h-full lil-flex lil-items-center lil-w-1/12 lil-pb-6 lil-border-b-sm lil-border-font-200; +} + +.lil-vertical-tab .lil-vertical-tab-writeup{ + @apply lil-hidden lil-w-full; +} + +.lil-vertical-tabs .lil-vertical-tab-active{ + @apply lil-opacity-100; +} + +.lil-vertical-tab-active .lil-vertical-tab-heading{ + @apply lil-text-s-24 lil-font-bold; +} +.lil-vertical-tab-active .lil-vertical-tab-container{ + @apply lil-items-start lil-border-opacity-50; +} +.lil-vertical-tab-active .lil-vertical-tab-line{ + /*These values are to allign the line and give proper height*/ + margin-left: -4px; + height: 80%; + @apply lil-border-l-xl lil-border-blue-350; +} + +.lil-vertical-tab-active .lil-vertical-tab-content{ + @apply lil-border-opacity-50 lil-w-11/12; +} + +.lil-vertical-tab-active .lil-vertical-tab-arrow{ + @apply lil-hidden; +} + +.lil-vertical-tab-active .lil-vertical-tab-writeup{ + @apply lil-flex lil-text-base lil-text-font-200 lil-py-3 lil-visible; +} diff --git a/src/index.css b/src/index.css index 0f16a51..6ff30cc 100644 --- a/src/index.css +++ b/src/index.css @@ -14,4 +14,5 @@ @import "./components/Common/caret.css"; @import "./components/SideNav/sidenav.css"; @import "./components/Tabs/verticalPromiseTabs.css"; +@import "./components/Tabs/verticalTabWLine.css"; diff --git a/src/variables.css b/src/variables.css index d64a04b..a00e1ad 100644 --- a/src/variables.css +++ b/src/variables.css @@ -12,6 +12,7 @@ --grey-500: #8B8F99; --grey-550: #686D77; --grey-600: #23282E; + --blue-350: #1678FB; /* Box shadow */ --shadow-xl:rgba(164, 172, 179, 0.2); /* */ diff --git a/tailwind.config.js b/tailwind.config.js index bbeeecb..f779c58 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,7 +9,7 @@ module.exports = { 200: "#8ABBFD", 250: "#7FB7FE", 300: "#2F89FC", - 350: "#1678FB", + 350: "var(--blue-350, #1678FB)", 400: "#185EB8", 450: "#0F54B0", 500: "#003273", From aeba9e2d131cb3d2b4801cded77755a3f57ec521 Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Thu, 5 Nov 2020 16:28:59 +0530 Subject: [PATCH 2/5] feat: minor changes --- src/components/Tabs/verticalTabWLine.css | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/Tabs/verticalTabWLine.css b/src/components/Tabs/verticalTabWLine.css index 722facd..299daa5 100644 --- a/src/components/Tabs/verticalTabWLine.css +++ b/src/components/Tabs/verticalTabWLine.css @@ -6,13 +6,10 @@ @apply lil-opacity-50 lil-flex lil-whitespace-normal lil-cursor-pointer lil-outline-none; } .lil-vertical-tab .lil-vertical-tab-container{ - @apply lil-flex lil-items-center lil-w-full lil-border-l-xl lil-border-font-200 lil-pb-5 lil-flex-wrap; + @apply lil-flex lil-items-center lil-w-full lil-border-l-xl lil-border-font-200 lil-flex-wrap; } -.lil-vertical-tabs li:last-child .lil-vertical-tab-container{ - @apply lil-pb-0; -} .lil-vertical-tab-container .lil-vertical-tab-content{ - @apply lil-border-b-sm lil-border-font-200 lil-flex lil-items-center lil-h-full lil-justify-between lil-w-10/12 lil-pb-6 lil-flex-wrap; + @apply lil-border-b-sm lil-border-font-200 lil-flex lil-items-center lil-h-full lil-justify-between lil-w-10/12 lil-py-5 lil-flex-wrap; } .lil-vertical-tab-container .lil-vertical-tab-line{ border-bottom: none; @@ -24,13 +21,13 @@ } .lil-vertical-tab .lil-vertical-tab-arrow{ - @apply lil-text-s-24 lil-text-font-500 lil-h-full lil-flex lil-items-center lil-w-1/12 lil-pb-6 lil-border-b-sm lil-border-font-200; + @apply lil-text-s-24 lil-text-font-500 lil-h-full lil-flex lil-items-center lil-w-1/12 lil-py-5 lil-border-b-sm lil-border-font-200; } .lil-vertical-tab .lil-vertical-tab-writeup{ @apply lil-hidden lil-w-full; } - +/*Defining the behaviour for tab when active*/ .lil-vertical-tabs .lil-vertical-tab-active{ @apply lil-opacity-100; } From bead28b8a2f108251edfcefde28bcd2d7293b273 Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Mon, 9 Nov 2020 10:51:57 +0530 Subject: [PATCH 3/5] feat: medium font change --- src/components/Tabs/verticalTabWLine.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Tabs/verticalTabWLine.css b/src/components/Tabs/verticalTabWLine.css index 299daa5..c20e307 100644 --- a/src/components/Tabs/verticalTabWLine.css +++ b/src/components/Tabs/verticalTabWLine.css @@ -56,3 +56,9 @@ .lil-vertical-tab-active .lil-vertical-tab-writeup{ @apply lil-flex lil-text-base lil-text-font-200 lil-py-3 lil-visible; } + +@screen md{ + .lil-vertical-tab-active .lil-vertical-tab-heading{ + @apply lil-text-s-20; + } +} From bba8b36e30edb3cdb530401df895775c7fff974c Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Mon, 9 Nov 2020 16:25:34 +0530 Subject: [PATCH 4/5] feat: updated tabs as per figma --- src/components/Tabs/tabs.css | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/Tabs/tabs.css b/src/components/Tabs/tabs.css index 2b1f472..17834fe 100644 --- a/src/components/Tabs/tabs.css +++ b/src/components/Tabs/tabs.css @@ -32,20 +32,11 @@ } .lil-tabs > .lil-tab { min-width: 150px; - @apply lil-text-base lil-mr-2 lil-rounded-md; - } - .lil-tabs .lil-tab-active { - @apply lil-bg-blue-350; - } - .lil-tab-active .lil-tab-heading-text { - @apply lil-text-white; + @apply lil-text-base lil-mr-2; } .lil-tab > a:first-child { @apply lil-py-1; } - .lil-tab > a:hover, a:active { - @apply lil-text-white; - } .lil-tab .lil-tab-icon { @apply lil-w-5 lil-h-5 lil-inline lil-mr-2; } From 38d3bdb1a0a77a8d2c73e2ef3a5e3e53ca65d4b8 Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Tue, 10 Nov 2020 13:52:24 +0530 Subject: [PATCH 5/5] feat: resolved comments --- .../docs/{vertical-tab-w-line.md => line-tab.md} | 16 ++++++++-------- docs/sidebars.js | 2 +- .../Tabs/{verticalTabWLine.css => lineTab.css} | 2 +- src/index.css | 2 +- src/variables.css | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) rename docs/docs/{vertical-tab-w-line.md => line-tab.md} (92%) rename src/components/Tabs/{verticalTabWLine.css => lineTab.css} (95%) diff --git a/docs/docs/vertical-tab-w-line.md b/docs/docs/line-tab.md similarity index 92% rename from docs/docs/vertical-tab-w-line.md rename to docs/docs/line-tab.md index a73a1bb..7e4c6db 100644 --- a/docs/docs/vertical-tab-w-line.md +++ b/docs/docs/line-tab.md @@ -1,7 +1,7 @@ --- -id: vertical-tabs-w-line -title: Vertical Tabs With Line -sidebar_label: Vertical Tabs With Line +id: line-tab +title: Tabs With Line +sidebar_label: Tabs With Line --- ``` html live @@ -24,7 +24,7 @@ sidebar_label: Vertical Tabs With Line filing and auto-filed 3B and 9 Forms. -
→
+ →
  • @@ -42,7 +42,7 @@ sidebar_label: Vertical Tabs With Line filing and auto-filed 3B and 9 Forms. -
    →
    + →
  • @@ -60,7 +60,7 @@ sidebar_label: Vertical Tabs With Line filing and auto-filed 3B and 9 Forms. -
    →
    + →
  • @@ -78,7 +78,7 @@ sidebar_label: Vertical Tabs With Line filing and auto-filed 3B and 9 Forms. -
    →
    + →
  • @@ -96,7 +96,7 @@ sidebar_label: Vertical Tabs With Line filing and auto-filed 3B and 9 Forms. -
    →
    + →
    • diff --git a/docs/sidebars.js b/docs/sidebars.js index 37fcf8d..432c191 100755 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -42,7 +42,7 @@ module.exports = { label: "Tabs", items: [ "tabs", - "vertical-tabs-w-line", + "line-tab", "vertical-promise-tabs" ] }, diff --git a/src/components/Tabs/verticalTabWLine.css b/src/components/Tabs/lineTab.css similarity index 95% rename from src/components/Tabs/verticalTabWLine.css rename to src/components/Tabs/lineTab.css index c20e307..9398e58 100644 --- a/src/components/Tabs/verticalTabWLine.css +++ b/src/components/Tabs/lineTab.css @@ -6,7 +6,7 @@ @apply lil-opacity-50 lil-flex lil-whitespace-normal lil-cursor-pointer lil-outline-none; } .lil-vertical-tab .lil-vertical-tab-container{ - @apply lil-flex lil-items-center lil-w-full lil-border-l-xl lil-border-font-200 lil-flex-wrap; + @apply lil-flex lil-w-full lil-border-l-xl lil-border-font-200 lil-flex-wrap; } .lil-vertical-tab-container .lil-vertical-tab-content{ @apply lil-border-b-sm lil-border-font-200 lil-flex lil-items-center lil-h-full lil-justify-between lil-w-10/12 lil-py-5 lil-flex-wrap; diff --git a/src/index.css b/src/index.css index 94a9fd4..18c8195 100644 --- a/src/index.css +++ b/src/index.css @@ -15,4 +15,4 @@ @import "./components/SideNav/sidenav.css"; @import "./components/Icons/tick.css"; @import "./components/Tabs/verticalPromiseTabs.css"; -@import "./components/Tabs/verticalTabWLine.css"; +@import "./components/Tabs/lineTab.css"; diff --git a/src/variables.css b/src/variables.css index a00e1ad..f635c49 100644 --- a/src/variables.css +++ b/src/variables.css @@ -1,5 +1,6 @@ .lil-root, #lil-root { + --blue-350: #1678FB; --grey-100: #FAFAFA; --grey-150: #F5F5F5; --grey-175: #F7F8FA; @@ -12,7 +13,6 @@ --grey-500: #8B8F99; --grey-550: #686D77; --grey-600: #23282E; - --blue-350: #1678FB; /* Box shadow */ --shadow-xl:rgba(164, 172, 179, 0.2); /* */