diff --git a/static/header.less b/static/header.less index 599a0b8c..1d5f89da 100644 --- a/static/header.less +++ b/static/header.less @@ -35,6 +35,7 @@ width: 60px; height: @brand-height; cursor: pointer; + margin: 0 @gutter 0 0; &:hover > a { opacity: .7; } @@ -53,78 +54,76 @@ } } -// ----- CANJS LOGO AND VERSION DESKTOP ----- -@media screen and (min-width: @breakpoint) { - .brand { - .dropdown { - position: absolute; - top: 52px; - background-color: white; - border: 1px solid #ccc; - box-shadow: 0 6px 12px rgba(0,0,0,.175); - } +// ----- DROPDOWNS ----- - .logo { - margin: 0 @gutter 0 0; +.brand { + .dropdown { + position: absolute; + top: 52px; + background-color: white; + border: 1px solid #ccc; + box-shadow: 0 6px 12px rgba(0,0,0,.175); + } - &:hover .dropdown { - display: block; - } - .project-dropdown { - left: 20px; - width: 180px; - } - .project-dropdown a { - color: black; - font-size: 14px; - padding: 12px 16px; - text-decoration: none; - display: block; - &:hover { - background-color: @light-gray-color; - } - } + .logo { + margin: 0 @gutter 0 0; + &:hover .dropdown { + display: block; } - .version { - display: flex; - align-items: center; - font-size: 12px; - height: @brand-height; - padding-top: 7px; - cursor: pointer; - .version-number::after { - display: inline-block; - width: 15px; - height: 15px; - vertical-align: bottom; - content: ''; - background-image: url(img/down_black.svg); - background-size: cover; - background-repeat: no-repeat; - } - &:hover > a { - opacity: .7; - } - &:hover .dropdown { - display: block; - } - .version-dropdown { - left: 100px; - width: 100px; + .project-dropdown { + width: 180px; + } + .project-dropdown a { + color: black; + font-size: 14px; + padding: 12px 16px; + text-decoration: none; + display: block; + &:hover { + background-color: @light-gray-color; } - .version-dropdown a { - color: black; - padding: 5px 10px; - text-decoration: none; - display: block; - &:hover { - background-color: @light-gray-color; - } + } + } + .version { + display: flex; + align-items: center; + font-size: 12px; + height: @brand-height; + padding-top: 7px; + cursor: pointer; + margin: 0 @gutter/3 0 0; + .version-number::after { + display: inline-block; + width: 15px; + height: 15px; + vertical-align: bottom; + content: ''; + background-image: url(img/down_black.svg); + background-size: cover; + background-repeat: no-repeat; + } + &:hover > a { + opacity: .7; + } + &:hover .dropdown { + display: block; + } + .version-dropdown { + width: 100px; + } + .version-dropdown a { + color: black; + padding: 5px 10px; + text-decoration: none; + display: block; + &:hover { + background-color: @light-gray-color; } } } } + // ----- CHAT, FORUM, GITHUB STAR, TWITTER ----- .top-right-links { margin: 0 auto;