// ebi-vf1-integration // **Thinking about deleting this file?** // If your component needs no CSS/Sass, we still recommend leaving the // scss files in place. As this is primarily a CSS framework, it is better to // leave the empty files so you know a file wasn't accidentally omitted. // If you don't have any Sass, you can trim this block down to: // "This page was intentionally left blank" @import 'package.variables.scss'; /* * * Here lies a set of corrections that make components from VF1 look like VF2, in terms of colour * and typography. So as not to have to make too many 'hacks' in VF2.0 * */ // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ @import 'ebi-vf1-integration.variables.scss'; // this alters the typeface for the VF1.x header navigation to match Plex .ebi-vf1-integration, html body.ebi-vf1-integration { font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif; h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p { font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif; } } // removes text-rendering: optimizeLegibility body.ebi-vf1-integration, .ebi-vf1-integration p { -webkit-font-smoothing: unset !important; text-rendering: initial; } .ebi-vf1-integration { h1 { color: unset; } // sneaks in a small change to make the EBI 'black bar' more VF2.0 with grey--darkest .masthead-black-bar { background-color: #373a36; } // this makes the EBI / VF1.x header, footer the same max-width of VF2.0 #masthead-black-bar .row, #global-footer .row { max-width: 80em; } #global-nav, #global-footer { font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif; } // Drop the dotted underlines in favour of VF 2.0 underlines a { border: unset; text-decoration: underline; } a:hover { text-decoration: unset; border-bottom-style: unset; } // EBI Global header and local masthead #local-title a, .masthead-black-bar .global-nav a, .masthead ul li a, ul.menu.secondary-menu a, .secondary-menu ul.menu a { text-decoration: none; &:hover { text-decoration: underline; } } // vf 1.x utility class .no-underline a, a.no-underline { text-decoration: none; border-bottom: none; } // specificity issue .vf-button { text-decoration: none; } .vf-button--primary, .vf-button--secondary, .vf-button--tertiary { &:hover, &:visited { color: white; } &.vf-button--outline:hover, &.vf-button--outline:visited { color: var(--vf-button-border-color,var(--vf-button__color__background--default)); } } // Makes the `vf-button` when used on an `a` element act correctly, but overriding some of the things in ebi-global.css a.vf-button { border: 4px solid ui-color(black) !important; border: 4px solid var(--vf-button-border-color, var(--default-bg-colour)) !important; box-sizing: content-box; opacity: 1; } a.vf-button:hover { opacity: 1; } // Fixes GDPR banner so it's more in keeping with the vf-core 2.0 styles. #data-protection-banner { background-color: #373a36 !important; } #data-protection-banner .row { max-width: $vf-layout--comfortable; } // Fixes an issue with heigh and background colour for EBI 1.x .vf-form__input:not([type=file]) { height: unset; background: unset; } // Fixes an issue with border on focus .vf-form__input:not([type=file]):focus, .vf-form__input:not([type=file]):hover { border-width: unset; box-shadow: unset; } // vf-divider needs to be able go full width hr.vf-divider { max-width: unset; } // vf-hero uses a text-decoration-thickness .vf-hero__heading_link:visited, .vf-hero__heading_link:hover, .vf-hero__heading_link:focus { border-bottom-style: none; } }