Skip to content
Snippets Groups Projects
Unverified Commit 218fc720 authored by Stuart Robson's avatar Stuart Robson Committed by GitHub
Browse files

Merge pull request #382 from visual-framework/refactor/vf-masthead 

Refactor/vf masthead
parents 5f9298e1 04d4f269
No related branches found
No related tags found
No related merge requests found
Pipeline #19734 passed with stages
in 3 minutes and 24 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 348 additions and 189 deletions
components/embl-group-page/embl-group-page.njk
+ 41
− 37
View file @ 218fc720
......@@ -50,7 +50,7 @@
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?pattern=node-body&filter-content-type=article&filter-id=580&source=contenthub" data-target="self" data-embl-js-content-hub-loader="">
</div>
{% render '@vf-masthead--inlay' %}
{% render '@vf-header--inlay' %}
<section class="vf-inlay">
......@@ -59,58 +59,62 @@
<section class="vf-inlay__content vf-u-background-color-white">
<main class="vf-inlay__content--main">
<div class="vf-text vf-text--body-xl">The Häring group aims to understand the molecular machinery that organises eukaryotic genomes. <a href="http://vfthemeprototype.lndo.site/about/">Read more about the Häring group</a></div> </main>
<div class="vf-text vf-text--body-xl">The Häring group aims to understand the molecular machinery that organises eukaryotic genomes. <a class="vf-link" href="http://vfthemeprototype.lndo.site/about/">Read more about the Häring group</a></div> </main>
</main>
<aside class="vf-inlay__content--additional">
<article class="vf-summary | vf-summary--profile vf-summary--profile-r">
<img class="vf-summary__image vf-summary__image--avatar" src="{{ '/assets/vf-summary/assets/vf-summary--profile-img.png' | path }}" alt="">
<h3 class="vf-summary__title">Person Name</h3>
<p class="vf-summary__text">Group Leader</p>
<a href="##" class="vf-summary__email">Contact Person</a>
</article>
</aside>
<hr class="vf-divider" />
</section>
<section class="vf-inlay__content vf-u-background-color-white">
<main class="vf-inlay__content--main">
{% render '@vf-content' %}
</main>
<article class="vf-summary vf-summary--profile vf-summary--profile-r">
<img class="vf-summary__image vf-summary__image--avatar" src="{{ '/assets/vf-summary/assets/vf-summary--profile-img.png' | path }}" alt="">
<h3 class="vf-summary__title">
<a href="javascript:void(0);" class="vf-summary__link">FirstName Surname</a>
</h3>
<p class="vf-summary__text">EMBL Press Office</p>
<p class="vf-summary__email">
<a href="mailto:contact@persons.com" class="vf-summary__link vf-summary__link--secondary">contact@persons.com</a>
</p>
</article>
</aside>
<hr class="vf-divider" />
</section>
<aside class="vf-inlay__content--additional">
{% render '@vf-box' %}
</aside>
<section class="vf-inlay__content vf-u-background-color-white">
<main class="vf-inlay__content--main">
{% render '@vf-content' %}
</main>
</section>
<aside class="vf-inlay__content--additional">
{% render '@vf-box' %}
</aside>
</section>
</div>
<div class="vf-body vf-body__additional-content">
<section class="vf-news-container | embl-grid embl-grid--has-sidebar vf-u-margin__top-xl">
</section>
</div>
{% render '@vf-section-header', {'section-title': 'Latest Press Releases'} %}
<div class="vf-body vf-body__additional-content">
<section class="vf-news-container | embl-grid embl-grid--has-sidebar vf-u-margin__top-xl">
<div class="vf-news-container__content">
{% render '@vf-summary--news' %}
{% render '@vf-summary--news' %}
{% render '@vf-summary--news' %}
{% render '@vf-summary--news' %}
</div>
{% render '@vf-section-header', {'section-title': 'Latest Press Releases'} %}
<div class="vf-news-container__sidebar">
</div>
<div class="vf-news-container__content">
{% render '@vf-summary--news' %}
{% render '@vf-summary--news' %}
{% render '@vf-summary--news' %}
{% render '@vf-summary--news' %}
</div>
</section>
<div class="vf-news-container__sidebar">
</div>
</section>
</div>
</div>
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=569&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=569&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
<script src="{{ '/scripts/scripts.js' | path }}"></script>
<script src="{{ '/scripts/scripts.js' | path }}"></script>
</body>
</html>
components/vf-componenet-rollup/scripts.js
+ 3
− 0
View file @ 218fc720
......@@ -10,6 +10,9 @@
import { vfBanner } from 'vf-banner/vf-banner';
vfBanner();
import { vfMastheadSetStyle } from 'vf-masthead/vf-masthead';
vfMastheadSetStyle();
import { vfTabs } from 'vf-tabs/vf-tabs';
vfTabs();
......
components/vf-header/vf-header--inlay.njk 0 → 100644
+ 14
− 0
View file @ 218fc720
<style>
:root {
/* These CSS properties are theming variables. If used, add to your HTML
after the VF CSS for vf-masthead and before the HTML for vf-masthead. */
--vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
}
</style>
<header class="vf-header vf-header--inlay">
{% render '@vf-masthead--inlay' %}
{% render '@vf-navigation--main' %}
</header>
components/vf-header/vf-header.njk
+ 0
− 4
View file @ 218fc720
......@@ -3,11 +3,7 @@
{% render '@vf-global-header' %}
{% render '@vf-masthead' %}
<div class="vf-header__navigation vf-header__navigation--main">
{% render '@vf-navigation--main' %}
</div>
<div class="vf-header__navigation vf-header__navigation--additional">
{% render '@vf-navigation--additional' %}
</div>
</header>
components/vf-header/vf-header.scss
+ 22
− 9
View file @ 218fc720
......@@ -9,17 +9,14 @@
grid-template-columns: minmax(var(--page-grid-gap), auto) minmax(auto, $global-page-max-width) minmax(var(--page-grid-gap), auto);
}
.vf-header > .vf-global-header {
margin-bottom: -1px;
}
.vf-header__navigation {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(var(--page-grid-gap), auto) minmax(auto, $global-page-max-width) minmax(var(--page-grid-gap), auto);
& > * {
.vf-header {
.vf-navigation--main {
grid-column: 2 / -2;
}
.vf-navigation--additional {
grid-column: 1 / -1;
grid-row: 2;
}
}
.vf-header__navigation--site {
......@@ -33,3 +30,19 @@
background-color: set-color(vf-color-gray-dark);
grid-row: 2;
}
.vf-header > .vf-global-header {
margin-bottom: -1px;
}
.vf-header--inlay {
grid-column: 2 / -2;
.vf-masthead__heading {
padding: 0 1rem;
}
.vf-navigation {
grid-column: 1 / -1;
}
}
components/vf-masthead/.npmignore 0 → 100644
+ 4
− 0
View file @ 218fc720
bin
.github
.travis.yml
node_modules
components/vf-masthead/README.md
+ 91
− 0
View file @ 218fc720
......@@ -2,6 +2,97 @@
## About
## Usage
### Background Colours
By default, the background colour for the masthead is `vf-color-green`. To make this more adaptable for other teams and organisation the Visual Framework uses CSS Custom Properties in order to be able to switch this colour to something more in-keeping with the team wanting to use this component.
The colour values are stored in two CSS custom properties. One for the background colour itself and the other for the text colour.
```css
--vf-masthead__color--foreround-default: var(--vf-color-white);
--vf-masthead__color--background-default: var(--vf-color-green);
```
This is set in the components Sass partial but is used in the components HTML inline.
```html
<div class="vf-masthead" style="
background-color: var( --vf-masthead__color--background, var(--vf-masthead__color--background-default) );
color: var( --vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
">
```
To override this the changes to `--vf-masthead__color--foreground-default` and `--vf-masthead__color--background-default` need to be applied either after the Sass partial is compiled in your build step or in the HTML on the page using `root`:
```html
<style>
:root {
--vf-masthead__color--background: none;
--vf-masthead__color--foreground: #000000;
}
</style>
```
#### notes:
If you are overriding the background or foreground (text) colour make sure you are:
- using a colour from the Visual Framework
- testing to be sure that the contrast ratio meets accessibility guidelines
---
### Background Images
If you wish to use an image instead of a colour for the background of your masthead you will need to define its location as a CSS Custom Property.
```css
--vf-masthead__bg-image: url('path/to/background-image_00EF00.png');
```
#### Image Size
The maximum dimensions for a background image is 1224px wide with a height of 150px. As more and more displays are what we term 'retina' they need to be twice the width and height to look crisp.
Images that are used for mastheads need to have dimensions of 2448px by 300px.
#### Text Colour
When using a background image we have to determine the best text colour to meet the contrast ratio from our accessibility guidelines.
We do this using JavaScript and the background image filename.
In creating the background images for mastheads each image filename needs to have it's most dominate colour added as a hexadecimal code.
```bash
masthead-background-image--00EF00.png
```
The JavaScript looks for this hexidecimal colour code and mathematically works out the correct text colour to use. The CSS custom property `--vf-masthead__color--foreground` is then added as a style block after the `body` tag in the HTML page. It will also add the custom property `--vf-masthead__color--background: none` to remove the background colour.
```html
<style>
:root {
--vf-masthead__color--background: none;
--vf-masthead__color--foreground: #00EF00;
}
</style>
```
If JavaScript is disabled, or if it doesn't load with the page. The masthead will default to the background colour.
---
### Browser Support
CSS Custom Properties do not work in older versions of Internet Explorer. We provide a default look for the masthead for these browser which is a white foreground colour (for text) on a green background.
However, this can be overriden if needed using the Sass variables.
<br>
## Installation and Implementation
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-masthead` with this command.
......
components/vf-masthead/package.json
+ 0
− 8
View file @ 218fc720
......@@ -7,14 +7,6 @@
"license": "Apache 2.0",
"style": "vf-masthead.css",
"sass": "index.scss",
"files": [
"assets",
"index.scss",
"vf-masthead.scss",
"vf-masthead.css",
"vf-masthead.njk",
"vf-masthead.config.yml"
],
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
......
components/vf-masthead/vf-masthead--inlay.njk
+ 7
− 20
View file @ 218fc720
......@@ -2,30 +2,17 @@
:root {
/* These CSS properties are theming variables. If used, add to your HTML
after the VF CSS for vf-masthead and before the HTML for vf-masthead. */
/* --vf-masthead__color--background: none; */
/* --vf-masthead__color--foreground: #000000; */
/* --vf-masthead__bg-image: url('http://www.fillmurray.com/800/200'); */
--vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
}
</style>
<header class="vf-inlay__header">
<div class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
<div data-vf-js-masthead class="vf-masthead" style="background-color: 'var(--vf-masthead__color--background', var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreground-default) );">
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a class="vf-masthead__heading__link" href="http://dev-vf-theme-prototype.pantheonsite.io">Häring Group</a>
<a class="vf-masthead__heading__link" href="#">Häring Group</a>
<span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
</h1>
</div>
</div> <!--/vf-masthead-->
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list--inline">
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/about/" class="vf-navigation__link">About</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/members/" class="vf-navigation__link">Members</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/publications/" class="vf-navigation__link">Publications</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/jobs/" class="vf-navigation__link">Jobs</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/blog/" class="vf-navigation__link">Blog</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/optional/" class="vf-navigation__link">Optional</a></li>
</ul>
</nav>
<!--/vf-navigation-->
</header>
</div>
</div>
<!--/vf-masthead-->
components/vf-masthead/vf-masthead--with-title-block.njk
+ 14
− 15
View file @ 218fc720
<div class="vf-masthead vf-masthead--with-title-block" style="background-image: url('{{ '/assets/vf-masthead/assets/group-bg.png' | path }}')">
<div class="vf-masthead__title">
<div class="vf-masthead__title-inner">
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a href="http://dev.beta.embl.org/guidelines/visual-framework" class="vf-masthead__heading__link" data-pjax="">Visual Framework 2.0</a>
<a href="#" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
<span class="vf-masthead__location">EMBL</span>
<span class="vf-masthead__group"><a href="http://dev.beta.embl.org/guidelines/">Guidelines</a></span>
<span class="vf-masthead__location">VF Hamburg</span>
<span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
</div>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
</div>
</div>
components/vf-masthead/vf-masthead.js 0 → 100644
+ 53
− 0
View file @ 218fc720
// vf-masthead
// The background image for the banner element are taken from the database.
// The filename includes the hex code for the background colour of the image.
// Then test if the 6 characters are a hex code and declare the background-color
/**
* Function for making background color of banner from image file name
* @example vfMastheadSetStyle()
*/
function vfMastheadSetStyle() {
const vfMastheads = document.querySelectorAll('[data-vf-js-masthead]');
if (vfMastheads[0]) {
let el = vfMastheads[0];
let bannerBG = getComputedStyle(el).getPropertyValue('--vf-masthead__bg-image');
let filename = bannerBG.substr(0, bannerBG.lastIndexOf('.')) || bannerBG;
let hexcode = filename.substr(filename.length - 6);
let bannerBGC = "#" + hexcode;
let regHex = /[0-9A-Fa-f]{6}/g;
let threshold = 130; // about half of 256. Lower threshold equals more dark text on dark background
let cBrightness = 255; // default to above the threshold
if (regHex.test(hexcode)) {
if (!bannerBGC) return;
bannerBGC = bannerBGC.trim();
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function getCorrectTextColor(hex){
let hRed = hexToR(hex);
let hGreen = hexToG(hex);
let hBlue = hexToB(hex);
return ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
}
cBrightness = getCorrectTextColor(bannerBGC);
if (cBrightness > threshold){
el.style.setProperty('--vf-masthead__color--foreground', "#000000");
} else if (cBrightness < threshold) {
el.style.setProperty('--vf-masthead__color--foreground', "#FFFFFF");
}
}
}
};
export { vfMastheadSetStyle };
components/vf-masthead/vf-masthead.njk
+ 19
− 17
View file @ 218fc720
<div class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a href="#" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
<span class="vf-masthead__location">VF Hamburg</span>
<span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a href="#" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
<span class="vf-masthead__location">VF Hamburg</span>
<span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
</div>
</div>
components/vf-masthead/vf-masthead.scss
+ 30
− 62
View file @ 218fc720
......@@ -2,78 +2,43 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
// vf-masthead
.vf-inlay__header {
// box-sizing: border-box;
grid-column: 1 / -1;
margin: 0 auto;
max-width: 76.5em;
padding: 0 1rem;
position: relative;
width: 100%;
.vf-masthead__heading {
padding: 0 1rem;
}
.vf-navigation {
&::before {
background-color: inherit;
content: '';
height: 37px; // special number
left: 50%;
margin: 0 -50vw;
position: absolute;
right: 50%;
width: 100vw;
z-index: -1;
}
}
}
.vf-masthead {
--vf-masthead__color--foreround-default: var(--vf-color-white);
--vf-masthead__color--background-default: var(--vf-color-green);
background-color: set-color(vf-color-green);
background-image: var( --vf-masthead__bg-image, none);
background-repeat: no-repeat;
background-size: cover;
color: set-color(vf-color-white);
&::before {
background-color: inherit;
background-image: var( --vf-masthead__bg-image, 0);
background-repeat: no-repeat;
background-size: cover;
content: '';
height: 100%;
left: 50%;
margin: 0 -50vw;
position: absolute;
right: 50%;
width: 100vw;
z-index: -1;
}
@media (min-width: $vf-breakpoint-l) {
display: grid;
grid-template-columns: calc(var(--embl-grid-module--prime) + var(--embl-grid-spacing-normaliser)) repeat(auto-fit, minmax(288px, 1fr));
grid-template-rows: 48px 1fr;
padding-top: 48px;
}
}
.vf-masthead__inner {
display: flex;
margin: 0 auto;
max-width: 76.5em;
width: 100%;
}
.vf-masthead__title {
align-self: unset;
display: inline-flex;
flex-direction: column-reverse;
grid-column: 1 / span 3;
grid-row: 2;
// margin: 0 auto;
z-index: 2;
}
.vf-masthead__heading {
@include set-type(heading--xl, $custom-margin-bottom: 8px);
color: inherit;
color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
display: flex;
flex-direction: column;
}
......@@ -81,7 +46,7 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead__heading--additional {
@include set-type(heading--s, $custom-margin-bottom: 0);
color: inherit;
color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
position: relative;
top: -8px;
}
......@@ -89,7 +54,7 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead__sub-heading {
@include set-type(heading--s);
color: $vf-masthead__title-text--color;
color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
}
.vf-masthead__heading__link {
......@@ -115,29 +80,30 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead--with-title-block {
grid-column-gap: 0;
&::before {
background-color: set-color(vf-color-black);
content: '';
grid-column: 1 / 2;
grid-row: 2 / 2;
}
.vf-masthead__title {
align-self: unset;
background-color: set-color(vf-color-black);
display: inline-flex;
grid-column: 2 / span 1;
padding-right: 16px;
padding-top: 16px;
position: relative;
.vf-masthead__title-inner {
&::before {
background-color: set-color(vf-color-black);
content: '';
display: inline-flex;
flex-direction: column-reverse;
grid-auto-columns: max-content;
grid-column: 3 / -2;
height: 100%;
padding-left: 16px;
position: absolute;
transform: translateX(-50%);
width: 50vw;
}
}
.vf-masthead__subheading {
z-index: 5150;
}
}
.vf-masthead__form--search {
......@@ -145,6 +111,8 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
grid-row: 2;
justify-content: flex-end;
margin-bottom: 12px;
margin-left: auto;
max-width: 288px;
z-index: 5150;
}
......
components/vf-navigation/vf-navigation--additional.scss
+ 19
− 0
View file @ 218fc720
......@@ -7,15 +7,34 @@
border-width: 1px 0 1px 0;
box-sizing: border-box;
display: flex;
margin: 0 auto;
max-width: 76.5em;
padding: 4px 0;
position: relative;
text-transform: uppercase;
width: 100%;
&::before {
background-color: inherit;
content: '';
height: 35px; // magic number
left: 50%;
margin: 0 -50vw;
position: absolute;
right: 50%;
top: 0;
width: 100vw;
z-index: -1;
}
.vf-navigation__heading {
color: set-color(vf-color-white);
padding-top: 6px; // magic number
}
.vf-navigation__list {
margin-left: auto;
padding-top: 5px; // magic number
}
.vf-navigation__item:not(:first-child) {
......
components/vf-navigation/vf-navigation--main.scss
+ 13
− 0
View file @ 218fc720
......@@ -3,6 +3,19 @@
.vf-navigation--main {
background-color: set-color(vf-color-gray-dark);
position: relative;
&::before {
background-color: inherit;
content: '';
height: 37px; // special number
left: 50%;
margin: 0 -50vw;
position: absolute;
right: 50%;
width: 100vw;
z-index: -1;
}
.vf-navigation__list {
display: block;
......
components/vf-navigation/vf-navigation.scss
+ 1
− 0
View file @ 218fc720
......@@ -4,6 +4,7 @@
.vf-navigation__list {
display: flex;
flex-direction: row;
}
.vf-navigation__heading {
......
npm-shrinkwrap.json
+ 14
− 14
View file @ 218fc720
......@@ -8986,7 +8986,7 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
}
}
......@@ -24242,7 +24242,7 @@
"get-stdin": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
"integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
"integrity": "sha1-ngm/cSs2CrkiXoEgSPcf3pyJZXs="
},
"glob": {
"version": "7.1.3",
......@@ -24416,7 +24416,7 @@
"meow": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz",
"integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==",
"integrity": "sha1-38c9Y6mvxxSl43F2DrXIi5EHiqQ=",
"requires": {
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
......@@ -24432,7 +24432,7 @@
"micromatch": {
"version": "3.1.10",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
"integrity": "sha1-cIWbyVyYQJUvNZoGij/En57PrCM=",
"requires": {
"arr-diff": "^4.0.0",
"array-unique": "^0.3.2",
......@@ -24507,7 +24507,7 @@
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
"integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE="
},
"postcss": {
"version": "7.0.14",
......@@ -24590,7 +24590,7 @@
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
"integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q="
},
"slice-ansi": {
"version": "2.1.0",
......@@ -24769,7 +24769,7 @@
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
"integrity": "sha1-s56mIp72B+zYniyN8SU2iRysm40="
},
"postcss-selector-parser": {
"version": "5.0.0",
......@@ -24784,7 +24784,7 @@
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
"integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE="
}
}
},
......@@ -25165,7 +25165,7 @@
"fs-extra": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
"integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
"integrity": "sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=",
"requires": {
"graceful-fs": "^4.1.2",
"jsonfile": "^4.0.0",
......@@ -25199,7 +25199,7 @@
"js-yaml": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz",
"integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==",
"integrity": "sha1-LnhEFka9RoLpY/IrbpKCPDCcYtw=",
"requires": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
......@@ -26837,7 +26837,7 @@
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"integrity": "sha1-Sl7Hxk364iw6FBJNus3uhG2Ay8Q=",
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
......@@ -26849,7 +26849,7 @@
"dateformat": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
"integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4="
},
"debug": {
"version": "4.1.1",
......@@ -26862,7 +26862,7 @@
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
"requires": {
"locate-path": "^3.0.0"
}
......@@ -26918,7 +26918,7 @@
"read-pkg-up": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
"integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
"integrity": "sha1-GyIcYIi6d5lgHICPkRYcZuWPiXg=",
"requires": {
"find-up": "^3.0.0",
"read-pkg": "^3.0.0"
......
tools/component-generator/templates/_package.json
+ 3
− 3
View file @ 218fc720
......@@ -9,9 +9,9 @@
"sass": "index.scss",
"main": "build/index.js",
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
},
"publishConfig": {
"access": "public"
},
"repo": "https://github.com/visual-framework/vf-core/tree/master/tree/master/components/<%= componentName %>",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues"
......
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