Further breakout EBI-global.scss to mixins

css/ebi-css-build/_ebi_clearable_inputs.scss

+@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
+}

css/ebi-css-build/_ebi_code_styles.scss

+@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; }
+}

css/ebi-css-build/_ebi_color_styles.scss

+@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;
+    }
+  }
+}

css/ebi-css-build/_ebi_footer_styles.scss

+@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
+}

css/ebi-css-build/_ebi_masthead_styles.scss

+@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;
+  }
+}

css/ebi-css-build/_ebi_print_styles.scss

+@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; }
+  }
+}

css/ebi-css-build/_ebi_table_styles.scss

+@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;
+  }
+}

css/ebi-css-build/_ebi_utility_styles.scss

+@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; }
+}