Skip to content
Snippets Groups Projects
Commit c11bef09 authored by khawkins98's avatar khawkins98
Browse files

Globalnav: Remove need for manually specified icons

parent eb500e44
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/ebi-global.scss
+ 50
− 23
View file @ c11bef09
......@@ -124,8 +124,8 @@ a:active {
/* Mobile logo */
@media screen and (max-width: 40em) {
#local-masthead nav ul#global-nav.menu li#home { display: none; }
#local-masthead nav ul#global-nav.menu li#home-mobile a {
#local-masthead nav ul#global-nav.menu li.home { display: none; }
#local-masthead nav ul#global-nav.menu li.home-mobile a {
display: block;
height: 50px;
width: 67px;
......@@ -136,11 +136,11 @@ a:active {
}
}
@media screen and (min-width: 40em) {
#local-masthead nav ul#global-nav.menu li#home-mobile { display: none; }
#local-masthead nav ul#global-nav.menu li.home-mobile { display: none; }
}
/* Disable global-masthead search when told */
body.no-global-search #global-masthead ul#global-nav li#search { display: none; }
body.no-global-search #global-masthead ul#global-nav li.search { display: none; }
#global-masthead {
ul#global-nav li a:hover,
......@@ -158,42 +158,69 @@ a:active {
}
/* custom colour for Home */
ul li#home a:hover,
ul li#home a:active,
ul li#home a:focus {
ul li.home a:before {
font-family: 'EBI-Generic';
content: 'H ';
}
ul li.home a:hover,
ul li.home a:active,
ul li.home a:focus {
background-color: $ebi-colour-petrol;
}
/* custom colour for Services */
ul li#services a:hover,
ul li#services a:active,
ul li#services a:focus {
ul li.services a:before {
font-family: 'EBI-Generic';
content: '( ';
}
ul li.services a:hover,
ul li.services a:active,
ul li.services a:focus {
background-color: $ebi-colour-services;
}
/* custom colour for Research */
ul li#research a:hover,
ul li#research a:active,
ul li#research a:focus {
ul li.research a:before {
font-family: 'EBI-Generic';
content: ') ';
}
ul li.research a:hover,
ul li.research a:active,
ul li.research a:focus {
background-color: $ebi-colour-light-green;
}
/* custom colour for Training */
ul li#training a:hover,
ul li#training a:active,
ul li#training a:focus {
ul li.training a:before {
font-family: 'EBI-Generic';
content: 't ';
}
ul li.training a:hover,
ul li.training a:active,
ul li.training a:focus {
background-color: $ebi-colour-training;
}
/* custom colour for About us */
ul li#about a:hover,
ul li#about a:active,
ul li#about a:focus,
ul li#about-us a:hover,
ul li#about-us a:active,
ul li#about-us a:focus {
ul li.about a:before {
font-family: 'EBI-Generic';
content: 'i ';
}
ul li.about a:hover,
ul li.about a:active,
ul li.about a:focus,
ul li.about-us a:hover,
ul li.about-us a:active,
ul li.about-us a:focus {
background-color: $ebi-colour-services;
}
/* Custom icon for search */
ul li.search a:before {
font-family: 'EBI-Functional';
content: '1';
}
}
header .masthead {
......@@ -256,7 +283,7 @@ a:active {
}
#local-masthead nav ul#global-nav.menu li { float: none; display: inline-block; }
#local-masthead nav ul#global-nav.menu li#home-mobile { float: left; }
#local-masthead nav ul#global-nav.menu li.home-mobile { float: left; }
ul#global-nav { text-align: right; }
......
index.html
+ 8
− 8
View file @ c11bef09
......@@ -84,14 +84,14 @@
<div class="row">
<ul id="global-nav" class="menu">
<!-- set active class as appropriate -->
<li id="home-mobile" class=""><a href="//www.ebi.ac.uk"></a></li>
<li id="home" class="active"><a href="//www.ebi.ac.uk"><i class="icon icon-generic" data-icon="H"></i> EMBL-EBI</a></li>
<li id="services"><a href="//www.ebi.ac.uk/services"><i class="icon icon-generic" data-icon="("></i> Services</a></li>
<li id="research"><a href="//www.ebi.ac.uk/research"><i class="icon icon-generic" data-icon=")"></i> Research</a></li>
<li id="training"><a href="//www.ebi.ac.uk/training"><i class="icon icon-generic" data-icon="t"></i> Training</a></li>
<li id="about"><a href="//www.ebi.ac.uk/about"><i class="icon icon-generic" data-icon="i"></i> About us</a></li>
<li id="search">
<a href="#" data-toggle="search-global-dropdown"><i class="icon icon-functional" data-icon="1"></i> <span class="show-for-small-only">Search</span></a>
<li class="home-mobile"><a href="//www.ebi.ac.uk"></a></li>
<li class="home active"><a href="//www.ebi.ac.uk">EMBL-EBI</a></li>
<li class="services"><a href="//www.ebi.ac.uk/services">Services</a></li>
<li class="research"><a href="//www.ebi.ac.uk/research">Research</a></li>
<li class="training"><a href="//www.ebi.ac.uk/training">Training</a></li>
<li class="about"><a href="//www.ebi.ac.uk/about">About us</a></li>
<li class="search">
<a href="#" data-toggle="search-global-dropdown"><span class="show-for-small-only">Search</span></a>
<div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">
<form id="global-search" name="global-search" action="/ebisearch/search.ebi" method="GET">
<fieldset>
......
js/injectEBIFramework.js
+ 8
− 8
View file @ c11bef09
......@@ -123,14 +123,14 @@ function injectEBIFramework() {
'<div class="row">' +
'<ul id="global-nav" class="menu">' +
'<!-- set active class as appropriate -->' +
'<li id="home-mobile"><a href="//www.ebi.ac.uk"></a></li>' +
'<li id="home"><a href="//www.ebi.ac.uk"><i class="icon icon-generic" data-icon="H"></i> EMBL-EBI</a></li>' +
'<li id="services"><a href="//www.ebi.ac.uk/services"><i class="icon icon-generic" data-icon="("></i> Services</a></li>' +
'<li id="research"><a href="//www.ebi.ac.uk/research"><i class="icon icon-generic" data-icon=")"></i> Research</a></li>' +
'<li id="training"><a href="//www.ebi.ac.uk/training"><i class="icon icon-generic" data-icon="t"></i> Training</a></li>' +
'<li id="about"><a href="//www.ebi.ac.uk/about"><i class="icon icon-generic" data-icon="i"></i> About us</a></li>' +
'<li id="search">' +
'<a href="#" data-toggle="search-global-dropdown"><i class="icon icon-functional" data-icon="1"></i> <span class="show-for-small-only">Search</span></a>' +
'<li class="home-mobile"><a href="//www.ebi.ac.uk"></a></li>' +
'<li class="home"><a href="//www.ebi.ac.uk">EMBL-EBI</a></li>' +
'<li class="services"><a href="//www.ebi.ac.uk/services">Services</a></li>' +
'<li class="research"><a href="//www.ebi.ac.uk/research">Research</a></li>' +
'<li class="training"><a href="//www.ebi.ac.uk/training">Training</a></li>' +
'<li class="about"><a href="//www.ebi.ac.uk/about">About us</a></li>' +
'<li class="search">' +
'<a href="#" data-toggle="search-global-dropdown"><span class="show-for-small-only">Search</span></a>' +
'<div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">' +
'<form id="global-search" name="global-search" action="/ebisearch/search.ebi" method="GET">' +
'<fieldset>' +
......
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