Merge pull request #19581 from ksuderman/anvil-theme

Support setting masthead height in a theme

Author: dannon

client/src/components/Masthead/Masthead.vue

@@ -178,9 +178,9 @@ onMounted(() => {
     padding: 0;
     margin-bottom: 0;
     background: var(--masthead-color);
-    height: $masthead-height;
+    height: var(--masthead-height);
     &:deep(.navbar-nav) {
-        height: $masthead-height;
+        height: var(--masthead-height);
         & > li {
             // This allows the background color to fill the full height of the
             // masthead, while still keeping the contents centered (using flex)
@@ -226,20 +226,21 @@ onMounted(() => {
     }
     .navbar-brand {
         cursor: pointer;
-        line-height: $masthead-height;
+        line-height: var(--masthead-height);
         img {
             filter: $text-shadow;
             display: inline;
             border: none;
-            height: 2rem;
+            height: var(--masthead-logo-height);
+            padding: inherit;
         }
     }
     .navbar-text {
         filter: $text-shadow;
         font-weight: bold;
         font-family: Verdana, sans-serif;
         font-size: 1rem;
-        line-height: $masthead-height;
+        line-height: var(--masthead-height);
         color: var(--masthead-text-color);
     }
 }

client/src/style/scss/custom_theme_variables.scss

@@ -82,6 +82,9 @@ html,
     --font-size-large: 1rem;
 
     // masthead specific
+    --masthead-height: #{$masthead-height};
+    --masthead-logo-height: calc(var(--masthead-height) * 0.6);
+
     --masthead-color: #{$masthead-color};
     --masthead-text-color: #{$masthead-text-color};
     --masthead-text-hover: #{$masthead-text-hover};

client/src/style/scss/theme/blue.scss

@@ -114,6 +114,7 @@ $body-bg: $white;
 
 // Masthead
 $masthead-height: 2.5rem;
+$masthead-logo-height: $masthead-height * 0.6;
 
 // Side panels
 $panel-bg-color: $brand-light;

lib/galaxy/config/sample/themes_conf.yml.sample

@@ -74,3 +74,20 @@ smoky:
       active: "#FF206E"
     logo:
       img: "/static/favicon.svg"
+
+anvil:
+  masthead:
+    color: "#012840"
+    height: "3rem"
+    text:
+      color: "#f6f7f4"
+      hover: "#e0dd10"
+      active: "#ffff"
+    link:
+      color: transparent
+      hover: transparent
+      active: "#00090e"
+    logo:
+      height: "1.8rem"
+      img: "/static/images/galaxy_project_logo_white_square.png"
+      img-secondary: "/static/images/anvilwhite.png"