// ebi-header-footer--footer // Custom tag class for Foundation-based EBI framework // Classes to theme the embl dropdown selector for the .masthead-black-bar &.masthead-black-bar { li.embl-selector { border-left: none !important; padding-left: 0.5rem; } .embl-bar { background-color: var(--vf-ui-color--off-white); color: var(--vf-color--grey--darkest); position: relative; /* 2 */ // a copy of vf-u-fullbleed code, // but we duplicate it as we're not able to insert classes into the legacy html import &::before { background-color: inherit; /* 3 */ background-image: inherit; background-position: inherit; background-repeat: inherit; background-size: cover; content: ''; grid-column: 1 / -1; /* 4 */ height: 100%; /* 5 */ margin-left: calc(50% - 50vw); /* 6 */ position: absolute; top: 0; /* 7 */ width: 100vw; /* 8 */ z-index: set-layer(vf-z-index--negative); /* 9 */ } a { color: var(--vf-color--grey--darkest); } a:hover { border-bottom: 1px solid var(--vf-ui-color--white); } } @media screen and (max-width: 39.9375em) { .dropdown-pane.embl-dropdown { // do not show embl-dropdown on small screens at all display: none; width: 0 !important; overflow: hidden; } } .embl-selector { .button.hover, .button:hover { background-color: transparent; } .button[aria-expanded="false"]::after { content: ''; display: block; width: 0; height: 0; border: inset 4px; border-color: var(--vf-ui-color--white) transparent transparent; border-top-style: solid; position: absolute; top: 18px; margin-left: 55px; } &.embl-ebi { .button, .button.hover, .button:focus, .button:hover { background: no-repeat 5px 48% url(https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg); padding-left: 95px; background-size: 90px; max-height: 33px; } } &.active { background-color: var(--vf-ui-color--off-white);; padding-right: 1rem; .button, .button.hover, .button:focus, .button:hover { background-image: url("https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL/EMBL-black.svg"); } } &.active.embl-ebi { .button, .button.hover, .button:focus, .button:hover { background-image: url("https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/EMBL_EBI_Logo_black.svg"); } } } // begin to hide bits of dropdown toggle as screen shrinks @media screen and (max-width: 53em) { li.embl-selector { padding-left: .5rem; } .embl-selector .button { width: 0px; padding-right:1rem; overflow: hidden; } .embl-selector .button:after { display: none; } nav ul.menu li a { padding-right: .35rem; padding-left: .35rem;} } } // no space between ebi black bar and hero .vf-stack > .masthead-black-bar.vf-u-fullbleed ~ .vf-hero { margin-top:unset !important; }