Better implementation of 'transparent' tabs

src/components/TabView.vue

@@ -13,6 +13,7 @@
 				:class='{
 					"tab_view__tab--selected": tabIndex === index,
 					"tab_view__tab--selected_small_tabs": tabIndex === index && smallTabs,
+					"tab_view__tab--selected_transparent": tabIndex === index && transparent,
 					"tab_view__tab--small_tabs": smallTabs,
 					"tab_view__tab--transparent": transparent
 				}'
@@ -21,7 +22,13 @@
 				{{tab}}
 			</div>
 		</div>
-		<div class='tab_view__content' :class='{"tab_view__content--padding": padding}'>
+		<div
+			class='tab_view__content'
+			:class='{
+				"tab_view__content--padding": padding,
+				"tab_view__content--transparent": transparent
+			}'
+		>
 			<slot
 				v-for='(tab, index) in tabs'
 				:name='tab'
@@ -65,6 +72,7 @@
 
 			@at-root #{&}--transparent {
 				background-color: transparent;
+				border: none;
 			}
 		}
 		@at-root #{&}__tab {
@@ -85,17 +93,47 @@
 			}
 
 			@at-root #{&}--small_tabs {
-				border: thin solid $color__gray--primary;
+				border-radius: 0.25rem 0.25rem 0 0;
+				flex-grow: 0;
+				border-bottom: 0;
+				margin: 0 0.25rem;
+				padding: 0.5rem;
+				margin-top: 0.25rem;
 			}
 
 			@at-root #{&}--transparent {
 				background-color: transparent;
+				flex-grow: 0;
+				margin: 0 0.25rem;
+				padding: 0.5rem;
+				margin-top: 0.25rem;
+				font-size: 1.25rem;
+
+				&:after {
+					content: '';
+					position: absolute;
+					background-color: $color__gray--darkest;
+					width: 100%;
+					bottom: -3px;
+					left: 0;
+					height: 3px;
+					border-radius: 1rem;
+					opacity: 0;
+					pointer-events: none;
+					transition: opacity 0.2s, bottom 0.2s, background-color 0.2s;
+				}
 
 				&:hover {
-					background-color: $color__gray--primary;
+					background-color: transparent;
+
+					&:after {
+						background-color: $color__gray--darker;
+						opacity: 1;
+						bottom: 0px;
+					}
 				}
 				&:active {
-					background-color: $color__gray--darker;
+					background-color: transparent;
 				}
 			}
 
@@ -124,13 +162,24 @@
 				}
 			}
 
-			@at-root #{&}--small_tabs {
-				border-radius: 0.25rem 0.25rem 0 0;
-				flex-grow: 0;
-				border-bottom: 0;
-				margin: 0 0.25rem;
-				padding: 0.5rem;
-				margin-top: 0.25rem;
+			@at-root #{&}--selected_transparent {
+				border: thin solid $color__gray--darker;
+				background-color: transparent;
+				border: none;
+
+				&:hover, &:active {
+					background-color: transparent;
+
+					&:after {
+						background-color: $color__gray--darkest;
+					}
+				}
+
+				&::after {
+					background-color: $color__gray--darkest;
+					bottom: 0px;
+					opacity: 1;
+				}
 			}
 		}
 		@at-root #{&}__content {
@@ -139,6 +188,9 @@
 			@at-root #{&}--padding {
 				padding: 1rem;
 			}
+			@at-root #{&}--transparent {
+				background-color: transparent;
+			}
 		}
 	}
 </style>