From 0685823253697305f995d4c397333b088d4a049d Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Thu, 29 Oct 2020 17:58:48 +0530 Subject: [PATCH 1/3] feat: vertical promise tabs --- docs/docs/vertical-promise-tabs.md | 49 +++++++++++++++++++++ src/components/Tabs/verticalPromiseTabs.css | 21 +++++++++ 2 files changed, 70 insertions(+) create mode 100644 docs/docs/vertical-promise-tabs.md create mode 100644 src/components/Tabs/verticalPromiseTabs.css diff --git a/docs/docs/vertical-promise-tabs.md b/docs/docs/vertical-promise-tabs.md new file mode 100644 index 0000000..4a49e07 --- /dev/null +++ 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 +<> +
+
+ +
+
+

Content

+
+
+ +``` diff --git a/src/components/Tabs/verticalPromiseTabs.css b/src/components/Tabs/verticalPromiseTabs.css new file mode 100644 index 0000000..def0043 --- /dev/null +++ b/src/components/Tabs/verticalPromiseTabs.css @@ -0,0 +1,21 @@ +.lil-vertical-promise-tabs{ + @apply lil-list-none lil-overflow-x-auto lil-sticky; +} +.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-100 lil-bg-opacity-25; +} + +@screen sm { + .lil-vertical-promise-tabs { + @apply lil-flex lil-overflow-x-auto; + } + + .lil-vertical-promise-tabs > .lil-promise-tab{ + min-width: 300px; + } +} From 9f7787d3b75b312df120e3befc5931bd01077d88 Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Thu, 29 Oct 2020 18:27:50 +0530 Subject: [PATCH 2/3] feat: cherry pick --- docs/sidebars.js | 9 ++++++++- src/index.css | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/sidebars.js b/docs/sidebars.js index 88dc8e2..4ab6270 100755 --- 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/index.css b/src/index.css index 2153a6d..0f16a51 100644 --- 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"; + From 1be13e37acb19e4f61366d6eea94d1accbcb78cf Mon Sep 17 00:00:00 2001 From: anshul-pinto0410 Date: Fri, 30 Oct 2020 13:25:52 +0530 Subject: [PATCH 3/3] feat: resolved commit added blue color for tab --- src/components/Tabs/verticalPromiseTabs.css | 4 ++-- tailwind.config.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Tabs/verticalPromiseTabs.css b/src/components/Tabs/verticalPromiseTabs.css index def0043..f4e4754 100644 --- a/src/components/Tabs/verticalPromiseTabs.css +++ b/src/components/Tabs/verticalPromiseTabs.css @@ -1,5 +1,5 @@ .lil-vertical-promise-tabs{ - @apply lil-list-none lil-overflow-x-auto lil-sticky; + @apply lil-list-none lil-overflow-x-auto; } .lil-vertical-promise-tabs > .lil-promise-tab{ min-height:100px; @@ -7,7 +7,7 @@ } .lil-vertical-promise-tabs .lil-promise-tab-active{ - @apply lil-opacity-100 lil-bg-blue-100 lil-bg-opacity-25; + @apply lil-opacity-100 lil-bg-blue-50; } @screen sm { diff --git a/tailwind.config.js b/tailwind.config.js index 75b161e..5eeb414 100644 --- 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",