demo: some fixes

fbasso · Aug 28, 2023 · d7df2d3 · d7df2d3
1 parent 8c62e98
commit d7df2d3
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/demo/src/app/default/default.component.html b/demo/src/app/default/default.component.html
@@ -27,9 +27,9 @@ <h3 class="text-secondary mb-3">The angular way</h3>
 </main>
 
 <div class="masthead-followup">
-	<div class="row m-0 border border-secondary">
+	<div class="row m-0 border" style="--bs-border-color: var(--bs-body-bg)">
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -54,7 +54,7 @@ <h3>Native</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -83,7 +83,7 @@ <h3>Widgets</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -109,7 +109,7 @@ <h3>Quality</h3>
 		<div class="w-100"></div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -134,7 +134,7 @@ <h3>Accessible</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"
@@ -160,7 +160,7 @@ <h3>Team</h3>
 		</div>
 
 		<div
-			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border border-secondary d-flex flex-column align-items-center align-items-md-start"
+			class="col-12 col-md-4 p-3 p-md-5 bg-body-tertiary border d-flex flex-column align-items-center align-items-md-start"
 		>
 			<svg
 				fill="currentColor"

diff --git a/demo/src/app/shared/component-wrapper/component-wrapper.component.html b/demo/src/app/shared/component-wrapper/component-wrapper.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid">
 	<div class="row flex-xl-nowrap">
-		<div class="col-12 col-lg-2" style="border-right: 1px solid rgba(0, 0, 0, 0.1)">
+		<div class="col-12 col-lg-2 border-end">
 			<div
 				class="d-lg-none d-flex py-2 px-4 align-items-center text-body sidebar-collapsed"
 				(click)="sidebarCollapsed = !sidebarCollapsed"

diff --git a/demo/src/app/shared/page-wrapper/page-wrapper.component.html b/demo/src/app/shared/page-wrapper/page-wrapper.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid">
 	<div class="row flex-xl-nowrap">
-		<div class="col-12 col-lg-2" style="border-right: 1px solid rgba(0, 0, 0, 0.1)">
+		<div class="col-12 col-lg-2 border-end">
 			<div
 				class="d-lg-none d-flex py-2 px-4 align-items-center text-body sidebar-collapsed"
 				(click)="sidebarCollapsed = !sidebarCollapsed"

diff --git a/demo/src/style/app.scss b/demo/src/style/app.scss
@@ -29,6 +29,7 @@ header.navbar {
 
 .social-buttons {
 	font-size: x-small;
+
 	a {
 		color: #fff;
 		text-decoration: none;
@@ -93,6 +94,7 @@ header.title {
 				border-color: transparent;
 				background: none;
 				color: #007bff;
+
 				&:hover {
 					color: #0056b3;
 				}
@@ -177,7 +179,7 @@ header.title {
 
 		&.active {
 			font-weight: 500;
-			color: rgba(0, 0, 0, 0.85);
+			color: rgba(var(--bs-emphasis-color-rgb), 0.85);
 		}
 	}
 
@@ -225,6 +227,7 @@ div.api-doc-component,
 			.github-link {
 				opacity: 1;
 			}
+
 			& > .title-fragment {
 				opacity: 1;
 			}
@@ -234,6 +237,7 @@ div.api-doc-component,
 	section,
 	ngbd-overview-section {
 		margin-top: 3rem;
+
 		h4 {
 			margin-top: 2rem;
 			margin-bottom: 1rem;
@@ -242,6 +246,7 @@ div.api-doc-component,
 		.meta {
 			font-size: 0.8rem;
 			margin-bottom: 1rem;
+
 			> div {
 				margin-bottom: 0.5rem;
 			}
@@ -281,6 +286,7 @@ a.title-fragment:focus {
 
 div.component-demo {
 	margin-bottom: 3rem;
+
 	> h2 {
 		display: flex;
 		margin-bottom: 1rem;
@@ -325,6 +331,7 @@ div.component-demo {
 
 			.nav-link:not(.active) {
 				color: var(--bs-tertiary-color);
+
 				&:hover {
 					color: var(--bs-secondary-color);
 				}

diff --git a/src/datepicker/datepicker-month.scss b/src/datepicker/datepicker-month.scss
@@ -19,7 +19,7 @@ ngb-datepicker-month {
 	&-weekdays {
 		border-bottom: 1px solid var(--bs-border-color);
 		border-radius: 0;
-		background-color: var(--bs-secondary-bg);
+		background-color: var(--bs-tertiary-bg);
 	}
 	&-day,
 	&-weekday,

diff --git a/src/datepicker/datepicker.scss b/src/datepicker/datepicker.scss
@@ -29,7 +29,7 @@ ngb-datepicker {
 		border-bottom: 0;
 		border-radius: 0.25rem 0.25rem 0 0;
 		padding-top: 0.25rem;
-		background-color: var(--bs-secondary-bg);
+		background-color: var(--bs-tertiary-bg);
 	}
 
 	&-months {
@@ -44,7 +44,7 @@ ngb-datepicker {
 			height: 2rem;
 			line-height: 2rem;
 			text-align: center;
-			background-color: var(--bs-secondary-bg);
+			background-color: var(--bs-tertiary-bg);
 		}
 
 		& + & {