style tabs using event logic

galaxyproject · May 24, 2024 · 2cf0c36 · 2cf0c36
1 parent 0899b44
commit 2cf0c36
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/_includes/slides-youtube-selector.html b/_includes/slides-youtube-selector.html
@@ -1,7 +1,7 @@
 <blockquote class="agenda">
 	<div class="box-title hands-on-title" id="slides-{{ include.slides }}">{{ include.title }}</div>
 	<p class="text-muted">This content is available in multiple, equivalent formats. Choose your preferred format below.</p>
-<ul class="nav nav-pills mb-3" id="{{include.id}}-pills-tab" role="tablist">
+<ul class="nav nav-tabs" id="{{include.id}}-pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
     <button class="nav-link active" id="{{include.id}}-pills-home-tab" data-toggle="pill" data-target="#{{include.id}}-pills-home" type="button" role="tab" aria-controls="{{include.id}}-pills-home" aria-selected="true">Teacher Recording</button>
   </li>

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -1855,27 +1855,32 @@ section.event {
 	}
 
 	.nav-tabs {
-		.nav-item {
-			margin-bottom: 0;
-			padding-bottom: 0;
+		button.nav-link {
+			font-weight: 800;
 		}
+	}
 
-		button.nav-link{
-			border: none;
-			background: none;
-			font-size: 1.2rem;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			font-weight: 800;
+}
+.nav-tabs {
+	.nav-item {
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	button.nav-link{
+		border: none;
+		background: none;
+		font-size: 1.2rem;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 
-			&:hover {
-				color: var(--hyperlink-hover);
-			}
+		&:hover {
+			color: var(--hyperlink-hover);
+		}
 
-			&.active {
-				background: var(--overview-color);
-				color: white;
-			}
+		&.active {
+			background: var(--overview-color);
+			color: white;
 		}
 	}
 }