From a01046f965416c2cd4274f6e778c3d0b02ce6fbc Mon Sep 17 00:00:00 2001 From: Anshul Pinto <70994472+anshul-pinto0410@users.noreply.github.com> Date: Tue, 10 Nov 2020 14:12:04 +0530 Subject: [PATCH] feat: vertical tab with line (#40) * feat: vertical tab with line * feat: minor changes * feat: medium font change * feat: updated tabs as per figma * feat: resolved comments Co-authored-by: anshul-pinto0410 --- docs/docs/line-tab.md | 114 ++++++++++++++++++++++++++++++++ docs/sidebars.js | 1 + src/components/Tabs/lineTab.css | 64 ++++++++++++++++++ src/components/Tabs/tabs.css | 11 +-- src/index.css | 1 + src/variables.css | 1 + tailwind.config.js | 2 +- 7 files changed, 183 insertions(+), 11 deletions(-) create mode 100644 docs/docs/line-tab.md create mode 100644 src/components/Tabs/lineTab.css diff --git a/docs/docs/line-tab.md b/docs/docs/line-tab.md new file mode 100644 index 0000000..7e4c6db --- /dev/null +++ b/docs/docs/line-tab.md @@ -0,0 +1,114 @@ +--- +id: line-tab +title: Tabs With Line +sidebar_label: 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 91f9e8c..432c191 100755 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -42,6 +42,7 @@ module.exports = { label: "Tabs", items: [ "tabs", + "line-tab", "vertical-promise-tabs" ] }, diff --git a/src/components/Tabs/lineTab.css b/src/components/Tabs/lineTab.css new file mode 100644 index 0000000..9398e58 --- /dev/null +++ b/src/components/Tabs/lineTab.css @@ -0,0 +1,64 @@ +.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-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; +} +.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-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; +} + +.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; +} + +@screen md{ + .lil-vertical-tab-active .lil-vertical-tab-heading{ + @apply lil-text-s-20; + } +} 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; } diff --git a/src/index.css b/src/index.css index 9f7750f..18c8195 100644 --- a/src/index.css +++ b/src/index.css @@ -15,3 +15,4 @@ @import "./components/SideNav/sidenav.css"; @import "./components/Icons/tick.css"; @import "./components/Tabs/verticalPromiseTabs.css"; +@import "./components/Tabs/lineTab.css"; diff --git a/src/variables.css b/src/variables.css index d64a04b..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; 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",