diff --git a/.prettierignore b/.prettierignore index e700be58e..bdfdbff8b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -9,8 +9,9 @@ packages/core/scripts/api.handlebars packages/core/scripts/events.handlebars packages/core/test/files/annotations.js packages/**/annotations.js -**/uikit-workshop/src/js/**/* *.json *.md -*.scss +**/reset.scss **/_meta/_head.* +**/_meta/_foot.* +**/development-edition*/source/_patterns/** diff --git a/packages/docs/.eleventy.js b/packages/docs/.eleventy.js index bdc41b8fc..9e3b3a774 100644 --- a/packages/docs/.eleventy.js +++ b/packages/docs/.eleventy.js @@ -16,84 +16,84 @@ const parseTransform = require('./src/transforms/parse-transform.js'); const site = require('./src/_data/site.json'); module.exports = function (config) { - // Filters - config.addFilter('dateFilter', dateFilter); - config.addFilter('markdownFilter', markdownFilter); - config.addFilter('w3DateFilter', w3DateFilter); - - // Layout aliases - config.addLayoutAlias('home', 'layouts/home.njk'); - - // Transforms - config.addTransform('htmlmin', htmlMinTransform); - config.addTransform('parse', parseTransform); - - // Passthrough copy - config.addPassthroughCopy('src/images'); - config.addPassthroughCopy('src/js'); - config.addPassthroughCopy('src/admin/config.yml'); - config.addPassthroughCopy('src/admin/previews.js'); - config.addPassthroughCopy({ - '../../node_modules/nunjucks/browser/nunjucks-slim.js': - 'node_modules/nunjucks/browser/nunjucks-slim.js', - }); - - const now = new Date(); - - // Custom collections - const livePosts = (post) => post.date <= now && !post.data.draft; - config.addCollection('posts', (collection) => { - return [ - ...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts), - ].reverse(); - }); - - config.addCollection('demos', (collection) => { - return [...collection.getFilteredByGlob('./src/demos/*.md')].reverse(); - }); - - config.addCollection('postFeed', (collection) => { - return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)] - .reverse() - .slice(0, site.maxPostsPerPage); - }); - - config.addCollection('docs', (collection) => { - return [...collection.getFilteredByGlob('./src/docs/*.md')].reverse(); - }); - - config.addCollection('docsOrdered', (collection) => { - const docs = collection.getFilteredByGlob('src/docs/*.md').sort((a, b) => { - return Number(a.data.order) - Number(b.data.order); - }); - return docs; - }); - - // Plugins - config.addPlugin(rssPlugin); - config.addPlugin(syntaxHighlight); - config.addPlugin(eleventyNavigationPlugin); - - // 404 - config.setBrowserSyncConfig({ - callbacks: { - ready: function (err, browserSync) { - const content_404 = fs.readFileSync('dist/404.html'); - - browserSync.addMiddleware('*', (req, res) => { - // Provides the 404 content without redirect. - res.write(content_404); - res.end(); - }); - }, - }, - }); - - return { - dir: { - input: 'src', - output: 'dist', - }, - passthroughFileCopy: true, - }; + // Filters + config.addFilter('dateFilter', dateFilter); + config.addFilter('markdownFilter', markdownFilter); + config.addFilter('w3DateFilter', w3DateFilter); + + // Layout aliases + config.addLayoutAlias('home', 'layouts/home.njk'); + + // Transforms + config.addTransform('htmlmin', htmlMinTransform); + config.addTransform('parse', parseTransform); + + // Passthrough copy + config.addPassthroughCopy('src/images'); + config.addPassthroughCopy('src/js'); + config.addPassthroughCopy('src/admin/config.yml'); + config.addPassthroughCopy('src/admin/previews.js'); + config.addPassthroughCopy({ + '../../node_modules/nunjucks/browser/nunjucks-slim.js': + 'node_modules/nunjucks/browser/nunjucks-slim.js', + }); + + const now = new Date(); + + // Custom collections + const livePosts = (post) => post.date <= now && !post.data.draft; + config.addCollection('posts', (collection) => { + return [ + ...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts), + ].reverse(); + }); + + config.addCollection('demos', (collection) => { + return [...collection.getFilteredByGlob('./src/demos/*.md')].reverse(); + }); + + config.addCollection('postFeed', (collection) => { + return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)] + .reverse() + .slice(0, site.maxPostsPerPage); + }); + + config.addCollection('docs', (collection) => { + return [...collection.getFilteredByGlob('./src/docs/*.md')].reverse(); + }); + + config.addCollection('docsOrdered', (collection) => { + const docs = collection.getFilteredByGlob('src/docs/*.md').sort((a, b) => { + return Number(a.data.order) - Number(b.data.order); + }); + return docs; + }); + + // Plugins + config.addPlugin(rssPlugin); + config.addPlugin(syntaxHighlight); + config.addPlugin(eleventyNavigationPlugin); + + // 404 + config.setBrowserSyncConfig({ + callbacks: { + ready: function (err, browserSync) { + const content_404 = fs.readFileSync('dist/404.html'); + + browserSync.addMiddleware('*', (req, res) => { + // Provides the 404 content without redirect. + res.write(content_404); + res.end(); + }); + }, + }, + }); + + return { + dir: { + input: 'src', + output: 'dist', + }, + passthroughFileCopy: true, + }; }; diff --git a/packages/docs/.prettierrc b/packages/docs/.prettierrc index a20fac227..fc46c20b4 100644 --- a/packages/docs/.prettierrc +++ b/packages/docs/.prettierrc @@ -1,7 +1,7 @@ { - "printWidth": 90, - "useTabs": true, - "tabWidth": 2, - "singleQuote": true, - "bracketSpacing": false + "printWidth": 90, + "useTabs": false, + "tabWidth": 3, + "singleQuote": true, + "bracketSpacing": false } diff --git a/packages/docs/php-docs/pattern-states.md b/packages/docs/php-docs/pattern-states.md index 999c37320..58dc72591 100644 --- a/packages/docs/php-docs/pattern-states.md +++ b/packages/docs/php-docs/pattern-states.md @@ -37,7 +37,7 @@ The three default states included with Pattern Lab might not be enough for every You can use the following as your CSS template for new pattern states: ```css -{% raw %}.newpatternstate:before { +{% raw %}.newpatternstate::before { color: #B10DC9 !important; }{% endraw %} ``` diff --git a/packages/docs/rollup.config.js b/packages/docs/rollup.config.js index 38dd88349..4fc2d3bc6 100644 --- a/packages/docs/rollup.config.js +++ b/packages/docs/rollup.config.js @@ -4,11 +4,11 @@ const nodeResolve = require('rollup-plugin-node-resolve'); const json = require('rollup-plugin-json'); export default { - input: 'src/admin/util', - output: { - file: 'dist/admin/util.js', - format: 'iife', - name: 'previewUtil', - }, - plugins: [builtins(), nodeResolve(), commonjs(), json()], + input: 'src/admin/util', + output: { + file: 'dist/admin/util.js', + format: 'iife', + name: 'previewUtil', + }, + plugins: [builtins(), nodeResolve(), commonjs(), json()], }; diff --git a/packages/docs/src/_data/global.js b/packages/docs/src/_data/global.js index 0d9c11a3c..3c823d73b 100644 --- a/packages/docs/src/_data/global.js +++ b/packages/docs/src/_data/global.js @@ -1,10 +1,10 @@ module.exports = { - random() { - const segment = () => { - // eslint-disable-next-line no-bitwise - return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); - }; - return `${segment()}-${segment()}-${segment()}`; - }, - now: Date.now(), + random() { + const segment = () => { + // eslint-disable-next-line no-bitwise + return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); + }; + return `${segment()}-${segment()}-${segment()}`; + }, + now: Date.now(), }; diff --git a/packages/docs/src/_data/helpers.js b/packages/docs/src/_data/helpers.js index 97543eaaa..bd6f173d3 100644 --- a/packages/docs/src/_data/helpers.js +++ b/packages/docs/src/_data/helpers.js @@ -1,10 +1,10 @@ module.exports = { - getNextHeadingLevel(currentLevel) { - return parseInt(currentLevel, 10) + 1; - }, - getReadingTime(text) { - const wordsPerMinute = 200; - const numberOfWords = text.split(/\s/g).length; - return Math.ceil(numberOfWords / wordsPerMinute); - }, + getNextHeadingLevel(currentLevel) { + return parseInt(currentLevel, 10) + 1; + }, + getReadingTime(text) { + const wordsPerMinute = 200; + const numberOfWords = text.split(/\s/g).length; + return Math.ceil(numberOfWords / wordsPerMinute); + }, }; diff --git a/packages/docs/src/_data/styleguide.js b/packages/docs/src/_data/styleguide.js index de64437d5..a3977f9b0 100644 --- a/packages/docs/src/_data/styleguide.js +++ b/packages/docs/src/_data/styleguide.js @@ -1,28 +1,28 @@ const tokens = require('./tokens.json'); module.exports = { - colors() { - let response = []; + colors() { + let response = []; - Object.keys(tokens.colors).forEach((key) => { - response.push({ - value: tokens.colors[key], - key, - }); - }); + Object.keys(tokens.colors).forEach((key) => { + response.push({ + value: tokens.colors[key], + key, + }); + }); - return response; - }, - sizes() { - let response = []; + return response; + }, + sizes() { + let response = []; - Object.keys(tokens['size-scale']).forEach((key) => { - response.push({ - value: tokens['size-scale'][key], - key, - }); - }); + Object.keys(tokens['size-scale']).forEach((key) => { + response.push({ + value: tokens['size-scale'][key], + key, + }); + }); - return response; - }, + return response; + }, }; diff --git a/packages/docs/src/admin/previews.js b/packages/docs/src/admin/previews.js index 9fa3d7589..46a94b655 100644 --- a/packages/docs/src/admin/previews.js +++ b/packages/docs/src/admin/previews.js @@ -7,82 +7,82 @@ env.addFilter('markdownFilter', markdownFilter); env.addFilter('dateFilter', dateFilter); const Preview = ({entry, path, context}) => { - const data = context(entry.get('data').toJS()); - const html = env.render(path, {...data, helpers}); - return
; + const data = context(entry.get('data').toJS()); + const html = env.render(path, {...data, helpers}); + return
; }; const Home = ({entry}) => ( - ({ - title, - content: markdownFilter(body), - postsHeading, - archiveButtonText, - collections: { - postFeed: [ - { - url: 'javascript:void(0)', - date: new Date(), - data: { - title: 'Sample Post', - }, - }, - ], - }, - })} - /> + ({ + title, + content: markdownFilter(body), + postsHeading, + archiveButtonText, + collections: { + postFeed: [ + { + url: 'javascript:void(0)', + date: new Date(), + data: { + title: 'Sample Post', + }, + }, + ], + }, + })} + /> ); const Post = ({entry}) => ( - ({ - title, - date, - content: markdownFilter(body || ''), - })} - /> + ({ + title, + date, + content: markdownFilter(body || ''), + })} + /> ); const Page = ({entry}) => ( - ({ - title, - content: markdownFilter(body || ''), - })} - /> + ({ + title, + content: markdownFilter(body || ''), + })} + /> ); const SiteData = ({entry}) => ( - ({ - site: { - name, - shortDesc, - showThemeCredit, - }, - })} - /> + ({ + site: { + name, + shortDesc, + showThemeCredit, + }, + })} + /> ); const Nav = ({entry}) => ( - ({ - navigation: { - items, - }, - })} - /> + ({ + navigation: { + items, + }, + })} + /> ); CMS.registerPreviewTemplate('home', Home); diff --git a/packages/docs/src/filters/date-filter.js b/packages/docs/src/filters/date-filter.js index d88c07308..fb0976d44 100644 --- a/packages/docs/src/filters/date-filter.js +++ b/packages/docs/src/filters/date-filter.js @@ -1,28 +1,28 @@ // Stolen from https://stackoverflow.com/a/31615643 const appendSuffix = (n) => { - const s = ['th', 'st', 'nd', 'rd']; - const v = n % 100; - return n + (s[(v - 20) % 10] || s[v] || s[0]); + const s = ['th', 'st', 'nd', 'rd']; + const v = n % 100; + return n + (s[(v - 20) % 10] || s[v] || s[0]); }; module.exports = function dateFilter(value) { - const dateObject = new Date(value); + const dateObject = new Date(value); - const months = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', - ]; - const dayWithSuffix = appendSuffix(dateObject.getDate()); + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + const dayWithSuffix = appendSuffix(dateObject.getDate()); - return `${dayWithSuffix} ${months[dateObject.getMonth()]} ${dateObject.getFullYear()}`; + return `${dayWithSuffix} ${months[dateObject.getMonth()]} ${dateObject.getFullYear()}`; }; diff --git a/packages/docs/src/filters/markdown-filter.js b/packages/docs/src/filters/markdown-filter.js index e2298ce25..ed05546a5 100644 --- a/packages/docs/src/filters/markdown-filter.js +++ b/packages/docs/src/filters/markdown-filter.js @@ -1,9 +1,9 @@ const markdownIt = require('markdown-it')({ - html: true, - breaks: true, - linkify: true, + html: true, + breaks: true, + linkify: true, }); module.exports = function markdown(value) { - return markdownIt.render(value); + return markdownIt.render(value); }; diff --git a/packages/docs/src/filters/w3-date-filter.js b/packages/docs/src/filters/w3-date-filter.js index 39c0f7ca8..23257bb12 100644 --- a/packages/docs/src/filters/w3-date-filter.js +++ b/packages/docs/src/filters/w3-date-filter.js @@ -1,5 +1,5 @@ module.exports = function w3cDate(value) { - const dateObject = new Date(value); + const dateObject = new Date(value); - return dateObject.toISOString(); + return dateObject.toISOString(); }; diff --git a/packages/docs/src/js/components/theme-toggle.js b/packages/docs/src/js/components/theme-toggle.js index 9c9794dc6..7b73887a1 100644 --- a/packages/docs/src/js/components/theme-toggle.js +++ b/packages/docs/src/js/components/theme-toggle.js @@ -2,100 +2,100 @@ const html = String.raw; class ThemeToggle extends HTMLElement { - constructor() { - super(); - - this.STORAGE_KEY = 'user-color-scheme'; - this.COLOR_MODE_KEY = '--color-mode'; - } - - connectedCallback() { - this.render(); - } - - getCSSCustomProp(propKey) { - let response = getComputedStyle(document.documentElement).getPropertyValue(propKey); - - // Tidy up the string if there’s something to work with - if (response.length) { - response = response.replace(/\'|"/g, '').trim(); - } - - // Return the string response by default - return response; - } - - applySetting(passedSetting) { - const currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY); - - if (currentSetting) { - document.documentElement.setAttribute('data-user-color-scheme', currentSetting); - this.setButtonLabelAndStatus(currentSetting); - } else { - this.setButtonLabelAndStatus(this.getCSSCustomProp(this.COLOR_MODE_KEY)); - } - } - - toggleSetting() { - let currentSetting = localStorage.getItem(this.STORAGE_KEY); - - switch (currentSetting) { - case null: - currentSetting = - this.getCSSCustomProp(this.COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark'; - break; - case 'light': - currentSetting = 'dark'; - break; - case 'dark': - currentSetting = 'light'; - break; - } - - localStorage.setItem(this.STORAGE_KEY, currentSetting); - - return currentSetting; - } - - setButtonLabelAndStatus(currentSetting) { - this.modeToggleButton.innerText = `${ - currentSetting === 'dark' ? 'Light' : 'Dark' - } theme`; - this.modeStatusElement.innerText = `Color mode is now "${currentSetting}"`; - } - - render() { - this.innerHTML = html` -
- - -
- `; - - this.afterRender(); - } - - afterRender() { - this.modeToggleButton = document.querySelector('.js-mode-toggle'); - this.modeStatusElement = document.querySelector('.js-mode-status'); - - this.modeToggleButton.addEventListener('click', (evt) => { - evt.preventDefault(); - - this.applySetting(this.toggleSetting()); - }); - - this.applySetting(); - } + constructor() { + super(); + + this.STORAGE_KEY = 'user-color-scheme'; + this.COLOR_MODE_KEY = '--color-mode'; + } + + connectedCallback() { + this.render(); + } + + getCSSCustomProp(propKey) { + let response = getComputedStyle(document.documentElement).getPropertyValue(propKey); + + // Tidy up the string if there’s something to work with + if (response.length) { + response = response.replace(/\'|"/g, '').trim(); + } + + // Return the string response by default + return response; + } + + applySetting(passedSetting) { + const currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY); + + if (currentSetting) { + document.documentElement.setAttribute('data-user-color-scheme', currentSetting); + this.setButtonLabelAndStatus(currentSetting); + } else { + this.setButtonLabelAndStatus(this.getCSSCustomProp(this.COLOR_MODE_KEY)); + } + } + + toggleSetting() { + let currentSetting = localStorage.getItem(this.STORAGE_KEY); + + switch (currentSetting) { + case null: + currentSetting = + this.getCSSCustomProp(this.COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark'; + break; + case 'light': + currentSetting = 'dark'; + break; + case 'dark': + currentSetting = 'light'; + break; + } + + localStorage.setItem(this.STORAGE_KEY, currentSetting); + + return currentSetting; + } + + setButtonLabelAndStatus(currentSetting) { + this.modeToggleButton.innerText = `${ + currentSetting === 'dark' ? 'Light' : 'Dark' + } theme`; + this.modeStatusElement.innerText = `Color mode is now "${currentSetting}"`; + } + + render() { + this.innerHTML = html` +
+ + +
+ `; + + this.afterRender(); + } + + afterRender() { + this.modeToggleButton = document.querySelector('.js-mode-toggle'); + this.modeStatusElement = document.querySelector('.js-mode-status'); + + this.modeToggleButton.addEventListener('click', (evt) => { + evt.preventDefault(); + + this.applySetting(this.toggleSetting()); + }); + + this.applySetting(); + } } if ('customElements' in window) { - customElements.define('theme-toggle', ThemeToggle); + customElements.define('theme-toggle', ThemeToggle); } export default ThemeToggle; diff --git a/packages/docs/src/js/primary-nav.js b/packages/docs/src/js/primary-nav.js index 3cf7d54a8..7171fc15e 100644 --- a/packages/docs/src/js/primary-nav.js +++ b/packages/docs/src/js/primary-nav.js @@ -9,77 +9,77 @@ * 4) If the nav dropdown trigger parent does not have an active class, add it. */ (function () { - var navDropdownListItem = document.querySelector('.js-nav-dropdown'); - var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */ + var navDropdownListItem = document.querySelector('.js-nav-dropdown'); + var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */ - for (i = 0; i < navLink.length; i++) { - /* 1 */ + for (i = 0; i < navLink.length; i++) { + /* 1 */ - navLink[i].addEventListener('click', function (event) { - /* 2 */ - event.preventDefault(); - var navLinkParent = this.parentNode; /* 2 */ + navLink[i].addEventListener('click', function (event) { + /* 2 */ + event.preventDefault(); + var navLinkParent = this.parentNode; /* 2 */ - if (navLinkParent.classList.contains('is-active')) { - /* 3 */ - navLinkParent.classList.remove('is-active'); + if (navLinkParent.classList.contains('is-active')) { + /* 3 */ + navLinkParent.classList.remove('is-active'); - this.setAttribute('aria-expanded', 'false'); - } else { - /* 4 */ - navLinkParent.classList.add('is-active'); + this.setAttribute('aria-expanded', 'false'); + } else { + /* 4 */ + navLinkParent.classList.add('is-active'); - this.setAttribute('aria-expanded', 'true'); - } - }); - } + this.setAttribute('aria-expanded', 'true'); + } + }); + } - /** - * Expose docs dropdown if on a docs page - */ - if (window.location.href.indexOf('docs') > -1) { - navDropdownListItem.classList.add('is-active'); - } + /** + * Expose docs dropdown if on a docs page + */ + if (window.location.href.indexOf('docs') > -1) { + navDropdownListItem.classList.add('is-active'); + } - var pathName = location.pathname; + var pathName = location.pathname; - var navLinks = document.querySelectorAll('.c-tree-nav a'); + var navLinks = document.querySelectorAll('.c-tree-nav a'); - for (i = 0; i < navLinks.length; i++) { - var subnavLink = navLinks[i].getAttribute('href'); - if (subnavLink == pathName) { - navLinks[i].classList.add('is-active'); - } - } + for (i = 0; i < navLinks.length; i++) { + var subnavLink = navLinks[i].getAttribute('href'); + if (subnavLink == pathName) { + navLinks[i].classList.add('is-active'); + } + } - /** - * Toggles active class on the primary nav panel - * 1) Select all nav triggers and cycle through them - * 2) On click, find the nav panel within the header - * 3) If the navPanel already has active class, remove it on click, as well as the aria-expanded attributes value. - * 4) If the navPanel does not have an active class, add it on click, as well as the aria-expanded attributes value. - */ - var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */ + /** + * Toggles active class on the primary nav panel + * 1) Select all nav triggers and cycle through them + * 2) On click, find the nav panel within the header + * 3) If the navPanel already has active class, remove it on click, as well as the aria-expanded attributes value. + * 4) If the navPanel does not have an active class, add it on click, as well as the aria-expanded attributes value. + */ + var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */ - for (i = 0; i < navToggle.length; i++) { - /* 1 */ + for (i = 0; i < navToggle.length; i++) { + /* 1 */ - navToggle[i].addEventListener('click', function (event) { - /* 2 */ - event.preventDefault(); - var navToggleElement = this; - var navToggleParent = navToggleElement.parentNode; /* 2 */ - var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */ + navToggle[i].addEventListener('click', function (event) { + /* 2 */ + event.preventDefault(); + var navToggleElement = this; + var navToggleParent = navToggleElement.parentNode; /* 2 */ + var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */ - if (navPanel.classList.contains('is-active')) { - /* 3 */ - navPanel.classList.remove('is-active'); - navToggleElement.setAttribute('aria-expanded', 'false'); - } else { - /* 4 */ - navPanel.classList.add('is-active'); - navToggleElement.setAttribute('aria-expanded', 'true'); - } - }); - } + if (navPanel.classList.contains('is-active')) { + /* 3 */ + navPanel.classList.remove('is-active'); + navToggleElement.setAttribute('aria-expanded', 'false'); + } else { + /* 4 */ + navPanel.classList.add('is-active'); + navToggleElement.setAttribute('aria-expanded', 'true'); + } + }); + } })(); diff --git a/packages/docs/src/scss/abstracts/_colors.scss b/packages/docs/src/scss/abstracts/_colors.scss index f1100a06d..e67aa711c 100644 --- a/packages/docs/src/scss/abstracts/_colors.scss +++ b/packages/docs/src/scss/abstracts/_colors.scss @@ -7,10 +7,6 @@ * and define them against variables that we can utilise anywhere throughout the project. */ - - - - /*------------------------------------*\ #GLOBAL TEXT COLOR \*------------------------------------*/ @@ -27,23 +23,15 @@ $color-text-bg: $color-white !default; $color-text-highlight: $color-gray-93; $color-text-highlight-bg: $color-gray-13; - - - - /*------------------------------------*\ #LINKS \*------------------------------------*/ $color-links: $color-gray-73 !default; -$color-links-hover: $color-gray-50!default; +$color-links-hover: $color-gray-50 !default; $color-links-active: $color-gray-93 !default; $color-links-visited: $color-gray-93 !default; - - - - /*------------------------------------*\ #BUTTONS \*------------------------------------*/ @@ -61,10 +49,6 @@ $color-btn-secondary-border: $color-gray-93 !default; $color-btn-disabled: $color-gray-50 !default; $color-btn-disabled-bg: $color-gray-07 !default; - - - - /*------------------------------------*\ #FORMS \*------------------------------------*/ diff --git a/packages/docs/src/scss/abstracts/_mixins.scss b/packages/docs/src/scss/abstracts/_mixins.scss index 4cd55aa8c..c86c6d5e2 100644 --- a/packages/docs/src/scss/abstracts/_mixins.scss +++ b/packages/docs/src/scss/abstracts/_mixins.scss @@ -3,63 +3,63 @@ \*------------------------------------*/ /** - * Body Styles + * Body Styles * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/ */ @mixin typographyBody() { - font-family: $font-primary; - font-size: $font-size-med-2; - font-weight: 500; - line-height: 1.6; - -webkit-text-size-adjust: 100%; /* 1 */ + font-family: $font-primary; + font-size: $font-size-med-2; + font-weight: 500; + line-height: 1.6; + -webkit-text-size-adjust: 100%; /* 1 */ } /** * XL Type Styles */ @mixin typographyBodyLarge() { - font-size: $font-size-med-2; - line-height: $line-height-large; + font-size: $font-size-med-2; + line-height: $line-height-large; } /** * XL Heading Styles */ @mixin typographyHeadingXl() { - font-weight: $font-weight-bold; - font-size: $font-size-large-2; - line-height: $line-height-med-2; + font-weight: $font-weight-bold; + font-size: $font-size-large-2; + line-height: $line-height-med-2; - @media all and (min-width: $bp-med) { - font-size: $font-size-xl; - } + @media all and (min-width: $bp-med) { + font-size: $font-size-xl; + } } /** * Large Heading Styles */ @mixin typographyHeadingLarge() { - font-size: $font-size-large; - font-weight: 700; - line-height: 1.6; + font-size: $font-size-large; + font-weight: 700; + line-height: 1.6; } /** * Medium 2 Heading Styles */ @mixin typographyHeadingMed2() { - font-size: $font-size-med-2; - font-weight: 700; - line-height: 1.2; + font-size: $font-size-med-2; + font-weight: 700; + line-height: 1.2; } /** * Medium Heading Styles */ @mixin typographyHeadingMed() { - font-size: $font-size-med; - font-weight: 700; - line-height: 1.2; + font-size: $font-size-med; + font-weight: 700; + line-height: 1.2; } /*------------------------------------*\ @@ -67,13 +67,13 @@ \*------------------------------------*/ @mixin focus() { - outline: 2px dotted $color-black; - outline-offset: 4px; + outline: 2px dotted $color-black; + outline-offset: 4px; } @mixin focusInverted() { - outline: 1px dotted $color-white; - outline-offset: 4px; + outline: 1px dotted $color-white; + outline-offset: 4px; } /*------------------------------------*\ @@ -81,98 +81,98 @@ \*------------------------------------*/ @mixin textShadowEffect() { - position: relative; - z-index: 1; - - &:after { - position: absolute; - left: 4px; - top: 4px; - z-index: 0; - content: attr(data-text); - - // Mitigating the positioning by 4px from the left to not have the words break incorrectly (see #GH-1158) - margin-right: -4px; - - background-image: radial-gradient( - $color-brand-purple 0%, - $color-brand-purple 60%, - transparent 60% - ); - background-size: 4px 4px; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - z-index: -5; - display: block; - text-shadow: none; - - @media all and (max-width: $bp-large) { - left: 2px; - top: 2px; - background-size: 2px 2px; - } - } + position: relative; + z-index: 1; + + &::after { + position: absolute; + left: 4px; + top: 4px; + z-index: 0; + content: attr(data-text); + + // Mitigating the positioning by 4px from the left to not have the words break incorrectly (see #GH-1158) + margin-right: -4px; + + background-image: radial-gradient( + $color-brand-purple 0%, + $color-brand-purple 60%, + transparent 60% + ); + background-size: 4px 4px; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + z-index: -5; + display: block; + text-shadow: none; + + @media all and (max-width: $bp-large) { + left: 2px; + top: 2px; + background-size: 2px 2px; + } + } } @mixin boxShadowEffect($color: 'green') { - @if $color == 'green' { - box-shadow: 6px 6px 0 $color-brand-green, 12px 12px 0 $color-brand-green-light; - } @else if $color == 'orange' { - box-shadow: 6px 6px 0 $color-brand-orange, 12px 12px 0 $color-brand-orange-light; - } @else { - box-shadow: 6px 6px 0 $color-brand-purple, 12px 12px 0 $color-brand-purple-light; - } + @if $color == 'green' { + box-shadow: 6px 6px 0 $color-brand-green, 12px 12px 0 $color-brand-green-light; + } @else if $color == 'orange' { + box-shadow: 6px 6px 0 $color-brand-orange, 12px 12px 0 $color-brand-orange-light; + } @else { + box-shadow: 6px 6px 0 $color-brand-purple, 12px 12px 0 $color-brand-purple-light; + } } @mixin stripedBoxShadow($color: 'green') { - @if $color == 'green' { - background-image: repeating-linear-gradient( - 45deg, - $color-brand-green, - $color-brand-green 1px, - transparent 1px, - transparent 4px - ); - } @else if $color == 'orange' { - background-image: repeating-linear-gradient( - 45deg, - $color-brand-orange, - $color-brand-orange 1px, - transparent 1px, - transparent 4px - ); - } @else { - background-image: repeating-linear-gradient( - 45deg, - $color-brand-purple, - $color-brand-purple 1px, - transparent 1px, - transparent 4px - ); - } + @if $color == 'green' { + background-image: repeating-linear-gradient( + 45deg, + $color-brand-green, + $color-brand-green 1px, + transparent 1px, + transparent 4px + ); + } @else if $color == 'orange' { + background-image: repeating-linear-gradient( + 45deg, + $color-brand-orange, + $color-brand-orange 1px, + transparent 1px, + transparent 4px + ); + } @else { + background-image: repeating-linear-gradient( + 45deg, + $color-brand-purple, + $color-brand-purple 1px, + transparent 1px, + transparent 4px + ); + } } @mixin hideScrollbar() { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; - scrollbar-width: none; - scrollbar-color: transparent; - - &::-webkit-scrollbar { - height: var(--scrollbar-size); - width: var(--scrollbar-size); - } - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track-color); - } - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-color); - /* Add :hover, :active as needed */ - } - &::-webkit-scrollbar-thumb:vertical { - min-height: var(--scrollbar-minlength); - } - &::-webkit-scrollbar-thumb:horizontal { - min-width: var(--scrollbar-minlength); - } + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + scrollbar-width: none; + scrollbar-color: transparent; + + &::-webkit-scrollbar { + height: var(--scrollbar-size); + width: var(--scrollbar-size); + } + &::-webkit-scrollbar-track { + background-color: var(--scrollbar-track-color); + } + &::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-color); + /* Add :hover, :active as needed */ + } + &::-webkit-scrollbar-thumb:vertical { + min-height: var(--scrollbar-minlength); + } + &::-webkit-scrollbar-thumb:horizontal { + min-width: var(--scrollbar-minlength); + } } diff --git a/packages/docs/src/scss/abstracts/_typography.scss b/packages/docs/src/scss/abstracts/_typography.scss index fd42dfc3c..ac1fb2c7b 100644 --- a/packages/docs/src/scss/abstracts/_typography.scss +++ b/packages/docs/src/scss/abstracts/_typography.scss @@ -7,4 +7,4 @@ * against variables that we can utilise anywhere throughout the project. */ - $body-font-size: $font-size-med; \ No newline at end of file +$body-font-size: $font-size-med; diff --git a/packages/docs/src/scss/abstracts/_variables.scss b/packages/docs/src/scss/abstracts/_variables.scss index 114b3cbf1..0e8b2cb2f 100644 --- a/packages/docs/src/scss/abstracts/_variables.scss +++ b/packages/docs/src/scss/abstracts/_variables.scss @@ -184,9 +184,9 @@ $bp-large: 60em; $bp-xl: 70em; :root { - --scrollbar-track-color: transparent; - --scrollbar-color: rgba(0, 0, 0, 0.2); + --scrollbar-track-color: transparent; + --scrollbar-color: rgba(0, 0, 0, 0.2); - --scrollbar-size: 0.375rem; - --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */ + --scrollbar-size: 0.375rem; + --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */ } diff --git a/packages/docs/src/scss/base/_body.scss b/packages/docs/src/scss/base/_body.scss index 897fa2846..054b8818e 100644 --- a/packages/docs/src/scss/base/_body.scss +++ b/packages/docs/src/scss/base/_body.scss @@ -8,7 +8,7 @@ * This is used to achieve a sticky footer */ html { - min-height: 100vh; /* 1 */ + min-height: 100vh; /* 1 */ } /** @@ -18,11 +18,11 @@ html { * 2) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/ */ body { - display: flex; /* 1 */ - flex-direction: column; /* 1 */ - min-height: 100vh; /* 1 */ - @include typographyBody; - -webkit-text-size-adjust: 100%; /* 2 */ - background-color: $color-white; - color: $color-gray-88; + display: flex; /* 1 */ + flex-direction: column; /* 1 */ + min-height: 100vh; /* 1 */ + @include typographyBody; + -webkit-text-size-adjust: 100%; /* 2 */ + background-color: $color-white; + color: $color-gray-88; } diff --git a/packages/docs/src/scss/base/_buttons.scss b/packages/docs/src/scss/base/_buttons.scss index 31eca645a..8c108cf75 100644 --- a/packages/docs/src/scss/base/_buttons.scss +++ b/packages/docs/src/scss/base/_buttons.scss @@ -7,9 +7,9 @@ * 1) These should be styled using c-btn */ button { - cursor: pointer; + cursor: pointer; - &:focus { - @include focus(); - } + &:focus { + @include focus(); + } } diff --git a/packages/docs/src/scss/base/_forms.scss b/packages/docs/src/scss/base/_forms.scss index fca47c803..06ed10dff 100644 --- a/packages/docs/src/scss/base/_forms.scss +++ b/packages/docs/src/scss/base/_forms.scss @@ -10,40 +10,40 @@ * Input placeholder text base styles */ ::-webkit-input-placeholder { - color: $color-form-placeholder; + color: $color-form-placeholder; } ::-moz-placeholder { - color: $color-form-placeholder; + color: $color-form-placeholder; } :-ms-input-placeholder { - color: $color-form-placeholder; + color: $color-form-placeholder; } /** * Fieldset base styles */ fieldset { - border: 0; - padding: 0; - margin: 0; + border: 0; + padding: 0; + margin: 0; } /** * Legend base styles */ legend { - margin-bottom: 0.25rem; + margin-bottom: 0.25rem; } /** * Label base styles */ label { - display: block; - padding-bottom: 0.25rem; - color: $color-form-label; + display: block; + padding-bottom: 0.25rem; + color: $color-form-label; } /** @@ -53,16 +53,16 @@ button, input, select, textarea { - font-family: inherit; - font-size: $font-size-med; - margin: 0; + font-family: inherit; + font-size: $font-size-med; + margin: 0; } /** * Text area base styles */ textarea { - resize: none; + resize: none; } /** @@ -70,14 +70,14 @@ textarea { */ input, textarea { - width: 100%; - padding: 0.5rem; - border: $border-width solid $color-form-border; - background: $color-form-bg; - - &:focus { - border-color: $color-form-border-focus; - } + width: 100%; + padding: 0.5rem; + border: $border-width solid $color-form-border; + background: $color-form-bg; + + &:focus { + border-color: $color-form-border-focus; + } } /** @@ -90,7 +90,7 @@ input[type='search']::-webkit-search-decoration, input[type='url'], input[type='number'], textarea { - -webkit-appearance: none; + -webkit-appearance: none; } /** @@ -98,17 +98,17 @@ textarea { */ input[type='checkbox'], input[type='radio'] { - width: auto; - margin-right: 0.3rem; - border-color: $color-form-border; + width: auto; + margin-right: 0.3rem; + border-color: $color-form-border; } /** * Search input base styles */ input[type='search'] { - -webkit-appearance: none; - border-radius: 0; + -webkit-appearance: none; + border-radius: 0; } /** @@ -116,15 +116,15 @@ input[type='search'] { * 1) Remove default styling */ select { - display: block; - font-size: $font-size-med; - width: 100%; - border: $border-width solid $color-form-border; - padding: 0.5rem; - background: $color-form-bg; - color: $color-form; - - &:focus { - border-color: $color-form-border-focus; - } + display: block; + font-size: $font-size-med; + width: 100%; + border: $border-width solid $color-form-border; + padding: 0.5rem; + background: $color-form-bg; + color: $color-form; + + &:focus { + border-color: $color-form-border-focus; + } } diff --git a/packages/docs/src/scss/base/_headings.scss b/packages/docs/src/scss/base/_headings.scss index 918271967..9983cdc3d 100644 --- a/packages/docs/src/scss/base/_headings.scss +++ b/packages/docs/src/scss/base/_headings.scss @@ -6,30 +6,30 @@ * Heading 1 base styles */ h1 { - @include typographyHeadingXl(); - position: relative; + @include typographyHeadingXl(); + position: relative; } /** * Heading 2 base styles */ h2 { - @include typographyHeadingLarge(); - position: relative; + @include typographyHeadingLarge(); + position: relative; } /** * Heading 3 base styles */ h3 { - @include typographyHeadingMed2(); - position: relative; + @include typographyHeadingMed2(); + position: relative; } /** * Heading 4 base styles */ h4 { - @include typographyHeadingMed(); - position: relative; + @include typographyHeadingMed(); + position: relative; } diff --git a/packages/docs/src/scss/base/_links.scss b/packages/docs/src/scss/base/_links.scss index fca78f65b..70f673583 100644 --- a/packages/docs/src/scss/base/_links.scss +++ b/packages/docs/src/scss/base/_links.scss @@ -6,20 +6,20 @@ * Link base styles */ a { - color: $color-links; - text-decoration: none; - transition: color $anim-fade-quick $anim-ease; + color: $color-links; + text-decoration: none; + transition: color $anim-fade-quick $anim-ease; - &:hover, - &:focus { - color: $color-links-hover; - } + &:hover, + &:focus { + color: $color-links-hover; + } - &:focus { - @include focus(); - } + &:focus { + @include focus(); + } - &:active { - color: $color-links-active; - } + &:active { + color: $color-links-active; + } } diff --git a/packages/docs/src/scss/base/_lists.scss b/packages/docs/src/scss/base/_lists.scss index c7d5cab82..aef0fb90e 100644 --- a/packages/docs/src/scss/base/_lists.scss +++ b/packages/docs/src/scss/base/_lists.scss @@ -6,10 +6,10 @@ * 1) List base styles */ - /** +/** * Remove list styles from unordered and ordered lists */ -ol, ul { - list-style: none; - +ol, +ul { + list-style: none; } diff --git a/packages/docs/src/scss/base/_main.scss b/packages/docs/src/scss/base/_main.scss index 4d4049703..05ca77cee 100644 --- a/packages/docs/src/scss/base/_main.scss +++ b/packages/docs/src/scss/base/_main.scss @@ -6,18 +6,18 @@ * Main element */ main { - display: block; - margin-top: 2rem; + display: block; + margin-top: 2rem; - @media all and (min-width: $bp-med) { - margin-top: 5rem; - } + @media all and (min-width: $bp-med) { + margin-top: 5rem; + } } .c-main--flush { - margin-top: 0; + margin-top: 0; - @media all and (min-width: $bp-med) { - margin-top: 0; - } + @media all and (min-width: $bp-med) { + margin-top: 0; + } } diff --git a/packages/docs/src/scss/base/_media.scss b/packages/docs/src/scss/base/_media.scss index 1d73ebfc4..4481b6350 100644 --- a/packages/docs/src/scss/base/_media.scss +++ b/packages/docs/src/scss/base/_media.scss @@ -8,6 +8,6 @@ */ img, video { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } diff --git a/packages/docs/src/scss/base/_reset.scss b/packages/docs/src/scss/base/_reset.scss index 82c641215..373ab9991 100644 --- a/packages/docs/src/scss/base/_reset.scss +++ b/packages/docs/src/scss/base/_reset.scss @@ -6,20 +6,49 @@ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */ * { - box-sizing: border-box; + box-sizing: border-box; } /** * 1) Zero out margins and padding for elements */ -html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { - margin: 0; - padding: 0; +html, +body, +div, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +ol, +ul, +li, +form, +legend, +label, +table, +header, +footer, +nav, +section, +figure { + margin: 0; + padding: 0; } /** * 1) Set HTML5 elements to display: block */ -header, footer, nav, section, article, figure { - display: block; +header, +footer, +nav, +section, +article, +figure { + display: block; } diff --git a/packages/docs/src/scss/base/_table.scss b/packages/docs/src/scss/base/_table.scss index fa3215c54..2bedbfada 100644 --- a/packages/docs/src/scss/base/_table.scss +++ b/packages/docs/src/scss/base/_table.scss @@ -6,21 +6,21 @@ * Table */ table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; + border-collapse: collapse; + border-spacing: 0; + width: 100%; } /** * Table header cell */ th { - text-align: left; + text-align: left; } /** * Table row */ tr { - vertical-align: top; + vertical-align: top; } diff --git a/packages/docs/src/scss/base/_text.scss b/packages/docs/src/scss/base/_text.scss index e8cae612f..2fe6b2042 100644 --- a/packages/docs/src/scss/base/_text.scss +++ b/packages/docs/src/scss/base/_text.scss @@ -6,74 +6,74 @@ * Paragraph base styles */ p { - margin-bottom: $spacing; + margin-bottom: $spacing; } /** * Blockquote base styles */ blockquote { - font-style: italic; - border-left: 1px solid $color-gray-50; - color: $color-gray-50; - padding-left: 1rem; - margin-bottom: $spacing; + font-style: italic; + border-left: 1px solid $color-gray-50; + color: $color-gray-50; + padding-left: 1rem; + margin-bottom: $spacing; } /** * Horizontal rule base styles */ hr { - border: 0; - height: $border-width-thick; - background: $color-gray-13; - margin: 2rem 0; + border: 0; + height: $border-width-thick; + background: $color-gray-13; + margin: 2rem 0; } /** * Selection styles */ ::-moz-selection { - color: $color-text-highlight; - background: $color-text-highlight-bg; /* Gecko Browsers */ + color: $color-text-highlight; + background: $color-text-highlight-bg; /* Gecko Browsers */ } ::selection { - color: $color-text-highlight; - background: $color-text-highlight-bg; /* WebKit/Blink Browsers */ + color: $color-text-highlight; + background: $color-text-highlight-bg; /* WebKit/Blink Browsers */ } /** * Code base styles */ code { - display: inline; - background: $color-brand-purple-light; - padding: 0.2rem; - line-height: 1.2; - color: $color-gray-60; + display: inline; + background: $color-brand-purple-light; + padding: 0.2rem; + line-height: 1.2; + color: $color-gray-60; } /** * Preformatted text base styles */ pre { - background: $color-gray-88; - padding: 2rem; - @include boxShadowEffect('green'); - color: $color-white; - position: relative; - @include hideScrollbar(); + background: $color-gray-88; + padding: 2rem; + @include boxShadowEffect('green'); + color: $color-white; + position: relative; + @include hideScrollbar(); - /** + /** * Remove border from code within preformatted text block */ - code { - border: 0; - background: transparent; - color: inherit; - white-space: pre-wrap; - } + code { + border: 0; + background: transparent; + color: inherit; + white-space: pre-wrap; + } } // /** diff --git a/packages/docs/src/scss/components/_block-grid.scss b/packages/docs/src/scss/components/_block-grid.scss index 0d3255ed4..32992857a 100644 --- a/packages/docs/src/scss/components/_block-grid.scss +++ b/packages/docs/src/scss/components/_block-grid.scss @@ -1,86 +1,86 @@ .c-block-grid { - display: grid; - grid-template-columns: repeat(auto-fill, 250px); - grid-gap: $spacing-large; - margin-bottom: $spacing-large; + display: grid; + grid-template-columns: repeat(auto-fill, 250px); + grid-gap: $spacing-large; + margin-bottom: $spacing-large; } .c-stacked-block { - &__description { - font-size: $font-size-med; - } + &__description { + font-size: $font-size-med; + } - &__preview-container { - position: relative; - width: 100%; - height: 280px; - padding: 8px; - border-radius: 6px; - margin-bottom: 0.75rem; + &__preview-container { + position: relative; + width: 100%; + height: 280px; + padding: 8px; + border-radius: 6px; + margin-bottom: 0.75rem; - display: flex; - flex-direction: column; - background-color: $color-gray-07; - } + display: flex; + flex-direction: column; + background-color: $color-gray-07; + } - &__bar { - height: 24px; - display: flex; - padding-top: 4px; - } + &__bar { + height: 24px; + display: flex; + padding-top: 4px; + } - &__bar &__bar-dots { - width: 12px; - flex: 0 0 12px; - border-radius: 50%; - margin-right: 0.5rem; + &__bar &__bar-dots { + width: 12px; + flex: 0 0 12px; + border-radius: 50%; + margin-right: 0.5rem; - &:last-child { - margin-right: 0; - margin-left: 0.5rem; - } - } + &:last-child { + margin-right: 0; + margin-left: 0.5rem; + } + } - &__bar &__bar-uri, - &__bar &__bar-dots { - height: 12px; - background-color: darken($color-gray-07, 8%); - } + &__bar &__bar-uri, + &__bar &__bar-dots { + height: 12px; + background-color: darken($color-gray-07, 8%); + } - &__bar &__bar-uri, - &__bar &__bar-dots { - height: 12px; - background-color: darken($color-gray-07, 8%); - } + &__bar &__bar-uri, + &__bar &__bar-dots { + height: 12px; + background-color: darken($color-gray-07, 8%); + } - &__bar &__bar-uri { - position: relative; - flex: 1 1 100%; - margin: 0 1rem; - border-radius: 999px; - } + &__bar &__bar-uri { + position: relative; + flex: 1 1 100%; + margin: 0 1rem; + border-radius: 999px; + } - &__preview-content { - flex-grow: 1; - overflow: hidden; - position: relative; - max-width: 100%; - border-radius: 3px; - } + &__preview-content { + flex-grow: 1; + overflow: hidden; + position: relative; + max-width: 100%; + border-radius: 3px; + } - &__frame-item { - width: 200%; - height: 200%; - border: 0; - transform: scale(0.5); - transform-origin: 0 0; - } + &__frame-item { + width: 200%; + height: 200%; + border: 0; + transform: scale(0.5); + transform-origin: 0 0; + } - &__frame-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } + &__frame-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } } diff --git a/packages/docs/src/scss/components/_buttons.scss b/packages/docs/src/scss/components/_buttons.scss index 1f8d8cb9d..7e09be3b9 100644 --- a/packages/docs/src/scss/components/_buttons.scss +++ b/packages/docs/src/scss/components/_buttons.scss @@ -7,41 +7,41 @@ * 1) Button or link that has functionality to it */ .c-btn { - font-family: $font-secondary; - display: inline-flex; - align-items: center; - justify-content: center; - border: $border-width solid $color-btn-primary-border; - background: $color-brand-green; - color: $color-black; - line-height: 1; - padding: 1rem 2rem; - border: 0; - text-align: center; - transition: all $anim-fade-quick $anim-ease; + font-family: $font-secondary; + display: inline-flex; + align-items: center; + justify-content: center; + border: $border-width solid $color-btn-primary-border; + background: $color-brand-green; + color: $color-black; + line-height: 1; + padding: 1rem 2rem; + border: 0; + text-align: center; + transition: all $anim-fade-quick $anim-ease; - &:hover, - &:focus { - background: $color-btn-primary-bg-hover; - } + &:hover, + &:focus { + background: $color-btn-primary-bg-hover; + } } .c-btn--inverted { - background: none; - border: 1px solid $color-gray-50; - color: $color-gray-27; + background: none; + border: 1px solid $color-gray-50; + color: $color-gray-27; } .c-btn--small { - padding: 1rem; + padding: 1rem; } /* * Button icon */ .c-btn__icon { - width: 1rem; - height: 1rem; - fill: $color-btn-primary; - transition: fill $anim-fade-quick $anim-ease; + width: 1rem; + height: 1rem; + fill: $color-btn-primary; + transition: fill $anim-fade-quick $anim-ease; } diff --git a/packages/docs/src/scss/components/_demo-list.scss b/packages/docs/src/scss/components/_demo-list.scss index e6b4eaf29..f2098e0eb 100644 --- a/packages/docs/src/scss/components/_demo-list.scss +++ b/packages/docs/src/scss/components/_demo-list.scss @@ -1,10 +1,10 @@ .c-demo-list { - display: grid; - grid-column-gap: 1rem; - grid-row-gap: 2rem; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + display: grid; + grid-column-gap: 1rem; + grid-row-gap: 2rem; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } .c-header-demo-page { - padding-bottom: 2rem; + padding-bottom: 2rem; } diff --git a/packages/docs/src/scss/components/_field.scss b/packages/docs/src/scss/components/_field.scss index eb2d65b76..2173b7dbe 100644 --- a/packages/docs/src/scss/components/_field.scss +++ b/packages/docs/src/scss/components/_field.scss @@ -5,31 +5,31 @@ /** * 1) Consists of a label, form control, and an optional note about the field. */ - .c-field { - margin-bottom: $spacing-large; +.c-field { + margin-bottom: $spacing-large; } /** * Field label */ .c-field__label { - margin-bottom: 0.5rem; - font-size: $font-size-med; - font-weight: bold; + margin-bottom: 0.5rem; + font-size: $font-size-med; + font-weight: bold; } /** * Field body */ .c-field__body { - position: relative; + position: relative; } /** * Field note */ .c-field__note { - display: inline-block; - font-size: $font-size-sm; - color: $color-gray-50; -} \ No newline at end of file + display: inline-block; + font-size: $font-size-sm; + color: $color-gray-50; +} diff --git a/packages/docs/src/scss/components/_footer-nav.scss b/packages/docs/src/scss/components/_footer-nav.scss index e851d4c10..f5e8b38ec 100644 --- a/packages/docs/src/scss/components/_footer-nav.scss +++ b/packages/docs/src/scss/components/_footer-nav.scss @@ -6,16 +6,16 @@ * The nav inside the footer */ .c-footer-nav { - font-size: $font-size-sm-2; - margin-bottom: $spacing; + font-size: $font-size-sm-2; + margin-bottom: $spacing; - @media all and (min-width: $bp-med) { - display: flex; - } + @media all and (min-width: $bp-med) { + display: flex; + } } .c-footer-nav__item { - @media all and (min-width: $bp-med) { - margin-right: $spacing-large; - } + @media all and (min-width: $bp-med) { + margin-right: $spacing-large; + } } diff --git a/packages/docs/src/scss/components/_footer.scss b/packages/docs/src/scss/components/_footer.scss index e46bc7b03..d18b83bb4 100644 --- a/packages/docs/src/scss/components/_footer.scss +++ b/packages/docs/src/scss/components/_footer.scss @@ -6,17 +6,17 @@ * 1) Global block at the bottom of each page that contains a navigation and other information */ .c-footer { - padding: $spacing-large 0; + padding: $spacing-large 0; } /** * Footer note * 1) Small paragraph of text in the footer */ - .c-footer__note { - font-size: $font-size-sm; +.c-footer__note { + font-size: $font-size-sm; - a { - text-decoration: underline; - } -} \ No newline at end of file + a { + text-decoration: underline; + } +} diff --git a/packages/docs/src/scss/components/_header.scss b/packages/docs/src/scss/components/_header.scss index 0173fbe32..dce6e3eee 100644 --- a/packages/docs/src/scss/components/_header.scss +++ b/packages/docs/src/scss/components/_header.scss @@ -6,38 +6,38 @@ * Global block at the top of each page containing the navigation, logo, and other potential contents */ .c-header { - position: relative; - background: $color-gray-88; - color: $color-gray-27; - padding: $spacing; - @include hideScrollbar(); + position: relative; + background: $color-gray-88; + color: $color-gray-27; + padding: $spacing; + @include hideScrollbar(); - @media all and (min-width: $bp-large) { - padding: $spacing-large; - min-height: 100vh; - flex-direction: column; - position: fixed; - top: 0; - left: 0; - height: 100vh; - overflow: auto; - width: $l-sidebar-width; //Because fixed position - } + @media all and (min-width: $bp-large) { + padding: $spacing-large; + min-height: 100vh; + flex-direction: column; + position: fixed; + top: 0; + left: 0; + height: 100vh; + overflow: auto; + width: $l-sidebar-width; //Because fixed position + } } /** * Header inner */ .c-header__inner { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; - @media all and (min-width: $bp-large) { - justify-content: flex-start; - align-items: flex-start; - flex-direction: column; - } + @media all and (min-width: $bp-large) { + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; + } } /** @@ -45,23 +45,23 @@ * 1) Button used to toggle the navigation on/off on small screens */ .c-header__nav-btn { - margin-left: auto; + margin-left: auto; - // Pseudo / breakout element that enables clicking/tabbing outside of the menu to close it - &[aria-expanded="true"]::after { - position: fixed; - top: 0; - left: 0; + // Pseudo / breakout element that enables clicking/tabbing outside of the menu to close it + &[aria-expanded='true']::after { + position: fixed; + top: 0; + left: 0; - content: ""; + content: ''; - width: 100vw; - height: 100vh; - } + width: 100vw; + height: 100vh; + } - @media all and (min-width: $bp-large) { - display: none; - } + @media all and (min-width: $bp-large) { + display: none; + } } /** @@ -69,31 +69,31 @@ * 1) Contains the primary navigation and other possible patterns */ .c-header__nav-container { - display: none; + display: none; - @media all and (min-width: $bp-large) { - display: block; - } + @media all and (min-width: $bp-large) { + display: block; + } } /** * Active header nav container */ .c-header__nav-container.is-active { - display: block; - position: absolute; - background: $color-gray-88; - top: 100%; - left: 0; - width: 100%; - z-index: 5; - padding: $spacing; + display: block; + position: absolute; + background: $color-gray-88; + top: 100%; + left: 0; + width: 100%; + z-index: 5; + padding: $spacing; - @media all and (min-width: $bp-large) { - display: block; - position: static; - padding: 0; - margin-left: auto; - width: inherit; - } + @media all and (min-width: $bp-large) { + display: block; + position: static; + padding: 0; + margin-left: auto; + width: inherit; + } } diff --git a/packages/docs/src/scss/components/_heading-permalink.scss b/packages/docs/src/scss/components/_heading-permalink.scss index d7ce2690d..e96a1a1e1 100644 --- a/packages/docs/src/scss/components/_heading-permalink.scss +++ b/packages/docs/src/scss/components/_heading-permalink.scss @@ -7,32 +7,32 @@ */ .heading-permalink { - position: absolute; - top: -3px; - left: -20px; - display: block; - padding-right: 4px; + position: absolute; + top: -3px; + left: -20px; + display: block; + padding-right: 4px; - .c-text-passage & { - opacity: 0; - border-bottom: 0; - background: none; - transition: opacity 0.15s ease; + .c-text-passage & { + opacity: 0; + border-bottom: 0; + background: none; + transition: opacity 0.15s ease; - &:focus { - opacity: 1; - } - } + &:focus { + opacity: 1; + } + } - .c-text-passage h2:hover &, - .c-text-passage h2:focus &, - .c-text-passage h3:hover &, - .c-text-passage h3:focus & { - opacity: 1; - } + .c-text-passage h2:hover &, + .c-text-passage h2:focus &, + .c-text-passage h3:hover &, + .c-text-passage h3:focus & { + opacity: 1; + } } .heading-permalink__icon { - width: 16px; - height: 16px; + width: 16px; + height: 16px; } diff --git a/packages/docs/src/scss/components/_hero.scss b/packages/docs/src/scss/components/_hero.scss index 141aaa3a7..8936ef091 100644 --- a/packages/docs/src/scss/components/_hero.scss +++ b/packages/docs/src/scss/components/_hero.scss @@ -3,51 +3,51 @@ \*------------------------------------*/ .c-hero { - background-color: $color-brand-purple-light; - color: $color-black; - padding: 2rem 0; - margin-bottom: 2rem; + background-color: $color-brand-purple-light; + color: $color-black; + padding: 2rem 0; + margin-bottom: 2rem; } .c-hero__inner { - display: grid; - align-items: center; - - @media all and (min-width: $bp-large) { - min-height: 60vh; - padding-top: 2rem; - padding-bottom: 2rem; - } + display: grid; + align-items: center; + + @media all and (min-width: $bp-large) { + min-height: 60vh; + padding-top: 2rem; + padding-bottom: 2rem; + } } .c-hero__body { - max-width: 47rem; + max-width: 47rem; } .c-hero__title { - color: $color-brand-purple-dark; - font-size: $font-size-large-2; - line-height: 1; - @include textShadowEffect(); - margin-bottom: 1rem; - - @media all and (min-width: $bp-large) { - font-size: 4.5rem; - } - - @media all and (min-width: $bp-xl) { - font-size: 6rem; - } + color: $color-brand-purple-dark; + font-size: $font-size-large-2; + line-height: 1; + @include textShadowEffect(); + margin-bottom: 1rem; + + @media all and (min-width: $bp-large) { + font-size: 4.5rem; + } + + @media all and (min-width: $bp-xl) { + font-size: 6rem; + } } .c-hero__description { - font-weight: bold; + font-weight: bold; } .c-hero__instructions a { - text-decoration: underline; + text-decoration: underline; } .c-hero__code { - display: inline-block; + display: inline-block; } diff --git a/packages/docs/src/scss/components/_icon.scss b/packages/docs/src/scss/components/_icon.scss index b94380c52..991957a1f 100644 --- a/packages/docs/src/scss/components/_icon.scss +++ b/packages/docs/src/scss/components/_icon.scss @@ -6,6 +6,6 @@ * 1) Small image that represents functionality */ .c-icon { - height: 16px; - width: 16px; + height: 16px; + width: 16px; } diff --git a/packages/docs/src/scss/components/_logo.scss b/packages/docs/src/scss/components/_logo.scss index 38381483f..ec70ed028 100644 --- a/packages/docs/src/scss/components/_logo.scss +++ b/packages/docs/src/scss/components/_logo.scss @@ -6,31 +6,31 @@ * Branding image or text of the site */ .c-logo { - @media all and (min-width: $bp-med) { - margin-bottom: $spacing-large; - } + @media all and (min-width: $bp-med) { + margin-bottom: $spacing-large; + } } /** * Logo link */ .c-logo__link { - display: flex; - align-items: center; + display: flex; + align-items: center; - &:focus { - @include focusInverted(); - } + &:focus { + @include focusInverted(); + } } /** * Logo image */ .c-logo__img { - display: block; - max-width: 2.4rem; - margin-right: 0.5rem; - animation: rotate 10s linear infinite; + display: block; + max-width: 2.4rem; + margin-right: 0.5rem; + animation: rotate 10s linear infinite; } /** @@ -38,33 +38,33 @@ * 1) contains the logo text and meta info */ .c-logo__body { - position: relative; + position: relative; } /** * Logo text */ .c-logo__text { - text-transform: lowercase; - font-weight: bold; - color: $color-white; + text-transform: lowercase; + font-weight: bold; + color: $color-white; } .c-logo__meta { - display: block; - padding-top: 0.2rem; - font-size: $font-size-sm; - color: $color-gray-27; - font-weight: 500; - position: absolute; - top: 100%; + display: block; + padding-top: 0.2rem; + font-size: $font-size-sm; + color: $color-gray-27; + font-weight: 500; + position: absolute; + top: 100%; } @keyframes rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } diff --git a/packages/docs/src/scss/components/_page-header.scss b/packages/docs/src/scss/components/_page-header.scss index 822368f90..83adb586b 100644 --- a/packages/docs/src/scss/components/_page-header.scss +++ b/packages/docs/src/scss/components/_page-header.scss @@ -5,26 +5,26 @@ * 1) Container that consists of of a page header title and description */ .c-page-header { - margin-bottom: $spacing-large; + margin-bottom: $spacing-large; } .c-page-header__kicker { - color: $color-gray-50; - margin-bottom: 0.5rem; + color: $color-gray-50; + margin-bottom: 0.5rem; } /** * Page header title */ .c-page-header__title { - margin-bottom: $spacing; - @include textShadowEffect(); + margin-bottom: $spacing; + @include textShadowEffect(); } /** * Page description */ .c-page-header__desc { - margin-top: 1rem; - margin-bottom: 2rem; + margin-top: 1rem; + margin-bottom: 2rem; } diff --git a/packages/docs/src/scss/components/_primary-nav.scss b/packages/docs/src/scss/components/_primary-nav.scss index a7d4e43de..79918ce81 100644 --- a/packages/docs/src/scss/components/_primary-nav.scss +++ b/packages/docs/src/scss/components/_primary-nav.scss @@ -6,37 +6,37 @@ * Primary navigation existing in the header and maybe the footer */ .c-primary-nav { - margin-left: auto; + margin-left: auto; } /** * Primary navigation list */ .c-primary-nav__list { - display: flex; + display: flex; } /** * Primary navigation item */ .c-primary-nav__item { - margin-right: 1rem; + margin-right: 1rem; } /** * Primary navigation link */ .c-primary-nav__link { - display: block; - padding: 0.5rem 0; - transition: color 0.2s ease; + display: block; + padding: 0.5rem 0; + transition: color 0.2s ease; - &:hover { - color: $color-white; - } + &:hover { + color: $color-white; + } - &:focus { - color: $color-white; - font-weight: bold; - } + &:focus { + color: $color-white; + font-weight: bold; + } } diff --git a/packages/docs/src/scss/components/_stacked-block-list.scss b/packages/docs/src/scss/components/_stacked-block-list.scss index 885246efd..d8aa3a6a4 100644 --- a/packages/docs/src/scss/components/_stacked-block-list.scss +++ b/packages/docs/src/scss/components/_stacked-block-list.scss @@ -6,7 +6,7 @@ * Stacked block list item */ .c-stacked-block-list__item { - border-bottom: 1px solid $color-gray-27; - padding-bottom: 1rem; - margin-bottom: 2rem; + border-bottom: 1px solid $color-gray-27; + padding-bottom: 1rem; + margin-bottom: 2rem; } diff --git a/packages/docs/src/scss/components/_stacked-block.scss b/packages/docs/src/scss/components/_stacked-block.scss index 70d277eb4..8096b2fcd 100644 --- a/packages/docs/src/scss/components/_stacked-block.scss +++ b/packages/docs/src/scss/components/_stacked-block.scss @@ -6,14 +6,14 @@ * Stacked block list item */ .c-stacked-block__title { - line-height: 1.2; - margin-bottom: 0.25rem; + line-height: 1.2; + margin-bottom: 0.25rem; } /** * Stacked block list item */ .c-stacked-block__kicker { - font-size: $font-size-sm-2; - color: $color-gray-50; + font-size: $font-size-sm-2; + color: $color-gray-50; } diff --git a/packages/docs/src/scss/components/_table.scss b/packages/docs/src/scss/components/_table.scss index 7e2b140d8..5b643fc56 100644 --- a/packages/docs/src/scss/components/_table.scss +++ b/packages/docs/src/scss/components/_table.scss @@ -6,48 +6,47 @@ * 1) Data Table */ .c-table { - margin-bottom: 1rem; - min-width: 600px; /* 2 */ + margin-bottom: 1rem; + min-width: 600px; /* 2 */ } /** * Table Header */ .c-table__header { - background: $color-gray-07; + background: $color-gray-07; } /** * Table Header Cell */ .c-table__header-cell { - padding: 0.8rem; + padding: 0.8rem; } /** * Table Row */ .c-table__row { - border-bottom: 1px solid $color-gray-07; + border-bottom: 1px solid $color-gray-07; } /** * Table Cell */ .c-table__cell { - padding: 1.6rem 0.8rem; + padding: 1.6rem 0.8rem; } /** * Table Footer */ .c-table__footer { - } /** * Table Footer Cell */ .c-table__footer-cell { - padding: 0.8rem; + padding: 0.8rem; } diff --git a/packages/docs/src/scss/components/_text-passage.scss b/packages/docs/src/scss/components/_text-passage.scss index 9f5fa2702..ef93eb93a 100644 --- a/packages/docs/src/scss/components/_text-passage.scss +++ b/packages/docs/src/scss/components/_text-passage.scss @@ -6,105 +6,105 @@ * 1) A passage of text, including various components (i.e. article, blog post) */ .c-text-passage { - p { - margin-bottom: $spacing-large; - } + p { + margin-bottom: $spacing-large; + } - /** + /** * Link within the text passage */ - a { - border-bottom: 1px solid $color-black; - background: $color-brand-green-light; + a { + border-bottom: 1px solid $color-black; + background: $color-brand-green-light; - &:hover, - &:focus { - color: $color-black; - border-bottom-color: $color-brand-green; - } - } + &:hover, + &:focus { + color: $color-black; + border-bottom-color: $color-brand-green; + } + } - /** + /** * Blockquote within text passage */ - blockquote { - padding-left: 0.8rem; - border-left: 3px solid $color-gray-73; - color: $color-gray-50; - font-size: 1rem; - } + blockquote { + padding-left: 0.8rem; + border-left: 3px solid $color-gray-73; + color: $color-gray-50; + font-size: 1rem; + } - /** + /** * First-level heading within text passage */ - h1 { - margin-bottom: $spacing; - } + h1 { + margin-bottom: $spacing; + } - /** + /** * Second-level heading within text passage */ - h2 { - margin: 3rem 0 $spacing; - color: $color-gray-73; - } + h2 { + margin: 3rem 0 $spacing; + color: $color-gray-73; + } - /** + /** * Third-level heading within text passage */ - h3 { - margin: 3rem 0 $spacing; - } + h3 { + margin: 3rem 0 $spacing; + } - /** + /** * Fourth-level heading within text passage */ - h4 { - margin: 3rem 0 $spacing; - } + h4 { + margin: 3rem 0 $spacing; + } - /** + /** * Fifth-level heading within text passage */ - h5 { - margin: 3rem 0 $spacing; - } + h5 { + margin: 3rem 0 $spacing; + } - /** + /** * Sixth-level heading within text passage */ - h6 { - margin: 3rem 0 $spacing; - } + h6 { + margin: 3rem 0 $spacing; + } - /** + /** * Unordered list within text passage */ - ul { - list-style: disc; - margin-left: 1.25rem; - margin-bottom: $spacing-large; + ul { + list-style: disc; + margin-left: 1.25rem; + margin-bottom: $spacing-large; - li:last-child { - margin-bottom: 0; - } - } + li:last-child { + margin-bottom: 0; + } + } - /** + /** * Ordered list within text passage */ - ol { - list-style: decimal; - margin-left: $spacing; - margin-bottom: $spacing-large; + ol { + list-style: decimal; + margin-left: $spacing; + margin-bottom: $spacing-large; - li:last-child { - margin-bottom: 0; - } - } + li:last-child { + margin-bottom: 0; + } + } - li { - margin-bottom: $spacing; - line-height: 1.6; - } + li { + margin-bottom: $spacing; + line-height: 1.6; + } } diff --git a/packages/docs/src/scss/components/_tile-list.scss b/packages/docs/src/scss/components/_tile-list.scss index d5b90775d..548134685 100644 --- a/packages/docs/src/scss/components/_tile-list.scss +++ b/packages/docs/src/scss/components/_tile-list.scss @@ -3,29 +3,29 @@ \*------------------------------------*/ .c-tile-list { - display: grid; - grid-gap: $spacing-large; - margin-bottom: $spacing-xl; + display: grid; + grid-gap: $spacing-large; + margin-bottom: $spacing-xl; - @media all and (min-width: $bp-xl) { - grid-template-columns: 1fr 1fr; - } + @media all and (min-width: $bp-xl) { + grid-template-columns: 1fr 1fr; + } } .c-tile-list__item:nth-child(1) { - @media all and (min-width: $bp-xl) { - grid-row: span 2; - } + @media all and (min-width: $bp-xl) { + grid-row: span 2; + } } .c-tile-list__item:nth-child(2) { - @media all and (min-width: $bp-xl) { - grid-column: 2/3; - } + @media all and (min-width: $bp-xl) { + grid-column: 2/3; + } } .c-tile-list__item:nth-child(3) { - @media all and (min-width: $bp-xl) { - grid-row: 2; - grid-column: 2/3; - } + @media all and (min-width: $bp-xl) { + grid-row: 2; + grid-column: 2/3; + } } diff --git a/packages/docs/src/scss/components/_tile.scss b/packages/docs/src/scss/components/_tile.scss index 068965095..e14c24f3d 100644 --- a/packages/docs/src/scss/components/_tile.scss +++ b/packages/docs/src/scss/components/_tile.scss @@ -3,73 +3,73 @@ \*------------------------------------*/ .c-tile { - position: relative; - height: 100%; - display: flex; - flex-direction: column; + position: relative; + height: 100%; + display: flex; + flex-direction: column; } .c-tile__body { - padding: 2rem; - position: relative; - z-index: 1; // TODO: Evaluate whether this declaration is (still) necessary - flex: 1; + padding: 2rem; + position: relative; + z-index: 1; // TODO: Evaluate whether this declaration is (still) necessary + flex: 1; - .c-tile--green & { - color: $color-brand-green-dark; - background: $color-brand-green-light; - } + .c-tile--green & { + color: $color-brand-green-dark; + background: $color-brand-green-light; + } - .c-tile--orange & { - color: $color-brand-orange-dark; - background: $color-brand-orange-light; - } + .c-tile--orange & { + color: $color-brand-orange-dark; + background: $color-brand-orange-light; + } - .c-tile--purple & { - color: $color-brand-purple-dark; - background: $color-brand-purple-light; - } + .c-tile--purple & { + color: $color-brand-purple-dark; + background: $color-brand-purple-light; + } } .c-tile__shadow { - width: 100%; - height: 100%; - position: absolute; - right: -10px; - bottom: -10px; - z-index: 0; // TODO: Evaluate whether this declaration is (still) necessary - @include stripedBoxShadow('green'); + width: 100%; + height: 100%; + position: absolute; + right: -10px; + bottom: -10px; + z-index: 0; // TODO: Evaluate whether this declaration is (still) necessary + @include stripedBoxShadow('green'); - .c-tile--orange & { - @include stripedBoxShadow('orange'); - } + .c-tile--orange & { + @include stripedBoxShadow('orange'); + } - .c-tile--purple & { - @include stripedBoxShadow('purple'); - } + .c-tile--purple & { + @include stripedBoxShadow('purple'); + } } .c-tile__title { - color: inherit; + color: inherit; } .c-tile__link { - color: inherit; + color: inherit; - &:hover, - &:focus { - color: inherit; - text-decoration: underline; - } + &:hover, + &:focus { + color: inherit; + text-decoration: underline; + } } .c-tile__description a { - color: inherit; - text-decoration: underline; + color: inherit; + text-decoration: underline; - &:hover, - &:focus { - color: inherit; - text-decoration: none; - } + &:hover, + &:focus { + color: inherit; + text-decoration: none; + } } diff --git a/packages/docs/src/scss/components/_tree-nav.scss b/packages/docs/src/scss/components/_tree-nav.scss index 15aea9570..754852c6a 100644 --- a/packages/docs/src/scss/components/_tree-nav.scss +++ b/packages/docs/src/scss/components/_tree-nav.scss @@ -10,86 +10,86 @@ } .c-tree-nav__link { - display: flex; - align-items: center; - margin-bottom: 1.2rem; - color: inherit; - font-weight: $font-weight-bold; - transition: color 0.2s ease; - - &:hover, - &.is-active { - color: $color-white; - } - - &:focus { - color: $color-white; - @include focusInverted(); - } + display: flex; + align-items: center; + margin-bottom: 1.2rem; + color: inherit; + font-weight: $font-weight-bold; + transition: color 0.2s ease; + + &:hover, + &.is-active { + color: $color-white; + } + + &:focus { + color: $color-white; + @include focusInverted(); + } } .c-tree-nav__link--is-active { - color: $color-white; - font-weight: bold; + color: $color-white; + font-weight: bold; } /** * Subnav */ .c-tree-nav__subnav { - padding-left: 1rem; - border-left: 1px solid $color-gray-73; - margin-bottom: 1rem; - font-size: $font-size-med; - display: none; - - .c-tree-nav__item.is-active & { - display: block; - } + padding-left: 1rem; + border-left: 1px solid $color-gray-73; + margin-bottom: 1rem; + font-size: $font-size-med; + display: none; + + .c-tree-nav__item.is-active & { + display: block; + } } .c-tree-nav__icon { - transition: transform $anim-fade-quick $anim-ease; + transition: transform $anim-fade-quick $anim-ease; - .c-tree-nav__item.is-active & { - transform: rotate(180deg); - } + .c-tree-nav__item.is-active & { + transform: rotate(180deg); + } } .c-tree-nav__subnav-title { - font-weight: bold; - display: block; - margin-bottom: 1rem; + font-weight: bold; + display: block; + margin-bottom: 1rem; } .c-tree-nav__subnav-link { - color: inherit; - display: block; - margin-bottom: 1rem; - - &:hover, - &:focus, - &.is-active { - color: $color-white; - } - - &:focus { - @include focusInverted(); - } + color: inherit; + display: block; + margin-bottom: 1rem; + + &:hover, + &:focus, + &.is-active { + color: $color-white; + } + + &:focus { + @include focusInverted(); + } } .c-tree-nav__link--btn { - background: transparent; - border: 0; - padding: 0; - font-size: inherit; - - svg { - fill: currentColor; - } + background: transparent; + border: 0; + padding: 0; + font-size: inherit; + + svg { + fill: currentColor; + } } .c-tree-nav__subnav-link--heading { - font-weight: bold; - color: $color-white; + font-weight: bold; + color: $color-white; } diff --git a/packages/docs/src/scss/layout/_layout.scss b/packages/docs/src/scss/layout/_layout.scss index a6954f67a..57d4527ca 100644 --- a/packages/docs/src/scss/layout/_layout.scss +++ b/packages/docs/src/scss/layout/_layout.scss @@ -8,13 +8,13 @@ * and centers the container */ .l-container { - max-width: $l-max-width; - margin: 0 auto; - padding: 0 2rem; + max-width: $l-max-width; + margin: 0 auto; + padding: 0 2rem; - @media all and (min-width: $bp-large) { - padding: 0 4rem; - } + @media all and (min-width: $bp-large) { + padding: 0 4rem; + } } /** @@ -24,7 +24,7 @@ * kinds of displays */ .l-linelength-container { - max-width: $l-linelength-width; + max-width: $l-linelength-width; } /*------------------------------------*\ @@ -35,8 +35,8 @@ * Grid Container */ .l-grid { - @media all and (min-width: $bp-large) { - display: grid; - grid-template-columns: $l-sidebar-width 1fr; - } + @media all and (min-width: $bp-large) { + display: grid; + grid-template-columns: $l-sidebar-width 1fr; + } } diff --git a/packages/docs/src/scss/mixins/_dark-mode.scss b/packages/docs/src/scss/mixins/_dark-mode.scss index 99e913d2d..880638322 100644 --- a/packages/docs/src/scss/mixins/_dark-mode.scss +++ b/packages/docs/src/scss/mixins/_dark-mode.scss @@ -5,17 +5,17 @@ * properties in a way that supports the theme toggle web component */ @mixin dark-mode() { - @media (prefers-color-scheme: dark) { - :root { - --color-mode: 'dark'; - } + @media (prefers-color-scheme: dark) { + :root { + --color-mode: 'dark'; + } - :root:not([data-user-color-scheme]) { - @content; - } - } + :root:not([data-user-color-scheme]) { + @content; + } + } - [data-user-color-scheme='dark'] { - @content; - } + [data-user-color-scheme='dark'] { + @content; + } } diff --git a/packages/docs/src/scss/utilities/_visibility.scss b/packages/docs/src/scss/utilities/_visibility.scss index ab9998f07..376fae5ff 100644 --- a/packages/docs/src/scss/utilities/_visibility.scss +++ b/packages/docs/src/scss/utilities/_visibility.scss @@ -7,8 +7,8 @@ * 1) Completely remove from the flow and screen readers. */ .u-is-hidden { - display: none !important; - visibility: hidden !important; + display: none !important; + visibility: hidden !important; } /** @@ -16,11 +16,11 @@ * 1) Completely remove from the flow but leave available to screen readers. */ .u-is-vishidden { - position: absolute !important; - overflow: hidden; - width: 1px; - height: 1px; - padding: 0; - border: 0; - clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + overflow: hidden; + width: 1px; + height: 1px; + padding: 0; + border: 0; + clip: rect(1px, 1px, 1px, 1px); } diff --git a/packages/docs/src/scss/vendor/_prism.scss b/packages/docs/src/scss/vendor/_prism.scss index 1d63832a8..3b33b79cc 100644 --- a/packages/docs/src/scss/vendor/_prism.scss +++ b/packages/docs/src/scss/vendor/_prism.scss @@ -8,45 +8,45 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli code[class*='language-'], pre[class*='language-'] { - color: #ccc; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: $font-size-med; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - // white-space: pre-wrap; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + color: #ccc; + background: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: $font-size-med; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + // white-space: pre-wrap; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } /* Code blocks */ pre[class*='language-'] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; + padding: 1em; + margin: 0.5em 0; + overflow: auto; } :not(pre) > code[class*='language-'], pre[class*='language-'] { - background: #2d2d2d; + background: #2d2d2d; } /* Inline code */ :not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; } .token.comment, @@ -54,35 +54,35 @@ pre[class*='language-'] { .token.prolog, .token.doctype, .token.cdata { - color: #999; + color: #999; } .token.punctuation { - color: #ccc; + color: #ccc; } .token.tag, .token.attr-name, .token.namespace, .token.deleted { - color: #e2777a; + color: #e2777a; } .token.function-name { - color: #6196cc; + color: #6196cc; } .token.boolean, .token.number, .token.function { - color: #f08d49; + color: #f08d49; } .token.property, .token.class-name, .token.constant, .token.symbol { - color: #f8c555; + color: #f8c555; } .token.selector, @@ -90,7 +90,7 @@ pre[class*='language-'] { .token.atrule, .token.keyword, .token.builtin { - color: #cc99cd; + color: #cc99cd; } .token.string, @@ -98,27 +98,27 @@ pre[class*='language-'] { .token.attr-value, .token.regex, .token.variable { - color: #7ec699; + color: #7ec699; } .token.operator, .token.entity, .token.url { - color: #67cdcc; + color: #67cdcc; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } .token.inserted { - color: green; + color: green; } diff --git a/packages/docs/src/transforms/html-min-transform.js b/packages/docs/src/transforms/html-min-transform.js index f7ab630b4..9b9432d39 100644 --- a/packages/docs/src/transforms/html-min-transform.js +++ b/packages/docs/src/transforms/html-min-transform.js @@ -1,14 +1,14 @@ const htmlmin = require('html-minifier'); module.exports = function htmlMinTransform(value, outputPath) { - if (outputPath.indexOf('.html') > -1) { - const minified = htmlmin.minify(value, { - useShortDoctype: true, - removeComments: true, - collapseWhitespace: true, - minifyCSS: true, - }); - return minified; - } - return value; + if (outputPath.indexOf('.html') > -1) { + const minified = htmlmin.minify(value, { + useShortDoctype: true, + removeComments: true, + collapseWhitespace: true, + minifyCSS: true, + }); + return minified; + } + return value; }; diff --git a/packages/docs/src/transforms/parse-transform.js b/packages/docs/src/transforms/parse-transform.js index 3451075cd..3cc0bf6d7 100644 --- a/packages/docs/src/transforms/parse-transform.js +++ b/packages/docs/src/transforms/parse-transform.js @@ -4,75 +4,75 @@ const minify = require('../utils/minify.js'); const slugify = require('slugify'); module.exports = function (value, outputPath) { - if (outputPath.endsWith('.html')) { - const DOM = new JSDOM(value, { - resources: 'usable', - }); - - const document = DOM.window.document; - const articleImages = [...document.querySelectorAll('main article img')]; - const articleHeadings = [ - ...document.querySelectorAll('main article h2, main article h3'), - ]; - const articleEmbeds = [...document.querySelectorAll('main article iframe')]; - - if (articleImages.length) { - articleImages.forEach((image) => { - image.setAttribute('loading', 'lazy'); - - // If an image has a title it means that the user added a caption - // so replace the image with a figure containing that image and a caption - if (image.hasAttribute('title')) { - const figure = document.createElement('figure'); - const figCaption = document.createElement('figcaption'); - - figCaption.innerHTML = image.getAttribute('title'); - - image.removeAttribute('title'); - - figure.appendChild(image.cloneNode(true)); - figure.appendChild(figCaption); - - image.replaceWith(figure); - } - }); - } - - if (articleHeadings.length) { - // Loop each heading and add a little anchor and an ID to each one - articleHeadings.forEach((heading) => { - const headingSlug = slugify(heading.textContent.toLowerCase()); - const anchor = document.createElement('a'); - - anchor.setAttribute('href', `#heading-${headingSlug}`); - anchor.classList.add('heading-permalink'); - anchor.innerHTML = minify(` + if (outputPath.endsWith('.html')) { + const DOM = new JSDOM(value, { + resources: 'usable', + }); + + const document = DOM.window.document; + const articleImages = [...document.querySelectorAll('main article img')]; + const articleHeadings = [ + ...document.querySelectorAll('main article h2, main article h3'), + ]; + const articleEmbeds = [...document.querySelectorAll('main article iframe')]; + + if (articleImages.length) { + articleImages.forEach((image) => { + image.setAttribute('loading', 'lazy'); + + // If an image has a title it means that the user added a caption + // so replace the image with a figure containing that image and a caption + if (image.hasAttribute('title')) { + const figure = document.createElement('figure'); + const figCaption = document.createElement('figcaption'); + + figCaption.innerHTML = image.getAttribute('title'); + + image.removeAttribute('title'); + + figure.appendChild(image.cloneNode(true)); + figure.appendChild(figCaption); + + image.replaceWith(figure); + } + }); + } + + if (articleHeadings.length) { + // Loop each heading and add a little anchor and an ID to each one + articleHeadings.forEach((heading) => { + const headingSlug = slugify(heading.textContent.toLowerCase()); + const anchor = document.createElement('a'); + + anchor.setAttribute('href', `#heading-${headingSlug}`); + anchor.classList.add('heading-permalink'); + anchor.innerHTML = minify(` permalink `); - heading.setAttribute('id', `heading-${headingSlug}`); - heading.appendChild(anchor); - }); - } + heading.setAttribute('id', `heading-${headingSlug}`); + heading.appendChild(anchor); + }); + } - // Look for videos are wrap them in a container element - if (articleEmbeds.length) { - articleEmbeds.forEach((embed) => { - if (embed.hasAttribute('allowfullscreen')) { - const player = document.createElement('div'); + // Look for videos are wrap them in a container element + if (articleEmbeds.length) { + articleEmbeds.forEach((embed) => { + if (embed.hasAttribute('allowfullscreen')) { + const player = document.createElement('div'); - player.classList.add('video-player'); + player.classList.add('video-player'); - player.appendChild(embed.cloneNode(true)); + player.appendChild(embed.cloneNode(true)); - embed.replaceWith(player); - } - }); - } + embed.replaceWith(player); + } + }); + } - return '\r\n' + document.documentElement.outerHTML; - } - return value; + return '\r\n' + document.documentElement.outerHTML; + } + return value; }; diff --git a/packages/docs/src/utils/minify.js b/packages/docs/src/utils/minify.js index 19248c5d8..cb20f3609 100644 --- a/packages/docs/src/utils/minify.js +++ b/packages/docs/src/utils/minify.js @@ -1,3 +1,3 @@ module.exports = function minify(input) { - return input.replace(/\s{2,}/g, '').replace(/\'/g, '"'); + return input.replace(/\s{2,}/g, '').replace(/\'/g, '"'); }; diff --git a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css index b3cd246df..7c3f99fa0 100644 --- a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css +++ b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css @@ -155,7 +155,10 @@ * FPO block within two column fixed layout within secondary section * 1) Width expands entire container at small screens */ -.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { +.sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { width: 100%; /* 1 */ } @@ -166,7 +169,10 @@ * 2) Set width = width of vertical header */ @media all and (min-width: 70em) { - .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { width: 20rem; /* 1 */ height: 100vh; @@ -191,7 +197,9 @@ * 3) Float this left to get layout sections side by side within PL "View All" section */ @media all and (min-width: 70em) { - .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary { position: absolute; /* 1 */ height: inherit; @@ -204,7 +212,10 @@ * Fpo block within pattern example, two column fixed, and secondary section * 1) Make fpo block width of the container on small screens */ -.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { +.sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { width: 100%; /* 1 */ } @@ -215,7 +226,10 @@ * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page */ @media all and (min-width: 70em) { - .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { width: 20rem; /* 1 */ height: inherit; @@ -232,7 +246,10 @@ /** * Add height of fpo block to equal height of main to help with scrolling main window/fixed sidebar effect. */ -.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main .fpo-block { +.sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__main + .fpo-block { height: 30rem; margin-bottom: 0; } diff --git a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss index 54ba44764..5a2b50d53 100644 --- a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss +++ b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss @@ -4,110 +4,107 @@ * These styles will not be your production CSS. */ #sg-patterns { - -webkit-box-sizing: border-box !important; - box-sizing: border-box !important; - max-width: 100%; - padding: 0 1rem; + -webkit-box-sizing: border-box !important; + box-sizing: border-box !important; + max-width: 100%; + padding: 0 1rem; } .demo-animate { - background: #ddd; - padding: 1em; - margin-bottom: 1em; - text-align: center; - border-radius: 8px; - cursor: pointer; + background: #ddd; + padding: 1em; + margin-bottom: 1em; + text-align: center; + border-radius: 8px; + cursor: pointer; } .sg-colors { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - list-style: none !important; - padding: 0 !important; - margin: 0 !important; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + list-style: none !important; + padding: 0 !important; + margin: 0 !important; } @supports (display: grid) { - .sg-colors { - display: grid; - grid-gap: 10px; - grid-template-columns: repeat( - auto-fill, - minmax(180px, 1fr) - ); - } + .sg-colors { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + } } .sg-colors li { - -webkit-box-flex: 1; - -ms-flex: auto; - flex: auto; - padding: 0.3em; - margin: 0 0.5em 0.5em 0; - min-width: 5em; - max-width: 14em; - border: 1px solid #ddd; - border-radius: 8px; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + padding: 0.3em; + margin: 0 0.5em 0.5em 0; + min-width: 5em; + max-width: 14em; + border: 1px solid #ddd; + border-radius: 8px; } .sg-swatch { - display: block; - height: 4em; - margin-bottom: 0.3em; - border-radius: 5px; + display: block; + height: 4em; + margin-bottom: 0.3em; + border-radius: 5px; } .sg-label { - font-size: 90%; - line-height: 1; + font-size: 90%; + line-height: 1; } /** * Icon grid */ .icon-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } /** * Icon grid item */ .icon-grid__item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 5.5rem; - height: 5.5rem; - background: #f5f5f5; - border: 1px solid #cccccd; - border-radius: 8px; - padding: 0.5rem; - margin: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 5.5rem; + height: 5.5rem; + background: #f5f5f5; + border: 1px solid #cccccd; + border-radius: 8px; + padding: 0.5rem; + margin: 0.5rem; } /** * Icon grid item title */ .icon-grid__item h3 { - font-size: 0.6rem; - margin-top: 1rem; + font-size: 0.6rem; + margin-top: 1rem; } /** * Icon grid item svg */ .icon-grid__item svg { - height: 16px; - width: 16px; + height: 16px; + width: 16px; } .sg-pattern-example > footer > p { - display: none; + display: none; } /** @@ -115,44 +112,44 @@ * 1) Used for placeholder blocks for layouts */ .fpo { - padding: 1rem; - background: #f5f5f5; - text-align: center; - font-weight: bold; - margin-bottom: 0.5rem; + padding: 1rem; + background: #f5f5f5; + text-align: center; + font-weight: bold; + margin-bottom: 0.5rem; } /** * Dark for placeholder only block */ .fpo-block--dark { - background: #808080; + background: #808080; } .sg-pattern-example small { - font-size: 10px; - display: block; - margin-top: 0.5rem; + font-size: 10px; + display: block; + margin-top: 0.5rem; } .sg-pattern-example small code { - font-size: inherit; - padding: 0.2em; + font-size: inherit; + padding: 0.2em; } /** * Add height and overflow to two column fixed layout to show functionality only in style-guide example. */ .sg-pattern-example .l-page-layout--two-column-fixed { - height: 10rem; - overflow: auto; + height: 10rem; + overflow: auto; } /** * Add min-height of 0 to two column fixed to help with showing functionality only in style-guide example. */ .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { - min-height: 0; + min-height: 0; } /** @@ -160,10 +157,10 @@ * 1) Width expands entire container at small screens */ .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 100%; /* 1 */ + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 100%; /* 1 */ } /** @@ -172,14 +169,14 @@ * 2) Set width = width of vertical header */ @media all and (min-width: 70em) { - .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 20rem; /* 1 */ - height: 100vh; /* 2 */ - margin-bottom: 0; - } + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 20rem; /* 1 */ + height: 100vh; /* 2 */ + margin-bottom: 0; + } } /** @@ -188,8 +185,8 @@ * 2) Set overflow to auto so the secondary section stays fixed while the main section scrolls */ .sg-pattern-example .l-page-layout--two-column-fixed { - height: 18.3rem; - overflow: auto; + height: 18.3rem; + overflow: auto; } /** @@ -200,13 +197,13 @@ */ @media all and (min-width: 70em) { - .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary { - position: absolute; /* 1 */ - height: inherit; /* 2 */ - float: left; /* 3 */ - } + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary { + position: absolute; /* 1 */ + height: inherit; /* 2 */ + float: left; /* 3 */ + } } /** @@ -214,10 +211,10 @@ * 1) Make fpo block width of the container on small screens */ .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 100%; /* 1 */ + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 100%; /* 1 */ } /** @@ -226,54 +223,54 @@ * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page */ @media all and (min-width: 70em) { - .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 20rem; /* 1 */ - height: inherit; /* 2 */ - } + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 20rem; /* 1 */ + height: inherit; /* 2 */ + } } /** * Add height of main to get appearance of side bar staying fixed while main window scrolls. */ .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main { - height: 30rem; + height: 30rem; } /** * Add height of fpo block to equal height of main to help with scrolling main window/fixed sidebar effect. */ .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__main - .fpo-block { - height: 30rem; - margin-bottom: 0; + .l-page-layout--two-column-fixed + .l-page-layout__main + .fpo-block { + height: 30rem; + margin-bottom: 0; } /** * Vertical header in pattern example at large screens */ @media all and (min-width: 70em) { - .sg-pattern-example .c-header--vertical { - max-width: 20rem; - } + .sg-pattern-example .c-header--vertical { + max-width: 20rem; + } } #molecules-footer-nav .sg-pattern-example { - background: #041544; + background: #041544; } .sg-pattern .c-hero { - margin: 0; + margin: 0; } .sg-pattern .c-promo-block { - margin: 0; + margin: 0; } // Annotations -@import "../../../uikit-workshop/src/sass/scss/01-abstracts/variables"; -@import "../../../uikit-workshop/src/sass/scss/04-components/annotations"; +@import '../../../uikit-workshop/src/sass/scss/01-abstracts/variables'; +@import '../../../uikit-workshop/src/sass/scss/04-components/annotations'; diff --git a/packages/starterkit-handlebars-demo/dist/css/scss/components/_progress-tracker.scss b/packages/starterkit-handlebars-demo/dist/css/scss/components/_progress-tracker.scss index 5020d9e32..f3a4f7637 100644 --- a/packages/starterkit-handlebars-demo/dist/css/scss/components/_progress-tracker.scss +++ b/packages/starterkit-handlebars-demo/dist/css/scss/components/_progress-tracker.scss @@ -22,7 +22,7 @@ width: 5rem; /* Don't display the horizontal line on the last item number */ - &:last-child .c-progress-tracker__number:before { + &:last-child .c-progress-tracker__number::before { display: none; } } @@ -56,7 +56,7 @@ border-color: $color-brand-blue; } - &:before { + &::before { content: " "; display: block; width: 4rem; diff --git a/packages/starterkit-handlebars-demo/dist/css/scss/components/_promo-block.scss b/packages/starterkit-handlebars-demo/dist/css/scss/components/_promo-block.scss index ca564e49c..59c76f80e 100644 --- a/packages/starterkit-handlebars-demo/dist/css/scss/components/_promo-block.scss +++ b/packages/starterkit-handlebars-demo/dist/css/scss/components/_promo-block.scss @@ -18,7 +18,7 @@ position: relative; z-index: 0; - &:before { + &::before { content: ""; background: linear-gradient( to left, diff --git a/packages/starterkit-handlebars-demo/dist/css/scss/components/_section.scss b/packages/starterkit-handlebars-demo/dist/css/scss/components/_section.scss index 882c3d987..65465e741 100644 --- a/packages/starterkit-handlebars-demo/dist/css/scss/components/_section.scss +++ b/packages/starterkit-handlebars-demo/dist/css/scss/components/_section.scss @@ -10,7 +10,7 @@ position: relative; margin-bottom: 1rem; - &:after { + &::after { content: ''; display: block; flex: 1; diff --git a/packages/starterkit-handlebars-demo/dist/css/style.css b/packages/starterkit-handlebars-demo/dist/css/style.css index 2ec2dd86b..ac31ecb3c 100644 --- a/packages/starterkit-handlebars-demo/dist/css/style.css +++ b/packages/starterkit-handlebars-demo/dist/css/style.css @@ -932,7 +932,7 @@ tr { #HERO BLOCK \*------------------------------------*/ /** - * 1) Sit hero flush with header. Normally we wouldn't + * 1) Sit hero flush with header. Normally we wouldn't * do this and handle margin using utility classes, * but we're taking a shortcut for a demo. */ @@ -1047,7 +1047,7 @@ tr { position: relative; margin-bottom: 1rem; } -.c-section__header:after { +.c-section__header::after { content: ""; display: block; flex: 1; @@ -1589,7 +1589,7 @@ tr { position: relative; z-index: 0; } -.c-promo-block__media:before { +.c-promo-block__media::before { content: ""; background: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40%, #000 100%); position: absolute; @@ -1598,7 +1598,7 @@ tr { bottom: 0; left: 0; } -.c-promo-block--right .c-promo-block__media:before { +.c-promo-block--right .c-promo-block__media::before { background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); } @@ -1676,7 +1676,7 @@ tr { width: 5rem; /* Don't display the horizontal line on the last item number */ } -.c-progress-tracker__item:last-child .c-progress-tracker__number:before { +.c-progress-tracker__item:last-child .c-progress-tracker__number::before { display: none; } @@ -1706,7 +1706,7 @@ tr { color: #041544; border-color: #114689; } -.c-progress-tracker__number:before { +.c-progress-tracker__number::before { content: " "; display: block; width: 4rem; diff --git a/packages/starterkit-handlebars-demo/dist/css/style.scss b/packages/starterkit-handlebars-demo/dist/css/style.scss index 83b82033e..642a48ab0 100644 --- a/packages/starterkit-handlebars-demo/dist/css/style.scss +++ b/packages/starterkit-handlebars-demo/dist/css/style.scss @@ -1,4 +1,4 @@ - /*------------------------------------*\ +/*------------------------------------*\ #TABLE OF CONTENTS \*------------------------------------*/ /** @@ -12,78 +12,62 @@ /*------------------------------------*\ #ABSTRACTS \*------------------------------------*/ -@import "scss/abstracts/variables"; -@import "scss/abstracts/mixins"; -@import "scss/abstracts/colors"; -@import "scss/abstracts/typography"; - - - - +@import 'scss/abstracts/variables'; +@import 'scss/abstracts/mixins'; +@import 'scss/abstracts/colors'; +@import 'scss/abstracts/typography'; /*------------------------------------*\ #BASE \*------------------------------------*/ -@import "scss/base/reset"; -@import "scss/base/fonts"; -@import "scss/base/body"; -@import "scss/base/links"; -@import "scss/base/lists"; -@import "scss/base/headings"; -@import "scss/base/forms"; -@import "scss/base/buttons"; -@import "scss/base/main"; -@import "scss/base/media"; -@import "scss/base/text"; -@import "scss/base/table"; - - - - +@import 'scss/base/reset'; +@import 'scss/base/fonts'; +@import 'scss/base/body'; +@import 'scss/base/links'; +@import 'scss/base/lists'; +@import 'scss/base/headings'; +@import 'scss/base/forms'; +@import 'scss/base/buttons'; +@import 'scss/base/main'; +@import 'scss/base/media'; +@import 'scss/base/text'; +@import 'scss/base/table'; /*------------------------------------*\ #LAYOUT \*------------------------------------*/ -@import "scss/layout/layout"; - - - - +@import 'scss/layout/layout'; /*------------------------------------*\ #COMPONENTS \*------------------------------------*/ -@import "scss/components/buttons"; -@import "scss/components/definition-list"; -@import "scss/components/definition-list-list"; -@import "scss/components/hero"; -@import "scss/components/tout"; -@import "scss/components/section"; -@import "scss/components/stacked-block"; -@import "scss/components/stripe"; -@import "scss/components/footer"; -@import "scss/components/footer-nav"; -@import "scss/components/header"; -@import "scss/components/logo"; -@import "scss/components/icon"; -@import "scss/components/input"; -@import "scss/components/page-header"; -@import "scss/components/pagination"; -@import "scss/components/primary-nav"; -@import "scss/components/promo-block"; -@import "scss/components/progress-tracker"; -@import "scss/components/text-passage"; -@import "scss/components/field"; -@import "scss/components/search-form"; -@import "scss/components/stacked-block-list"; -@import "scss/components/total"; - - - - +@import 'scss/components/buttons'; +@import 'scss/components/definition-list'; +@import 'scss/components/definition-list-list'; +@import 'scss/components/hero'; +@import 'scss/components/tout'; +@import 'scss/components/section'; +@import 'scss/components/stacked-block'; +@import 'scss/components/stripe'; +@import 'scss/components/footer'; +@import 'scss/components/footer-nav'; +@import 'scss/components/header'; +@import 'scss/components/logo'; +@import 'scss/components/icon'; +@import 'scss/components/input'; +@import 'scss/components/page-header'; +@import 'scss/components/pagination'; +@import 'scss/components/primary-nav'; +@import 'scss/components/promo-block'; +@import 'scss/components/progress-tracker'; +@import 'scss/components/text-passage'; +@import 'scss/components/field'; +@import 'scss/components/search-form'; +@import 'scss/components/stacked-block-list'; +@import 'scss/components/total'; /*------------------------------------*\ #UTILITIES \*------------------------------------*/ -@import "scss/utilities/visibility"; -@import "scss/utilities/spacing"; +@import 'scss/utilities/visibility'; +@import 'scss/utilities/spacing'; diff --git a/packages/starterkit-handlebars-demo/dist/css/svg-sprite.css b/packages/starterkit-handlebars-demo/dist/css/svg-sprite.css index 004940eeb..91fa24af0 100644 --- a/packages/starterkit-handlebars-demo/dist/css/svg-sprite.css +++ b/packages/starterkit-handlebars-demo/dist/css/svg-sprite.css @@ -3,66 +3,65 @@ \*------------------------------------*/ #atoms-icons section { - border-top: none - padding: 0; + border-top: none; + padding: 0; } #atoms-icons header { - display: none; + display: none; } #atoms-icons pre { - display: none; + display: none; } #atoms-icons br { - display: none; + display: none; } - #atoms-icons .icon-boxes { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } #atoms-icons style + svg + header { - display: none; + display: none; } #atoms-icons .icon-box { - width: initial; - height: auto; - background: none; - border: none; + width: initial; + height: auto; + background: none; + border: none; } #atoms-icons .icon-boxes li { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 6rem; - height: 6rem; - margin-right: 1rem; - margin-bottom: 1rem; - background: #fbfbfb; - border: 1px solid #cccccd; - border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 6rem; + height: 6rem; + margin-right: 1rem; + margin-bottom: 1rem; + background: #fbfbfb; + border: 1px solid #cccccd; + border-radius: 8px; } #atoms-icons .icon-boxes li h2 { - color: #000; - font-size: 0.75rem; - white-space: inherit; - text-overflow: unset; - overflow: inherit; + color: #000; + font-size: 0.75rem; + white-space: inherit; + text-overflow: unset; + overflow: inherit; } #atoms-icons .icon-box .icon { - height: 16px; - width: 16px; + height: 16px; + width: 16px; } #atoms-icons .icon-boxes li button { - display: none; + display: none; } diff --git a/packages/starterkit-handlebars-demo/dist/js/primary-nav.js b/packages/starterkit-handlebars-demo/dist/js/primary-nav.js index 0a476eb63..85102f3ea 100644 --- a/packages/starterkit-handlebars-demo/dist/js/primary-nav.js +++ b/packages/starterkit-handlebars-demo/dist/js/primary-nav.js @@ -8,48 +8,50 @@ * 3) If the nav dropdown trigger parent already has active class, remove it. * 4) If the nav dropdown trigger parent does not have an active class, add it. */ -(function(){ - - var navLink = document.querySelectorAll('.js_nav-dropdown-trigger'); /* 1 */ - - for (i=0; i { - promoBlock.classList.add('c-promo-block__body--initial'); - - observer.observe(promoBlock); - - }); - } - - function handleIntersect(entries, observer) { - entries.forEach(function(entry) { - - if (entry.intersectionRatio > 0) { - entry.target.classList.remove('c-promo-block__body--initial'); - observer.unobserve(entry.target); - } - }); +(function () { + const promoBlocks = document.querySelectorAll('.c-promo-block__body'); + + // Set things up. + window.addEventListener( + 'load', + function (event) { + createObserver(); + }, + false + ); + + function createObserver() { + var observer; + + var options = { + root: null, + rootMargin: '0px', + threshold: 1.0, + }; + + observer = new IntersectionObserver(handleIntersect, options); + + promoBlocks.forEach((promoBlock) => { + promoBlock.classList.add('c-promo-block__body--initial'); + + observer.observe(promoBlock); + }); + } + + function handleIntersect(entries, observer) { + entries.forEach(function (entry) { + if (entry.intersectionRatio > 0) { + entry.target.classList.remove('c-promo-block__body--initial'); + observer.unobserve(entry.target); } - + }); + } })(); diff --git a/packages/starterkit-handlebars-demo/dist/styleguide/css/styleguide-specific.css b/packages/starterkit-handlebars-demo/dist/styleguide/css/styleguide-specific.css index e88b76619..4c4335a37 100644 --- a/packages/starterkit-handlebars-demo/dist/styleguide/css/styleguide-specific.css +++ b/packages/starterkit-handlebars-demo/dist/styleguide/css/styleguide-specific.css @@ -22,14 +22,14 @@ display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .sg-colors li { -webkit-box-flex: 1; -webkit-flex: auto; - -ms-flex: auto; - flex: auto; + -ms-flex: auto; + flex: auto; padding: 0.3em; margin: 0 0.5em 0.5em 0; min-width: 5em; diff --git a/packages/starterkit-twig-demo/dist/css/scss/base/_global-classes.scss b/packages/starterkit-twig-demo/dist/css/scss/base/_global-classes.scss index 2e13f8858..bfef50a26 100755 --- a/packages/starterkit-twig-demo/dist/css/scss/base/_global-classes.scss +++ b/packages/starterkit-twig-demo/dist/css/scss/base/_global-classes.scss @@ -6,12 +6,12 @@ .cf { *zoom: 1; } -.cf:before, .cf:after { +.cf::before, .cf::after { content: " "; /* 1 */ display: table; /* 2 */ } -.cf:after { +.cf::after { clear: both; } diff --git a/packages/starterkit-twig-demo/dist/css/scss/objects/_accordion.scss b/packages/starterkit-twig-demo/dist/css/scss/objects/_accordion.scss index 3423544c9..64420b71c 100755 --- a/packages/starterkit-twig-demo/dist/css/scss/objects/_accordion.scss +++ b/packages/starterkit-twig-demo/dist/css/scss/objects/_accordion.scss @@ -12,22 +12,22 @@ padding: $pad-half; border-bottom: 1px solid $gray-light-3; - &:after { + &::after { content:"+"; float: right; } - + &:hover { color: $white; background: $gray-dark; } - + &.active { background: $gray-dark; - &:after { + &::after { content:"-"; } } -} \ No newline at end of file +} diff --git a/packages/starterkit-twig-demo/dist/css/scss/objects/_icons.scss b/packages/starterkit-twig-demo/dist/css/scss/objects/_icons.scss index cacbf1fbd..09841a0c7 100755 --- a/packages/starterkit-twig-demo/dist/css/scss/objects/_icons.scss +++ b/packages/starterkit-twig-demo/dist/css/scss/objects/_icons.scss @@ -12,7 +12,7 @@ } /* Use the following CSS code if you want to use data attributes for inserting your icons */ -[data-icon]:before { +[data-icon]::before { font-family: 'icons'; content: attr(data-icon); speak: none; @@ -21,7 +21,7 @@ -webkit-font-smoothing: antialiased; } -.icon-twitter:before, .icon-stumbleupon:before, .icon-pinterest:before, .icon-linkedin:before, .icon-google-plus:before, .icon-search:before, .icon-play:before, .icon-menu:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-bubble:before, .icon-facebook:before, .icon-feed:before, .icon-youtube:before, .icon-tag:before, .icon-tumblr:before, .icon-instagram, .icon-podcast, .icon-apple,.icon-android, .icon-arrow:after, .icon-envelope:before { +.icon-twitter::before, .icon-stumbleupon::before, .icon-pinterest::before, .icon-linkedin::before, .icon-google-plus::before, .icon-search::before, .icon-play::before, .icon-menu::before, .icon-arrow-left::before, .icon-arrow-right::before, .icon-bubble::before, .icon-facebook::before, .icon-feed::before, .icon-youtube::before, .icon-tag::before, .icon-tumblr::before, .icon-instagram, .icon-podcast, .icon-apple,.icon-android, .icon-arrow::after, .icon-envelope::before { font-family: 'icons'; speak: none; font-style: normal; @@ -31,72 +31,72 @@ line-height: 1; -webkit-font-smoothing: antialiased; } -.icon-twitter:before { +.icon-twitter::before { content: "\74"; } -.icon-stumbleupon:before { +.icon-stumbleupon::before { content: "\75"; } -.icon-pinterest:before { +.icon-pinterest::before { content: "\70"; } -.icon-linkedin:before { +.icon-linkedin::before { content: "\69"; } -.icon-google-plus:before { +.icon-google-plus::before { content: "\67"; } -.icon-search:before { +.icon-search::before { content: "\73"; } -.icon-play:before { +.icon-play::before { content: "\61"; } -.icon-menu:before { +.icon-menu::before { content: "\21"; } -.icon-arrow-left:before { +.icon-arrow-left::before { content: "\23"; } -.icon-arrow-right:before { +.icon-arrow-right::before { content: "\24"; } -.icon-bubble:before { +.icon-bubble::before { content: "\25"; } -.icon-facebook:before { +.icon-facebook::before { content: "\66"; } -.icon-feed:before { +.icon-feed::before { content: "\27"; } -.icon-youtube:before { +.icon-youtube::before { content: "\79"; } -.icon-tag:before { +.icon-tag::before { content: "\28"; } -.icon-tumblr:before { +.icon-tumblr::before { content: "\6d"; } -.icon-instagram:before { +.icon-instagram::before { content: "\22"; } -.icon-podcast:before { +.icon-podcast::before { content: "\26"; } -.icon-android:before { +.icon-android::before { content: "\29"; } -.icon-apple:before { +.icon-apple::before { content: "\2a"; } -.icon-envelope:before { +.icon-envelope::before { content: "\2b"; } -.icon-arrow:after { +.icon-arrow::after { content: "\61"; display: inline-block; -webkit-transform: rotate(90deg); @@ -106,7 +106,7 @@ transform: rotate(90deg); } -.icon-play:before { +.icon-play::before { font-size: 0.7rem; padding-left: 0.2em; } @@ -116,7 +116,7 @@ margin-left: $pad-double; } -.icon-play-box:before { +.icon-play-box::before { padding: $pad-quarter; background: $gray; color: $white; diff --git a/packages/starterkit-twig-demo/dist/css/style.css b/packages/starterkit-twig-demo/dist/css/style.css index df1f6acf1..d2a145e02 100755 --- a/packages/starterkit-twig-demo/dist/css/style.css +++ b/packages/starterkit-twig-demo/dist/css/style.css @@ -125,21 +125,21 @@ figure { *zoom: 1; } -.cf:before, -.l-two-col:before, -[role='main']:before, -.cf:after, -.l-two-col:after, -[role='main']:after { +.cf::before, +.l-two-col::before, +[role='main']::before, +.cf::after, +.l-two-col::after, +[role='main']::after { content: ' '; /* 1 */ display: table; /* 2 */ } -.cf:after, -.l-two-col:after, -[role='main']:after { +.cf::after, +.l-two-col::after, +[role='main']::after { clear: both; } @@ -935,7 +935,7 @@ td { } /* Use the following CSS code if you want to use data attributes for inserting your icons */ -[data-icon]:before { +[data-icon]::before { font-family: 'icons'; content: attr(data-icon); speak: none; @@ -944,28 +944,28 @@ td { -webkit-font-smoothing: antialiased; } -.icon-twitter:before, -.icon-stumbleupon:before, -.icon-pinterest:before, -.icon-linkedin:before, -.icon-google-plus:before, -.icon-search:before, -.icon-play:before, -.icon-menu:before, -.icon-arrow-left:before, -.icon-arrow-right:before, -.icon-bubble:before, -.icon-facebook:before, -.icon-feed:before, -.icon-youtube:before, -.icon-tag:before, -.icon-tumblr:before, +.icon-twitter::before, +.icon-stumbleupon::before, +.icon-pinterest::before, +.icon-linkedin::before, +.icon-google-plus::before, +.icon-search::before, +.icon-play::before, +.icon-menu::before, +.icon-arrow-left::before, +.icon-arrow-right::before, +.icon-bubble::before, +.icon-facebook::before, +.icon-feed::before, +.icon-youtube::before, +.icon-tag::before, +.icon-tumblr::before, .icon-instagram, .icon-podcast, .icon-apple, .icon-android, -.icon-arrow:after, -.icon-envelope:before { +.icon-arrow::after, +.icon-envelope::before { font-family: 'icons'; speak: none; font-style: normal; @@ -976,91 +976,91 @@ td { -webkit-font-smoothing: antialiased; } -.icon-twitter:before { +.icon-twitter::before { content: '\74'; } -.icon-stumbleupon:before { +.icon-stumbleupon::before { content: '\75'; } -.icon-pinterest:before { +.icon-pinterest::before { content: '\70'; } -.icon-linkedin:before { +.icon-linkedin::before { content: '\69'; } -.icon-google-plus:before { +.icon-google-plus::before { content: '\67'; } -.icon-search:before { +.icon-search::before { content: '\73'; } -.icon-play:before { +.icon-play::before { content: '\61'; } -.icon-menu:before { +.icon-menu::before { content: '\21'; } -.icon-arrow-left:before { +.icon-arrow-left::before { content: '\23'; } -.icon-arrow-right:before { +.icon-arrow-right::before { content: '\24'; } -.icon-bubble:before { +.icon-bubble::before { content: '\25'; } -.icon-facebook:before { +.icon-facebook::before { content: '\66'; } -.icon-feed:before { +.icon-feed::before { content: '\27'; } -.icon-youtube:before { +.icon-youtube::before { content: '\79'; } -.icon-tag:before { +.icon-tag::before { content: '\28'; } -.icon-tumblr:before { +.icon-tumblr::before { content: '\6d'; } -.icon-instagram:before { +.icon-instagram::before { content: '\22'; } -.icon-podcast:before { +.icon-podcast::before { content: '\26'; } -.icon-android:before { +.icon-android::before { content: '\29'; } -.icon-apple:before { +.icon-apple::before { content: '\2a'; } -.icon-envelope:before { +.icon-envelope::before { content: '\2b'; } -.icon-arrow:after { +.icon-arrow::after { content: '\61'; display: inline-block; -webkit-transform: rotate(90deg); @@ -1070,7 +1070,7 @@ td { transform: rotate(90deg); } -.icon-play:before { +.icon-play::before { font-size: 0.7rem; padding-left: 0.2em; } @@ -1080,7 +1080,7 @@ td { margin-left: 2em; } -.icon-play-box:before { +.icon-play-box::before { padding: 0.25em; background: gray; color: white; @@ -1355,7 +1355,7 @@ td { padding: 0.5em; border-bottom: 1px solid #dddddd; } -.acc-handle:after { +.acc-handle::after { content: '+'; float: right; } @@ -1366,7 +1366,7 @@ td { .acc-handle.active { background: #333333; } -.acc-handle.active:after { +.acc-handle.active::after { content: '-'; } diff --git a/packages/starterkit-twig-demo/dist/css/style.scss b/packages/starterkit-twig-demo/dist/css/style.scss index 714ba24c2..033867dca 100755 --- a/packages/starterkit-twig-demo/dist/css/style.scss +++ b/packages/starterkit-twig-demo/dist/css/style.scss @@ -53,69 +53,53 @@ So feel free to use any of these approaches. Or don't. It's totally up to you. * TOC To Be Continued */ - - -@import "scss/generic/variables"; -@import "scss/generic/mixins"; -@import "scss/generic/reset"; - - - - +@import 'scss/generic/variables'; +@import 'scss/generic/mixins'; +@import 'scss/generic/reset'; /*------------------------------------*\ $GLOBAL ELEMENTS \*------------------------------------*/ -@import "scss/base/global-classes"; -@import "scss/base/main"; -@import "scss/base/links"; -@import "scss/base/headings"; -@import "scss/base/text"; -@import "scss/base/lists"; -@import "scss/base/media"; -@import "scss/base/forms"; -@import "scss/base/tables"; -@import "scss/base/animation"; - - - - +@import 'scss/base/global-classes'; +@import 'scss/base/main'; +@import 'scss/base/links'; +@import 'scss/base/headings'; +@import 'scss/base/text'; +@import 'scss/base/lists'; +@import 'scss/base/media'; +@import 'scss/base/forms'; +@import 'scss/base/tables'; +@import 'scss/base/animation'; /*------------------------------------*\ $LAYOUT \*------------------------------------*/ -@import "scss/objects/layout"; - +@import 'scss/objects/layout'; /*------------------------------------*\ $PAGE STRUCTURE \*------------------------------------*/ -@import "scss/objects/header"; -@import "scss/objects/nav"; -@import "scss/objects/main"; -@import "scss/objects/footer"; - - +@import 'scss/objects/header'; +@import 'scss/objects/nav'; +@import 'scss/objects/main'; +@import 'scss/objects/footer'; /*------------------------------------*\ $TEXT Styles \*------------------------------------*/ -@import "scss/objects/text"; - +@import 'scss/objects/text'; /*------------------------------------*\ $COMPONENTS \*------------------------------------*/ -@import "scss/objects/icons"; -@import "scss/objects/buttons"; -@import "scss/objects/blocks"; -@import "scss/objects/lists"; -@import "scss/objects/tooltip"; -@import "scss/objects/accordion"; -@import "scss/objects/tabs"; -@import "scss/objects/sections"; -@import "scss/objects/article"; -@import "scss/objects/comments"; -@import "scss/objects/messaging"; - - +@import 'scss/objects/icons'; +@import 'scss/objects/buttons'; +@import 'scss/objects/blocks'; +@import 'scss/objects/lists'; +@import 'scss/objects/tooltip'; +@import 'scss/objects/accordion'; +@import 'scss/objects/tabs'; +@import 'scss/objects/sections'; +@import 'scss/objects/article'; +@import 'scss/objects/comments'; +@import 'scss/objects/messaging'; diff --git a/packages/starterkit-twig-demo/dist/js/fitvids.js b/packages/starterkit-twig-demo/dist/js/fitvids.js index d3fa97f50..d5fcd60c3 100755 --- a/packages/starterkit-twig-demo/dist/js/fitvids.js +++ b/packages/starterkit-twig-demo/dist/js/fitvids.js @@ -1,16 +1,16 @@ /*global jQuery */ /*! -* FitVids 1.0 -* -* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com -* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ -* Released under the WTFPL license - http://sam.zoy.org/wtfpl/ -* -* Date: Thu Sept 01 18:00:00 2011 -0500 -*/ + * FitVids 1.0 + * + * Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com + * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ + * Released under the WTFPL license - http://sam.zoy.org/wtfpl/ + * + * Date: Thu Sept 01 18:00:00 2011 -0500 + */ -(function($) { - $.fn.fitVids = function(options) { +(function ($) { + $.fn.fitVids = function (options) { var settings = { customSelector: null, }; @@ -46,7 +46,7 @@ $.extend(settings, options); } - return this.each(function() { + return this.each(function () { var selectors = [ "iframe[src*='player.vimeo.com']", "iframe[src*='www.youtube.com']", @@ -61,7 +61,7 @@ var $allVideos = $(this).find(selectors.join(',')); - $allVideos.each(function() { + $allVideos.each(function () { var $this = $(this); if ( (this.tagName.toLowerCase() == 'embed' && diff --git a/packages/starterkit-twig-demo/dist/js/init.js b/packages/starterkit-twig-demo/dist/js/init.js index 723a99732..093dfef0b 100755 --- a/packages/starterkit-twig-demo/dist/js/init.js +++ b/packages/starterkit-twig-demo/dist/js/init.js @@ -1,8 +1,8 @@ -(function(w) { +(function (w) { var sw = document.body.clientWidth, sh = document.body.clientHeight; - $(w).resize(function() { + $(w).resize(function () { //Update dimensions on resize sw = document.body.clientWidth; sh = document.body.clientHeight; @@ -11,14 +11,14 @@ }); //Navigation toggle - $('.nav-toggle-menu').click(function(e) { + $('.nav-toggle-menu').click(function (e) { e.preventDefault(); $(this).toggleClass('active'); $('.nav').toggleClass('active'); }); //Navigation toggle - $('.nav-toggle-search').click(function(e) { + $('.nav-toggle-search').click(function (e) { e.preventDefault(); $(this).toggleClass('active'); $('.header .search-form').toggleClass('active'); diff --git a/packages/uikit-workshop/src/css/prism-okaidia.css b/packages/uikit-workshop/src/css/prism-okaidia.css index ededec2ca..a056a3a6d 100755 --- a/packages/uikit-workshop/src/css/prism-okaidia.css +++ b/packages/uikit-workshop/src/css/prism-okaidia.css @@ -171,7 +171,7 @@ pre.line-numbers > code { counter-increment: linenumber; } -.line-numbers-rows > span:before { +.line-numbers-rows > span::before { content: counter(linenumber); color: #999; display: block; diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html index b5f8174d1..05cd56a99 100644 --- a/packages/uikit-workshop/src/html/index.html +++ b/packages/uikit-workshop/src/html/index.html @@ -26,6 +26,7 @@ + diff --git a/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss b/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss index 6ab2b8386..7f72c956b 100644 --- a/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss @@ -18,7 +18,7 @@ bottom: 0; } -.pl-c-loader-wrapper:not(:last-child){ +.pl-c-loader-wrapper:not(:last-child) { opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss index d9176375d..ebd3d02a3 100755 --- a/packages/uikit-workshop/src/sass/pattern-lab.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab.scss @@ -110,13 +110,13 @@ min-height: 100vh; max-width: 100vw; - padding-left: .5rem; - padding-right: .5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; // Clearing all remaining floats &::after { clear: both; - content: ""; + content: ''; display: table; } } diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss index 56a1064b6..14dfc5a6d 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss @@ -40,16 +40,13 @@ &:hover, &.pl-is-active:hover { - background-color: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, 0.1); } - /** * Header link styles inside light theme */ - - /** * Header link styles inside cozy theme */ @@ -96,7 +93,7 @@ user-select: none; /* Likely future */ } -@mixin buttonStyles(){ +@mixin buttonStyles() { color: inherit; text-decoration: none; background: transparent; @@ -112,7 +109,7 @@ position: relative; min-width: 30px; - &:after { + &::after { content: ''; display: block; position: absolute; @@ -122,19 +119,19 @@ width: 100%; pointer-events: none; opacity: 0; - transition: opacity .1s ease; + transition: opacity 0.1s ease; background-color: currentColor; } // &:focus, &:hover { - &:after { + &::after { opacity: 0.1; } } &:active:hover { - &:after { + &::after { opacity: 0.2; } } @@ -143,7 +140,7 @@ outline: 1px dotted; outline-offset: -1px; - &:after { + &::after { opacity: 0.1; } } diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss index 957b7ebfa..726c96110 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss @@ -56,5 +56,4 @@ $pl-animate-normal: 0.3s; $pl-border-radius: 3px; $pl-border-radius-med: 6px; - $pl-sidebar-width: 16rem; //Define sidebar width for calculating dimensions diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss index c3c5072a7..c39879cd6 100644 --- a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss @@ -27,7 +27,7 @@ --theme-primary: #464a6d; --theme-secondary: #161f50; --theme-text: white; - --theme-text-rgb: 255,255,255; + --theme-text-rgb: 255, 255, 255; --theme-border: rgba(255, 255, 255, 0.2); } diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss b/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss index ea44b6fd2..3c9ffa270 100644 --- a/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss @@ -16,7 +16,7 @@ box-sizing: border-box; } -button[class|="pl-c"] { +button[class|='pl-c'] { font-size: inherit; background-color: transparent; } diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss index b8a1bf358..ea440b16b 100644 --- a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss @@ -198,7 +198,7 @@ counter-increment: linenumber; } - .line-numbers-rows > span:before { + .line-numbers-rows > span::before { content: counter(linenumber); color: #999; display: block; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss index 3acf5dc2e..f5f319c28 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss @@ -45,7 +45,7 @@ border-radius: $pl-border-radius-med; transition: background-color $pl-animate-quick ease; - &:before { + &::before { content: counter(the-count); counter-increment: the-count; font-size: 85%; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss index 02ff2d5ab..bf5cf134a 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss @@ -21,7 +21,7 @@ */ .pl-c-breadcrumb__item { color: inherit; - &:after { + &::after { content: '\25b6'; opacity: 0.4; font-size: 6px; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss index c5c975f0d..e0ca2aa26 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss @@ -12,7 +12,6 @@ display: flex; flex-direction: column; - /** * Pattern info inside the "view all" template */ @@ -39,7 +38,6 @@ -webkit-overflow-scrolling: touch; flex-grow: 1; - @media all and (min-width: $pl-bp-large) { position: static; flex-direction: row; @@ -53,7 +51,7 @@ * Right side contains pattern code */ .pl-c-pattern-info__panel { - padding: .5rem; + padding: 0.5rem; flex-shrink: 0; // prevent panel from collapsing in height (especially on smaller screens like iPhone) display: flex; flex-direction: column; @@ -74,7 +72,6 @@ * 1) Left panel that contains pattern title, lineage, description, annotations */ .pl-c-pattern-info__panel--info { - @media all and (min-width: $pl-bp-large) { overflow: auto; -webkit-overflow-scrolling: touch; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss index 2d499799c..d4b1f5f79 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss @@ -34,6 +34,6 @@ /** * Complete state */ -.complete:before { +.complete::before { color: #03790f !important; } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss index 68f81fd68..e478185f9 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss @@ -110,8 +110,8 @@ display: inline-block; vertical-align: middle; position: absolute; - right: .625rem; - transition: opacity .1s linear; + right: 0.625rem; + transition: opacity 0.1s linear; } .pl-c-pattern__toggle-icon--expand { diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss index 0709dbc44..c1f7ee4e7 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss @@ -75,7 +75,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; border: 1px solid #ddd; - margin-bottom: .5rem; + margin-bottom: 0.5rem; margin-top: -1px; background-color: inherit; border-top-left-radius: 5px; diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss index a6aeb0c85..541f67a9a 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -40,7 +40,7 @@ .pl-c-nav__link--dropdown { color: inherit; - &:after { + &::after { color: inherit; } } diff --git a/packages/uikit-workshop/src/sass/scss/core.scss b/packages/uikit-workshop/src/sass/scss/core.scss index 50ce042c1..edf3c3fbc 100644 --- a/packages/uikit-workshop/src/sass/scss/core.scss +++ b/packages/uikit-workshop/src/sass/scss/core.scss @@ -1,2 +1,2 @@ @import './01-abstracts/variables'; -@import './01-abstracts/mixins'; \ No newline at end of file +@import './01-abstracts/mixins'; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.scss b/packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.scss index d7413dba1..4950b1b8d 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.scss @@ -154,7 +154,7 @@ color: currentColor; // border to indicate which nav links have two specific actions - &:before { + &::before { opacity: 0.1; right: 2.4rem; width: 1px; @@ -162,15 +162,15 @@ transform: translateY(-50%); } - &:after { + &::after { opacity: 0; width: 2.5rem; left: 50%; transform: translateY(-50%) translateX(-50%); } - &:before, - &:after { + &::before, + &::after { height: 2.5rem; transition: opacity $pl-animate-quick ease-out; content: ''; diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss index 288aca9b1..7daf4614e 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss @@ -28,7 +28,7 @@ pl-search { // grow in size when focusing on inner input &:focus-within { - flex-shrink: .5; + flex-shrink: 0.5; } .pl-c-body--theme-sidebar & { @@ -82,7 +82,7 @@ pl-search { color: $pl-color-white; background-color: rgba(var(--theme-text-rgb), 0.05); color: rgba(var(--theme-text-rgb), 0.67); - border-color: rgba(0, 0, 0, .1); + border-color: rgba(0, 0, 0, 0.1); border-color: rgba(var(--theme-text-rgb), 0.17); text-overflow: ellipsis; border-width: 1px; diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss index 176e1c76a..bec09cc4d 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss @@ -28,7 +28,7 @@ pl-button { padding: 0.5rem 1rem; &.pl-c-button--icon-only { - padding: .5rem; + padding: 0.5rem; } } diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-controls/pl-controls.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-controls/pl-controls.scss index 67ca5a884..2f648f880 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-controls/pl-controls.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-controls/pl-controls.scss @@ -19,7 +19,7 @@ pl-controls { padding-top: 0.5rem; // box-shadow: 0 -2px 5px rgba($pl-color-black, 0.1); - &:before { + &::before { position: absolute; left: 0; right: 0; diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss index 3fc522228..7cc307b1f 100755 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss @@ -170,7 +170,7 @@ pl-drawer { padding-top: 5px; padding-bottom: 5px; - &:after { + &::after { content: ''; height: 100%; width: 100%; diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss index 755e2fe0a..9732e0c23 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss @@ -38,7 +38,7 @@ pl-header { position: fixed; position: sticky; overflow: auto; - /** + /** * Header * 1) Set width to sidebar width defined above * 2) Make header 100% of the viewport height @@ -49,7 +49,6 @@ pl-header { border-bottom: 0; /* 4 */ } } - } /** @@ -67,7 +66,6 @@ pl-header { min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS background-color: inherit; - @media all and (min-width: $pl-bp-med) { .pl-c-body--theme-sidebar & { flex-direction: column; /* 3 */ diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss index f5e975426..0156a983c 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss @@ -16,7 +16,6 @@ pl-logo { padding: 0; min-height: 44px; min-width: 44px; - } .pl-c-logo { @@ -29,7 +28,7 @@ pl-logo { color: inherit; text-decoration: none; - @media screen and (min-width: 400px){ + @media screen and (min-width: 400px) { padding: 0.5rem 12px; } @@ -39,7 +38,7 @@ pl-logo { font-weight: bold; line-height: 1; margin: 0; - transition: color .2s ease; + transition: color 0.2s ease; &:focus { outline: 1px dotted; @@ -53,7 +52,7 @@ pl-logo { max-width: 100%; max-height: 23px; - &:not(:last-child){ + &:not(:last-child) { margin-right: 0.25rem; } } diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss index b3596bd05..4412646f8 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss @@ -13,4 +13,4 @@ pl-toggle-layout { .pl-c-toggle-layout, .pl-c-toggle-layout__action { width: 100%; -} \ No newline at end of file +} diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss index cb71721e6..00a453234 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss @@ -33,9 +33,9 @@ pl-tools-menu { width: 12rem; border-radius: 6px; top: calc(100% - 2px); - box-shadow: 0 0 5px rgba(0, 0, 0, .2); - background-color: $pl-color-gray-87; - background-color: var(--theme-primary, $pl-color-gray-87); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + background-color: $pl-color-gray-87; + background-color: var(--theme-primary, $pl-color-gray-87); transform: translateY(-4rem); opacity: 0; max-height: 0; @@ -52,7 +52,7 @@ pl-tools-menu { .pl-c-body--theme-light & { background-color: $pl-color-white; - background-color: var(--theme-primary, $pl-color-white); + background-color: var(--theme-primary, $pl-color-white); } .pl-c-body--theme-sidebar & { @@ -73,18 +73,18 @@ pl-tools-menu { overflow: visible; } - &:before { + &::before { content: ''; height: 14px; width: 14px; background-color: $pl-color-gray-87; - background-color: var(--theme-primary, $pl-color-gray-87); + background-color: var(--theme-primary, $pl-color-gray-87); position: absolute; right: 0px; top: -10px; transform: translateY(50%) translateX(-50%) rotate(45deg); transition: opacity 0.1s ease-out; - box-shadow: 0 0 5px rgba(0, 0, 0, .1); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); .pl-c-body--theme-sidebar & { @media all and (min-width: $pl-bp-med) { @@ -93,7 +93,7 @@ pl-tools-menu { } } - &.is-active:before { + &.is-active::before { opacity: 1; visibility: visible; } @@ -127,4 +127,3 @@ pl-tools-menu { } } } - diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss index 12088739a..f54842395 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss @@ -23,12 +23,12 @@ pl-tooltip { text-align: center; padding: 5px 0; border-radius: 6px; - + position: absolute; z-index: 50; } - &--right &__text, + &--right &__text, &--left &__text { top: 50%; transform: translateY(-50%); @@ -37,11 +37,11 @@ pl-tooltip { &--right &__text { left: 115%; } - + &--left &__text { right: 115%; } - + &--top &__text, &--bottom &__text { left: 50%; @@ -50,9 +50,8 @@ pl-tooltip { &--top &__text { bottom: 115%; - } - + &--bottom &__text { top: 115%; } @@ -61,5 +60,3 @@ pl-tooltip { visibility: visible; } } - - diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss index 7e52a17da..3048f46ed 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss @@ -21,7 +21,6 @@ pl-viewport-sizes { @media all and (min-width: $pl-bp-med) { align-items: center; -webkit-overflow-scrolling: touch; - } @media all and (min-width: $pl-bp-med) { @@ -55,4 +54,3 @@ pl-viewport-sizes { .pl-c-size-list__item:last-child { margin-right: auto; } - diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.scss index 106817cf8..a811d6ced 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.scss @@ -20,7 +20,7 @@ pl-viewport-size { border: 0; // Prevent zooming on phone browser when the font size is smaller than 16px - // As it would break the visualization the field itself will be scaled to 85% + // As it would break the visualization the field itself will be scaled to 85% font-size: 1rem; transform: scale(0.85); @@ -81,4 +81,3 @@ pl-viewport-size { padding: 0; cursor: pointer; } - diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss index a73ebe53c..d5e3211f0 100644 --- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss +++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss @@ -11,7 +11,7 @@ */ $pl-resizer-width: 20px; -$pl-viewport-bg: #F4F4F4; +$pl-viewport-bg: #f4f4f4; .pl-c-viewport-modal-wrapper { background-color: $pl-viewport-bg; @@ -177,11 +177,11 @@ pl-iframe { display: flex; justify-content: center; align-items: center; - transition: background .3s cubic-bezier(.25,.8,.25,1)!important; + transition: background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; cursor: ew-resize; background-color: $pl-viewport-bg; - &:after { + &::after { content: ''; height: 100%; width: 100%; @@ -192,16 +192,16 @@ pl-iframe { pointer-events: none; display: block; background-color: currentColor; - transition: .3s cubic-bezier(.25,.8,.25,1); + transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } - &.is-resizing:after, - &:hover:after { + &.is-resizing::after, + &:hover::after { opacity: 0.1; } - &:focus:after, - &:active:after { + &:focus::after, + &:active::after { opacity: 0.2; }