Skip to content
Snippets Groups Projects
Commit 6a962a98 authored by khawkins98's avatar khawkins98
Browse files

Improve sass clustering

parent 5f5a4ca5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 459 additions and 533 deletions
css/ebi-css-build/_ebi_base_styles.scss 0 → 100644
+ 250
− 0
View file @ 6a962a98
@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; }
}
}
css/ebi-css-build/_ebi_code_styles.scss
+ 1
− 0
View file @ 6a962a98
......@@ -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;
......
css/ebi-css-build/_ebi_color_styles.scss
+ 20
− 0
View file @ 6a962a98
@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; }
}
......
css/ebi-css-build/_ebi_masthead_styles.scss
+ 0
− 8
View file @ 6a962a98
......@@ -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;
......
css/ebi-css-build/_ebi_related_pattern.scss 0 → 100644
+ 33
− 0
View file @ 6a962a98
@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
}
}
css/ebi-css-build/_tag.scss → css/ebi-css-build/_ebi_tag.scss
+ 0
− 0
View file @ 6a962a98
File moved
css/ebi-css-build/_ebi_utility_styles.scss
+ 38
− 0
View file @ 6a962a98
......@@ -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; }
......
css/ebi-css-build/_embl_selector.scss
+ 102
− 101
View file @ 6a962a98
......@@ -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;}
}
}
}
css/ebi-css-build/ebi-global.scss
+ 10
− 419
View file @ 6a962a98
// 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;
}
css/ebi-css-build/foundation/_settings-extras.scss
+ 1
− 1
View file @ 6a962a98
......@@ -8,7 +8,7 @@
@import '../ebi_dev_note';
// Include the common settings
@import 'settings-common';
@import 'settings-common-foundation';
// 38. Invoke build process
// ------------------------
......
css/ebi-css-build/foundation/_settings-full-fat.scss
+ 2
− 2
View file @ 6a962a98
......@@ -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
// ------------------------
......
css/ebi-css-build/foundation/_settings-lite.scss
+ 2
− 2
View file @ 6a962a98
......@@ -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
// ------------------------
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment