Commit fea37e8d authored by Konstantinos Platis's avatar Konstantinos Platis
Browse files

Fixed coloring and styling of menu items that are not links

parent 82408f90
......@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added box-shadow for view blocks/custom blocks when placed on sidebar regions
- Fixed Language Switcher not appearing in mobile devices when menu is open
- Fixed site name not displaying the correct site name but overridden value (using getRawData() function)
- Fixed coloring and styling of menu items that are not links
## [2.6.3] - 10/03/2020
......
......@@ -13,9 +13,9 @@ header .site-info__text__name, header .site-info__text__slogan {
header {
background: #343a40; }
header .nav > li > a {
header .nav > li > a, header .nav > li > span {
color: #fffffe; }
header .nav > li > a:after {
header .nav > li > a:after, header .nav > li > span:after {
background: #f1862e; }
header .cern-search a {
color: #fffffe; }
......@@ -57,16 +57,16 @@ header .dropdown-menu {
border-color: #343a40; }
header .dropdown-menu:before {
border-color: transparent transparent #343a40 transparent; }
header .dropdown-menu > li > a {
header .dropdown-menu > li > a, header .dropdown-menu > li > span {
background: #343a40;
color: #fffffe; }
header .dropdown-menu > li > a:before {
header .dropdown-menu > li > a:before, header .dropdown-menu > li > span:before {
color: #fffffe; }
header .dropdown-menu > li > a:after {
header .dropdown-menu > li > a:after, header .dropdown-menu > li > span:after {
background: #f1862e; }
header .dropdown-menu > li > a:hover:before, header .dropdown-menu > li > a.is-active:before {
header .dropdown-menu > li > a:hover:before, header .dropdown-menu > li > a.is-active:before, header .dropdown-menu > li > span:hover:before, header .dropdown-menu > li > span.is-active:before {
color: #f1862e; }
header .dropdown-menu > li > a:hover, header .dropdown-menu > li > a:focus {
header .dropdown-menu > li > a:hover, header .dropdown-menu > li > a:focus, header .dropdown-menu > li > span:hover, header .dropdown-menu > li > span:focus {
background: #343a40;
color: #fffffe; }
header .dropdown-menu > li > font {
......
......@@ -13,6 +13,8 @@ body {
left: 0; }
body.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
top: 32px; }
body.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .nav > li > a, body.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .nav > li > span {
line-height: 56px; }
body.sticky-header .block-language .active-language a {
line-height: 56px; }
body header.menu-expanded {
......@@ -54,25 +56,87 @@ body {
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 {
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li > span {
font-family: "opensans-bold";
line-height: 76px;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li > span: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: 19px;
left: 0; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li > span:hover:after {
width: 100%; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.open > ul.dropdown-menu .dropdown-menu {
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 a {
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.open > ul.dropdown-menu .dropdown-menu li a, body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.open > ul.dropdown-menu .dropdown-menu li span {
display: table;
min-height: 25px;
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 .caret {
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.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 {
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.open > ul.dropdown-menu .dropdown-menu:before {
display: none;
left: 150px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul a {
body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul a, body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul span:not(.caret) {
width: fit-content;
white-space: normal;
display: table;
margin-right: 5px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul a:before, body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul span:not(.caret):before {
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
font-size: 40px;
font-size: 4rem;
content: "j";
font-family: "cern-icons";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: block;
position: absolute;
line-height: 20px;
width: 8px;
text-indent: -22px;
left: -5px;
top: 0; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul a:after, body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul span:not(.caret):after {
-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;
content: "";
display: block;
height: 2px;
width: 0;
position: absolute;
bottom: 13px;
left: 0;
margin: 0 0 0 18px;
max-width: calc(100% - 18px); }
body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul a:hover:before, body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul span:not(.caret):hover:before {
left: 8px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul a:hover:after, body header .site-nav .region-header nav.main-menu ul.navbar-nav li.dropdown ul span:not(.caret):hover:after {
width: 100%; }
body header .site-nav .region-header > .name {
display: block; }
body header .site-nav .region-header > .navbar-text {
......@@ -220,10 +284,14 @@ body {
position: relative; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu ul.dropdown-menu > li {
padding: 0 15px 0 7%; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:before {
top: 8px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:after {
bottom: 1px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a, body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu span:not(.caret) {
padding: 0 0 0 18px;
line-height: 35px;
position: relative; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:before, body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu span:not(.caret):before {
top: 8px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu a:after, body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu span:not(.caret):after {
bottom: 1px; }
body header .site-nav .region-header > .block-language {
position: absolute;
display: none;
......@@ -279,7 +347,7 @@ body {
padding: 0 3%; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse.collapse.in {
display: block !important;
height: calc(100vh - 130px) !important;
height: calc(100vh - 70px) !important;
padding: 10px 5%; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse.collapse.in .navbar-nav {
float: left;
......@@ -295,11 +363,11 @@ body {
float: none;
padding: 10px;
width: 33%; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a {
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a, body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > span:not(.caret) {
width: fit-content;
line-height: 35px;
display: table; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a:after {
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > a:after, body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li > span:not(.caret):after {
bottom: 0;
transition: all 0.6s ease-in-out 0s;
content: '';
......@@ -318,13 +386,13 @@ body {
left: 10%;
box-shadow: none;
display: block; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a {
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a, body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li span:not(.caret) {
width: fit-content;
display: table;
float: left; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:before {
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:before, body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li span:not(.caret):before {
line-height: 30px; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:after {
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li a:after, body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li span:not(.caret):after {
bottom: 6px; }
body header .site-nav .region-header nav .navbar .container-fluid .navbar-collapse > .navbar-nav > li .dropdown-menu li font {
display: none; }
......@@ -371,8 +439,11 @@ body {
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 > a span.caret {
display: none; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li > a, body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li > span {
position: relative;
padding: 0 0 15px 20px; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li > a span.caret, body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li > span span.caret {
display: none; }
body header .site-nav .region-header nav.main-menu ul.navbar-nav > li.dropdown.open > ul.dropdown-menu li ul.dropdown-menu {
position: absolute;
top: -33%; }
......
......@@ -85,10 +85,14 @@ header {
header {
background: $header-background;
.nav>li>a {
color: $menu-link;
&:after {
background: $icons-chevrons-underline;
.nav{
&>li{
&>a, &>span{
color: $menu-link;
&:after {
background: $icons-chevrons-underline;
}
}
}
}
......@@ -187,7 +191,7 @@ header .dropdown-menu {
border-color: transparent transparent $header-background transparent;
}
&>li {
&>a {
&>a, &>span {
background: $header-background;
color: $menu-link;
&:before {
......
......@@ -48,6 +48,13 @@ body{
.navbar-toggle {
top: 32px;
}
.nav{
&>li{
&>a, &>span{
line-height: 56px;
}
}
}
}
}
}
......@@ -142,37 +149,68 @@ body{
nav.main-menu {
ul.navbar-nav{
// only first level dropdowns
&>li.dropdown.open{
&>li{
&>ul.dropdown-menu{
// all the 2nd+ submenus
.dropdown-menu {
display: none;
width: 100%;
box-shadow: 0 0 0 0;
&>span{
font-family: "opensans-bold";
line-height: 76px;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
&: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: 19px;
left: 0;
}
li {
&:hover{
&:after{
width: 100%;
}
}
a {
display: table;
min-height: 25px;
white-space: normal;
width: fit-content;
}
}
}
&.open{
&>ul.dropdown-menu{
.caret {
// all the 2nd+ submenus
.dropdown-menu {
display: none;
}
width: 100%;
box-shadow: 0 0 0 0;
&:before {
display: none;
left: 150px;
li {
a, span {
display: table;
min-height: 25px;
white-space: normal;
width: fit-content;
}
}
.caret {
display: none;
}
&:before {
display: none;
left: 150px;
}
}
}
}
......@@ -180,11 +218,63 @@ body{
li.dropdown{
ul{
a{
a, span:not(.caret){
width: fit-content;
white-space: normal;
display: table;
margin-right: 5px;
&:before{
-webkit-transition: all 0.6s ease-in-out 0s;
-khtml-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-ms-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
font-size: 40px;
font-size: 4rem;
content: "j";
font-family: "cern-icons";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: block;
position: absolute;
line-height: 20px;
width: 8px;
text-indent: -22px;
left: -5px;
top: 0;
}
&:after{
-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;
content: "";
display: block;
height: 2px;
width: 0;
position: absolute;
bottom: 13px;
left: 0;
margin: 0 0 0 18px;
max-width: calc(100% - 18px);
}
&:hover{
&:before{
left: 8px;
}
&:after{
width: 100%;
}
}
}
}
}
......@@ -383,7 +473,11 @@ body{
}
a {
a, span:not(.caret) {
padding: 0 0 0 18px;
line-height: 35px;
position: relative;
&:before {
top: 8px;
}
......@@ -488,7 +582,7 @@ body{
&.in{
display:block !important;
height: calc(100vh - 130px) !important;
height: calc(100vh - 70px) !important;
padding: 10px 5%;
.navbar-nav{
......@@ -504,7 +598,7 @@ body{
width: 100%;
text-align: left;
// wrapper of each menu item
// wrapper of first level item
&>li{
vertical-align: top;
display: -ms-inline-grid;
......@@ -514,7 +608,7 @@ body{
width: 33%;
// first level menu item
&>a{
&>a, &>span:not(.caret){
width: fit-content;
line-height: 35px;
display: table;
......@@ -552,7 +646,7 @@ body{
li{
a{
a, span:not(.caret){
width: fit-content;
display: table;
float: left;
......@@ -678,7 +772,11 @@ body{
// all encapsulated sub-menus that can be expanded
li {
>a{
>a, >span{
position: relative;
padding: 0 0 15px 20px;
// do not display the carets in laptops and desktops
span.caret{
display: none;
......@@ -750,3 +848,4 @@ body{
}
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment