feat: vertical tab with line #40

anshul-pinto0410 · 2020-11-03T05:54:07Z

Checklist

PR is up-to-date with a description of changes and screenshots (if applicable).
All files are lint-free.
Followed Semantic PR guidelines.
Tested locally for regressions.

…at/ca-tab-w-line

…into Feat/ca-tab-w-line

docs/sidebars.js

pritam248 · 2020-11-09T14:12:47Z

src/components/Tabs/tabs.css

-        @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;


is it not causing regression ?

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

src/components/Tabs/verticalTabWLine.css

pritam248 · 2020-11-09T14:16:16Z

src/components/Tabs/verticalTabWLine.css

+}
+
+.lil-vertical-tab-active .lil-vertical-tab-writeup{
+    @apply lil-flex lil-text-base lil-text-font-200 lil-py-3 lil-visible;


lil-visible this is for ?

in acitve state of tab, the description is visible in CTA where as it is hidden in the other case

src/variables.css

tailwind.config.js

docs/docs/vertical-tab-w-line.md

pritam248 · 2020-11-09T14:20:28Z

docs/docs/vertical-tab-w-line.md

+        <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>


y cant we left border for tab ? 🤔

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 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 is also a part where there is no bottom border

👀

* chore: updated dependencies * Feat/components setup (#2) * feat: added btn, text, cards component * feat: updated doc for fontsize * feat: styling changes for promise content * feat: responsive font-size for header tag * feat: btn display, promise card 4 col view * fix: removed custom font * feat: promise vertical, btn white component (#4) * feat: added faq and press cards (#5) * feat: added faq and press cards * feat: solved comments * feat: added reinforcement card * feat: fixed comments * feat: fixed more comments Co-authored-by: anshul-pinto0410 <[email protected]> * feat: color, font color standardisation (#9) * Feat/Tabs component (#7) * feat: tabs componentn css classes * added eof * removed subheading in tab docs * chore: updated tab color * feat: container config (#10) * Feat/Carousel card, Textbox, bg with color standardisation (#8) * feat: added faq and press cards * feat: solved comments * feat: added reinforcement card * feat: fixed comments * feat: fixed more comments * feat: carousel card * feat: input field added/fixed focus effect on buttons * feat: updated all colors with standard set * feat: removed wrappers and resolved comments Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * Feat/new UX changes, fixes for existing components (#11) * feat: new UX changes, fixes for existing components * fix: added EOF for common.css * fix: added EOF for navbar.css * Feat/design updates (#12) * feat: added faq and press cards * feat: solved comments * feat: added reinforcement card * feat: fixed comments * feat: fixed more comments * feat: carousel card * feat: input field added/fixed focus effect on buttons * feat: updated all colors with standard set * feat: removed wrappers and resolved comments * feat: Made design changes * feat: resolved comments * feat: changed card width * feat: changed card width Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * feat: updated carousel (#14) Co-authored-by: anshul-pinto0410 <[email protected]> * feat: font weight standards (#16) * fix: size, margin for card, added padding for container resposiveness (#18) * Feat/Dropdown component (#15) * feat: dropdown for navbar, fix tabs zindex * fix: top position for dropdown * feat: variables for colors fix: dropdown styling issues * fix: EOF for variables, lilgiant css * feat: updated font (#17) * feat:font changes and minor design changes * feat:EOF common.css * feat: updated header color added round button * feat: resolved comments * feat: resolved comments * feat: added min width in config plus minor changes * feat: resolved comments Co-authored-by: anshul-pinto0410 <[email protected]> * Feat/header responsiveness (#19) * feat: added toggle navbar, sidenav * feat: added details styling, sidebar fix, navbar close icon css * Feat/Added sidebar, caret, toggle for nav (#20) * feat: added toggle navbar, sidenav * feat: added details styling, sidebar fix, navbar close icon css * fix: removed horizontal margin for nav links * fix: sidebar opening/close css class (#21) * Feat/bug fixes (#22) * feat: Minor bug fixes * feat: changes to accomodate interactions * feat: removed extra css * feat: resolved comments Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * fix: md styling for normal cards (#23) * feat: added no outline class for interactive components (#24) Co-authored-by: anshul-pinto0410 <[email protected]> * feat: added fallback colors for css var (#25) * fix: proper container alignment for all screen (#27) * fix: vertical alignment for containers (#28) * feat: header height fix plus caret (#26) * feat: header height fix plus caret * feat: updated caret with css style * feat: changed arrow dir * feat: solved caret colour issue Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * feat: fixed testimonial (#29) Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * Fix/Default cards content styling (#31) * fix: default card styling * fix: tab active font color * feat: added bg blur class for navbar * feat: updated components from feedback (#30) Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * feat: added accordian caret (#32) * feat: fixed hover effects on tabs (#33) Co-authored-by: anshul-pinto0410 <[email protected]> * fix: nav bar dropdown styling fixes (#34) * fix: nav bar dropdown styling fixes * feat: remove hover effect on nav menu * fix: caret naming class, position * feat: made component for brands and added max w in config (#35) * feat: made component for brands and added max w in config * feat: removed max w config * feat: updated docs Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * fix: nav menu, carousel card, card (#36) * Feat/ca vertical promise (#38) * feat: vertical promise tabs * feat: cherry pick * feat: resolved commit added blue color for tab Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * Feat/added tick mark (#39) * feat:added tick * feat: added tick mark * feat: resolved comments Co-authored-by: anshul-pinto0410 <[email protected]> * 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 <[email protected]> * Feat/Rounded tabs (#42) * feat: added rounded tabs styling * fix: branding txt alignment * feat: modal component, select tag styling (#43) * feat: modal component, select tag styling * fix: modal top position, max height * feat: product card ca section 3 (#41) * feat: product card ca section 3 * feat: resolved comments Co-authored-by: anshul-pinto0410 <[email protected]> * fix: sticky for capsule tab (#44) * feat: added clearsky shade (#45) * feat: new xl tick- button rnd- table (#46) * feat: new xl tick- button rnd- table * feat: resolved comments * feat: added doc for button * feat: custom class for table resolved comments * feat: fixed comment Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * feat: added green shade (#47) * feat: minor changes to accomodate new assets (#48) Co-authored-by: anshul-pinto0410 <[email protected]> * feat: feedback changes (#49) * feat: feedback changes * feat: branding changes * feat: guitar pick * feat: remove guitar pick add max width config Co-authored-by: anshul-pinto0410 <[email protected]> * fix: Carousel & tab fixes (#50) * feat: corresponding changes w Subham * feat:resolved comments Co-authored-by: anshul-pinto0410 <[email protected]> * feat: added support for ie (#51) * feat: added support for ie * fix: reverted navbar bg change * MARKTECH-628 addition of verticle flat tabs * MARKTECH-628 addition of custom grey color * MARKTECH-628 addition of custom shadow * MARKTECH-628 review changes * feat: review changes * feat: branding for enterprise page (#52) Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Pritam Sinha <[email protected]> * Documentation - change log added (#55) * Feat: change log added * feat: semantic comment Co-authored-by: anshul-pinto0410 <[email protected]> * chore: updated version n css (#56) Co-authored-by: Anshul Pinto <[email protected]> Co-authored-by: anshul-pinto0410 <[email protected]> Co-authored-by: Shivaprasad <[email protected]> Co-authored-by: Shivaprasad <[email protected]>

feat: vertical tab with line

73ecf33

anshul-pinto0410 requested a review from pritam248 November 3, 2020 05:57

anshul-pinto0410 and others added 3 commits November 5, 2020 16:28

feat: minor changes

aeba9e2

Merge branch 'development' into Feat/ca-tab-w-line

af8f386

Merge branch 'development' of github.com:ClearTax/littlegiant into Fe…

e95aec4

…at/ca-tab-w-line

anshul-pinto0410 requested a review from shivaprasadks November 6, 2020 08:14

anshul-pinto0410 added 3 commits November 9, 2020 10:51

feat: medium font change

bead28b

Merge branch 'Feat/ca-tab-w-line' of github.com:ClearTax/littlegiant …

c7ae04e

…into Feat/ca-tab-w-line

feat: updated tabs as per figma

bba8b36

pritam248 reviewed Nov 9, 2020

View reviewed changes

docs/docs/vertical-tab-w-line.md Outdated Show resolved Hide resolved

pritam248 reviewed Nov 9, 2020

View reviewed changes

feat: resolved comments

38d3bdb

pritam248 approved these changes Nov 10, 2020

View reviewed changes

anshul-pinto0410 merged commit a01046f into development Nov 10, 2020

anshul-pinto0410 deleted the Feat/ca-tab-w-line branch November 10, 2020 08:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: vertical tab with line #40

feat: vertical tab with line #40

anshul-pinto0410 commented Nov 3, 2020 •

edited by shivaprasadks

Loading

pritam248 Nov 9, 2020

anshul-pinto0410 Nov 10, 2020

pritam248 Nov 9, 2020

anshul-pinto0410 Nov 10, 2020

pritam248 Nov 9, 2020

anshul-pinto0410 Nov 10, 2020

anshul-pinto0410 Nov 10, 2020

anshul-pinto0410 Nov 10, 2020

pritam248 Nov 10, 2020 •

edited

Loading

feat: vertical tab with line #40

feat: vertical tab with line #40

Conversation

anshul-pinto0410 commented Nov 3, 2020 • edited by shivaprasadks Loading

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pritam248 Nov 10, 2020 • edited Loading

Choose a reason for hiding this comment

anshul-pinto0410 commented Nov 3, 2020 •

edited by shivaprasadks

Loading

pritam248 Nov 10, 2020 •

edited

Loading