diff --git a/css/ebi-css-build/_ebi_clearable_inputs.scss b/css/ebi-css-build/_ebi_clearable_inputs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..44e0b404f1b51ddd3eb19dc8c81536230779d9a4
--- /dev/null
+++ b/css/ebi-css-build/_ebi_clearable_inputs.scss
@@ -0,0 +1,12 @@
+@mixin ebi-clearable-inputs {
+ // Clearable text inputs
+ // Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text
+ input.clearable {
+ background: #fff url('data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=') no-repeat right -10px center;
+ padding: 3px 25px 3px 4px;
+ transition: background 0.4s;
+ }
+ input.clearable.x { background-position: right 12px center; } // (jQ) Show icon
+ input.clearable.onX{ cursor: pointer; } // (jQ) hover cursor style
+ input.clearable::-ms-clear {display: none; width:0; height:0;} // Remove IE default X
+}
diff --git a/css/ebi-css-build/_ebi_code_styles.scss b/css/ebi-css-build/_ebi_code_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b32d565a899766d5391b5c4e5f7a3256015deb7
--- /dev/null
+++ b/css/ebi-css-build/_ebi_code_styles.scss
@@ -0,0 +1,29 @@
+@mixin ebi-code-styles {
+ .code {
+ font-family: Consolas, "Liberation Mono", Courier, monospace;
+ font-weight: normal;
+ color: #0a0a0a;
+ background-color: #e6e6e6;
+ border: 1px solid #cacaca;
+ padding: 0.125rem 0.3125rem 0.0625rem;
+ overflow-x: auto;
+ }
+ pre {
+ overflow-x: auto;
+ }
+ pre > .code,
+ pre > code {
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: .8rem;
+ }
+ .kbd {
+ margin: 0;
+ color: #0a0a0a;
+ font-family: Consolas, "Liberation Mono", Courier, monospace;
+ }
+ .title-cap { text-transform: capitalize; }
+ .uppercase { text-transform: uppercase; }
+ .lowercase { text-transform: lowercase; }
+}
diff --git a/css/ebi-css-build/_ebi_color_styles.scss b/css/ebi-css-build/_ebi_color_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ab7540fb02a35d5f6236bf079a53a09eaf7354e8
--- /dev/null
+++ b/css/ebi-css-build/_ebi_color_styles.scss
@@ -0,0 +1,76 @@
+@mixin ebi-color-styles {
+ .ebi-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-main; }
+ }
+ .services-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-services; }
+ }
+ .research-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-research; }
+ }
+ .training-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-training; }
+ }
+ .industry-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-industry; }
+ }
+ .elixir-background {
+ @at-root a#{&}, &,, &.button, &.button:hover, &.tag { background: $ebi-colour-elixir; }
+ }
+ .white-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-white; }
+ }
+ .secondary-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-dark-grey; }
+ }
+ .tag.secondary { background: $ebi-colour-dark-grey; }
+ .medium-gray-background {
+ @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-medium-grey; }
+ }
+
+ .ebi-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-petrol;
+ }
+ }
+ .services-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-services;
+ }
+ }
+ .research-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-light-green;
+ }
+ }
+ .training-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-training;
+ }
+ }
+ .industry-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-industry;
+ }
+ }
+ .elixir-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-elixir;
+ }
+ }
+ .white-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-white;
+ }
+ }
+ .secondary-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-dark-grey;
+ }
+ }
+ .medium-gray-color {
+ @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
+ color: $ebi-colour-medium-grey;
+ }
+ }
+}
diff --git a/css/ebi-css-build/_ebi_footer_styles.scss b/css/ebi-css-build/_ebi_footer_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..497ad713527ae279ecef1c0f9e86942635c8e3ce
--- /dev/null
+++ b/css/ebi-css-build/_ebi_footer_styles.scss
@@ -0,0 +1,54 @@
+@mixin ebi-footer-styles {
+ // LOCAL FOOTER
+ .local-footer {
+ border-top: 2px solid #eee;
+ }
+
+ // GLOBAL FOOTER
+ .global-footer {
+ border-top: 5px solid #eee;
+ padding-top: .5rem;
+
+ h5 {
+ margin-top: 1.25rem;
+ margin-bottom: 5px;
+ }
+
+ .ebi-logo {
+ display: block;
+ height: 53px;
+ width: 89%;
+ background-image: url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_black.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ margin-left: -.25rem;
+ position: relative;
+ top: 8px;
+ }
+
+ p {
+ margin: 0 0 5px 0;
+ }
+
+ ul {
+ margin-left: 0;
+ font-size: 85%;
+ list-style: none;
+ }
+
+ a {
+ color: $ebi-colour-dark-grey;
+ }
+
+ a:hover,
+ a:focus,
+ a:active{
+ color: $ebi-colour-dark-grey;
+ border-bottom: 1px dashed #e4e4e4;
+ }
+ } // END .global-footer
+
+ .ebi-footer-meta {
+ font-size: 85%; margin-bottom: 9px;
+ } // END .ebi-footer-meta
+}
diff --git a/css/ebi-css-build/_ebi_masthead_styles.scss b/css/ebi-css-build/_ebi_masthead_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c06f393f0bdb95715fef797cf81dc6cad97f582c
--- /dev/null
+++ b/css/ebi-css-build/_ebi_masthead_styles.scss
@@ -0,0 +1,296 @@
+@mixin ebi-masthead-styles {
+ // SITE-WIDE MASTHEAD LAYOUT AND SIZE
+ // Generic rules for global and local mastheads
+
+ // GLOBAL MASTHEAD
+ #local-title a,
+ nav a,
+ nav a:hover { border-bottom: none; }
+
+ .masthead {
+ // underline links in the textual area of the local masthead
+ #local-title .columns {
+ a { border-bottom: 1px dotted rgb(255,255,255); }
+ a.button { border-bottom: none; }
+ a:hover { border-bottom: none; }
+ }
+ }
+
+ // Global menu styling
+ nav ul#global-nav.menu li { border-right: none; display: inline-block; }
+
+ // Disable masthead-black-bar search when told
+ body.no-global-search .masthead-black-bar ul#global-nav.menu li.search { display: none; }
+
+ // Mobile logo
+ @media screen and (max-width: 40em) {
+ nav ul#global-nav.menu li.home { display: none; }
+ nav ul#global-nav.menu li.home-mobile a {
+ display: block;
+ height: 50px;
+ width: 67px;
+ background-image: url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
+ background-size: 64px 47px;
+ background-repeat: no-repeat;
+ margin-left: 6px;
+ }
+ }
+ @media screen and (min-width: 40em) {
+ nav ul#global-nav.menu li.home-mobile { display: none; }
+ }
+
+ .masthead-black-bar {
+ a,
+ a:hover,
+ ul.menu li a:hover,
+ ul.menu li a:active,
+ ul.menu li a:focus,
+ ul.menu li.active a,
+ ul.menu li.active-trail a {
+ color: white;
+ border-bottom: none;
+ }
+
+ ul.menu li.active a,
+ ul.menu li.active-trail a {
+ background: rgb(0,0,0);
+ }
+
+ // custom colour for Home
+ 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: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: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: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: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';
+ }
+
+ ul li.search .dropdown-pane {
+ width: 100%;
+ left: 0;
+ background: $ebi-colour-dark;
+ border: none;
+ margin-top: -2px;
+ color: #fff;
+ }
+
+ // masthead dropdwon styles
+ .dropdown-pane {
+ background-color: #333;
+ background-position: 100% 100%;
+ background-repeat: no-repeat;
+ color: #fff;
+ padding-right: 17rem;
+ min-width: 39.9375em;
+ left: 0; //fix position of menu, to prevent horizontal scrolling of page
+
+ h6 { color: white; font-weight: 700; }
+ .button { color: #007c82; background: #fff; }
+ }
+
+ // EMBL Selector dropdown
+ @include embl-selector;
+
+ }
+
+ .masthead-inner {
+ padding-top: 2.5rem;
+ color: #fff;
+ }
+ // END .masthead
+
+ // Local masthead secondary links on mobile
+ @media screen and (max-width: 39.9375em) {
+ .masthead ul.menu.dropdown.float-right > li {
+ margin-bottom: -50px;
+ }
+
+ .masthead-black-bar nav ul.menu {
+ text-align: right;
+
+ li { float: none; display: inline-block; }
+ li.home-mobile { float: left; }
+
+ // make icon bar smaller for mobile
+ > li > a > img,
+ > li > a:before {
+ display: block;
+ margin: 0 auto 0.25rem;
+ font-size: 16px;
+ }
+ > li > a {
+ text-align: center;
+ font-size: 10px;
+ padding: .6rem .35rem;
+ }
+ }
+ }
+
+ // LOCAL MASTHEAD
+ #skip-to {
+ top: -5000px;
+ position: absolute;
+ }
+
+ // Local menu styling
+ .masthead {
+ background-repeat: no-repeat;
+ background-position: 100% 82%;
+ background-size: cover;
+ // triangle svg background
+ background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="147 248 60 248" xml:space="preserve"><polygon class="st0" fill="#000" fill-opacity="0.05" points="147,363.6 259.3,363.6 259.3,428.4 203.2,460.9 147,428.4 "/></svg>');
+
+ h1,
+ h4,
+ p,
+ a, a:hover, a:active, a:visited {
+ color: #fff;
+ }
+ ul li.is-active a,
+ ul li a:hover,
+ nav ul li a.hover,
+ nav ul li a:hover { background-color: rgba(255,255,255,.5); color: #444; }
+ nav ul li.active a,
+ nav ul li a:active,
+ ul li.active-trail a,
+ ul li.active a:visited,
+ ul li.active-trail a:visited { background-color: rgba(255,255,255,1); color: #444;border-bottom: 0;}
+
+ nav { font-size: .9rem; clear: both; }
+
+ nav ul.menu li { border-right: 1px solid $ebi-colour-light; float: left;
+ margin-left: 0; /* compliance compatibility */
+ }
+ nav ul.menu li:last-child,
+ nav ul.menu li.active { border-right: 0; }
+
+ nav ul.menu li.float-right { border-right: none; }
+ }
+
+ .masthead-inner nav i { line-height: .9em; font-size: .8em; margin-top: -3px; }
+
+ div#local-title { margin-bottom: 1rem; }
+
+ .masthead.meta-background-image {
+ background-position: 100% 100%;
+ background-size: initial;
+ }
+
+ // tweak sticky behaviour
+ .masthead.sticky { width: 100%; position: static; -webkit-transform: none; transform: none; }
+ .masthead.sticky.is-stuck { position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
+
+ input#local-searchbox,
+ #local-search [type="submit"] {
+ display: inline-block; margin: 0;
+ vertical-align: top; border-top: 0; border-right: 0; border-left: 0; box-shadow: none;
+ }
+ #local-search .input-group-button { vertical-align: top; }
+
+ body.section-about .masthead {
+ background-color: $ebi-colour-petrol;
+ }
+ body.section-industry .masthead {
+ background-color: $ebi-colour-industry;
+ }
+ body.section-research {
+ .masthead {
+ background-color: $ebi-colour-light-green;
+ }
+ #local-title h1,
+ #local-title p,
+ #local-title a {
+ color: #FFF;
+ }
+ }
+ body.section-services .masthead {
+ background-color: $ebi-colour-services;
+ }
+ body.section-training .masthead {
+ background-color: $ebi-colour-training;
+ }
+ body.section-training #local-title {
+ h1,
+ #local-title p,
+ #local-title a {
+ color: #222;
+ }
+ }
+ body.section-home .masthead {
+ background-color: $ebi-colour-petrol;
+ }
+
+ // tweak to foundation menu; hide submenu until rendered by JS
+ ul.menu.dropdown ul.menu { display: none; }
+ ul.menu.dropdown ul.menu.is-dropdown-submenu.js-dropdown-active { display:block; }
+ .dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: #FFF transparent transparent; }
+
+ // active sidebar items
+ .menu > li > a.active { font-weight: bold; }
+
+ // dropdown arrow
+ body .dropdown.menu .has-submenu.is-down-arrow > a::after {
+ border-color: rgba(0,0,0,.4) transparent transparent;
+ }
+ body .dropdown.menu .has-submenu.is-right-arrow > a::after {
+ border-color: transparent transparent transparent rgba(0,0,0,.4);
+ }
+ body header nav .menu.dropdown > .has-submenu.is-down-arrow > a::after {
+ border-color: #fff transparent transparent;
+ }
+}
diff --git a/css/ebi-css-build/_ebi_print_styles.scss b/css/ebi-css-build/_ebi_print_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..36f77b8dcf66bc9b20ba808f1b3d8a498b57cef6
--- /dev/null
+++ b/css/ebi-css-build/_ebi_print_styles.scss
@@ -0,0 +1,14 @@
+@mixin ebi-print-styles {
+ /* print styles */
+ @media print {
+ a, a:visited { border-bottom: none; }
+ #skip-to,
+ .masthead-black-bar nav,
+ .masthead nav,
+ form#local-search,
+ .global-footer,
+ #search_ebi,
+ #shortcuts,
+ #ebi_search_results { display: none; }
+ }
+}
diff --git a/css/ebi-css-build/_ebi_table_styles.scss b/css/ebi-css-build/_ebi_table_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8ea1d08c5793dc631440bb32c29b104fe2169af
--- /dev/null
+++ b/css/ebi-css-build/_ebi_table_styles.scss
@@ -0,0 +1,65 @@
+@mixin ebi-table-styles {
+ // padding for page content
+ body.table-layout table {
+ padding: 0;
+ }
+
+ // Tablesorter styling
+ table.tablesorter thead tr th,
+ table.tablesorter thead tr th.tablesorter-headerUnSorted {
+ background-image: url(../libraries/tablesorter/css/images/black-unsorted.gif);
+ background-repeat: no-repeat;
+ background-position: center right;
+ cursor: pointer;
+ }
+ table.tablesorter thead tr th.tablesorter-headerAsc { background-image: url(../libraries/tablesorter/css/images/black-asc.gif); }
+ table.tablesorter thead tr th.tablesorter-headerDesc { background-image: url(../libraries/tablesorter/css/images/black-desc.gif); }
+
+ // No colour striping tables
+ table.no-stripe tbody tr:nth-child(even) { background-color: #fff; }
+
+ /* Data table solutions */
+ /* Tables with custom padding */
+ table.padding-none {
+ border-spacing: 0;
+ }
+ table .padding-none th,
+ table .padding-none td,
+ table.padding-none tbody th,
+ table.padding-none tbody td {
+ padding: 0;
+ }
+ table.data-table,
+ table.padding-small {
+ border-spacing: 0;
+ }
+ table .padding-small th,
+ table .padding-small td,
+ table.padding-small tbody th,
+ table.padding-small tbody td,
+ table.data-table tbody th,
+ table.data-table tbody td {
+ padding: 0rem 0.2rem 0.2rem;
+ }
+ /* border lines on data tables without striping */
+ table.no-stripe.data-table tbody td {
+ border-top: 1px solid $ebi-colour-light-grey;
+ }
+ /* None 100% wide tables */
+ table.data-table,
+ table.width-auto { width: auto; }
+ /* some images should be stretched, such as sparkline-style gifs */
+ table.data-table img,
+ img.stretch { height: inherit; }
+ /* align table cell text to top */
+ table.data-table th,
+ table.data-table td,
+ table.align-top td,
+ table td.align-top {
+ vertical-align: top;
+ }
+ /* highlight table header background */
+ table.data-table thead {
+ background: $ebi-colour-light-grey;
+ }
+}
diff --git a/css/ebi-css-build/_ebi_utility_styles.scss b/css/ebi-css-build/_ebi_utility_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c0e560c453cfdde2d64848d023bf877f66f3384e
--- /dev/null
+++ b/css/ebi-css-build/_ebi_utility_styles.scss
@@ -0,0 +1,83 @@
+@mixin ebi-utility-styles {
+ .serif { font-family: $body-font-family-serif; font-size: 1.1rem; }
+ .sans-serif { font-family: $body-font-family; font-size: 1.1rem; }
+ .serif .sans-serif { font-size: 1rem; } // reset font size when nesting
+
+ .block { display: block; }
+ .clear { clear: both; }
+
+ .small { font-size: 80%; line-height: inherit; }
+ .nowrap { white-space: nowrap; }
+
+ // hide
+ .hidden, .hide { display: none; }
+ // inline-block
+ .inline { display: inline; }
+ .inline-block { display: inline-block; }
+ // positioning
+ .position-relative { position: relative; }
+ .position-absolute { position: absolute; }
+ .position-static { position: static; }
+ .position-fixed { position: fixed; }
+ // no margins
+ .no-margin { margin: 0; }
+ // no underline for links
+ .no-underline a, a.no-underline { border-bottom: none; text-decoration: none; }
+
+ // custom spacing
+ .margin-top-none { margin-top: 0; }
+ .margin-top-xsmall { margin-top: .1rem; }
+ .margin-top-small { margin-top: .25rem; }
+ .margin-top-medium { margin-top: .5rem; }
+ .margin-top-large { margin-top: 1rem; }
+ .margin-top-xlarge { margin-top: 2rem; }
+
+ .margin-left-none { margin-left: 0; }
+ .margin-left-xsmall { margin-left: .1rem; }
+ .margin-left-small { margin-left: .25rem; }
+ .margin-left-medium { margin-left: .5rem; }
+ .margin-left-large { margin-left: 1rem; }
+ .margin-left-xlarge { margin-left: 2rem; }
+
+ .margin-right-none { margin-right: 0; }
+ .margin-right-xsmall { margin-right: .1rem; }
+ .margin-right-small { margin-right: .25rem; }
+ .margin-right-medium { margin-right: .5rem; }
+ .margin-right-large { margin-right: 1rem; }
+ .margin-right-xlarge { margin-right: 2rem; }
+
+ .margin-bottom-none { margin-bottom: 0; }
+ .margin-bottom-xsmall { margin-bottom: .1rem; }
+ .margin-bottom-small { margin-bottom: .25rem; }
+ .margin-bottom-medium { margin-bottom: .5rem; }
+ .margin-bottom-large { margin-bottom: 1rem; }
+ .margin-bottom-xlarge { margin-bottom: 2rem; }
+
+ .padding-top-none { padding-top: 0; }
+ .padding-top-xsmall { padding-top: .1rem; }
+ .padding-top-small { padding-top: .25rem; }
+ .padding-top-medium { padding-top: .5rem; }
+ .padding-top-large { padding-top: 1rem; }
+ .padding-top-xlarge { padding-top: 2rem; }
+
+ .padding-left-none { padding-left: 0; }
+ .padding-left-xsmall { padding-left: .1rem; }
+ .padding-left-small { padding-left: .25rem; }
+ .padding-left-medium { padding-left: .5rem; }
+ .padding-left-large { padding-left: 1rem; }
+ .padding-left-xlarge { padding-left: 2rem; }
+
+ .padding-right-none { padding-right: 0; }
+ .padding-right-xsmall { padding-right: .1rem; }
+ .padding-right-small { padding-right: .25rem; }
+ .padding-right-medium { padding-right: .5rem; }
+ .padding-right-large { padding-right: 1rem; }
+ .padding-right-xlarge { padding-right: 2rem; }
+
+ .padding-bottom-none { padding-bottom: 0; }
+ .padding-bottom-xsmall { padding-bottom: .1rem; }
+ .padding-bottom-small { padding-bottom: .25rem; }
+ .padding-bottom-medium { padding-bottom: .5rem; }
+ .padding-bottom-large { padding-bottom: 1rem; }
+ .padding-bottom-xlarge { padding-bottom: 2rem; }
+}
diff --git a/css/ebi-css-build/ebi-global.scss b/css/ebi-css-build/ebi-global.scss
index 9f2abfc9f774df4915ef0c1ea18cf35a1970fb43..904a1ff10f19a191dbf4355c441830779b15e975 100644
--- a/css/ebi-css-build/ebi-global.scss
+++ b/css/ebi-css-build/ebi-global.scss
@@ -1,29 +1,30 @@
+// Common rules for EMBL-EBI website elements - global and local headers and footers.
+// These build atop and tweak Foundation's base styles, which we do not directly edit.
+//
+// We do not recommend you edit this file. Rather add any overrides using the pattern in theme-template.css,
+// or if you're using Sass you can override settings in _theme_settings.scss
+
+// Note to show in compiled CSS
/*
================
- READ BEFORE EDITING!
+ DEVELOPERS: READ BEFORE EDITING!
================
-
If you wish to use Sass, do not edit this file. Edit ebi-global.scss
- If you don't care about Sass, delete this block and the ebi-global.scss file.
-
- Note: there is a compiled version for teams that do not wish to use Sass.
-
-*/
-
-// This code is the EBI layer atop the Foundation base styling
-/*
- ebi-global.css
-
- Style rules for common EMBL-EBI website elements - global and local headers and footers.
- These build atop and tweak Foundation's base styles, which we do not directly edit.
-
- We do not recommend you edit this file. Rather add any overrides using the pattern in theme-template.css,
- or if you're using Sass you can override settings in _theme_settings.scss
+ If you don't care about Sass, delete this block and the ebi-global.scss file
+ and use the compiled CSS version.
*/
// Various includes
-@import 'ebi_theme_settings'; // default EBI styling
-@import 'tag'; // custom tag class
+@import 'ebi_theme_settings';
+@import 'tag';
+@import 'ebi_utility_styles';
+@import 'ebi_table_styles';
+@import 'ebi_print_styles';
+@import 'ebi_masthead_styles';
+@import 'ebi_footer_styles';
+@import 'ebi_code_styles';
+@import 'ebi_color_styles';
+@import 'ebi_clearable_inputs';
@import 'embl_selector'; // EMBL Dropdown selector for .masthead-black-bar
@mixin ebi-base-styles {
@@ -31,7 +32,6 @@
li { word-wrap: break-word; }
- // Links
a,
a:visited {
border-bottom-width: 1px;
@@ -64,6 +64,7 @@
a:active {
color: #000;
}
+
.text-highlight {
color: $ebi-colour-light;
background-color: $ebi-colour-dark-grey;
@@ -72,379 +73,21 @@
.callout { background: $ebi-colour-light-grey; border: none; } div.warning { border: none; }
- .ebi-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-main; }
- }
- .services-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-services; }
- }
- .research-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-research; }
- }
- .training-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-training; }
- }
- .industry-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-industry; }
- }
- .elixir-background {
- @at-root a#{&}, &,, &.button, &.button:hover, &.tag { background: $ebi-colour-elixir; }
- }
- .white-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-white; }
- }
- .secondary-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-dark-grey; }
- }
- .tag.secondary { background: $ebi-colour-dark-grey; }
- .medium-gray-background {
- @at-root a#{&}, &, &.button, &.button:hover, &.tag { background: $ebi-colour-medium-grey; }
- }
-
- .ebi-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-petrol;
- }
- }
- .services-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-services;
- }
- }
- .research-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-light-green;
- }
- }
- .training-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-training;
- }
- }
- .industry-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-industry;
- }
- }
- .elixir-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-elixir;
- }
- }
- .white-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-white;
- }
- }
- .secondary-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-dark-grey;
- }
- }
- .medium-gray-color {
- @at-root .label#{&}, .button#{&}, a#{&}, a:hover#{&}, &, & cite, & a, & a:hover, & a:visited, & h3, & h4 {
- color: $ebi-colour-medium-grey;
- }
- }
-
- // SITE-WIDE MASTHEAD LAYOUT AND SIZE
- // Generic rules for global and local mastheads
-
- // GLOBAL MASTHEAD
- #local-title a,
- nav a,
- nav a:hover { border-bottom: none; }
-
- .masthead {
- // underline links in the textual area of the local masthead
- #local-title .columns {
- a { border-bottom: 1px dotted rgb(255,255,255); }
- a.button { border-bottom: none; }
- a:hover { border-bottom: none; }
- }
- }
-
- // Global menu styling
- nav ul#global-nav.menu li { border-right: none; display: inline-block; }
-
- // Disable masthead-black-bar search when told
- body.no-global-search .masthead-black-bar ul#global-nav.menu li.search { display: none; }
-
- // Mobile logo
- @media screen and (max-width: 40em) {
- nav ul#global-nav.menu li.home { display: none; }
- nav ul#global-nav.menu li.home-mobile a {
- display: block;
- height: 50px;
- width: 67px;
- background-image: url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
- background-size: 64px 47px;
- background-repeat: no-repeat;
- margin-left: 6px;
- }
- }
- @media screen and (min-width: 40em) {
- nav ul#global-nav.menu li.home-mobile { display: none; }
- }
-
- .masthead-black-bar {
- a,
- a:hover,
- ul.menu li a:hover,
- ul.menu li a:active,
- ul.menu li a:focus,
- ul.menu li.active a,
- ul.menu li.active-trail a {
- color: white;
- border-bottom: none;
- }
-
- ul.menu li.active a,
- ul.menu li.active-trail a {
- background: rgb(0,0,0);
- }
-
- // custom colour for Home
- 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: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: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: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;
- }
+ @include ebi-color-styles;
+ @include ebi-masthead-styles;
- // custom colour for about us
- 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';
- }
-
- ul li.search .dropdown-pane {
- width: 100%;
- left: 0;
- background: $ebi-colour-dark;
- border: none;
- margin-top: -2px;
- color: #fff;
- }
-
- // masthead dropdwon styles
- .dropdown-pane {
- background-color: #333;
- background-position: 100% 100%;
- background-repeat: no-repeat;
- color: #fff;
- padding-right: 17rem;
- min-width: 39.9375em;
- left: 0; //fix position of menu, to prevent horizontal scrolling of page
-
- h6 { color: white; font-weight: 700; }
- .button { color: #007c82; background: #fff; }
- }
-
- // EMBL Selector dropdown
- @include embl-selector;
-
- }
-
- .masthead-inner {
- padding-top: 2.5rem;
- color: #fff;
- }
- // END .masthead
-
- // Local masthead secondary links on mobile
- @media screen and (max-width: 39.9375em) {
- .masthead ul.menu.dropdown.float-right > li {
- margin-bottom: -50px;
- }
-
- .masthead-black-bar nav ul.menu {
- text-align: right;
-
- li { float: none; display: inline-block; }
- li.home-mobile { float: left; }
-
- // make icon bar smaller for mobile
- > li > a > img,
- > li > a:before {
- display: block;
- margin: 0 auto 0.25rem;
- font-size: 16px;
- }
- > li > a {
- text-align: center;
- font-size: 10px;
- padding: .6rem .35rem;
- }
- }
- }
-
- // LOCAL MASTHEAD
- #skip-to {
- top: -5000px;
- position: absolute;
- }
-
- // Local menu styling
- .masthead {
- background-repeat: no-repeat;
- background-position: 100% 82%;
- background-size: cover;
- // triangle svg background
- background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="147 248 60 248" xml:space="preserve"><polygon class="st0" fill="#000" fill-opacity="0.05" points="147,363.6 259.3,363.6 259.3,428.4 203.2,460.9 147,428.4 "/></svg>');
-
- h1,
- h4,
- p,
- a, a:hover, a:active, a:visited {
- color: #fff;
- }
- ul li.is-active a,
- ul li a:hover,
- nav ul li a.hover,
- nav ul li a:hover { background-color: rgba(255,255,255,.5); color: #444; }
- nav ul li.active a,
- nav ul li a:active,
- ul li.active-trail a,
- ul li.active a:visited,
- ul li.active-trail a:visited { background-color: rgba(255,255,255,1); color: #444;border-bottom: 0;}
-
- nav { font-size: .9rem; clear: both; }
-
- nav ul.menu li { border-right: 1px solid $ebi-colour-light; float: left;
- margin-left: 0; /* compliance compatibility */
- }
- nav ul.menu li:last-child,
- nav ul.menu li.active { border-right: 0; }
-
- nav ul.menu li.float-right { border-right: none; }
- }
-
- .masthead-inner nav i { line-height: .9em; font-size: .8em; margin-top: -3px; }
-
- div#local-title { margin-bottom: 1rem; }
-
- .masthead.meta-background-image {
- background-position: 100% 100%;
- background-size: initial;
- }
-
- // tweak sticky behaviour
- .masthead.sticky { width: 100%; position: static; -webkit-transform: none; transform: none; }
- .masthead.sticky.is-stuck { position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
-
- input#local-searchbox,
- #local-search [type="submit"] {
- display: inline-block; margin: 0;
- vertical-align: top; border-top: 0; border-right: 0; border-left: 0; box-shadow: none;
- }
- #local-search .input-group-button { vertical-align: top; }
-
- body.section-about .masthead {
- background-color: $ebi-colour-petrol;
- }
- body.section-industry .masthead {
- background-color: $ebi-colour-industry;
- }
- body.section-research {
- .masthead {
- background-color: $ebi-colour-light-green;
- }
- #local-title h1,
- #local-title p,
- #local-title a {
- color: #FFF;
- }
- }
- body.section-services .masthead {
- background-color: $ebi-colour-services;
- }
- body.section-training .masthead {
- background-color: $ebi-colour-training;
- }
- body.section-training #local-title {
- h1,
- #local-title p,
- #local-title a {
- color: #222;
- }
- }
- body.section-home .masthead {
- background-color: $ebi-colour-petrol;
- }
-
- // tweak to foundation menu; hide submenu until rendered by JS
- ul.menu.dropdown ul.menu { display: none; }
- ul.menu.dropdown ul.menu.is-dropdown-submenu.js-dropdown-active { display:block; }
- .dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: #FFF transparent transparent; }
+ /* accomodate legend.label */
+ legend.label { display: block; }
- // active sidebar items
- .menu > li > a.active { font-weight: bold; }
+ /* Secondary menu */
+ ul.menu.secondary-menu,
+ .secondary-menu ul.menu {
+ padding-bottom: 1rem;
- // dropdown arrow
- body .dropdown.menu .has-submenu.is-down-arrow > a::after {
- border-color: rgba(0,0,0,.4) transparent transparent;
- }
- body .dropdown.menu .has-submenu.is-right-arrow > a::after {
- border-color: transparent transparent transparent rgba(0,0,0,.4);
- }
- body header nav .menu.dropdown > .has-submenu.is-down-arrow > a::after {
- border-color: #fff transparent transparent;
+ a, a:hover { border-bottom: none; }
+ li { display: inline-block; } // renders links as bricks, not table cells
}
- /* accomodate legend.label */
- legend.label { display: block; }
-
/* List ...... leaders */
ul.leaders {
max-width: 40em;
@@ -474,62 +117,23 @@
}
}
- /* Secondary menu */
- ul.menu.secondary-menu,
- .secondary-menu ul.menu {
- padding-bottom: 1rem;
-
- a, a:hover { border-bottom: none; }
- li { display: inline-block; } // renders links as bricks, not table cells
- }
-
- /* List: inline horizontal */
+ // List: inline horizontal
ul.inline li { display: inline-block; }
-
- /* List: icon bullets */
+ // List: icon bullets
li.icon-bullet { list-style-type: none; text-indent: -1.3em; }
- /* Badge list */
+ // Badge list
ul li a.badge,
ul li.badge { font-size: inherit; }
- /* Callout tiny */
+ // Callout tiny
.callout.tiny { padding: 0rem; }
- /* Breadcrumbs */
+ // Breadcrumbs
.breadcrumbs { padding-top: 0.5rem; }
body .breadcrumbs a { color: #888; }
- /* extend Froundation utility selectors/classes */
- .small { font-size: 80%; line-height: inherit; }
- .nowrap { white-space: nowrap; }
- .code {
- font-family: Consolas, "Liberation Mono", Courier, monospace;
- font-weight: normal;
- color: #0a0a0a;
- background-color: #e6e6e6;
- border: 1px solid #cacaca;
- padding: 0.125rem 0.3125rem 0.0625rem;
- overflow-x: auto;
- }
- pre {
- overflow-x: auto;
- }
- pre > .code,
- pre > code {
- padding: 0;
- border: 0;
- background: none;
- font-size: .8rem;
- }
- .kbd {
- margin: 0;
- color: #0a0a0a;
- font-family: Consolas, "Liberation Mono", Courier, monospace;
- }
- .title-cap { text-transform: capitalize; }
- .uppercase { text-transform: uppercase; }
- .lowercase { text-transform: lowercase; }
+ @include ebi-code-styles;
/* Custom styling for different local masthead */
#local-title.logo-only img,
@@ -543,58 +147,7 @@
#local-title.logo-title-strapline h1 { font-size: 270%; }
#local-title.logo-title-strapline p { display: inline; font-size: 123.1%; }
- // LOCAL FOOTER
- .local-footer {
- border-top: 2px solid #eee;
- }
-
- // GLOBAL FOOTER
- .global-footer {
- border-top: 5px solid #eee;
- padding-top: .5rem;
-
- h5 {
- margin-top: 1.25rem;
- margin-bottom: 5px;
- }
-
- .ebi-logo {
- display: block;
- height: 53px;
- width: 89%;
- background-image: url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_black.svg");
- background-size: contain;
- background-repeat: no-repeat;
- margin-left: -.25rem;
- position: relative;
- top: 8px;
- }
-
- p {
- margin: 0 0 5px 0;
- }
-
- ul {
- margin-left: 0;
- font-size: 85%;
- list-style: none;
- }
-
- a {
- color: $ebi-colour-dark-grey;
- }
-
- a:hover,
- a:focus,
- a:active{
- color: $ebi-colour-dark-grey;
- border-bottom: 1px dashed #e4e4e4;
- }
- } // END .global-footer
-
- .ebi-footer-meta {
- font-size: 85%; margin-bottom: 9px;
- } // END .ebi-footer-meta
+ @include ebi-footer-styles;
/* Compact vertical menu trees */
ul.simple.vertical.menu {
@@ -666,60 +219,57 @@
margin-bottom: .75rem;
}
- .with-overlay {
- position: relative;
-
- .caption {
- background: -webkit-linear-gradient(transparent, rgba(0,0,0,0.7));
- background: -o-linear-gradient(transparent, rgba(0,0,0,0.7));
- background: -moz-linear-gradient(transparent, rgba(0,0,0,0.7));
- background: linear-gradient(transparent, rgba(0,0,0,0.7));
- position: absolute;
- top:0;
- height: 100%;
- width: 100%;
- padding: 5% 5%;
- color: #fff;
- opacity: 1;
- text-shadow: 0 2px 0 rgba(0,0,0,.8);
-
- &:hover {
- background: -webkit-linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
- background: -o-linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
- background: -moz-linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
- background: linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
- color: #FFF;
-
- > a.inner { color: #fff; }
- }
- .inner {
- position: absolute;
- bottom: 5%;
- width: 95%;
- padding-right: 4rem;
- }
- > a.inner {
- color: #fff;
- text-decoration: none;
- border-bottom: none;
- font-size: 1.4rem;
- line-height: 1.4em;
- padding-top: 50%;
- }
- > a:after { font-family: "EBI-Functional"; content: " >"; display: inline-block; float: right; font-size: 1.7rem; position: relative; top: -.1rem; left: 2rem;}
- }
-
- } // END .with-overlay
+ // overlay pattern slated for removal
+ // was only used on EBI corporate site
+
+ // .with-overlay {
+ // position: relative;
+ //
+ // .caption {
+ // background: -webkit-linear-gradient(transparent, rgba(0,0,0,0.7));
+ // background: -o-linear-gradient(transparent, rgba(0,0,0,0.7));
+ // background: -moz-linear-gradient(transparent, rgba(0,0,0,0.7));
+ // background: linear-gradient(transparent, rgba(0,0,0,0.7));
+ // position: absolute;
+ // top:0;
+ // height: 100%;
+ // width: 100%;
+ // padding: 5% 5%;
+ // color: #fff;
+ // opacity: 1;
+ // text-shadow: 0 2px 0 rgba(0,0,0,.8);
+ //
+ // &:hover {
+ // background: -webkit-linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
+ // background: -o-linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
+ // background: -moz-linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
+ // background: linear-gradient(rgba(0,0,0,0.6), rgba(100,100,100,0.3));
+ // color: #FFF;
+ //
+ // > a.inner { color: #fff; }
+ // }
+ // .inner {
+ // position: absolute;
+ // bottom: 5%;
+ // width: 95%;
+ // padding-right: 4rem;
+ // }
+ // > a.inner {
+ // color: #fff;
+ // text-decoration: none;
+ // border-bottom: none;
+ // font-size: 1.4rem;
+ // line-height: 1.4em;
+ // padding-top: 50%;
+ // }
+ // > a:after { font-family: "EBI-Functional"; content: " >"; display: inline-block; float: right; font-size: 1.7rem; position: relative; top: -.1rem; left: 2rem;}
+ // }
+ //
+ // } // END .with-overlay
// dl
dd { padding-bottom: 1rem; }
- .serif { font-family: $body-font-family-serif; font-size: 1.1rem; }
- .sans-serif { font-family: $body-font-family; font-size: 1.1rem; }
- .serif .sans-serif { font-size: 1rem; } // reset font size when nesting
-
- .block { display: block; }
- .clear { clear: both; }
body .has-tip { font-weight: normal; line-height: 1em; background: rgba(0,0,0,.03); }
@@ -747,7 +297,7 @@
font-size: 1.6rem;
}
- /* tweaks to foundation's mobile settings */
+ // tweaks to foundation's mobile settings
@media screen and (max-width: 75rem) {
body {
ul.dropdown.menu.float-left { padding-left: .5rem; }
@@ -755,26 +305,27 @@
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
- } // END body
+ }
}
- /* Orbit thumbnails */
+ // Orbit thumbnails
nav.orbit-bullets button.thumbnail { width: auto; border-radius: 0; }
nav.orbit-bullets button.thumbnail.is-active { box-shadow: 0 0 1px #444; }
nav.orbit-bullets button.thumbnail.image {width: 4rem; height: 3rem; overflow: hidden;}
nav.orbit-bullets button.thumbnail.image > img { min-width: 6rem; margin-left: -2rem; }
- /* Disable padding on left or right of foundation columns */
+ // Disable padding on left or right of foundation columns
.columns.no-pad-right { padding-right: 0; }
.columns.no-pad-left { padding-left: 0; }
- /* mono-space fonts are fat */
+ // mono-space fonts are fat
code { font-size: .95rem; }
// buttons
.button:focus,
.button:hover,
.button.hover { opacity: .8;}
+
// tabs
.tabs-title > {
a { border-bottom: none; }
@@ -789,46 +340,15 @@
}
}
- /* related / popular */
- // Todo: This should be a mixin...
- .related {
- background: $ebi-colour-dark;
- margin-top: 4.25rem;
- color: $ebi-colour-white;
- padding: .5rem 0 0 1.1rem;
-
- h3 {
- color: $ebi-colour-white;
- background: none;
- margin-bottom: 0;
- }
-
- ul {
- margin-left: 0;
- margin-top: .25rem;
+ @include ebi-related-pattern;
- li {
- display:inline-block;
- width: 49%;
- padding-right: 0;
- font-size: .9rem;
- min-width: 7rem; // for odd mid-break points, ensure the text doesn't get too small
-
- a { color: $ebi-colour-white; border-bottom:none; }
- a:hover { text-decoration: underline; }
- a:after { content: " >"; }
- }
- }
- ul:after { content: " "; height: .5rem; display: block; clear: both; } // a clearfix to show background
- }
-
- /* button grid */
+ // button grid
// Wrap a groupd of a.button.columns with div.button-grid to make a, you guessed it: grid
.button-grid a.button.columns {
margin-bottom: 1px; border-right: 1px solid #fff;
}
- /* intro unit */
+ // intro unit
.intro-unit {
padding-top: 3rem;
padding-bottom: 2rem;
@@ -869,170 +389,41 @@
}
}
-@mixin ebi-utility-styles {
- // hide
- .hidden, .hide { display: none; }
- // inline-block
- .inline { display: inline; }
- .inline-block { display: inline-block; }
- // positioning
- .position-relative { position: relative; }
- .position-absolute { position: absolute; }
- .position-static { position: static; }
- .position-fixed { position: fixed; }
- // no margins
- .no-margin { margin: 0; }
- // no underline for links
- .no-underline a, a.no-underline { border-bottom: none; text-decoration: none; }
-
- // custom spacing
- .margin-top-none { margin-top: 0; }
- .margin-top-xsmall { margin-top: .1rem; }
- .margin-top-small { margin-top: .25rem; }
- .margin-top-medium { margin-top: .5rem; }
- .margin-top-large { margin-top: 1rem; }
- .margin-top-xlarge { margin-top: 2rem; }
-
- .margin-left-none { margin-left: 0; }
- .margin-left-xsmall { margin-left: .1rem; }
- .margin-left-small { margin-left: .25rem; }
- .margin-left-medium { margin-left: .5rem; }
- .margin-left-large { margin-left: 1rem; }
- .margin-left-xlarge { margin-left: 2rem; }
-
- .margin-right-none { margin-right: 0; }
- .margin-right-xsmall { margin-right: .1rem; }
- .margin-right-small { margin-right: .25rem; }
- .margin-right-medium { margin-right: .5rem; }
- .margin-right-large { margin-right: 1rem; }
- .margin-right-xlarge { margin-right: 2rem; }
-
- .margin-bottom-none { margin-bottom: 0; }
- .margin-bottom-xsmall { margin-bottom: .1rem; }
- .margin-bottom-small { margin-bottom: .25rem; }
- .margin-bottom-medium { margin-bottom: .5rem; }
- .margin-bottom-large { margin-bottom: 1rem; }
- .margin-bottom-xlarge { margin-bottom: 2rem; }
-
- .padding-top-none { padding-top: 0; }
- .padding-top-xsmall { padding-top: .1rem; }
- .padding-top-small { padding-top: .25rem; }
- .padding-top-medium { padding-top: .5rem; }
- .padding-top-large { padding-top: 1rem; }
- .padding-top-xlarge { padding-top: 2rem; }
-
- .padding-left-none { padding-left: 0; }
- .padding-left-xsmall { padding-left: .1rem; }
- .padding-left-small { padding-left: .25rem; }
- .padding-left-medium { padding-left: .5rem; }
- .padding-left-large { padding-left: 1rem; }
- .padding-left-xlarge { padding-left: 2rem; }
+@mixin ebi-related-pattern {
+ // related / popular box
+ .related {
+ background: $ebi-colour-dark;
+ margin-top: 4.25rem;
+ color: $ebi-colour-white;
+ padding: .5rem 0 0 1.1rem;
- .padding-right-none { padding-right: 0; }
- .padding-right-xsmall { padding-right: .1rem; }
- .padding-right-small { padding-right: .25rem; }
- .padding-right-medium { padding-right: .5rem; }
- .padding-right-large { padding-right: 1rem; }
- .padding-right-xlarge { padding-right: 2rem; }
+ h3 {
+ color: $ebi-colour-white;
+ background: none;
+ margin-bottom: 0;
+ }
- .padding-bottom-none { padding-bottom: 0; }
- .padding-bottom-xsmall { padding-bottom: .1rem; }
- .padding-bottom-small { padding-bottom: .25rem; }
- .padding-bottom-medium { padding-bottom: .5rem; }
- .padding-bottom-large { padding-bottom: 1rem; }
- .padding-bottom-xlarge { padding-bottom: 2rem; }
-}
+ ul {
+ margin-left: 0;
+ margin-top: .25rem;
-@mixin ebi-print-styles {
- /* print styles */
- @media print {
- a, a:visited { border-bottom: none; }
- #skip-to,
- .masthead-black-bar nav,
- .masthead nav,
- form#local-search,
- .global-footer,
- #search_ebi,
- #shortcuts,
- #ebi_search_results { display: none; }
- }
-}
+ li {
+ display:inline-block;
+ width: 49%;
+ padding-right: 0;
+ font-size: .9rem;
+ min-width: 7rem; // for odd mid-break points, ensure the text doesn't get too small
-@mixin ebi-clearable-inputs {
- /* Clearable text inputs
- Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text */
- input.clearable {
- background: #fff url('data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=') no-repeat right -10px center;
- padding: 3px 25px 3px 4px;
- transition: background 0.4s;
+ a { color: $ebi-colour-white; border-bottom:none; }
+ a:hover { text-decoration: underline; }
+ a:after { content: " >"; }
+ }
+ }
+ ul:after { content: " "; height: .5rem; display: block; clear: both; } // a clearfix to show background
}
- input.clearable.x { background-position: right 12px center; } /* (jQ) Show icon */
- input.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
- input.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
}
-@mixin ebi-table-styles {
- // padding for page content
- body.table-layout table {
- padding: 0;
- }
-
- // Tablesorter styling
- table.tablesorter thead tr th,
- table.tablesorter thead tr th.tablesorter-headerUnSorted {
- background-image: url(../libraries/tablesorter/css/images/black-unsorted.gif);
- background-repeat: no-repeat;
- background-position: center right;
- cursor: pointer;
- }
- table.tablesorter thead tr th.tablesorter-headerAsc { background-image: url(../libraries/tablesorter/css/images/black-asc.gif); }
- table.tablesorter thead tr th.tablesorter-headerDesc { background-image: url(../libraries/tablesorter/css/images/black-desc.gif); }
-
- // No colour striping tables
- table.no-stripe tbody tr:nth-child(even) { background-color: #fff; }
-
- /* Data table solutions */
- /* Tables with custom padding */
- table.padding-none {
- border-spacing: 0;
- }
- table .padding-none th,
- table .padding-none td,
- table.padding-none tbody th,
- table.padding-none tbody td {
- padding: 0;
- }
- table.data-table,
- table.padding-small {
- border-spacing: 0;
- }
- table .padding-small th,
- table .padding-small td,
- table.padding-small tbody th,
- table.padding-small tbody td,
- table.data-table tbody th,
- table.data-table tbody td {
- padding: 0rem 0.2rem 0.2rem;
- }
- /* border lines on data tables without striping */
- table.no-stripe.data-table tbody td {
- border-top: 1px solid $ebi-colour-light-grey;
- }
- /* None 100% wide tables */
- table.data-table,
- table.width-auto { width: auto; }
- /* some images should be stretched, such as sparkline-style gifs */
- table.data-table img,
- img.stretch { height: inherit; }
- /* align table cell text to top */
- table.data-table th,
- table.data-table td,
- table.align-top td,
- table td.align-top {
- vertical-align: top;
- }
- /* highlight table header background */
- table.data-table thead {
- background: $ebi-colour-light-grey;
- }
-}
+@include ebi-utility-styles;
+@include ebi-table-styles;
+@include ebi-print-styles;
+@include ebi-clearable-inputs;