diff --git a/CHANGELOG.md b/CHANGELOG.md
index 150b242a340444bb49ac09816aa2f90d2291bb49..7c03b071c21cb3e8bfd4beb4e86ce55b56079d87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [2.6.1]
+
+- Fixed consistency of underline in mobile devices
+- Housekeeping in `header.scss` file (devide + encapsulate responsive cases)
+- Fixed alignment of likert elements
+
## [2.6.0] - 02-03-2020
- Modified burger menu to be appearing when width <= 1080
diff --git a/cernclean.info.yml b/cernclean.info.yml
index 394366c9c87b43132fcb6bb2aba3c2ba59fe1b10..23a218998e186eaecabfe64ecfc0de5c6672d4d2 100644
--- a/cernclean.info.yml
+++ b/cernclean.info.yml
@@ -2,7 +2,7 @@ name: CERN
type: theme
description: "CERN theme"
core: 8.x
-version: 2.6.0
+version: 2.6.1-rc
base theme: cernbase
# libraries
diff --git a/css/header.css b/css/header.css
index d889d25cac4c69d71556cd539ccc49c7b785c110..38ecb857255958dc2b95948772e5de357300a77c 100644
--- a/css/header.css
+++ b/css/header.css
@@ -1,4 +1,246 @@
-@media (min-width: 768px) and (max-width: 1080px) {
+body {
+ /* sticky */ }
+ body.toolbar-fixed header .menu-expanded, body.toolbar-vertical header .menu-expanded {
+ top: 39px;
+ margin-top: 0 !important; }
+ body.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
+ top: 39px; }
+ body.toolbar-fixed.toolbar-tray-open header.menu-expanded {
+ top: 78px; }
+ body.sticky-header header .site-info {
+ min-height: 56px; }
+ body.sticky-header header .site-info img {
+ left: 0; }
+ body.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
+ top: 32px; }
+ body.sticky-header .block-language .active-language a {
+ line-height: 56px; }
+ body header.menu-expanded {
+ top: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 500; }
+ body header.menu-expanded .header-wrapper {
+ padding: 10px 5%; }
+ body header.menu-expanded .header-wrapper .nav {
+ float: left; }
+ body header.menu-expanded .site-info__logo {
+ max-width: 25%;
+ width: auto; }
+ body header.menu-expanded .site-info__logo img {
+ max-height: 50px; }
+ body header.menu-expanded .site-info__text__slogan {
+ display: none; }
+ body header.menu-expanded .nav > li > a {
+ line-height: 56px; }
+ body header.menu-expanded .nav > li > a:after {
+ bottom: 9px; }
+ body header.menu-expanded .navbar-default .navbar-toggle:hover,
+ body header.menu-expanded .navbar-default .navbar-toggle:focus,
+ body header.menu-expanded .navbar-default .navbar-toggle {
+ top: 20%; }
+ body header.menu-expanded .navbar-default.main-menu .navbar-toggle {
+ top: 33px; }
+ body header .site-info + .site-nav nav {
+ float: none !important; }
+ body header .site-info__text {
+ overflow-wrap: break-word; }
+ body header .site-info__text__name {
+ white-space: unset;
+ text-overflow: unset;
+ padding: 2px 0 0; }
+ body header .site-nav .region-header {
+ text-align: right; }
+ body header .site-nav .region-header > nav, body header .site-nav .region-header > .block-language {
+ display: inline-block;
+ vertical-align: top; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu {
+ padding: 10px;
+ display: none;
+ width: 100%;
+ box-shadow: 0 0 0 0; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu li {
+ margin: 0; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu li a {
+ display: block;
+ min-height: 25px;
+ padding: 0 0 0 20px;
+ margin: 5px 0 10px 0;
+ white-space: normal;
+ width: fit-content; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu li a:after {
+ bottom: 1px; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu .caret {
+ display: none; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu .dropdown-menu:before {
+ display: none;
+ left: 150px; }
+ body header .site-nav .region-header > .name {
+ display: block; }
+ body header .site-nav .region-header > .navbar-text {
+ display: block; }
+ body header .site-nav .region-header .block-language {
+ position: relative; }
+ body header .site-nav .region-header .block-language h2.block-title {
+ display: none; }
+ body header .site-nav .region-header .block-language .active-language {
+ padding: 0 0 0 10px; }
+ body header .site-nav .region-header .block-language .active-language a {
+ -webkit-transition: all 0.3s ease-in-out 0s;
+ -khtml-transition: all 0.3s ease-in-out 0s;
+ -moz-transition: all 0.3s ease-in-out 0s;
+ -ms-transition: all 0.3s ease-in-out 0s;
+ -o-transition: all 0.3s ease-in-out 0s;
+ transition: all 0.3s ease-in-out 0s;
+ font-size: 16px;
+ font-size: 1.6rem;
+ font-family: "opensans-bold";
+ line-height: 76px;
+ position: relative;
+ text-transform: uppercase; }
+ body header .site-nav .region-header .block-language .active-language a:after {
+ -webkit-transition: width 0.3s ease-in-out 0s;
+ -khtml-transition: width 0.3s ease-in-out 0s;
+ -moz-transition: width 0.3s ease-in-out 0s;
+ -ms-transition: width 0.3s ease-in-out 0s;
+ -o-transition: width 0.3s ease-in-out 0s;
+ transition: width 0.3s ease-in-out 0s;
+ content: '';
+ display: block;
+ height: 2px;
+ width: 0%;
+ position: absolute;
+ bottom: -10px;
+ left: 0; }
+ body header .site-nav .region-header .block-language .active-language a:hover {
+ background: transparent; }
+ body header .site-nav .region-header .block-language .active-language a:hover:after {
+ width: 100%; }
+ body header .site-nav .region-header .block-language .active-language a:focus {
+ background: transparent; }
+ body header .site-nav .region-header .block-language .active-language a span.separator {
+ position: absolute;
+ left: -20px;
+ top: -2px;
+ line-height: 21px; }
+ body header .site-nav .region-header .block-language .active-language a span.caret {
+ position: absolute;
+ right: -20px;
+ top: 49%; }
+ body header .site-nav .region-header .block-language > ul.links {
+ -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+ -khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+ -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+ -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+ -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
+ filter: alpha(opacity=0);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ -webkit-opacity: 0;
+ -khtml-opacity: 0;
+ -moz-opacity: 0;
+ -ms-opacity: 0;
+ -o-opacity: 0;
+ opacity: 0;
+ list-style: none;
+ margin: 0;
+ padding: 10px 12px;
+ position: absolute;
+ top: 80px; }
+ body header .site-nav .region-header .block-language > ul.links::before {
+ left: unset;
+ right: 10px;
+ top: -23px;
+ content: '';
+ width: 0px;
+ height: 0px;
+ background: transparent;
+ border-width: 12px;
+ border-style: solid;
+ position: absolute; }
+ body header .site-nav .region-header .block-language > ul.links a {
+ font-size: 16px;
+ font-size: 1.6rem;
+ font-family: "opensans-bold";
+ padding: 0;
+ line-height: 25px;
+ display: block;
+ text-transform: uppercase;
+ position: relative; }
+ body header .site-nav .region-header .block-language > ul.links a:after {
+ -webkit-transition: width 0.3s ease-in-out 0s;
+ -khtml-transition: width 0.3s ease-in-out 0s;
+ -moz-transition: width 0.3s ease-in-out 0s;
+ -ms-transition: width 0.3s ease-in-out 0s;
+ -o-transition: width 0.3s ease-in-out 0s;
+ transition: width 0.3s ease-in-out 0s;
+ content: '';
+ display: block;
+ height: 2px;
+ width: 0%;
+ position: absolute;
+ bottom: -4px;
+ left: 0; }
+ body header .site-nav .region-header .block-language > ul.links a:hover {
+ background: transparent; }
+ body header .site-nav .region-header .block-language > ul.links a:hover:after {
+ width: 100%; }
+ body header .site-nav .region-header .block-language > ul.links a:focus {
+ background: transparent; }
+ body header .site-nav .region-header .block-language > ul.links.language-expanded {
+ filter: alpha(opacity=100);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ -webkit-opacity: 1;
+ -khtml-opacity: 1;
+ -moz-opacity: 1;
+ -ms-opacity: 1;
+ -o-opacity: 1;
+ opacity: 1; }
+ body header .site-nav section:only-child .active-language a .separator {
+ display: none; }
+
+@media only screen and (max-width: 767px) {
+ body.sticky-header:not(.open-cern-menu) header .nav > li > a {
+ line-height: 35px !important; }
+ body header .site-info + .site-nav nav {
+ width: 100%; }
+ body header.menu-expanded .region-header > .block-language {
+ display: block; }
+ body header .site-nav .region-header {
+ text-align: left; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav {
+ padding: 0 50px 0 0;
+ width: 100%; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open {
+ position: relative;
+ display: block; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu {
+ position: static; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu ul.dropdown-menu {
+ position: relative; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:before {
+ top: -1px; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:after {
+ bottom: -3px; }
+ body header .site-nav .region-header > .block-language {
+ position: absolute;
+ display: none;
+ right: 30px;
+ margin: auto;
+ top: 67px; }
+ body header .site-nav .region-header > .block-language .active-language a span.separator {
+ display: none; }
+ body header .site-nav .region-header > .block-language ul.links {
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ top: 60px; }
+ body header .site-nav .region-header > .block-language ul.links:before {
+ display: none; } }
+@media only screen and (min-width: 768px) and (max-width: 1080px) {
header .site-info {
width: 80%;
z-index: 1;
@@ -108,279 +350,28 @@
position: static; }
header nav .navbar .container-fluid .navbar-collapse > .navbar-nav:first-child a::after {
bottom: 0; } }
-body header .site-info + .site-nav nav {
- float: none; }
-body header .site-info__text {
- overflow-wrap: break-word; }
- body header .site-info__text__name {
- white-space: unset;
- text-overflow: unset; }
-body header .site-nav .region-header > .name {
- display: block; }
-body header .site-nav .region-header > .navbar-text {
- display: block; }
-body header .site-nav section:only-child .active-language a .separator {
- display: none; }
-
-header.menu-expanded {
- top: 0;
- position: fixed;
- width: 100%;
- z-index: 500; }
- header.menu-expanded .header-wrapper {
- padding: 10px 5%; }
- header.menu-expanded .header-wrapper .nav {
- float: left; }
- header.menu-expanded .site-info__logo {
- max-width: 25%;
- width: auto; }
- header.menu-expanded .site-info__logo img {
- max-height: 50px; }
- header.menu-expanded .site-info__text__slogan {
- display: none; }
- header.menu-expanded .nav > li > a {
- line-height: 56px; }
- header.menu-expanded .nav > li > a:after {
- bottom: 9px; }
- header.menu-expanded .navbar-default .navbar-toggle:hover,
- header.menu-expanded .navbar-default .navbar-toggle:focus,
- header.menu-expanded .navbar-default .navbar-toggle {
- top: 20%; }
- header.menu-expanded .navbar-default.main-menu .navbar-toggle {
- top: 33px; }
-
-.toolbar-fixed header.menu-expanded {
- top: 39px;
- margin-top: 0 !important; }
-
-.toolbar-vertical header.menu-expanded {
- top: 39px;
- margin-top: 0 !important; }
-
-.toolbar-fixed.toolbar-tray-open header.menu-expanded {
- top: 78px; }
-
-.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
- top: 39px; }
-
-.sticky-header header .site-info {
- min-height: 56px; }
- .sticky-header header .site-info img {
- left: 0; }
-
-header .nav > li {
- margin: 0 20px; }
- header .nav > li:nth-last-child(2) {
- margin-right: 35px; }
-
-header .site-info__text__name {
- padding: 2px 0 0; }
-
-header .site-info + .site-nav nav {
- float: none !important; }
-
-.region-header {
- text-align: right; }
- .region-header > nav, .region-header > .block-language {
- display: inline-block;
- vertical-align: top; }
-
-.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
- top: 32px; }
-
-@media only screen and (max-width: 767px) {
- .sticky-header:not(.open-cern-menu) header .nav > li > a {
- line-height: 35px !important; } }
-.block-language {
- position: relative; }
- .block-language h2.block-title {
- display: none; }
- .block-language .active-language {
- padding: 0 0 0 10px; }
- .block-language .active-language a {
- -webkit-transition: all 0.3s ease-in-out 0s;
- -khtml-transition: all 0.3s ease-in-out 0s;
- -moz-transition: all 0.3s ease-in-out 0s;
- -ms-transition: all 0.3s ease-in-out 0s;
- -o-transition: all 0.3s ease-in-out 0s;
- transition: all 0.3s ease-in-out 0s;
- font-size: 16px;
- font-size: 1.6rem;
- font-family: "opensans-bold";
- line-height: 76px;
- position: relative;
- text-transform: uppercase; }
- .block-language .active-language a:after {
- -webkit-transition: width 0.3s ease-in-out 0s;
- -khtml-transition: width 0.3s ease-in-out 0s;
- -moz-transition: width 0.3s ease-in-out 0s;
- -ms-transition: width 0.3s ease-in-out 0s;
- -o-transition: width 0.3s ease-in-out 0s;
- transition: width 0.3s ease-in-out 0s;
- content: '';
- display: block;
- height: 2px;
- width: 0%;
- position: absolute;
- bottom: -10px;
- left: 0; }
- .block-language .active-language a:hover {
- background: transparent; }
- .block-language .active-language a:hover:after {
- width: 100%; }
- .block-language .active-language a:focus {
- background: transparent; }
- .block-language .active-language a span.separator {
- position: absolute;
- left: -20px;
- top: -2px;
- line-height: 21px; }
- .block-language .active-language a span.caret {
- position: absolute;
- right: -20px;
- top: 49%; }
- .block-language > ul.links {
- -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
- -khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
- -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
- -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
- -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
- filter: alpha(opacity=0);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- -webkit-opacity: 0;
- -khtml-opacity: 0;
- -moz-opacity: 0;
- -ms-opacity: 0;
- -o-opacity: 0;
- opacity: 0;
- list-style: none;
- margin: 0;
- padding: 10px 12px;
- position: absolute;
- top: 80px; }
- .block-language > ul.links::before {
- left: unset;
- right: 10px;
- top: -23px;
- content: '';
+@media only screen and (min-width: 1081px) {
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu {
+ left: unset;
+ right: -25px;
+ min-width: 200px; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu:before {
+ content: "";
width: 0px;
height: 0px;
background: transparent;
border-width: 12px;
border-style: solid;
- position: absolute; }
- .block-language > ul.links a {
- font-size: 16px;
- font-size: 1.6rem;
- font-family: "opensans-bold";
- padding: 0;
- line-height: 25px;
- display: block;
- text-transform: uppercase;
- position: relative; }
- .block-language > ul.links a:after {
- -webkit-transition: width 0.3s ease-in-out 0s;
- -khtml-transition: width 0.3s ease-in-out 0s;
- -moz-transition: width 0.3s ease-in-out 0s;
- -ms-transition: width 0.3s ease-in-out 0s;
- -o-transition: width 0.3s ease-in-out 0s;
- transition: width 0.3s ease-in-out 0s;
- content: '';
- display: block;
- height: 2px;
- width: 0%;
- position: absolute;
- bottom: -4px;
- left: 0; }
- .block-language > ul.links a:hover {
- background: transparent; }
- .block-language > ul.links a:hover:after {
- width: 100%; }
- .block-language > ul.links a:focus {
- background: transparent; }
- .block-language > ul.links.language-expanded {
- filter: alpha(opacity=100);
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- -webkit-opacity: 1;
- -khtml-opacity: 1;
- -moz-opacity: 1;
- -ms-opacity: 1;
- -o-opacity: 1;
- opacity: 1; }
-
-/* sticky */
-.sticky-header .block-language .active-language a {
- line-height: 56px; }
-
-/* responsive */
-@media only screen and (max-width: 767px) {
- .region-header {
- text-align: left; }
-
- header .site-info + .site-nav nav {
- width: 100%; }
-
- .region-header > .block-language {
- position: absolute;
- display: none;
- right: 30px;
- margin: auto;
- top: 67px; }
- .region-header > .block-language .active-language a span.separator {
- display: none; }
-
- header .block-language ul.links {
- -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
- -khtml-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
- -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
- -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
- -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
- box-shadow: 0 0 0 rgba(0, 0, 0, 0);
- top: 60px; }
- header .block-language ul.links:before {
+ position: absolute;
+ top: -24px;
+ left: 150px; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li.dropdown > a span.caret {
display: none; }
-
- .menu-expanded .region-header > .block-language {
- display: block; }
-
- .main-menu .navbar-nav {
- padding: 0 50px 0 0; } }
-/*
-element.style {
- display: block;
- position: static;
- width: 100%;
- background: teal;
- box-shadow: 0 0 0 0;
- padding: 5px 0;
-}
-*/
-header .main-menu .dropdown-menu a {
- display: block; }
- header .main-menu .dropdown-menu a .caret {
- display: none; }
-header .main-menu .dropdown-menu .dropdown-menu {
- display: block;
- position: static;
- width: 100%;
- box-shadow: 0 0 0 0; }
- header .main-menu .dropdown-menu .dropdown-menu li {
- margin: 0; }
- header .main-menu .dropdown-menu .dropdown-menu a {
- min-height: 25px;
- padding: 0 0 0 20px; }
- header .main-menu .dropdown-menu .dropdown-menu:before {
- display: none; }
-
-nav.main-menu .dropdown-menu {
- left: unset;
- right: -25px;
- min-width: 200px; }
- nav.main-menu .dropdown-menu:before {
- left: 150px; }
- nav.main-menu .dropdown-menu > li > a {
- white-space: normal;
- width: fit-content; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li.dropdown ul.dropdown-menu {
+ position: absolute;
+ left: -100%;
+ top: -33%; }
+ body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.cern-search #cern-search-overlay {
+ top: 37px; } }
/*# sourceMappingURL=header.css.map */
diff --git a/sass/header.scss b/sass/header.scss
index 81b21864068142372da0350ca7846454696bee02..67afa545edd5f176589e4e2bd79b70708e285877 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -2,7 +2,427 @@
// mixins variables
@import 'variables.scss';
-@media (min-width: 768px) and (max-width: 1080px) {
+
+body{
+
+ &.toolbar-fixed,
+ &.toolbar-vertical{
+ header{
+ .menu-expanded {
+ top: 39px;
+ margin-top: 0 !important;
+ }
+ }
+ }
+
+
+ &.toolbar-fixed.toolbar-tray-open{
+
+ &.toolbar-vertical{
+ header.menu-expanded{
+ top: 39px;
+
+ }
+ }
+
+ header.menu-expanded{
+ top: 78px;
+ }
+ }
+
+ /* sticky */
+ // header override header & sticky header
+ &.sticky-header{
+ header{
+ .site-info {
+ min-height: 56px;
+ img {
+ left: 0;
+ }
+ }
+ }
+
+ &:not(.open-cern-menu){
+ header{
+ .navbar-default.main-menu {
+ .navbar-toggle {
+ top: 32px;
+ }
+ }
+ }
+ }
+
+ .block-language .active-language a {
+ line-height: 56px;
+ }
+ }
+
+ // header
+ header {
+
+ &.menu-expanded {
+ top: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 500;
+
+ .header-wrapper {
+
+ .nav{
+ float: left;
+ }
+ padding: 10px 5%;
+ }
+
+ .site-info__logo {
+ max-width: 25%;
+ width: auto;
+
+ img {
+ max-height: 50px;
+ }
+ }
+
+ .site-info__text__slogan {
+ display: none;
+ }
+
+ .nav>li>a {
+ line-height: 56px;
+
+ &:after {
+ bottom: 9px;
+ }
+ }
+
+ .navbar-default .navbar-toggle:hover,
+ .navbar-default .navbar-toggle:focus,
+ .navbar-default .navbar-toggle {
+ top: 20%;
+ }
+
+ .navbar-default.main-menu .navbar-toggle {
+ top: 33px;
+ }
+ }
+
+ // Site Info => Title / logo / slogan
+ .site-info{
+
+ &+.site-nav {
+ nav {
+ float: none !important; //important because this rule solely relies on the CSS load order which cannot be ensured
+ }
+ }
+
+ &__text{
+
+ overflow-wrap: break-word;
+
+ &__name{
+ white-space: unset;
+ text-overflow: unset;
+ padding: 2px 0 0;
+ }
+ }
+
+ }
+
+ //Site Nav => the menu
+ .site-nav{
+ .region-header {
+ text-align: right;
+
+ &>nav,
+ &>.block-language {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+
+ nav.main-menu {
+
+ ul.navbar-nav{
+
+ // only first level dropdowns
+ &>li.dropdown.open{
+
+ &>ul.dropdown-menu{
+
+ // all the rest dropdowns
+ .dropdown-menu {
+ padding: 10px;
+ display: none;
+ width: 100%;
+ box-shadow: 0 0 0 0;
+
+ li {
+ margin: 0;
+
+ a {
+ display: block;
+ min-height: 25px;
+ padding: 0 0 0 20px;
+ margin: 5px 0 10px 0;
+ white-space: normal;
+ width: fit-content;
+
+ &:after{
+ bottom: 1px;
+ }
+ }
+
+ }
+
+ .caret {
+ display: none;
+ }
+
+ &:before {
+ display: none;
+ left: 150px;
+
+ }
+ }
+ }
+ }
+ }
+
+ }
+
+
+ &>.name {
+ display: block;
+ }
+
+ &>.navbar-text {
+ display: block;
+ }
+
+ // language switcher
+ .block-language {
+ position: relative;
+
+ h2.block-title {
+ display: none;
+ }
+
+ .active-language {
+ padding: 0 0 0 10px;
+
+ a {
+ @include transition(all 0.3s ease-in-out 0s);
+ @include font-size(1.6);
+ font-family: "opensans-bold";
+ line-height: 76px;
+ position: relative;
+ text-transform: uppercase;
+
+ &:after {
+ @include transition(width 0.3s ease-in-out 0s);
+ content: '';
+ display: block;
+ height: 2px;
+ width: 0%;
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ }
+
+ &:hover {
+ background: transparent;
+
+ &:after {
+ width: 100%;
+ }
+ }
+
+ &:focus {
+ background: transparent;
+ }
+
+ span.separator {
+ position: absolute;
+ left: -20px;
+ top: -2px;
+ line-height: 21px;
+ }
+
+ span.caret {
+ position: absolute;
+ right: -20px;
+ top: 49%;
+ }
+ }
+ }
+
+ &>ul.links {
+ @include box-shadow(0, 6px, 12px, rgba(0, 0, 0, 0.17));
+ @include opacity(0);
+ list-style: none;
+ margin: 0;
+ padding: 10px 12px;
+ position: absolute;
+ top: 80px;
+
+ &::before {
+ left: unset;
+ right: 10px;
+ top: -23px;
+ content: '';
+ width: 0px;
+ height: 0px;
+ background: transparent;
+ border-width: 12px;
+ border-style: solid;
+ position: absolute;
+ }
+
+ a {
+ @include font-size(1.6);
+ font-family: "opensans-bold";
+ padding: 0;
+ line-height: 25px;
+ display: block;
+ text-transform: uppercase;
+ position: relative;
+
+ &:after {
+ @include transition(width 0.3s ease-in-out 0s);
+ content: '';
+ display: block;
+ height: 2px;
+ width: 0%;
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ }
+
+ &:hover {
+ background: transparent;
+
+ &:after {
+ width: 100%;
+ }
+ }
+
+ &:focus {
+ background: transparent;
+ }
+ }
+
+ &.language-expanded {
+ @include opacity(1);
+ }
+ }
+ }
+ }
+ section:only-child .active-language a .separator {
+ display: none;
+ }
+
+
+ }
+ }
+}
+
+
+// Mobile devices
+@media only screen and (max-width: 767px) {
+
+
+ body {
+
+ &.sticky-header:not(.open-cern-menu) header .nav>li>a {
+ line-height: 35px !important;
+ }
+
+ // header
+ header {
+
+ .site-info + .site-nav nav {
+ width: 100%;
+ }
+
+ &.menu-expanded {
+ .region-header > .block-language
+ {
+ display: block;
+ }
+ }
+
+ .site-nav {
+ .region-header {
+ text-align: left;
+
+ nav.main-menu {
+
+ ul.navbar-nav {
+ padding: 0 50px 0 0;
+ width: 100%;
+
+ // only first level dropdowns
+ & > li.dropdown.open {
+ position: relative;
+ display: block;
+
+ & > ul.dropdown-menu {
+ position: static;
+
+ ul.dropdown-menu{
+ position: relative;
+ }
+
+ a {
+ &:before {
+ top: -1px;
+ }
+
+ &:after {
+ bottom: -3px;
+ }
+ }
+
+ }
+ }
+
+ }
+ }
+
+ // language selector
+ & > .block-language
+ {
+ position: absolute;
+ display: none;
+ right: 30px;
+ margin: auto;
+ top: 67px;
+
+ .active-language a span.separator
+ {
+ display: none;
+ }
+
+ ul.links
+ {
+ @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
+ top: 60px;
+
+ &:before
+ {
+ display: none;
+ }
+ }
+ }
+
+ }
+ }
+ }
+ }
+}
+
+// for tablet devices
+@media only screen and (min-width: 768px) and (max-width: 1080px) {
header{
.site-info{
@@ -198,394 +618,73 @@
}
}
-body{
+// Laptops + Desktops
+@media only screen and (min-width: 1081px){
- // header
- header {
+ body{
- .site-info{
+ // header
+ header {
- &+.site-nav {
- nav {
- float: none;
- }
- }
+ .site-nav{
+ .region-header {
- &__text{
+ nav.main-menu {
- overflow-wrap: break-word;
-
- &__name{
- white-space: unset;
- text-overflow: unset;
- }
- }
-
- }
-
- .site-nav{
- .region-header {
- &>.name {
- display: block;
- }
-
- &>.navbar-text {
- display: block;
- }
+ ul.navbar-nav{
- }
- section:only-child .active-language a .separator {
- display: none;
- }
+ // only first level dropdowns
+ &>li.dropdown.open{
+ // 2nd level wrapper
+ &>ul.dropdown-menu{
+ left: unset;
+ right: -25px;
+ min-width: 200px;
- }
- }
- }
-
-
-//header : menu expanded
-header.menu-expanded {
- top: 0;
- position: fixed;
- width: 100%;
- z-index: 500;
-
- .header-wrapper {
-
- .nav{
- float: left;
- }
- padding: 10px 5%;
- }
-
- .site-info__logo {
- max-width: 25%;
- width: auto;
-
- img {
- max-height: 50px;
- }
- }
-
- .site-info__text__slogan {
- display: none;
- }
-
- .nav>li>a {
- line-height: 56px;
-
- &:after {
- bottom: 9px;
- }
- }
-
- .navbar-default .navbar-toggle:hover,
- .navbar-default .navbar-toggle:focus,
- .navbar-default .navbar-toggle {
- top: 20%;
- }
-
- .navbar-default.main-menu .navbar-toggle {
- top: 33px;
- }
-}
-
-.toolbar-fixed header.menu-expanded {
- top: 39px;
- margin-top: 0 !important;
-}
-
-.toolbar-vertical header.menu-expanded {
- top: 39px;
- margin-top: 0 !important;
-}
-
-.toolbar-fixed.toolbar-tray-open header.menu-expanded {
- top: 78px;
-}
-
-.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
- top: 39px;
-}
-
-// header override header & sticky header
-.sticky-header header .site-info {
- min-height: 56px;
-
- img {
- left: 0;
- }
-}
-
-header .nav>li {
-
-
- margin: 0 20px;
-
- &:nth-last-child(2){
- margin-right: 35px;
- }
-}
-
-header .site-info__text__name {
- padding: 2px 0 0;
-}
-
-// overriden CERN base
-header .site-info+.site-nav nav {
- float: none !important; //imortant because this rule solely relies on the CSS load order which cannot be ensured
-}
-
-.region-header {
- text-align: right;
-
- &>nav,
- &>.block-language {
- display: inline-block;
- vertical-align: top;
- }
-}
-
-.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
- top: 32px;
-}
-
-@media only screen and (max-width: 767px) {
- .sticky-header:not(.open-cern-menu) header .nav>li>a {
- line-height: 35px !important;
- }
-}
-
-// language switcher
-.block-language {
- position: relative;
-
- h2.block-title {
- display: none;
- }
-
- .active-language {
- padding: 0 0 0 10px;
-
- a {
- @include transition(all 0.3s ease-in-out 0s);
- @include font-size(1.6);
- font-family: "opensans-bold";
- line-height: 76px;
- position: relative;
- text-transform: uppercase;
-
- &:after {
- @include transition(width 0.3s ease-in-out 0s);
- content: '';
- display: block;
- height: 2px;
- width: 0%;
- position: absolute;
- bottom: -10px;
- left: 0;
- }
-
- &:hover {
- background: transparent;
-
- &:after {
- width: 100%;
- }
- }
-
- &:focus {
- background: transparent;
- }
+ &:before{
+ content: "";
+ width: 0px;
+ height: 0px;
+ background: transparent;
+ border-width: 12px;
+ border-style: solid;
+ position: absolute;
+ top: -24px;
+ left: 150px;
+ }
- span.separator {
- position: absolute;
- left: -20px;
- top: -2px;
- line-height: 21px;
- }
+ // all encapsulated sub-menus that can be expanded
+ li.dropdown {
- span.caret {
- position: absolute;
- right: -20px;
- top: 49%;
- }
- }
- }
+ >a{
+ // do not display the carets in laptops and desktops
+ span.caret{
+ display: none;
+ }
+ }
- &>ul.links {
- @include box-shadow(0, 6px, 12px, rgba(0, 0, 0, 0.17));
- @include opacity(0);
- list-style: none;
- margin: 0;
- padding: 10px 12px;
- position: absolute;
- top: 80px;
-
- &::before {
- left: unset;
- right: 10px;
- top: -23px;
- content: '';
- width: 0px;
- height: 0px;
- background: transparent;
- border-width: 12px;
- border-style: solid;
- position: absolute;
- }
- a {
- @include font-size(1.6);
- font-family: "opensans-bold";
- padding: 0;
- line-height: 25px;
- display: block;
- text-transform: uppercase;
- position: relative;
-
- &:after {
- @include transition(width 0.3s ease-in-out 0s);
- content: '';
- display: block;
- height: 2px;
- width: 0%;
- position: absolute;
- bottom: -4px;
- left: 0;
- }
+ ul.dropdown-menu {
+ position: absolute;
+ left: -100%;
+ top: -33%;
+ }
+ }
+ }
+ }
- &:hover {
- background: transparent;
+ // the Search button
+ &>li.cern-search{
+ #cern-search-overlay{
+ top: 37px;
+ }
+ }
- &:after {
- width: 100%;
+ }
+ }
}
}
-
- &:focus {
- background: transparent;
- }
- }
-
- &.language-expanded {
- @include opacity(1);
- }
- }
-}
-
-/* sticky */
-
-.sticky-header .block-language .active-language a {
- line-height: 56px;
-}
-
-/* responsive */
-
-@media only screen and (max-width: 767px) {
- .region-header {
- text-align: left;
- }
-
- header .site-info+.site-nav nav {
- width: 100%;
- }
-
- .region-header>.block-language {
- position: absolute;
- display: none;
- right: 30px;
- margin: auto;
- top: 67px;
-
- .active-language a span.separator {
- display: none;
- }
- }
-
- header .block-language ul.links {
- @include box-shadow(0, 0, 0, rgba(0, 0, 0, 0));
- top: 60px;
-
- &:before {
- display: none;
- }
- }
-
- .menu-expanded {
- .region-header>.block-language {
- display: block;
- }
- }
-
- .main-menu {
- .navbar-nav {
- padding: 0 50px 0 0;
- }
- }
-}
-
-//dropdown menu - multilevel
-/*
-element.style {
- display: block;
- position: static;
- width: 100%;
- background: teal;
- box-shadow: 0 0 0 0;
- padding: 5px 0;
-}
-*/
-
-header .main-menu .dropdown-menu {
- a {
-
- display: block;
-
- .caret {
- display: none;
- }
- }
-
- .dropdown-menu {
- display: block;
- position: static;
- width: 100%;
- box-shadow: 0 0 0 0;
-
- li {
- margin: 0;
- }
-
- a {
- min-height: 25px;
- padding: 0 0 0 20px;
-
- }
-
- &:before {
- display: none;
}
}
}
-
-nav.main-menu{
- .dropdown-menu{
- left: unset;
- right: -25px;
- min-width: 200px;
-
-
- &:before{
- left: 150px;
- }
-
- &> li{
- &> a{
- white-space: normal;
- width: fit-content;
- }
- }
- }
-}
\ No newline at end of file