diff --git a/css/ebi-css-build/_ebi_base_styles.scss b/css/ebi-css-build/_ebi_base_styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dc4b39b4ce7fde6302826283da0cb2649ebc0689
--- /dev/null
+++ b/css/ebi-css-build/_ebi_base_styles.scss
@@ -0,0 +1,250 @@
+@mixin ebi-base-styles {
+ body h1, body h2, body h3, body h4, body h5 { font-weight: 300; letter-spacing: -.5px}
+
+ li { word-wrap: break-word; }
+
+ a,
+ a:visited {
+ border-bottom-width: 1px;
+ border-bottom-style: dotted;
+ border-bottom-color: inherit;
+ }
+ a.active,
+ a:hover,
+ a:active { border-bottom-style: solid; }
+ a.special {
+ font-style: italic;
+ border-bottom-style:double;
+ border-bottom-width: 3px;
+ padding: 0.1em 0.3em;
+ }
+ a:hover { opacity: .9; }
+ a.image,
+ a.image:visited { border-bottom: 0 none; }
+ a.button, a.button:visited { color: $ebi-colour-light; white-space: nowrap; }
+
+ /* accomodate legend.label */
+ legend.label { display: block; }
+
+ /* 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
+ }
+
+
+ // Callout tiny
+ .callout.tiny { padding: 0rem; }
+
+ // Breadcrumbs
+ .breadcrumbs { padding-top: 0.5rem; }
+ body .breadcrumbs a { color: $medium-gray; border-bottom: none; }
+
+ /* Custom styling for different local masthead */
+ #local-title.logo-only img,
+ #local-title.logo-title img,
+ #local-title.logo-title-strapline img { float: left; margin: 1em 0.69em 0.69em; }
+ #local-title.logo-title span,
+ #local-title.logo-title-strapline span { display:block; margin: 1em 0 0.69em 0; float:left; }
+ #local-title.logo-title span { margin-top: 2.3em; }
+ #local-title.logo-title h1,
+ #local-title.logo-title-strapline h1 { display: inline; line-height: 100%; }
+ #local-title.logo-title-strapline h1 { font-size: 270%; }
+ #local-title.logo-title-strapline p { display: inline; font-size: 123.1%; }
+
+ /* Compact vertical menu trees */
+ ul.simple.vertical.menu {
+ margin-left: 0;
+ font-size: .9rem;
+ li {
+ margin-bottom: .5rem;
+ display: block;
+ > a { display: inline; padding: 0; }
+ > a.active:before { content: "9 "; font-family: 'EBI-Functional'; }
+ > ul.simple.menu { margin: 0.5rem; }
+ }
+ }
+
+ // cookie banner
+ .cookie-banner {
+ position:fixed;
+ background-color: $ebi-colour-dark;
+ width:100%;
+ padding: $global-padding;
+ left:0;
+ bottom:0;
+ color:#eee;
+ a, a:hover { color: $ebi-colour-light; }
+ .text { margin-right:2em; }
+ }
+
+ // image tweaks
+ body .thumbnail { box-shadow: none; }
+ .caption {
+ line-height: 1.3em;
+ font-family: sans-serif;
+ font-size: .85rem;
+ opacity: .8;
+ overflow: hidden;
+ }
+
+ // image .highlight-caption
+ a.highlight-caption,
+ .highlight-caption {
+ z-index: 1;
+ position: relative;
+ top: -3rem;
+ color: #fff;
+ padding: .25rem .5rem;
+ background: #333;
+ border-bottom: none;
+ }
+ .highlight-caption.highlight-caption-big {
+ top: -8rem;
+ display: inline-block;
+ margin-bottom: -5rem;
+ }
+ // better positioning when combined with position-relative
+ .position-relative > .highlight-caption.highlight-caption-big {
+ position: absolute;
+ top: initial;
+ bottom: 3%;
+ margin-bottom: 0;
+ }
+
+
+ body .has-tip { font-weight: normal; line-height: 1em; background: rgba(0,0,0,.03); }
+
+ /* Float left for pullquotes */
+ blockquote.float-left {
+ border-left: none;
+ text-align: right;
+ border-right: 1px solid #cacaca;
+ margin-right: 1rem;
+ }
+
+ blockquote.lead { margin-left: 1rem; border-left-color: rgba(0,0,0,0); border-right-color: rgba(0,0,0,0);}
+ blockquote.lead.quote:before {
+ content: "“";
+ position: relative;
+ top: -1.5rem;
+ left: -1.5rem;
+ font-size: 3rem;
+ display: block;
+ height: 0px;
+ }
+
+ /* bigger first line for some blockquotes */
+ blockquote.drop-quote::first-line {
+ font-size: 1.6rem;
+ }
+
+ // tweaks to foundation's mobile settings
+ @media screen and (max-width: 75rem) {
+ body {
+ ul.dropdown.menu.float-left { padding-left: .5rem; }
+ h1 { font-size: 2.5rem; }
+ h2 { font-size: 2rem; }
+ h3 { font-size: 1.5rem; }
+ h4 { font-size: 1.25rem; }
+ }
+ }
+
+ // 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
+ .columns.no-pad-right { padding-right: 0; }
+ .columns.no-pad-left { padding-left: 0; }
+
+ // Button
+ //
+ // Your standard button suitable for clicking.
+ //
+ // :hover - Highlights when hovering.
+ //
+ // Markup: documentation/button.html
+ //
+ // Style guide: components.button
+ .button:focus,
+ .button:hover,
+ .button.hover { opacity: .8;}
+
+ // tabs
+ .tabs-title > {
+ a { border-bottom: none; }
+ a:hover {
+ background-color: $ebi-colour-main;
+ color: $ebi-colour-white;
+ }
+ a:focus,
+ a[aria-selected='true'] {
+ color: $ebi-colour-white;
+ background: $ebi-colour-dark-grey;
+ }
+ }
+
+ // 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: 0; //unset all other borders; see https://github.com/ebiwd/EBI-Framework/issues/95
+ border-right: 1px solid #fff;
+ }
+
+ // intro unit
+ .intro-unit {
+ padding-top: 3rem;
+ padding-bottom: 2rem;
+ h2 { font-size: 3rem; margin-bottom: 0; }
+ h3 { padding-bottom: 1rem; }
+ .lead { color: $secondary-color; margin-bottom: .5rem; }
+ }
+
+ // external links
+ a.external{
+ &:after {
+ content: " x";
+ font-family: "EBI-Generic";
+ font-size: .65rem;
+ position: relative;
+ top: -1px;
+ margin-left: .4rem;
+ }
+ }
+
+ // read more
+ a.read-more,
+ a.readmore,
+ a.more {
+ white-space: nowrap;
+ &:after {
+ content: " >";
+ font-family: "EBI-Functional";
+ font-size: .85em;
+ }
+ }
+
+ // wide screen support
+ @media screen and (min-width: 40em) {
+ body.full-width .row,
+ body.full-width .row .row {
+ max-width: 150rem;
+ }
+ }
+
+ // defenition lists
+ dd { padding-bottom: 1rem; }
+ dl dt {
+ font-weight: 400;
+ font-size: 1.1rem;
+ a { border-bottom: none; color: $ebi-colour-dark-grey; }
+ a:hover { border-bottom: 1px dotted; }
+ }
+}
diff --git a/css/ebi-css-build/_ebi_code_styles.scss b/css/ebi-css-build/_ebi_code_styles.scss
index 479385c8ad52f98d9204a24baa48feffb5163d6c..78af34153d131e7c573ad3823d58f04f8ea39d4b 100644
--- a/css/ebi-css-build/_ebi_code_styles.scss
+++ b/css/ebi-css-build/_ebi_code_styles.scss
@@ -7,6 +7,7 @@
border: 1px solid #cacaca;
padding: 0.125rem 0.3125rem 0.0625rem;
overflow-x: auto;
+ font-size: .95rem;
}
pre {
overflow-x: auto;
diff --git a/css/ebi-css-build/_ebi_color_styles.scss b/css/ebi-css-build/_ebi_color_styles.scss
index ab7540fb02a35d5f6236bf079a53a09eaf7354e8..9a7eddbe0587ac2d8ea6984c7f49d464a7e6e244 100644
--- a/css/ebi-css-build/_ebi_color_styles.scss
+++ b/css/ebi-css-build/_ebi_color_styles.scss
@@ -1,4 +1,24 @@
@mixin ebi-color-styles {
+ h1, h2, h3, h4, h5, h6 { color: $body-font-color; }
+
+ h4 { color: $ebi-colour-medium-grey; }
+ a,
+ a:hover,
+ a:focus,
+ a:active {
+ color: $body-font-color;
+ }
+ a:visited { color: $ebi-colour-dark-grey; }
+
+ .text-highlight {
+ color: $ebi-colour-light;
+ background-color: $ebi-colour-dark-grey;
+ padding: 0 0.2em;
+ }
+
+ .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; }
}
diff --git a/css/ebi-css-build/_ebi_masthead_styles.scss b/css/ebi-css-build/_ebi_masthead_styles.scss
index 0cc6887789b94aab6e01c673870f0f06b0900b43..1ffe79a49be80fa5329030d2b7568933df1cf0b9 100644
--- a/css/ebi-css-build/_ebi_masthead_styles.scss
+++ b/css/ebi-css-build/_ebi_masthead_styles.scss
@@ -6,11 +6,6 @@
#local-title a { border-bottom: none; }
.masthead {
-
- // h1 {
- // font-weight: 400;
- // letter-spacing: -2px; // fira kerning on light fonts and default sizes sucks :(
- // }
// underline links in the textual area of the local masthead
#local-title .columns {
a { border-bottom: 1px dotted rgb(255,255,255); }
@@ -51,9 +46,6 @@
color: white;
}
- // EMBL Selector dropdown
- @include embl-selector;
-
.global-nav {
font-size: .9rem;
diff --git a/css/ebi-css-build/_ebi_related_pattern.scss b/css/ebi-css-build/_ebi_related_pattern.scss
new file mode 100644
index 0000000000000000000000000000000000000000..df9ec6b43820b77aa11bb83894f6288724f478ad
--- /dev/null
+++ b/css/ebi-css-build/_ebi_related_pattern.scss
@@ -0,0 +1,33 @@
+@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;
+
+ h3 {
+ color: $ebi-colour-white;
+ background: none;
+ margin-bottom: 0;
+ }
+
+ ul {
+ margin-left: 0;
+ margin-top: .25rem;
+
+ 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
+ }
+}
diff --git a/css/ebi-css-build/_tag.scss b/css/ebi-css-build/_ebi_tag.scss
similarity index 100%
rename from css/ebi-css-build/_tag.scss
rename to css/ebi-css-build/_ebi_tag.scss
diff --git a/css/ebi-css-build/_ebi_utility_styles.scss b/css/ebi-css-build/_ebi_utility_styles.scss
index 5a9c8f92495996dc62da4c2147fedcbd6685e67a..b6eae6c9f3f56c9047aab4e89e0bfaedf2a97dd6 100644
--- a/css/ebi-css-build/_ebi_utility_styles.scss
+++ b/css/ebi-css-build/_ebi_utility_styles.scss
@@ -50,6 +50,44 @@
}
}
+ /* List ...... leaders */
+ ul.leaders {
+ max-width: 40em;
+ padding: 0;
+ overflow-x: hidden;
+ list-style: none;
+
+ li:before {
+ float: left;
+ width: 0;
+ white-space: nowrap;
+ content:
+ ". . . . . . . . . . . . . . . . . . . . "
+ ". . . . . . . . . . . . . . . . . . . . "
+ ". . . . . . . . . . . . . . . . . . . . "
+ ". . . . . . . . . . . . . . . . . . . . ";
+ }
+
+ span:first-child {
+ padding-right: 0.33em;
+ background: white;
+ }
+ span + span {
+ float: right;
+ padding-left: 0.33em;
+ background: white;
+ }
+ }
+
+ // List: inline horizontal
+ ul.inline li { display: inline-block; }
+ // List: icon bullets
+ li.icon-bullet { list-style-type: none; text-indent: -1.3em; }
+
+ // Badge list
+ ul li a.badge,
+ ul li.badge { font-size: inherit; }
+
// custom spacing
.margin-top-none { margin-top: 0; }
.margin-top-xsmall { margin-top: .1rem; }
diff --git a/css/ebi-css-build/_embl_selector.scss b/css/ebi-css-build/_embl_selector.scss
index 8ffd21c2283c8e67f5fb161f749555c09286545a..0f25822823e4d8efe7eff74cc3a48d256181b22f 100644
--- a/css/ebi-css-build/_embl_selector.scss
+++ b/css/ebi-css-build/_embl_selector.scss
@@ -7,122 +7,123 @@
/// Classses to theme the embl dropdown selector for the .masthead-black-bar
@mixin embl-selector {
- // peeking animation for black bar
- transition: border-width 0.5s ease-in-out;
- border-top: 0 solid #EEE;
-
- &.peek {
- border-top: 1rem solid #EEE;
- }
+ .masthead-black-bar {
+ // peeking animation for black bar
+ transition: border-width 0.5s ease-in-out;
+ border-top: 0 solid #EEE;
+ &.peek {
+ border-top: 1rem solid #EEE;
+ }
- li.embl-selector {
- margin-left: 0.5rem;
- border-left: .5px solid rgba(255,255,255,.5);
- padding-left: 1.5rem;
- }
+ li.embl-selector {
+ margin-left: 0.5rem;
+ border-left: .5px solid rgba(255,255,255,.5);
+ padding-left: 1.5rem;
+ }
- .embl-bar {
- height: 0; overflow: hidden;
- display: none;
- background-color: #eee;
- color: #222;
- // color: #fff;
- a {
+ .embl-bar {
+ height: 0; overflow: hidden;
+ display: none;
+ background-color: #eee;
color: #222;
- // border-bottom: 1px dashed #fff;
+ // color: #fff;
+ a {
+ color: #222;
+ // border-bottom: 1px dashed #fff;
+ }
+ a:hover { border-bottom: 1px solid #fff; }
+ .youarehere {
+ margin-left: -1.5rem;
+ }
}
- a:hover { border-bottom: 1px solid #fff; }
- .youarehere {
- margin-left: -1.5rem;
- }
- }
- .embl-bar.active {
- display: block;
- height: auto; overflow: visible;
- }
+ .embl-bar.active {
+ display: block;
+ height: auto; overflow: visible;
+ }
- .dropdown-pane.embl-dropdown {
- left: 0; //fix position of menu, to prevent horizontal scrolling of page
+ .dropdown-pane.embl-dropdown {
+ left: 0; //fix position of menu, to prevent horizontal scrolling of page
- background-color: $ebi-colour-dark;
- background-position: 100% 100%;
- background-repeat: no-repeat;
- color: #fff;
- min-width: 30em;
- left: 0; //fix position of menu, to prevent horizontal scrolling of page
+ background-color: $ebi-colour-dark;
+ background-position: 100% 100%;
+ background-repeat: no-repeat;
+ color: #fff;
+ min-width: 30em;
+ left: 0; //fix position of menu, to prevent horizontal scrolling of page
- h6 { color: white; font-weight: 700; }
- .button { color: #007c82; background: #fff; }
- a { border-bottom: 1px dashed $ebi-colour-dark-grey; }
- a:hover { border-bottom: 1px solid $ebi-colour-dark-grey; }
- }
- @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;
+ h6 { color: white; font-weight: 700; }
+ .button { color: #007c82; background: #fff; }
+ a { border-bottom: 1px dashed $ebi-colour-dark-grey; }
+ a:hover { border-bottom: 1px solid $ebi-colour-dark-grey; }
}
- }
-
- .embl-selector.embl-ebi {
- .button,
- .button.hover,
- .button:focus,
- .button:hover {
- background: no-repeat 4px 50% url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
- padding-left: 95px;
- background-size: 100px;
+ @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,
- .button.hover,
- .button:focus,
- .button:hover {
- background: no-repeat 100% 50% url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-white.svg);
- padding-left: 2px;
- background-size: 62px;
- width: 63px;
- // background: no-repeat 4px 50% url("https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-white.svg");
- // padding-left: 58px;
- // background-size: 72px;
- padding-right: 17px;
- line-height: 12px;
+ .embl-selector.embl-ebi {
+ .button,
+ .button.hover,
+ .button:focus,
+ .button:hover {
+ background: no-repeat 4px 50% url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
+ padding-left: 95px;
+ background-size: 100px;
+ }
}
- .button.hover,
- .button:hover { background-color: transparent; }
- .button[aria-expanded="false"]::after {
- content: '';
- display: block;
- width: 0;
- height: 0;
- border: inset 4px;
- border-color: #fff transparent transparent;
- border-top-style: solid;
- position: absolute;
- top: 18px;
- margin-left: 55px;
+
+ .embl-selector {
+ .button,
+ .button.hover,
+ .button:focus,
+ .button:hover {
+ background: no-repeat 100% 50% url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-white.svg);
+ padding-left: 2px;
+ background-size: 62px;
+ width: 63px;
+ // background: no-repeat 4px 50% url("https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-white.svg");
+ // padding-left: 58px;
+ // background-size: 72px;
+ padding-right: 17px;
+ line-height: 12px;
+ }
+ .button.hover,
+ .button:hover { background-color: transparent; }
+ .button[aria-expanded="false"]::after {
+ content: '';
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 4px;
+ border-color: #fff transparent transparent;
+ border-top-style: solid;
+ position: absolute;
+ top: 18px;
+ margin-left: 55px;
+ }
}
- }
- .embl-selector.active {
- background-color: #ddd;
- padding-right: 1rem;
- .button,
- .button.hover,
- .button:focus,
- .button:hover {
- background-image: url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-black.svg);
+ .embl-selector.active {
+ background-color: #ddd;
+ padding-right: 1rem;
+ .button,
+ .button.hover,
+ .button:focus,
+ .button:hover {
+ background-image: url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-black.svg);
+ }
}
- }
- // begin to hide bits of dropdown toggle as screen shrinks
- @media screen and (max-width: 53em) {
- .embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
- .embl-selector .button:after { display: none; }
- nav ul.menu li a { padding-right: .5rem; padding-left: .5rem;}
+ // begin to hide bits of dropdown toggle as screen shrinks
+ @media screen and (max-width: 53em) {
+ .embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
+ .embl-selector .button:after { display: none; }
+ nav ul.menu li a { padding-right: .5rem; padding-left: .5rem;}
+ }
}
}
diff --git a/css/ebi-css-build/ebi-global.scss b/css/ebi-css-build/ebi-global.scss
index d2c933739d535bcdd77bd5732e79ea43c5ef5c94..8866e54f39cd0ca42aa342321c0298f93ffe71f0 100644
--- a/css/ebi-css-build/ebi-global.scss
+++ b/css/ebi-css-build/ebi-global.scss
@@ -1,445 +1,36 @@
// Various includes
@import 'ebi_theme_settings';
-@import 'tag';
+@import 'ebi_base_styles';
@import 'ebi_utility_styles';
@import 'ebi_table_styles';
@import 'ebi_print_styles';
@import 'ebi_masthead_styles';
@import 'ebi_footer_styles';
+@import 'ebi_related_pattern';
@import 'ebi_code_styles';
@import 'ebi_color_styles';
@import 'ebi_clearable_inputs';
+@import 'ebi_tag';
@import 'embl_selector'; // EMBL Dropdown selector for .masthead-black-bar
// simple imports for the font while we test
@import 'https://code.cdn.mozilla.net/fonts/fira.css';
@import 'https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css';
-@mixin ebi-base-styles {
- body h1, body h2, body h3, body h4, body h5 { font-weight: 300; letter-spacing: -.5px}
-
- li { word-wrap: break-word; }
-
- a,
- a:visited {
- border-bottom-width: 1px;
- border-bottom-style: dotted;
- border-bottom-color: inherit;
- }
- a.active,
- a:hover,
- a:active { border-bottom-style: solid; }
- a.special {
- font-style: italic;
- border-bottom-style:double;
- border-bottom-width: 3px;
- padding: 0.1em 0.3em;
- }
- a:hover { opacity: .9; }
- a.image,
- a.image:visited { border-bottom: 0 none; }
- a.button, a.button:visited { color: $ebi-colour-light; white-space: nowrap; }
-
- // Colour - defaults to be reset by custom stylesheet
- h1, h2, h3, h4, h5, h6 { color: $body-font-color; }
-
- h4 { color: $ebi-colour-medium-grey; }
- a { color:#3e3e3e; }
- a:visited { color: $ebi-colour-dark-grey; }
- a:hover,
- a:focus,
- a:active {
- color: #000;
- }
-
- .text-highlight {
- color: $ebi-colour-light;
- background-color: $ebi-colour-dark-grey;
- padding: 0 0.2em;
- }
-
- .callout { background: $ebi-colour-light-grey; border: none; } div.warning { border: none; }
-
- @include ebi-color-styles;
- @include ebi-masthead-styles;
-
- /* accomodate legend.label */
- legend.label { display: block; }
-
- /* 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 ...... leaders */
- ul.leaders {
- max-width: 40em;
- padding: 0;
- overflow-x: hidden;
- list-style: none;
-
- li:before {
- float: left;
- width: 0;
- white-space: nowrap;
- content:
- ". . . . . . . . . . . . . . . . . . . . "
- ". . . . . . . . . . . . . . . . . . . . "
- ". . . . . . . . . . . . . . . . . . . . "
- ". . . . . . . . . . . . . . . . . . . . ";
- }
-
- span:first-child {
- padding-right: 0.33em;
- background: white;
- }
- span + span {
- float: right;
- padding-left: 0.33em;
- background: white;
- }
- }
-
- // List: inline horizontal
- ul.inline li { display: inline-block; }
- // List: icon bullets
- li.icon-bullet { list-style-type: none; text-indent: -1.3em; }
-
- // Badge list
- ul li a.badge,
- ul li.badge { font-size: inherit; }
-
- // Callout tiny
- .callout.tiny { padding: 0rem; }
-
- // Breadcrumbs
- .breadcrumbs { padding-top: 0.5rem; }
- body .breadcrumbs a { color: $medium-gray; border-bottom: none; }
-
- @include ebi-code-styles;
-
- /* Custom styling for different local masthead */
- #local-title.logo-only img,
- #local-title.logo-title img,
- #local-title.logo-title-strapline img { float: left; margin: 1em 0.69em 0.69em; }
- #local-title.logo-title span,
- #local-title.logo-title-strapline span { display:block; margin: 1em 0 0.69em 0; float:left; }
- #local-title.logo-title span { margin-top: 2.3em; }
- #local-title.logo-title h1,
- #local-title.logo-title-strapline h1 { display: inline; line-height: 100%; }
- #local-title.logo-title-strapline h1 { font-size: 270%; }
- #local-title.logo-title-strapline p { display: inline; font-size: 123.1%; }
-
- @include ebi-footer-styles;
-
- /* Compact vertical menu trees */
- ul.simple.vertical.menu {
- margin-left: 0;
- font-size: .9rem;
- li {
- margin-bottom: .5rem;
- display: block;
- > a { display: inline; padding: 0; }
- > a.active:before { content: "9 "; font-family: 'EBI-Functional'; }
- > ul.simple.menu { margin: 0.5rem; }
- }
- }
-
- // cookie banner
- .cookie-banner {
- position:fixed;
- background-color: $ebi-colour-dark;
- width:100%;
- padding: $global-padding;
- left:0;
- bottom:0;
- color:#eee;
- a, a:hover { color: $ebi-colour-light; }
- .text { margin-right:2em; }
- }
-
- // MISC TWEAKS
- // ul.menu { font-size: .9rem; }
-
- // image tweaks
- body .thumbnail { box-shadow: none; }
- .caption {
- line-height: 1.3em;
- font-family: sans-serif;
- font-size: .85rem;
- opacity: .8;
- overflow: hidden;
- }
-
- // image .highlight-caption
- a.highlight-caption,
- .highlight-caption {
- z-index: 1;
- position: relative;
- top: -3rem;
- color: #fff;
- padding: .25rem .5rem;
- background: #333;
- border-bottom: none;
- }
- .highlight-caption.highlight-caption-big {
- top: -8rem;
- display: inline-block;
- margin-bottom: -5rem;
- }
- // better positioning when combined with position-relative
- .position-relative > .highlight-caption.highlight-caption-big {
- position: absolute;
- top: initial;
- bottom: 3%;
- margin-bottom: 0;
- }
-
- // image overlays
- .medium-4 > .with-overlay,
- .medium-3 > .with-overlay {
- // sidebar overlays should always have a bottom margin
- margin-bottom: .75rem;
- }
-
- // 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; }
-
-
- body .has-tip { font-weight: normal; line-height: 1em; background: rgba(0,0,0,.03); }
-
- /* Float left for pullquotes */
- blockquote.float-left {
- border-left: none;
- text-align: right;
- border-right: 1px solid #cacaca;
- margin-right: 1rem;
- }
-
- blockquote.lead { margin-left: 1rem; border-left-color: rgba(0,0,0,0); border-right-color: rgba(0,0,0,0);}
- blockquote.lead.quote:before {
- content: "“";
- position: relative;
- top: -1.5rem;
- left: -1.5rem;
- font-size: 3rem;
- display: block;
- height: 0px;
- }
-
- /* bigger first line for some blockquotes */
- blockquote.drop-quote::first-line {
- font-size: 1.6rem;
- }
-
- // tweaks to foundation's mobile settings
- @media screen and (max-width: 75rem) {
- body {
- ul.dropdown.menu.float-left { padding-left: .5rem; }
- h1 { font-size: 2.5rem; }
- h2 { font-size: 2rem; }
- h3 { font-size: 1.5rem; }
- h4 { font-size: 1.25rem; }
- }
- }
-
- // 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
- .columns.no-pad-right { padding-right: 0; }
- .columns.no-pad-left { padding-left: 0; }
-
- // mono-space fonts are fat
- // code { font-size: .95rem; }
-
- // Button
- //
- // Your standard button suitable for clicking.
- //
- // :hover - Highlights when hovering.
- //
- // Markup: documentation/button.html
- //
- // Style guide: components.button
- .button:focus,
- .button:hover,
- .button.hover { opacity: .8;}
-
- // tabs
- .tabs-title > {
- a { border-bottom: none; }
- a:hover {
- background-color: $ebi-colour-main;
- color: $ebi-colour-white;
- }
- a:focus,
- a[aria-selected='true'] {
- color: $ebi-colour-white;
- background: $ebi-colour-dark-grey;
- }
- }
-
- @include ebi-related-pattern;
-
- // 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: 0; //unset all other borders; see https://github.com/ebiwd/EBI-Framework/issues/95
- border-right: 1px solid #fff;
- }
-
- // intro unit
- .intro-unit {
- padding-top: 3rem;
- padding-bottom: 2rem;
- h2 { font-size: 3rem; margin-bottom: 0; }
- h3 { padding-bottom: 1rem; }
- .lead { color: $secondary-color; margin-bottom: .5rem; }
- }
-
- // external links
- a.external{
- &:after {
- content: " x";
- font-family: "EBI-Generic";
- font-size: .65rem;
- position: relative;
- top: -1px;
- margin-left: .4rem;
- }
- }
-
- // read more
- a.read-more,
- a.readmore,
- a.more {
- white-space: nowrap;
- &:after {
- content: " >";
- font-family: "EBI-Functional";
- font-size: .85em;
- }
- }
-
- // wide screen support
- @media screen and (min-width: 40em) {
- body.full-width .row,
- body.full-width .row .row {
- max-width: 150rem;
- }
- }
-
- // tag
- @include ebi-tag;
-
- // defenition lists
- dl dt {
- font-weight: 400;
- font-size: 1.1rem;
- a { border-bottom: none; color: $ebi-colour-dark-grey; }
- a:hover { border-bottom: 1px dotted; }
- }
-
-}
-
-@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;
-
- h3 {
- color: $ebi-colour-white;
- background: none;
- margin-bottom: 0;
- }
-
- ul {
- margin-left: 0;
- margin-top: .25rem;
-
- 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
- }
-}
-
// ebi-styles
@if $include-ebi-global-styles {
@include ebi-base-styles;
@include ebi-utility-styles;
+ @include ebi-masthead-styles;
+ @include ebi-footer-styles;
+ @include ebi-color-styles;
+ @include embl-selector;
}
@if $include-ebi-extra-styles {
@include ebi-print-styles;
@include ebi-clearable-inputs;
@include ebi-table-styles;
+ @include ebi-code-styles;
+ @include ebi-related-pattern;
+ @include ebi-tag;
}
diff --git a/css/ebi-css-build/foundation/_settings-common.scss b/css/ebi-css-build/foundation/_settings-common-foundation.scss
similarity index 100%
rename from css/ebi-css-build/foundation/_settings-common.scss
rename to css/ebi-css-build/foundation/_settings-common-foundation.scss
diff --git a/css/ebi-css-build/foundation/_settings-extras.scss b/css/ebi-css-build/foundation/_settings-extras.scss
index 4811cd63f637b46a127cde51b762e4102c14fd0b..f82bd74d4eb6f041705cda3df3d176e938da67b5 100644
--- a/css/ebi-css-build/foundation/_settings-extras.scss
+++ b/css/ebi-css-build/foundation/_settings-extras.scss
@@ -8,7 +8,7 @@
@import '../ebi_dev_note';
// Include the common settings
-@import 'settings-common';
+@import 'settings-common-foundation';
// 38. Invoke build process
// ------------------------
diff --git a/css/ebi-css-build/foundation/_settings-full-fat.scss b/css/ebi-css-build/foundation/_settings-full-fat.scss
index 6d75317a6b29844a77392b7f47a86f5ce779b299..7756fdd8be21eae2876b231bcdaa9f06d71a9fc0 100644
--- a/css/ebi-css-build/foundation/_settings-full-fat.scss
+++ b/css/ebi-css-build/foundation/_settings-full-fat.scss
@@ -4,10 +4,10 @@
* It is the default an we expect it to be the most commonly used version.
*/
- @import '../ebi_dev_note';
+@import '../ebi_dev_note';
// Include the common settings
-@import 'settings-common';
+@import 'settings-common-foundation';
// 38. Invoke build process
// ------------------------
diff --git a/css/ebi-css-build/foundation/_settings-lite.scss b/css/ebi-css-build/foundation/_settings-lite.scss
index 8aebb837b30d12bf675533148896eb178ffcc834..b68ab0da46802a3bac15c2ccad14cb5689943114 100644
--- a/css/ebi-css-build/foundation/_settings-lite.scss
+++ b/css/ebi-css-build/foundation/_settings-lite.scss
@@ -6,10 +6,10 @@
* compatibility issues.
*/
- @import '../ebi_dev_note';
+@import '../ebi_dev_note';
// Include the common settings
-@import 'settings-common';
+@import 'settings-common-foundation';
// 38. Invoke build process
// ------------------------