Merge pull request #1392 from sneakers-the-rat/orcid-button

[style] fix orcid button alignment, less awkward intermediate-width menu
openjournals · Nov 17, 2024 · e1f65b6 · e1f65b6
2 parents c9f1009 + 4d7aa44
commit e1f65b6
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -808,24 +808,26 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
 }
 
 .navbar-nav {
+    align-items: center;
+
     @include media-breakpoint-down(md) {
-        display: inline-block;
+        align-items: flex-end;
     }
 }
 
 .nav-link {
     padding: 1em !important;
     color: #2E294E;
     align-self: center;
-    transition: background-color 0.5s ease;
+    transition: background-color 0.5s ease, font-size 0.25s ease;
     white-space: nowrap;
     position: relative;
 
     &::before,
     &::after {
         opacity: 0;
         position: absolute;
-        top: 100%;
+        bottom: 0;
         left: 0;
         width: 100%;
         height: 4px;
@@ -838,21 +840,30 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
 
 
     &:hover {
-        color: #2E294E;
-
+        @include media-breakpoint-down(md) {
+            &:not(.orcid) {
+                font-size: 1.25em;
+            }
+            transition: font-size 0.25s ease;
+        }
 
         &:hover::before,
         &:hover::after,
         &:focus::before,
         &:focus::after {
             opacity: 1;
             transform: translateY(10px) scale(1);
+
+            @include media-breakpoint-down(md) {
+                opacity: 0;
+            }
         }
     }
 
     @include media-breakpoint-down(md) {
         font-size: 1.125em;
-        padding: 1em 0 !important;
+        padding: 0 !important;
+        height: 3rem;
         width: 100%;
         text-align: right;
 
@@ -861,6 +872,14 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
             color: #007BFF;
         }
 
+        &.orcid {
+            padding: 1em !important; // bootstrap forces this important
+            margin-bottom: 0.5em;
+            &:hover {
+                color: #fff;
+                border-color: #1f1d1d;
+            }
+        }
     }
 }