FIXED: Issue #29: Add feature to position TabLinks to the bottom of t…

…he TabLayout
SGNetworksIndia · Dec 10, 2022 · 493edbf · 493edbf
1 parent 0398ff4
commit 493edbf
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 8 deletions.
diff --git a/demos/tabs.html b/demos/tabs.html
@@ -18,6 +18,7 @@
 		<main>
 			<div class="sgn-container">
 				<div class="tab-layout">
+					<div class="tab-title">Example Tab (Top Links)</div>
 					<div class="tab-links">
 						<a class="tab-link" data-target-tab="1">Home</a>
 						<a class="tab-link" data-target-tab="2">Profile</a>
@@ -35,6 +36,68 @@
 						</div>
 					</div>
 				</div>
+				<div class="tab-layout bottom">
+					<div class="tab-title">Example Tab (Bottom Links)</div>
+					<div class="tab-view">
+						<div class="tab" data-tab="1">
+							This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+						</div>
+						<div class="tab" data-tab="2">
+							This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+						</div>
+						<div class="tab" data-tab="3">
+							This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+						</div>
+					</div>
+					<div class="tab-links">
+						<a class="tab-link" data-target-tab="1">Home</a>
+						<a class="tab-link" data-target-tab="2">Profile</a>
+						<a class="tab-link" data-target-tab="3">Contact</a>
+					</div>
+				</div>
+				<div class="tab-layout alt">
+					<div class="tab-title">Example Tab (Alt)</div>
+					<div class="tab-links">
+						<a class="tab-link" data-target-tab="1">Home</a>
+						<a class="tab-link" data-target-tab="2">Profile</a>
+						<a class="tab-link" data-target-tab="3">Contact</a>
+					</div>
+					<div class="tab-view">
+						<div class="tab" data-tab="1">
+							This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+						</div>
+						<div class="tab" data-tab="2">
+							This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+						</div>
+						<div class="tab" data-tab="3">
+							This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+						</div>
+					</div>
+				</div>
+				<div class="card">
+					<div class="card-header">Tab inside Card</div>
+					<div class="card-body">
+						<div class="tab-layout bottom">
+							<div class="tab-title">Example Tab (Bottom Links)</div>
+							<div class="tab-view">
+								<div class="tab" data-tab="1">
+									This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+								</div>
+								<div class="tab" data-tab="2">
+									This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+								</div>
+								<div class="tab" data-tab="3">
+									This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+								</div>
+							</div>
+							<div class="tab-links">
+								<a class="tab-link" data-target-tab="1">Home</a>
+								<a class="tab-link" data-target-tab="2">Profile</a>
+								<a class="tab-link" data-target-tab="3">Contact</a>
+							</div>
+						</div>
+					</div>
+				</div>
 			</div>
 		</main>
 	</body>

diff --git a/src/css/components/cards.css b/src/css/components/cards.css
@@ -249,3 +249,33 @@
 }
 
 
+/*** FIXES ***/
+.card > .card-body .list-group,
+.card > .card-body .list-view {
+	box-shadow: none;
+}
+
+.card > .card-body .tab-layout {
+	box-shadow: none;
+}
+
+.card > .card-body .tab-layout:not(.alt):not(.no-shadow) {
+	margin: 0;
+}
+
+.card > .card-body .tab-layout:not(.alt):not(.no-shadow) > .tab-title {
+	border-width: 1px 1px 0 1px;
+}
+
+.card > .card-body .tab-layout:not(.alt):not(.no-shadow) > .tab-links {
+	display: inline-flex;
+	border-width: 0 0 1px 1px;
+}
+
+.card > .card-body .tab-layout:not(.no-shadow) > .tab-title ~ .tab-view {
+	border-width: 1px;
+	border-radius: 0 0 var(--sgn-border-radius-md) 0;
+}
+
+
+
diff --git a/src/css/components/tablayout.css b/src/css/components/tablayout.css
@@ -13,7 +13,7 @@
 	--sgn-tab-link-border-color: var(--sgn-tab-heading-border-color);
 	--sgn-tab-link-color: var(--sgn-accent-primary);
 	--sgn-tab-link-hover-color: var(--sgn-accent-primary-dark);
-	--sgn-tab-link-hover-bg-color: var(--sgn-accent-primary-light);
+	--sgn-tab-link-hover-bg-color: var(--sgn-secondary-lightest);
 	--sgn-tab-link-active-color: var(--sgn-tab-link-color);
 	--sgn-tab-link-active-bg-color: var(--sgn-accent-background);
 	--sgn-tab-tab-border-color: var(--sgn-tab-heading-border-color);
@@ -22,9 +22,18 @@
 .tab-layout {
 	border-radius: var(--sgn-border-radius-md);
 	border: none;
+	margin: var(--margin-md);
 	overflow: hidden;
 }
 
+.tab-layout > .tab-title {
+	background-color: var(--sgn-tab-link-bg-color, var(--sgn-accent-background-secondary));
+	padding: var(--padding-sm);
+	border: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
+	border-bottom-width: 0;
+	border-radius: var(--sgn-border-radius-md) var(--sgn-border-radius-md) 0 0;
+}
+
 .tab-layout > .tab-links {
 	background-color: transparent;
 	border: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
@@ -78,7 +87,6 @@
 	border: 1px solid var(--sgn-tab-tab-border-color, var(--sgn-border-light));
 	border-radius: 0 var(--sgn-border-radius-md) var(--sgn-border-radius-md);
 	position: relative;
-	top: -1px;
 }
 
 .tab-layout > .tab-view > .tab {
@@ -90,15 +98,89 @@
 	display: block;
 }
 
+.tab-layout > .tab-title ~ .tab-links {
+	border-radius: 0;
+	border-bottom: 0;
+	width: 100%;
+}
+
+.tab-layout > .tab-title ~ .tab-links > .tab-link:first-child,
+.tab-layout > .tab-title ~ .tab-links > .tab-link:last-child {
+	border-radius: 0;
+}
+
+.tab-layout:not(.alt) > .tab-title ~ .tab-links > .tab-link:last-child {
+	border-right: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
+}
+
+.tab-layout > .tab-title ~ .tab-view {
+	border-radius: 0 0 var(--sgn-border-radius-md) var(--sgn-border-radius-md);
+}
+
+
+.tab-layout.bottom > .tab-view {
+	border-radius: 0 0 var(--sgn-border-radius-md) 0;
+}
+
+.tab-layout.bottom > .tab-links,
+.tab-layout > .tab-view ~ .tab-links {
+	width: auto;
+	border-radius: 0 0 var(--sgn-border-radius-md) var(--sgn-border-radius-md);
+	border: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
+	border-right-width: 0;
+	top: -1px;
+}
+
+.tab-layout.bottom > .tab-links > .tab-link {
+	border-top: 0;
+}
+
+.tab-layout.bottom > .tab-links > .tab-link:last-child,
+.tab-layout > .tab-view ~ .tab-links > .tab-link:last-child {
+	border-radius: 0 0 var(--sgn-border-radius-md) 0;
+}
+
+.tab-layout.bottom > .tab-links > .tab-link:first-child,
+.tab-layout > .tab-view ~ .tab-links > .tab-link:first-child {
+	border-radius: 0 0 0 var(--sgn-border-radius-md);
+}
+
+.tab-layout.bottom > .tab-links > .tab-link.active:after,
+.tab-layout > .tab-view ~ .tab-links > .tab-link.active:after {
+	bottom: unset;
+	top: -1px;
+}
 
 .tab-layout.alt {
 	border: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
 }
 
+.tab-layout.alt > .tab-title {
+	border-width: 0 0 1px 0;
+}
+
 .tab-layout.alt > .tab-links {
 	border: none;
 	border-bottom: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
 	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	top: 0;
+}
+
+.tab-layout.alt.bottom > .tab-view {
+	border-bottom: 1px solid var(--sgn-tab-heading-border-color, var(--sgn-border-light));
+}
+
+.tab-layout.alt.bottom > .tab-links {
+	border-width: 0 0 0 0;
+}
+
+.tab-layout.alt > .tab-links > .tab-link {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .tab-layout.alt > .tab-view {
@@ -107,14 +189,50 @@
 }
 
 
-.tab-layout.gradient > .tab-links > .tab-link {
-	background-color: transparent;
-	background-image: var(--sgn-tab-link-bg-color, var(--sgn-accent-background));
+/*** WITH SHADOW ***/
+.tab-layout,
+.tab-layout.shadow {
+	box-shadow: 0 0 1rem 0 var(--sgn-shadow-light);
 }
 
-.tab-layout.gradient > .tab-links > .tab-link.active {
-	background-color: transparent;
-	background-image: var(--sgn-tab-link-active-bg-color, var(--sgn-accent-background));
+.tab-layout:not(.no-shadow) > .tab-view {
+	border-radius: 0;
+}
+
+.tab-layout:not(.no-shadow) > .tab-view {
+	border-width: 1px 0 1px 0;
+}
+
+.tab-layout:not(.alt):not(.no-shadow) > .tab-title,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links {
+	border-width: 0;
+	top: 0;
+}
+
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links {
+	display: flex;
+}
+
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-center > .tab-link:first-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-end > .tab-link:first-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-space-around > .tab-link,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-space-between > .tab-link,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-space-evenly > .tab-link {
+	border-left: 1px solid var(--sgn-tab-link-border-color, var(--sgn-border-light));
+}
+
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-start > .tab-link:last-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-left > .tab-link:last-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-space-between > .tab-link:first-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-flex-start > .tab-link:first-child {
+	border-left-width: 0;
+}
+
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-end > .tab-link:last-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-right > .tab-link:last-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-space-between > .tab-link:last-child,
+.tab-layout:not(.alt):not(.no-shadow) > .tab-links.jc-flex-end > .tab-link:last-child {
+	border-right-width: 0;
 }
 
 
@@ -215,6 +333,16 @@
 }
 
 /*** GRADIENT ***/
+.tab-layout.gradient > .tab-links > .tab-link {
+	background-color: transparent;
+	background-image: var(--sgn-tab-link-bg-color, var(--sgn-accent-background));
+}
+
+.tab-layout.gradient > .tab-links > .tab-link.active {
+	background-color: transparent;
+	background-image: var(--sgn-tab-link-active-bg-color, var(--sgn-accent-background));
+}
+
 .tab-layout.gradient.primary > .tab-links > .tab-link {
 	--sgn-tab-link-bg-color: transparent;
 	--sgn-tab-link-color: var(--sgn-accent-primary);