fixed overlap header button colors (#999)

gulpfile.js

@@ -147,7 +147,7 @@ gulp.task('clean-jekyll', (cb) => {
  */
 gulp.task('sass', () => {
 	const g = gulp
-		.src(`${srcDir}/scss/!(_)*.scss`)
+		.src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`)
 		.pipe(debug())
 		.pipe(sass({
 			style: 'expanded',

package.json

@@ -4,6 +4,7 @@
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "gulp start",
+    "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
     "preview": "gulp build --preview",
     "svg-optimize": "svgo -f svg/brand --pretty",

src/pages/_includes/layout/header-actions/buttons.html

 <div class="btn-list">
 	<span class="d-none d-sm-inline">
+		{% if page.layout-navbar-overlap and page.layout-navbar-dark %}
+		{% include ui/button.html text="New view" color="dark" %}
+		{% else %}
 		{% include ui/button.html text="New view" color="white" %}
+		{% endif %}
 	</span>
 	{% include ui/button.html icon="plus" text="Create new report" color="primary" class="d-none d-sm-inline-block" modal-id="report" %}
 	{% include ui/button.html icon="plus" icon-only=true color="primary" class="d-sm-none" text="Create new report" modal-id="report" %}

src/pages/_includes/layout/navbar-side.html

@@ -3,23 +3,29 @@
 <div class="navbar-nav flex-row{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% unless include.condensed %}
-	<div class="nav-item d-none d-md-flex me-3">
+	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
 		<div class="btn-list">
-			{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
-			{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% if include.dark %}
+				{% include ui/button.html color="dark" icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
+				{% include ui/button.html color="dark" icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% else %}
+				{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
+				{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% endif %}
 		</div>
 	</div>
 	{% endunless %}
 
-	<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
-		{% include ui/icon.html icon="moon" %}
-	</a>
+	<div class="d-none d-{{ include.breakpoint }}-flex">
+		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+			{% include ui/icon.html icon="moon" %}
+		</a>
 
-	<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
-		{% include ui/icon.html icon="sun" %}
-	</a>
+		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+			{% include ui/icon.html icon="sun" %}
+		</a>
 
-	<div class="nav-item dropdown d-none d-md-flex me-3">
+	<div class="nav-item dropdown me-3">
 		<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
 			{% include ui/icon.html icon="bell" %}
 			<span class="badge bg-red"></span>

src/pages/_includes/layout/navbar.html

@@ -13,7 +13,7 @@
 				{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
 			{% endunless %}
 
-			{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id %}
+			{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id dark=include.dark breakpoint=breakpoint %}
 
 			{% if condensed %}
 			<div class="collapse navbar-collapse" id="navbar-menu">

src/pages/_includes/layout/page-header.html

@@ -10,7 +10,7 @@
 	{% include layout/headers/{{ page.page-header-file }}.html %}
 {% elsif page-header %}
 <!-- Page title -->
-<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none">
+<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if page.layout-navbar-overlap and page.layout-navbar-dark %} text-white{% endif %}">
 
 	<div class="row align-items-center">
 		<div class="col">

src/pages/_includes/layout/sidebar.html

@@ -8,7 +8,7 @@
 			{% include layout/navbar-logo.html dark=include.dark breakpoint=breakpoint header=true %}
 		{% endunless %}
 
-		{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id %}
+		{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id breakpoint=breakpoint %}
 
 		<div class="collapse navbar-collapse" id="navbar-menu">
 			{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" keep-open=true %}

src/pages/_layouts/default.html

@@ -6,7 +6,8 @@ layout: base
 
 <div class="page">
 	{% if page.layout-sidebar %}
-	{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
+		{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
+		{% include layout/sidebar.html dark=false right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
 	{% endif %}
 
 	{% unless page.layout-hide-topbar %}

src/pages/cards.html

@@ -9,6 +9,19 @@ menu: base.cards
 		<div class="row row-cards">
 			<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div>
 			<div class="col-12 border-0">{% include cards/card.html body="This is a borderless card." %}</div>
+			<div>
+				<div class="card">
+					<div class="card-stamp">
+						<div class="card-stamp-icon bg-yellow">
+							{% include ui/icon.html icon="bell" %}
+						</div>
+					</div>
+					<div class="card-body">
+						<h3 class="card-title">Card with icon bg</h3>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+					</div>
+				</div>
+			</div>
 			<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div>
 			<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div>
 			<div class="col-12">{% include cards/card.html inactive=true body="This is some text inactive state." %}</div>

src/pages/layout-navbar-overlap.html

@@ -4,6 +4,5 @@ menu: layout.navbar-overlap
 layout-navbar-overlap: true
 layout-navbar-condensed: true
 layout-navbar-dark: true
-page-header-class: text-white
 layout: homepage
 ---

src/scss/layout/_navbar.scss

@@ -112,6 +112,7 @@
         display: flex;
         width: auto;
         padding-left: add($container-padding-x, 1.75rem);
+        color: inherit;
       }
 
       .dropdown-menu .dropdown-item {
@@ -129,7 +130,7 @@
 
     .nav-item.active:after {
       border-bottom-width: 0;
-      border-left-width: 2px;
+      border-left-width: 3px;
       right: auto;
       top: 0;
       bottom: 0;
@@ -392,6 +393,7 @@ Navbar vertical
             align-items: flex-start;
             @include transition(transform $transition-time);
             overflow-x: auto;
+            padding: 0;
 
             &.navbar-right {
               left: auto;

src/scss/ui/_cards.scss

@@ -29,6 +29,42 @@
   }
 }
 
+// Card stamp
+.card-stamp {
+  --stamp-size: 7rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: calc(var(--stamp-size) * 1);
+  height: calc(var(--stamp-size) * 1);
+  max-height: 100%;
+  border-top-right-radius: $border-radius;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.card-stamp-icon {
+  background: $text-muted;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius-pill;
+  width: calc(var(--stamp-size) * 1);
+  height: calc(var(--stamp-size) * 1);
+  position: relative;
+  top: calc(var(--stamp-size) * -.25);
+  right: calc(var(--stamp-size) * -.25);
+  font-size: calc(var(--stamp-size) * .75);
+  transform: rotate(10deg);
+  opacity: .075;
+
+  .icon {
+    stroke-width: 2;
+    width: calc(var(--stamp-size) * .75);
+    height: calc(var(--stamp-size) * .75);
+  }
+}
 
 // Card image
 .card-img,