diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 72b73aae..87abbcfa 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -808,8 +808,10 @@ $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; } } @@ -817,7 +819,7 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default; 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; @@ -825,7 +827,7 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default; &::after { opacity: 0; position: absolute; - top: 100%; + bottom: 0; left: 0; width: 100%; height: 4px; @@ -838,8 +840,12 @@ $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, @@ -847,12 +853,17 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default; &: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; + } + } } }