style(top-app-bar): change the top of active menu caret

razonyang · Jan 28, 2023 · 1004b69 · 1004b69
1 parent d51c6d5
commit 1004b69
Showing 1 changed file with 15 additions and 14 deletions.
diff --git a/assets/main/scss/_top-app-bar.scss b/assets/main/scss/_top-app-bar.scss
@@ -50,21 +50,22 @@ $header-caret-width: 0.35em;
 
   .nav-link {
     @include media-breakpoint-up(xxl) {
-        &.active {
-            position: relative;
-            --#{$prefix}body-color: var(--#{$prefix}body-color);
-
-            &::before {
-                content: "";
-                position: absolute;
-                left: calc(50% - #{$header-caret-width});
-                top: calc(100% + #{$header-caret-width} + 0.05em);
-                border-left: $header-caret-width solid transparent;
-                border-right: $header-caret-width solid transparent;
-                // unable to access the :root variable --#{$prefix}body-bg, use SCSS variable instead.
-                border-bottom: $header-caret-width solid #{$body-bg};
-            }
+      &.active {
+        position: relative;
+        --#{$prefix}body-color: var(--#{$prefix}body-color);
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: calc(50% - #{$header-caret-width});
+          top: calc(100% + #{$header-caret-width} * 1.25);
+          border-left: $header-caret-width solid transparent;
+          border-right: $header-caret-width solid transparent;
+          // unable to access the :root variable --#{$prefix}body-bg, use SCSS variable instead.
+          @debug #{$body-bg};
+          border-bottom: $header-caret-width solid #{$body-bg};
         }
+      }
     }
   }