Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: vertical tab with line #40

Merged
merged 8 commits into from
Nov 10, 2020
Merged

feat: vertical tab with line #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
73ecf33
feat: vertical tab with line
Nov 3, 2020
aeba9e2
feat: minor changes
Nov 5, 2020
af8f386
Merge branch 'development' into Feat/ca-tab-w-line
anshul-pinto0410 Nov 5, 2020
e95aec4
Merge branch 'development' of github.com:ClearTax/littlegiant into Fe…
Nov 6, 2020
bead28b
feat: medium font change
Nov 9, 2020
c7ae04e
Merge branch 'Feat/ca-tab-w-line' of github.com:ClearTax/littlegiant …
Nov 9, 2020
bba8b36
feat: updated tabs as per figma
Nov 9, 2020
38d3bdb
feat: resolved comments
Nov 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions docs/docs/line-tab.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
---
id: line-tab
title: Tabs With Line
sidebar_label: Tabs With Line
---

``` html live
<>
<div class="lil-flex">
<div class="lil-w-2/5 sm:lil-hidden">
<ul class="lil-vertical-tabs">
<li class="lil-vertical-tab lil-vertical-tab-active" onclick="verticalTabsWLine(event,'tab1')">
<a class="lil-vertical-tab-container">
<div class="lil-vertical-tab-line"></div>
<div class="lil-vertical-tab-content">
<div class="lil-w-1/6">
<img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604377557_icon_purple_house.png"/>
</div>
<div class="lil-w-5/6">
<div class="lil-vertical-tab-heading">Prepare </div>
</div>
<div class="lil-vertical-tab-writeup">
File in under 30 seconds with power workflows such as NIL
filing and auto-filed 3B and 9 Forms.
</div>
</div>
<span class="lil-vertical-tab-arrow">&#8594;</span>
</a>
</li>
<li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab2')">
<a class="lil-vertical-tab-container">
<div class="lil-vertical-tab-line"></div>
<div class="lil-vertical-tab-content">
<div class="lil-w-1/6">
<img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604377786_icon_pink_individual.png"/>
</div>
<div class="lil-w-5/6">
<div class="lil-vertical-tab-heading">Import </div>
</div>
<div class="lil-vertical-tab-writeup">
File in under 30 seconds with power workflows such as NIL
filing and auto-filed 3B and 9 Forms.
</div>
</div>
<span class="lil-vertical-tab-arrow">&#8594;</span>
</a>
</li>
<li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab3')">
<a class="lil-vertical-tab-container">
<div class="lil-vertical-tab-line"></div>
<div class="lil-vertical-tab-content">
<div class="lil-w-1/6">
<img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604380079_icon_blue_briefcase.png"/>
</div>
<div class="lil-w-5/6">
<div class="lil-vertical-tab-heading">Validate </div>
</div>
<div class="lil-vertical-tab-writeup">
File in under 30 seconds with power workflows such as NIL
filing and auto-filed 3B and 9 Forms.
</div>
</div>
<span class="lil-vertical-tab-arrow">&#8594;</span>
</a>
</li>
<li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab4')">
<a class="lil-vertical-tab-container">
<div class="lil-vertical-tab-line"></div>
<div class="lil-vertical-tab-content">
<div class="lil-w-1/6">
<img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604380129_icon_green_sme.png"/>
</div>
<div class="lil-w-5/6">
<div class="lil-vertical-tab-heading">File </div>
</div>
<div class="lil-vertical-tab-writeup">
File in under 30 seconds with power workflows such as NIL
filing and auto-filed 3B and 9 Forms.
</div>
</div>
<span class="lil-vertical-tab-arrow">&#8594;</span>
</a>
</li>
<li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab5')">
<a class="lil-vertical-tab-container">
<div class="lil-vertical-tab-line"></div>
<div class="lil-vertical-tab-content">
<div class="lil-w-1/6">
<img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604377557_icon_purple_house.png"/>
</div>
<div class="lil-w-5/6">
<div class="lil-vertical-tab-heading">Analyze </div>
</div>
<div class="lil-vertical-tab-writeup">
File in under 30 seconds with power workflows such as NIL
filing and auto-filed 3B and 9 Forms.
</div>
</div>
<span class="lil-vertical-tab-arrow">&#8594;</span>
</a>
</li>
</ul>
</div>
<div id="vertSlick" class="lil-w-3/5 lil-items-center lil-flex lil-justify-center sm:lil-w-full">
<div id="tab1" class="verticalTabsWLineContent lil-w-full lil-outline-none lil-flex lil-items-center lil-justify-center sm:lil-visible sm:lil-flex-col">
<h4 class="xl:lil-hidden lg:lil-hidden md:lil-hidden">Don't Get Started</h4>
<p class="xl:lil-hidden lg:lil-hidden md:lil-hidden">File in under 30 seconds with power workflows such as NIL
filing and auto-filed 3B and 9 Forms.</p>
<img src="https://assets1.cleartax-cdn.com/cleartax/images/1604314072_vert_tabs_line_mock.png"/>
</div>
</div>
</div>
</>
```
1 change: 1 addition & 0 deletions docs/sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ module.exports = {
label: "Tabs",
items: [
"tabs",
"line-tab",
"vertical-promise-tabs"
]
},
Expand Down
64 changes: 64 additions & 0 deletions src/components/Tabs/lineTab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
11 changes: 1 addition & 10 deletions src/components/Tabs/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment on lines -35 to -41
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it not causing regression ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only changed active styling for small screen here, checked for both home & individuals

@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;
}
Expand Down
1 change: 1 addition & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@
@import "./components/SideNav/sidenav.css";
@import "./components/Icons/tick.css";
@import "./components/Tabs/verticalPromiseTabs.css";
@import "./components/Tabs/lineTab.css";
1 change: 1 addition & 0 deletions src/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.lil-root,
#lil-root {
--blue-350: #1678FB;
--grey-100: #FAFAFA;
--grey-150: #F5F5F5;
--grey-175: #F7F8FA;
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ module.exports = {
200: "#8ABBFD",
250: "#7FB7FE",
300: "#2F89FC",
350: "#1678FB",
350: "var(--blue-350, #1678FB)",
anshul-pinto0410 marked this conversation as resolved.
Show resolved Hide resolved
400: "#185EB8",
450: "#0F54B0",
500: "#003273",
Expand Down