more style changes so that header elements stay roughly the same size…

… even at larger viewports
ilios · Sep 23, 2024 · b9c5514 · b9c5514
1 parent 9cef28f
commit b9c5514
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/packages/frontend/app/styles/components/global-search-box.scss b/packages/frontend/app/styles/components/global-search-box.scss
@@ -24,6 +24,11 @@
       height: 100%;
     }
 
+    @include m.for-laptop-and-up {
+      padding-left: 24px;
+      padding-right: 8px;
+    }
+
     &.has-results {
       border-bottom: 0;
       border-radius: 3px 3px 0 0;

diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
@@ -31,6 +31,29 @@
       padding: 0.2rem 0 0;
     }
 
+    .global-search-box,
+    .locale-chooser,
+    .user-menu,
+    .user-guide-link {
+      & button,
+      & input {
+        @include m.for-laptop-and-up {
+          /* stylelint-disable property-disallowed-list */
+          font-size: 16px;
+        }
+      }
+    }
+
+    .locale-chooser,
+    .user-menu,
+    .user-guide-link {
+      button {
+        @include m.for-laptop-and-up {
+          padding: 4px;
+        }
+      }
+    }
+
     .locale-chooser {
       grid-area: locale;
     }
@@ -40,10 +63,6 @@
     .user-guide-link {
       display: flex;
       grid-area: guide;
-
-      @include m.for-phone-only {
-        vertical-align: -0.25em;
-      }
     }
 
     .global-search-box {

diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -8,6 +8,10 @@ $header-menu-background-color: color.adjust(c.$slightWhite, $lightness: -3%);
 .user-guide-link {
   margin-right: 0.85rem;
 
+  @include cm.for-phone-only {
+    vertical-align: -0.25em;
+  }
+
   a {
     @include cm.ilios-link-button;
     background-color: $header-menu-background-color;
@@ -30,8 +34,15 @@ $header-menu-background-color: color.adjust(c.$slightWhite, $lightness: -3%);
     }
 
     @include cm.for-phone-only {
-      /* stylelint-disable property-disallowed-list */
+      /* stylelint-disable-next-line property-disallowed-list */
       font-size: 2.75vw;
+      vertical-align: -0.25em;
+    }
+
+    @include cm.for-laptop-and-up {
+      /* stylelint-disable-next-line property-disallowed-list */
+      font-size: 14px;
+      padding: 3px;
     }
   }
 }
diff --git a/packages/frontend/app/styles/layout/_layout.scss b/packages/frontend/app/styles/layout/_layout.scss
@@ -57,6 +57,10 @@
         @include m.for-tablet-and-up {
           grid-template-areas: "search locale user guide";
         }
+
+        @include m.for-laptop-and-up {
+          padding: 6.4px 0;
+        }
       }
     }