diff --git a/.eslintrc.json b/.eslintrc.json index bdade709e..5f86a1250 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,8 +1,5 @@ { - "extends": [ - "eslint:recommended", - "prettier" - ], + "extends": ["eslint:recommended", "prettier"], "env": { "es6": true, "browser": true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..d928ddd2c --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ +/.yarn +/dist +/public + +# Ignore all HTML, YAML and Markdown files +*.html +*.yml +*.md diff --git a/.prettierrc.yml b/.prettierrc.yml new file mode 100644 index 000000000..1d2127c3b --- /dev/null +++ b/.prettierrc.yml @@ -0,0 +1,2 @@ +semi: false +singleQuote: true diff --git a/.stylelintrc.yml b/.stylelintrc.yml index ff7888b2c..dce7889f2 100644 --- a/.stylelintrc.yml +++ b/.stylelintrc.yml @@ -11,8 +11,7 @@ rules: selector-no-qualifying-type: null scss/percent-placeholder-pattern: null no-empty-source: null - max-nesting-depth: - - 3 + max-nesting-depth: 3 selector-type-no-unknown: - true - ignore: diff --git a/components/01-pages/culture-pages/work-page/_work-page.scss b/components/01-pages/culture-pages/work-page/_work-page.scss index d201bb6c0..d0ecd71e0 100644 --- a/components/01-pages/culture-pages/work-page/_work-page.scss +++ b/components/01-pages/culture-pages/work-page/_work-page.scss @@ -35,4 +35,3 @@ } } } - diff --git a/components/01-pages/story-pages/story-detail-page/_story-detail-page.scss b/components/01-pages/story-pages/story-detail-page/_story-detail-page.scss index 9fb8b50e1..7b54d4db8 100644 --- a/components/01-pages/story-pages/story-detail-page/_story-detail-page.scss +++ b/components/01-pages/story-pages/story-detail-page/_story-detail-page.scss @@ -14,7 +14,6 @@ @extend %box-shadow-primary-25-right-bottom; } - figure { @extend %container-vertical-spacing-lg; } diff --git a/components/01-pages/topic-page/_topic-page.scss b/components/01-pages/topic-page/_topic-page.scss index 8b1378917..e69de29bb 100644 --- a/components/01-pages/topic-page/_topic-page.scss +++ b/components/01-pages/topic-page/_topic-page.scss @@ -1 +0,0 @@ - diff --git a/components/01-pages/training-pages/training-detail-page/_training-detail-page.scss b/components/01-pages/training-pages/training-detail-page/_training-detail-page.scss index c5daba6d8..9f08f5ced 100644 --- a/components/01-pages/training-pages/training-detail-page/_training-detail-page.scss +++ b/components/01-pages/training-pages/training-detail-page/_training-detail-page.scss @@ -1,14 +1,14 @@ .training-detail-page { - @extend %article-layout; + @extend %article-layout; - align-items: center; + align-items: center; - img, - > img { - @extend %box-shadow-primary-25-right-bottom; - } + img, + > img { + @extend %box-shadow-primary-25-right-bottom; + } - figure { - @extend %container-vertical-spacing-lg; - } + figure { + @extend %container-vertical-spacing-lg; + } } diff --git a/components/02-layouts/component-layouts/container/_container.scss b/components/02-layouts/component-layouts/container/_container.scss index 725d0681e..78dfbe28f 100644 --- a/components/02-layouts/component-layouts/container/_container.scss +++ b/components/02-layouts/component-layouts/container/_container.scss @@ -3,7 +3,7 @@ .container-xl, %container-xl, .container-md, -%container-md { +%container-md { display: flex; width: 100%; flex-direction: column; @@ -45,9 +45,6 @@ padding-bottom: $spacer-base; } - - - //Breakpoints @media screen and (min-width: $grid-breakpoint-lg) { diff --git a/components/02-layouts/component-layouts/tile-layout/_tile-layout.scss b/components/02-layouts/component-layouts/tile-layout/_tile-layout.scss index 3048b0290..bc764da42 100644 --- a/components/02-layouts/component-layouts/tile-layout/_tile-layout.scss +++ b/components/02-layouts/component-layouts/tile-layout/_tile-layout.scss @@ -24,7 +24,7 @@ .tile-grid-alternating-1-4 { grid-template-columns: repeat(2, minmax(6rem, 1fr)); - :nth-child(5n+1) { + :nth-child(5n + 1) { grid-column: span 2; } } diff --git a/components/02-layouts/page-layouts/article-layout-simple/_article-layout-simple.scss b/components/02-layouts/page-layouts/article-layout-simple/_article-layout-simple.scss index 9e17bad83..bcc54dca3 100644 --- a/components/02-layouts/page-layouts/article-layout-simple/_article-layout-simple.scss +++ b/components/02-layouts/page-layouts/article-layout-simple/_article-layout-simple.scss @@ -30,7 +30,7 @@ } // Breakpoints - @media screen and (min-width: $grid-breakpoint-md){ + @media screen and (min-width: $grid-breakpoint-md) { padding-right: $spacer-xxl; padding-left: $spacer-xxl; } @@ -83,4 +83,3 @@ } } } - diff --git a/components/02-layouts/page-layouts/article-layout/_article-layout.scss b/components/02-layouts/page-layouts/article-layout/_article-layout.scss index 84eb935be..e62f88d18 100644 --- a/components/02-layouts/page-layouts/article-layout/_article-layout.scss +++ b/components/02-layouts/page-layouts/article-layout/_article-layout.scss @@ -31,7 +31,7 @@ } // Breakpoints - @media screen and (min-width: $grid-breakpoint-md){ + @media screen and (min-width: $grid-breakpoint-md) { padding-right: $spacer-xxl; padding-left: $spacer-xxl; } @@ -98,4 +98,3 @@ } } } - diff --git a/components/03-organisms/footer/_footer.scss b/components/03-organisms/footer/_footer.scss index b5cf69f85..973bc2135 100644 --- a/components/03-organisms/footer/_footer.scss +++ b/components/03-organisms/footer/_footer.scss @@ -11,10 +11,10 @@ gap: $spacer-base; } -.footer__form , +.footer__form, .footer__offices__section, .footer__list__section { - display:grid; + display: grid; gap: $spacer-xs; } @@ -26,11 +26,10 @@ .footer__offices__section__list { @extend %list-unstyled; - display:grid; + display: grid; gap: $spacer-base; } - .footer__paragraph, .footer__address { @extend %heading-font-regular; @@ -63,7 +62,7 @@ height: $font-size-xxs; margin-right: $spacer-xxs; color: $footer-heading-color; - content: asset-url("icons/pin.svg"); + content: asset-url('icons/pin.svg'); } } @@ -111,10 +110,10 @@ } .footer__form { - grid-row: 1 / 2 ; + grid-row: 1 / 2; } - .footer__offices{ + .footer__offices { grid-row: 1; } diff --git a/components/03-organisms/navbar/_navbar-common.scss b/components/03-organisms/navbar/_navbar-common.scss index 28a98a421..d6e9f8032 100644 --- a/components/03-organisms/navbar/_navbar-common.scss +++ b/components/03-organisms/navbar/_navbar-common.scss @@ -107,7 +107,7 @@ $navbar-secondary-font-size: ms(-2); width: 100%; height: 3px; background-color: $navbar-link-active-color; - content: ""; + content: ''; } .navbtn--meta { diff --git a/components/03-organisms/navbar/_navbar-mobile.scss b/components/03-organisms/navbar/_navbar-mobile.scss index 01b60a84c..de2fd55ef 100644 --- a/components/03-organisms/navbar/_navbar-mobile.scss +++ b/components/03-organisms/navbar/_navbar-mobile.scss @@ -11,7 +11,7 @@ $navbar-primary-font-size: ms(3); width: 1px; height: 1.5em; background-color: $navbar-link-color; - content: ""; + content: ''; } } diff --git a/components/03-organisms/navbar/_navbar.scss b/components/03-organisms/navbar/_navbar.scss index 09b01f720..e3c3ec1bc 100644 --- a/components/03-organisms/navbar/_navbar.scss +++ b/components/03-organisms/navbar/_navbar.scss @@ -1,3 +1,3 @@ -@import "./navbar-common"; -@import "./navbar-mobile"; -@import "./navbar-desktop"; +@import './navbar-common'; +@import './navbar-mobile'; +@import './navbar-desktop'; diff --git a/components/03-organisms/navbar/navbar.js b/components/03-organisms/navbar/navbar.js index 977ec4a61..a143169c1 100644 --- a/components/03-organisms/navbar/navbar.js +++ b/components/03-organisms/navbar/navbar.js @@ -28,8 +28,9 @@ export default class Navbar extends HTMLElement { init() { this.primaryList = document.querySelector('.primary-nav__list') - this.dropdownToggles = Array.from(document.querySelectorAll('.dropdown__toggle--navbar')) - .map(el => new DropdownToggle(el, el.getAttribute('for'))) + this.dropdownToggles = Array.from(document.querySelectorAll('.dropdown__toggle--navbar')).map( + (el) => new DropdownToggle(el, el.getAttribute('for')) + ) this.dropdownPrimaryLinks = document.querySelectorAll('.dropdown .navbtn--primary') // add --enhanced modifier @@ -38,12 +39,12 @@ export default class Navbar extends HTMLElement { '.primary-nav__list', '.primary-nav__item', '.dropdown__list-wrapper', - '.dropdown__toggle' + '.dropdown__toggle', ]) // enhance drill down ux // (copy dropdown heading link into dropdown list if not present) - this.dropdownPrimaryLinks.forEach(link => { + this.dropdownPrimaryLinks.forEach((link) => { const targetDropdownList = link.parentNode.querySelector('.dropdown__list') if (!targetDropdownList.querySelector('.dropdown__item--clone')) { const anchorClone = document.createElement('a') @@ -69,7 +70,7 @@ export default class Navbar extends HTMLElement { this.uncheckDropdownToggles(all, ddt) this.primaryList.classList.remove('primary-nav__list--level2') }) - ddt.relatedLink.addEventListener('click', e => { + ddt.relatedLink.addEventListener('click', (e) => { if (this.isMobile) { e.preventDefault() ddt.checked = true @@ -79,13 +80,12 @@ export default class Navbar extends HTMLElement { }) }) - document.querySelector('.navbtn--drill-up') - .addEventListener('click', () => { - this.uncheckDropdownToggles(this.dropdownToggles) - this.primaryList.classList.remove('primary-nav__list--level2') - }) + document.querySelector('.navbtn--drill-up').addEventListener('click', () => { + this.uncheckDropdownToggles(this.dropdownToggles) + this.primaryList.classList.remove('primary-nav__list--level2') + }) - document.querySelector('body').addEventListener('click', e => { + document.querySelector('body').addEventListener('click', (e) => { if (this.primaryList.contains(e.target)) return this.uncheckDropdownToggles(this.dropdownToggles) this.primaryList.classList.remove('primary-nav__list--level2') @@ -95,15 +95,14 @@ export default class Navbar extends HTMLElement { } enhance(selectors) { - selectors.forEach(s => { + selectors.forEach((s) => { s = s.startsWith('.') ? s.slice(1) : s - Array.from(document.querySelectorAll('.' + s)) - .forEach(e => e.classList.add(s + '--enhanced')) + Array.from(document.querySelectorAll('.' + s)).forEach((e) => e.classList.add(s + '--enhanced')) }) } uncheckDropdownToggles(toggles, except) { - toggles.forEach(t => { + toggles.forEach((t) => { if (except !== t) { t.checked = false } diff --git a/components/03-organisms/newsletter-optin/_newsletter-optin.scss b/components/03-organisms/newsletter-optin/_newsletter-optin.scss index 51a2da046..73374cb93 100644 --- a/components/03-organisms/newsletter-optin/_newsletter-optin.scss +++ b/components/03-organisms/newsletter-optin/_newsletter-optin.scss @@ -6,7 +6,7 @@ justify-content: center; background-blend-mode: multiply; background-color: $brand-gray-75; - background-image: asset-url("bg-images/edition-02/edition02-data-05.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-05.webp'); background-size: cover; color: $newsletter-optin-color; diff --git a/components/04-molecules/article&blog-post-elements/conclusion/_conclusion.scss b/components/04-molecules/article&blog-post-elements/conclusion/_conclusion.scss index 18bc64a1a..c1e6e59c7 100644 --- a/components/04-molecules/article&blog-post-elements/conclusion/_conclusion.scss +++ b/components/04-molecules/article&blog-post-elements/conclusion/_conclusion.scss @@ -64,7 +64,7 @@ $conclusion-border-size: ms(5); > li p { @extend %heading-font-regular; - /* stylelint-disable-next-line selector-max-compound-selectors */ + /* stylelint-disable-next-line selector-max-compound-selectors */ li::marker { color: $bullet-list-color; } diff --git a/components/04-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss b/components/04-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss index 274134561..d64ed6d40 100644 --- a/components/04-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss +++ b/components/04-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss @@ -19,7 +19,7 @@ flex-grow: 1; margin-left: 10px; background-color: $footnote-section-headline-color; - content: "\a0"; + content: '\a0'; } } diff --git a/components/04-molecules/article&blog-post-elements/info-note/info-note.scss b/components/04-molecules/article&blog-post-elements/info-note/info-note.scss index 565f151da..cb80bfaad 100644 --- a/components/04-molecules/article&blog-post-elements/info-note/info-note.scss +++ b/components/04-molecules/article&blog-post-elements/info-note/info-note.scss @@ -21,7 +21,7 @@ &__text * { @extend %heading-font-regular; - color: $info-note-text-color;; + color: $info-note-text-color; font-size: $font-size-xs; text-align: left; } diff --git a/components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss b/components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss index 917a17af4..1efb73981 100644 --- a/components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss +++ b/components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss @@ -19,21 +19,21 @@ long-quote > blockquote, &:lang(de) { &::before { - content: "„"; + content: '„'; } &::after { - content: "“"; + content: '“'; } } &:lang(en) { &::before { - content: "“"; + content: '“'; } &::after { - content: "”"; + content: '”'; } } } diff --git a/components/04-molecules/article&blog-post-elements/share-section/_share-section.scss b/components/04-molecules/article&blog-post-elements/share-section/_share-section.scss index d82ea058b..ba11a1c84 100644 --- a/components/04-molecules/article&blog-post-elements/share-section/_share-section.scss +++ b/components/04-molecules/article&blog-post-elements/share-section/_share-section.scss @@ -28,7 +28,7 @@ @extend %list-unstyled; display: flex; - flex-wrap:nowrap; + flex-wrap: nowrap; justify-content: center; } diff --git a/components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss b/components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss index 565c460b0..1cfd96a3d 100644 --- a/components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss +++ b/components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss @@ -26,7 +26,7 @@ &::before { padding-right: 0.5rem; - content: asset-url("icons/arrow-short-down.svg"); + content: asset-url('icons/arrow-short-down.svg'); } } @@ -53,7 +53,7 @@ .toc--sticky { position: sticky; - top:$spacer-xs; + top: $spacer-xs; align-self: start; } } diff --git a/components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.js b/components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.js index 2955def27..133b49e9c 100644 --- a/components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.js +++ b/components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.js @@ -42,14 +42,14 @@ export default class WallOfConsent extends HTMLElement { this.prepend(this.content) this.toggleInitialElements(true) this.checkbox.checked = true - this.classList.add("revealed") + this.classList.add('revealed') } removeContent() { this.content.innerHTML = '' this.toggleInitialElements(false) this.checkbox.checked = false - this.classList.remove("revealed") + this.classList.remove('revealed') } toggleInitialElements(hidden) { diff --git a/components/04-molecules/contact-person/_contact-person.scss b/components/04-molecules/contact-person/_contact-person.scss index e6d8879f1..6d6d57985 100644 --- a/components/04-molecules/contact-person/_contact-person.scss +++ b/components/04-molecules/contact-person/_contact-person.scss @@ -23,7 +23,6 @@ width: 100%; grid-gap: $spacer-base; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); - } .contact-person__subheading { diff --git a/components/04-molecules/search/search-result/_search-result.scss b/components/04-molecules/search/search-result/_search-result.scss index 08887b278..6a676c1b8 100644 --- a/components/04-molecules/search/search-result/_search-result.scss +++ b/components/04-molecules/search/search-result/_search-result.scss @@ -17,7 +17,7 @@ .search-result__type + .search-result__date { &::before { - content: " | "; + content: ' | '; } } diff --git a/components/04-molecules/textbox-sequence/_textbox-sequence.scss b/components/04-molecules/textbox-sequence/_textbox-sequence.scss index da89d30ea..aaa60e3d6 100644 --- a/components/04-molecules/textbox-sequence/_textbox-sequence.scss +++ b/components/04-molecules/textbox-sequence/_textbox-sequence.scss @@ -46,8 +46,8 @@ display: grid; padding: 0; grid-gap: 2rem; - grid-template-columns: repeat( 6, 1fr); - grid-template-rows: repeat( auto, 10rem); + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(auto, 10rem); } .textbox-sequence__text { diff --git a/components/04-molecules/visual-elements/event-date-section/_event-date-section.scss b/components/04-molecules/visual-elements/event-date-section/_event-date-section.scss index 491e4b335..3c5cfeb22 100644 --- a/components/04-molecules/visual-elements/event-date-section/_event-date-section.scss +++ b/components/04-molecules/visual-elements/event-date-section/_event-date-section.scss @@ -5,7 +5,7 @@ justify-content: space-around; background-color: $date-section-background-color; - .label { + .label { border-left: 0; margin: 0; text-align: center; diff --git a/components/04-molecules/visual-elements/paginator/_paginator.scss b/components/04-molecules/visual-elements/paginator/_paginator.scss index 21ec0653b..c8c2f382b 100644 --- a/components/04-molecules/visual-elements/paginator/_paginator.scss +++ b/components/04-molecules/visual-elements/paginator/_paginator.scss @@ -31,7 +31,7 @@ width: 100%; height: 3px; background-color: $paginator-active-color; - content: ""; + content: ''; } } diff --git a/components/04-molecules/visual-elements/slider/_slider.scss b/components/04-molecules/visual-elements/slider/_slider.scss index 9558a4dbf..e08c389eb 100644 --- a/components/04-molecules/visual-elements/slider/_slider.scss +++ b/components/04-molecules/visual-elements/slider/_slider.scss @@ -64,12 +64,12 @@ touch-detection { text-align: center; } -.slider:focus:not(:hover)+.slider__instructions .instructions--focus, -.slider:hover:not(:focus)+.slider__instructions .instructions--hover { +.slider:focus:not(:hover) + .slider__instructions .instructions--focus, +.slider:hover:not(:focus) + .slider__instructions .instructions--hover { display: block; } -.slider:hover:focus+.slider__instructions .instructions--hover-and-focus { +.slider:hover:focus + .slider__instructions .instructions--hover-and-focus { display: block; } diff --git a/components/04-molecules/visual-elements/slider/touch-detection.js b/components/04-molecules/visual-elements/slider/touch-detection.js index 388a23cd9..be4b9169d 100644 --- a/components/04-molecules/visual-elements/slider/touch-detection.js +++ b/components/04-molecules/visual-elements/slider/touch-detection.js @@ -1,8 +1,12 @@ export default class TouchDetection extends HTMLElement { - connectedCallback () { - window.addEventListener('touchstart', function touched () { - document.body.classList.add('instructions--touch-active') - window.removeEventListener('touchstart', touched, false) - }, false) + connectedCallback() { + window.addEventListener( + 'touchstart', + function touched() { + document.body.classList.add('instructions--touch-active') + window.removeEventListener('touchstart', touched, false) + }, + false + ) } } diff --git a/components/04-molecules/visual-elements/teaser/list-teaser/event-list-teaser/_event-list-teaser.scss b/components/04-molecules/visual-elements/teaser/list-teaser/event-list-teaser/_event-list-teaser.scss index 5b4562cfc..23f008885 100644 --- a/components/04-molecules/visual-elements/teaser/list-teaser/event-list-teaser/_event-list-teaser.scss +++ b/components/04-molecules/visual-elements/teaser/list-teaser/event-list-teaser/_event-list-teaser.scss @@ -95,7 +95,7 @@ $event-date-section-height: ($font-size-xs) + (2 * $spacer-xxs); .list-teaser-event { flex-direction: row; align-items: stretch; - /* stylelint-disable-next-line declaration-no-important */ + /* stylelint-disable-next-line declaration-no-important */ margin-top: 0 !important; .event-date-section { diff --git a/components/04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss b/components/04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss index 6eff3448f..e8de1de9f 100644 --- a/components/04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss +++ b/components/04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/_topic-list-teaser.scss @@ -3,7 +3,6 @@ $topic-teaser-height: ms(36); .topic-teaser { @extend %block-link; - display: flex; min-height: $topic-teaser-height; flex-direction: column; diff --git a/components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss b/components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss index d03684b42..3fca40dfd 100644 --- a/components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss +++ b/components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss @@ -11,7 +11,7 @@ $list-teaser-training-height: ms(32); &.primary { background-blend-mode: multiply; background-color: $list-teaser-training-bg-color-primary; - background-image: asset-url("bg-images/general/visual-trainings-07.webp"); + background-image: asset-url('bg-images/general/visual-trainings-07.webp'); background-position: top; background-repeat: no-repeat; background-size: cover; @@ -20,7 +20,7 @@ $list-teaser-training-height: ms(32); &.secondary { background-blend-mode: multiply; background-color: $list-teaser-training-bg-color-secondary; - background-image: asset-url("bg-images/general/visual-trainings-07.webp"); + background-image: asset-url('bg-images/general/visual-trainings-07.webp'); background-position: top; background-repeat: no-repeat; background-size: cover; diff --git a/components/04-molecules/visual-elements/visual-divider/image-divider-center/_image-divider-center.scss b/components/04-molecules/visual-elements/visual-divider/image-divider-center/_image-divider-center.scss index ab3cb3079..827ecbe23 100644 --- a/components/04-molecules/visual-elements/visual-divider/image-divider-center/_image-divider-center.scss +++ b/components/04-molecules/visual-elements/visual-divider/image-divider-center/_image-divider-center.scss @@ -5,7 +5,7 @@ $divider-center-textbox-offset: $spacer-xxl * 2; min-height: 50vh; padding-top: $spacer-lg; - /* stylelint-disable-next-line declaration-no-important */ + /* stylelint-disable-next-line declaration-no-important */ margin-bottom: $divider-center-textbox-offset !important; //FIXME &__title { @extend %punch-in; diff --git a/components/04-molecules/visual-elements/visual-divider/triplet-divider/_triplet-divider.scss b/components/04-molecules/visual-elements/visual-divider/triplet-divider/_triplet-divider.scss index d3d6bea00..fbd123a79 100644 --- a/components/04-molecules/visual-elements/visual-divider/triplet-divider/_triplet-divider.scss +++ b/components/04-molecules/visual-elements/visual-divider/triplet-divider/_triplet-divider.scss @@ -43,8 +43,9 @@ $triplet-divider-height-md: 4 * $spacer-xxl; @media screen and (min-width: $grid-breakpoint-md) { .triplet-divider { display: grid; - grid-template-areas: "divider-left divider-right" - "divider-center divider-center"; + grid-template-areas: + 'divider-left divider-right' + 'divider-center divider-center'; grid-template-columns: 50% 50%; /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ grid-template-rows: auto; diff --git a/components/04-molecules/visual-elements/visual-divider/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss b/components/04-molecules/visual-elements/visual-divider/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss index ca011e729..1af8513b5 100644 --- a/components/04-molecules/visual-elements/visual-divider/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss +++ b/components/04-molecules/visual-elements/visual-divider/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss @@ -9,9 +9,9 @@ $two-column-image-divider-height-lg: 6 * $spacer-xxl; .two-column-image-divider-asymmetric__left-image, .two-column-image-divider-asymmetric__right-image { - max-height: 100%; - object-fit: cover; - } + max-height: 100%; + object-fit: cover; +} @media screen and (min-width: $grid-breakpoint-xl) { .two-column-image-divider-asymmetric { diff --git a/components/05-atoms/clickable-area/clickable-area.js b/components/05-atoms/clickable-area/clickable-area.js index dc3728d49..10f95242d 100644 --- a/components/05-atoms/clickable-area/clickable-area.js +++ b/components/05-atoms/clickable-area/clickable-area.js @@ -1,6 +1,6 @@ // following advice from https://inclusive-components.design/cards export default class ClickableArea extends HTMLElement { - connectedCallback () { + connectedCallback() { if (this.link) { this.addEventListener('mousedown', this.handleMousedown.bind(this)) this.addEventListener('mouseup', this.handleMouseup.bind(this)) @@ -8,17 +8,17 @@ export default class ClickableArea extends HTMLElement { } } - handleMousedown ({ timeStamp }) { + handleMousedown({ timeStamp }) { this.down = timeStamp } - handleMouseup ({ timeStamp }) { + handleMouseup({ timeStamp }) { if (timeStamp - this.down < 200) { this.link.click() } } - get link () { + get link() { return this.querySelector('a') } } diff --git a/components/05-atoms/list/_checked-list.scss b/components/05-atoms/list/_checked-list.scss index 3ee715adc..276a8753c 100644 --- a/components/05-atoms/list/_checked-list.scss +++ b/components/05-atoms/list/_checked-list.scss @@ -7,7 +7,7 @@ @extend %heading-font-bold; padding-left: $spacer-xxs; - list-style-type: "✓"; + list-style-type: '✓'; &::marker { color: $bullet-list-color; diff --git a/components/05-atoms/list/_ordered-list.scss b/components/05-atoms/list/_ordered-list.scss index ceb8bd152..ee6b91bb7 100644 --- a/components/05-atoms/list/_ordered-list.scss +++ b/components/05-atoms/list/_ordered-list.scss @@ -15,7 +15,7 @@ ol:not([class]) { counter-reset: number; - > * + *{ + > * + * { margin-top: $spacer-xxs; } diff --git a/components/05-atoms/list/_tuple-list.scss b/components/05-atoms/list/_tuple-list.scss index bb7b9ad25..eb2ecc990 100644 --- a/components/05-atoms/list/_tuple-list.scss +++ b/components/05-atoms/list/_tuple-list.scss @@ -28,13 +28,13 @@ $tuple-list-label-width: 8rem; @media screen and (min-width: $grid-breakpoint-md) { .tuple-list { > * + * { - margin-top: $spacer-xxs + margin-top: $spacer-xxs; } } .tuple-list__entry { display: grid; - grid-template-areas: "label value"; + grid-template-areas: 'label value'; grid-template-columns: $tuple-list-label-width auto; /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ grid-template-rows: auto; diff --git a/components/05-atoms/list/_unordered-list.scss b/components/05-atoms/list/_unordered-list.scss index aa8ad3531..f0dcae5ef 100644 --- a/components/05-atoms/list/_unordered-list.scss +++ b/components/05-atoms/list/_unordered-list.scss @@ -14,7 +14,7 @@ ul:not([class]), margin-left: $spacer-xs; - > * + *{ + > * + * { margin-top: $spacer-xxs; } @@ -22,7 +22,7 @@ ul:not([class]), @extend %body-font-regular; padding-left: $spacer-xxs; - list-style-type: "●"; + list-style-type: '●'; &::marker { color: $bullet-list-color; @@ -52,7 +52,7 @@ ul:not([class]), > li { @extend %heading-font-bold; - list-style-type: "•"; + list-style-type: '•'; &::marker { color: $bullet-list-color; diff --git a/components/05-atoms/media/embed-responsive/_embed-responsive.scss b/components/05-atoms/media/embed-responsive/_embed-responsive.scss index 5c200e6e6..7302c1894 100644 --- a/components/05-atoms/media/embed-responsive/_embed-responsive.scss +++ b/components/05-atoms/media/embed-responsive/_embed-responsive.scss @@ -29,13 +29,13 @@ .embed-responsive--21by9 { &::before { - padding-top: percentage(calc(9/21)); + padding-top: percentage(calc(9 / 21)); } } .embed-responsive--16by9 { &::before { - padding-top: percentage(calc(9/16)); + padding-top: percentage(calc(9 / 16)); } } diff --git a/components/05-atoms/media/icon/_icon.scss b/components/05-atoms/media/icon/_icon.scss index 0f2b1ba2b..172c53c86 100644 --- a/components/05-atoms/media/icon/_icon.scss +++ b/components/05-atoms/media/icon/_icon.scss @@ -49,198 +49,198 @@ .icon-arrow-long-down { width: 0.75rem; // magic number height: 4.5rem; // magic number - mask-image: asset-url("icons/arrow-long-down.svg"); + mask-image: asset-url('icons/arrow-long-down.svg'); mask-repeat: no-repeat; } .icon-arrow-long-right { width: 4.5rem; // magic number height: 0.75rem; // magic number - mask-image: asset-url("icons/arrow-long-right.svg"); + mask-image: asset-url('icons/arrow-long-right.svg'); } .icon-arrow-medium-left { width: 2rem; // magic number height: 0.75rem; // magic number - mask-image: asset-url("icons/arrow-medium-left.svg"); + mask-image: asset-url('icons/arrow-medium-left.svg'); } .icon-arrow-short-down { - mask-image: asset-url("icons/arrow-short-down.svg"); + mask-image: asset-url('icons/arrow-short-down.svg'); } .icon-arrow-sync { - mask-image: asset-url("icons/arrow-sync.svg"); + mask-image: asset-url('icons/arrow-sync.svg'); } .icon-arrow-drawn-upright { width: 9.375rem; // magic number height: 4rem; // magic number - mask-image: asset-url("icons/arrow-drawn-upright.svg"); + mask-image: asset-url('icons/arrow-drawn-upright.svg'); } .icon-arrow-drawn-downright { width: 12.5rem; // magic number height: 7.125rem; // magic number - mask-image: asset-url("icons/arrow-drawn-downright.svg"); + mask-image: asset-url('icons/arrow-drawn-downright.svg'); } .icon-arrow-drawn-downleft { width: 8.8125rem; // magic number height: 5.25rem; // magic number - mask-image: asset-url("icons/arrow-drawn-downleft.svg"); + mask-image: asset-url('icons/arrow-drawn-downleft.svg'); } .icon-arrow-drawn-downleft-2 { width: 9.375rem; // magic number height: 6.375rem; // magic number - mask-image: asset-url("icons/arrow-drawn-downleft-alternative.svg"); + mask-image: asset-url('icons/arrow-drawn-downleft-alternative.svg'); } .icon-arrow-drawn-downright-2 { width: 7.1875rem; // magic number height: 5.625rem; // magic number - mask-image: asset-url("icons/arrow-drawn-downright-alternative.svg"); + mask-image: asset-url('icons/arrow-drawn-downright-alternative.svg'); } .icon-chevron-down { - mask-image: asset-url("icons/chevron-down.svg"); + mask-image: asset-url('icons/chevron-down.svg'); } .icon-chevron-up { - mask-image: asset-url("icons/chevron-up.svg"); + mask-image: asset-url('icons/chevron-up.svg'); } .icon-chevron-down-filled { - mask-image: asset-url("icons/chevron-down-filled.svg"); + mask-image: asset-url('icons/chevron-down-filled.svg'); } // Interface Icons .icon-bookshelf { - mask-image: asset-url("icons/bookshelf.svg"); + mask-image: asset-url('icons/bookshelf.svg'); } .icon-certificate { - mask-image: asset-url("icons/certificate.svg"); + mask-image: asset-url('icons/certificate.svg'); } .icon-close { - mask-image: asset-url("icons/close.svg"); + mask-image: asset-url('icons/close.svg'); } .icon-email { - mask-image: asset-url("icons/email.svg"); + mask-image: asset-url('icons/email.svg'); } .icon-feedback { - mask-image: asset-url("icons/feedback.svg"); + mask-image: asset-url('icons/feedback.svg'); } .icon-flame { - mask-image: asset-url("icons/flame.svg"); + mask-image: asset-url('icons/flame.svg'); } .icon-globe { - mask-image: asset-url("icons/globe.svg"); + mask-image: asset-url('icons/globe.svg'); } .icon-group-idea { - mask-image: asset-url("icons/group-idea.svg"); + mask-image: asset-url('icons/group-idea.svg'); } .icon-info { - mask-image: asset-url("icons/info-bubble.svg"); + mask-image: asset-url('icons/info-bubble.svg'); } .icon-interactive { - mask-image: asset-url("icons/interactive.svg"); + mask-image: asset-url('icons/interactive.svg'); } .icon-learning { - mask-image: asset-url("icons/learning.svg"); + mask-image: asset-url('icons/learning.svg'); } .icon-location { - mask-image: asset-url("icons/pin.svg"); + mask-image: asset-url('icons/pin.svg'); } .icon-rooms { - mask-image: asset-url("icons/rooms.svg"); + mask-image: asset-url('icons/rooms.svg'); } .icon-search { - mask-image: asset-url("icons/search.svg"); + mask-image: asset-url('icons/search.svg'); } .icon-support { - mask-image: asset-url("icons/support.svg"); + mask-image: asset-url('icons/support.svg'); } .icon-trainer { - mask-image: asset-url("icons/trainer.svg"); + mask-image: asset-url('icons/trainer.svg'); } .icon-virtual { - mask-image: asset-url("icons/virtual.svg"); + mask-image: asset-url('icons/virtual.svg'); } .icon-minus { width: 1rem; // magic number height: 0.5rem; // magic number - mask-image: asset-url("icons/minus.svg"); + mask-image: asset-url('icons/minus.svg'); } .icon-plus { width: 1rem; // magic number height: 1rem; // magic number - mask-image: asset-url("icons/plus.svg"); + mask-image: asset-url('icons/plus.svg'); } .icon-text { - mask-image: asset-url("icons/text.svg"); + mask-image: asset-url('icons/text.svg'); } // Logos .icon-apple-itunes { - mask-image: asset-url("icons/apple-itunes.svg"); + mask-image: asset-url('icons/apple-itunes.svg'); } .icon-facebook { - mask-image: asset-url("icons/facebook.svg"); + mask-image: asset-url('icons/facebook.svg'); } .icon-leanpub { - mask-image: asset-url("icons/leanpub.svg"); + mask-image: asset-url('icons/leanpub.svg'); } .icon-github { - mask-image: asset-url("icons/github.svg"); + mask-image: asset-url('icons/github.svg'); } .icon-linkedin { - mask-image: asset-url("icons/linkedin.svg"); + mask-image: asset-url('icons/linkedin.svg'); } .icon-rss { - mask-image: asset-url("icons/rss-boxed.svg"); + mask-image: asset-url('icons/rss-boxed.svg'); } .icon-rss-1 { - mask-image: asset-url("icons/rss.svg"); + mask-image: asset-url('icons/rss.svg'); } .icon-spotify { - mask-image: asset-url("icons/spotify.svg"); + mask-image: asset-url('icons/spotify.svg'); } .icon-twitter { - mask-image: asset-url("icons/twitter.svg"); + mask-image: asset-url('icons/twitter.svg'); } .icon-xing { - mask-image: asset-url("icons/xing.svg"); + mask-image: asset-url('icons/xing.svg'); } .icon-youtube { - mask-image: asset-url("icons/youtube.svg"); + mask-image: asset-url('icons/youtube.svg'); } diff --git a/components/05-atoms/text/link/_link.scss b/components/05-atoms/text/link/_link.scss index 118d46193..fcc0fbe3e 100644 --- a/components/05-atoms/text/link/_link.scss +++ b/components/05-atoms/text/link/_link.scss @@ -14,7 +14,7 @@ a:not([class]) { outline: none; } - &[href="mailto"] { + &[href='mailto'] { hyphens: none; } } diff --git a/components/05-atoms/text/quote/_block-quote.scss b/components/05-atoms/text/quote/_block-quote.scss index 9641ecdb0..0387f0928 100644 --- a/components/05-atoms/text/quote/_block-quote.scss +++ b/components/05-atoms/text/quote/_block-quote.scss @@ -27,7 +27,7 @@ blockquote:not([class]), display: block; width: 10px; background-color: $quote-color; - content: ""; + content: ''; } } } diff --git a/components/05-atoms/togglers/check-to-toggle/check-to-toggle.js b/components/05-atoms/togglers/check-to-toggle/check-to-toggle.js index b76509a08..0e3282dc7 100644 --- a/components/05-atoms/togglers/check-to-toggle/check-to-toggle.js +++ b/components/05-atoms/togglers/check-to-toggle/check-to-toggle.js @@ -1,18 +1,18 @@ export default class CheckToToggle extends HTMLElement { - connectedCallback () { + connectedCallback() { this.checkbox.onclick = this.toggle.bind(this) } - get checkbox () { + get checkbox() { return this.querySelector('input[type="checkbox"]') } - get target () { + get target() { const selector = this.getAttribute('target') return document.querySelector(selector) } - toggle () { + toggle() { this.target.classList.toggle('is-hidden') } } diff --git a/components/05-atoms/togglers/modi-toggler/modi-toggler.js b/components/05-atoms/togglers/modi-toggler/modi-toggler.js index 1403fceeb..ee62d85da 100644 --- a/components/05-atoms/togglers/modi-toggler/modi-toggler.js +++ b/components/05-atoms/togglers/modi-toggler/modi-toggler.js @@ -3,19 +3,19 @@ * - separate selectable elements and classNames */ export default class ModiToggler extends HTMLElement { - connectedCallback () { + connectedCallback() { this.toggleModifier = this.getAttribute('data-toggle-modifier') this.toggleTargets = this.makeToggleTargets(this.getAttribute('data-target'), this.toggleModifier) this.onclick = this.toggle.bind(this) this.classList.add('enhanced') } - toggle () { - this.targets.forEach(target => target.element.classList.toggle(target.toggleClass)) + toggle() { + this.targets.forEach((target) => target.element.classList.toggle(target.toggleClass)) this.toggleSelf() } - toggleSelf () { + toggleSelf() { if (this.getAttribute('toggled') !== null) { this.removeAttribute('toggled') } else { @@ -23,14 +23,16 @@ export default class ModiToggler extends HTMLElement { } } - makeToggleTargets (targetString, toggleModifier) { - return targetString.split(',') - .map(s => s.trim()) + makeToggleTargets(targetString, toggleModifier) { + return targetString + .split(',') + .map((s) => s.trim()) .reduce((acc, selector) => { - if (/-?[_a-zA-Z]+[_a-zA-Z0-9-]*/.test(selector)) { // test if valid single class + if (/-?[_a-zA-Z]+[_a-zA-Z0-9-]*/.test(selector)) { + // test if valid single class acc.push({ element: document.querySelector(selector), - toggleClass: selector + '--' + toggleModifier + toggleClass: selector + '--' + toggleModifier, }) } return acc diff --git a/components/05-atoms/togglers/multi-toggler/multi-toggler.js b/components/05-atoms/togglers/multi-toggler/multi-toggler.js index 2d4404db7..3d90296a2 100644 --- a/components/05-atoms/togglers/multi-toggler/multi-toggler.js +++ b/components/05-atoms/togglers/multi-toggler/multi-toggler.js @@ -1,5 +1,5 @@ export default class MultiToggler extends HTMLElement { - connectedCallback () { + connectedCallback() { const targetSelector = this.getAttribute('data-target') const hasNextElementSiblingTarget = this.hasAttribute('data-target-next') this.toggleClass = this.getAttribute('data-toggle-class') @@ -27,20 +27,18 @@ export default class MultiToggler extends HTMLElement { this.onclick = this.toggle.bind(this) } - toggle () { + toggle() { this.toggleTargets(this.toggleClass) } - toggleTargets (className) { + toggleTargets(className) { if (this.targetElements[0]) { - this.targetElements.forEach( - target => target.classList.toggle(className) - ) + this.targetElements.forEach((target) => target.classList.toggle(className)) this.toggleSelf() } } - toggleSelf () { + toggleSelf() { if (this.toggleSelfClass) { this.classList.toggle(this.toggleSelfClass) } diff --git a/components/05-atoms/visual-elements/zigzag/_zigzag.scss b/components/05-atoms/visual-elements/zigzag/_zigzag.scss index 0cde91bfd..9ec8866ef 100644 --- a/components/05-atoms/visual-elements/zigzag/_zigzag.scss +++ b/components/05-atoms/visual-elements/zigzag/_zigzag.scss @@ -17,7 +17,7 @@ $zzdegree: 135deg; right: 0; left: 0; display: block; - content: ""; + content: ''; } &::before { @@ -43,5 +43,5 @@ $zzdegree: 135deg; .zigzag, %zigzag { - @include zigzag($zzbgc) + @include zigzag($zzbgc); } diff --git a/components/06-subatoms/bg-images/_bg-images.scss b/components/06-subatoms/bg-images/_bg-images.scss index f23e25a95..553133354 100644 --- a/components/06-subatoms/bg-images/_bg-images.scss +++ b/components/06-subatoms/bg-images/_bg-images.scss @@ -3,7 +3,7 @@ %bg-image-art-01 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-art-01.webp"); + background-image: asset-url('bg-images/general/visual-art-01.webp'); } //Culture @@ -11,104 +11,104 @@ %bg-image-culture-01 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-01.webp"); + background-image: asset-url('bg-images/general/visual-culture-01.webp'); } .bg-image-culture-02, %bg-image-culture-02 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-02.webp"); + background-image: asset-url('bg-images/general/visual-culture-02.webp'); } .bg-image-culture-03, %bg-image-culture-03 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-03.webp"); + background-image: asset-url('bg-images/general/visual-culture-03.webp'); } .bg-image-culture-04, %bg-image-culture-04 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-04.webp"); + background-image: asset-url('bg-images/general/visual-culture-04.webp'); } .bg-image-culture-05, %bg-image-culture-05 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-05.webp"); + background-image: asset-url('bg-images/general/visual-culture-05.webp'); } .bg-image-culture-06, %bg-image-culture-06 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-06.webp"); + background-image: asset-url('bg-images/general/visual-culture-06.webp'); } .bg-image-culture-07, %bg-image-culture-07 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-07.webp"); + background-image: asset-url('bg-images/general/visual-culture-07.webp'); } .bg-image-culture-08, %bg-image-culture-08 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-08.webp"); + background-image: asset-url('bg-images/general/visual-culture-08.webp'); } .bg-image-culture-09, %bg-image-culture-09 { background-blend-mode: multiply; background-color: $brand-petrol-50; - background-image: asset-url("bg-images/general/visual-culture-09.webp"); + background-image: asset-url('bg-images/general/visual-culture-09.webp'); } .bg-image-culture-10, %bg-image-culture-10 { background-blend-mode: multiply; background-color: $brand-petrol-50; - background-image: asset-url("bg-images/general/visual-culture-10.webp"); + background-image: asset-url('bg-images/general/visual-culture-10.webp'); } .bg-image-culture-11, %bg-image-culture-11 { background-blend-mode: multiply; background-color: $brand-petrol-50; - background-image: asset-url("bg-images/general/visual-culture-11.webp"); + background-image: asset-url('bg-images/general/visual-culture-11.webp'); } .bg-image-culture-12, %bg-image-culture-12 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-culture-12.webp"); + background-image: asset-url('bg-images/general/visual-culture-12.webp'); } .bg-image-culture-13, %bg-image-culture-13 { background-blend-mode: multiply; background-color: $brand-petrol-50; - background-image: asset-url("bg-images/general/visual-culture-13.webp"); + background-image: asset-url('bg-images/general/visual-culture-13.webp'); } .bg-image-culture-14, %bg-image-culture-14 { background-blend-mode: multiply; background-color: $brand-petrol-50; - background-image: asset-url("bg-images/general/visual-culture-14.webp"); + background-image: asset-url('bg-images/general/visual-culture-14.webp'); } .bg-image-culture-15, %bg-image-culture-15 { background-blend-mode: multiply; - background-image: asset-url("bg-images/general/visual-culture-15.webp"); + background-image: asset-url('bg-images/general/visual-culture-15.webp'); } // Staff @@ -116,7 +116,7 @@ %bg-image-staff-01 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-staff-01.webp"); + background-image: asset-url('bg-images/general/visual-staff-01.webp'); } //Podcast @@ -124,7 +124,7 @@ %bg-image-podcast-01 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-podcast.webp"); + background-image: asset-url('bg-images/general/visual-podcast.webp'); } //Trainings @@ -132,75 +132,75 @@ %bg-image-trainings-01 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-01.webp"); + background-image: asset-url('bg-images/general/visual-trainings-01.webp'); } .bg-image-trainings-02, %bg-image-trainings-02 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-02.webp"); + background-image: asset-url('bg-images/general/visual-trainings-02.webp'); } .bg-image-trainings-03, %bg-image-trainings-03 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-03.webp"); + background-image: asset-url('bg-images/general/visual-trainings-03.webp'); } .bg-image-trainings-04, %bg-image-trainings-04 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-04.webp"); + background-image: asset-url('bg-images/general/visual-trainings-04.webp'); } .bg-image-trainings-05, %bg-image-trainings-05 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-05.webp"); + background-image: asset-url('bg-images/general/visual-trainings-05.webp'); } .bg-image-trainings-06, %bg-image-trainings-06 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-06.webp"); + background-image: asset-url('bg-images/general/visual-trainings-06.webp'); } .bg-image-trainings-07, %bg-image-trainings-07 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-07.webp"); + background-image: asset-url('bg-images/general/visual-trainings-07.webp'); } .bg-image-trainings-08, %bg-image-trainings-08 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-08.webp"); + background-image: asset-url('bg-images/general/visual-trainings-08.webp'); } .bg-image-trainings-09, %bg-image-trainings-09 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-09.webp"); + background-image: asset-url('bg-images/general/visual-trainings-09.webp'); } .bg-image-trainings-10, %bg-image-trainings-10 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-trainings-10.webp"); + background-image: asset-url('bg-images/general/visual-trainings-10.webp'); } .bg-image-trainings-11, %bg-image-trainings-11 { - background-image: asset-url("bg-images/general/visual-trainings-11.webp"); + background-image: asset-url('bg-images/general/visual-trainings-11.webp'); } // Workshops @@ -208,119 +208,119 @@ %bg-image-workshop-02 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-01.webp"); + background-image: asset-url('bg-images/general/visual-workshop-01.webp'); } .bg-image-workshop-02, %bg-image-workshop-02 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-02.webp"); + background-image: asset-url('bg-images/general/visual-workshop-02.webp'); } .bg-image-workshop-03, %bg-image-workshop-03 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-03.webp"); + background-image: asset-url('bg-images/general/visual-workshop-03.webp'); } .bg-image-workshop-04, %bg-image-workshop-04 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-04.webp"); + background-image: asset-url('bg-images/general/visual-workshop-04.webp'); } .bg-image-workshop-05, %bg-image-workshop-05 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-05.webp"); + background-image: asset-url('bg-images/general/visual-workshop-05.webp'); } .bg-image-workshop-06, %bg-image-workshop-06 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-06.webp"); + background-image: asset-url('bg-images/general/visual-workshop-06.webp'); } .bg-image-workshop-07, %bg-image-workshop-07 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-07.webp"); + background-image: asset-url('bg-images/general/visual-workshop-07.webp'); } .bg-image-workshop-08, %bg-image-workshop-08 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-08.webp"); + background-image: asset-url('bg-images/general/visual-workshop-08.webp'); } .bg-image-workshop-09, %bg-image-workshop-09 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-09.webp"); + background-image: asset-url('bg-images/general/visual-workshop-09.webp'); } .bg-image-workshop-10, %bg-image-workshop-10 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-10.webp"); + background-image: asset-url('bg-images/general/visual-workshop-10.webp'); } .bg-image-workshop-11, %bg-image-workshop-11 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-11.webp"); + background-image: asset-url('bg-images/general/visual-workshop-11.webp'); } .bg-image-workshop-12, %bg-image-workshop-12 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-12.webp"); + background-image: asset-url('bg-images/general/visual-workshop-12.webp'); } .bg-image-workshop-13, %bg-image-workshop-13 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-13.webp"); + background-image: asset-url('bg-images/general/visual-workshop-13.webp'); } .bg-image-workshop-14, %bg-image-workshop-14 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-14.webp"); + background-image: asset-url('bg-images/general/visual-workshop-14.webp'); } .bg-image-workshop-15, %bg-image-workshop-15 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-15.webp"); + background-image: asset-url('bg-images/general/visual-workshop-15.webp'); } .bg-image-workshop-16, %bg-image-workshop-16 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-16.webp"); + background-image: asset-url('bg-images/general/visual-workshop-16.webp'); } .bg-image-workshop-17, %bg-image-workshop-17 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/general/visual-workshop-17.webp"); + background-image: asset-url('bg-images/general/visual-workshop-17.webp'); } // Edition Images Just change the image URLs for upcoming editions @@ -328,161 +328,161 @@ %bg-image-edition-01 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-canyon-01.webp"); + background-image: asset-url('bg-images/edition-02/edition02-canyon-01.webp'); } .bg-image-edition-02, %bg-image-edition-02 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-canyon-02.webp"); + background-image: asset-url('bg-images/edition-02/edition02-canyon-02.webp'); } .bg-image-edition-03, %bg-image-edition-03 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-canyon-03.webp"); + background-image: asset-url('bg-images/edition-02/edition02-canyon-03.webp'); } .bg-image-edition-04, %bg-image-edition-04 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-canyon-04.webp"); + background-image: asset-url('bg-images/edition-02/edition02-canyon-04.webp'); } .bg-image-edition-05, %bg-image-edition-05 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-canyon-05.webp"); + background-image: asset-url('bg-images/edition-02/edition02-canyon-05.webp'); } .bg-image-edition-06, %bg-image-edition-06 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-cloth-01.webp"); + background-image: asset-url('bg-images/edition-02/edition02-cloth-01.webp'); } .bg-image-edition-07, %bg-image-edition-07 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-cloth-02.webp"); + background-image: asset-url('bg-images/edition-02/edition02-cloth-02.webp'); } .bg-image-edition-08, %bg-image-edition-08 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-cloth-03.webp"); + background-image: asset-url('bg-images/edition-02/edition02-cloth-03.webp'); } .bg-image-edition-09, %bg-image-edition-09 { background-blend-mode: multiply; background-color: $brand-gray-25; - background-image: asset-url("bg-images/edition-02/edition02-cloth-04.webp"); + background-image: asset-url('bg-images/edition-02/edition02-cloth-04.webp'); } .bg-image-edition-10, %bg-image-edition-10 { background-blend-mode: multiply; background-color: $brand-gray-75; - background-image: asset-url("bg-images/edition-02/edition02-data-01.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-01.webp'); } .bg-image-edition-11, %bg-image-edition-11 { background-blend-mode: multiply; background-color: $brand-gray-75; - background-image: asset-url("bg-images/edition-02/edition02-data-02.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-02.webp'); } .bg-image-edition-12, %bg-image-edition-12 { background-blend-mode: multiply; background-color: $brand-gray-75; - background-image: asset-url("bg-images/edition-02/edition02-data-03.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-03.webp'); } .bg-image-edition-13, %bg-image-edition-13 { background-blend-mode: multiply; background-color: $brand-gray-75; - background-image: asset-url("bg-images/edition-02/edition02-data-04.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-04.webp'); } .bg-image-edition-14, %bg-image-edition-14 { background-blend-mode: multiply; background-color: $brand-gray-75; - background-image: asset-url("bg-images/edition-02/edition02-data-05.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-05.webp'); } .bg-image-edition-15, %bg-image-edition-15 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-data-06.webp"); + background-image: asset-url('bg-images/edition-02/edition02-data-06.webp'); } .bg-image-edition-16, %bg-image-edition-16 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-01.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-01.webp'); } .bg-image-edition-17, %bg-image-edition-17 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-02.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-02.webp'); } .bg-image-edition-18, %bg-image-edition-18 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-03.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-03.webp'); } .bg-image-edition-19, %bg-image-edition-19 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-04.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-04.webp'); } .bg-image-edition-20, %bg-image-edition-20 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-05.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-05.webp'); } .bg-image-edition-21, %bg-image-edition-21 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-06.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-06.webp'); } .bg-image-edition-22, %bg-image-edition-22 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-07.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-07.webp'); } .bg-image-edition-23, %bg-image-edition-23 { background-blend-mode: multiply; background-color: $brand-gray-50; - background-image: asset-url("bg-images/edition-02/edition02-human-08.webp"); + background-image: asset-url('bg-images/edition-02/edition02-human-08.webp'); } // Demo Classes for bg images diff --git a/components/06-subatoms/box-shadow/_box-shadow.scss b/components/06-subatoms/box-shadow/_box-shadow.scss index dc082256d..7147bc733 100644 --- a/components/06-subatoms/box-shadow/_box-shadow.scss +++ b/components/06-subatoms/box-shadow/_box-shadow.scss @@ -1,4 +1,4 @@ .box-shadow-primary-25-right-bottom, %box-shadow-primary-25-right-bottom { box-shadow: 10px 10px 0 $box-shadow-primary-25; -} \ No newline at end of file +} diff --git a/components/06-subatoms/gradients/_gradients.scss b/components/06-subatoms/gradients/_gradients.scss index 35d548650..2bdea406c 100644 --- a/components/06-subatoms/gradients/_gradients.scss +++ b/components/06-subatoms/gradients/_gradients.scss @@ -1,2 +1,2 @@ -$gradient: linear-gradient(360deg, rgba(255,230,217,1) 23%, rgba(255,156,102,1) 60%); +$gradient: linear-gradient(360deg, rgba(255, 230, 217, 1) 23%, rgba(255, 156, 102, 1) 60%); $gradient-2: linear-gradient(180deg, $brand-primary-25 0%, $brand-gray-10 100%); diff --git a/faucet.config.js b/faucet.config.js index ebb917dd3..0ca223240 100644 --- a/faucet.config.js +++ b/faucet.config.js @@ -3,36 +3,36 @@ const config = { manifest: { key: 'short', webRoot: './public', - target: './public/assets/manifest.json' + target: './public/assets/manifest.json', }, watchDirs: ['./lib', './components'], static: [ { source: './lib/images', - target: './public/assets' - } + target: './public/assets', + }, ], sass: [ { source: './lib/styles/index.scss', - target: './public/assets/bundle.css' + target: './public/assets/bundle.css', }, { source: './lib/styles/styleguide-theme.scss', - target: './public/assets/styleguide-theme.css' + target: './public/assets/styleguide-theme.css', }, { source: './node_modules/normalize.css/normalize.css', - target: './public/assets/normalize.css' - } + target: './public/assets/normalize.css', + }, ], js: [ { source: './lib/scripts/index.js', - target: './public/assets/bundle.js' - } - ] + target: './public/assets/bundle.js', + }, + ], } module.exports = config diff --git a/fractal.config.js b/fractal.config.js index d0c90dd3b..f6ff70f4e 100644 --- a/fractal.config.js +++ b/fractal.config.js @@ -2,22 +2,18 @@ 'use strict' /* -* Require the path module -*/ + * Require the path module + */ const path = require('path') /* * Require Fractal modules */ -const fractal = module.exports = require('fractal-fork').fractal.create() +const fractal = (module.exports = require('fractal-fork').fractal.create()) const fractalTheme = require('fractal-fork').mandelbrot({ skin: 'black', - styles: [ - 'default', - '/assets/styleguide-theme.css' - ], - favicon: '/assets/favicons/edition-02/favicon-apricot/favicon.svg' - + styles: ['default', '/assets/styleguide-theme.css'], + favicon: '/assets/favicons/edition-02/favicon-apricot/favicon.svg', }) fractalTheme.addLoadPath(path.join(__dirname, '/theme-overrides')) diff --git a/lib/styles/01-base/_breakpoints.scss b/lib/styles/01-base/_breakpoints.scss index 9109ee023..f1eb7d789 100644 --- a/lib/styles/01-base/_breakpoints.scss +++ b/lib/styles/01-base/_breakpoints.scss @@ -3,7 +3,7 @@ // Defining the minimum dimensions at which the layout will change, // adapting to different screen sizes, for use in media queries. - /* stylelint-disable declaration-no-important */ +/* stylelint-disable declaration-no-important */ $grid-breakpoint-xs: 0; $grid-breakpoint-xs-sm: 25rem; // 400px $grid-breakpoint-sm: 36rem; // 576px diff --git a/lib/styles/01-base/_fontfaces.scss b/lib/styles/01-base/_fontfaces.scss index 7fc49e11d..766be3326 100644 --- a/lib/styles/01-base/_fontfaces.scss +++ b/lib/styles/01-base/_fontfaces.scss @@ -1,12 +1,12 @@ -$cdn: "https://www.innoq.com/assets"; -$cachebuster: "2"; // Please increment if you changed one (or more) of the font files +$cdn: 'https://www.innoq.com/assets'; +$cachebuster: '2'; // Please increment if you changed one (or more) of the font files @font-face { font-display: swap; font-family: FreightTextPro; font-style: normal; font-weight: bold; - src: url("#{$cdn}/350ED6_0_unhinted_0.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/350ED6_0_unhinted_0.woff2?cachebuster=#{$cachebuster}') format('woff2'); } @font-face { @@ -14,7 +14,7 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font font-family: FreightTextPro; font-style: italic; font-weight: normal; - src: url("#{$cdn}/350ED6_1_unhinted_0.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/350ED6_1_unhinted_0.woff2?cachebuster=#{$cachebuster}') format('woff2'); } @font-face { @@ -22,7 +22,7 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font font-family: FreightTextPro; font-style: normal; font-weight: normal; - src: url("#{$cdn}/350ED6_2_unhinted_0.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/350ED6_2_unhinted_0.woff2?cachebuster=#{$cachebuster}') format('woff2'); } @font-face { @@ -30,7 +30,7 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font font-family: FreightTextPro; font-style: italic; font-weight: bold; - src: url("#{$cdn}/350ED6_3_unhinted_0.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/350ED6_3_unhinted_0.woff2?cachebuster=#{$cachebuster}') format('woff2'); } @font-face { @@ -38,7 +38,7 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font font-family: FFMarkWebPro; font-style: normal; font-weight: normal; - src: url("#{$cdn}/MarkPro-Book.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/MarkPro-Book.woff2?cachebuster=#{$cachebuster}') format('woff2'); } @font-face { @@ -46,7 +46,7 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font font-family: FFMarkWebPro; font-style: normal; font-weight: bold; - src: url("#{$cdn}/MarkPro-Bold.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/MarkPro-Bold.woff2?cachebuster=#{$cachebuster}') format('woff2'); } @font-face { @@ -54,7 +54,7 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font font-family: FFMarkWebPro; font-style: normal; font-weight: 800; - src: url("#{$cdn}/MarkPro-Heavy.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/MarkPro-Heavy.woff2?cachebuster=#{$cachebuster}') format('woff2'); } // Hack @@ -62,5 +62,5 @@ $cachebuster: "2"; // Please increment if you changed one (or more) of the font @font-face { font-display: swap; font-family: HackRegular; - src: url("#{$cdn}/hack-regular.woff2?cachebuster=#{$cachebuster}") format("woff2"); + src: url('#{$cdn}/hack-regular.woff2?cachebuster=#{$cachebuster}') format('woff2'); } diff --git a/lib/styles/01-base/_typography.scss b/lib/styles/01-base/_typography.scss index 5ec03ae30..f00f1d6f2 100644 --- a/lib/styles/01-base/_typography.scss +++ b/lib/styles/01-base/_typography.scss @@ -1,12 +1,12 @@ -@import "modularscale-sass/stylesheets/modularscale"; +@import 'modularscale-sass/stylesheets/modularscale'; // // Font stacks // -$font-family-serif: "FreightTextPro", "Georgia", "Times", "Times New Roman", serif; -$font-family-sans-serif: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -$font-family-icons: "FFMarkWebPro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -$font-family-monospace: "HackRegular", "Monaco", "Courier New", monospace; +$font-family-serif: 'FreightTextPro', 'Georgia', 'Times', 'Times New Roman', serif; +$font-family-sans-serif: 'FFMarkWebPro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; +$font-family-icons: 'FFMarkWebPro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; +$font-family-monospace: 'HackRegular', 'Monaco', 'Courier New', monospace; // // Base values @@ -26,7 +26,7 @@ $modularscale: ( ); // The length unit in which to output vertical rhythm values. -$base-unit: "rem"; +$base-unit: 'rem'; // The default font family. $base-font-family: $font-family-serif; diff --git a/lib/styles/02-util/_forms.scss b/lib/styles/02-util/_forms.scss index 93737a4ca..cd9a88ec0 100644 --- a/lib/styles/02-util/_forms.scss +++ b/lib/styles/02-util/_forms.scss @@ -2,16 +2,16 @@ @function checkbox-icon($color) { @return str-replace( url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), - "#", - "%23" + '#', + '%23' ); } @function radio-icon($color) { @return str-replace( url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$color}'/%3E%3C/svg%3E"), - "#", - "%23" + '#', + '%23' ); } @@ -24,7 +24,7 @@ display: block; width: $size; height: $size; - content: ""; + content: ''; transition: $fast-transition; } } diff --git a/lib/styles/02-util/_helperclasses.scss b/lib/styles/02-util/_helperclasses.scss index f6994107b..6a8501e84 100644 --- a/lib/styles/02-util/_helperclasses.scss +++ b/lib/styles/02-util/_helperclasses.scss @@ -1,4 +1,4 @@ - /* stylelint-disable declaration-no-important */ +/* stylelint-disable declaration-no-important */ .dark-background { overflow: hidden; diff --git a/lib/styles/02-util/_text.scss b/lib/styles/02-util/_text.scss index d540429c8..cd974c807 100644 --- a/lib/styles/02-util/_text.scss +++ b/lib/styles/02-util/_text.scss @@ -10,7 +10,7 @@ // @param {String} $search - Substring to replace // @param {String} $replace ('') - New value // @return {String} - Updated string -@function str-replace($string, $search, $replace: "") { +@function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @@ -86,7 +86,7 @@ width: 0%; height: 100%; background-color: $fill-color; - content: ""; + content: ''; transition: standard-transition(width); } diff --git a/lib/styles/03-styleguide/_hacks.scss b/lib/styles/03-styleguide/_hacks.scss index 24895ed29..8441ac1de 100644 --- a/lib/styles/03-styleguide/_hacks.scss +++ b/lib/styles/03-styleguide/_hacks.scss @@ -1,4 +1,3 @@ - .demo { > * { margin: $spacer-md; diff --git a/lib/styles/03-styleguide/_styleguide.scss b/lib/styles/03-styleguide/_styleguide.scss index 1b0f6011f..b789e37b4 100644 --- a/lib/styles/03-styleguide/_styleguide.scss +++ b/lib/styles/03-styleguide/_styleguide.scss @@ -46,7 +46,7 @@ > .swatch-text--rgb { &::after { - content: "" + $hex; + content: '' + $hex; } } } diff --git a/lib/styles/index.scss b/lib/styles/index.scss index 6bdc35d41..e10017f1a 100644 --- a/lib/styles/index.scss +++ b/lib/styles/index.scss @@ -1,224 +1,222 @@ -@import "01-base/typography"; -@import "01-base/breakpoints"; -@import "01-base/colors"; -@import "01-base/fontfaces"; -@import "01-base/fonts"; -@import "01-base/spacings"; -@import "01-base/theme-apripetrol"; - -@import "01-base/base"; - -@import "02-util/animations"; -@import "02-util/forms"; -@import "02-util/list"; -@import "02-util/text"; -@import "02-util/teaser"; -@import "02-util/header"; -@import "02-util/helperclasses"; -@import "02-util/visibility"; +@import '01-base/typography'; +@import '01-base/breakpoints'; +@import '01-base/colors'; +@import '01-base/fontfaces'; +@import '01-base/fonts'; +@import '01-base/spacings'; +@import '01-base/theme-apripetrol'; + +@import '01-base/base'; + +@import '02-util/animations'; +@import '02-util/forms'; +@import '02-util/list'; +@import '02-util/text'; +@import '02-util/teaser'; +@import '02-util/header'; +@import '02-util/helperclasses'; +@import '02-util/visibility'; // // SUBATOMS // -@import "../components/06-subatoms/bg-images/bg-images"; -@import "../components/06-subatoms/box-shadow/box-shadow"; -@import "../components/06-subatoms/gradients/gradients"; +@import '../components/06-subatoms/bg-images/bg-images'; +@import '../components/06-subatoms/box-shadow/box-shadow'; +@import '../components/06-subatoms/gradients/gradients'; // // ATOMS // // Form atoms -@import "../components/05-atoms/form-elements/button/button"; -@import "../components/05-atoms/form-elements/alert/alert"; -@import "../components/05-atoms/form-elements/checkbox/checkbox"; -@import "../components/05-atoms/form-elements/form-control/form-control"; -@import "../components/05-atoms/form-elements/form-group/form-group"; -@import "../components/05-atoms/form-elements/form-label/form-label"; -@import "../components/05-atoms/form-elements/form-text/form-text"; -@import "../components/05-atoms/form-elements/fieldset/fieldset"; -@import "../components/05-atoms/form-elements/legend/legend"; -@import "../components/05-atoms/form-elements/radio/radio"; +@import '../components/05-atoms/form-elements/button/button'; +@import '../components/05-atoms/form-elements/alert/alert'; +@import '../components/05-atoms/form-elements/checkbox/checkbox'; +@import '../components/05-atoms/form-elements/form-control/form-control'; +@import '../components/05-atoms/form-elements/form-group/form-group'; +@import '../components/05-atoms/form-elements/form-label/form-label'; +@import '../components/05-atoms/form-elements/form-text/form-text'; +@import '../components/05-atoms/form-elements/fieldset/fieldset'; +@import '../components/05-atoms/form-elements/legend/legend'; +@import '../components/05-atoms/form-elements/radio/radio'; // Media atoms -@import "../components/05-atoms/media/avatar/avatar"; -@import "../components/05-atoms/media/embed-responsive/embed-responsive"; -@import "../components/05-atoms/media/figure/figure"; -@import "../components/05-atoms/media/icon/icon"; -@import "../components/05-atoms/media/image/image"; +@import '../components/05-atoms/media/avatar/avatar'; +@import '../components/05-atoms/media/embed-responsive/embed-responsive'; +@import '../components/05-atoms/media/figure/figure'; +@import '../components/05-atoms/media/icon/icon'; +@import '../components/05-atoms/media/image/image'; // Toggler atoms -@import "../components/05-atoms/togglers/collapse-toggler/collapse-toggler"; - - -@import "../components/05-atoms/text/accentuation/accentuation"; -@import "../components/05-atoms/text/code/code"; -@import "../components/05-atoms/text/date/date"; -@import "../components/05-atoms/text/footnote/footnote"; -@import "../components/05-atoms/text/heading/heading"; -@import "../components/05-atoms/text/link/link"; -@import "../components/05-atoms/text/paragraph/paragraph"; -@import "../components/05-atoms/text/quote/pull-quote"; -@import "../components/05-atoms/text/quote/block-quote"; - +@import '../components/05-atoms/togglers/collapse-toggler/collapse-toggler'; + +@import '../components/05-atoms/text/accentuation/accentuation'; +@import '../components/05-atoms/text/code/code'; +@import '../components/05-atoms/text/date/date'; +@import '../components/05-atoms/text/footnote/footnote'; +@import '../components/05-atoms/text/heading/heading'; +@import '../components/05-atoms/text/link/link'; +@import '../components/05-atoms/text/paragraph/paragraph'; +@import '../components/05-atoms/text/quote/pull-quote'; +@import '../components/05-atoms/text/quote/block-quote'; // Visual elements atoms -@import "../components/05-atoms/visual-elements/animation/waiting-dots/waiting-dots"; -@import "../components/05-atoms/visual-elements/horizontal-line/horizontal-line"; -@import "../components/05-atoms/visual-elements/zigzag/zigzag"; +@import '../components/05-atoms/visual-elements/animation/waiting-dots/waiting-dots'; +@import '../components/05-atoms/visual-elements/horizontal-line/horizontal-line'; +@import '../components/05-atoms/visual-elements/zigzag/zigzag'; -@import "../components/05-atoms/clickable-area/clickable-area"; -@import "../components/05-atoms/duration/duration"; -@import "../components/05-atoms/label/label"; -@import "../components/05-atoms/list/list"; -@import "../components/05-atoms/table/table"; -@import "../components/05-atoms/tag-list/tag-list"; +@import '../components/05-atoms/clickable-area/clickable-area'; +@import '../components/05-atoms/duration/duration'; +@import '../components/05-atoms/label/label'; +@import '../components/05-atoms/list/list'; +@import '../components/05-atoms/table/table'; +@import '../components/05-atoms/tag-list/tag-list'; // // MOLECULES // // Article and blog post molecules -@import "../components/04-molecules/article&blog-post-elements/author-bio/author-bio"; -@import "../components/04-molecules/article&blog-post-elements/conclusion/conclusion"; -@import "../components/04-molecules/article&blog-post-elements/content-separator/content-separator"; -@import "../components/04-molecules/article&blog-post-elements/cta-section/cta-section"; -@import "../components/04-molecules/article&blog-post-elements/footnote-section/footnote-section"; -@import "../components/04-molecules/article&blog-post-elements/info-box/info-box"; -@import "../components/04-molecules/article&blog-post-elements/info-note/info-note"; -@import "../components/04-molecules/article&blog-post-elements/quotes/long-quote/long-quote"; -@import "../components/04-molecules/article&blog-post-elements/reference/reference"; -@import "../components/04-molecules/article&blog-post-elements/share-section/share-section"; -@import "../components/04-molecules/article&blog-post-elements/quotes/super-quote/super-quote"; -@import "../components/04-molecules/article&blog-post-elements/table-of-contents/table-of-contents"; -@import "../components/04-molecules/article&blog-post-elements/tag-section/tag-section"; -@import "../components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent"; +@import '../components/04-molecules/article&blog-post-elements/author-bio/author-bio'; +@import '../components/04-molecules/article&blog-post-elements/conclusion/conclusion'; +@import '../components/04-molecules/article&blog-post-elements/content-separator/content-separator'; +@import '../components/04-molecules/article&blog-post-elements/cta-section/cta-section'; +@import '../components/04-molecules/article&blog-post-elements/footnote-section/footnote-section'; +@import '../components/04-molecules/article&blog-post-elements/info-box/info-box'; +@import '../components/04-molecules/article&blog-post-elements/info-note/info-note'; +@import '../components/04-molecules/article&blog-post-elements/quotes/long-quote/long-quote'; +@import '../components/04-molecules/article&blog-post-elements/reference/reference'; +@import '../components/04-molecules/article&blog-post-elements/share-section/share-section'; +@import '../components/04-molecules/article&blog-post-elements/quotes/super-quote/super-quote'; +@import '../components/04-molecules/article&blog-post-elements/table-of-contents/table-of-contents'; +@import '../components/04-molecules/article&blog-post-elements/tag-section/tag-section'; +@import '../components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent'; // Contact Person -@import "../components/04-molecules/contact-person/contact-person"; +@import '../components/04-molecules/contact-person/contact-person'; // Dropdown -@import "../components/04-molecules/dropdown/dropdown"; +@import '../components/04-molecules/dropdown/dropdown'; // Search -@import "../components/04-molecules/search/search-form/search-form"; -@import "../components/04-molecules/search/search-result/search-result"; +@import '../components/04-molecules/search/search-form/search-form'; +@import '../components/04-molecules/search/search-result/search-result'; -@import "../components/04-molecules/textbox-sequence/textbox-sequence"; +@import '../components/04-molecules/textbox-sequence/textbox-sequence'; // Visual elements -@import "../components/04-molecules/visual-elements/card/card"; -@import "../components/04-molecules/visual-elements/date-location-section/date-location-section"; -@import "../components/04-molecules/visual-elements/download-section-feature/download-section-feature"; -@import "../components/04-molecules/visual-elements/event-date-section/event-date-section"; -@import "../components/04-molecules/visual-elements/eyecatcher/eyecatcher-banner/eyecatcher-banner"; -@import "../components/04-molecules/visual-elements/eyecatcher/icon-eyecatcher/icon-eyecatcher"; -@import "../components/04-molecules/visual-elements/video-card/video-card"; -@import "../components/04-molecules/visual-elements/paginator/paginator"; -@import "../components/04-molecules/visual-elements/resource-list/resource-list"; -@import "../components/04-molecules/visual-elements/service-intro/service-intro"; -@import "../components/04-molecules/visual-elements/dialog-banner/dialog-banner"; -@import "../components/04-molecules/visual-elements/social-media-bar/social-media-bar"; -@import "../components/04-molecules/visual-elements/slider/slider"; +@import '../components/04-molecules/visual-elements/card/card'; +@import '../components/04-molecules/visual-elements/date-location-section/date-location-section'; +@import '../components/04-molecules/visual-elements/download-section-feature/download-section-feature'; +@import '../components/04-molecules/visual-elements/event-date-section/event-date-section'; +@import '../components/04-molecules/visual-elements/eyecatcher/eyecatcher-banner/eyecatcher-banner'; +@import '../components/04-molecules/visual-elements/eyecatcher/icon-eyecatcher/icon-eyecatcher'; +@import '../components/04-molecules/visual-elements/video-card/video-card'; +@import '../components/04-molecules/visual-elements/paginator/paginator'; +@import '../components/04-molecules/visual-elements/resource-list/resource-list'; +@import '../components/04-molecules/visual-elements/service-intro/service-intro'; +@import '../components/04-molecules/visual-elements/dialog-banner/dialog-banner'; +@import '../components/04-molecules/visual-elements/social-media-bar/social-media-bar'; +@import '../components/04-molecules/visual-elements/slider/slider'; // Teaser Molecules -@import "../components/04-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser"; - -@import "../components/04-molecules/visual-elements/teaser/list-teaser/abstract-list-teaser/abstract-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/artist-list-teaser/artist-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/case-list-teaser/case-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/event-list-teaser/event-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/podcast-list-teaser/podcast-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/project-list-teaser/project-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/simple-list-teaser/simple-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/topic-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/training-list-teaser"; -@import "../components/04-molecules/visual-elements/teaser/list-teaser/product-list-teaser/product-list-teaser"; - -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/big-content-tile-teaser/big-content-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/case-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/content-tile-teaser/content-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/event-tile-teaser/event-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/podcast-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/simple-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/small-tile-teaser/small-tile-teaser"; -@import "../components/04-molecules/visual-elements/teaser/tile-teaser/static-tile-teaser/static-tile-teaser"; - -@import "../components/04-molecules/visual-elements/visual-divider/image-divider-center/image-divider-center"; -@import "../components/04-molecules/visual-elements/visual-divider/image-divider-right/image-divider-right"; -@import "../components/04-molecules/visual-elements/visual-divider/wall-note/wall-note"; -@import "../components/04-molecules/visual-elements/visual-divider/triplet-divider/triplet-divider"; -@import "../components/04-molecules/visual-elements/visual-divider/two-column-image-divider/two-column-image-divider"; -@import "../components/04-molecules/visual-elements/visual-divider/two-column-image-divider-asymmetric/two-column-image-divider-asymmetric"; -@import "../components/04-molecules/visual-elements/visual-divider/icon-divider/icon-divider"; +@import '../components/04-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser'; + +@import '../components/04-molecules/visual-elements/teaser/list-teaser/abstract-list-teaser/abstract-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/artist-list-teaser/artist-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/case-list-teaser/case-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/event-list-teaser/event-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/podcast-list-teaser/podcast-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/project-list-teaser/project-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/simple-list-teaser/simple-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/topic-list-teaser/topic-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/training-list-teaser/training-list-teaser'; +@import '../components/04-molecules/visual-elements/teaser/list-teaser/product-list-teaser/product-list-teaser'; + +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/big-content-tile-teaser/big-content-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/case-tile-teaser/case-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/content-tile-teaser/content-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/event-tile-teaser/event-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/podcast-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/simple-tile-teaser/simple-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/small-tile-teaser/small-tile-teaser'; +@import '../components/04-molecules/visual-elements/teaser/tile-teaser/static-tile-teaser/static-tile-teaser'; + +@import '../components/04-molecules/visual-elements/visual-divider/image-divider-center/image-divider-center'; +@import '../components/04-molecules/visual-elements/visual-divider/image-divider-right/image-divider-right'; +@import '../components/04-molecules/visual-elements/visual-divider/wall-note/wall-note'; +@import '../components/04-molecules/visual-elements/visual-divider/triplet-divider/triplet-divider'; +@import '../components/04-molecules/visual-elements/visual-divider/two-column-image-divider/two-column-image-divider'; +@import '../components/04-molecules/visual-elements/visual-divider/two-column-image-divider-asymmetric/two-column-image-divider-asymmetric'; +@import '../components/04-molecules/visual-elements/visual-divider/icon-divider/icon-divider'; // Toolbar -@import "../components/04-molecules/visual-elements/toolbar/toolbar"; +@import '../components/04-molecules/visual-elements/toolbar/toolbar'; // // ORGANISMS // -@import "../components/03-organisms/cover/cover"; -@import "../components/03-organisms/form/form"; -@import "../components/03-organisms/footer/footer"; +@import '../components/03-organisms/cover/cover'; +@import '../components/03-organisms/form/form'; +@import '../components/03-organisms/footer/footer'; // Header -@import "../components/03-organisms/header/claim-header/claim-header"; -@import "../components/03-organisms/header/gradient-header/gradient-header"; -@import "../components/03-organisms/header/image-header/image-header"; -@import "../components/03-organisms/header/landing-page-header/landing-page-header"; -@import "../components/03-organisms/header/staff-header/staff-header"; -@import "../components/03-organisms/header/standard-header/standard-header"; -@import "../components/03-organisms/header/text-header/text-header"; -@import "../components/03-organisms/header/topic-header/topic-header"; -@import "../components/03-organisms/header/video-header/video-header"; - -@import "../components/03-organisms/navbar/navbar"; -@import "../components/03-organisms/newsletter-optin/newsletter-optin"; -@import "../components/03-organisms/search-result-list/search-result-list"; +@import '../components/03-organisms/header/claim-header/claim-header'; +@import '../components/03-organisms/header/gradient-header/gradient-header'; +@import '../components/03-organisms/header/image-header/image-header'; +@import '../components/03-organisms/header/landing-page-header/landing-page-header'; +@import '../components/03-organisms/header/staff-header/staff-header'; +@import '../components/03-organisms/header/standard-header/standard-header'; +@import '../components/03-organisms/header/text-header/text-header'; +@import '../components/03-organisms/header/topic-header/topic-header'; +@import '../components/03-organisms/header/video-header/video-header'; + +@import '../components/03-organisms/navbar/navbar'; +@import '../components/03-organisms/newsletter-optin/newsletter-optin'; +@import '../components/03-organisms/search-result-list/search-result-list'; // LAYOUTS -@import "../components/02-layouts/component-layouts/container/container"; -@import "../components/02-layouts/component-layouts/masonry-layout/masonry-layout"; -@import "../components/02-layouts/component-layouts/tile-layout/tile-layout"; -@import "../components/02-layouts/component-layouts/stripe/stripe"; +@import '../components/02-layouts/component-layouts/container/container'; +@import '../components/02-layouts/component-layouts/masonry-layout/masonry-layout'; +@import '../components/02-layouts/component-layouts/tile-layout/tile-layout'; +@import '../components/02-layouts/component-layouts/stripe/stripe'; -@import "../components/02-layouts/page-layouts/article-layout/article-layout"; -@import "../components/02-layouts/page-layouts/article-layout-simple/article-layout-simple"; -@import "../components/02-layouts/page-layouts/main-layout/main-layout"; -@import "../components/02-layouts/page-layouts/page-layout-default"; -@import "../components/02-layouts/page-layouts/page-layout-podcast"; +@import '../components/02-layouts/page-layouts/article-layout/article-layout'; +@import '../components/02-layouts/page-layouts/article-layout-simple/article-layout-simple'; +@import '../components/02-layouts/page-layouts/main-layout/main-layout'; +@import '../components/02-layouts/page-layouts/page-layout-default'; +@import '../components/02-layouts/page-layouts/page-layout-podcast'; // // PAGES // -@import "../components/01-pages/aggregator-page/aggregator-page"; -@import "../components/01-pages/article-page-default/article-page-default"; -@import "../components/01-pages/case-study-pages/case-study-overview/case-study-overview"; -@import "../components/01-pages/case-study-pages/case-study-page/case-study-page"; -@import "../components/01-pages/artist-collabo-page/artist-collabo-page"; -@import "../components/01-pages/culture-pages/culture-page-default/culture-page-default"; -@import "../components/01-pages/culture-pages/work-page/work-page"; -@import "../components/01-pages/error-pages/error-page"; -@import "../components/01-pages/landing-page/landing-page"; -@import "../components/01-pages/magazine-page/magazine-page"; -@import "../components/01-pages/podcast-pages/podcast-overview-page/podcast-overview-page"; -@import "../components/01-pages/podcast-pages/innoq-podcast/innoq-podcast-overview-page/innoq-podcast-overview-page"; -@import "../components/01-pages/podcast-pages/innoq-podcast/innoq-podcast-detail-page/innoq-podcast-detail-page"; -@import "../components/01-pages/podcast-pages/security-podcast/security-podcast-overview-page/security-podcast-overview-page"; -@import "../components/01-pages/podcast-pages/security-podcast/security-podcast-detail-page/security-podcast-detail-page"; -@import "../components/01-pages/service-pages/service-detail-page/service-detail-page"; -@import "../components/01-pages/service-pages/services-overview-page/services-overview-page"; -@import "../components/01-pages/staff-page/staff-page"; -@import "../components/01-pages/story-pages/story-detail-page/story-detail-page"; -@import "../components/01-pages/story-pages/story-overview-page/story-overview-page"; -@import "../components/01-pages/talk-page/talk-page"; -@import "../components/01-pages/topic-page/topic-page"; -@import "../components/01-pages/training-pages/booking-page/booking-page"; -@import "../components/01-pages/training-pages/training-detail-page/training-detail-page"; -@import "../components/01-pages/training-pages/trainings-overview-page/trainings-overview-page"; -@import "../components/01-pages/product-microsite-page/product-microsite-page"; - -@import "03-styleguide/hacks"; -@import "03-styleguide/styleguide"; +@import '../components/01-pages/aggregator-page/aggregator-page'; +@import '../components/01-pages/article-page-default/article-page-default'; +@import '../components/01-pages/case-study-pages/case-study-overview/case-study-overview'; +@import '../components/01-pages/case-study-pages/case-study-page/case-study-page'; +@import '../components/01-pages/artist-collabo-page/artist-collabo-page'; +@import '../components/01-pages/culture-pages/culture-page-default/culture-page-default'; +@import '../components/01-pages/culture-pages/work-page/work-page'; +@import '../components/01-pages/error-pages/error-page'; +@import '../components/01-pages/landing-page/landing-page'; +@import '../components/01-pages/magazine-page/magazine-page'; +@import '../components/01-pages/podcast-pages/podcast-overview-page/podcast-overview-page'; +@import '../components/01-pages/podcast-pages/innoq-podcast/innoq-podcast-overview-page/innoq-podcast-overview-page'; +@import '../components/01-pages/podcast-pages/innoq-podcast/innoq-podcast-detail-page/innoq-podcast-detail-page'; +@import '../components/01-pages/podcast-pages/security-podcast/security-podcast-overview-page/security-podcast-overview-page'; +@import '../components/01-pages/podcast-pages/security-podcast/security-podcast-detail-page/security-podcast-detail-page'; +@import '../components/01-pages/service-pages/service-detail-page/service-detail-page'; +@import '../components/01-pages/service-pages/services-overview-page/services-overview-page'; +@import '../components/01-pages/staff-page/staff-page'; +@import '../components/01-pages/story-pages/story-detail-page/story-detail-page'; +@import '../components/01-pages/story-pages/story-overview-page/story-overview-page'; +@import '../components/01-pages/talk-page/talk-page'; +@import '../components/01-pages/topic-page/topic-page'; +@import '../components/01-pages/training-pages/booking-page/booking-page'; +@import '../components/01-pages/training-pages/training-detail-page/training-detail-page'; +@import '../components/01-pages/training-pages/trainings-overview-page/trainings-overview-page'; +@import '../components/01-pages/product-microsite-page/product-microsite-page'; + +@import '03-styleguide/hacks'; +@import '03-styleguide/styleguide'; diff --git a/lib/styles/styleguide-theme.scss b/lib/styles/styleguide-theme.scss index 01356119c..4a2ac0294 100644 --- a/lib/styles/styleguide-theme.scss +++ b/lib/styles/styleguide-theme.scss @@ -1,20 +1,20 @@ // This file is used to generate overrides for Fractals Mandelbrot theme -@import "01-base/breakpoints"; -@import "01-base/colors"; -@import "01-base/theme-apripetrol"; -@import "01-base/typography"; -@import "01-base/spacings"; -@import "01-base/fonts"; -@import "01-base/fontfaces"; +@import '01-base/breakpoints'; +@import '01-base/colors'; +@import '01-base/theme-apripetrol'; +@import '01-base/typography'; +@import '01-base/spacings'; +@import '01-base/fonts'; +@import '01-base/fontfaces'; -@import "02-util/text"; +@import '02-util/text'; // // Styleguide Overrides // -@import "03-styleguide/styleguide"; +@import '03-styleguide/styleguide'; .Header { background-color: $brand-secondary; diff --git a/package.json b/package.json index 065f84d75..b7b127f1c 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "server-watch": "nodemon -I -w components -w docs -e 'html' -x 'npm run server'", "compile": "faucet", "compile-watch": "npm run compile -- --watch", - "test": "eslint --cache --ext .js . && stylelint --cache 'lib/**/*.scss' 'components/**/*.scss'", + "test": "eslint --cache --ext .js . && stylelint --cache 'lib/**/*.scss' 'components/**/*.scss' && prettier --check .", "site": "yarn run compile && fractal-fork build", "dist": "./scripts/dist", "release": "release-it"