feat: vertical tab with line #40
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| --- | ||
| id: vertical-tabs-w-line | ||
| title: Vertical Tabs With Line | ||
| sidebar_label: Vertical 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> | ||
| <div class="lil-vertical-tab-arrow">→</div> | ||
| </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> | ||
| <div class="lil-vertical-tab-arrow">→</div> | ||
anshul-pinto0410 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </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> | ||
| <div class="lil-vertical-tab-arrow">→</div> | ||
| </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> | ||
| <div class="lil-vertical-tab-arrow">→</div> | ||
| </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> | ||
| <div class="lil-vertical-tab-arrow">→</div> | ||
| </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> | ||
| </> | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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-items-center lil-w-full lil-border-l-xl lil-border-font-200 lil-flex-wrap; | ||
anshul-pinto0410 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| .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; | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. in acitve state of tab, the description is visible in CTA where as it is hidden in the other case |
||
| } | ||
|
|
||
| @screen md{ | ||
| .lil-vertical-tab-active .lil-vertical-tab-heading{ | ||
| @apply lil-text-s-20; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
y cant we left border for tab ? 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tried this, actually there are two left borders of grey and blue for active tab, the blue one is not of full height so we have a separate element of border height
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there is also a part where there is no bottom border, hence it's more straight forward using another element, tried using margins to simulate this but didn't work properly, if I but the bottom border for the parent we won't be able to have that space in between, and if bottom border is for current element then the height of left border becomes full
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀