diff --git a/ghost/admin/app/helpers/ui-btn-span.js b/ghost/admin/app/helpers/ui-btn-span.js new file mode 100644 index 0000000000..7c53c16802 --- /dev/null +++ b/ghost/admin/app/helpers/ui-btn-span.js @@ -0,0 +1,8 @@ +import {btnStyles} from './ui-btn'; +import {helper} from '@ember/component/helper'; + +export function uiBtnSpan([style], hash) { + return btnStyles(Object.assign({}, {style}, hash)).span; +} + +export default helper(uiBtnSpan); diff --git a/ghost/admin/app/helpers/ui-btn.js b/ghost/admin/app/helpers/ui-btn.js new file mode 100644 index 0000000000..14299905b4 --- /dev/null +++ b/ghost/admin/app/helpers/ui-btn.js @@ -0,0 +1,60 @@ +import {helper} from '@ember/component/helper'; + +export function btnStyles(options = {}) { + let button = 'dib midgrey btn-base br3 ba b--lightgrey-l1 pointer glow'; + let span = 'f8 fw5 tracked-2 dib pt0 pb0 tc'; + + // Set style + if (options.style) { + switch (options.style) { + case 'outline-white': + case 'outline-white--s': + button = 'bg-transparent dib white btn-base br3 ba b--white-60 pointer highlight-white'; + span = 'f8 fw5 tracked-2 dib pt0 pb0 tc'; + break; + case 'outline-blue': + case 'outline-blue--s': + button = 'bg-transparent dib blue btn-base br3 ba b--lightgrey pointer glow'; + span = 'f8 fw5 tracked-2 dib pt0 pb0 tc'; + break; + case 'blue': + case 'blue--s': + button = 'dib bw0 white br3 btn-base btn-blue pointer'; + span = 'f8 fw5 tracked-2 dib pt0 pb0 tc'; + break; + case 'green': + case 'green--s': + button = 'dib bw0 white br3 btn-base btn-green pointer'; + span = 'f8 fw5 tracked-2 dib pt0 pb0 tc'; + break; + case 'red': + case 'red--s': + button = 'dib bw0 white br3 btn-base btn-red pointer'; + span = 'f8 fw5 tracked-2 dib pt0 pb0 tc'; + break; + } + + // Style ending with '--s' means small button + if (options.style.substr(options.style.length - 3) === '--s') { + button = `${button} btn-small`; + } + } + + if (options.class) { + button = `${button} ${options.class}`; + } + + button = `sans-serif ${button} flex-shrink-0`; + span = `${span} inline-flex items-center`; + + return { + button: button, + span: span + }; +} + +export function uiBtn([style], hash) { + return btnStyles(Object.assign({}, {style}, hash)).button; +} + +export default helper(uiBtn); diff --git a/ghost/admin/app/helpers/ui-text.js b/ghost/admin/app/helpers/ui-text.js new file mode 100644 index 0000000000..ddd28bc699 --- /dev/null +++ b/ghost/admin/app/helpers/ui-text.js @@ -0,0 +1,42 @@ +import {helper} from '@ember/component/helper'; + +export function uiText([style]) { + let cssClass = ''; + + switch (style) { + case 'h1': + cssClass = 'f-subheadline fw7 tracked-3 lh-heading ma0 pa0'; + break; + case 'h2': + cssClass = 'f2 fw6 tracked-2 tracked-3 lh-title ma0 pa0'; + break; + case 'h3': + cssClass = 'f5 fw6 tracked-2 lh-title ma0 pa0'; + break; + case 'h4': + cssClass = 'f7 fw6 tracked-2 lh-copy ma0 pa0'; + break; + case 'h5': + cssClass = 'f8 fw6 tracked-2 lh-copy ma0 pa0'; + break; + case 'h6': + cssClass = 'f-small ttu fw4 tracked-3 lh-copy ma0 pa0'; + break; + case 'tl': + cssClass = 'f6 fw3 lh-copy tracked-1 ma0 pa0'; + break; + case 't': + cssClass = 'f7 fw3 lh-copy tracked-1 ma0 pa0'; + break; + case 'ts': + cssClass = 'f8 fw3 lh-copy tracked-2 ma0 pa0'; + break; + case 'txs': + cssClass = 'f-small fw3 lh-copy tracked-3 ma0 pa0'; + break; + } + + return cssClass; +} + +export default helper(uiText); diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index ccb15d1b1e..63a3d2cb89 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -4,7 +4,7 @@ includes normalize v7 so must come first to avoid clobbering our old non-Spirit classes */ -@import "spirit/spirit-product-dark.css"; +@import "spirit/spirit-dark.css"; /* Patterns: Groups of Styles /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css index 89073d2673..fec2aafe80 100644 --- a/ghost/admin/app/styles/app.css +++ b/ghost/admin/app/styles/app.css @@ -4,7 +4,7 @@ includes normalize v7 so must come first to avoid clobbering our old non-Spirit classes */ -@import "spirit/spirit-product.css"; +@import "spirit/spirit.css"; /* Patterns: Groups of Styles /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/spirit/_animations.css b/ghost/admin/app/styles/spirit/_animations.css new file mode 100644 index 0000000000..0c53d715cf --- /dev/null +++ b/ghost/admin/app/styles/spirit/_animations.css @@ -0,0 +1,260 @@ +/* + HOVER EFFECTS + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow +*/ + +:root { + --animation-speed-fast: 0.15s; + --animation-speed-normal: 0.3s; + --animation-speed-slow: 0.45s; +} + + + +/* Animations +/* -------------------------------------------------------- */ +.anim-fast { transition: all var(--animation-speed-fast) ease; } +.anim-normal { transition: all var(--animation-speed-normal) ease; } +.anim-slow { transition: all var(--animation-speed-slow) ease; } + +.anim-fast-bezier { transition: all var(--animation-speed-fast) cubic-bezier(.71,.16,.52,.88); } +.anim-normal-bezier { transition: all var(--animation-speed-normal) cubic-bezier(.71,.16,.52,.88); } +.anim-slow-bezier { transition: all var(--animation-speed-slow) cubic-bezier(.71,.16,.52,.88); } + + +/* + + Dim element on hover by adding the dim class. + +*/ +.dim { + opacity: 1; + transition: opacity var(--animation-speed-fast) ease-in; + will-change: opacity; +} +.dim:hover, +.dim:focus { + opacity: .5; + transition: opacity var(--animation-speed-fast) ease-in; +} +.dim:active { + opacity: .8; transition: opacity var(--animation-speed-fast) ease-out; +} + + +/* + + Lighter variation + +*/ +.dim-lite { + opacity: 1; + transition: opacity var(--animation-speed-fast) ease-in; + will-change: opacity; +} +.dim-lite:hover, +.dim-lite:focus { + opacity: .75; + transition: opacity var(--animation-speed-fast) ease-in; +} +.dim-lite:active { + opacity: .9; transition: opacity var(--animation-speed-fast) ease-out; +} + + +/* + + Glow + + */ +.glow { + transition: border var(--animation-speed-slow) ease!important; +} + +.glow:hover { + border: 1px solid var(--blue); +} + + +/* + + Highlight with white background + +*/ +.highlight-white { + transition: all var(--animation-speed-fast) ease!important; +} + +.highlight-white:hover { + background-color: rgba(255, 255, 255, 0.15)!important; +} + + + +/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ + +.hide-child .child { + opacity: 0; + transition: all var(--animation-speed-normal) ease-in; +} +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + transition: all var(--animation-speed-normal) ease-in; +} + +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} + +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ + +.grow { + -moz-osx-font-smoothing: grayscale; + backface-visibility: hidden; + transform: translateY(0) translateZ(0); + transition: transform var(--animation-speed-normal) ease-out; +} + +.grow:hover, +.grow:focus { + transform: translateY(-0.6rem) scale(1.002); +} + +.grow:active { + transform: scale(.90); +} + +/* Add pointer on hover */ + +.pointer:hover { + cursor: pointer; +} + + +/* +Pop: Appear from bottom, disappear to bottom +*/ +.pop-down { + transform: translateY(0.5rem) scale(0.98); +} + + +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ + +.shadow-hover { + position: relative; + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover::after { + content: ''; + box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.09); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover:hover::after, +.shadow-hover:focus::after { + opacity: 1; +} + +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ + +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color var(--animation-speed-normal) ease-in-out; +} + + +/* Spinner */ + + .ghost-spinner { + animation: spin 1s linear infinite; + border: 4px solid; + border-color: var(--black-20); + border-radius: 100px; + box-sizing: border-box; + display: inline-block; + margin: -2px 0; + position: relative; + width: 20px; + height: 20px; + } + + .ghost-spinner:before { + background: var(--black-60); + border-radius: 100px; + content: ""; + display: block; + height: 4px; + margin-top: 11px; + width: 4px; + } + +.spinner-s { + width: 14px; + height: 14px; +} +.spinner-s:before { margin-top: 6px; } + +.spinner-xl { + width: 32px; + height: 32px; +} +.spinner-xl:before { margin-top: 20px; } + +.spinner-blue { border-color: rgba(62,176,239,.2);} +.spinner-blue:before { background: rgba(62,176,239,.7); } + +.spinner-white { border-color: rgba(255,255,255,.2); } +.spinner-white:before { background:rgba(255,255,255,.7);} + +.spinner-xxl { + width: 52px; + height: 52px; + border: 1px solid; +} +.spinner-xxl:before { + margin-top: 9px; + height: 6px; + width: 6px; + background: var(--darkgrey-l2); +} diff --git a/ghost/admin/app/styles/spirit/_aspect-ratios.css b/ghost/admin/app/styles/spirit/_aspect-ratios.css new file mode 100644 index 0000000000..1ee67e1d96 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_aspect-ratios.css @@ -0,0 +1,135 @@ +/* + + ASPECT RATIOS + +*/ + +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ + +.aspect-ratio { + height: 0; + position: relative; +} + +.aspect-ratio--16x9 { padding-bottom: 56.25%; } +.aspect-ratio--9x16 { padding-bottom: 177.77%; } + +.aspect-ratio--4x3 { padding-bottom: 75%; } +.aspect-ratio--3x4 { padding-bottom: 133.33%; } + +.aspect-ratio--6x4 { padding-bottom: 66.6%; } +.aspect-ratio--4x6 { padding-bottom: 150%; } + +.aspect-ratio--8x5 { padding-bottom: 62.5%; } +.aspect-ratio--5x8 { padding-bottom: 160%; } + +.aspect-ratio--7x5 { padding-bottom: 71.42%; } +.aspect-ratio--5x7 { padding-bottom: 140%; } + +.aspect-ratio--1x1 { padding-bottom: 100%; } + +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +@media (--breakpoint-not-small){ + .aspect-ratio-ns { + height: 0; + position: relative; + } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media (--breakpoint-medium){ + .aspect-ratio-m { + height: 0; + position: relative; + } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media (--breakpoint-large){ + .aspect-ratio-l { + height: 0; + position: relative; + } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} diff --git a/ghost/admin/app/styles/spirit/_background-position.css b/ghost/admin/app/styles/spirit/_background-position.css new file mode 100644 index 0000000000..4d850b6a55 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_background-position.css @@ -0,0 +1,126 @@ +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} + +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} + +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} + +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} + +@media (--breakpoint-not-small) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media (--breakpoint-medium) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media (--breakpoint-large) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} diff --git a/ghost/admin/app/styles/spirit/_background-size.css b/ghost/admin/app/styles/spirit/_background-size.css new file mode 100644 index 0000000000..bcb90a00c8 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_background-size.css @@ -0,0 +1,17 @@ +.cover { background-size: cover!important; } +.contain { background-size: contain!important; } + +@media (--breakpoint-not-small) { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } +} + +@media (--breakpoint-medium) { + .cover-m { background-size: cover!important; } + .contain-m { background-size: contain!important; } +} + +@media (--breakpoint-large) { + .cover-l { background-size: cover!important; } + .contain-l { background-size: contain!important; } +} diff --git a/ghost/admin/app/styles/spirit/_border-colors.css b/ghost/admin/app/styles/spirit/_border-colors.css new file mode 100644 index 0000000000..bec837ea13 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_border-colors.css @@ -0,0 +1,129 @@ +/* + + BORDER COLORS + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + +*/ + +.b--blue { border-color: var(--blue); } +.b--green { border-color: var(--green); } +.b--purple { border-color: var(--purple); } +.b--yellow { border-color: var(--yellow); } +.b--red { border-color: var(--red); } +.b--pink { border-color: var(--pink); } +.b--white { border-color: var(--white); } + +.b--white-10 { border-color: var(--white-10); } +.b--white-20 { border-color: var(--white-20); } +.b--white-30 { border-color: var(--white-30); } +.b--white-40 { border-color: var(--white-40); } +.b--white-50 { border-color: var(--white-50); } +.b--white-60 { border-color: var(--white-60); } +.b--white-70 { border-color: var(--white-70); } +.b--white-80 { border-color: var(--white-80); } +.b--white-90 { border-color: var(--white-90); } + +.b--black-10 { border-color: var(--black-10); } +.b--black-20 { border-color: var(--black-20); } +.b--black-30 { border-color: var(--black-30); } +.b--black-40 { border-color: var(--black-40); } +.b--black-50 { border-color: var(--black-50); } +.b--black-60 { border-color: var(--black-60); } +.b--black-70 { border-color: var(--black-70); } +.b--black-80 { border-color: var(--black-80); } +.b--black-90 { border-color: var(--black-90); } + +.b--darkgrey { border-color: var(--darkgrey); } +.b--middarkgrey { border-color: var(--middarkgrey); } +.b--midgrey { border-color: var(--midgrey); } +.b--midlightgrey { border-color: var(--midlightgrey); } +.b--lightgrey { border-color: var(--lightgrey); } +.b--whitegrey { border-color: var(--whitegrey); } + +/* Shades */ +.b--blue-l3 { border-color: var(--blue-l3); } +.b--blue-l2 { border-color: var(--blue-l2); } +.b--blue-l1 { border-color: var(--blue-l1); } +.b--blue-d1 { border-color: var(--blue-d1); } +.b--blue-d2 { border-color: var(--blue-d2); } +.b--blue-d3 { border-color: var(--blue-d3); } + +.b--green-l3 { border-color: var(--green-l3); } +.b--green-l2 { border-color: var(--green-l2); } +.b--green-l1 { border-color: var(--green-l1); } +.b--green-d1 { border-color: var(--green-d1); } +.b--green-d2 { border-color: var(--green-d2); } +.b--green-d3 { border-color: var(--green-d3); } + +.b--purple-l3 { border-color: var(--purple-l3); } +.b--purple-l2 { border-color: var(--purple-l2); } +.b--purple-l1 { border-color: var(--purple-l1); } +.b--purple-d1 { border-color: var(--purple-d1); } +.b--purple-d2 { border-color: var(--purple-d2); } +.b--purple-d3 { border-color: var(--purple-d3); } + +.b--yellow-l3 { border-color: var(--yellow-l3); } +.b--yellow-l2 { border-color: var(--yellow-l2); } +.b--yellow-l1 { border-color: var(--yellow-l1); } +.b--yellow-d1 { border-color: var(--yellow-d1); } +.b--yellow-d2 { border-color: var(--yellow-d2); } +.b--yellow-d3 { border-color: var(--yellow-d3); } + +.b--red-l3 { border-color: var(--red-l3); } +.b--red-l2 { border-color: var(--red-l2); } +.b--red-l1 { border-color: var(--red-l1); } +.b--red-d1 { border-color: var(--red-d1); } +.b--red-d2 { border-color: var(--red-d2); } +.b--red-d3 { border-color: var(--red-d3); } + +.b--pink-l3 { border-color: var(--pink-l3); } +.b--pink-l2 { border-color: var(--pink-l2); } +.b--pink-l1 { border-color: var(--pink-l1); } +.b--pink-d1 { border-color: var(--pink-d1); } +.b--pink-d2 { border-color: var(--pink-d2); } +.b--pink-d3 { border-color: var(--pink-d3); } + +.b--darkgrey-l2 { border-color: var(--darkgrey-l2); } +.b--darkgrey-l1 { border-color: var(--darkgrey-l1); } +.b--darkgrey-d1 { border-color: var(--darkgrey-d1); } +.b--darkgrey-d2 { border-color: var(--darkgrey-d2); } + +.b--middarkgrey-l2 { border-color: var(--middarkgrey-l2); } +.b--middarkgrey-l1 { border-color: var(--middarkgrey-l1); } +.b--middarkgrey-d1 { border-color: var(--middarkgrey-d1); } +.b--middarkgrey-d2 { border-color: var(--middarkgrey-d2); } + +.b--midgrey-l2 { border-color: var(--midgrey-l2); } +.b--midgrey-l1 { border-color: var(--midgrey-l1); } +.b--midgrey-d1 { border-color: var(--midgrey-d1); } +.b--midgrey-d2 { border-color: var(--midgrey-d2); } + +.b--midlightgrey-l2 { border-color: var(--midlightgrey-l2); } +.b--midlightgrey-l1 { border-color: var(--midlightgrey-l1); } +.b--midlightgrey-d1 { border-color: var(--midlightgrey-d1); } +.b--midlightgrey-d2 { border-color: var(--midlightgrey-d2); } + +.b--lightgrey-l2 { border-color: var(--lightgrey-l2); } +.b--lightgrey-l1 { border-color: var(--lightgrey-l1); } +.b--lightgrey-d1 { border-color: var(--lightgrey-d1); } +.b--lightgrey-d2 { border-color: var(--lightgrey-d2); } + +.b--whitegrey-l2 { border-color: var(--whitegrey-l2); } +.b--whitegrey-l1 { border-color: var(--whitegrey-l1); } +.b--whitegrey-d1 { border-color: var(--whitegrey-d1); } +.b--whitegrey-d2 { border-color: var(--whitegrey-d2); } + +.b--transparent { border-color: var(--transparent); } +.b--inherit { border-color: inherit; } diff --git a/ghost/admin/app/styles/spirit/_border-radius.css b/ghost/admin/app/styles/spirit/_border-radius.css new file mode 100644 index 0000000000..5bdd913769 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_border-radius.css @@ -0,0 +1,126 @@ +/* + + BORDER RADIUS + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + .br0 { border-radius: 0; } + .br1 { border-radius: .2rem; } + .br2 { border-radius: .3rem; } + .br3 { border-radius: .4rem; } + .br4 { border-radius: .8rem; } + .br-100 { border-radius: 100%; } + .br-pill { border-radius: 9999px; } + .br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + +@media (--breakpoint-not-small) { + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .2rem; } + .br2-ns { border-radius: .3rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: .8rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media (--breakpoint-medium) { + .br0-m { border-radius: 0; } + .br1-m { border-radius: .2rem; } + .br2-m { border-radius: .3rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: .8rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media (--breakpoint-large) { + .br0-l { border-radius: 0; } + .br1-l { border-radius: .2rem; } + .br2-l { border-radius: .3rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: .8rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/ghost/admin/app/styles/spirit/_border-style.css b/ghost/admin/app/styles/spirit/_border-style.css new file mode 100644 index 0000000000..46c2517e41 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_border-style.css @@ -0,0 +1,47 @@ +/* + + BORDER STYLES + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.b--dotted { border-style: dotted; } +.b--dashed { border-style: dashed; } +.b--solid { border-style: solid; } +.b--none { border-style: none; } + +@media (--breakpoint-not-small) { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } +} + +@media (--breakpoint-medium) { + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } +} + +@media (--breakpoint-large) { + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .b--none-l { border-style: none; } +} diff --git a/ghost/admin/app/styles/spirit/_border-widths.css b/ghost/admin/app/styles/spirit/_border-widths.css new file mode 100644 index 0000000000..1a95091e57 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_border-widths.css @@ -0,0 +1,73 @@ +/* + + BORDER WIDTHS + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.bw0 { border-width: 0; } +.bw1 { border-width: .125rem; } +.bw2 { border-width: .25rem; } +.bw3 { border-width: .5rem; } +.bw4 { border-width: 1rem; } +.bw5 { border-width: 2rem; } + +/* Resets */ +.bt-0 { border-top-width: 0; } +.br-0 { border-right-width: 0; } +.bb-0 { border-bottom-width: 0; } +.bl-0 { border-left-width: 0; } + +@media (--breakpoint-not-small) { + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } +} + +@media (--breakpoint-medium) { + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } + .bt-0-m { border-top-width: 0; } + .br-0-m { border-right-width: 0; } + .bb-0-m { border-bottom-width: 0; } + .bl-0-m { border-left-width: 0; } +} + +@media (--breakpoint-large) { + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } + .bt-0-l { border-top-width: 0; } + .br-0-l { border-right-width: 0; } + .bb-0-l { border-bottom-width: 0; } + .bl-0-l { border-left-width: 0; } +} diff --git a/ghost/admin/app/styles/spirit/_borders.css b/ghost/admin/app/styles/spirit/_borders.css new file mode 100644 index 0000000000..ddb6d59ad4 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_borders.css @@ -0,0 +1,60 @@ +/* + + BORDERS + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + .ba { border-style: solid; border-width: 1px; } + .bt { border-top-style: solid; border-top-width: 1px; } + .br { border-right-style: solid; border-right-width: 1px; } + .bb { border-bottom-style: solid; border-bottom-width: 1px; } + .bl { border-left-style: solid; border-left-width: 1px; } + .bn { border-style: none; border-width: 0; } + .oln { outline: none; } + + +@media (--breakpoint-not-small) { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } + .oln-ns { outline: none; } +} + +@media (--breakpoint-medium) { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } + .oln-m { outline: none; } +} + +@media (--breakpoint-large) { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { border-style: none; border-width: 0; } + .oln-l { outline: none; } +} diff --git a/ghost/admin/app/styles/spirit/_box-shadow.css b/ghost/admin/app/styles/spirit/_box-shadow.css new file mode 100644 index 0000000000..8bc45942c5 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_box-shadow.css @@ -0,0 +1,15 @@ +/* + + BOX-SHADOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.shadow-1 { box-shadow: 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.03); } +.shadow-1-strong { box-shadow: 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.03); } +.shadow-2 { box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08); } +.shadow-3 { box-shadow: 0 0 1px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.12); } diff --git a/ghost/admin/app/styles/spirit/_box-sizing.css b/ghost/admin/app/styles/spirit/_box-sizing.css new file mode 100644 index 0000000000..8a965e0902 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_box-sizing.css @@ -0,0 +1,48 @@ +/* + + BOX SIZING + +*/ + +html, +body, +div, +article, +aside, +section, +main, +nav, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +blockquote, +figcaption, +figure, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; +} + diff --git a/ghost/admin/app/styles/spirit/_clears.css b/ghost/admin/app/styles/spirit/_clears.css new file mode 100644 index 0000000000..4366b91363 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_clears.css @@ -0,0 +1,39 @@ +/* + + CLEARFIX + +*/ + +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { content: " "; display: table; } +.cf:after { clear: both; } +.cf { *zoom: 1; } + +.cl { clear: left; } +.cr { clear: right; } +.cb { clear: both; } +.cn { clear: none; } + +@media (--breakpoint-not-small) { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} + +@media (--breakpoint-medium) { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} + +@media (--breakpoint-large) { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } +} diff --git a/ghost/admin/app/styles/spirit/_code.css b/ghost/admin/app/styles/spirit/_code.css new file mode 100644 index 0000000000..ac691f30d4 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_code.css @@ -0,0 +1,11 @@ +/* + + CODE + +*/ + +.pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} diff --git a/ghost/admin/app/styles/spirit/_colors-dark.css b/ghost/admin/app/styles/spirit/_colors-dark.css new file mode 100644 index 0000000000..f5dc84936a --- /dev/null +++ b/ghost/admin/app/styles/spirit/_colors-dark.css @@ -0,0 +1,123 @@ +/* + + Ghost color variables + Modifications use PostCSS color mod function: https://github.com/postcss/postcss-color-mod-function + +*/ + +:root { + /* Base colors */ + --blue: #3eb0ef; + --green: #a4d037; + --purple: #ad26b4; + --yellow: #fecd35; + --red: #f05230; + --pink: #fa3a57; + --white: #263238; + --extra-darkgrey: #212A2E; + + --black-10: rgba(255, 255, 255, 0.1); + --black-20: rgba(255, 255, 255, 0.2); + --black-30: rgba(255, 255, 255, 0.3); + --black-40: rgba(255, 255, 255, 0.4); + --black-50: rgba(255, 255, 255, 0.5); + --black-60: rgba(255, 255, 255, 0.6); + --black-70: rgba(255, 255, 255, 0.7); + --black-80: rgba(255, 255, 255, 0.8); + --black-90: rgba(255, 255, 255, 0.9); + + --white-10: rgba(38, 50, 56, 0.1); + --white-20: rgba(38, 50, 56, 0.2); + --white-30: rgba(38, 50, 56, 0.3); + --white-40: rgba(38, 50, 56, 0.4); + --white-50: rgba(38, 50, 56, 0.5); + --white-60: rgba(38, 50, 56, 0.6); + --white-70: rgba(38, 50, 56, 0.7); + --white-80: rgba(38, 50, 56, 0.8); + --white-90: rgba(38, 50, 56, 0.9); + + --whitegrey: #343f44; + --lightgrey: #54666D; + --midlightgrey: #738a94; + --midgrey: #9BAEB8; + --middarkgrey: #c5d2d9; + --darkgrey: #e5eff5; + + --transparent:transparent; + + /* Tone variations */ + --blue-d3: color-mod(var(--blue) l(+15%)); + --blue-d2: color-mod(var(--blue) l(+10%)); + --blue-d1: color-mod(var(--blue) l(+5%)); + --blue-l1: color-mod(var(--blue) l(-5%)); + --blue-l2: color-mod(var(--blue) l(-10%)); + --blue-l3: color-mod(var(--blue) l(-15%)); + + --green-d3: color-mod(var(--green) l(+15%)); + --green-d2: color-mod(var(--green) l(+10%)); + --green-d1: color-mod(var(--green) l(+5%)); + --green-l1: color-mod(var(--green) l(-5%)); + --green-l2: color-mod(var(--green) l(-10%)); + --green-l3: color-mod(var(--green) l(-15%)); + + --purple-d3: color-mod(var(--purple) l(+15%)); + --purple-d2: color-mod(var(--purple) l(+10%)); + --purple-d1: color-mod(var(--purple) l(+5%)); + --purple-l1: color-mod(var(--purple) l(-5%)); + --purple-l2: color-mod(var(--purple) l(-10%)); + --purple-l3: color-mod(var(--purple) l(-15%)); + + --yellow-d3: color-mod(var(--yellow) l(+15%)); + --yellow-d2: color-mod(var(--yellow) l(+10%)); + --yellow-d1: color-mod(var(--yellow) l(+5%)); + --yellow-l1: color-mod(var(--yellow) l(-5%)); + --yellow-l2: color-mod(var(--yellow) l(-10%)); + --yellow-l3: color-mod(var(--yellow) l(-13%)); + + --red-d3: color-mod(var(--red) l(+15%)); + --red-d2: color-mod(var(--red) l(+10%)); + --red-d1: color-mod(var(--red) l(+5%)); + --red-l1: color-mod(var(--red) l(-5%)); + --red-l2: color-mod(var(--red) l(-10%)); + --red-l3: color-mod(var(--red) l(-15%)); + + --pink-d3: color-mod(var(--pink) l(+15%)); + --pink-d2: color-mod(var(--pink) l(+10%)); + --pink-d1: color-mod(var(--pink) l(+5%)); + --pink-l1: color-mod(var(--pink) l(-5%)); + --pink-l2: color-mod(var(--pink) l(-10%)); + --pink-l3: color-mod(var(--pink) l(-15%)); + + --darkgrey-d2: color-mod(var(--darkgrey) h(-1) l(+7%)); + --darkgrey-d1: color-mod(var(--darkgrey) h(+1) l(+3%)); + --darkgrey-l1: color-mod(var(--darkgrey) l(-3%)); + --darkgrey-l2: color-mod(var(--darkgrey) l(-6%)); + + --middarkgrey-d2: color-mod(var(--middarkgrey) h(+1) l(+7%)); + --middarkgrey-d1: color-mod(var(--middarkgrey) h(+2) l(+4%)); + --middarkgrey-l1: color-mod(var(--middarkgrey) h(+2) l(-3%)); + --middarkgrey-l2: color-mod(var(--middarkgrey) h(+1) l(-7%)); + + --midgrey-d2: color-mod(var(--midgrey) h(+2) s(+2%) l(+7%)); + --midgrey-d1: color-mod(var(--midgrey) h(+1) s(+1%) l(+4%)); + --midgrey-l1: color-mod(var(--midgrey) h(+1) l(-3%)); + --midgrey-l2: color-mod(var(--midgrey) l(-7%)); + + --midlightgrey-d2: color-mod(var(--midlightgrey) h(-3) s(+2%) l(+8%)); + --midlightgrey-d1: color-mod(var(--midlightgrey) h(-1) s(+1%) l(+4%)); + --midlightgrey-l1: color-mod(var(--midlightgrey) h(+1) s(-1%) l(-3%)); + --midlightgrey-l2: color-mod(var(--midlightgrey) h(-3) s(-2%) l(-7%)); + + --lightgrey-d2: color-mod(var(--lightgrey) h(+1) s(+14%) l(+8%)); + --lightgrey-d1: color-mod(var(--lightgrey) h(+1) s(+12%) l(+6%)); + --lightgrey-l1: color-mod(var(--lightgrey) s(-1%) l(-4%)); + --lightgrey-l2: color-mod(var(--lightgrey) h(-2) s(-2%) l(-7%)); + + --whitegrey-d2: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%)); + --whitegrey-d1: color-mod(var(--whitegrey) h(+1) s(-2%) l(+3%)); + --whitegrey-l1: color-mod(var(--whitegrey) h(-1) s(-7%) l(-3%)); + --whitegrey-l2: color-mod(var(--whitegrey) h(-1) s(-11%) l(-6%)); + + /* Special colors */ + --errorbg-lightred: rgba(240, 82, 48, 0.05); +} diff --git a/ghost/admin/app/styles/spirit/_colors.css b/ghost/admin/app/styles/spirit/_colors.css new file mode 100644 index 0000000000..db43d5a8e5 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_colors.css @@ -0,0 +1,122 @@ +/* + + Ghost color variables + Modifications use PostCSS color mod function: https://github.com/postcss/postcss-color-mod-function + +*/ + +:root { + /* Base colors */ + --blue: #3eb0ef; + --green: #a4d037; + --purple: #ad26b4; + --yellow: #fecd35; + --red: #f05230; + --pink: #fa3a57; + --white: #ffffff; + + --white-10: rgba(255, 255, 255, 0.1); + --white-20: rgba(255, 255, 255, 0.2); + --white-30: rgba(255, 255, 255, 0.3); + --white-40: rgba(255, 255, 255, 0.4); + --white-50: rgba(255, 255, 255, 0.5); + --white-60: rgba(255, 255, 255, 0.6); + --white-70: rgba(255, 255, 255, 0.7); + --white-80: rgba(255, 255, 255, 0.8); + --white-90: rgba(255, 255, 255, 0.9); + + --black-10: rgba(40, 48, 52, 0.1); + --black-20: rgba(40, 48, 52, 0.2); + --black-30: rgba(40, 48, 52, 0.3); + --black-40: rgba(40, 48, 52, 0.4); + --black-50: rgba(40, 48, 52, 0.5); + --black-60: rgba(40, 48, 52, 0.6); + --black-70: rgba(40, 48, 52, 0.7); + --black-80: rgba(40, 48, 52, 0.8); + --black-90: rgba(40, 48, 52, 0.9); + + --darkgrey: #343f44; + --middarkgrey: #54666D; + --midgrey: #738a94; + --midlightgrey: #9BAEB8; + --lightgrey: #c5d2d9; + --whitegrey: #e5eff5; + + --transparent:transparent; + + /* Tone variations */ + --blue-l3: color-mod(var(--blue) l(+15%)); + --blue-l2: color-mod(var(--blue) l(+10%)); + --blue-l1: color-mod(var(--blue) l(+5%)); + --blue-d1: color-mod(var(--blue) l(-5%)); + --blue-d2: color-mod(var(--blue) l(-10%)); + --blue-d3: color-mod(var(--blue) l(-15%)); + + --green-l3: color-mod(var(--green) l(+15%)); + --green-l2: color-mod(var(--green) l(+10%)); + --green-l1: color-mod(var(--green) l(+5%)); + --green-d1: color-mod(var(--green) l(-5%)); + --green-d2: color-mod(var(--green) l(-10%)); + --green-d3: color-mod(var(--green) l(-15%)); + + --purple-l3: color-mod(var(--purple) l(+15%)); + --purple-l2: color-mod(var(--purple) l(+10%)); + --purple-l1: color-mod(var(--purple) l(+5%)); + --purple-d1: color-mod(var(--purple) l(-5%)); + --purple-d2: color-mod(var(--purple) l(-10%)); + --purple-d3: color-mod(var(--purple) l(-15%)); + + --yellow-l3: color-mod(var(--yellow) l(+15%)); + --yellow-l2: color-mod(var(--yellow) l(+10%)); + --yellow-l1: color-mod(var(--yellow) l(+5%)); + --yellow-d1: color-mod(var(--yellow) l(-5%)); + --yellow-d2: color-mod(var(--yellow) l(-10%)); + --yellow-d3: color-mod(var(--yellow) l(-13%)); + + --red-l3: color-mod(var(--red) l(+15%)); + --red-l2: color-mod(var(--red) l(+10%)); + --red-l1: color-mod(var(--red) l(+5%)); + --red-d1: color-mod(var(--red) l(-5%)); + --red-d2: color-mod(var(--red) l(-10%)); + --red-d3: color-mod(var(--red) l(-15%)); + + --pink-l3: color-mod(var(--pink) l(+15%)); + --pink-l2: color-mod(var(--pink) l(+10%)); + --pink-l1: color-mod(var(--pink) l(+5%)); + --pink-d1: color-mod(var(--pink) l(-5%)); + --pink-d2: color-mod(var(--pink) l(-10%)); + --pink-d3: color-mod(var(--pink) l(-15%)); + + --darkgrey-l2: color-mod(var(--darkgrey) h(-1) l(+7%)); + --darkgrey-l1: color-mod(var(--darkgrey) h(+1) l(+3%)); + --darkgrey-d1: color-mod(var(--darkgrey) l(-3%)); + --darkgrey-d2: color-mod(var(--darkgrey) l(-6%)); + + --middarkgrey-l2: color-mod(var(--middarkgrey) h(+1) l(+7%)); + --middarkgrey-l1: color-mod(var(--middarkgrey) h(+2) l(+4%)); + --middarkgrey-d1: color-mod(var(--middarkgrey) h(+2) l(-3%)); + --middarkgrey-d2: color-mod(var(--middarkgrey) h(+1) l(-7%)); + + --midgrey-l2: color-mod(var(--midgrey) h(+2) s(+2%) l(+7%)); + --midgrey-l1: color-mod(var(--midgrey) h(+1) s(+1%) l(+4%)); + --midgrey-d1: color-mod(var(--midgrey) h(+1) l(-3%)); + --midgrey-d2: color-mod(var(--midgrey) l(-7%)); + + --midlightgrey-l2: color-mod(var(--midlightgrey) h(-3) s(+2%) l(+8%)); + --midlightgrey-l1: color-mod(var(--midlightgrey) h(-1) s(+1%) l(+4%)); + --midlightgrey-d1: color-mod(var(--midlightgrey) h(+1) s(-1%) l(-3%)); + --midlightgrey-d2: color-mod(var(--midlightgrey) h(-3) s(-2%) l(-7%)); + + --lightgrey-l2: color-mod(var(--lightgrey) h(+1) s(+14%) l(+8%)); + --lightgrey-l1: color-mod(var(--lightgrey) h(+1) s(+12%) l(+6%)); + --lightgrey-d1: color-mod(var(--lightgrey) s(-1%) l(-4%)); + --lightgrey-d2: color-mod(var(--lightgrey) h(-2) s(-2%) l(-7%)); + + --whitegrey-l2: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%)); + --whitegrey-l1: color-mod(var(--whitegrey) h(+1) s(-2%) l(+3%)); + --whitegrey-d1: color-mod(var(--whitegrey) h(-1) s(-7%) l(-3%)); + --whitegrey-d2: color-mod(var(--whitegrey) h(-1) s(-11%) l(-6%)); + + /* Special colors */ + --errorbg-lightred: rgba(240, 82, 48, 0.05); +} diff --git a/ghost/admin/app/styles/spirit/_coordinates.css b/ghost/admin/app/styles/spirit/_coordinates.css new file mode 100644 index 0000000000..4f2756e758 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_coordinates.css @@ -0,0 +1,468 @@ +/* + + Base: + top + right + bottom + left + + Value: + -(n) = (n * grid) + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.top-0 { top: 0; } +.top-1 { top: calc(var(--grid-size) * 1); } +.top-2 { top: calc(var(--grid-size) * 2); } +.top-3 { top: calc(var(--grid-size) * 3); } +.top-4 { top: calc(var(--grid-size) * 4); } +.top-5 { top: calc(var(--grid-size) * 5); } +.top-6 { top: calc(var(--grid-size) * 6); } +.top-7 { top: calc(var(--grid-size) * 7); } +.top-8 { top: calc(var(--grid-size) * 8); } +.top-9 { top: calc(var(--grid-size) * 9); } +.top-10 { top: calc(var(--grid-size) * 10); } +.top-11 { top: calc(var(--grid-size) * 11); } +.top-12 { top: calc(var(--grid-size) * 12); } +.top-13 { top: calc(var(--grid-size) * 13); } +.top-14 { top: calc(var(--grid-size) * 14); } +.top-15 { top: calc(var(--grid-size) * 15); } +.top-16 { top: calc(var(--grid-size) * 16); } +.top-17 { top: calc(var(--grid-size) * 17); } +.top-18 { top: calc(var(--grid-size) * 18); } +.top-19 { top: calc(var(--grid-size) * 19); } +.top-20 { top: calc(var(--grid-size) * 20); } +.top-25 { top: calc(var(--grid-size) * 25); } +.top-30 { top: calc(var(--grid-size) * 30); } +.top-40 { top: calc(var(--grid-size) * 40); } +.top-50 { top: calc(var(--grid-size) * 50); } + +.right-0 { right: 0; } +.right-1 { right: calc(var(--grid-size) * 1); } +.right-2 { right: calc(var(--grid-size) * 2); } +.right-3 { right: calc(var(--grid-size) * 3); } +.right-4 { right: calc(var(--grid-size) * 4); } +.right-5 { right: calc(var(--grid-size) * 5); } +.right-6 { right: calc(var(--grid-size) * 6); } +.right-7 { right: calc(var(--grid-size) * 7); } +.right-8 { right: calc(var(--grid-size) * 8); } +.right-9 { right: calc(var(--grid-size) * 9); } +.right-10 { right: calc(var(--grid-size) * 10); } +.right-11 { right: calc(var(--grid-size) * 11); } +.right-12 { right: calc(var(--grid-size) * 12); } +.right-13 { right: calc(var(--grid-size) * 13); } +.right-14 { right: calc(var(--grid-size) * 14); } +.right-15 { right: calc(var(--grid-size) * 15); } +.right-16 { right: calc(var(--grid-size) * 16); } +.right-17 { right: calc(var(--grid-size) * 17); } +.right-18 { right: calc(var(--grid-size) * 18); } +.right-19 { right: calc(var(--grid-size) * 19); } +.right-20 { right: calc(var(--grid-size) * 20); } +.right-25 { right: calc(var(--grid-size) * 25); } +.right-30 { right: calc(var(--grid-size) * 30); } +.right-40 { right: calc(var(--grid-size) * 40); } +.right-50 { right: calc(var(--grid-size) * 50); } + +.bottom-0 { bottom: 0; } +.bottom-1 { bottom: calc(var(--grid-size) * 1); } +.bottom-2 { bottom: calc(var(--grid-size) * 2); } +.bottom-3 { bottom: calc(var(--grid-size) * 3); } +.bottom-4 { bottom: calc(var(--grid-size) * 4); } +.bottom-5 { bottom: calc(var(--grid-size) * 5); } +.bottom-6 { bottom: calc(var(--grid-size) * 6); } +.bottom-7 { bottom: calc(var(--grid-size) * 7); } +.bottom-8 { bottom: calc(var(--grid-size) * 8); } +.bottom-9 { bottom: calc(var(--grid-size) * 9); } +.bottom-10 { bottom: calc(var(--grid-size) * 10); } +.bottom-11 { bottom: calc(var(--grid-size) * 11); } +.bottom-12 { bottom: calc(var(--grid-size) * 12); } +.bottom-13 { bottom: calc(var(--grid-size) * 13); } +.bottom-14 { bottom: calc(var(--grid-size) * 14); } +.bottom-15 { bottom: calc(var(--grid-size) * 15); } +.bottom-16 { bottom: calc(var(--grid-size) * 16); } +.bottom-17 { bottom: calc(var(--grid-size) * 17); } +.bottom-18 { bottom: calc(var(--grid-size) * 18); } +.bottom-19 { bottom: calc(var(--grid-size) * 19); } +.bottom-20 { bottom: calc(var(--grid-size) * 20); } +.bottom-25 { bottom: calc(var(--grid-size) * 25); } +.bottom-30 { bottom: calc(var(--grid-size) * 30); } +.bottom-40 { bottom: calc(var(--grid-size) * 40); } +.bottom-50 { bottom: calc(var(--grid-size) * 50); } + +.left-0 { left: 0; } +.left-1 { left: calc(var(--grid-size) * 1); } +.left-2 { left: calc(var(--grid-size) * 2); } +.left-3 { left: calc(var(--grid-size) * 3); } +.left-4 { left: calc(var(--grid-size) * 4); } +.left-5 { left: calc(var(--grid-size) * 5); } +.left-6 { left: calc(var(--grid-size) * 6); } +.left-7 { left: calc(var(--grid-size) * 7); } +.left-8 { left: calc(var(--grid-size) * 8); } +.left-9 { left: calc(var(--grid-size) * 9); } +.left-10 { left: calc(var(--grid-size) * 10); } +.left-11 { left: calc(var(--grid-size) * 11); } +.left-12 { left: calc(var(--grid-size) * 12); } +.left-13 { left: calc(var(--grid-size) * 13); } +.left-14 { left: calc(var(--grid-size) * 14); } +.left-15 { left: calc(var(--grid-size) * 15); } +.left-16 { left: calc(var(--grid-size) * 16); } +.left-17 { left: calc(var(--grid-size) * 17); } +.left-18 { left: calc(var(--grid-size) * 18); } +.left-19 { left: calc(var(--grid-size) * 19); } +.left-20 { left: calc(var(--grid-size) * 20); } +.left-25 { left: calc(var(--grid-size) * 25); } +.left-30 { left: calc(var(--grid-size) * 30); } +.left-40 { left: calc(var(--grid-size) * 40); } +.left-50 { left: calc(var(--grid-size) * 50); } + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + + +@media (--breakpoint-not-small) { + .top-0-ns { top: 0; } + .top-1-ns { top: calc(var(--grid-size) * 1); } + .top-2-ns { top: calc(var(--grid-size) * 2); } + .top-3-ns { top: calc(var(--grid-size) * 3); } + .top-4-ns { top: calc(var(--grid-size) * 4); } + .top-5-ns { top: calc(var(--grid-size) * 5); } + .top-6-ns { top: calc(var(--grid-size) * 6); } + .top-7-ns { top: calc(var(--grid-size) * 7); } + .top-8-ns { top: calc(var(--grid-size) * 8); } + .top-9-ns { top: calc(var(--grid-size) * 9); } + .top-10-ns { top: calc(var(--grid-size) * 10); } + .top-11-ns { top: calc(var(--grid-size) * 11); } + .top-12-ns { top: calc(var(--grid-size) * 12); } + .top-13-ns { top: calc(var(--grid-size) * 13); } + .top-14-ns { top: calc(var(--grid-size) * 14); } + .top-15-ns { top: calc(var(--grid-size) * 15); } + .top-16-ns { top: calc(var(--grid-size) * 16); } + .top-17-ns { top: calc(var(--grid-size) * 17); } + .top-18-ns { top: calc(var(--grid-size) * 18); } + .top-19-ns { top: calc(var(--grid-size) * 19); } + .top-20-ns { top: calc(var(--grid-size) * 20); } + .top-25-ns { top: calc(var(--grid-size) * 25); } + .top-30-ns { top: calc(var(--grid-size) * 30); } + .top-40-ns { top: calc(var(--grid-size) * 40); } + .top-50-ns { top: calc(var(--grid-size) * 50); } + + .right-0-ns { right: 0; } + .right-1-ns { right: calc(var(--grid-size) * 1); } + .right-2-ns { right: calc(var(--grid-size) * 2); } + .right-3-ns { right: calc(var(--grid-size) * 3); } + .right-4-ns { right: calc(var(--grid-size) * 4); } + .right-5-ns { right: calc(var(--grid-size) * 5); } + .right-6-ns { right: calc(var(--grid-size) * 6); } + .right-7-ns { right: calc(var(--grid-size) * 7); } + .right-8-ns { right: calc(var(--grid-size) * 8); } + .right-9-ns { right: calc(var(--grid-size) * 9); } + .right-10-ns { right: calc(var(--grid-size) * 10); } + .right-11-ns { right: calc(var(--grid-size) * 11); } + .right-12-ns { right: calc(var(--grid-size) * 12); } + .right-13-ns { right: calc(var(--grid-size) * 13); } + .right-14-ns { right: calc(var(--grid-size) * 14); } + .right-15-ns { right: calc(var(--grid-size) * 15); } + .right-16-ns { right: calc(var(--grid-size) * 16); } + .right-17-ns { right: calc(var(--grid-size) * 17); } + .right-18-ns { right: calc(var(--grid-size) * 18); } + .right-19-ns { right: calc(var(--grid-size) * 19); } + .right-20-ns { right: calc(var(--grid-size) * 20); } + .right-25-ns { right: calc(var(--grid-size) * 25); } + .right-30-ns { right: calc(var(--grid-size) * 30); } + .right-40-ns { right: calc(var(--grid-size) * 40); } + .right-50-ns { right: calc(var(--grid-size) * 50); } + + .bottom-0-ns { bottom: 0; } + .bottom-1-ns { bottom: calc(var(--grid-size) * 1); } + .bottom-2-ns { bottom: calc(var(--grid-size) * 2); } + .bottom-3-ns { bottom: calc(var(--grid-size) * 3); } + .bottom-4-ns { bottom: calc(var(--grid-size) * 4); } + .bottom-5-ns { bottom: calc(var(--grid-size) * 5); } + .bottom-6-ns { bottom: calc(var(--grid-size) * 6); } + .bottom-7-ns { bottom: calc(var(--grid-size) * 7); } + .bottom-8-ns { bottom: calc(var(--grid-size) * 8); } + .bottom-9-ns { bottom: calc(var(--grid-size) * 9); } + .bottom-10-ns { bottom: calc(var(--grid-size) * 10); } + .bottom-11-ns { bottom: calc(var(--grid-size) * 11); } + .bottom-12-ns { bottom: calc(var(--grid-size) * 12); } + .bottom-13-ns { bottom: calc(var(--grid-size) * 13); } + .bottom-14-ns { bottom: calc(var(--grid-size) * 14); } + .bottom-15-ns { bottom: calc(var(--grid-size) * 15); } + .bottom-16-ns { bottom: calc(var(--grid-size) * 16); } + .bottom-17-ns { bottom: calc(var(--grid-size) * 17); } + .bottom-18-ns { bottom: calc(var(--grid-size) * 18); } + .bottom-19-ns { bottom: calc(var(--grid-size) * 19); } + .bottom-20-ns { bottom: calc(var(--grid-size) * 20); } + .bottom-25-ns { bottom: calc(var(--grid-size) * 25); } + .bottom-30-ns { bottom: calc(var(--grid-size) * 30); } + .bottom-40-ns { bottom: calc(var(--grid-size) * 40); } + .bottom-50-ns { bottom: calc(var(--grid-size) * 50); } + + .left-0-ns { left: 0; } + .left-1-ns { left: calc(var(--grid-size) * 1); } + .left-2-ns { left: calc(var(--grid-size) * 2); } + .left-3-ns { left: calc(var(--grid-size) * 3); } + .left-4-ns { left: calc(var(--grid-size) * 4); } + .left-5-ns { left: calc(var(--grid-size) * 5); } + .left-6-ns { left: calc(var(--grid-size) * 6); } + .left-7-ns { left: calc(var(--grid-size) * 7); } + .left-8-ns { left: calc(var(--grid-size) * 8); } + .left-9-ns { left: calc(var(--grid-size) * 9); } + .left-10-ns { left: calc(var(--grid-size) * 10); } + .left-11-ns { left: calc(var(--grid-size) * 11); } + .left-12-ns { left: calc(var(--grid-size) * 12); } + .left-13-ns { left: calc(var(--grid-size) * 13); } + .left-14-ns { left: calc(var(--grid-size) * 14); } + .left-15-ns { left: calc(var(--grid-size) * 15); } + .left-16-ns { left: calc(var(--grid-size) * 16); } + .left-17-ns { left: calc(var(--grid-size) * 17); } + .left-18-ns { left: calc(var(--grid-size) * 18); } + .left-19-ns { left: calc(var(--grid-size) * 19); } + .left-20-ns { left: calc(var(--grid-size) * 20); } + .left-25-ns { left: calc(var(--grid-size) * 25); } + .left-30-ns { left: calc(var(--grid-size) * 30); } + .left-40-ns { left: calc(var(--grid-size) * 40); } + .left-50-ns { left: calc(var(--grid-size) * 50); } + + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media (--breakpoint-medium) { + .top-0-m { top: 0; } + .top-1-m { top: calc(var(--grid-size) * 1); } + .top-2-m { top: calc(var(--grid-size) * 2); } + .top-3-m { top: calc(var(--grid-size) * 3); } + .top-4-m { top: calc(var(--grid-size) * 4); } + .top-5-m { top: calc(var(--grid-size) * 5); } + .top-6-m { top: calc(var(--grid-size) * 6); } + .top-7-m { top: calc(var(--grid-size) * 7); } + .top-8-m { top: calc(var(--grid-size) * 8); } + .top-9-m { top: calc(var(--grid-size) * 9); } + .top-10-m { top: calc(var(--grid-size) * 10); } + .top-11-m { top: calc(var(--grid-size) * 11); } + .top-12-m { top: calc(var(--grid-size) * 12); } + .top-13-m { top: calc(var(--grid-size) * 13); } + .top-14-m { top: calc(var(--grid-size) * 14); } + .top-15-m { top: calc(var(--grid-size) * 15); } + .top-16-m { top: calc(var(--grid-size) * 16); } + .top-17-m { top: calc(var(--grid-size) * 17); } + .top-18-m { top: calc(var(--grid-size) * 18); } + .top-19-m { top: calc(var(--grid-size) * 19); } + .top-20-m { top: calc(var(--grid-size) * 20); } + .top-25-m { top: calc(var(--grid-size) * 25); } + .top-30-m { top: calc(var(--grid-size) * 30); } + .top-40-m { top: calc(var(--grid-size) * 40); } + .top-50-m { top: calc(var(--grid-size) * 50); } + + .right-0-m { right: 0; } + .right-1-m { right: calc(var(--grid-size) * 1); } + .right-2-m { right: calc(var(--grid-size) * 2); } + .right-3-m { right: calc(var(--grid-size) * 3); } + .right-4-m { right: calc(var(--grid-size) * 4); } + .right-5-m { right: calc(var(--grid-size) * 5); } + .right-6-m { right: calc(var(--grid-size) * 6); } + .right-7-m { right: calc(var(--grid-size) * 7); } + .right-8-m { right: calc(var(--grid-size) * 8); } + .right-9-m { right: calc(var(--grid-size) * 9); } + .right-10-m { right: calc(var(--grid-size) * 10); } + .right-11-m { right: calc(var(--grid-size) * 11); } + .right-12-m { right: calc(var(--grid-size) * 12); } + .right-13-m { right: calc(var(--grid-size) * 13); } + .right-14-m { right: calc(var(--grid-size) * 14); } + .right-15-m { right: calc(var(--grid-size) * 15); } + .right-16-m { right: calc(var(--grid-size) * 16); } + .right-17-m { right: calc(var(--grid-size) * 17); } + .right-18-m { right: calc(var(--grid-size) * 18); } + .right-19-m { right: calc(var(--grid-size) * 19); } + .right-20-m { right: calc(var(--grid-size) * 20); } + .right-25-m { right: calc(var(--grid-size) * 25); } + .right-30-m { right: calc(var(--grid-size) * 30); } + .right-40-m { right: calc(var(--grid-size) * 40); } + .right-50-m { right: calc(var(--grid-size) * 50); } + + .bottom-0-m { bottom: 0; } + .bottom-1-m { bottom: calc(var(--grid-size) * 1); } + .bottom-2-m { bottom: calc(var(--grid-size) * 2); } + .bottom-3-m { bottom: calc(var(--grid-size) * 3); } + .bottom-4-m { bottom: calc(var(--grid-size) * 4); } + .bottom-5-m { bottom: calc(var(--grid-size) * 5); } + .bottom-6-m { bottom: calc(var(--grid-size) * 6); } + .bottom-7-m { bottom: calc(var(--grid-size) * 7); } + .bottom-8-m { bottom: calc(var(--grid-size) * 8); } + .bottom-9-m { bottom: calc(var(--grid-size) * 9); } + .bottom-10-m { bottom: calc(var(--grid-size) * 10); } + .bottom-11-m { bottom: calc(var(--grid-size) * 11); } + .bottom-12-m { bottom: calc(var(--grid-size) * 12); } + .bottom-13-m { bottom: calc(var(--grid-size) * 13); } + .bottom-14-m { bottom: calc(var(--grid-size) * 14); } + .bottom-15-m { bottom: calc(var(--grid-size) * 15); } + .bottom-16-m { bottom: calc(var(--grid-size) * 16); } + .bottom-17-m { bottom: calc(var(--grid-size) * 17); } + .bottom-18-m { bottom: calc(var(--grid-size) * 18); } + .bottom-19-m { bottom: calc(var(--grid-size) * 19); } + .bottom-20-m { bottom: calc(var(--grid-size) * 20); } + .bottom-25-m { bottom: calc(var(--grid-size) * 25); } + .bottom-30-m { bottom: calc(var(--grid-size) * 30); } + .bottom-40-m { bottom: calc(var(--grid-size) * 40); } + .bottom-50-m { bottom: calc(var(--grid-size) * 50); } + + .left-0-m { left: 0; } + .left-1-m { left: calc(var(--grid-size) * 1); } + .left-2-m { left: calc(var(--grid-size) * 2); } + .left-3-m { left: calc(var(--grid-size) * 3); } + .left-4-m { left: calc(var(--grid-size) * 4); } + .left-5-m { left: calc(var(--grid-size) * 5); } + .left-6-m { left: calc(var(--grid-size) * 6); } + .left-7-m { left: calc(var(--grid-size) * 7); } + .left-8-m { left: calc(var(--grid-size) * 8); } + .left-9-m { left: calc(var(--grid-size) * 9); } + .left-10-m { left: calc(var(--grid-size) * 10); } + .left-11-m { left: calc(var(--grid-size) * 11); } + .left-12-m { left: calc(var(--grid-size) * 12); } + .left-13-m { left: calc(var(--grid-size) * 13); } + .left-14-m { left: calc(var(--grid-size) * 14); } + .left-15-m { left: calc(var(--grid-size) * 15); } + .left-16-m { left: calc(var(--grid-size) * 16); } + .left-17-m { left: calc(var(--grid-size) * 17); } + .left-18-m { left: calc(var(--grid-size) * 18); } + .left-19-m { left: calc(var(--grid-size) * 19); } + .left-20-m { left: calc(var(--grid-size) * 20); } + .left-25-m { left: calc(var(--grid-size) * 25); } + .left-30-m { left: calc(var(--grid-size) * 30); } + .left-40-m { left: calc(var(--grid-size) * 40); } + .left-50-m { left: calc(var(--grid-size) * 50); } + + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media (--breakpoint-large) { + .top-0-l { top: 0; } + .top-1-l { top: calc(var(--grid-size) * 1); } + .top-2-l { top: calc(var(--grid-size) * 2); } + .top-3-l { top: calc(var(--grid-size) * 3); } + .top-4-l { top: calc(var(--grid-size) * 4); } + .top-5-l { top: calc(var(--grid-size) * 5); } + .top-6-l { top: calc(var(--grid-size) * 6); } + .top-7-l { top: calc(var(--grid-size) * 7); } + .top-8-l { top: calc(var(--grid-size) * 8); } + .top-9-l { top: calc(var(--grid-size) * 9); } + .top-10-l { top: calc(var(--grid-size) * 10); } + .top-11-l { top: calc(var(--grid-size) * 11); } + .top-12-l { top: calc(var(--grid-size) * 12); } + .top-13-l { top: calc(var(--grid-size) * 13); } + .top-14-l { top: calc(var(--grid-size) * 14); } + .top-15-l { top: calc(var(--grid-size) * 15); } + .top-16-l { top: calc(var(--grid-size) * 16); } + .top-17-l { top: calc(var(--grid-size) * 17); } + .top-18-l { top: calc(var(--grid-size) * 18); } + .top-19-l { top: calc(var(--grid-size) * 19); } + .top-20-l { top: calc(var(--grid-size) * 20); } + .top-25-l { top: calc(var(--grid-size) * 25); } + .top-30-l { top: calc(var(--grid-size) * 30); } + .top-40-l { top: calc(var(--grid-size) * 40); } + .top-50-l { top: calc(var(--grid-size) * 50); } + + .right-0-l { right: 0; } + .right-1-l { right: calc(var(--grid-size) * 1); } + .right-2-l { right: calc(var(--grid-size) * 2); } + .right-3-l { right: calc(var(--grid-size) * 3); } + .right-4-l { right: calc(var(--grid-size) * 4); } + .right-5-l { right: calc(var(--grid-size) * 5); } + .right-6-l { right: calc(var(--grid-size) * 6); } + .right-7-l { right: calc(var(--grid-size) * 7); } + .right-8-l { right: calc(var(--grid-size) * 8); } + .right-9-l { right: calc(var(--grid-size) * 9); } + .right-10-l { right: calc(var(--grid-size) * 10); } + .right-11-l { right: calc(var(--grid-size) * 11); } + .right-12-l { right: calc(var(--grid-size) * 12); } + .right-13-l { right: calc(var(--grid-size) * 13); } + .right-14-l { right: calc(var(--grid-size) * 14); } + .right-15-l { right: calc(var(--grid-size) * 15); } + .right-16-l { right: calc(var(--grid-size) * 16); } + .right-17-l { right: calc(var(--grid-size) * 17); } + .right-18-l { right: calc(var(--grid-size) * 18); } + .right-19-l { right: calc(var(--grid-size) * 19); } + .right-20-l { right: calc(var(--grid-size) * 20); } + .right-25-l { right: calc(var(--grid-size) * 25); } + .right-30-l { right: calc(var(--grid-size) * 30); } + .right-40-l { right: calc(var(--grid-size) * 40); } + .right-50-l { right: calc(var(--grid-size) * 50); } + + .bottom-0-l { bottom: 0; } + .bottom-1-l { bottom: calc(var(--grid-size) * 1); } + .bottom-2-l { bottom: calc(var(--grid-size) * 2); } + .bottom-3-l { bottom: calc(var(--grid-size) * 3); } + .bottom-4-l { bottom: calc(var(--grid-size) * 4); } + .bottom-5-l { bottom: calc(var(--grid-size) * 5); } + .bottom-6-l { bottom: calc(var(--grid-size) * 6); } + .bottom-7-l { bottom: calc(var(--grid-size) * 7); } + .bottom-8-l { bottom: calc(var(--grid-size) * 8); } + .bottom-9-l { bottom: calc(var(--grid-size) * 9); } + .bottom-10-l { bottom: calc(var(--grid-size) * 10); } + .bottom-11-l { bottom: calc(var(--grid-size) * 11); } + .bottom-12-l { bottom: calc(var(--grid-size) * 12); } + .bottom-13-l { bottom: calc(var(--grid-size) * 13); } + .bottom-14-l { bottom: calc(var(--grid-size) * 14); } + .bottom-15-l { bottom: calc(var(--grid-size) * 15); } + .bottom-16-l { bottom: calc(var(--grid-size) * 16); } + .bottom-17-l { bottom: calc(var(--grid-size) * 17); } + .bottom-18-l { bottom: calc(var(--grid-size) * 18); } + .bottom-19-l { bottom: calc(var(--grid-size) * 19); } + .bottom-20-l { bottom: calc(var(--grid-size) * 20); } + .bottom-25-l { bottom: calc(var(--grid-size) * 25); } + .bottom-30-l { bottom: calc(var(--grid-size) * 30); } + .bottom-40-l { bottom: calc(var(--grid-size) * 40); } + .bottom-50-l { bottom: calc(var(--grid-size) * 50); } + + .left-0-l { left: 0; } + .left-1-l { left: calc(var(--grid-size) * 1); } + .left-2-l { left: calc(var(--grid-size) * 2); } + .left-3-l { left: calc(var(--grid-size) * 3); } + .left-4-l { left: calc(var(--grid-size) * 4); } + .left-5-l { left: calc(var(--grid-size) * 5); } + .left-6-l { left: calc(var(--grid-size) * 6); } + .left-7-l { left: calc(var(--grid-size) * 7); } + .left-8-l { left: calc(var(--grid-size) * 8); } + .left-9-l { left: calc(var(--grid-size) * 9); } + .left-10-l { left: calc(var(--grid-size) * 10); } + .left-11-l { left: calc(var(--grid-size) * 11); } + .left-12-l { left: calc(var(--grid-size) * 12); } + .left-13-l { left: calc(var(--grid-size) * 13); } + .left-14-l { left: calc(var(--grid-size) * 14); } + .left-15-l { left: calc(var(--grid-size) * 15); } + .left-16-l { left: calc(var(--grid-size) * 16); } + .left-17-l { left: calc(var(--grid-size) * 17); } + .left-18-l { left: calc(var(--grid-size) * 18); } + .left-19-l { left: calc(var(--grid-size) * 19); } + .left-20-l { left: calc(var(--grid-size) * 20); } + .left-25-l { left: calc(var(--grid-size) * 25); } + .left-30-l { left: calc(var(--grid-size) * 30); } + .left-40-l { left: calc(var(--grid-size) * 40); } + .left-50-l { left: calc(var(--grid-size) * 50); } + + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} diff --git a/ghost/admin/app/styles/spirit/_custom-styles.css b/ghost/admin/app/styles/spirit/_custom-styles.css new file mode 100644 index 0000000000..12364d2224 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_custom-styles.css @@ -0,0 +1,315 @@ +/* + + Namespaces: + gh- = client related classes + +*/ + + +/* +* Generic +---------------------------------------------------------- */ +.pointer { + cursor: pointer; +} + + +/* Buttons */ +button, .btn-base { + transition: none; + text-decoration: none!important; + user-select: none; + outline: none; + padding: 0px; +} + +.btn-base span { + padding: 0 14px; + height: 33px; + line-height: 33px; + border-radius: 4px; +} + +/* Blue button */ +.btn-blue { + padding: 1px; + background: linear-gradient( + color-mod(var(--blue) blackness(+10%)), + color-mod(var(--blue) lightness(-15%) saturation(-15%)) + ); + text-shadow: 0 -1px 0 rgba(0,0,0,.1); + box-shadow: 0 1px 0 rgba(0,0,0,.12); +} + +.btn-blue span { + background: linear-gradient( + color-mod(var(--blue) whiteness(+7%)), + color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%, + color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%, + color-mod(var(--blue) lightness(-4%) saturation(-10%)) + ); + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1); +} +.btn-blue:active, +.btn-blue:focus { + background: color-mod(var(--blue) lightness(-20%) saturation(-15%)); +} +.btn-blue:active span, +.btn-blue:focus span { + background: color-mod(var(--blue) lightness(-7%) saturation(-10%)); + box-shadow: none; +} + +/* Green button */ +.btn-green { + padding: 1px; + background: linear-gradient( + color-mod(var(--green) blackness(+7%)), + color-mod(var(--green) lightness(-10%) saturation(-10%)) + ); + text-shadow: 0 -1px 0 rgba(0,0,0,.1); + box-shadow: 0 1px 0 rgba(0,0,0,.12); +} + +.btn-green span { + background: linear-gradient( + color-mod(var(--green) whiteness(+5%)), + color-mod(var(--green) lightness(-4%) saturation(-8%)) 60%, + color-mod(var(--green) lightness(-4%) saturation(-8%)) 90%, + color-mod(var(--green) lightness(-4%) saturation(-10%)) + ); + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1); +} + +.btn-green:active, +.btn-green:focus { + background: color-mod(var(--green) lightness(-10%) saturation(-10%)); +} +.btn-green:active span, +.btn-green:focus span { + background: color-mod(var(--green) lightness(-4%) saturation(-8%)); + box-shadow: none; +} + + +/* Red button */ +.btn-red { + padding: 1px; + background: linear-gradient( + color-mod(var(--red) blackness(+10%)), + color-mod(var(--red) lightness(-15%) saturation(-15%)) + ); + text-shadow: 0 -1px 0 rgba(0,0,0,.1); + box-shadow: 0 1px 0 rgba(0,0,0,.12); +} + +.btn-red span { + background: linear-gradient( + color-mod(var(--red) whiteness(+7%)), + color-mod(var(--red) lightness(-7%) saturation(-10%)) 60%, + color-mod(var(--red) lightness(-7%) saturation(-10%)) 90%, + color-mod(var(--red) lightness(-4%) saturation(-10%)) + ); + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1); +} + +.btn-red:active, +.btn-red:focus { + background: color-mod(var(--red) lightness(-20%) saturation(-15%)); +} +.btn-red:active span, +.btn-red:focus span { + background: color-mod(var(--red) lightness(-7%) saturation(-10%)); + box-shadow: none; +} + +.btn-small span { + padding: 0 10px; + height: 26px; + line-height: 26px; +} + + +/* +* Client styles +---------------------------------------------------------- */ +.gh-nav-link:hover { + background: rgba(62,176,239,.15); +} + +.gh-logo svg g { + fill: white; + opacity: 1.0; +} + +.overlay-dark { + background: rgba(50,71,80,.85); +} + +.list-miw { + min-height: 92px; +} + +.list-item-hover:hover { + background: rgba(62,176,239,.08); + /* background: rgba(62, 176, 239, 0.08); */ +} + +.dropdown-arrow { + width: 10px; + height: 10px; +} + + +/* Tooltip Styles */ +[data-tooltip] { + position: relative; + z-index: 2; + cursor: pointer; +} + +[data-tooltip]:before, +[data-tooltip]:after { + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: all 200ms ease; +} + +[data-tooltip]:before { + position: absolute; + bottom: 110%; + white-space: nowrap; + padding: 6px 8px; + border-radius: 4px; + background-color: var(--darkgrey); + color: var(--white); + content: attr(data-tooltip); + text-align: center; + font-size: 1.3rem; + letter-spacing: 0.2px; +} + +[data-tooltip]:hover:before, +[data-tooltip]:hover:after { + visibility: visible; + opacity: 1; +} + + +/* Errors */ +.error-background { + width: 406px; + height: 288px; +} + +.error-code-size { + font-size: 7.8rem; + line-height: 0.4em; +} + +/* 404 Error animation */ + +@keyframes travel-1 { + 5% { + opacity: 1.0; + } + 25% { + opacity: 1.0; + } + 30% { + left: 406px; + opacity: 0.0; + } +} + +@keyframes bounce-1 { + from, to { + bottom: 0px; + animation-timing-function: ease-out; + } + 50% { + bottom: 20px; + animation-timing-function: ease-in; + } + 100% { + transform: rotate(1400deg); + } +} + +@keyframes travel-2 { + 2% { + opacity: 1.0; + } + 16% { + opacity: 1.0; + } + 20% { + left: 0px; + opacity: 0.0; + } +} + +@keyframes bounce-2 { + from, to { + bottom: -20px; + animation-timing-function: ease-out; + } + 50% { + bottom: 30px; + animation-timing-function: ease-in; + } + 100% { + transform: rotate(-1200deg); + } +} + +.traveler-1 { + position: absolute; + width: 24px; + height: 240px; + opacity: 0.0; + top: 10px; + left: 0; + + animation-name: travel-1; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-duration: 4.5s; + animation-delay: 3.7s; +} + +.bouncer-1 { + position: absolute; + width: 24px; + height: 24px; + + animation-name: bounce-1; + animation-iteration-count: infinite; + animation-duration: 0.55s; +} + +.traveler-2 { + position: absolute; + width: 44px; + height: 240px; + opacity: 0.0; + top: 10px; + left: 406px; + + animation-name: travel-2; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-duration: 6.5s; + animation-delay: 1.5s; +} + +.bouncer-2 { + position: absolute; + width: 44px; + height: 44px; + + animation-name: bounce-2; + animation-iteration-count: infinite; + animation-duration: 0.7s; +} diff --git a/ghost/admin/app/styles/spirit/_debug-children.css b/ghost/admin/app/styles/spirit/_debug-children.css new file mode 100644 index 0000000000..10204dacc2 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_debug-children.css @@ -0,0 +1,14 @@ +/* + + DEBUG CHILDREN + Docs: http://tachyons.io/docs/debug/ + + Just add the debug class to any element to see outlines on its + children. + +*/ + +.debug * { outline: 1px solid gold; } +.debug-white * { outline: 1px solid white; } +.debug-black * { outline: 1px solid black; } + diff --git a/ghost/admin/app/styles/spirit/_debug-grid.css b/ghost/admin/app/styles/spirit/_debug-grid.css new file mode 100644 index 0000000000..8bb85bc567 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_debug-grid.css @@ -0,0 +1,26 @@ +/* + + DEBUG GRID + http://tachyons.io/docs/debug-grid/ + + Can be useful for debugging layout issues + or helping to make sure things line up perfectly. + Just tack one of these classes onto a parent element. + +*/ + +.debug-grid { + background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left; +} + +.debug-grid-16 { + background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left; +} + +.debug-grid-8-solid { + background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left; +} + +.debug-grid-16-solid { + background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left; +} diff --git a/ghost/admin/app/styles/spirit/_debug.css b/ghost/admin/app/styles/spirit/_debug.css new file mode 100644 index 0000000000..f09f2b5190 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_debug.css @@ -0,0 +1,132 @@ +/* + + DEBUG (PESTICIDE) + Docs: http://tachyons.io/docs/debug/ + + This is a partial you have to manually include in your + build file. It places a different colored outline on + each element which can help you debug layout issues. + There is also a handy chrome extension that can + be found at http://pesticide.io + +*/ + +body { outline: 1px solid #2980B9!important; } +article { outline: 1px solid #3498DB!important; } +nav { outline: 1px solid #0088C3!important; } +aside { outline: 1px solid #33A0CE!important; } +section { outline: 1px solid #66B8DA!important; } +header { outline: 1px solid #99CFE7!important; } +footer { outline: 1px solid #CCE7F3!important; } +h1 { outline: 1px solid #162544!important; } +h2 { outline: 1px solid #314E6E!important; } +h3 { outline: 1px solid #3E5E85!important; } +h4 { outline: 1px solid #449BAF!important; } +h5 { outline: 1px solid #C7D1CB!important; } +h6 { outline: 1px solid #4371D0!important; } +main { outline: 1px solid #2F4F90!important; } +address { outline: 1px solid #1A2C51!important; } +div { outline: 1px solid #036CDB!important; } + + +p { outline: 1px solid #AC050B!important; } +hr { outline: 1px solid #FF063F!important; } +pre { outline: 1px solid #850440!important; } +blockquote { outline: 1px solid #F1B8E7!important; } +ol { outline: 1px solid #FF050C!important; } +ul { outline: 1px solid #D90416!important; } +li { outline: 1px solid #D90416!important; } +dl { outline: 1px solid #FD3427!important; } +dt { outline: 1px solid #FF0043!important; } +dd { outline: 1px solid #E80174!important; } +figure { outline: 1px solid #FF00BB!important; } +figcaption { outline: 1px solid #BF0032!important; } + + + +table { outline: 1px solid #00CC99!important; } +caption { outline: 1px solid #37FFC4!important; } +thead { outline: 1px solid #98DACA!important; } +tbody { outline: 1px solid #64A7A0!important; } +tfoot { outline: 1px solid #22746B!important; } +tr { outline: 1px solid #86C0B2!important; } +th { outline: 1px solid #A1E7D6!important; } +td { outline: 1px solid #3F5A54!important; } +col { outline: 1px solid #6C9A8F!important; } +colgroup { outline: 1px solid #6C9A9D!important; } + + +button { outline: 1px solid #DA8301!important; } +datalist { outline: 1px solid #C06000!important; } +fieldset { outline: 1px solid #D95100!important; } +form { outline: 1px solid #D23600!important; } +input { outline: 1px solid #FCA600!important; } +keygen { outline: 1px solid #B31E00!important; } +label { outline: 1px solid #EE8900!important; } +legend { outline: 1px solid #DE6D00!important; } +meter { outline: 1px solid #E8630C!important; } +optgroup { outline: 1px solid #B33600!important; } +option { outline: 1px solid #FF8A00!important; } +output { outline: 1px solid #FF9619!important; } +progress { outline: 1px solid #E57C00!important; } +select { outline: 1px solid #E26E0F!important; } +textarea { outline: 1px solid #CC5400!important; } + + + +details { outline: 1px solid #33848F!important; } +summary { outline: 1px solid #60A1A6!important; } +command { outline: 1px solid #438DA1!important; } +menu { outline: 1px solid #449DA6!important; } + + + +del { outline: 1px solid #BF0000!important; } +ins { outline: 1px solid #400000!important; } + + + +img { outline: 1px solid #22746B!important; } +iframe { outline: 1px solid #64A7A0!important; } +embed { outline: 1px solid #98DACA!important; } +object { outline: 1px solid #00CC99!important; } +param { outline: 1px solid #37FFC4!important; } +video { outline: 1px solid #6EE866!important; } +audio { outline: 1px solid #027353!important; } +source { outline: 1px solid #012426!important; } +canvas { outline: 1px solid #A2F570!important; } +track { outline: 1px solid #59A600!important; } +map { outline: 1px solid #7BE500!important; } +area { outline: 1px solid #305900!important; } + + + +a { outline: 1px solid #FF62AB!important; } +em { outline: 1px solid #800B41!important; } +strong { outline: 1px solid #FF1583!important; } +i { outline: 1px solid #803156!important; } +b { outline: 1px solid #CC1169!important; } +u { outline: 1px solid #FF0430!important; } +s { outline: 1px solid #F805E3!important; } +small { outline: 1px solid #D107B2!important; } +abbr { outline: 1px solid #4A0263!important; } +q { outline: 1px solid #240018!important; } +cite { outline: 1px solid #64003C!important; } +dfn { outline: 1px solid #B4005A!important; } +sub { outline: 1px solid #DBA0C8!important; } +sup { outline: 1px solid #CC0256!important; } +time { outline: 1px solid #D6606D!important; } +code { outline: 1px solid #E04251!important; } +kbd { outline: 1px solid #5E001F!important; } +samp { outline: 1px solid #9C0033!important; } +var { outline: 1px solid #D90047!important; } +mark { outline: 1px solid #FF0053!important; } +bdi { outline: 1px solid #BF3668!important; } +bdo { outline: 1px solid #6F1400!important; } +ruby { outline: 1px solid #FF7B93!important; } +rt { outline: 1px solid #FF2F54!important; } +rp { outline: 1px solid #803E49!important; } +span { outline: 1px solid #CC2643!important; } +br { outline: 1px solid #DB687D!important; } +wbr { outline: 1px solid #DB175B!important; } + diff --git a/ghost/admin/app/styles/spirit/_display.css b/ghost/admin/app/styles/spirit/_display.css new file mode 100644 index 0000000000..d145d07ddf --- /dev/null +++ b/ghost/admin/app/styles/spirit/_display.css @@ -0,0 +1,100 @@ +/* + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + t-row = table-row + t-columm = table-column + t-column-group = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.dn { display: none; } +.di { display: inline; } +.db { display: block; } +.dib { display: inline-block; } +.dit { display: inline-table; } +.dt { display: table; } +.dtc { display: table-cell; } +.dt-row { display: table-row; } +.dt-row-group { display: table-row-group; } +.dt-column { display: table-column; } +.dt-column-group { display: table-column-group; } + +/* + This will set table to full width and then + all cells will be equal width +*/ +.dt--fixed { + table-layout: fixed; + width: 100%; +} + +@media (--breakpoint-not-small) { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + + .dt--fixed-ns { + table-layout: fixed; + width: 100%; + } +} + +@media (--breakpoint-medium) { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + + .dt--fixed-m { + table-layout: fixed; + width: 100%; + } +} + +@media (--breakpoint-large) { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + + .dt--fixed-l { + table-layout: fixed; + width: 100%; + } +} diff --git a/ghost/admin/app/styles/spirit/_dropdown.css b/ghost/admin/app/styles/spirit/_dropdown.css new file mode 100644 index 0000000000..6028e99ada --- /dev/null +++ b/ghost/admin/app/styles/spirit/_dropdown.css @@ -0,0 +1,94 @@ +/* Ghost Dropdown +/* -------------------------------------------------------- */ +.trans-from-up { transform: scale(0.9) translateY(-10px); } + +.dd-w1, +.dd-w2, +.dd-w3 { + margin-right: 50%; + pointer-events: none; +} + +.dd-w1 { width: 16rem; right: -8rem; } +.dd-w2 { width: 20rem; right: -10rem; } +.dd-w3 { width: 24rem; right: -12rem; } + +.gd-drop.active .dd-w1, +.gd-drop.active .dd-w2, +.gd-drop.active .dd-w3, +.gd-drop.dropdown-expanded .dd-w1, +.gd-drop.dropdown-expanded .dd-w2, +.gd-drop.dropdown-expanded .dd-w3 { + opacity: 1; + transition: all 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); + transform: scale(1) translateY(0px); + pointer-events: auto; +} + +/* Dropdown triagle */ +.dd-w1:after, +.dd-w3:after, +.dd-w2:after { + content: ""; + position: absolute; + bottom: 100%; + width: 0; + height: 0; + border-width: 0 0.6rem 0.6rem 0.6rem; + border-style: solid; + border-color: #fff transparent; + left: calc(50% - 6px); +} + +.dd-w1:before, +.dd-w3:before, +.dd-w2:before { + content: ""; + position: absolute; + bottom: 100%; + width: 0; + height: 0; + border-width: 0 8px 8px 8px; + border-style: solid; + border-color: rgba(0,0,0,0.07) transparent; + left: calc(50% - 8px); +} + +.dd-up { + top: auto; + bottom: 85%; + right: calc(50% - 12rem); + margin-right: 0; +} + +.dd-up:after, +.dd-up:before { + content: ""; + position: absolute; + top: 100%; + right: auto; + bottom: auto; + width: 0; + height: 0; + border-style: solid; +} + +.dd-up:before { + left: calc(50% - 8px); + border-width: 8px 8px 0; + border-color: rgba(0,0,0,.07) transparent; +} + +.dd-up:after { + left: calc(50% - 6px); + border-width: 6px 6px 0; + border-color: #fff transparent; +} + + +/* TO BE DONE: add all classes (per group) to media queries */ +@media (--breakpoint-not-small) { } + +@media (--breakpoint-medium) { } + +@media (--breakpoint-large) { } diff --git a/ghost/admin/app/styles/spirit/_flexbox.css b/ghost/admin/app/styles/spirit/_flexbox.css new file mode 100644 index 0000000000..5002be7cd7 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_flexbox.css @@ -0,0 +1,250 @@ +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.flex { display: flex; } +.inline-flex { display: inline-flex; } + +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-none { flex: none; } + +.flex-column { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } +.flex-column-reverse { flex-direction: column-reverse; } +.flex-row-reverse { flex-direction: row-reverse; } + +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } + +.self-start { align-self: flex-start; } +.self-end { align-self: flex-end; } +.self-center { align-self: center; } +.self-baseline { align-self: baseline; } +.self-stretch { align-self: stretch; } + +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } + +.content-start { align-content: flex-start; } +.content-end { align-content: flex-end; } +.content-center { align-content: center; } +.content-between { align-content: space-between; } +.content-around { align-content: space-around; } +.content-stretch { align-content: stretch; } + +.order-0 { order: 0; } +.order-1 { order: 1; } +.order-2 { order: 2; } +.order-3 { order: 3; } +.order-4 { order: 4; } +.order-5 { order: 5; } +.order-6 { order: 6; } +.order-7 { order: 7; } +.order-8 { order: 8; } +.order-last { order: 99999; } + +.flex-grow-0 { flex-grow: 0; } +.flex-grow-1 { flex-grow: 1; } + +.flex-shrink-0 { flex-shrink: 0; } +.flex-shrink-1 { flex-shrink: 1; } + +@media (--breakpoint-not-small) { + .flex-ns { display: flex; } + .inline-flex-ns { display: inline-flex; } + .flex-auto-ns { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-ns { flex: none; } + .flex-column-ns { flex-direction: column; } + .flex-row-ns { flex-direction: row; } + .flex-wrap-ns { flex-wrap: wrap; } + .flex-nowrap-ns { flex-wrap: nowrap; } + .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { flex-direction: column-reverse; } + .flex-row-reverse-ns { flex-direction: row-reverse; } + .items-start-ns { align-items: flex-start; } + .items-end-ns { align-items: flex-end; } + .items-center-ns { align-items: center; } + .items-baseline-ns { align-items: baseline; } + .items-stretch-ns { align-items: stretch; } + + .self-start-ns { align-self: flex-start; } + .self-end-ns { align-self: flex-end; } + .self-center-ns { align-self: center; } + .self-baseline-ns { align-self: baseline; } + .self-stretch-ns { align-self: stretch; } + + .justify-start-ns { justify-content: flex-start; } + .justify-end-ns { justify-content: flex-end; } + .justify-center-ns { justify-content: center; } + .justify-between-ns { justify-content: space-between; } + .justify-around-ns { justify-content: space-around; } + + .content-start-ns { align-content: flex-start; } + .content-end-ns { align-content: flex-end; } + .content-center-ns { align-content: center; } + .content-between-ns { align-content: space-between; } + .content-around-ns { align-content: space-around; } + .content-stretch-ns { align-content: stretch; } + + .order-0-ns { order: 0; } + .order-1-ns { order: 1; } + .order-2-ns { order: 2; } + .order-3-ns { order: 3; } + .order-4-ns { order: 4; } + .order-5-ns { order: 5; } + .order-6-ns { order: 6; } + .order-7-ns { order: 7; } + .order-8-ns { order: 8; } + .order-last-ns { order: 99999; } + + .flex-grow-0-ns { flex-grow: 0; } + .flex-grow-1-ns { flex-grow: 1; } + + .flex-shrink-0-ns { flex-shrink: 0; } + .flex-shrink-1-ns { flex-shrink: 1; } +} +@media (--breakpoint-medium) { + .flex-m { display: flex; } + .inline-flex-m { display: inline-flex; } + .flex-auto-m { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-m { flex: none; } + .flex-column-m { flex-direction: column; } + .flex-row-m { flex-direction: row; } + .flex-wrap-m { flex-wrap: wrap; } + .flex-nowrap-m { flex-wrap: nowrap; } + .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } + .flex-column-reverse-m { flex-direction: column-reverse; } + .flex-row-reverse-m { flex-direction: row-reverse; } + .items-start-m { align-items: flex-start; } + .items-end-m { align-items: flex-end; } + .items-center-m { align-items: center; } + .items-baseline-m { align-items: baseline; } + .items-stretch-m { align-items: stretch; } + + .self-start-m { align-self: flex-start; } + .self-end-m { align-self: flex-end; } + .self-center-m { align-self: center; } + .self-baseline-m { align-self: baseline; } + .self-stretch-m { align-self: stretch; } + + .justify-start-m { justify-content: flex-start; } + .justify-end-m { justify-content: flex-end; } + .justify-center-m { justify-content: center; } + .justify-between-m { justify-content: space-between; } + .justify-around-m { justify-content: space-around; } + + .content-start-m { align-content: flex-start; } + .content-end-m { align-content: flex-end; } + .content-center-m { align-content: center; } + .content-between-m { align-content: space-between; } + .content-around-m { align-content: space-around; } + .content-stretch-m { align-content: stretch; } + + .order-0-m { order: 0; } + .order-1-m { order: 1; } + .order-2-m { order: 2; } + .order-3-m { order: 3; } + .order-4-m { order: 4; } + .order-5-m { order: 5; } + .order-6-m { order: 6; } + .order-7-m { order: 7; } + .order-8-m { order: 8; } + .order-last-m { order: 99999; } + + .flex-grow-0-m { flex-grow: 0; } + .flex-grow-1-m { flex-grow: 1; } + + .flex-shrink-0-m { flex-shrink: 0; } + .flex-shrink-1-m { flex-shrink: 1; } +} + +@media (--breakpoint-large) { + .flex-l { display: flex; } + .inline-flex-l { display: inline-flex; } + .flex-auto-l { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-l { flex: none; } + .flex-column-l { flex-direction: column; } + .flex-row-l { flex-direction: row; } + .flex-wrap-l { flex-wrap: wrap; } + .flex-nowrap-l { flex-wrap: nowrap; } + .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } + .flex-column-reverse-l { flex-direction: column-reverse; } + .flex-row-reverse-l { flex-direction: row-reverse; } + + .items-start-l { align-items: flex-start; } + .items-end-l { align-items: flex-end; } + .items-center-l { align-items: center; } + .items-baseline-l { align-items: baseline; } + .items-stretch-l { align-items: stretch; } + + .self-start-l { align-self: flex-start; } + .self-end-l { align-self: flex-end; } + .self-center-l { align-self: center; } + .self-baseline-l { align-self: baseline; } + .self-stretch-l { align-self: stretch; } + + .justify-start-l { justify-content: flex-start; } + .justify-end-l { justify-content: flex-end; } + .justify-center-l { justify-content: center; } + .justify-between-l { justify-content: space-between; } + .justify-around-l { justify-content: space-around; } + + .content-start-l { align-content: flex-start; } + .content-end-l { align-content: flex-end; } + .content-center-l { align-content: center; } + .content-between-l { align-content: space-between; } + .content-around-l { align-content: space-around; } + .content-stretch-l { align-content: stretch; } + + .order-0-l { order: 0; } + .order-1-l { order: 1; } + .order-2-l { order: 2; } + .order-3-l { order: 3; } + .order-4-l { order: 4; } + .order-5-l { order: 5; } + .order-6-l { order: 6; } + .order-7-l { order: 7; } + .order-8-l { order: 8; } + .order-last-l { order: 99999; } + + .flex-grow-0-l { flex-grow: 0; } + .flex-grow-1-l { flex-grow: 1; } + + .flex-shrink-0-l { flex-shrink: 0; } + .flex-shrink-1-l { flex-shrink: 1; } +} diff --git a/ghost/admin/app/styles/spirit/_floats.css b/ghost/admin/app/styles/spirit/_floats.css new file mode 100644 index 0000000000..5b878917eb --- /dev/null +++ b/ghost/admin/app/styles/spirit/_floats.css @@ -0,0 +1,46 @@ +/* + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + + +.fl { float: left; _display: inline; } +.fr { float: right; _display: inline; } +.fn { float: none; } + +@media (--breakpoint-not-small) { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } +} + +@media (--breakpoint-medium) { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } +} + +@media (--breakpoint-large) { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } +} diff --git a/ghost/admin/app/styles/spirit/_font-family.css b/ghost/admin/app/styles/spirit/_font-family.css new file mode 100644 index 0000000000..c8b9a238aa --- /dev/null +++ b/ghost/admin/app/styles/spirit/_font-family.css @@ -0,0 +1,44 @@ +.sans-serif { + font-family: -apple-system, BlinkMacSystemFont, + 'avenir next', avenir, + 'helvetica neue', helvetica, + ubuntu, + roboto, noto, + 'segoe ui', arial, + sans-serif; +} + +.serif { + font-family: georgia, + serif; +} + +.system-sans-serif { + font-family: sans-serif; +} + +.system-serif { + font-family: serif; +} + + +/* Monospaced Typefaces (for code) */ + +/* From http://cssfontstack.com */ +code, .code { + font-family: monospace,monospace; +} + +.courier { + font-family: 'Courier Next', + courier, + monospace; +} + + +/* Sans-Serif Typefaces */ + +.whitney { + font-family: "Whitney SSm A", "Whitney SSm B", + sans-serif; +} diff --git a/ghost/admin/app/styles/spirit/_font-style.css b/ghost/admin/app/styles/spirit/_font-style.css new file mode 100644 index 0000000000..f8869f9ee7 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_font-style.css @@ -0,0 +1,26 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.i { font-style: italic; } +.fs-normal { font-style: normal; } + +@media (--breakpoint-not-small) { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} + +@media (--breakpoint-medium) { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} + +@media (--breakpoint-large) { + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } +} diff --git a/ghost/admin/app/styles/spirit/_font-weight.css b/ghost/admin/app/styles/spirit/_font-weight.css new file mode 100644 index 0000000000..c5ef1a0fd5 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_font-weight.css @@ -0,0 +1,42 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.normal { font-weight: 300; } +.b, b, strong { font-weight: 700; } + +.fw1 { font-weight: 100; } +.fw3 { font-weight: 300; } +.fw4 { font-weight: 400; } +.fw6 { font-weight: 600; } +.fw7 { font-weight: 700; } + + +@media (--breakpoint-not-small) { + .fw1-ns { font-weight: 100; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } +} + +@media (--breakpoint-medium) { + .fw1-m { font-weight: 100; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } +} + +@media (--breakpoint-large) { + .fw1-l { font-weight: 100; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } +} diff --git a/ghost/admin/app/styles/spirit/_forms.css b/ghost/admin/app/styles/spirit/_forms.css new file mode 100644 index 0000000000..9f20a6c731 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_forms.css @@ -0,0 +1,134 @@ +/* + + FORMS + +*/ + +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; +} + +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + border: 0; + padding: 0; +} + +.form-icon { + position: absolute; + top: calc(50% + 2px); + left: 12px; + z-index: 100; + height: 14px; + fill: #a6bac5; +} + +.form-text { + transition: border-color .15s linear; + -webkit-appearance: none; + outline: none; +} + +.form-text::placeholder { + color: var(--midlightgrey); +} + +.form-input-w-icon { + padding-left: 35px; +} + +.form-input-w-button { + padding-right: 77px; +} + +.form-btn-forgot { + right: 1px; + padding: 5px 11px 5px 12px; + border: none; + border-left: 1px solid var(--lightgrey); + background-color: transparent; + top: 27px; + line-height: 1.1em; +} + +.form-response { + top: 0; + right: 0; +} + +.form-checkbox:before { + height: 6px; + left: 6px; + top: 7px; + width: 15px; + border: 2px solid #fff; + border-right: none; + border-top: none; + content: ""; + position: absolute; + transform: rotate(-45deg); + transition: opacity .15s ease-in-out; +} + + +/* The slider */ +.slider { + transition: .4s; +} + +.slider:before { + z-index: 999; + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 1px; + bottom: 1px; + background-color: white; + transition: .3s; + border-radius: 50%; +} + +input:checked + .slider { + background-color: var(--green); + border-color: var(--green-d1); +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(36px); + -ms-transform: translateX(36px); + transform: translateX(36px); +} + +.onofflabel:before { + position: absolute; + content: "ON"; + top: 8px; + left: 12px; + color: var(--white-80); + opacity: 0; + transition: .3s; +} + +.onofflabel:after { + position: absolute; + content: "OFF"; + top: 8px; + left: 34px; + color: var(--lightgrey-d2); + opacity: 1; + transition: .3s; +} + +input:checked + .slider + .onofflabel:before { + opacity: 1; +} + +input:checked + .slider + .onofflabel:after { + opacity: 0; +} diff --git a/ghost/admin/app/styles/spirit/_gradients.css b/ghost/admin/app/styles/spirit/_gradients.css new file mode 100644 index 0000000000..3cb497eb85 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_gradients.css @@ -0,0 +1,99 @@ +.bg-lgr-blue { + background: linear-gradient(color-mod(var(--blue-l3)), color-mod(var(--blue))); +} +.bg-rgr-blue { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--blue-l3)) 0%, color-mod(var(--blue))) 100%; +} + +.bg-lgr-green { + background: linear-gradient(color-mod(var(--green-l3)), color-mod(var(--green))); +} +.bg-rgr-green { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--green-l3)) 0%, color-mod(var(--green))) 100%; +} + +.bg-lgr-purple { + background: linear-gradient(color-mod(var(--purple-l3)), color-mod(var(--purple))); +} +.bg-rgr-purple { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--purple-l3)) 0%, color-mod(var(--purple))) 100%; +} + +.bg-lgr-yellow { + background: linear-gradient(color-mod(var(--yellow-l3)), color-mod(var(--yellow))); +} +.bg-rgr-yellow { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--yellow-l3)) 0%, color-mod(var(--yellow))) 100%; +} + +.bg-lgr-red { + background: linear-gradient(color-mod(var(--red-l3)), color-mod(var(--red))); +} +.bg-rgr-red { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--red-l3)) 0%, color-mod(var(--red))) 100%; +} + +.bg-lgr-pink { + background: linear-gradient(color-mod(var(--pink-l3)), color-mod(var(--pink))); +} +.bg-rgr-pink { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--pink-l3)) 0%, color-mod(var(--pink))) 100%; +} + +.bg-lgr-whitegrey { + background: linear-gradient(color-mod(var(--whitegrey-l2)), color-mod(var(--whitegrey))); +} +.bg-rgr-whitegrey { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--whitegrey-l2)) 0%, color-mod(var(--whitegrey))) 100%; +} + +.bg-lgr-lightgrey { + background: linear-gradient(color-mod(var(--lightgrey-l2)), color-mod(var(--lightgrey))); +} +.bg-rgr-lightgrey { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--lightgrey-l2)) 0%, color-mod(var(--lightgrey))) 100%; +} + +.bg-lgr-midlightgrey { + background: linear-gradient(color-mod(var(--midlightgrey-l2)), color-mod(var(--midlightgrey))); +} +.bg-rgr-midlightgrey { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--midlightgrey-l2)) 0%, color-mod(var(--midlightgrey))) 100%; +} + +.bg-lgr-midgrey { + background: linear-gradient(color-mod(var(--midgrey-l2)), color-mod(var(--midgrey-d1))); +} +.bg-rgr-midgrey { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--midgrey-l2)) 0%, color-mod(var(--midgrey-d1))) 100%; +} + +.bg-lgr-middarkgrey { + background: linear-gradient(color-mod(var(--middarkgrey-l2)), color-mod(var(--middarkgrey-d1))); +} +.bg-rgr-middarkgrey { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--middarkgrey-l2)) 0%, color-mod(var(--middarkgrey-d1))) 100%; +} + +.bg-lgr-darkgrey { + background: linear-gradient(color-mod(var(--darkgrey-l2)), color-mod(var(--darkgrey-d2))); +} +.bg-rgr-darkgrey { + background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--darkgrey-l2)) 0%, color-mod(var(--darkgrey-d2))) 100%; +} + +.bg-image-overlay-top { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px; + color: #fff; + background-image: linear-gradient(180deg,rgba(0,0,0,0.2) 0,transparent 40%,transparent 100%); + opacity: 0; + transition: all 0.15s ease-in-out; +} diff --git a/ghost/admin/app/styles/spirit/_heights.css b/ghost/admin/app/styles/spirit/_heights.css new file mode 100644 index 0000000000..95c6875327 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_heights.css @@ -0,0 +1,187 @@ +/* + + Base: + h = height + + Value: + (n) = (n * grid size) + -(m) = (m)% + -auto = auto + -inherit = inherit + + --------------------------------------------- + + Base: + vh = viewport based height + + Value: + -(m) = (m)vh + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.h1 { height: calc(var(--grid-size) * 1); } +.h2 { height: calc(var(--grid-size) * 2); } +.h3 { height: calc(var(--grid-size) * 3); } +.h4 { height: calc(var(--grid-size) * 4); } +.h5 { height: calc(var(--grid-size) * 5); } +.h6 { height: calc(var(--grid-size) * 6); } +.h7 { height: calc(var(--grid-size) * 7); } +.h8 { height: calc(var(--grid-size) * 8); } +.h9 { height: calc(var(--grid-size) * 9); } +.h10 { height: calc(var(--grid-size) * 10); } +.h11 { height: calc(var(--grid-size) * 11); } +.h12 { height: calc(var(--grid-size) * 12); } +.h13 { height: calc(var(--grid-size) * 13); } +.h14 { height: calc(var(--grid-size) * 14); } +.h15 { height: calc(var(--grid-size) * 15); } +.h16 { height: calc(var(--grid-size) * 16); } +.h17 { height: calc(var(--grid-size) * 17); } +.h18 { height: calc(var(--grid-size) * 18); } +.h19 { height: calc(var(--grid-size) * 19); } +.h20 { height: calc(var(--grid-size) * 20); } +.h25 { height: calc(var(--grid-size) * 25); } +.h30 { height: calc(var(--grid-size) * 30); } +.h40 { height: calc(var(--grid-size) * 40); } +.h50 { height: calc(var(--grid-size) * 50); } +.h70 { height: calc(var(--grid-size) * 70); } + +.h-25 { height: 25%; } +.h-50 { height: 50%; } +.h-75 { height: 75%; } +.h-100 { height: 100%; } + +.vh-25 { height: 25vh; } +.vh-50 { height: 50vh; } +.vh-75 { height: 75vh; } +.vh-100 { height: 100vh; } + +.h-auto { height: auto; } +.h-inherit { height: inherit; } + +@media (--breakpoint-not-small) { + .h1-ns { height: calc(var(--grid-size) * 1); } + .h2-ns { height: calc(var(--grid-size) * 2); } + .h3-ns { height: calc(var(--grid-size) * 3); } + .h4-ns { height: calc(var(--grid-size) * 4); } + .h5-ns { height: calc(var(--grid-size) * 5); } + .h6-ns { height: calc(var(--grid-size) * 6); } + .h7-ns { height: calc(var(--grid-size) * 7); } + .h8-ns { height: calc(var(--grid-size) * 8); } + .h9-ns { height: calc(var(--grid-size) * 9); } + .h10-ns { height: calc(var(--grid-size) * 10); } + .h11-ns { height: calc(var(--grid-size) * 11); } + .h12-ns { height: calc(var(--grid-size) * 12); } + .h13-ns { height: calc(var(--grid-size) * 13); } + .h14-ns { height: calc(var(--grid-size) * 14); } + .h15-ns { height: calc(var(--grid-size) * 15); } + .h16-ns { height: calc(var(--grid-size) * 16); } + .h17-ns { height: calc(var(--grid-size) * 17); } + .h18-ns { height: calc(var(--grid-size) * 18); } + .h19-ns { height: calc(var(--grid-size) * 19); } + .h20-ns { height: calc(var(--grid-size) * 20); } + .h25-ns { height: calc(var(--grid-size) * 25); } + .h30-ns { height: calc(var(--grid-size) * 30); } + .h40-ns { height: calc(var(--grid-size) * 40); } + .h50-ns { height: calc(var(--grid-size) * 50); } + .h70-ns { height: calc(var(--grid-size) * 70); } + + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } +} + +@media (--breakpoint-medium) { + .h1-m { height: calc(var(--grid-size) * 1); } + .h2-m { height: calc(var(--grid-size) * 2); } + .h3-m { height: calc(var(--grid-size) * 3); } + .h4-m { height: calc(var(--grid-size) * 4); } + .h5-m { height: calc(var(--grid-size) * 5); } + .h6-m { height: calc(var(--grid-size) * 6); } + .h7-m { height: calc(var(--grid-size) * 7); } + .h8-m { height: calc(var(--grid-size) * 8); } + .h9-m { height: calc(var(--grid-size) * 9); } + .h10-m { height: calc(var(--grid-size) * 10); } + .h11-m { height: calc(var(--grid-size) * 11); } + .h12-m { height: calc(var(--grid-size) * 12); } + .h13-m { height: calc(var(--grid-size) * 13); } + .h14-m { height: calc(var(--grid-size) * 14); } + .h15-m { height: calc(var(--grid-size) * 15); } + .h16-m { height: calc(var(--grid-size) * 16); } + .h17-m { height: calc(var(--grid-size) * 17); } + .h18-m { height: calc(var(--grid-size) * 18); } + .h19-m { height: calc(var(--grid-size) * 19); } + .h20-m { height: calc(var(--grid-size) * 20); } + .h25-m { height: calc(var(--grid-size) * 25); } + .h30-m { height: calc(var(--grid-size) * 30); } + .h40-m { height: calc(var(--grid-size) * 40); } + .h50-m { height: calc(var(--grid-size) * 50); } + .h70-m { height: calc(var(--grid-size) * 70); } + + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } +} + +@media (--breakpoint-large) { + .h1-l { height: calc(var(--grid-size) * 1); } + .h2-l { height: calc(var(--grid-size) * 2); } + .h3-l { height: calc(var(--grid-size) * 3); } + .h4-l { height: calc(var(--grid-size) * 4); } + .h5-l { height: calc(var(--grid-size) * 5); } + .h6-l { height: calc(var(--grid-size) * 6); } + .h7-l { height: calc(var(--grid-size) * 7); } + .h8-l { height: calc(var(--grid-size) * 8); } + .h9-l { height: calc(var(--grid-size) * 9); } + .h10-l { height: calc(var(--grid-size) * 10); } + .h11-l { height: calc(var(--grid-size) * 11); } + .h12-l { height: calc(var(--grid-size) * 12); } + .h13-l { height: calc(var(--grid-size) * 13); } + .h14-l { height: calc(var(--grid-size) * 14); } + .h15-l { height: calc(var(--grid-size) * 15); } + .h16-l { height: calc(var(--grid-size) * 16); } + .h17-l { height: calc(var(--grid-size) * 17); } + .h18-l { height: calc(var(--grid-size) * 18); } + .h19-l { height: calc(var(--grid-size) * 19); } + .h20-l { height: calc(var(--grid-size) * 20); } + .h25-l { height: calc(var(--grid-size) * 25); } + .h30-l { height: calc(var(--grid-size) * 30); } + .h40-l { height: calc(var(--grid-size) * 40); } + .h50-l { height: calc(var(--grid-size) * 50); } + .h70-l { height: calc(var(--grid-size) * 70); } + + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } +} diff --git a/ghost/admin/app/styles/spirit/_hovers.css b/ghost/admin/app/styles/spirit/_hovers.css new file mode 100644 index 0000000000..c06f1bae03 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_hovers.css @@ -0,0 +1,403 @@ +/* Text colors */ + +.hover-blue:hover, +.hover-blue:focus { color: var(--blue); } +.hover-green:hover, +.hover-green:focus { color: var(--green); } +.hover-purple:hover, +.hover-purple:focus { color: var(--purple); } +.hover-yellow:hover, +.hover-yellow:focus { color: var(--yellow); } +.hover-red:hover, +.hover-red:focus { color: var(--red); } +.hover-pink:hover, +.hover-pink:focus { color: var(--pink); } +.hover-white:hover, +.hover-white:focus { color: var(--white); } + +.hover-white-10:hover, +.hover-white-10:focus { color: var(--white-10); } +.hover-white-20:hover, +.hover-white-20:focus { color: var(--white-20); } +.hover-white-30:hover, +.hover-white-30:focus { color: var(--white-30); } +.hover-white-40:hover, +.hover-white-40:focus { color: var(--white-40); } +.hover-white-50:hover, +.hover-white-50:focus { color: var(--white-50); } +.hover-white-60:hover, +.hover-white-60:focus { color: var(--white-60); } +.hover-white-70:hover, +.hover-white-70:focus { color: var(--white-70); } +.hover-white-80:hover, +.hover-white-80:focus { color: var(--white-80); } +.hover-white-90:hover, +.hover-white-90:focus { color: var(--white-90); } + +.hover-black-10:hover, +.hover-black-10:focus { color: var(--black-10); } +.hover-black-20:hover, +.hover-black-20:focus { color: var(--black-20); } +.hover-black-30:hover, +.hover-black-30:focus { color: var(--black-30); } +.hover-black-40:hover, +.hover-black-40:focus { color: var(--black-40); } +.hover-black-50:hover, +.hover-black-50:focus { color: var(--black-50); } +.hover-black-60:hover, +.hover-black-60:focus { color: var(--black-60); } +.hover-black-70:hover, +.hover-black-70:focus { color: var(--black-70); } +.hover-black-80:hover, +.hover-black-80:focus { color: var(--black-80); } +.hover-black-90:hover, +.hover-black-90:focus { color: var(--black-90); } + +.hover-darkgrey:hover, +.hover-darkgrey:focus { color: var(--darkgrey); } +.hover-middarkgrey:hover, +.hover-middarkgrey:focus { color: var(--middarkgrey); } +.hover-midgrey:hover, +.hover-midgrey:focus { color: var(--midgrey); } +.hover-midlightgrey:hover, +.hover-midlightgrey:focus { color: var(--midlightgrey); } +.hover-lightgrey:hover, +.hover-lightgrey:focus { color: var(--lightgrey); } +.hover-whitegrey:hover, +.hover-whitegrey:focus { color: var(--whitegrey); } + +/* Shades */ +.hover-blue-l3:hover, +.hover-blue-l3:focus { color: var(--blue-l3); } +.hover-blue-l2:hover, +.hover-blue-l2:focus { color: var(--blue-l2); } +.hover-blue-l1:hover, +.hover-blue-l1:focus { color: var(--blue-l1); } +.hover-blue-d1:hover, +.hover-blue-d1:focus { color: var(--blue-d1); } +.hover-blue-d2:hover, +.hover-blue-d2:focus { color: var(--blue-d2); } +.hover-blue-d3:hover, +.hover-blue-d3:focus { color: var(--blue-d3); } + +.hover-green-l3:hover, +.hover-green-l3:focus { color: var(--green-l3); } +.hover-green-l2:hover, +.hover-green-l2:focus { color: var(--green-l2); } +.hover-green-l1:hover, +.hover-green-l1:focus { color: var(--green-l1); } +.hover-green-d1:hover, +.hover-green-d1:focus { color: var(--green-d1); } +.hover-green-d2:hover, +.hover-green-d2:focus { color: var(--green-d2); } +.hover-green-d3:hover, +.hover-green-d3:focus { color: var(--green-d3); } + +.hover-purple-l3:hover, +.hover-purple-l3:focus { color: var(--purple-l3); } +.hover-purple-l2:hover, +.hover-purple-l2:focus { color: var(--purple-l2); } +.hover-purple-l1:hover, +.hover-purple-l1:focus { color: var(--purple-l1); } +.hover-purple-d1:hover, +.hover-purple-d1:focus { color: var(--purple-d1); } +.hover-purple-d2:hover, +.hover-purple-d2:focus { color: var(--purple-d2); } +.hover-purple-d3:hover, +.hover-purple-d3:focus { color: var(--purple-d3); } + +.hover-yellow-l3:hover, +.hover-yellow-l3:focus { color: var(--yellow-l3); } +.hover-yellow-l2:hover, +.hover-yellow-l2:focus { color: var(--yellow-l2); } +.hover-yellow-l1:hover, +.hover-yellow-l1:focus { color: var(--yellow-l1); } +.hover-yellow-d1:hover, +.hover-yellow-d1:focus { color: var(--yellow-d1); } +.hover-yellow-d2:hover, +.hover-yellow-d2:focus { color: var(--yellow-d2); } +.hover-yellow-d3:hover, +.hover-yellow-d3:focus { color: var(--yellow-d3); } + +.hover-red-l3:hover, +.hover-red-l3:focus { color: var(--red-l3); } +.hover-red-l2:hover, +.hover-red-l2:focus { color: var(--red-l2); } +.hover-red-l1:hover, +.hover-red-l1:focus { color: var(--red-l1); } +.hover-red-d1:hover, +.hover-red-d1:focus { color: var(--red-d1); } +.hover-red-d2:hover, +.hover-red-d2:focus { color: var(--red-d2); } +.hover-red-d3:hover, +.hover-red-d3:focus { color: var(--red-d3); } + +.hover-pink-l3:hover, +.hover-pink-l3:focus { color: var(--pink-l3); } +.hover-pink-l2:hover, +.hover-pink-l2:focus { color: var(--pink-l2); } +.hover-pink-l1:hover, +.hover-pink-l1:focus { color: var(--pink-l1); } +.hover-pink-d1:hover, +.hover-pink-d1:focus { color: var(--pink-d1); } +.hover-pink-d2:hover, +.hover-pink-d2:focus { color: var(--pink-d2); } +.hover-pink-d3:hover, +.hover-pink-d3:focus { color: var(--pink-d3); } + +.hover-darkgrey-l2:hover, +.hover-darkgrey-l2:focus { color: var(--darkgrey-l2); } +.hover-darkgrey-l1:hover, +.hover-darkgrey-l1:focus { color: var(--darkgrey-l1); } +.hover-darkgrey-d1:hover, +.hover-darkgrey-d1:focus { color: var(--darkgrey-d1); } +.hover-darkgrey-d2:hover, +.hover-darkgrey-d2:focus { color: var(--darkgrey-d2); } + +.hover-middarkgrey-l2:hover, +.hover-middarkgrey-l2:focus { color: var(--middarkgrey-l2); } +.hover-middarkgrey-l1:hover, +.hover-middarkgrey-l1:focus { color: var(--middarkgrey-l1); } +.hover-middarkgrey-d1:hover, +.hover-middarkgrey-d1:focus { color: var(--middarkgrey-d1); } +.hover-middarkgrey-d2:hover, +.hover-middarkgrey-d2:focus { color: var(--middarkgrey-d2); } + +.hover-midgrey-l2:hover, +.hover-midgrey-l2:focus { color: var(--midgrey-l2); } +.hover-midgrey-l1:hover, +.hover-midgrey-l1:focus { color: var(--midgrey-l1); } +.hover-midgrey-d1:hover, +.hover-midgrey-d1:focus { color: var(--midgrey-d1); } +.hover-midgrey-d2:hover, +.hover-midgrey-d2:focus { color: var(--midgrey-d2); } + +.hover-midlightgrey-l2:hover, +.hover-midlightgrey-l2:focus { color: var(--midlightgrey-l2); } +.hover-midlightgrey-l1:hover, +.hover-midlightgrey-l1:focus { color: var(--midlightgrey-l1); } +.hover-midlightgrey-d1:hover, +.hover-midlightgrey-d1:focus { color: var(--midlightgrey-d1); } +.hover-midlightgrey-d2:hover, +.hover-midlightgrey-d2:focus { color: var(--midlightgrey-d2); } + +.hover-lightgrey-l2:hover, +.hover-lightgrey-l2:focus { color: var(--lightgrey-l2); } +.hover-lightgrey-l1:hover, +.hover-lightgrey-l1:focus { color: var(--lightgrey-l1); } +.hover-lightgrey-d1:hover, +.hover-lightgrey-d1:focus { color: var(--lightgrey-d1); } +.hover-lightgrey-d2:hover, +.hover-lightgrey-d2:focus { color: var(--lightgrey-d2); } + +.hover-whitegrey-l2:hover, +.hover-whitegrey-l2:focus { color: var(--whitegrey-l2); } +.hover-whitegrey-l1:hover, +.hover-whitegrey-l1:focus { color: var(--whitegrey-l1); } +.hover-whitegrey-d1:hover, +.hover-whitegrey-d1:focus { color: var(--whitegrey-d1); } +.hover-whitegrey-d2:hover, +.hover-whitegrey-d2:focus { color: var(--whitegrey-d2); } + +.hover-color-inherit:hover, +.hover-color-inherit:focus { color: inherit; } + +/* Background colors */ +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: var(--blue); } +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: var(--green); } +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: var(--purple); } +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: var(--yellow); } +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: var(--red); } +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: var(--pink); } +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: var(--white); } + +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: var(--white-10); } +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: var(--white-20); } +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: var(--white-30); } +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: var(--white-40); } +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: var(--white-50); } +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: var(--white-60); } +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: var(--white-70); } +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: var(--white-80); } +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: var(--white-90); } + +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: var(--black-10); } +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: var(--black-20); } +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: var(--black-30); } +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: var(--black-40); } +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: var(--black-50); } +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: var(--black-60); } +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: var(--black-70); } +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: var(--black-80); } +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: var(--black-90); } + +.hover-bg-darkgrey:hover, +.hover-bg-darkgrey:focus { background-color: var(--darkgrey); } +.hover-bg-middarkgrey:hover, +.hover-bg-middarkgrey:focus { background-color: var(--middarkgrey); } +.hover-bg-midgrey:hover, +.hover-bg-midgrey:focus { background-color: var(--midgrey); } +.hover-bg-midlightgrey:hover, +.hover-bg-midlightgrey:focus { background-color: var(--midlightgrey); } +.hover-bg-lightgrey:hover, +.hover-bg-lightgrey:focus { background-color: var(--lightgrey); } +.hover-bg-whitegrey:hover, +.hover-bg-whitegrey:focus { background-color: var(--whitegrey); } + +/* Shades */ +.hover-bg-blue-l3:hover, +.hover-bg-blue-l3:focus { background-color: var(--blue-l3); } +.hover-bg-blue-l2:hover, +.hover-bg-blue-l2:focus { background-color: var(--blue-l2); } +.hover-bg-blue-l1:hover, +.hover-bg-blue-l1:focus { background-color: var(--blue-l1); } +.hover-bg-blue-d1:hover, +.hover-bg-blue-d1:focus { background-color: var(--blue-d1); } +.hover-bg-blue-d2:hover, +.hover-bg-blue-d2:focus { background-color: var(--blue-d2); } +.hover-bg-blue-d3:hover, +.hover-bg-blue-d3:focus { background-color: var(--blue-d3); } + +.hover-bg-green-l3:hover, +.hover-bg-green-l3:focus { background-color: var(--green-l3); } +.hover-bg-green-l2:hover, +.hover-bg-green-l2:focus { background-color: var(--green-l2); } +.hover-bg-green-l1:hover, +.hover-bg-green-l1:focus { background-color: var(--green-l1); } +.hover-bg-green-d1:hover, +.hover-bg-green-d1:focus { background-color: var(--green-d1); } +.hover-bg-green-d2:hover, +.hover-bg-green-d2:focus { background-color: var(--green-d2); } +.hover-bg-green-d3:hover, +.hover-bg-green-d3:focus { background-color: var(--green-d3); } + +.hover-bg-purple-l3:hover, +.hover-bg-purple-l3:focus { background-color: var(--purple-l3); } +.hover-bg-purple-l2:hover, +.hover-bg-purple-l2:focus { background-color: var(--purple-l2); } +.hover-bg-purple-l1:hover, +.hover-bg-purple-l1:focus { background-color: var(--purple-l1); } +.hover-bg-purple-d1:hover, +.hover-bg-purple-d1:focus { background-color: var(--purple-d1); } +.hover-bg-purple-d2:hover, +.hover-bg-purple-d2:focus { background-color: var(--purple-d2); } +.hover-bg-purple-d3:hover, +.hover-bg-purple-d3:focus { background-color: var(--purple-d3); } + +.hover-bg-yellow-l3:hover, +.hover-bg-yellow-l3:focus { background-color: var(--yellow-l3); } +.hover-bg-yellow-l2:hover, +.hover-bg-yellow-l2:focus { background-color: var(--yellow-l2); } +.hover-bg-yellow-l1:hover, +.hover-bg-yellow-l1:focus { background-color: var(--yellow-l1); } +.hover-bg-yellow-d1:hover, +.hover-bg-yellow-d1:focus { background-color: var(--yellow-d1); } +.hover-bg-yellow-d2:hover, +.hover-bg-yellow-d2:focus { background-color: var(--yellow-d2); } +.hover-bg-yellow-d3:hover, +.hover-bg-yellow-d3:focus { background-color: var(--yellow-d3); } + +.hover-bg-red-l3:hover, +.hover-bg-red-l3:focus { background-color: var(--red-l3); } +.hover-bg-red-l2:hover, +.hover-bg-red-l2:focus { background-color: var(--red-l2); } +.hover-bg-red-l1:hover, +.hover-bg-red-l1:focus { background-color: var(--red-l1); } +.hover-bg-red-d1:hover, +.hover-bg-red-d1:focus { background-color: var(--red-d1); } +.hover-bg-red-d2:hover, +.hover-bg-red-d2:focus { background-color: var(--red-d2); } +.hover-bg-red-d3:hover, +.hover-bg-red-d3:focus { background-color: var(--red-d3); } + +.hover-bg-pink-l3:hover, +.hover-bg-pink-l3:focus { background-color: var(--pink-l3); } +.hover-bg-pink-l2:hover, +.hover-bg-pink-l2:focus { background-color: var(--pink-l2); } +.hover-bg-pink-l1:hover, +.hover-bg-pink-l1:focus { background-color: var(--pink-l1); } +.hover-bg-pink-d1:hover, +.hover-bg-pink-d1:focus { background-color: var(--pink-d1); } +.hover-bg-pink-d2:hover, +.hover-bg-pink-d2:focus { background-color: var(--pink-d2); } +.hover-bg-pink-d3:hover, +.hover-bg-pink-d3:focus { background-color: var(--pink-d3); } + +.hover-bg-darkgrey-l2:hover, +.hover-bg-darkgrey-l2:focus { background-color: var(--darkgrey-l2); } +.hover-bg-darkgrey-l1:hover, +.hover-bg-darkgrey-l1:focus { background-color: var(--darkgrey-l1); } +.hover-bg-darkgrey-d1:hover, +.hover-bg-darkgrey-d1:focus { background-color: var(--darkgrey-d1); } +.hover-bg-darkgrey-d2:hover, +.hover-bg-darkgrey-d2:focus { background-color: var(--darkgrey-d2); } + +.hover-bg-middarkgrey-l2:hover, +.hover-bg-middarkgrey-l2:focus { background-color: var(--middarkgrey-l2); } +.hover-bg-middarkgrey-l1:hover, +.hover-bg-middarkgrey-l1:focus { background-color: var(--middarkgrey-l1); } +.hover-bg-middarkgrey-d1:hover, +.hover-bg-middarkgrey-d1:focus { background-color: var(--middarkgrey-d1); } +.hover-bg-middarkgrey-d2:hover, +.hover-bg-middarkgrey-d2:focus { background-color: var(--middarkgrey-d2); } + +.hover-bg-midgrey-l2:hover, +.hover-bg-midgrey-l2:focus { background-color: var(--midgrey-l2); } +.hover-bg-midgrey-l1:hover, +.hover-bg-midgrey-l1:focus { background-color: var(--midgrey-l1); } +.hover-bg-midgrey-d1:hover, +.hover-bg-midgrey-d1:focus { background-color: var(--midgrey-d1); } +.hover-bg-midgrey-d2:hover, +.hover-bg-midgrey-d2:focus { background-color: var(--midgrey-d2); } + +.hover-bg-midlightgrey-l2:hover, +.hover-bg-midlightgrey-l2:focus { background-color: var(--midlightgrey-l2); } +.hover-bg-midlightgrey-l1:hover, +.hover-bg-midlightgrey-l1:focus { background-color: var(--midlightgrey-l1); } +.hover-bg-midlightgrey-d1:hover, +.hover-bg-midlightgrey-d1:focus { background-color: var(--midlightgrey-d1); } +.hover-bg-midlightgrey-d2:hover, +.hover-bg-midlightgrey-d2:focus { background-color: var(--midlightgrey-d2); } + +.hover-bg-lightgrey-l2:hover, +.hover-bg-lightgrey-l2:focus { background-color: var(--lightgrey-l2); } +.hover-bg-lightgrey-l1:hover, +.hover-bg-lightgrey-l1:focus { background-color: var(--lightgrey-l1); } +.hover-bg-lightgrey-d1:hover, +.hover-bg-lightgrey-d1:focus { background-color: var(--lightgrey-d1); } +.hover-bg-lightgrey-d2:hover, +.hover-bg-lightgrey-d2:focus { background-color: var(--lightgrey-d2); } + +.hover-bg-whitegrey-l2:hover, +.hover-bg-whitegrey-l2:focus { background-color: var(--whitegrey-l2); } +.hover-bg-whitegrey-l1:hover, +.hover-bg-whitegrey-l1:focus { background-color: var(--whitegrey-l1); } +.hover-bg-whitegrey-d1:hover, +.hover-bg-whitegrey-d1:focus { background-color: var(--whitegrey-d1); } +.hover-bg-whitegrey-d2:hover, +.hover-bg-whitegrey-d2:focus { background-color: var(--whitegrey-d2); } diff --git a/ghost/admin/app/styles/spirit/_icons.css b/ghost/admin/app/styles/spirit/_icons.css new file mode 100644 index 0000000000..5d37d81e1e --- /dev/null +++ b/ghost/admin/app/styles/spirit/_icons.css @@ -0,0 +1,519 @@ +/* + + COLORING ICONS + ---------------------------------------- + Base: + fill = filled icon + stroke = outlined icon + + Value: + -(color) = color + + See _colors.css for available colors. + + + ICON SIZES + ---------------------------------------- + Base: + iw = icon width + ih = icon height + + Value: + 1-6 = size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Icon fill colors */ +.filter-invert { filter: invert(100%); } + +.fill-blue path, +.fill-blue g { fill: var(--blue); } +.fill-green path, +.fill-green g { fill: var(--green); } +.fill-purple path, +.fill-purple g { fill: var(--purple); } +.fill-yellow path, +.fill-yellow g { fill: var(--yellow); } +.fill-red path, +.fill-red g { fill: var(--red); } +.fill-pink path, +.fill-pink g { fill: var(--pink); } +.fill-white path, +.fill-white g { fill: var(--white); } + +.fill-white-10 path, +.fill-white-10 g { fill: var(--white-10); } +.fill-white-20 path, +.fill-white-20 g { fill: var(--white-20); } +.fill-white-30 path, +.fill-white-30 g { fill: var(--white-30); } +.fill-white-40 path, +.fill-white-40 g { fill: var(--white-40); } +.fill-white-50 path, +.fill-white-50 g { fill: var(--white-50); } +.fill-white-60 path, +.fill-white-60 g { fill: var(--white-60); } +.fill-white-70 path, +.fill-white-70 g { fill: var(--white-70); } +.fill-white-80 path, +.fill-white-80 g { fill: var(--white-80); } +.fill-white-90 path, +.fill-white-90 g { fill: var(--white-90); } + +.fill-black-10 path, +.fill-black-10 g { fill: var(--black-10); } +.fill-black-20 path, +.fill-black-20 g { fill: var(--black-20); } +.fill-black-30 path, +.fill-black-30 g { fill: var(--black-30); } +.fill-black-40 path, +.fill-black-40 g { fill: var(--black-40); } +.fill-black-50 path, +.fill-black-50 g { fill: var(--black-50); } +.fill-black-60 path, +.fill-black-60 g { fill: var(--black-60); } +.fill-black-70 path, +.fill-black-70 g { fill: var(--black-70); } +.fill-black-80 path, +.fill-black-80 g { fill: var(--black-80); } +.fill-black-90 path, +.fill-black-90 g { fill: var(--black-90); } + +.fill-darkgrey path, +.fill-darkgrey g { fill: var(--darkgrey); } +.fill-middarkgrey path, +.fill-middarkgrey g { fill: var(--middarkgrey); } +.fill-midgrey path, +.fill-midgrey g { fill: var(--midgrey); } +.fill-midlightgrey path, +.fill-midlightgrey g { fill: var(--midlightgrey); } +.fill-lightgrey path, +.fill-lightgrey g { fill: var(--lightgrey); } +.fill-whitegrey path, +.fill-whitegrey g { fill: var(--whitegrey); } + +/* Shades */ +.fill-blue-l3 path, +.fill-blue-l3 g { fill: var(--blue-l3); } +.fill-blue-l2 path, +.fill-blue-l2 g { fill: var(--blue-l2); } +.fill-blue-l1 path, +.fill-blue-l1 g { fill: var(--blue-l1); } +.fill-blue-d1 path, +.fill-blue-d1 g { fill: var(--blue-d1); } +.fill-blue-d2 path, +.fill-blue-d2 g { fill: var(--blue-d2); } +.fill-blue-d3 path, +.fill-blue-d3 g { fill: var(--blue-d3); } + +.fill-green-l3 path, +.fill-green-l3 g { fill: var(--green-l3); } +.fill-green-l2 path, +.fill-green-l2 g { fill: var(--green-l2); } +.fill-green-l1 path, +.fill-green-l1 g { fill: var(--green-l1); } +.fill-green-d1 path, +.fill-green-d1 g { fill: var(--green-d1); } +.fill-green-d2 path, +.fill-green-d2 g { fill: var(--green-d2); } +.fill-green-d3 path, +.fill-green-d3 g { fill: var(--green-d3); } + +.fill-purple-l3 path, +.fill-purple-l3 g { fill: var(--purple-l3); } +.fill-purple-l2 path, +.fill-purple-l2 g { fill: var(--purple-l2); } +.fill-purple-l1 path, +.fill-purple-l1 g { fill: var(--purple-l1); } +.fill-purple-d1 path, +.fill-purple-d1 g { fill: var(--purple-d1); } +.fill-purple-d2 path, +.fill-purple-d2 g { fill: var(--purple-d2); } +.fill-purple-d3 path, +.fill-purple-d3 g { fill: var(--purple-d3); } + +.fill-yellow-l3 path, +.fill-yellow-l3 g { fill: var(--yellow-l3); } +.fill-yellow-l2 path, +.fill-yellow-l2 g { fill: var(--yellow-l2); } +.fill-yellow-l1 path, +.fill-yellow-l1 g { fill: var(--yellow-l1); } +.fill-yellow-d1 path, +.fill-yellow-d1 g { fill: var(--yellow-d1); } +.fill-yellow-d2 path, +.fill-yellow-d2 g { fill: var(--yellow-d2); } +.fill-yellow-d3 path, +.fill-yellow-d3 g { fill: var(--yellow-d3); } + +.fill-red-l3 path, +.fill-red-l3 g { fill: var(--red-l3); } +.fill-red-l2 path, +.fill-red-l2 g { fill: var(--red-l2); } +.fill-red-l1 path, +.fill-red-l1 g { fill: var(--red-l1); } +.fill-red-d1 path, +.fill-red-d1 g { fill: var(--red-d1); } +.fill-red-d2 path, +.fill-red-d2 g { fill: var(--red-d2); } +.fill-red-d3 path, +.fill-red-d3 g { fill: var(--red-d3); } + +.fill-pink-l3 path, +.fill-pink-l3 g { fill: var(--pink-l3); } +.fill-pink-l2 path, +.fill-pink-l2 g { fill: var(--pink-l2); } +.fill-pink-l1 path, +.fill-pink-l1 g { fill: var(--pink-l1); } +.fill-pink-d1 path, +.fill-pink-d1 g { fill: var(--pink-d1); } +.fill-pink-d2 path, +.fill-pink-d2 g { fill: var(--pink-d2); } +.fill-pink-d3 path, +.fill-pink-d3 g { fill: var(--pink-d3); } + +.fill-darkgrey-l2 path, +.fill-darkgrey-l2 g { fill: var(--darkgrey-l2); } +.fill-darkgrey-l1 path, +.fill-darkgrey-l1 g { fill: var(--darkgrey-l1); } +.fill-darkgrey-d1 path, +.fill-darkgrey-d1 g { fill: var(--darkgrey-d1); } +.fill-darkgrey-d2 path, +.fill-darkgrey-d2 g { fill: var(--darkgrey-d2); } + +.fill-middarkgrey-l2 path, +.fill-middarkgrey-l2 g { fill: var(--middarkgrey-l2); } +.fill-middarkgrey-l1 path, +.fill-middarkgrey-l1 g { fill: var(--middarkgrey-l1); } +.fill-middarkgrey-d1 path, +.fill-middarkgrey-d1 g { fill: var(--middarkgrey-d1); } +.fill-middarkgrey-d2 path, +.fill-middarkgrey-d2 g { fill: var(--middarkgrey-d2); } + +.fill-midgrey-l2 path, +.fill-midgrey-l2 g { fill: var(--midgrey-l2); } +.fill-midgrey-l1 path, +.fill-midgrey-l1 g { fill: var(--midgrey-l1); } +.fill-midgrey-d1 path, +.fill-midgrey-d1 g { fill: var(--midgrey-d1); } +.fill-midgrey-d2 path, +.fill-midgrey-d2 g { fill: var(--midgrey-d2); } + +.fill-midlightgrey-l2 path, +.fill-midlightgrey-l2 g { fill: var(--midlightgrey-l2); } +.fill-midlightgrey-l1 path, +.fill-midlightgrey-l1 g { fill: var(--midlightgrey-l1); } +.fill-midlightgrey-d1 path, +.fill-midlightgrey-d1 g { fill: var(--midlightgrey-d1); } +.fill-midlightgrey-d2 path, +.fill-midlightgrey-d2 g { fill: var(--midlightgrey-d2); } + +.fill-lightgrey-l2 path, +.fill-lightgrey-l2 g { fill: var(--lightgrey-l2); } +.fill-lightgrey-l1 path, +.fill-lightgrey-l1 g { fill: var(--lightgrey-l1); } +.fill-lightgrey-d1 path, +.fill-lightgrey-d1 g { fill: var(--lightgrey-d1); } +.fill-lightgrey-d2 path, +.fill-lightgrey-d2 g { fill: var(--lightgrey-d2); } + +.fill-whitegrey-l2 path, +.fill-whitegrey-l2 g { fill: var(--whitegrey-l2); } +.fill-whitegrey-l1 path, +.fill-whitegrey-l1 g { fill: var(--whitegrey-l1); } +.fill-whitegrey-d1 path, +.fill-whitegrey-d1 g { fill: var(--whitegrey-d1); } +.fill-whitegrey-d2 path, +.fill-whitegrey-d2 g { fill: var(--whitegrey-d2); } + +.fill-color-inherit path, +.fill-color-inherit g { fill: inherit; } + +.fill-white path, +.fill-white g { fill: var(--white) } + + +.stroke-blue path, +.stroke-blue path path, +.stroke-blue g { stroke: var(--blue); } +.stroke-green path, +.stroke-green g { stroke: var(--green); } +.stroke-purple path, +.stroke-purple g { stroke: var(--purple); } +.stroke-yellow path, +.stroke-yellow g { stroke: var(--yellow); } +.stroke-red path, +.stroke-red g { stroke: var(--red); } +.stroke-pink path, +.stroke-pink g { stroke: var(--pink); } +.stroke-white path, +.stroke-white g { stroke: var(--white); } + +.stroke-white-10 path, +.stroke-white-10 g { stroke: var(--white-10); } +.stroke-white-20 path, +.stroke-white-20 g { stroke: var(--white-20); } +.stroke-white-30 path, +.stroke-white-30 g { stroke: var(--white-30); } +.stroke-white-40 path, +.stroke-white-40 g { stroke: var(--white-40); } +.stroke-white-50 path, +.stroke-white-50 g { stroke: var(--white-50); } +.stroke-white-60 path, +.stroke-white-60 g { stroke: var(--white-60); } +.stroke-white-70 path, +.stroke-white-70 g { stroke: var(--white-70); } +.stroke-white-80 path, +.stroke-white-80 g { stroke: var(--white-80); } +.stroke-white-90 path, +.stroke-white-90 g { stroke: var(--white-90); } + +.stroke-black-10 path, +.stroke-black-10 g { stroke: var(--black-10); } +.stroke-black-20 path, +.stroke-black-20 g { stroke: var(--black-20); } +.stroke-black-30 path, +.stroke-black-30 g { stroke: var(--black-30); } +.stroke-black-40 path, +.stroke-black-40 g { stroke: var(--black-40); } +.stroke-black-50 path, +.stroke-black-50 g { stroke: var(--black-50); } +.stroke-black-60 path, +.stroke-black-60 g { stroke: var(--black-60); } +.stroke-black-70 path, +.stroke-black-70 g { stroke: var(--black-70); } +.stroke-black-80 path, +.stroke-black-80 g { stroke: var(--black-80); } +.stroke-black-90 path, +.stroke-black-90 g { stroke: var(--black-90); } + +.stroke-darkgrey path, +.stroke-darkgrey g { stroke: var(--darkgrey); } +.stroke-middarkgrey path, +.stroke-middarkgrey g { stroke: var(--middarkgrey); } +.stroke-midgrey path, +.stroke-midgrey g { stroke: var(--midgrey); } +.stroke-midlightgrey path, +.stroke-midlightgrey g { stroke: var(--midlightgrey); } +.stroke-lightgrey path, +.stroke-lightgrey g { stroke: var(--lightgrey); } +.stroke-whitegrey path, +.stroke-whitegrey g { stroke: var(--whitegrey); } + +/* Shades */ +.stroke-blue-l3 path, +.stroke-blue-l3 g { stroke: var(--blue-l3); } +.stroke-blue-l2 path, +.stroke-blue-l2 g { stroke: var(--blue-l2); } +.stroke-blue-l1 path, +.stroke-blue-l1 g { stroke: var(--blue-l1); } +.stroke-blue-d1 path, +.stroke-blue-d1 g { stroke: var(--blue-d1); } +.stroke-blue-d2 path, +.stroke-blue-d2 g { stroke: var(--blue-d2); } +.stroke-blue-d3 path, +.stroke-blue-d3 g { stroke: var(--blue-d3); } + +.stroke-green-l3 path, +.stroke-green-l3 g { stroke: var(--green-l3); } +.stroke-green-l2 path, +.stroke-green-l2 g { stroke: var(--green-l2); } +.stroke-green-l1 path, +.stroke-green-l1 g { stroke: var(--green-l1); } +.stroke-green-d1 path, +.stroke-green-d1 g { stroke: var(--green-d1); } +.stroke-green-d2 path, +.stroke-green-d2 g { stroke: var(--green-d2); } +.stroke-green-d3 path, +.stroke-green-d3 g { stroke: var(--green-d3); } + +.stroke-purple-l3 path, +.stroke-purple-l3 g { stroke: var(--purple-l3); } +.stroke-purple-l2 path, +.stroke-purple-l2 g { stroke: var(--purple-l2); } +.stroke-purple-l1 path, +.stroke-purple-l1 g { stroke: var(--purple-l1); } +.stroke-purple-d1 path, +.stroke-purple-d1 g { stroke: var(--purple-d1); } +.stroke-purple-d2 path, +.stroke-purple-d2 g { stroke: var(--purple-d2); } +.stroke-purple-d3 path, +.stroke-purple-d3 g { stroke: var(--purple-d3); } + +.stroke-yellow-l3 path, +.stroke-yellow-l3 g { stroke: var(--yellow-l3); } +.stroke-yellow-l2 path, +.stroke-yellow-l2 g { stroke: var(--yellow-l2); } +.stroke-yellow-l1 path, +.stroke-yellow-l1 g { stroke: var(--yellow-l1); } +.stroke-yellow-d1 path, +.stroke-yellow-d1 g { stroke: var(--yellow-d1); } +.stroke-yellow-d2 path, +.stroke-yellow-d2 g { stroke: var(--yellow-d2); } +.stroke-yellow-d3 path, +.stroke-yellow-d3 g { stroke: var(--yellow-d3); } + +.stroke-red-l3 path, +.stroke-red-l3 g { stroke: var(--red-l3); } +.stroke-red-l2 path, +.stroke-red-l2 g { stroke: var(--red-l2); } +.stroke-red-l1 path, +.stroke-red-l1 g { stroke: var(--red-l1); } +.stroke-red-d1 path, +.stroke-red-d1 g { stroke: var(--red-d1); } +.stroke-red-d2 path, +.stroke-red-d2 g { stroke: var(--red-d2); } +.stroke-red-d3 path, +.stroke-red-d3 g { stroke: var(--red-d3); } + +.stroke-pink-l3 path, +.stroke-pink-l3 g { stroke: var(--pink-l3); } +.stroke-pink-l2 path, +.stroke-pink-l2 g { stroke: var(--pink-l2); } +.stroke-pink-l1 path, +.stroke-pink-l1 g { stroke: var(--pink-l1); } +.stroke-pink-d1 path, +.stroke-pink-d1 g { stroke: var(--pink-d1); } +.stroke-pink-d2 path, +.stroke-pink-d2 g { stroke: var(--pink-d2); } +.stroke-pink-d3 path, +.stroke-pink-d3 g { stroke: var(--pink-d3); } + +.stroke-darkgrey-l2 path, +.stroke-darkgrey-l2 g { stroke: var(--darkgrey-l2); } +.stroke-darkgrey-l1 path, +.stroke-darkgrey-l1 g { stroke: var(--darkgrey-l1); } +.stroke-darkgrey-d1 path, +.stroke-darkgrey-d1 g { stroke: var(--darkgrey-d1); } +.stroke-darkgrey-d2 path, +.stroke-darkgrey-d2 g { stroke: var(--darkgrey-d2); } + +.stroke-middarkgrey-l2 path, +.stroke-middarkgrey-l2 g { stroke: var(--middarkgrey-l2); } +.stroke-middarkgrey-l1 path, +.stroke-middarkgrey-l1 g { stroke: var(--middarkgrey-l1); } +.stroke-middarkgrey-d1 path, +.stroke-middarkgrey-d1 g { stroke: var(--middarkgrey-d1); } +.stroke-middarkgrey-d2 path, +.stroke-middarkgrey-d2 g { stroke: var(--middarkgrey-d2); } + +.stroke-midgrey-l2 path, +.stroke-midgrey-l2 g { stroke: var(--midgrey-l2); } +.stroke-midgrey-l1 path, +.stroke-midgrey-l1 g { stroke: var(--midgrey-l1); } +.stroke-midgrey-d1 path, +.stroke-midgrey-d1 g { stroke: var(--midgrey-d1); } +.stroke-midgrey-d2 path, +.stroke-midgrey-d2 g { stroke: var(--midgrey-d2); } + +.stroke-midlightgrey-l2 path, +.stroke-midlightgrey-l2 g { stroke: var(--midlightgrey-l2); } +.stroke-midlightgrey-l1 path, +.stroke-midlightgrey-l1 g { stroke: var(--midlightgrey-l1); } +.stroke-midlightgrey-d1 path, +.stroke-midlightgrey-d1 g { stroke: var(--midlightgrey-d1); } +.stroke-midlightgrey-d2 path, +.stroke-midlightgrey-d2 g { stroke: var(--midlightgrey-d2); } + +.stroke-lightgrey-l2 path, +.stroke-lightgrey-l2 g { stroke: var(--lightgrey-l2); } +.stroke-lightgrey-l1 path, +.stroke-lightgrey-l1 g { stroke: var(--lightgrey-l1); } +.stroke-lightgrey-d1 path, +.stroke-lightgrey-d1 g { stroke: var(--lightgrey-d1); } +.stroke-lightgrey-d2 path, +.stroke-lightgrey-d2 g { stroke: var(--lightgrey-d2); } + +.stroke-whitegrey-l2 path, +.stroke-whitegrey-l2 g { stroke: var(--whitegrey-l2); } +.stroke-whitegrey-l1 path, +.stroke-whitegrey-l1 g { stroke: var(--whitegrey-l1); } +.stroke-whitegrey-d1 path, +.stroke-whitegrey-d1 g { stroke: var(--whitegrey-d1); } +.stroke-whitegrey-d2 path, +.stroke-whitegrey-d2 g { stroke: var(--whitegrey-d2); } + +.stroke-color-inherit path, +.stroke-color-inherit g { stroke: inherit; } + +.stroke-white path, +.stroke-white g { stroke: var(--white) } + + +/* Custom icon sizes */ +.ih1 { height: .8rem; } +.iw1 { width: .8rem; } + +.ih2 { height: 1.2rem; } +.iw2 { width: 1.2rem; } + +.ih3 { height: 1.6rem; } +.iw3 { width: 1.6rem; } + +.ih4 { height: 2.0rem; } +.iw4 { width: 2.0rem; } + +.ih5 { height: 2.4rem; } +.iw5 { width: 2.4rem; } + +.ih6 { height: 3.2rem; } +.iw6 { width: 3.2rem; } + +/* Custom icon stroke sizes */ +.i-strokew--1 path { + stroke-width: 1px; +} + +.i-strokew--2 path { + stroke-width: 2px; +} + + +@media (--breakpoint-not-small) { + .ih1-ns { height: .8rem; } + .iw1-ns { width: .8rem; } + .ih2-ns { height: 1.2rem; } + .iw2-ns { width: 1.2rem; } + .ih3-ns { height: 1.6rem; } + .iw3-ns { width: 1.6rem; } + .ih4-ns { height: 2.0rem; } + .iw4-ns { width: 2.0rem; } + .ih5-ns { height: 2.4rem; } + .iw5-ns { width: 2.4rem; } + .ih6-ns { height: 3.2rem; } + .iw6-ns { width: 3.2rem; } +} + +@media (--breakpoint-medium) { + .ih1-m { height: .8rem; } + .iw1-m { width: .8rem; } + .ih2-m { height: 1.2rem; } + .iw2-m { width: 1.2rem; } + .ih3-m { height: 1.6rem; } + .iw3-m { width: 1.6rem; } + .ih4-m { height: 2.0rem; } + .iw4-m { width: 2.0rem; } + .ih5-m { height: 2.4rem; } + .iw5-m { width: 2.4rem; } + .ih6-m { height: 3.2rem; } + .iw6-m { width: 3.2rem; } +} + +@media (--breakpoint-large) { + .ih1-l { height: .8rem; } + .iw1-l { width: .8rem; } + .ih2-l { height: 1.2rem; } + .iw2-l { width: 1.2rem; } + .ih3-l { height: 1.6rem; } + .iw3-l { width: 1.6rem; } + .ih4-l { height: 2.0rem; } + .iw4-l { width: 2.0rem; } + .ih5-l { height: 2.4rem; } + .iw5-l { width: 2.4rem; } + .ih6-l { height: 3.2rem; } + .iw6-l { width: 3.2rem; } +} diff --git a/ghost/admin/app/styles/spirit/_images.css b/ghost/admin/app/styles/spirit/_images.css new file mode 100644 index 0000000000..73380eacd7 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_images.css @@ -0,0 +1,3 @@ +/* Responsive images! */ + +img { max-width: 100%; } diff --git a/ghost/admin/app/styles/spirit/_koenig-dark.css b/ghost/admin/app/styles/spirit/_koenig-dark.css new file mode 100644 index 0000000000..9538ee33fb --- /dev/null +++ b/ghost/admin/app/styles/spirit/_koenig-dark.css @@ -0,0 +1,96 @@ +/* Koenig overrides for dark theme +/* -------------------------------------------------------------------- */ + + +/* Action bar */ + +.kg-card-left-border { + border-left-color: var(--lightgrey-d1); +} + +.kg-action-bar { + background: var(--extra-darkgrey); + border: 1px solid var(--whitegrey); +} + +.kg-action-bar:after { + border-top-color: var(--extra-darkgrey); +} + +.kg-action-bar:before { + position: absolute; + top: 40px; + left: calc(50% - 10px); + width: 0; + border-top: 10px solid var(--whitegrey); + border-right: 10px solid transparent; + border-left: 10px solid transparent; + content: ""; + font-size: 0; + line-height: 0; +} + +.kg-action-bar-divider { + background: var(--lightgrey); +} + +.kg-action-bar .fill-white g, +.kg-action-bar .fill-white path { + fill: var(--darkgrey); +} + + +/* Card menu */ +.koenig-cardmenu { + background: var(--extra-darkgrey); + box-shadow: 0 0 0 1px rgba(99,114,130,.16), 0 8px 16px rgba(27,39,51,.08); +} + +.kg-cardmenu-card-hover div { + color: var(--middarkgrey-l1); +} + +.kg-cardmenu-card-selected, +.kg-cardmenu-card-hover:hover { + background: var(--whitegrey); +} + +.kg-card-type-codepen g, +.kg-card-type-codepen svg, +.kg-card-type-unsplash g, +.kg-card-type-unsplash svg { + fill: var(--darkgrey); +} + + +/* Card styles */ + +.koenig-editor__editor pre { + border: none; +} + +.koenig-editor .gh-markdown-editor .editor-toolbar { + background: color-mod(var(--whitegrey) l(-2%) s(+2%)); + border-top-color: var(--whitegrey-d2); +} + +.koenig-card-html--editor .CodeMirror { + background: var(--white); +} + +.kg-input-bar:after { + border-top-color: var(--lightgrey); +} + +.kg-link-toolbar { + background: var(--lightgrey); +} + +.kg-link-toolbar a { + color: var(--middarkgrey); +} + +.kg-link-toolbar svg g, +.kg-link-toolbar svg path { + fill: var(--middarkgrey); +} diff --git a/ghost/admin/app/styles/spirit/_koenig.css b/ghost/admin/app/styles/spirit/_koenig.css new file mode 100644 index 0000000000..becf037280 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_koenig.css @@ -0,0 +1,922 @@ +/* Content Styles +/* +/* We use only margin-top to set the vertical spacings. The styles below +/* set up the margin for content pairs (e.g. paragraph preceded by a heading). +/* -------------------------------------------------------------------- */ + +/* Global Koenig content styles +/* -------------------------------------------------------------------- */ +.koenig-editor__editor { + font-family: var(--font-family); + font-size: 1.7rem; + font-weight: 200; + letter-spacing: 0.1px; + color: var(--darkgrey); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; +} + +.koenig-editor__editor.__has-no-content:after { + font-family: georgia,serif; + font-weight: 300; + letter-spacing: .02rem; + line-height: 1.6em; + font-size: 2rem; + color: var(--midgrey-l2); +} + +.koenig-editor__editor video { + max-width: 100%; +} + +/* Reset margins */ + +.koenig-editor__editor p, +.koenig-editor__editor h1, +.koenig-editor__editor h2, +.koenig-editor__editor h3, +.koenig-editor__editor h4, +.koenig-editor__editor h5, +.koenig-editor__editor h6, +.koenig-editor__editor blockquote { + margin: 1.6rem 0 0; + min-width: 100%; + max-width: 100%; +} + + +/* Heading +/* -------------------------------------------------------------------- */ + +.koenig-editor__editor h1, +.koenig-editor__editor h2, +.koenig-editor__editor h3, +.koenig-editor__editor h4, +.koenig-editor__editor h5, +.koenig-editor__editor h6 { + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; + font-weight: 700; +} + +.koenig-editor__editor h1 { + font-size: 3.3rem; + line-height: 1.4em; + letter-spacing: .04rem; +} + +.koenig-editor__editor h2 { + font-size: 2.8rem; + line-height: 1.4em; + letter-spacing: .04rem; +} + +.koenig-editor__editor h3 { + font-size: 2.3rem; + line-height: 1.6em; + letter-spacing: .04rem; +} + +.koenig-editor__editor h4 { + font-size: 2.0rem; + line-height: 1.4em; + letter-spacing: .04rem; +} + +.koenig-editor__editor h5 { + font-size: 1.9rem; + line-height: 1.4em; + letter-spacing: .06rem; +} + +.koenig-editor__editor h6 { + font-size: 1.75rem; + line-height: 1.6em; + letter-spacing: .04rem; +} + + + +.koenig-editor__editor p + h1, +.koenig-editor__editor p + h2, +.koenig-editor__editor p + h3, +.koenig-editor__editor p + h4, +.koenig-editor__editor p + h5, +.koenig-editor__editor p + h6, + +.koenig-editor__editor blockquote + h1, +.koenig-editor__editor blockquote + h2, +.koenig-editor__editor blockquote + h3, +.koenig-editor__editor blockquote + h4, +.koenig-editor__editor blockquote + h5, +.koenig-editor__editor blockquote + h6, + +.koenig-editor__editor ul + h1, +.koenig-editor__editor ul + h2, +.koenig-editor__editor ul + h3, +.koenig-editor__editor ul + h4, +.koenig-editor__editor ul + h5, +.koenig-editor__editor ul + h6, + +.koenig-editor__editor ol + h1, +.koenig-editor__editor ol + h2, +.koenig-editor__editor ol + h3, +.koenig-editor__editor ol + h4, +.koenig-editor__editor ol + h5, +.koenig-editor__editor ol + h6 { + margin: 4.8rem 0 0; +} + +/* Heading 1 vertical rhythm */ + +.koenig-editor__editor h1 + h1 { + margin: 1.4rem 0 0; +} + +.koenig-editor__editor h2 + h1, +.koenig-editor__editor h3 + h1 { + margin: 1.0rem 0 0; +} + +.koenig-editor__editor h4 + h1, +.koenig-editor__editor h5 + h1 { + margin: 0.8rem 0 0; +} + +.koenig-editor__editor h6 + h1 { + margin: 0.6rem 0 0; +} + +.koenig-editor__editor div + h1 { + margin: 4.8rem 0 0; +} + + +/* Heading 2 */ + +.koenig-editor__editor h1 + h2 { + margin: 1.6rem 0 0; +} + +.koenig-editor__editor h2 + h2, +.koenig-editor__editor h3 + h2, +.koenig-editor__editor h4 + h2, +.koenig-editor__editor h5 + h2 { + margin: 0.8rem 0 0; +} + +.koenig-editor__editor h6 + h2 { + margin: 0.4rem 0 0; +} + +.koenig-editor__editor div + h2 { + margin: 4.8rem 0 0; +} + + +/* Heading 3 - 6 (share common styles) */ + +.koenig-editor__editor h1 + h3, +.koenig-editor__editor h2 + h3, + +.koenig-editor__editor h1 + h4, +.koenig-editor__editor h2 + h4, + +.koenig-editor__editor h1 + h5, +.koenig-editor__editor h2 + h5, + +.koenig-editor__editor h1 + h6, +.koenig-editor__editor h2 + h6 { + margin: 1.2rem 0 0; +} + +.koenig-editor__editor h3 + h4 { + margin: 0.8rem 0 0; +} + +.koenig-editor__editor h3 + h3, +.koenig-editor__editor h4 + h3, +.koenig-editor__editor h5 + h3, + +.koenig-editor__editor h4 + h4, +.koenig-editor__editor h5 + h4, + +.koenig-editor__editor h3 + h5, +.koenig-editor__editor h4 + h5, +.koenig-editor__editor h5 + h5, + +.koenig-editor__editor h3 + h6, +.koenig-editor__editor h4 + h6 { + margin: 0.8rem 0 0; +} + +.koenig-editor__editor h5 + h6 { + margin: 0.4rem 0 0; +} + +.koenig-editor__editor h6 + h3, +.koenig-editor__editor h6 + h4, +.koenig-editor__editor h6 + h5, +.koenig-editor__editor h6 + h6 { + margin: 0.4rem 0 0; +} + +.koenig-editor__editor div + h3, +.koenig-editor__editor div + h4, +.koenig-editor__editor div + h5, +.koenig-editor__editor div + h6 { + margin: 2.8rem 0 0; +} + + +/* Paragraph +/* -------------------------------------------------------------------- */ + +.koenig-editor__editor p, +.koenig-editor__editor blockquote, +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor ol + { + font-family: georgia,serif; + font-weight: 300; + letter-spacing: .02rem; + line-height: 1.6em; + font-size: 2rem; +} + +.koenig-editor__editor h1 + p { + margin: 1.2rem 0 0; +} + +.koenig-editor__editor h2 + p { + margin: 0.8rem 0 0; +} + +.koenig-editor__editor h3 + p, +.koenig-editor__editor h4 + p, +.koenig-editor__editor h5 + p, +.koenig-editor__editor h6 + p { + margin: .8rem 0 0; +} + +.koenig-editor__editor p + p, +.koenig-editor__editor blockquote + p, +.koenig-editor__editor ul + p, +.koenig-editor__editor ol + p + { + margin: 3.2rem 0 0; +} + +.koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */ + margin: 2.8rem 0 0; +} + + +/* Lists +/* -------------------------------------------------------------------- */ + +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor ol { + margin: 1.6rem 0 0; + padding: 0; + min-width: 100%; + max-width: 100%; +} + +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) li { + margin: 1.0rem 0 0 2.4rem; + padding: 0 0 0 0.6rem; + line-height: 3.2rem; +} + +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) li:first-child { + margin: 0 0 0 2.4rem; +} + +.koenig-editor__editor ol li { + margin: 1.0rem 0 0 2.2rem; + padding: 0 0 0 0.8rem; + line-height: 3.2rem; +} + +.koenig-editor__editor ol li:first-child { + margin: 0 0 0 2.2rem; +} + +.koenig-editor__editor p + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor p + ol, +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ol, +.koenig-editor__editor ol + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor ol + ol, +.koenig-editor__editor blockquote + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor blockquote + ol { + margin: 3.2rem 0 0; +} + +.koenig-editor__editor h1 + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor h1 + ol, +.koenig-editor__editor h2 + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor h2 + ol { + margin: .8rem 0 0; +} +.koenig-editor__editor h3 + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor h3 + ol, +.koenig-editor__editor h4 + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor h4 + ol, +.koenig-editor__editor h5 + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor h5 + ol, +.koenig-editor__editor h6 + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor h6 + ol { + margin: 1.2rem 0 0; +} + +.koenig-editor__editor div + ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor div + ol { + margin: 2.8rem 0 0; +} + +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) ol, +.koenig-editor__editor ol ul:not(.kg-action-bar):not(.kg-link-toolbar), +.koenig-editor__editor ol ol { + margin: 1.0rem 0 2rem; +} + + +/* Cards in general +/* -------------------------------------------------------------------- */ + +.koenig-editor__editor > div { + line-height: 0; + min-width: 100%; +} + +.koenig-editor__editor > div + div { + margin: 3.2rem 0 0; +} + +.koenig-editor__editor > p + div, +.koenig-editor__editor > blockquote + div, +.koenig-editor__editor > ul + div, +.koenig-editor__editor > ol + div { + margin: 3.2rem 0 0; +} + +.koenig-editor__editor > h1 + div { + margin: 2.8rem 0 0; +} + +.koenig-editor__editor > h2 + div, +.koenig-editor__editor > h3 + div, +.koenig-editor__editor > h4 + div, +.koenig-editor__editor > h5 + div, +.koenig-editor__editor > h6 + div { + margin: 1.6rem 0 0; +} + +.koenig-editor__editor hr { + margin: 1.6rem 0; +} + + +/* Links +/* -------------------------------------------------------------------- */ + +.koenig-editor__editor a { + color: var(--darkgrey); + text-decoration: none; + box-shadow: 0 1px 0 var(--white), 0 2px 0 var(--blue); +} + + +/* Blockquote +/* -------------------------------------------------------------------- */ + +.koenig-editor__editor blockquote p { + margin: 0; +} + +.koenig-editor__editor blockquote { + border-left: 0.25rem solid var(--blue); + padding-left: 2.0rem; + font-style: italic; +} + +.koenig-editor__editor h1 + blockquote, +.koenig-editor__editor h2 + blockquote { + margin: .8rem 0 0; +} + +.koenig-editor__editor h3 + blockquote, +.koenig-editor__editor h4 + blockquote, +.koenig-editor__editor h5 + blockquote, +.koenig-editor__editor h6 + blockquote { + margin: .4rem 0 0; +} + +.koenig-editor__editor p + blockquote, +.koenig-editor__editor blockquote + blockquote { + margin: 3.2rem 0 0; +} + + +/* Mobiledoc cards can be selected by their wrapper div element */ +.koenig-editor__editor div + blockquote { + margin: 2.8rem 0 0; +} + + +/* Code +/* ------------------------------------------------------------------ */ +.koenig-card-html--editor .CodeMirror, +.koenig-editor__editor code, +.koenig-editor__editor pre { + font-family: Consolas,Liberation Mono,Menlo,Courier,monospace; + background: color-mod(var(--lightgrey) lightness(+4%)); + border: 1px solid var(--lightgrey); +} + +.koenig-editor__editor code { + border-radius: 2px; + color: var(--pink); + font-size: 1.65rem; + line-height: 1em; + padding: .4rem .4rem .2rem; + vertical-align: middle; + white-space: pre-wrap; +} + +.koenig-editor__editor pre code { + border: none; + font-size: 1.6rem; + color: var(--pink); + padding: 0; +} + +.koenig-editor__editor pre { + line-height: 1.4em; + padding: .8rem .8rem .4rem; + border-radius: .4rem; + font-size: 1.6rem; + overflow: auto; + white-space: pre; + width: 100%; + color: var(--darkgrey); +} + +.koenig-editor__editor pre.js-embed-placeholder, +.koenig-editor__editor pre.iframe-embed-placeholder { + margin: 0.4rem 0 !important; + color: var(--midgrey); +} + + +/* Markdown +/* --------------------------------------------------------------- */ + +/* + Resetting the default top margin of the redered markdown content. This is + needed because the top margin is applied to the card itself. It's the 2nd + child because there's an SVG at the first place. + NOTE: this is not too elegant. +*/ + +.koenig-card-markdown-rendered > :nth-child(2) { + margin: 0; +} + +.koenig-card-markdown-rendered hr { + margin: 3.2rem 0 0; +} + +.koenig-card-markdown-rendered hr + p { + margin: 3.2rem 0 0; +} + +.koenig-editor .gh-markdown-editor pre { + border: none; + background: none; + white-space: normal; +} + +.koenig-editor .gh-markdown-editor a { + box-shadow: none; +} + + +/* HTML editor +/* --------------------------------------------------------------- */ + +.koenig-card-html-rendered { + line-height: 1.8em; +} + +.koenig-card-html-rendered > :first-child { + margin: 0; +} + +.koenig-card-html--editor pre { + border: none; + background: none; + white-space: pre-line; + padding: 0 .8rem; + line-height: 1.4em; +} + +.koenig-card-html--editor .CodeMirror { + border: none; + margin: 0 -8px; +} + +.koenig-card-html--editor .CodeMirror-linenumber { + padding: 12px 3px 0 5px; + color: var(--midlightgrey-l2); +} + +.koenig-card-html--editor .CodeMirror-gutters { + border: none; + background: none; +} + + +/* Images +/* --------------------------------------------------------------- */ + +.koenig-breakout-wide { + margin: auto calc(50% - 50vw - .8rem); + width: calc(65vw + 2px); + min-width: calc(100% + 18rem); + transform: translateX(calc(50vw - 50% + .8rem)); +} + +@media (min-width: 500px) and (max-width: 1080px) { + .koenig-breakout-wide { + min-width: calc(100% + 10rem); + } +} + +@media (max-width: 500px) { + .koenig-breakout-wide { + min-width: calc(100% + 3.6rem); + } +} + +.koenig-breakout-full { + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); +} + +.mw-100vw.kg-image-full--sidebar { + max-width: calc(100vw - 280px); +} + +/* Table +/* --------------------------------------------------------------- */ + +.koenig-editor__editor table { + font-size: 1.75rem; + margin: 0; + font-family: georgia,serif; + letter-spacing: .02rem; + line-height: 1.6em; +} + +.koenig-editor__editor table tr td, +.koenig-editor__editor table tr th { + vertical-align: top; + border-bottom: 1px solid var(--lightgrey); +} + +/* Captions +/* --------------------------------------------------------------- */ + +/* override `.koenig-editor__editor p` by inheriting styles from parent figcaption classes */ +.koenig-editor__editor figcaption p { + margin: 0; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; +} + +.koenig-basic-html-input__editor code { + font-size: 1.4rem; +} + +/* +/* UI Styles +/* +/* Styles that extend Spirit classes. +/* -------------------------------------------------------------------- */ +.kg-card-left-border { + border-left-color: var(--lightgrey); +} + +.kg-card-hover:hover { + box-shadow: 0 0 0 1px var(--blue); +} + +.kg-card-selected, +.kg-card-selected:hover + { + box-shadow: 0 0 0 2px var(--blue); +} + +/* Force a 16:10 aspect ratio */ +.kg-media-placeholder:before { + content: ""; + float: left; + padding-bottom: 62.5%; +} + +.kg-media-placeholder:after { + clear: left; + content: " "; + display: table; +} + +.kg-image-button svg { + transform: scale(1.0); + transition: var(--animation-speed-normal) ease-out; + opacity: 0.85; +} + +.kg-image-button:hover svg { + transform: scale(1.05); + opacity: 1.0; +} + +.kg-placeholder-image-summer { + width: 152px; + height: 122px; +} + +.kg-placeholder-gallery { + width: 141px; + height: 131px; +} + +/* Link hover tooltip - override inherited styles from .koenig-editor__editor */ +.kg-link-toolbar a { + color: inherit; + -webkit-font-smoothing: initial; +} + +/* Link input bar */ +.kg-link-input { + min-width: 225px; /* Same width as text toolbar */ +} + +.kg-input-bar-close { + position: absolute; + top: 22px; + right: 10px; + left: auto; + line-height: 1.2rem; + z-index: 100; + cursor: pointer; +} + +.kg-input-bar:before, +.kg-input-bar:after { + position: absolute; + top: 47px; + left: calc(50% - 8px); + width: 0; + content: ""; + font-size: 0; + line-height: 0; +} + +.kg-input-bar:before { + border-top: 9px solid var(--blue); + border-right: 9px solid transparent; + border-left: 9px solid transparent; +} + +.kg-input-bar:after { + border-top: 8px solid var(--white); + border-right: 8px solid transparent; + border-left: 8px solid transparent; + margin-left: 1px; +} + +/* Action bar styles */ +.kg-action-bar { + top: 8px; +} + +.kg-action-bar a { + min-height: 34px; +} + +.kg-action-bar:after { + position: absolute; + top: 40px; + left: calc(50% - 8px); + width: 0; + border-top: 8px solid var(--darkgrey-d1); + border-right: 8px solid transparent; + border-left: 8px solid transparent; + content: ""; + font-size: 0; + line-height: 0; + transition: left ease 0.06s; +} + +.kg-action-bar-divider { + width: 1px; +} + +.kg-cardmenu-card-selected, +.kg-cardmenu-card-hover:hover { + cursor: pointer; + background: var(--whitegrey-l1); +} + +.kg-cardmenu-card-selected div { + color: var(--darkgrey); +} + +/* Padded container housing title + editor canvas, scrollable content */ +.gh-koenig-editor-pane { + padding: 11vw 92px; +} + +@media (min-width: 500px) and (max-width: 960px) { + .gh-koenig-editor-pane { + padding: 15vw 92px; + } +} + +@media (max-width: 500px) { + .gh-koenig-editor-pane { + padding: 15vw 40px; + } +} + +/* Use flex-grow to fill the available vertical space so clicks outside the + editor content can trigger focus */ +.gh-koenig-editor-pane .koenig-editor { + cursor: text; +} + +.koenig-editor { + max-width: 760px; +} + +/* ⨁ menu +/* --------------------------------------------------------------- */ +.koenig-plus-menu-button { + margin: -2px 0 0 -66px; +} + +.koenig-plus-menu-button:hover { + border-color: var(--darkgrey); +} + +.koenig-plus-menu-button:hover svg path, +.koenig-plus-menu-button:hover svg g { + stroke: var(--darkgrey); +} + + +@media (max-width: 1024px) { + .koenig-plus-menu-button { + right:10px; + } +} + + +/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */ +.koenig-cardmenu { + width: 272px; + max-height: 500px; + background-clip: padding-box; + z-index: 9999999; /* have to compete with codemirror */ + left: -16px; +} + + +/* Cards +/* --------------------------------------------------------------- */ +.koenig-card-click-overlay { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 400; +} + + +/* Codemirror overrides +/* --------------------------------------------------------------- */ +.koenig-editor .CodeMirror pre { + white-space: pre; +} + +.koenig-editor .CodeMirror-wrap pre { + white-space: pre-wrap; +} + +.koenig-card-html--editor .CodeMirror { + min-height: 170px; + padding: 0; + overflow: auto; + background-color: #ffffff; +} + +.koenig-card-html--editor .CodeMirror:hover { + cursor: text; +} + +.koenig-card-html--editor .CodeMirror-scroll { + min-height: 170px; + overflow: hidden !important; + margin-right: 0; +} + +.koenig-editor .gh-markdown-editor .CodeMirror { + min-height: 130px; + /* margin to account for absolutely positioned toolbar */ + margin-bottom: 49px; +} + +.koenig-editor .gh-markdown-editor .CodeMirror-scroll { + min-height: 130px; +} + + +/* 1.0 Markdown editor overrides +/* --------------------------------------------------------------- */ +.koenig-editor .gh-markdown-editor { + position: static; + overflow: visible; + padding-top: 2px; +} + +.koenig-editor .gh-markdown-editor .editor-toolbar { + display: flex; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-left: none; + border-right: none; + border-radius: 0 0 .4rem .4rem; + z-index: 9999; + background-color: #fff; + opacity: 1; + padding: 6px; + border-top: 1px solid #E5EFF5; +} + +.koenig-editor .gh-markdown-editor .editor-toolbar .fa-check { + margin-left: auto; +} + +.koenig-editor .gh-markdown-editor .editor-toolbar .separator:last-of-type { + display: none; +} + + +/* Mobiledoc-kit base styles +/* NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css +/* --------------------------------------------------------------- */ + +.__mobiledoc-editor { + position: relative; + resize: none; + min-height: 1em; +} + +.__mobiledoc-editor:focus { + outline: none; +} + +.__mobiledoc-editor > * { + position: relative; +} + +.__mobiledoc-editor i { + display: inline; +} + +.__mobiledoc-card { + display: inline-block; + width: 100%; +} + +.__mobiledoc-editor.__has-no-content:after { + min-width: 100%; + content: attr(data-placeholder); + cursor: text; + position: absolute; + top: 0; + left: 0; + color: var(--midlightgrey); +} diff --git a/ghost/admin/app/styles/spirit/_letter-spacing.css b/ghost/admin/app/styles/spirit/_letter-spacing.css new file mode 100644 index 0000000000..37e111a4e0 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_letter-spacing.css @@ -0,0 +1,32 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + +.tracked-1 { letter-spacing: .02rem; } +.tracked-2 { letter-spacing: .04rem; } +.tracked-3 { letter-spacing: .06rem; } + + +@media (--breakpoint-not-small) { + .tracked-1-ns { letter-spacing: .02rem; } + .tracked-2-ns { letter-spacing: .04rem; } + .tracked-3-ns { letter-spacing: .06rem; } +} + +@media (--breakpoint-medium) { + .tracked-1-m { letter-spacing: .02rem; } + .tracked-2-m { letter-spacing: .04rem; } + .tracked-3-m { letter-spacing: .06rem; } +} + +@media (--breakpoint-large) { + .tracked-1-l { letter-spacing: .02rem; } + .tracked-2-l { letter-spacing: .04rem; } + .tracked-3-l { letter-spacing: .06rem; } +} diff --git a/ghost/admin/app/styles/spirit/_line-height.css b/ghost/admin/app/styles/spirit/_line-height.css new file mode 100644 index 0000000000..2ee1182545 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_line-height.css @@ -0,0 +1,50 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +:root { + --lh-1-1: 1.1em; + --lh-1-3: 1.333em; + --lh-1-4: 1.4em; + --lh-1-6: 1.6em; + --lh-2-0: 2.0em; +} + +.lh-solid { line-height: var(--lh-1-1); } +.lh-heading { line-height: var(--lh-1-3); } +.lh-title { line-height: var(--lh-1-4); } +.lh-copy { line-height: var(--lh-1-6); } +.lh-list { line-height: 3.2rem; } +.lh-code { line-height: var(--lh-1-3); } + +@media (--breakpoint-not-small) { + .lh-solid-ns { line-height: var(--lh-1-1); } + .lh-heading-ns { line-height: var(--lh-1-3); } + .lh-title-ns { line-height: var(--lh-1-4); } + .lh-copy-ns { line-height: var(--lh-1-6); } + .lh-list-ns { line-height: var(--lh-2-0); } + .lh-code-ns { line-height: var(--lh-1-3); } +} + +@media (--breakpoint-medium) { + .lh-solid-m { line-height: var(--lh-1-1); } + .lh-heading-m { line-height: var(--lh-1-3); } + .lh-title-m { line-height: var(--lh-1-4); } + .lh-copy-m { line-height: var(--lh-1-6); } + .lh-list-m { line-height: var(--lh-2-0); } + .lh-code-m { line-height: var(--lh-1-3); } +} + +@media (--breakpoint-large) { + .lh-solid-l { line-height: var(--lh-1-1); } + .lh-heading-l { line-height: var(--lh-1-3); } + .lh-title-l { line-height: var(--lh-1-4); } + .lh-copy-l { line-height: var(--lh-1-6); } + .lh-list-l { line-height: var(--lh-2-0); } + .lh-code-l { line-height: var(--lh-1-3); } +} diff --git a/ghost/admin/app/styles/spirit/_links.css b/ghost/admin/app/styles/spirit/_links.css new file mode 100644 index 0000000000..35ef50903f --- /dev/null +++ b/ghost/admin/app/styles/spirit/_links.css @@ -0,0 +1,19 @@ +.link { + text-decoration: none; + transition: color .15s ease-in; +} + +.link:link, +.link:visited { + transition: color .15s ease-in; +} +.link:hover { + transition: color .15s ease-in; +} +.link:active { + transition: color .15s ease-in; +} +.link:focus { + transition: color .15s ease-in; + outline: 1px dotted currentColor; +} diff --git a/ghost/admin/app/styles/spirit/_lists.css b/ghost/admin/app/styles/spirit/_lists.css new file mode 100644 index 0000000000..8015f12f62 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_lists.css @@ -0,0 +1 @@ +.list { list-style-type: none; } diff --git a/ghost/admin/app/styles/spirit/_max-widths.css b/ghost/admin/app/styles/spirit/_max-widths.css new file mode 100644 index 0000000000..64d41c29a1 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_max-widths.css @@ -0,0 +1,195 @@ +/* + + Base: + mw = max width + + Value: + (n) = (n * grid size) + -(m) = (m)% + -s = small + -m = medium + -l = large + -xl = extra large + -none = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.mw1 { max-width: calc(var(--grid-size) * 1); } +.mw2 { max-width: calc(var(--grid-size) * 2); } +.mw3 { max-width: calc(var(--grid-size) * 3); } +.mw4 { max-width: calc(var(--grid-size) * 4); } +.mw5 { max-width: calc(var(--grid-size) * 5); } +.mw6 { max-width: calc(var(--grid-size) * 6); } +.mw7 { max-width: calc(var(--grid-size) * 7); } +.mw8 { max-width: calc(var(--grid-size) * 8); } +.mw9 { max-width: calc(var(--grid-size) * 9); } +.mw10 { max-width: calc(var(--grid-size) * 10); } +.mw11 { max-width: calc(var(--grid-size) * 11); } +.mw12 { max-width: calc(var(--grid-size) * 12); } +.mw13 { max-width: calc(var(--grid-size) * 13); } +.mw14 { max-width: calc(var(--grid-size) * 14); } +.mw15 { max-width: calc(var(--grid-size) * 15); } +.mw16 { max-width: calc(var(--grid-size) * 16); } +.mw17 { max-width: calc(var(--grid-size) * 17); } +.mw18 { max-width: calc(var(--grid-size) * 18); } +.mw19 { max-width: calc(var(--grid-size) * 19); } +.mw20 { max-width: calc(var(--grid-size) * 20); } +.mw25 { max-width: calc(var(--grid-size) * 25); } +.mw30 { max-width: calc(var(--grid-size) * 30); } +.mw40 { max-width: calc(var(--grid-size) * 40); } +.mw50 { max-width: calc(var(--grid-size) * 50); } +.mw70 { max-width: calc(var(--grid-size) * 70); } +.mw88 { max-width: calc(var(--grid-size) * 88); } + +.mw-70 { max-width: 70%; } +.mw-80 { max-width: 80%; } +.mw-90 { max-width: 90%; } +.mw-100 { max-width: 100%; } + +.mw-s { max-width: 48rem; } +.mw-m { max-width: 68rem; } +.mw-l { max-width: 98rem; } +.mw-xl { max-width: 114rem; } +.mw-none { max-width: none; } + +.mw-65vw { max-width: 65vw; } +.mw-100vw { max-width: 100vw; } +.mw-100vw--sidebar { max-width: calc(100vw - 280px); } + + +@media (--breakpoint-not-small) { + .mw1-ns { max-width: calc(var(--grid-size) * 1); } + .mw2-ns { max-width: calc(var(--grid-size) * 2); } + .mw3-ns { max-width: calc(var(--grid-size) * 3); } + .mw4-ns { max-width: calc(var(--grid-size) * 4); } + .mw5-ns { max-width: calc(var(--grid-size) * 5); } + .mw6-ns { max-width: calc(var(--grid-size) * 6); } + .mw7-ns { max-width: calc(var(--grid-size) * 7); } + .mw8-ns { max-width: calc(var(--grid-size) * 8); } + .mw9-ns { max-width: calc(var(--grid-size) * 9); } + .mw10-ns { max-width: calc(var(--grid-size) * 10); } + .mw11-ns { max-width: calc(var(--grid-size) * 11); } + .mw12-ns { max-width: calc(var(--grid-size) * 12); } + .mw13-ns { max-width: calc(var(--grid-size) * 13); } + .mw14-ns { max-width: calc(var(--grid-size) * 14); } + .mw15-ns { max-width: calc(var(--grid-size) * 15); } + .mw16-ns { max-width: calc(var(--grid-size) * 16); } + .mw17-ns { max-width: calc(var(--grid-size) * 17); } + .mw18-ns { max-width: calc(var(--grid-size) * 18); } + .mw19-ns { max-width: calc(var(--grid-size) * 19); } + .mw20-ns { max-width: calc(var(--grid-size) * 20); } + .mw25-ns { max-width: calc(var(--grid-size) * 25); } + .mw30-ns { max-width: calc(var(--grid-size) * 30); } + .mw40-ns { max-width: calc(var(--grid-size) * 40); } + .mw50-ns { max-width: calc(var(--grid-size) * 50); } + .mw70-ns { max-width: calc(var(--grid-size) * 70); } + .mw88-ns { max-width: calc(var(--grid-size) * 88); } + + .mw-70-ns { max-width: 70%; } + .mw-80-ns { max-width: 80%; } + .mw-90-ns { max-width: 90%; } + .mw-100-ns { max-width: 100%; } + + .mw-s-ns { max-width: 48rem; } + .mw-m-ns { max-width: 68rem; } + .mw-l-ns { max-width: 98rem; } + .mw-xl-ns { max-width: 114rem; } + .mw-none-ns { max-width: none; } + + .mw-65vw-ns { max-width: 65vw; } + .mw-100vw-ns { max-width: 100vw; } + .mw-100vw--sidebar-ns { max-width: calc(100vw - 280px); } +} + +@media (--breakpoint-medium) { + .mw1-m { max-width: calc(var(--grid-size) * 1); } + .mw2-m { max-width: calc(var(--grid-size) * 2); } + .mw3-m { max-width: calc(var(--grid-size) * 3); } + .mw4-m { max-width: calc(var(--grid-size) * 4); } + .mw5-m { max-width: calc(var(--grid-size) * 5); } + .mw6-m { max-width: calc(var(--grid-size) * 6); } + .mw7-m { max-width: calc(var(--grid-size) * 7); } + .mw8-m { max-width: calc(var(--grid-size) * 8); } + .mw9-m { max-width: calc(var(--grid-size) * 9); } + .mw10-m { max-width: calc(var(--grid-size) * 10); } + .mw11-m { max-width: calc(var(--grid-size) * 11); } + .mw12-m { max-width: calc(var(--grid-size) * 12); } + .mw13-m { max-width: calc(var(--grid-size) * 13); } + .mw14-m { max-width: calc(var(--grid-size) * 14); } + .mw15-m { max-width: calc(var(--grid-size) * 15); } + .mw16-m { max-width: calc(var(--grid-size) * 16); } + .mw17-m { max-width: calc(var(--grid-size) * 17); } + .mw18-m { max-width: calc(var(--grid-size) * 18); } + .mw19-m { max-width: calc(var(--grid-size) * 19); } + .mw20-m { max-width: calc(var(--grid-size) * 20); } + .mw25-m { max-width: calc(var(--grid-size) * 25); } + .mw30-m { max-width: calc(var(--grid-size) * 30); } + .mw40-m { max-width: calc(var(--grid-size) * 40); } + .mw50-m { max-width: calc(var(--grid-size) * 50); } + .mw70-m { max-width: calc(var(--grid-size) * 70); } + .mw88-m { max-width: calc(var(--grid-size) * 88); } + + .mw-70-m { max-width: 70%; } + .mw-80-m { max-width: 80%; } + .mw-90-m { max-width: 90%; } + .mw-100-m { max-width: 100%; } + + .mw-s-m { max-width: 48rem; } + .mw-m-m { max-width: 68rem; } + .mw-l-m { max-width: 98rem; } + .mw-xl-m { max-width: 114rem; } + .mw-none-m { max-width: none; } + + .mw-65vw-m { max-width: 65vw; } + .mw-100vw-m { max-width: 100vw; } + .mw-100vw--sidebar-m { max-width: calc(100vw - 280px); } +} + +@media (--breakpoint-large) { + .mw1-l { max-width: calc(var(--grid-size) * 1); } + .mw2-l { max-width: calc(var(--grid-size) * 2); } + .mw3-l { max-width: calc(var(--grid-size) * 3); } + .mw4-l { max-width: calc(var(--grid-size) * 4); } + .mw5-l { max-width: calc(var(--grid-size) * 5); } + .mw6-l { max-width: calc(var(--grid-size) * 6); } + .mw7-l { max-width: calc(var(--grid-size) * 7); } + .mw8-l { max-width: calc(var(--grid-size) * 8); } + .mw9-l { max-width: calc(var(--grid-size) * 9); } + .mw10-l { max-width: calc(var(--grid-size) * 10); } + .mw11-l { max-width: calc(var(--grid-size) * 11); } + .mw12-l { max-width: calc(var(--grid-size) * 12); } + .mw13-l { max-width: calc(var(--grid-size) * 13); } + .mw14-l { max-width: calc(var(--grid-size) * 14); } + .mw15-l { max-width: calc(var(--grid-size) * 15); } + .mw16-l { max-width: calc(var(--grid-size) * 16); } + .mw17-l { max-width: calc(var(--grid-size) * 17); } + .mw18-l { max-width: calc(var(--grid-size) * 18); } + .mw19-l { max-width: calc(var(--grid-size) * 19); } + .mw20-l { max-width: calc(var(--grid-size) * 20); } + .mw25-l { max-width: calc(var(--grid-size) * 25); } + .mw30-l { max-width: calc(var(--grid-size) * 30); } + .mw40-l { max-width: calc(var(--grid-size) * 40); } + .mw50-l { max-width: calc(var(--grid-size) * 50); } + .mw70-l { max-width: calc(var(--grid-size) * 70); } + .mw88-l { max-width: calc(var(--grid-size) * 88); } + + .mw-70-l { max-width: 70%; } + .mw-80-l { max-width: 80%; } + .mw-90-l { max-width: 90%; } + .mw-100-l { max-width: 100%; } + + .mw-s-l { max-width: 48rem; } + .mw-l-l { max-width: 68rem; } + .mw-l-l { max-width: 98rem; } + .mw-xl-l { max-width: 114rem; } + .mw-none-l { max-width: none; } + + .mw-65vw-l { max-width: 65vw; } + .mw-100vw-l { max-width: 100vw; } + .mw-100vw--sidebar-l { max-width: calc(100vw - 280px); } +} diff --git a/ghost/admin/app/styles/spirit/_media-queries.css b/ghost/admin/app/styles/spirit/_media-queries.css new file mode 100644 index 0000000000..2853aa6a02 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_media-queries.css @@ -0,0 +1,28 @@ +/* + + The media queries can be referenced like so: + + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { + background-color: red; + } + } + + @media (--breakpoint-medium) { + .medium-screen-specific-style { + background-color: red; + } + } + + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { + background-color: red; + } + } + +*/ + +/* Media Queries */ +@custom-media --breakpoint-not-small screen and (min-width: 44rem); +@custom-media --breakpoint-medium screen and (min-width: 44rem) and (max-width: 66rem); +@custom-media --breakpoint-large screen and (min-width: 66rem); diff --git a/ghost/admin/app/styles/spirit/_min-heights.css b/ghost/admin/app/styles/spirit/_min-heights.css new file mode 100644 index 0000000000..d9c4834972 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_min-heights.css @@ -0,0 +1,158 @@ +/* + + Base: + mih = min height + + Value: + (n) = (n * grid size) + -(m) = percentage value + -none = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.mih1 { min-height: calc(var(--grid-size) * 1); } +.mih2 { min-height: calc(var(--grid-size) * 2); } +.mih3 { min-height: calc(var(--grid-size) * 3); } +.mih4 { min-height: calc(var(--grid-size) * 4); } +.mih5 { min-height: calc(var(--grid-size) * 5); } +.mih6 { min-height: calc(var(--grid-size) * 6); } +.mih7 { min-height: calc(var(--grid-size) * 7); } +.mih8 { min-height: calc(var(--grid-size) * 8); } +.mih9 { min-height: calc(var(--grid-size) * 9); } +.mih10 { min-height: calc(var(--grid-size) * 10); } +.mih11 { min-height: calc(var(--grid-size) * 11); } +.mih12 { min-height: calc(var(--grid-size) * 12); } +.mih13 { min-height: calc(var(--grid-size) * 13); } +.mih14 { min-height: calc(var(--grid-size) * 14); } +.mih15 { min-height: calc(var(--grid-size) * 15); } +.mih16 { min-height: calc(var(--grid-size) * 16); } +.mih17 { min-height: calc(var(--grid-size) * 17); } +.mih18 { min-height: calc(var(--grid-size) * 18); } +.mih19 { min-height: calc(var(--grid-size) * 19); } +.mih20 { min-height: calc(var(--grid-size) * 20); } +.mih25 { min-height: calc(var(--grid-size) * 25); } +.mih30 { min-height: calc(var(--grid-size) * 30); } +.mih40 { min-height: calc(var(--grid-size) * 40); } +.mih50 { min-height: calc(var(--grid-size) * 50); } +.mih70 { min-height: calc(var(--grid-size) * 70); } +.mih88 { min-height: calc(var(--grid-size) * 88); } + +.mih-70 { min-height: 70%; } +.mih-80 { min-height: 80%; } +.mih-90 { min-height: 90%; } +.mih-100 { min-height: 100%; } + +.mih-none { min-height: none; } + +@media (--breakpoint-not-small) { + .mih1-ns { min-height: calc(var(--grid-size) * 1); } + .mih2-ns { min-height: calc(var(--grid-size) * 2); } + .mih3-ns { min-height: calc(var(--grid-size) * 3); } + .mih4-ns { min-height: calc(var(--grid-size) * 4); } + .mih5-ns { min-height: calc(var(--grid-size) * 5); } + .mih6-ns { min-height: calc(var(--grid-size) * 6); } + .mih7-ns { min-height: calc(var(--grid-size) * 7); } + .mih8-ns { min-height: calc(var(--grid-size) * 8); } + .mih9-ns { min-height: calc(var(--grid-size) * 9); } + .mih10-ns { min-height: calc(var(--grid-size) * 10); } + .mih11-ns { min-height: calc(var(--grid-size) * 11); } + .mih12-ns { min-height: calc(var(--grid-size) * 12); } + .mih13-ns { min-height: calc(var(--grid-size) * 13); } + .mih14-ns { min-height: calc(var(--grid-size) * 14); } + .mih15-ns { min-height: calc(var(--grid-size) * 15); } + .mih16-ns { min-height: calc(var(--grid-size) * 16); } + .mih17-ns { min-height: calc(var(--grid-size) * 17); } + .mih18-ns { min-height: calc(var(--grid-size) * 18); } + .mih19-ns { min-height: calc(var(--grid-size) * 19); } + .mih20-ns { min-height: calc(var(--grid-size) * 20); } + .mih25-ns { min-height: calc(var(--grid-size) * 25); } + .mih30-ns { min-height: calc(var(--grid-size) * 30); } + .mih40-ns { min-height: calc(var(--grid-size) * 40); } + .mih50-ns { min-height: calc(var(--grid-size) * 50); } + .mih70-ns { min-height: calc(var(--grid-size) * 70); } + .mih88-ns { min-height: calc(var(--grid-size) * 88); } + + .mih-70-ns { min-height: 70%; } + .mih-80-ns { min-height: 80%; } + .mih-90-ns { min-height: 90%; } + .mih-100-ns { min-height: 100%; } + + .mih-none-ns { min-height: none; } +} + +@media (--breakpoint-medium) { + .mih1-m { min-height: calc(var(--grid-size) * 1); } + .mih2-m { min-height: calc(var(--grid-size) * 2); } + .mih3-m { min-height: calc(var(--grid-size) * 3); } + .mih4-m { min-height: calc(var(--grid-size) * 4); } + .mih5-m { min-height: calc(var(--grid-size) * 5); } + .mih6-m { min-height: calc(var(--grid-size) * 6); } + .mih7-m { min-height: calc(var(--grid-size) * 7); } + .mih8-m { min-height: calc(var(--grid-size) * 8); } + .mih9-m { min-height: calc(var(--grid-size) * 9); } + .mih10-m { min-height: calc(var(--grid-size) * 10); } + .mih11-m { min-height: calc(var(--grid-size) * 11); } + .mih12-m { min-height: calc(var(--grid-size) * 12); } + .mih13-m { min-height: calc(var(--grid-size) * 13); } + .mih14-m { min-height: calc(var(--grid-size) * 14); } + .mih15-m { min-height: calc(var(--grid-size) * 15); } + .mih16-m { min-height: calc(var(--grid-size) * 16); } + .mih17-m { min-height: calc(var(--grid-size) * 17); } + .mih18-m { min-height: calc(var(--grid-size) * 18); } + .mih19-m { min-height: calc(var(--grid-size) * 19); } + .mih20-m { min-height: calc(var(--grid-size) * 20); } + .mih25-m { min-height: calc(var(--grid-size) * 25); } + .mih30-m { min-height: calc(var(--grid-size) * 30); } + .mih40-m { min-height: calc(var(--grid-size) * 40); } + .mih50-m { min-height: calc(var(--grid-size) * 50); } + .mih70-m { min-height: calc(var(--grid-size) * 70); } + .mih88-m { min-height: calc(var(--grid-size) * 88); } + + .mih-70-m { min-height: 70%; } + .mih-80-m { min-height: 80%; } + .mih-90-m { min-height: 90%; } + .mih-100-m { min-height: 100%; } + + .mih-none-m { min-height: none; } +} + +@media (--breakpoint-large) { + .mih-70-l { min-height: 70%; } + .mih-80-l { min-height: 80%; } + .mih-90-l { min-height: 90%; } + .mih-100-l { min-height: 100%; } + + .mih1-l { min-height: calc(var(--grid-size) * 1); } + .mih2-l { min-height: calc(var(--grid-size) * 2); } + .mih3-l { min-height: calc(var(--grid-size) * 3); } + .mih4-l { min-height: calc(var(--grid-size) * 4); } + .mih5-l { min-height: calc(var(--grid-size) * 5); } + .mih6-l { min-height: calc(var(--grid-size) * 6); } + .mih7-l { min-height: calc(var(--grid-size) * 7); } + .mih8-l { min-height: calc(var(--grid-size) * 8); } + .mih9-l { min-height: calc(var(--grid-size) * 9); } + .mih10-l { min-height: calc(var(--grid-size) * 10); } + .mih11-l { min-height: calc(var(--grid-size) * 11); } + .mih12-l { min-height: calc(var(--grid-size) * 12); } + .mih13-l { min-height: calc(var(--grid-size) * 13); } + .mih14-l { min-height: calc(var(--grid-size) * 14); } + .mih15-l { min-height: calc(var(--grid-size) * 15); } + .mih16-l { min-height: calc(var(--grid-size) * 16); } + .mih17-l { min-height: calc(var(--grid-size) * 17); } + .mih18-l { min-height: calc(var(--grid-size) * 18); } + .mih19-l { min-height: calc(var(--grid-size) * 19); } + .mih20-l { min-height: calc(var(--grid-size) * 20); } + .mih25-l { min-height: calc(var(--grid-size) * 25); } + .mih30-l { min-height: calc(var(--grid-size) * 30); } + .mih40-l { min-height: calc(var(--grid-size) * 40); } + .mih50-l { min-height: calc(var(--grid-size) * 50); } + .mih70-l { min-height: calc(var(--grid-size) * 70); } + .mih88-l { min-height: calc(var(--grid-size) * 88); } + + .mih-none-l { min-height: none; } +} diff --git a/ghost/admin/app/styles/spirit/_min-widths.css b/ghost/admin/app/styles/spirit/_min-widths.css new file mode 100644 index 0000000000..40b298c6a3 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_min-widths.css @@ -0,0 +1,178 @@ +/* + + Base: + miw = min width + + Value: + (n) = (n * grid size) + -(m) = (m)% + -s = small + -m = medium + -l = large + -xl = extra large + -none = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.miw1 { min-width: calc(var(--grid-size) * 1); } +.miw2 { min-width: calc(var(--grid-size) * 2); } +.miw3 { min-width: calc(var(--grid-size) * 3); } +.miw4 { min-width: calc(var(--grid-size) * 4); } +.miw5 { min-width: calc(var(--grid-size) * 5); } +.miw6 { min-width: calc(var(--grid-size) * 6); } +.miw7 { min-width: calc(var(--grid-size) * 7); } +.miw8 { min-width: calc(var(--grid-size) * 8); } +.miw9 { min-width: calc(var(--grid-size) * 9); } +.miw10 { min-width: calc(var(--grid-size) * 10); } +.miw11 { min-width: calc(var(--grid-size) * 11); } +.miw12 { min-width: calc(var(--grid-size) * 12); } +.miw13 { min-width: calc(var(--grid-size) * 13); } +.miw14 { min-width: calc(var(--grid-size) * 14); } +.miw15 { min-width: calc(var(--grid-size) * 15); } +.miw16 { min-width: calc(var(--grid-size) * 16); } +.miw17 { min-width: calc(var(--grid-size) * 17); } +.miw18 { min-width: calc(var(--grid-size) * 18); } +.miw19 { min-width: calc(var(--grid-size) * 19); } +.miw20 { min-width: calc(var(--grid-size) * 20); } +.miw25 { min-width: calc(var(--grid-size) * 25); } +.miw30 { min-width: calc(var(--grid-size) * 30); } +.miw40 { min-width: calc(var(--grid-size) * 40); } +.miw50 { min-width: calc(var(--grid-size) * 50); } +.miw70 { min-width: calc(var(--grid-size) * 70); } +.miw88 { min-width: calc(var(--grid-size) * 88); } + +.miw-70 { min-width: 70%; } +.miw-80 { min-width: 80%; } +.miw-90 { min-width: 90%; } +.miw-100 { min-width: 100%; } + +.miw-s { min-width: 48rem; } +.miw-m { min-width: 68rem; } +.miw-l { min-width: 98rem; } +.miw-xl { min-width: 114rem; } +.miw-none { min-width: none; } + +@media (--breakpoint-not-small) { + .miw1-ns { min-width: calc(var(--grid-size) * 1); } + .miw2-ns { min-width: calc(var(--grid-size) * 2); } + .miw3-ns { min-width: calc(var(--grid-size) * 3); } + .miw4-ns { min-width: calc(var(--grid-size) * 4); } + .miw5-ns { min-width: calc(var(--grid-size) * 5); } + .miw6-ns { min-width: calc(var(--grid-size) * 6); } + .miw7-ns { min-width: calc(var(--grid-size) * 7); } + .miw8-ns { min-width: calc(var(--grid-size) * 8); } + .miw9-ns { min-width: calc(var(--grid-size) * 9); } + .miw10-ns { min-width: calc(var(--grid-size) * 10); } + .miw11-ns { min-width: calc(var(--grid-size) * 11); } + .miw12-ns { min-width: calc(var(--grid-size) * 12); } + .miw13-ns { min-width: calc(var(--grid-size) * 13); } + .miw14-ns { min-width: calc(var(--grid-size) * 14); } + .miw15-ns { min-width: calc(var(--grid-size) * 15); } + .miw16-ns { min-width: calc(var(--grid-size) * 16); } + .miw17-ns { min-width: calc(var(--grid-size) * 17); } + .miw18-ns { min-width: calc(var(--grid-size) * 18); } + .miw19-ns { min-width: calc(var(--grid-size) * 19); } + .miw20-ns { min-width: calc(var(--grid-size) * 20); } + .miw25-ns { min-width: calc(var(--grid-size) * 25); } + .miw30-ns { min-width: calc(var(--grid-size) * 30); } + .miw40-ns { min-width: calc(var(--grid-size) * 40); } + .miw50-ns { min-width: calc(var(--grid-size) * 50); } + .miw70-ns { min-width: calc(var(--grid-size) * 70); } + .miw88-ns { min-width: calc(var(--grid-size) * 88); } + + .miw-70-ns { min-width: 70%; } + .miw-80-ns { min-width: 80%; } + .miw-90-ns { min-width: 90%; } + .miw-100-ns { min-width: 100%; } + + .miw-s-ns { min-width: 48rem; } + .miw-m-ns { min-width: 68rem; } + .miw-l-ns { min-width: 98rem; } + .miw-xl-ns { min-width: 114rem; } + .miw-none-ns { min-width: none; } +} + +@media (--breakpoint-medium) { + .miw1-m { min-width: calc(var(--grid-size) * 1); } + .miw2-m { min-width: calc(var(--grid-size) * 2); } + .miw3-m { min-width: calc(var(--grid-size) * 3); } + .miw4-m { min-width: calc(var(--grid-size) * 4); } + .miw5-m { min-width: calc(var(--grid-size) * 5); } + .miw6-m { min-width: calc(var(--grid-size) * 6); } + .miw7-m { min-width: calc(var(--grid-size) * 7); } + .miw8-m { min-width: calc(var(--grid-size) * 8); } + .miw9-m { min-width: calc(var(--grid-size) * 9); } + .miw10-m { min-width: calc(var(--grid-size) * 10); } + .miw11-m { min-width: calc(var(--grid-size) * 11); } + .miw12-m { min-width: calc(var(--grid-size) * 12); } + .miw13-m { min-width: calc(var(--grid-size) * 13); } + .miw14-m { min-width: calc(var(--grid-size) * 14); } + .miw15-m { min-width: calc(var(--grid-size) * 15); } + .miw16-m { min-width: calc(var(--grid-size) * 16); } + .miw17-m { min-width: calc(var(--grid-size) * 17); } + .miw18-m { min-width: calc(var(--grid-size) * 18); } + .miw19-m { min-width: calc(var(--grid-size) * 19); } + .miw20-m { min-width: calc(var(--grid-size) * 20); } + .miw25-m { min-width: calc(var(--grid-size) * 25); } + .miw30-m { min-width: calc(var(--grid-size) * 30); } + .miw40-m { min-width: calc(var(--grid-size) * 40); } + .miw50-m { min-width: calc(var(--grid-size) * 50); } + .miw70-m { min-width: calc(var(--grid-size) * 70); } + .miw88-m { min-width: calc(var(--grid-size) * 88); } + + .miw-70-m { min-width: 70%; } + .miw-80-m { min-width: 80%; } + .miw-90-m { min-width: 90%; } + .miw-100-m { min-width: 100%; } + + .miw-s-m { min-width: 48rem; } + .miw-m-m { min-width: 68rem; } + .miw-l-m { min-width: 98rem; } + .miw-xl-m { min-width: 114rem; } + .miw-none-m { min-width: none; } +} + +@media (--breakpoint-large) { + .miw1-l { min-width: calc(var(--grid-size) * 1); } + .miw2-l { min-width: calc(var(--grid-size) * 2); } + .miw3-l { min-width: calc(var(--grid-size) * 3); } + .miw4-l { min-width: calc(var(--grid-size) * 4); } + .miw5-l { min-width: calc(var(--grid-size) * 5); } + .miw6-l { min-width: calc(var(--grid-size) * 6); } + .miw7-l { min-width: calc(var(--grid-size) * 7); } + .miw8-l { min-width: calc(var(--grid-size) * 8); } + .miw9-l { min-width: calc(var(--grid-size) * 9); } + .miw10-l { min-width: calc(var(--grid-size) * 10); } + .miw11-l { min-width: calc(var(--grid-size) * 11); } + .miw12-l { min-width: calc(var(--grid-size) * 12); } + .miw13-l { min-width: calc(var(--grid-size) * 13); } + .miw14-l { min-width: calc(var(--grid-size) * 14); } + .miw15-l { min-width: calc(var(--grid-size) * 15); } + .miw16-l { min-width: calc(var(--grid-size) * 16); } + .miw17-l { min-width: calc(var(--grid-size) * 17); } + .miw18-l { min-width: calc(var(--grid-size) * 18); } + .miw19-l { min-width: calc(var(--grid-size) * 19); } + .miw20-l { min-width: calc(var(--grid-size) * 20); } + .miw25-l { min-width: calc(var(--grid-size) * 25); } + .miw30-l { min-width: calc(var(--grid-size) * 30); } + .miw40-l { min-width: calc(var(--grid-size) * 40); } + .miw50-l { min-width: calc(var(--grid-size) * 50); } + .miw70-l { min-width: calc(var(--grid-size) * 70); } + .miw88-l { min-width: calc(var(--grid-size) * 88); } + + .miw-70-l { min-width: 70%; } + .miw-80-l { min-width: 80%; } + .miw-90-l { min-width: 90%; } + .miw-100-l { min-width: 100%; } + + .miw-s-l { min-width: 48rem; } + .miw-m-l { min-width: 68rem; } + .miw-l-l { min-width: 98rem; } + .miw-xl-l { min-width: 114rem; } + .miw-none-l { min-width: none; } +} diff --git a/ghost/admin/app/styles/spirit/_module-template.css b/ghost/admin/app/styles/spirit/_module-template.css new file mode 100644 index 0000000000..0447e0c1e4 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_module-template.css @@ -0,0 +1,22 @@ +/* + + MODULE NAME + + Use this scaffolding to create or extend your own modules with tachyons + style architecture. + +*/ + + +@media (--breakpoint-not-small) { + +} + +@media (--breakpoint-medium) { + +} + +@media (--breakpoint-large) { + +} + diff --git a/ghost/admin/app/styles/spirit/_negative-margins.css b/ghost/admin/app/styles/spirit/_negative-margins.css new file mode 100644 index 0000000000..3aec8d5273 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_negative-margins.css @@ -0,0 +1,526 @@ +.na0 { margin: 0; } +.na1 { margin: calc(-1 * var(--grid-size) * 1); } +.na2 { margin: calc(-1 * var(--grid-size) * 2); } +.na3 { margin: calc(-1 * var(--grid-size) * 3); } +.na4 { margin: calc(-1 * var(--grid-size) * 4); } +.na5 { margin: calc(-1 * var(--grid-size) * 5); } +.na6 { margin: calc(-1 * var(--grid-size) * 6); } +.na7 { margin: calc(-1 * var(--grid-size) * 7); } +.na8 { margin: calc(-1 * var(--grid-size) * 8); } +.na9 { margin: calc(-1 * var(--grid-size) * 9); } +.na10 { margin: calc(-1 * var(--grid-size) * 10); } +.na11 { margin: calc(-1 * var(--grid-size) * 11); } +.na12 { margin: calc(-1 * var(--grid-size) * 12); } +.na13 { margin: calc(-1 * var(--grid-size) * 13); } +.na14 { margin: calc(-1 * var(--grid-size) * 14); } +.na15 { margin: calc(-1 * var(--grid-size) * 15); } +.na16 { margin: calc(-1 * var(--grid-size) * 16); } +.na17 { margin: calc(-1 * var(--grid-size) * 17); } +.na18 { margin: calc(-1 * var(--grid-size) * 18); } +.na19 { margin: calc(-1 * var(--grid-size) * 19); } +.na20 { margin: calc(-1 * var(--grid-size) * 20); } +.na25 { margin: calc(-1 * var(--grid-size) * 25); } +.na30 { margin: calc(-1 * var(--grid-size) * 30); } +.na40 { margin: calc(-1 * var(--grid-size) * 40); } +.na50 { margin: calc(-1 * var(--grid-size) * 50); } + +.nr0 { margin-right: 0; } +.nr1 { margin-right: calc(-1 * var(--grid-size) * 1); } +.nr2 { margin-right: calc(-1 * var(--grid-size) * 2); } +.nr3 { margin-right: calc(-1 * var(--grid-size) * 3); } +.nr4 { margin-right: calc(-1 * var(--grid-size) * 4); } +.nr5 { margin-right: calc(-1 * var(--grid-size) * 5); } +.nr6 { margin-right: calc(-1 * var(--grid-size) * 6); } +.nr7 { margin-right: calc(-1 * var(--grid-size) * 7); } +.nr8 { margin-right: calc(-1 * var(--grid-size) * 8); } +.nr9 { margin-right: calc(-1 * var(--grid-size) * 9); } +.nr10 { margin-right: calc(-1 * var(--grid-size) * 10); } +.nr11 { margin-right: calc(-1 * var(--grid-size) * 11); } +.nr12 { margin-right: calc(-1 * var(--grid-size) * 12); } +.nr13 { margin-right: calc(-1 * var(--grid-size) * 13); } +.nr14 { margin-right: calc(-1 * var(--grid-size) * 14); } +.nr15 { margin-right: calc(-1 * var(--grid-size) * 15); } +.nr16 { margin-right: calc(-1 * var(--grid-size) * 16); } +.nr17 { margin-right: calc(-1 * var(--grid-size) * 17); } +.nr18 { margin-right: calc(-1 * var(--grid-size) * 18); } +.nr19 { margin-right: calc(-1 * var(--grid-size) * 19); } +.nr20 { margin-right: calc(-1 * var(--grid-size) * 20); } +.nr25 { margin-right: calc(-1 * var(--grid-size) * 25); } +.nr30 { margin-right: calc(-1 * var(--grid-size) * 30); } +.nr40 { margin-right: calc(-1 * var(--grid-size) * 40); } +.nr50 { margin-right: calc(-1 * var(--grid-size) * 50); } + +.nb0 { margin-bottom: 0; } +.nb1 { margin-bottom: calc(-1 * var(--grid-size) * 1); } +.nb2 { margin-bottom: calc(-1 * var(--grid-size) * 2); } +.nb3 { margin-bottom: calc(-1 * var(--grid-size) * 3); } +.nb4 { margin-bottom: calc(-1 * var(--grid-size) * 4); } +.nb5 { margin-bottom: calc(-1 * var(--grid-size) * 5); } +.nb6 { margin-bottom: calc(-1 * var(--grid-size) * 6); } +.nb7 { margin-bottom: calc(-1 * var(--grid-size) * 7); } +.nb8 { margin-bottom: calc(-1 * var(--grid-size) * 8); } +.nb9 { margin-bottom: calc(-1 * var(--grid-size) * 9); } +.nb10 { margin-bottom: calc(-1 * var(--grid-size) * 10); } +.nb11 { margin-bottom: calc(-1 * var(--grid-size) * 11); } +.nb12 { margin-bottom: calc(-1 * var(--grid-size) * 12); } +.nb13 { margin-bottom: calc(-1 * var(--grid-size) * 13); } +.nb14 { margin-bottom: calc(-1 * var(--grid-size) * 14); } +.nb15 { margin-bottom: calc(-1 * var(--grid-size) * 15); } +.nb16 { margin-bottom: calc(-1 * var(--grid-size) * 16); } +.nb17 { margin-bottom: calc(-1 * var(--grid-size) * 17); } +.nb18 { margin-bottom: calc(-1 * var(--grid-size) * 18); } +.nb19 { margin-bottom: calc(-1 * var(--grid-size) * 19); } +.nb20 { margin-bottom: calc(-1 * var(--grid-size) * 20); } +.nb25 { margin-bottom: calc(-1 * var(--grid-size) * 25); } +.nb30 { margin-bottom: calc(-1 * var(--grid-size) * 30); } +.nb40 { margin-bottom: calc(-1 * var(--grid-size) * 40); } +.nb50 { margin-bottom: calc(-1 * var(--grid-size) * 50); } + +.nl0 { margin-left: 0; } +.nl1 { margin-left: calc(-1 * var(--grid-size) * 1); } +.nl2 { margin-left: calc(-1 * var(--grid-size) * 2); } +.nl3 { margin-left: calc(-1 * var(--grid-size) * 3); } +.nl4 { margin-left: calc(-1 * var(--grid-size) * 4); } +.nl5 { margin-left: calc(-1 * var(--grid-size) * 5); } +.nl6 { margin-left: calc(-1 * var(--grid-size) * 6); } +.nl7 { margin-left: calc(-1 * var(--grid-size) * 7); } +.nl8 { margin-left: calc(-1 * var(--grid-size) * 8); } +.nl9 { margin-left: calc(-1 * var(--grid-size) * 9); } +.nl10 { margin-left: calc(-1 * var(--grid-size) * 10); } +.nl11 { margin-left: calc(-1 * var(--grid-size) * 11); } +.nl12 { margin-left: calc(-1 * var(--grid-size) * 12); } +.nl13 { margin-left: calc(-1 * var(--grid-size) * 13); } +.nl14 { margin-left: calc(-1 * var(--grid-size) * 14); } +.nl15 { margin-left: calc(-1 * var(--grid-size) * 15); } +.nl16 { margin-left: calc(-1 * var(--grid-size) * 16); } +.nl17 { margin-left: calc(-1 * var(--grid-size) * 17); } +.nl18 { margin-left: calc(-1 * var(--grid-size) * 18); } +.nl19 { margin-left: calc(-1 * var(--grid-size) * 19); } +.nl20 { margin-left: calc(-1 * var(--grid-size) * 20); } +.nl25 { margin-left: calc(-1 * var(--grid-size) * 25); } +.nl30 { margin-left: calc(-1 * var(--grid-size) * 30); } +.nl40 { margin-left: calc(-1 * var(--grid-size) * 40); } +.nl50 { margin-left: calc(-1 * var(--grid-size) * 50); } + +.nt0 { margin-top: 0; } +.nt1 { margin-top: calc(-1 * var(--grid-size) * 1); } +.nt2 { margin-top: calc(-1 * var(--grid-size) * 2); } +.nt3 { margin-top: calc(-1 * var(--grid-size) * 3); } +.nt4 { margin-top: calc(-1 * var(--grid-size) * 4); } +.nt5 { margin-top: calc(-1 * var(--grid-size) * 5); } +.nt6 { margin-top: calc(-1 * var(--grid-size) * 6); } +.nt7 { margin-top: calc(-1 * var(--grid-size) * 7); } +.nt8 { margin-top: calc(-1 * var(--grid-size) * 8); } +.nt9 { margin-top: calc(-1 * var(--grid-size) * 9); } +.nt10 { margin-top: calc(-1 * var(--grid-size) * 10); } +.nt11 { margin-top: calc(-1 * var(--grid-size) * 11); } +.nt12 { margin-top: calc(-1 * var(--grid-size) * 12); } +.nt13 { margin-top: calc(-1 * var(--grid-size) * 13); } +.nt14 { margin-top: calc(-1 * var(--grid-size) * 14); } +.nt15 { margin-top: calc(-1 * var(--grid-size) * 15); } +.nt16 { margin-top: calc(-1 * var(--grid-size) * 16); } +.nt17 { margin-top: calc(-1 * var(--grid-size) * 17); } +.nt18 { margin-top: calc(-1 * var(--grid-size) * 18); } +.nt19 { margin-top: calc(-1 * var(--grid-size) * 19); } +.nt20 { margin-top: calc(-1 * var(--grid-size) * 20); } +.nt25 { margin-top: calc(-1 * var(--grid-size) * 25); } +.nt30 { margin-top: calc(-1 * var(--grid-size) * 30); } +.nt40 { margin-top: calc(-1 * var(--grid-size) * 40); } +.nt50 { margin-top: calc(-1 * var(--grid-size) * 50); } + + +@media (--breakpoint-not-small) { + .na0-ns { margin: 0; } + .na1-ns { margin: calc(-1 * var(--grid-size) * 1); } + .na2-ns { margin: calc(-1 * var(--grid-size) * 2); } + .na3-ns { margin: calc(-1 * var(--grid-size) * 3); } + .na4-ns { margin: calc(-1 * var(--grid-size) * 4); } + .na5-ns { margin: calc(-1 * var(--grid-size) * 5); } + .na6-ns { margin: calc(-1 * var(--grid-size) * 6); } + .na7-ns { margin: calc(-1 * var(--grid-size) * 7); } + .na8-ns { margin: calc(-1 * var(--grid-size) * 8); } + .na9-ns { margin: calc(-1 * var(--grid-size) * 9); } + .na10-ns { margin: calc(-1 * var(--grid-size) * 10); } + .na11-ns { margin: calc(-1 * var(--grid-size) * 11); } + .na12-ns { margin: calc(-1 * var(--grid-size) * 12); } + .na13-ns { margin: calc(-1 * var(--grid-size) * 13); } + .na14-ns { margin: calc(-1 * var(--grid-size) * 14); } + .na15-ns { margin: calc(-1 * var(--grid-size) * 15); } + .na16-ns { margin: calc(-1 * var(--grid-size) * 16); } + .na17-ns { margin: calc(-1 * var(--grid-size) * 17); } + .na18-ns { margin: calc(-1 * var(--grid-size) * 18); } + .na19-ns { margin: calc(-1 * var(--grid-size) * 19); } + .na20-ns { margin: calc(-1 * var(--grid-size) * 20); } + .na25-ns { margin: calc(-1 * var(--grid-size) * 25); } + .na30-ns { margin: calc(-1 * var(--grid-size) * 30); } + .na40-ns { margin: calc(-1 * var(--grid-size) * 40); } + .na50-ns { margin: calc(-1 * var(--grid-size) * 50); } + + .nr0-ns { margin-right: 0; } + .nr1-ns { margin-right: calc(-1 * var(--grid-size) * 1); } + .nr2-ns { margin-right: calc(-1 * var(--grid-size) * 2); } + .nr3-ns { margin-right: calc(-1 * var(--grid-size) * 3); } + .nr4-ns { margin-right: calc(-1 * var(--grid-size) * 4); } + .nr5-ns { margin-right: calc(-1 * var(--grid-size) * 5); } + .nr6-ns { margin-right: calc(-1 * var(--grid-size) * 6); } + .nr7-ns { margin-right: calc(-1 * var(--grid-size) * 7); } + .nr8-ns { margin-right: calc(-1 * var(--grid-size) * 8); } + .nr9-ns { margin-right: calc(-1 * var(--grid-size) * 9); } + .nr10-ns { margin-right: calc(-1 * var(--grid-size) * 10); } + .nr11-ns { margin-right: calc(-1 * var(--grid-size) * 11); } + .nr12-ns { margin-right: calc(-1 * var(--grid-size) * 12); } + .nr13-ns { margin-right: calc(-1 * var(--grid-size) * 13); } + .nr14-ns { margin-right: calc(-1 * var(--grid-size) * 14); } + .nr15-ns { margin-right: calc(-1 * var(--grid-size) * 15); } + .nr16-ns { margin-right: calc(-1 * var(--grid-size) * 16); } + .nr17-ns { margin-right: calc(-1 * var(--grid-size) * 17); } + .nr18-ns { margin-right: calc(-1 * var(--grid-size) * 18); } + .nr19-ns { margin-right: calc(-1 * var(--grid-size) * 19); } + .nr20-ns { margin-right: calc(-1 * var(--grid-size) * 20); } + .nr25-ns { margin-right: calc(-1 * var(--grid-size) * 25); } + .nr30-ns { margin-right: calc(-1 * var(--grid-size) * 30); } + .nr40-ns { margin-right: calc(-1 * var(--grid-size) * 40); } + .nr50-ns { margin-right: calc(-1 * var(--grid-size) * 50); } + + .nb0-ns { margin-bottom: 0; } + .nb1-ns { margin-bottom: calc(-1 * var(--grid-size) * 1); } + .nb2-ns { margin-bottom: calc(-1 * var(--grid-size) * 2); } + .nb3-ns { margin-bottom: calc(-1 * var(--grid-size) * 3); } + .nb4-ns { margin-bottom: calc(-1 * var(--grid-size) * 4); } + .nb5-ns { margin-bottom: calc(-1 * var(--grid-size) * 5); } + .nb6-ns { margin-bottom: calc(-1 * var(--grid-size) * 6); } + .nb7-ns { margin-bottom: calc(-1 * var(--grid-size) * 7); } + .nb8-ns { margin-bottom: calc(-1 * var(--grid-size) * 8); } + .nb9-ns { margin-bottom: calc(-1 * var(--grid-size) * 9); } + .nb10-ns { margin-bottom: calc(-1 * var(--grid-size) * 10); } + .nb11-ns { margin-bottom: calc(-1 * var(--grid-size) * 11); } + .nb12-ns { margin-bottom: calc(-1 * var(--grid-size) * 12); } + .nb13-ns { margin-bottom: calc(-1 * var(--grid-size) * 13); } + .nb14-ns { margin-bottom: calc(-1 * var(--grid-size) * 14); } + .nb15-ns { margin-bottom: calc(-1 * var(--grid-size) * 15); } + .nb16-ns { margin-bottom: calc(-1 * var(--grid-size) * 16); } + .nb17-ns { margin-bottom: calc(-1 * var(--grid-size) * 17); } + .nb18-ns { margin-bottom: calc(-1 * var(--grid-size) * 18); } + .nb19-ns { margin-bottom: calc(-1 * var(--grid-size) * 19); } + .nb20-ns { margin-bottom: calc(-1 * var(--grid-size) * 20); } + .nb25-ns { margin-bottom: calc(-1 * var(--grid-size) * 25); } + .nb30-ns { margin-bottom: calc(-1 * var(--grid-size) * 30); } + .nb40-ns { margin-bottom: calc(-1 * var(--grid-size) * 40); } + .nb50-ns { margin-bottom: calc(-1 * var(--grid-size) * 50); } + + .nl0-ns { margin-left: 0; } + .nl1-ns { margin-left: calc(-1 * var(--grid-size) * 1); } + .nl2-ns { margin-left: calc(-1 * var(--grid-size) * 2); } + .nl3-ns { margin-left: calc(-1 * var(--grid-size) * 3); } + .nl4-ns { margin-left: calc(-1 * var(--grid-size) * 4); } + .nl5-ns { margin-left: calc(-1 * var(--grid-size) * 5); } + .nl6-ns { margin-left: calc(-1 * var(--grid-size) * 6); } + .nl7-ns { margin-left: calc(-1 * var(--grid-size) * 7); } + .nl8-ns { margin-left: calc(-1 * var(--grid-size) * 8); } + .nl9-ns { margin-left: calc(-1 * var(--grid-size) * 9); } + .nl10-ns { margin-left: calc(-1 * var(--grid-size) * 10); } + .nl11-ns { margin-left: calc(-1 * var(--grid-size) * 11); } + .nl12-ns { margin-left: calc(-1 * var(--grid-size) * 12); } + .nl13-ns { margin-left: calc(-1 * var(--grid-size) * 13); } + .nl14-ns { margin-left: calc(-1 * var(--grid-size) * 14); } + .nl15-ns { margin-left: calc(-1 * var(--grid-size) * 15); } + .nl16-ns { margin-left: calc(-1 * var(--grid-size) * 16); } + .nl17-ns { margin-left: calc(-1 * var(--grid-size) * 17); } + .nl18-ns { margin-left: calc(-1 * var(--grid-size) * 18); } + .nl19-ns { margin-left: calc(-1 * var(--grid-size) * 19); } + .nl20-ns { margin-left: calc(-1 * var(--grid-size) * 20); } + .nl25-ns { margin-left: calc(-1 * var(--grid-size) * 25); } + .nl30-ns { margin-left: calc(-1 * var(--grid-size) * 30); } + .nl40-ns { margin-left: calc(-1 * var(--grid-size) * 40); } + .nl50-ns { margin-left: calc(-1 * var(--grid-size) * 50); } + + .nt0-ns { margin-top: 0; } + .nt1-ns { margin-top: calc(-1 * var(--grid-size) * 1); } + .nt2-ns { margin-top: calc(-1 * var(--grid-size) * 2); } + .nt3-ns { margin-top: calc(-1 * var(--grid-size) * 3); } + .nt4-ns { margin-top: calc(-1 * var(--grid-size) * 4); } + .nt5-ns { margin-top: calc(-1 * var(--grid-size) * 5); } + .nt6-ns { margin-top: calc(-1 * var(--grid-size) * 6); } + .nt7-ns { margin-top: calc(-1 * var(--grid-size) * 7); } + .nt8-ns { margin-top: calc(-1 * var(--grid-size) * 8); } + .nt9-ns { margin-top: calc(-1 * var(--grid-size) * 9); } + .nt10-ns { margin-top: calc(-1 * var(--grid-size) * 10); } + .nt11-ns { margin-top: calc(-1 * var(--grid-size) * 11); } + .nt12-ns { margin-top: calc(-1 * var(--grid-size) * 12); } + .nt13-ns { margin-top: calc(-1 * var(--grid-size) * 13); } + .nt14-ns { margin-top: calc(-1 * var(--grid-size) * 14); } + .nt15-ns { margin-top: calc(-1 * var(--grid-size) * 15); } + .nt16-ns { margin-top: calc(-1 * var(--grid-size) * 16); } + .nt17-ns { margin-top: calc(-1 * var(--grid-size) * 17); } + .nt18-ns { margin-top: calc(-1 * var(--grid-size) * 18); } + .nt19-ns { margin-top: calc(-1 * var(--grid-size) * 19); } + .nt20-ns { margin-top: calc(-1 * var(--grid-size) * 20); } + .nt25-ns { margin-top: calc(-1 * var(--grid-size) * 25); } + .nt30-ns { margin-top: calc(-1 * var(--grid-size) * 30); } + .nt40-ns { margin-top: calc(-1 * var(--grid-size) * 40); } + .nt50-ns { margin-top: calc(-1 * var(--grid-size) * 50); } +} + +@media (--breakpoint-medium) { + .na0-m { margin: 0; } + .na1-m { margin: calc(-1 * var(--grid-size) * 1); } + .na2-m { margin: calc(-1 * var(--grid-size) * 2); } + .na3-m { margin: calc(-1 * var(--grid-size) * 3); } + .na4-m { margin: calc(-1 * var(--grid-size) * 4); } + .na5-m { margin: calc(-1 * var(--grid-size) * 5); } + .na6-m { margin: calc(-1 * var(--grid-size) * 6); } + .na7-m { margin: calc(-1 * var(--grid-size) * 7); } + .na8-m { margin: calc(-1 * var(--grid-size) * 8); } + .na9-m { margin: calc(-1 * var(--grid-size) * 9); } + .na10-m { margin: calc(-1 * var(--grid-size) * 10); } + .na11-m { margin: calc(-1 * var(--grid-size) * 11); } + .na12-m { margin: calc(-1 * var(--grid-size) * 12); } + .na13-m { margin: calc(-1 * var(--grid-size) * 13); } + .na14-m { margin: calc(-1 * var(--grid-size) * 14); } + .na15-m { margin: calc(-1 * var(--grid-size) * 15); } + .na16-m { margin: calc(-1 * var(--grid-size) * 16); } + .na17-m { margin: calc(-1 * var(--grid-size) * 17); } + .na18-m { margin: calc(-1 * var(--grid-size) * 18); } + .na19-m { margin: calc(-1 * var(--grid-size) * 19); } + .na20-m { margin: calc(-1 * var(--grid-size) * 20); } + .na25-m { margin: calc(-1 * var(--grid-size) * 25); } + .na30-m { margin: calc(-1 * var(--grid-size) * 30); } + .na40-m { margin: calc(-1 * var(--grid-size) * 40); } + .na50-m { margin: calc(-1 * var(--grid-size) * 50); } + + .nr0-m { margin-right: 0; } + .nr1-m { margin-right: calc(-1 * var(--grid-size) * 1); } + .nr2-m { margin-right: calc(-1 * var(--grid-size) * 2); } + .nr3-m { margin-right: calc(-1 * var(--grid-size) * 3); } + .nr4-m { margin-right: calc(-1 * var(--grid-size) * 4); } + .nr5-m { margin-right: calc(-1 * var(--grid-size) * 5); } + .nr6-m { margin-right: calc(-1 * var(--grid-size) * 6); } + .nr7-m { margin-right: calc(-1 * var(--grid-size) * 7); } + .nr8-m { margin-right: calc(-1 * var(--grid-size) * 8); } + .nr9-m { margin-right: calc(-1 * var(--grid-size) * 9); } + .nr10-m { margin-right: calc(-1 * var(--grid-size) * 10); } + .nr11-m { margin-right: calc(-1 * var(--grid-size) * 11); } + .nr12-m { margin-right: calc(-1 * var(--grid-size) * 12); } + .nr13-m { margin-right: calc(-1 * var(--grid-size) * 13); } + .nr14-m { margin-right: calc(-1 * var(--grid-size) * 14); } + .nr15-m { margin-right: calc(-1 * var(--grid-size) * 15); } + .nr16-m { margin-right: calc(-1 * var(--grid-size) * 16); } + .nr17-m { margin-right: calc(-1 * var(--grid-size) * 17); } + .nr18-m { margin-right: calc(-1 * var(--grid-size) * 18); } + .nr19-m { margin-right: calc(-1 * var(--grid-size) * 19); } + .nr20-m { margin-right: calc(-1 * var(--grid-size) * 20); } + .nr25-m { margin-right: calc(-1 * var(--grid-size) * 25); } + .nr30-m { margin-right: calc(-1 * var(--grid-size) * 30); } + .nr40-m { margin-right: calc(-1 * var(--grid-size) * 40); } + .nr50-m { margin-right: calc(-1 * var(--grid-size) * 50); } + + .nb0-m { margin-bottom: 0; } + .nb1-m { margin-bottom: calc(-1 * var(--grid-size) * 1); } + .nb2-m { margin-bottom: calc(-1 * var(--grid-size) * 2); } + .nb3-m { margin-bottom: calc(-1 * var(--grid-size) * 3); } + .nb4-m { margin-bottom: calc(-1 * var(--grid-size) * 4); } + .nb5-m { margin-bottom: calc(-1 * var(--grid-size) * 5); } + .nb6-m { margin-bottom: calc(-1 * var(--grid-size) * 6); } + .nb7-m { margin-bottom: calc(-1 * var(--grid-size) * 7); } + .nb8-m { margin-bottom: calc(-1 * var(--grid-size) * 8); } + .nb9-m { margin-bottom: calc(-1 * var(--grid-size) * 9); } + .nb10-m { margin-bottom: calc(-1 * var(--grid-size) * 10); } + .nb11-m { margin-bottom: calc(-1 * var(--grid-size) * 11); } + .nb12-m { margin-bottom: calc(-1 * var(--grid-size) * 12); } + .nb13-m { margin-bottom: calc(-1 * var(--grid-size) * 13); } + .nb14-m { margin-bottom: calc(-1 * var(--grid-size) * 14); } + .nb15-m { margin-bottom: calc(-1 * var(--grid-size) * 15); } + .nb16-m { margin-bottom: calc(-1 * var(--grid-size) * 16); } + .nb17-m { margin-bottom: calc(-1 * var(--grid-size) * 17); } + .nb18-m { margin-bottom: calc(-1 * var(--grid-size) * 18); } + .nb19-m { margin-bottom: calc(-1 * var(--grid-size) * 19); } + .nb20-m { margin-bottom: calc(-1 * var(--grid-size) * 20); } + .nb25-m { margin-bottom: calc(-1 * var(--grid-size) * 25); } + .nb30-m { margin-bottom: calc(-1 * var(--grid-size) * 30); } + .nb40-m { margin-bottom: calc(-1 * var(--grid-size) * 40); } + .nb50-m { margin-bottom: calc(-1 * var(--grid-size) * 50); } + + .nl0-m { margin-left: 0; } + .nl1-m { margin-left: calc(-1 * var(--grid-size) * 1); } + .nl2-m { margin-left: calc(-1 * var(--grid-size) * 2); } + .nl3-m { margin-left: calc(-1 * var(--grid-size) * 3); } + .nl4-m { margin-left: calc(-1 * var(--grid-size) * 4); } + .nl5-m { margin-left: calc(-1 * var(--grid-size) * 5); } + .nl6-m { margin-left: calc(-1 * var(--grid-size) * 6); } + .nl7-m { margin-left: calc(-1 * var(--grid-size) * 7); } + .nl8-m { margin-left: calc(-1 * var(--grid-size) * 8); } + .nl9-m { margin-left: calc(-1 * var(--grid-size) * 9); } + .nl10-m { margin-left: calc(-1 * var(--grid-size) * 10); } + .nl11-m { margin-left: calc(-1 * var(--grid-size) * 11); } + .nl12-m { margin-left: calc(-1 * var(--grid-size) * 12); } + .nl13-m { margin-left: calc(-1 * var(--grid-size) * 13); } + .nl14-m { margin-left: calc(-1 * var(--grid-size) * 14); } + .nl15-m { margin-left: calc(-1 * var(--grid-size) * 15); } + .nl16-m { margin-left: calc(-1 * var(--grid-size) * 16); } + .nl17-m { margin-left: calc(-1 * var(--grid-size) * 17); } + .nl18-m { margin-left: calc(-1 * var(--grid-size) * 18); } + .nl19-m { margin-left: calc(-1 * var(--grid-size) * 19); } + .nl20-m { margin-left: calc(-1 * var(--grid-size) * 20); } + .nl25-m { margin-left: calc(-1 * var(--grid-size) * 25); } + .nl30-m { margin-left: calc(-1 * var(--grid-size) * 30); } + .nl40-m { margin-left: calc(-1 * var(--grid-size) * 40); } + .nl50-m { margin-left: calc(-1 * var(--grid-size) * 50); } + + .nt0-m { margin-top: 0; } + .nt1-m { margin-top: calc(-1 * var(--grid-size) * 1); } + .nt2-m { margin-top: calc(-1 * var(--grid-size) * 2); } + .nt3-m { margin-top: calc(-1 * var(--grid-size) * 3); } + .nt4-m { margin-top: calc(-1 * var(--grid-size) * 4); } + .nt5-m { margin-top: calc(-1 * var(--grid-size) * 5); } + .nt6-m { margin-top: calc(-1 * var(--grid-size) * 6); } + .nt7-m { margin-top: calc(-1 * var(--grid-size) * 7); } + .nt8-m { margin-top: calc(-1 * var(--grid-size) * 8); } + .nt9-m { margin-top: calc(-1 * var(--grid-size) * 9); } + .nt10-m { margin-top: calc(-1 * var(--grid-size) * 10); } + .nt11-m { margin-top: calc(-1 * var(--grid-size) * 11); } + .nt12-m { margin-top: calc(-1 * var(--grid-size) * 12); } + .nt13-m { margin-top: calc(-1 * var(--grid-size) * 13); } + .nt14-m { margin-top: calc(-1 * var(--grid-size) * 14); } + .nt15-m { margin-top: calc(-1 * var(--grid-size) * 15); } + .nt16-m { margin-top: calc(-1 * var(--grid-size) * 16); } + .nt17-m { margin-top: calc(-1 * var(--grid-size) * 17); } + .nt18-m { margin-top: calc(-1 * var(--grid-size) * 18); } + .nt19-m { margin-top: calc(-1 * var(--grid-size) * 19); } + .nt20-m { margin-top: calc(-1 * var(--grid-size) * 20); } + .nt25-m { margin-top: calc(-1 * var(--grid-size) * 25); } + .nt30-m { margin-top: calc(-1 * var(--grid-size) * 30); } + .nt40-m { margin-top: calc(-1 * var(--grid-size) * 40); } + .nt50-m { margin-top: calc(-1 * var(--grid-size) * 50); } +} + +@media (--breakpoint-large) { + .na0-l { margin: 0; } + .na1-l { margin: calc(-1 * var(--grid-size) * 1); } + .na2-l { margin: calc(-1 * var(--grid-size) * 2); } + .na3-l { margin: calc(-1 * var(--grid-size) * 3); } + .na4-l { margin: calc(-1 * var(--grid-size) * 4); } + .na5-l { margin: calc(-1 * var(--grid-size) * 5); } + .na6-l { margin: calc(-1 * var(--grid-size) * 6); } + .na7-l { margin: calc(-1 * var(--grid-size) * 7); } + .na8-l { margin: calc(-1 * var(--grid-size) * 8); } + .na9-l { margin: calc(-1 * var(--grid-size) * 9); } + .na10-l { margin: calc(-1 * var(--grid-size) * 10); } + .na11-l { margin: calc(-1 * var(--grid-size) * 11); } + .na12-l { margin: calc(-1 * var(--grid-size) * 12); } + .na13-l { margin: calc(-1 * var(--grid-size) * 13); } + .na14-l { margin: calc(-1 * var(--grid-size) * 14); } + .na15-l { margin: calc(-1 * var(--grid-size) * 15); } + .na16-l { margin: calc(-1 * var(--grid-size) * 16); } + .na17-l { margin: calc(-1 * var(--grid-size) * 17); } + .na18-l { margin: calc(-1 * var(--grid-size) * 18); } + .na19-l { margin: calc(-1 * var(--grid-size) * 19); } + .na20-l { margin: calc(-1 * var(--grid-size) * 20); } + .na25-l { margin: calc(-1 * var(--grid-size) * 25); } + .na30-l { margin: calc(-1 * var(--grid-size) * 30); } + .na40-l { margin: calc(-1 * var(--grid-size) * 40); } + .na50-l { margin: calc(-1 * var(--grid-size) * 50); } + + .nr0-l { margin-right: 0; } + .nr1-l { margin-right: calc(-1 * var(--grid-size) * 1); } + .nr2-l { margin-right: calc(-1 * var(--grid-size) * 2); } + .nr3-l { margin-right: calc(-1 * var(--grid-size) * 3); } + .nr4-l { margin-right: calc(-1 * var(--grid-size) * 4); } + .nr5-l { margin-right: calc(-1 * var(--grid-size) * 5); } + .nr6-l { margin-right: calc(-1 * var(--grid-size) * 6); } + .nr7-l { margin-right: calc(-1 * var(--grid-size) * 7); } + .nr8-l { margin-right: calc(-1 * var(--grid-size) * 8); } + .nr9-l { margin-right: calc(-1 * var(--grid-size) * 9); } + .nr10-l { margin-right: calc(-1 * var(--grid-size) * 10); } + .nr11-l { margin-right: calc(-1 * var(--grid-size) * 11); } + .nr12-l { margin-right: calc(-1 * var(--grid-size) * 12); } + .nr13-l { margin-right: calc(-1 * var(--grid-size) * 13); } + .nr14-l { margin-right: calc(-1 * var(--grid-size) * 14); } + .nr15-l { margin-right: calc(-1 * var(--grid-size) * 15); } + .nr16-l { margin-right: calc(-1 * var(--grid-size) * 16); } + .nr17-l { margin-right: calc(-1 * var(--grid-size) * 17); } + .nr18-l { margin-right: calc(-1 * var(--grid-size) * 18); } + .nr19-l { margin-right: calc(-1 * var(--grid-size) * 19); } + .nr20-l { margin-right: calc(-1 * var(--grid-size) * 20); } + .nr25-l { margin-right: calc(-1 * var(--grid-size) * 25); } + .nr30-l { margin-right: calc(-1 * var(--grid-size) * 30); } + .nr40-l { margin-right: calc(-1 * var(--grid-size) * 40); } + .nr50-l { margin-right: calc(-1 * var(--grid-size) * 50); } + + .nb0-l { margin-bottom: 0; } + .nb1-l { margin-bottom: calc(-1 * var(--grid-size) * 1); } + .nb2-l { margin-bottom: calc(-1 * var(--grid-size) * 2); } + .nb3-l { margin-bottom: calc(-1 * var(--grid-size) * 3); } + .nb4-l { margin-bottom: calc(-1 * var(--grid-size) * 4); } + .nb5-l { margin-bottom: calc(-1 * var(--grid-size) * 5); } + .nb6-l { margin-bottom: calc(-1 * var(--grid-size) * 6); } + .nb7-l { margin-bottom: calc(-1 * var(--grid-size) * 7); } + .nb8-l { margin-bottom: calc(-1 * var(--grid-size) * 8); } + .nb9-l { margin-bottom: calc(-1 * var(--grid-size) * 9); } + .nb10-l { margin-bottom: calc(-1 * var(--grid-size) * 10); } + .nb11-l { margin-bottom: calc(-1 * var(--grid-size) * 11); } + .nb12-l { margin-bottom: calc(-1 * var(--grid-size) * 12); } + .nb13-l { margin-bottom: calc(-1 * var(--grid-size) * 13); } + .nb14-l { margin-bottom: calc(-1 * var(--grid-size) * 14); } + .nb15-l { margin-bottom: calc(-1 * var(--grid-size) * 15); } + .nb16-l { margin-bottom: calc(-1 * var(--grid-size) * 16); } + .nb17-l { margin-bottom: calc(-1 * var(--grid-size) * 17); } + .nb18-l { margin-bottom: calc(-1 * var(--grid-size) * 18); } + .nb19-l { margin-bottom: calc(-1 * var(--grid-size) * 19); } + .nb20-l { margin-bottom: calc(-1 * var(--grid-size) * 20); } + .nb25-l { margin-bottom: calc(-1 * var(--grid-size) * 25); } + .nb30-l { margin-bottom: calc(-1 * var(--grid-size) * 30); } + .nb40-l { margin-bottom: calc(-1 * var(--grid-size) * 40); } + .nb50-l { margin-bottom: calc(-1 * var(--grid-size) * 50); } + + .nl0-l { margin-left: 0; } + .nl1-l { margin-left: calc(-1 * var(--grid-size) * 1); } + .nl2-l { margin-left: calc(-1 * var(--grid-size) * 2); } + .nl3-l { margin-left: calc(-1 * var(--grid-size) * 3); } + .nl4-l { margin-left: calc(-1 * var(--grid-size) * 4); } + .nl5-l { margin-left: calc(-1 * var(--grid-size) * 5); } + .nl6-l { margin-left: calc(-1 * var(--grid-size) * 6); } + .nl7-l { margin-left: calc(-1 * var(--grid-size) * 7); } + .nl8-l { margin-left: calc(-1 * var(--grid-size) * 8); } + .nl9-l { margin-left: calc(-1 * var(--grid-size) * 9); } + .nl10-l { margin-left: calc(-1 * var(--grid-size) * 10); } + .nl11-l { margin-left: calc(-1 * var(--grid-size) * 11); } + .nl12-l { margin-left: calc(-1 * var(--grid-size) * 12); } + .nl13-l { margin-left: calc(-1 * var(--grid-size) * 13); } + .nl14-l { margin-left: calc(-1 * var(--grid-size) * 14); } + .nl15-l { margin-left: calc(-1 * var(--grid-size) * 15); } + .nl16-l { margin-left: calc(-1 * var(--grid-size) * 16); } + .nl17-l { margin-left: calc(-1 * var(--grid-size) * 17); } + .nl18-l { margin-left: calc(-1 * var(--grid-size) * 18); } + .nl19-l { margin-left: calc(-1 * var(--grid-size) * 19); } + .nl20-l { margin-left: calc(-1 * var(--grid-size) * 20); } + .nl25-l { margin-left: calc(-1 * var(--grid-size) * 25); } + .nl30-l { margin-left: calc(-1 * var(--grid-size) * 30); } + .nl40-l { margin-left: calc(-1 * var(--grid-size) * 40); } + .nl50-l { margin-left: calc(-1 * var(--grid-size) * 50); } + + .nt0-l { margin-top: 0; } + .nt1-l { margin-top: calc(-1 * var(--grid-size) * 1); } + .nt2-l { margin-top: calc(-1 * var(--grid-size) * 2); } + .nt3-l { margin-top: calc(-1 * var(--grid-size) * 3); } + .nt4-l { margin-top: calc(-1 * var(--grid-size) * 4); } + .nt5-l { margin-top: calc(-1 * var(--grid-size) * 5); } + .nt6-l { margin-top: calc(-1 * var(--grid-size) * 6); } + .nt7-l { margin-top: calc(-1 * var(--grid-size) * 7); } + .nt8-l { margin-top: calc(-1 * var(--grid-size) * 8); } + .nt9-l { margin-top: calc(-1 * var(--grid-size) * 9); } + .nt10-l { margin-top: calc(-1 * var(--grid-size) * 10); } + .nt11-l { margin-top: calc(-1 * var(--grid-size) * 11); } + .nt12-l { margin-top: calc(-1 * var(--grid-size) * 12); } + .nt13-l { margin-top: calc(-1 * var(--grid-size) * 13); } + .nt14-l { margin-top: calc(-1 * var(--grid-size) * 14); } + .nt15-l { margin-top: calc(-1 * var(--grid-size) * 15); } + .nt16-l { margin-top: calc(-1 * var(--grid-size) * 16); } + .nt17-l { margin-top: calc(-1 * var(--grid-size) * 17); } + .nt18-l { margin-top: calc(-1 * var(--grid-size) * 18); } + .nt19-l { margin-top: calc(-1 * var(--grid-size) * 19); } + .nt20-l { margin-top: calc(-1 * var(--grid-size) * 20); } + .nt25-l { margin-top: calc(-1 * var(--grid-size) * 25); } + .nt30-l { margin-top: calc(-1 * var(--grid-size) * 30); } + .nt40-l { margin-top: calc(-1 * var(--grid-size) * 40); } + .nt50-l { margin-top: calc(-1 * var(--grid-size) * 50); } +} diff --git a/ghost/admin/app/styles/spirit/_nested.css b/ghost/admin/app/styles/spirit/_nested.css new file mode 100644 index 0000000000..dc833b608f --- /dev/null +++ b/ghost/admin/app/styles/spirit/_nested.css @@ -0,0 +1,56 @@ +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ + +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: 1.5; +} + +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: 1.25; +} + +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; +} + +.nested-copy-indent p+p { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.nested-copy-separator p+p { + margin-top: 1.5em; +} + +.nested-img img { + width: 100%; + max-width: 100%; + display: block; +} + +.nested-links a { + color: var(--blue); + transition: color .15s ease-in; +} + +.nested-links a:hover, +.nested-links a:focus { + color: var(--blue); + transition: color .15s ease-in; +} diff --git a/ghost/admin/app/styles/spirit/_normalize.css b/ghost/admin/app/styles/spirit/_normalize.css new file mode 100644 index 0000000000..b944659343 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_normalize.css @@ -0,0 +1,449 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + /* font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/ghost/admin/app/styles/spirit/_nudge.css b/ghost/admin/app/styles/spirit/_nudge.css new file mode 100644 index 0000000000..f3812766eb --- /dev/null +++ b/ghost/admin/app/styles/spirit/_nudge.css @@ -0,0 +1,682 @@ +/* + + Base: + nudge + + Modifier: + -top = nudge from top (downwards) + -right = nudge from right (to left) + -bottom = nudge from bottom (upwards) + -left = nudge from left (to right) + + Value: + --(n) = n px to nudge by + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.nudge-top--1 { + position: relative; + top: 1px; +} +.nudge-top--2 { + position: relative; + top: 2px; +} +.nudge-top--3 { + position: relative; + top: 3px; +} +.nudge-top--4 { + position: relative; + top: 4px; +} +.nudge-top--5 { + position: relative; + top: 5px; +} +.nudge-top--6 { + position: relative; + top: 6px; +} +.nudge-top--7 { + position: relative; + top: 7px; +} +.nudge-top--8 { + position: relative; + top: 8px; +} +.nudge-top--9 { + position: relative; + top: 9px; +} +.nudge-top--10 { + position: relative; + top: 10px; +} + +.nudge-right--1 { + position: relative; + right: 1px; +} +.nudge-right--2 { + position: relative; + right: 2px; +} +.nudge-right--3 { + position: relative; + right: 3px; +} +.nudge-right--4 { + position: relative; + right: 4px; +} +.nudge-right--5 { + position: relative; + right: 5px; +} +.nudge-right--6 { + position: relative; + right: 6px; +} +.nudge-right--7 { + position: relative; + right: 7px; +} +.nudge-right--8 { + position: relative; + right: 8px; +} +.nudge-right--9 { + position: relative; + right: 9px; +} +.nudge-right--10 { + position: relative; + right: 10px; +} + +.nudge-bottom--1 { + position: relative; + bottom: 1px; +} +.nudge-bottom--2 { + position: relative; + bottom: 2px; +} +.nudge-bottom--3 { + position: relative; + bottom: 3px; +} +.nudge-bottom--4 { + position: relative; + bottom: 4px; +} +.nudge-bottom--5 { + position: relative; + bottom: 5px; +} +.nudge-bottom--6 { + position: relative; + bottom: 6px; +} +.nudge-bottom--7 { + position: relative; + bottom: 7px; +} +.nudge-bottom--8 { + position: relative; + bottom: 8px; +} +.nudge-bottom--9 { + position: relative; + bottom: 9px; +} +.nudge-bottom--10 { + position: relative; + bottom: 10px; +} + +.nudge-left--1 { + position: relative; + left: 1px; +} +.nudge-left--2 { + position: relative; + left: 2px; +} +.nudge-left--3 { + position: relative; + left: 3px; +} +.nudge-left--4 { + position: relative; + left: 4px; +} +.nudge-left--5 { + position: relative; + left: 5px; +} +.nudge-left--6 { + position: relative; + left: 6px; +} +.nudge-left--7 { + position: relative; + left: 7px; +} +.nudge-left--8 { + position: relative; + left: 8px; +} +.nudge-left--9 { + position: relative; + left: 9px; +} +.nudge-left--10 { + position: relative; + left: 10px; +} + +@media (--breakpoint-not-small) { + .nudge-top--1-ns { + position: relative; + top: 1px; + } + .nudge-top--2-ns { + position: relative; + top: 2px; + } + .nudge-top--3-ns { + position: relative; + top: 3px; + } + .nudge-top--4-ns { + position: relative; + top: 4px; + } + .nudge-top--5-ns { + position: relative; + top: 5px; + } + .nudge-top--6-ns { + position: relative; + top: 6px; + } + .nudge-top--7-ns { + position: relative; + top: 7px; + } + .nudge-top--8-ns { + position: relative; + top: 8px; + } + .nudge-top--9-ns { + position: relative; + top: 9px; + } + .nudge-top--10-ns { + position: relative; + top: 10px; + } + + .nudge-right--1-ns { + position: relative; + right: 1px; + } + .nudge-right--2-ns { + position: relative; + right: 2px; + } + .nudge-right--3-ns { + position: relative; + right: 3px; + } + .nudge-right--4-ns { + position: relative; + right: 4px; + } + .nudge-right--5-ns { + position: relative; + right: 5px; + } + .nudge-right--6-ns { + position: relative; + right: 6px; + } + .nudge-right--7-ns { + position: relative; + right: 7px; + } + .nudge-right--8-ns { + position: relative; + right: 8px; + } + .nudge-right--9-ns { + position: relative; + right: 9px; + } + .nudge-right--10-ns { + position: relative; + right: 10px; + } + + .nudge-bottom--1-ns { + position: relative; + bottom: 1px; + } + .nudge-bottom--2-ns { + position: relative; + bottom: 2px; + } + .nudge-bottom--3-ns { + position: relative; + bottom: 3px; + } + .nudge-bottom--4-ns { + position: relative; + bottom: 4px; + } + .nudge-bottom--5-ns { + position: relative; + bottom: 5px; + } + .nudge-bottom--6-ns { + position: relative; + bottom: 6px; + } + .nudge-bottom--7-ns { + position: relative; + bottom: 7px; + } + .nudge-bottom--8-ns { + position: relative; + bottom: 8px; + } + .nudge-bottom--9-ns { + position: relative; + bottom: 9px; + } + .nudge-bottom--10-ns { + position: relative; + bottom: 10px; + } + + .nudge-left--1-ns { + position: relative; + left: 1px; + } + .nudge-left--2-ns { + position: relative; + left: 2px; + } + .nudge-left--3-ns { + position: relative; + left: 3px; + } + .nudge-left--4-ns { + position: relative; + left: 4px; + } + .nudge-left--5-ns { + position: relative; + left: 5px; + } + .nudge-left--6-ns { + position: relative; + left: 6px; + } + .nudge-left--7-ns { + position: relative; + left: 7px; + } + .nudge-left--8-ns { + position: relative; + left: 8px; + } + .nudge-left--9-ns { + position: relative; + left: 9px; + } + .nudge-left--10-ns { + position: relative; + left: 10px; + } +} + +@media (--breakpoint-medium) { + .nudge-top--1-m { + position: relative; + top: 1px; + } + .nudge-top--2-m { + position: relative; + top: 2px; + } + .nudge-top--3-m { + position: relative; + top: 3px; + } + .nudge-top--4-m { + position: relative; + top: 4px; + } + .nudge-top--5-m { + position: relative; + top: 5px; + } + .nudge-top--6-m { + position: relative; + top: 6px; + } + .nudge-top--7-m { + position: relative; + top: 7px; + } + .nudge-top--8-m { + position: relative; + top: 8px; + } + .nudge-top--9-m { + position: relative; + top: 9px; + } + .nudge-top--10-m { + position: relative; + top: 10px; + } + + .nudge-right--1-m { + position: relative; + right: 1px; + } + .nudge-right--2-m { + position: relative; + right: 2px; + } + .nudge-right--3-m { + position: relative; + right: 3px; + } + .nudge-right--4-m { + position: relative; + right: 4px; + } + .nudge-right--5-m { + position: relative; + right: 5px; + } + .nudge-right--6-m { + position: relative; + right: 6px; + } + .nudge-right--7-m { + position: relative; + right: 7px; + } + .nudge-right--8-m { + position: relative; + right: 8px; + } + .nudge-right--9-m { + position: relative; + right: 9px; + } + .nudge-right--10-m { + position: relative; + right: 10px; + } + + .nudge-bottom--1-m { + position: relative; + bottom: 1px; + } + .nudge-bottom--2-m { + position: relative; + bottom: 2px; + } + .nudge-bottom--3-m { + position: relative; + bottom: 3px; + } + .nudge-bottom--4-m { + position: relative; + bottom: 4px; + } + .nudge-bottom--5-m { + position: relative; + bottom: 5px; + } + .nudge-bottom--6-m { + position: relative; + bottom: 6px; + } + .nudge-bottom--7-m { + position: relative; + bottom: 7px; + } + .nudge-bottom--8-m { + position: relative; + bottom: 8px; + } + .nudge-bottom--9-m { + position: relative; + bottom: 9px; + } + .nudge-bottom--10-m { + position: relative; + bottom: 10px; + } + + .nudge-left--1-m { + position: relative; + left: 1px; + } + .nudge-left--2-m { + position: relative; + left: 2px; + } + .nudge-left--3-m { + position: relative; + left: 3px; + } + .nudge-left--4-m { + position: relative; + left: 4px; + } + .nudge-left--5-m { + position: relative; + left: 5px; + } + .nudge-left--6-m { + position: relative; + left: 6px; + } + .nudge-left--7-m { + position: relative; + left: 7px; + } + .nudge-left--8-m { + position: relative; + left: 8px; + } + .nudge-left--9-m { + position: relative; + left: 9px; + } + .nudge-left--10-m { + position: relative; + left: 10px; + } +} + +@media (--breakpoint-large) { + .nudge-top--1-l { + position: relative; + top: 1px; + } + .nudge-top--2-l { + position: relative; + top: 2px; + } + .nudge-top--3-l { + position: relative; + top: 3px; + } + .nudge-top--4-l { + position: relative; + top: 4px; + } + .nudge-top--5-l { + position: relative; + top: 5px; + } + .nudge-top--6-l { + position: relative; + top: 6px; + } + .nudge-top--7-l { + position: relative; + top: 7px; + } + .nudge-top--8-l { + position: relative; + top: 8px; + } + .nudge-top--9-l { + position: relative; + top: 9px; + } + .nudge-top--10-l { + position: relative; + top: 10px; + } + + .nudge-right--1-l { + position: relative; + right: 1px; + } + .nudge-right--2-l { + position: relative; + right: 2px; + } + .nudge-right--3-l { + position: relative; + right: 3px; + } + .nudge-right--4-l { + position: relative; + right: 4px; + } + .nudge-right--5-l { + position: relative; + right: 5px; + } + .nudge-right--6-l { + position: relative; + right: 6px; + } + .nudge-right--7-l { + position: relative; + right: 7px; + } + .nudge-right--8-l { + position: relative; + right: 8px; + } + .nudge-right--9-l { + position: relative; + right: 9px; + } + .nudge-right--10-l { + position: relative; + right: 10px; + } + + .nudge-bottom--1-l { + position: relative; + bottom: 1px; + } + .nudge-bottom--2-l { + position: relative; + bottom: 2px; + } + .nudge-bottom--3-l { + position: relative; + bottom: 3px; + } + .nudge-bottom--4-l { + position: relative; + bottom: 4px; + } + .nudge-bottom--5-l { + position: relative; + bottom: 5px; + } + .nudge-bottom--6-l { + position: relative; + bottom: 6px; + } + .nudge-bottom--7-l { + position: relative; + bottom: 7px; + } + .nudge-bottom--8-l { + position: relative; + bottom: 8px; + } + .nudge-bottom--9-l { + position: relative; + bottom: 9px; + } + .nudge-bottom--10-l { + position: relative; + bottom: 10px; + } + + .nudge-left--1-l { + position: relative; + left: 1px; + } + .nudge-left--2-l { + position: relative; + left: 2px; + } + .nudge-left--3-l { + position: relative; + left: 3px; + } + .nudge-left--4-l { + position: relative; + left: 4px; + } + .nudge-left--5-l { + position: relative; + left: 5px; + } + .nudge-left--6-l { + position: relative; + left: 6px; + } + .nudge-left--7-l { + position: relative; + left: 7px; + } + .nudge-left--8-l { + position: relative; + left: 8px; + } + .nudge-left--9-l { + position: relative; + left: 9px; + } + .nudge-left--10-l { + position: relative; + left: 10px; + } +} diff --git a/ghost/admin/app/styles/spirit/_opacity.css b/ghost/admin/app/styles/spirit/_opacity.css new file mode 100644 index 0000000000..9f3de143ee --- /dev/null +++ b/ghost/admin/app/styles/spirit/_opacity.css @@ -0,0 +1,13 @@ +.o-100 { opacity: 1; } +.o-90 { opacity: .9; } +.o-80 { opacity: .8; } +.o-70 { opacity: .7; } +.o-60 { opacity: .6; } +.o-50 { opacity: .5; } +.o-40 { opacity: .4; } +.o-30 { opacity: .3; } +.o-20 { opacity: .2; } +.o-10 { opacity: .1; } +.o-05 { opacity: .05; } +.o-025 { opacity: .025; } +.o-0 { opacity: 0; } diff --git a/ghost/admin/app/styles/spirit/_outlines.css b/ghost/admin/app/styles/spirit/_outlines.css new file mode 100644 index 0000000000..e9b0ed996b --- /dev/null +++ b/ghost/admin/app/styles/spirit/_outlines.css @@ -0,0 +1,32 @@ +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.outline { outline: 1px solid; } +.outline-transparent { outline: 1px solid transparent; } +.outline-0 { outline: 0; } + +@media (--breakpoint-not-small) { + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } +} + +@media (--breakpoint-medium) { + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } + .outline-0-m { outline: 0; } +} + +@media (--breakpoint-large) { + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } + .outline-0-l { outline: 0; } +} diff --git a/ghost/admin/app/styles/spirit/_overflow.css b/ghost/admin/app/styles/spirit/_overflow.css new file mode 100644 index 0000000000..82ca8ebbc4 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_overflow.css @@ -0,0 +1,75 @@ +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.overflow-visible { overflow: visible; } +.overflow-hidden { overflow: hidden; } +.overflow-scroll { overflow: scroll; } +.overflow-auto { overflow: auto; } + +.overflow-x-visible { overflow-x: visible; } +.overflow-x-hidden { overflow-x: hidden; } +.overflow-x-scroll { overflow-x: scroll; } +.overflow-x-auto { overflow-x: auto; } + +.overflow-y-visible { overflow-y: visible; } +.overflow-y-hidden { overflow-y: hidden; } +.overflow-y-scroll { overflow-y: scroll; } +.overflow-y-auto { overflow-y: auto; } + +@media (--breakpoint-not-small) { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } +} + +@media (--breakpoint-medium) { + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } +} + +@media (--breakpoint-large) { + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .overflow-y-auto-l { overflow-y: auto; } +} diff --git a/ghost/admin/app/styles/spirit/_pointer-events.css b/ghost/admin/app/styles/spirit/_pointer-events.css new file mode 100644 index 0000000000..d93c35be7d --- /dev/null +++ b/ghost/admin/app/styles/spirit/_pointer-events.css @@ -0,0 +1,24 @@ +/* + + POINTER EVENTS + + Base: + pe = pointer-events + +*/ + +.pe-auto { pointer-events: auto; } +.pe-none { pointer-events: none; } +.pe-inherit { pointer-events: inherit; } +.pe-initial { pointer-events: initial; } +.pe-unset { pointer-events: unset; } + +/* SVG only events */ +.pe-visiblePainted { pointer-events: visiblePainted; } +.pe-visibleFill { pointer-events: visibleFill; } +.pe-visibleStroke { pointer-events: visibleStroke; } +.pe-visible { pointer-events: visible; } +.pe-painted { pointer-events: painted; } +.pe-fill { pointer-events: fill; } +.pe-stroke { pointer-events: stroke; } +.pe-all { pointer-events: all; } diff --git a/ghost/admin/app/styles/spirit/_position.css b/ghost/admin/app/styles/spirit/_position.css new file mode 100644 index 0000000000..b8f7331985 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_position.css @@ -0,0 +1,38 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.static { position: static; } +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } +.sticky { position: sticky; } + +@media (--breakpoint-not-small) { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } + .sticky-ns { position: sticky; } +} + +@media (--breakpoint-medium) { + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } + .sticky-m { position: sticky; } +} + +@media (--breakpoint-large) { + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } + .sticky-l { position: sticky; } +} diff --git a/ghost/admin/app/styles/spirit/_rotations.css b/ghost/admin/app/styles/spirit/_rotations.css new file mode 100644 index 0000000000..5adf7aad28 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_rotations.css @@ -0,0 +1,43 @@ +/* + + ROTATIONS + +*/ + +.rotate-45 { transform: rotate(45deg); } +.rotate-90 { transform: rotate(90deg); } +.rotate-135 { transform: rotate(135deg); } +.rotate-180 { transform: rotate(180deg); } +.rotate-225 { transform: rotate(225deg); } +.rotate-270 { transform: rotate(270deg); } +.rotate-315 { transform: rotate(315deg); } + +@media (--breakpoint-not-small){ + .rotate-45-ns { transform: rotate(45deg); } + .rotate-90-ns { transform: rotate(90deg); } + .rotate-135-ns { transform: rotate(135deg); } + .rotate-180-ns { transform: rotate(180deg); } + .rotate-225-ns { transform: rotate(225deg); } + .rotate-270-ns { transform: rotate(270deg); } + .rotate-315-ns { transform: rotate(315deg); } +} + +@media (--breakpoint-medium){ + .rotate-45-m { transform: rotate(45deg); } + .rotate-90-m { transform: rotate(90deg); } + .rotate-135-m { transform: rotate(135deg); } + .rotate-180-m { transform: rotate(180deg); } + .rotate-225-m { transform: rotate(225deg); } + .rotate-270-m { transform: rotate(270deg); } + .rotate-315-m { transform: rotate(315deg); } +} + +@media (--breakpoint-large){ + .rotate-45-l { transform: rotate(45deg); } + .rotate-90-l { transform: rotate(90deg); } + .rotate-135-l { transform: rotate(135deg); } + .rotate-180-l { transform: rotate(180deg); } + .rotate-225-l { transform: rotate(225deg); } + .rotate-270-l { transform: rotate(270deg); } + .rotate-315-l { transform: rotate(315deg); } +} diff --git a/ghost/admin/app/styles/spirit/_skins.css b/ghost/admin/app/styles/spirit/_skins.css new file mode 100644 index 0000000000..6aff5e84e2 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_skins.css @@ -0,0 +1,224 @@ +/* Text colors */ + +.blue { color: var(--blue); } +.green { color: var(--green); } +.purple { color: var(--purple); } +.yellow { color: var(--yellow); } +.red { color: var(--red); } +.pink { color: var(--pink); } +.white { color: var(--white); } + +.white-10 { color: var(--white-10); } +.white-20 { color: var(--white-20); } +.white-30 { color: var(--white-30); } +.white-40 { color: var(--white-40); } +.white-50 { color: var(--white-50); } +.white-60 { color: var(--white-60); } +.white-70 { color: var(--white-70); } +.white-80 { color: var(--white-80); } +.white-90 { color: var(--white-90); } + +.black-10 { color: var(--black-10); } +.black-20 { color: var(--black-20); } +.black-30 { color: var(--black-30); } +.black-40 { color: var(--black-40); } +.black-50 { color: var(--black-50); } +.black-60 { color: var(--black-60); } +.black-70 { color: var(--black-70); } +.black-80 { color: var(--black-80); } +.black-90 { color: var(--black-90); } + +.darkgrey { color: var(--darkgrey); } +.middarkgrey { color: var(--middarkgrey); } +.midgrey { color: var(--midgrey); } +.midlightgrey { color: var(--midlightgrey); } +.lightgrey { color: var(--lightgrey); } +.whitegrey { color: var(--whitegrey); } + +/* Shades */ +.blue-l3 { color: var(--blue-l3); } +.blue-l2 { color: var(--blue-l2); } +.blue-l1 { color: var(--blue-l1); } +.blue-d1 { color: var(--blue-d1); } +.blue-d2 { color: var(--blue-d2); } +.blue-d3 { color: var(--blue-d3); } + +.green-l3 { color: var(--green-l3); } +.green-l2 { color: var(--green-l2); } +.green-l1 { color: var(--green-l1); } +.green-d1 { color: var(--green-d1); } +.green-d2 { color: var(--green-d2); } +.green-d3 { color: var(--green-d3); } + +.purple-l3 { color: var(--purple-l3); } +.purple-l2 { color: var(--purple-l2); } +.purple-l1 { color: var(--purple-l1); } +.purple-d1 { color: var(--purple-d1); } +.purple-d2 { color: var(--purple-d2); } +.purple-d3 { color: var(--purple-d3); } + +.yellow-l3 { color: var(--yellow-l3); } +.yellow-l2 { color: var(--yellow-l2); } +.yellow-l1 { color: var(--yellow-l1); } +.yellow-d1 { color: var(--yellow-d1); } +.yellow-d2 { color: var(--yellow-d2); } +.yellow-d3 { color: var(--yellow-d3); } + +.red-l3 { color: var(--red-l3); } +.red-l2 { color: var(--red-l2); } +.red-l1 { color: var(--red-l1); } +.red-d1 { color: var(--red-d1); } +.red-d2 { color: var(--red-d2); } +.red-d3 { color: var(--red-d3); } + +.pink-l3 { color: var(--pink-l3); } +.pink-l2 { color: var(--pink-l2); } +.pink-l1 { color: var(--pink-l1); } +.pink-d1 { color: var(--pink-d1); } +.pink-d2 { color: var(--pink-d2); } +.pink-d3 { color: var(--pink-d3); } + +.darkgrey-l2 { color: var(--darkgrey-l2); } +.darkgrey-l1 { color: var(--darkgrey-l1); } +.darkgrey-d1 { color: var(--darkgrey-d1); } +.darkgrey-d2 { color: var(--darkgrey-d2); } + +.middarkgrey-l2 { color: var(--middarkgrey-l2); } +.middarkgrey-l1 { color: var(--middarkgrey-l1); } +.middarkgrey-d1 { color: var(--middarkgrey-d1); } +.middarkgrey-d2 { color: var(--middarkgrey-d2); } + +.midgrey-l2 { color: var(--midgrey-l2); } +.midgrey-l1 { color: var(--midgrey-l1); } +.midgrey-d1 { color: var(--midgrey-d1); } +.midgrey-d2 { color: var(--midgrey-d2); } + +.midlightgrey-l2 { color: var(--midlightgrey-l2); } +.midlightgrey-l1 { color: var(--midlightgrey-l1); } +.midlightgrey-d1 { color: var(--midlightgrey-d1); } +.midlightgrey-d2 { color: var(--midlightgrey-d2); } + +.lightgrey-l2 { color: var(--lightgrey-l2); } +.lightgrey-l1 { color: var(--lightgrey-l1); } +.lightgrey-d1 { color: var(--lightgrey-d1); } +.lightgrey-d2 { color: var(--lightgrey-d2); } + +.whitegrey-l2 { color: var(--whitegrey-l2); } +.whitegrey-l1 { color: var(--whitegrey-l1); } +.whitegrey-d1 { color: var(--whitegrey-d1); } +.whitegrey-d2 { color: var(--whitegrey-d2); } + +.color-inherit { color: inherit; } + +/* Background colors */ +.bg-blue { background-color: var(--blue); } +.bg-green { background-color: var(--green); } +.bg-purple { background-color: var(--purple); } +.bg-yellow { background-color: var(--yellow); } +.bg-red { background-color: var(--red); } +.bg-pink { background-color: var(--pink); } +.bg-white { background-color: var(--white); } +.bg-transparent { background-color: transparent !important;} + +.bg-white-10 { background-color: var(--white-10); } +.bg-white-20 { background-color: var(--white-20); } +.bg-white-30 { background-color: var(--white-30); } +.bg-white-40 { background-color: var(--white-40); } +.bg-white-50 { background-color: var(--white-50); } +.bg-white-60 { background-color: var(--white-60); } +.bg-white-70 { background-color: var(--white-70); } +.bg-white-80 { background-color: var(--white-80); } +.bg-white-90 { background-color: var(--white-90); } + +.bg-black-10 { background-color: var(--black-10); } +.bg-black-20 { background-color: var(--black-20); } +.bg-black-30 { background-color: var(--black-30); } +.bg-black-40 { background-color: var(--black-40); } +.bg-black-50 { background-color: var(--black-50); } +.bg-black-60 { background-color: var(--black-60); } +.bg-black-70 { background-color: var(--black-70); } +.bg-black-80 { background-color: var(--black-80); } +.bg-black-90 { background-color: var(--black-90); } + +.bg-darkgrey { background-color: var(--darkgrey); } +.bg-middarkgrey { background-color: var(--middarkgrey); } +.bg-midgrey { background-color: var(--midgrey); } +.bg-midlightgrey { background-color: var(--midlightgrey); } +.bg-lightgrey { background-color: var(--lightgrey); } +.bg-whitegrey { background-color: var(--whitegrey); } + +/* Shades */ +.bg-blue-l3 { background-color: var(--blue-l3); } +.bg-blue-l2 { background-color: var(--blue-l2); } +.bg-blue-l1 { background-color: var(--blue-l1); } +.bg-blue-d1 { background-color: var(--blue-d1); } +.bg-blue-d2 { background-color: var(--blue-d2); } +.bg-blue-d3 { background-color: var(--blue-d3); } + +.bg-green-l3 { background-color: var(--green-l3); } +.bg-green-l2 { background-color: var(--green-l2); } +.bg-green-l1 { background-color: var(--green-l1); } +.bg-green-d1 { background-color: var(--green-d1); } +.bg-green-d2 { background-color: var(--green-d2); } +.bg-green-d3 { background-color: var(--green-d3); } + +.bg-purple-l3 { background-color: var(--purple-l3); } +.bg-purple-l2 { background-color: var(--purple-l2); } +.bg-purple-l1 { background-color: var(--purple-l1); } +.bg-purple-d1 { background-color: var(--purple-d1); } +.bg-purple-d2 { background-color: var(--purple-d2); } +.bg-purple-d3 { background-color: var(--purple-d3); } + +.bg-yellow-l3 { background-color: var(--yellow-l3); } +.bg-yellow-l2 { background-color: var(--yellow-l2); } +.bg-yellow-l1 { background-color: var(--yellow-l1); } +.bg-yellow-d1 { background-color: var(--yellow-d1); } +.bg-yellow-d2 { background-color: var(--yellow-d2); } +.bg-yellow-d3 { background-color: var(--yellow-d3); } + +.bg-red-l3 { background-color: var(--red-l3); } +.bg-red-l2 { background-color: var(--red-l2); } +.bg-red-l1 { background-color: var(--red-l1); } +.bg-red-d1 { background-color: var(--red-d1); } +.bg-red-d2 { background-color: var(--red-d2); } +.bg-red-d3 { background-color: var(--red-d3); } + +.bg-pink-l3 { background-color: var(--pink-l3); } +.bg-pink-l2 { background-color: var(--pink-l2); } +.bg-pink-l1 { background-color: var(--pink-l1); } +.bg-pink-d1 { background-color: var(--pink-d1); } +.bg-pink-d2 { background-color: var(--pink-d2); } +.bg-pink-d3 { background-color: var(--pink-d3); } + +.bg-darkgrey-l2 { background-color: var(--darkgrey-l2); } +.bg-darkgrey-l1 { background-color: var(--darkgrey-l1); } +.bg-darkgrey-d1 { background-color: var(--darkgrey-d1); } +.bg-darkgrey-d2 { background-color: var(--darkgrey-d2); } + +.bg-middarkgrey-l2 { background-color: var(--middarkgrey-l2); } +.bg-middarkgrey-l1 { background-color: var(--middarkgrey-l1); } +.bg-middarkgrey-d1 { background-color: var(--middarkgrey-d1); } +.bg-middarkgrey-d2 { background-color: var(--middarkgrey-d2); } + +.bg-midgrey-l2 { background-color: var(--midgrey-l2); } +.bg-midgrey-l1 { background-color: var(--midgrey-l1); } +.bg-midgrey-d1 { background-color: var(--midgrey-d1); } +.bg-midgrey-d2 { background-color: var(--midgrey-d2); } + +.bg-midlightgrey-l2 { background-color: var(--midlightgrey-l2); } +.bg-midlightgrey-l1 { background-color: var(--midlightgrey-l1); } +.bg-midlightgrey-d1 { background-color: var(--midlightgrey-d1); } +.bg-midlightgrey-d2 { background-color: var(--midlightgrey-d2); } + +.bg-lightgrey-l2 { background-color: var(--lightgrey-l2); } +.bg-lightgrey-l1 { background-color: var(--lightgrey-l1); } +.bg-lightgrey-d1 { background-color: var(--lightgrey-d1); } +.bg-lightgrey-d2 { background-color: var(--lightgrey-d2); } + +.bg-whitegrey-l2 { background-color: var(--whitegrey-l2); } +.bg-whitegrey-l1 { background-color: var(--whitegrey-l1); } +.bg-whitegrey-d1 { background-color: var(--whitegrey-d1); } +.bg-whitegrey-d2 { background-color: var(--whitegrey-d2); } + +/* Special colors */ +.bg-error-red { background-color: var(--errorbg-lightred); } diff --git a/ghost/admin/app/styles/spirit/_spacing.css b/ghost/admin/app/styles/spirit/_spacing.css new file mode 100644 index 0000000000..369d19b502 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_spacing.css @@ -0,0 +1,1072 @@ +/* + + Base: + p = padding + m = margin + + Modifier: + a = all + r = right + b = bottom + l = left + t = top + + Value: + (n) = (n * grid size) + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +:root { + --grid-size: .4rem; +} + +.pa0 { padding: 0; } +.pa1 { padding: calc(var(--grid-size) * 1); } +.pa2 { padding: calc(var(--grid-size) * 2); } +.pa3 { padding: calc(var(--grid-size) * 3); } +.pa4 { padding: calc(var(--grid-size) * 4); } +.pa5 { padding: calc(var(--grid-size) * 5); } +.pa6 { padding: calc(var(--grid-size) * 6); } +.pa7 { padding: calc(var(--grid-size) * 7); } +.pa8 { padding: calc(var(--grid-size) * 8); } +.pa9 { padding: calc(var(--grid-size) * 9); } +.pa10 { padding: calc(var(--grid-size) * 10); } +.pa11 { padding: calc(var(--grid-size) * 11); } +.pa12 { padding: calc(var(--grid-size) * 12); } +.pa13 { padding: calc(var(--grid-size) * 13); } +.pa14 { padding: calc(var(--grid-size) * 14); } +.pa15 { padding: calc(var(--grid-size) * 15); } +.pa16 { padding: calc(var(--grid-size) * 16); } +.pa17 { padding: calc(var(--grid-size) * 17); } +.pa18 { padding: calc(var(--grid-size) * 18); } +.pa19 { padding: calc(var(--grid-size) * 19); } +.pa20 { padding: calc(var(--grid-size) * 20); } +.pa25 { padding: calc(var(--grid-size) * 25); } +.pa30 { padding: calc(var(--grid-size) * 30); } +.pa40 { padding: calc(var(--grid-size) * 40); } +.pa50 { padding: calc(var(--grid-size) * 50); } + +.pr0 { padding-right: 0; } +.pr1 { padding-right: calc(var(--grid-size) * 1); } +.pr2 { padding-right: calc(var(--grid-size) * 2); } +.pr3 { padding-right: calc(var(--grid-size) * 3); } +.pr4 { padding-right: calc(var(--grid-size) * 4); } +.pr5 { padding-right: calc(var(--grid-size) * 5); } +.pr6 { padding-right: calc(var(--grid-size) * 6); } +.pr7 { padding-right: calc(var(--grid-size) * 7); } +.pr8 { padding-right: calc(var(--grid-size) * 8); } +.pr9 { padding-right: calc(var(--grid-size) * 9); } +.pr10 { padding-right: calc(var(--grid-size) * 10); } +.pr11 { padding-right: calc(var(--grid-size) * 11); } +.pr12 { padding-right: calc(var(--grid-size) * 12); } +.pr13 { padding-right: calc(var(--grid-size) * 13); } +.pr14 { padding-right: calc(var(--grid-size) * 14); } +.pr15 { padding-right: calc(var(--grid-size) * 15); } +.pr16 { padding-right: calc(var(--grid-size) * 16); } +.pr17 { padding-right: calc(var(--grid-size) * 17); } +.pr18 { padding-right: calc(var(--grid-size) * 18); } +.pr19 { padding-right: calc(var(--grid-size) * 19); } +.pr20 { padding-right: calc(var(--grid-size) * 20); } +.pr25 { padding-right: calc(var(--grid-size) * 25); } +.pr30 { padding-right: calc(var(--grid-size) * 30); } +.pr40 { padding-right: calc(var(--grid-size) * 40); } +.pr50 { padding-right: calc(var(--grid-size) * 50); } + +.pb0 { padding-bottom: 0; } +.pb1 { padding-bottom: calc(var(--grid-size) * 1); } +.pb2 { padding-bottom: calc(var(--grid-size) * 2); } +.pb3 { padding-bottom: calc(var(--grid-size) * 3); } +.pb4 { padding-bottom: calc(var(--grid-size) * 4); } +.pb5 { padding-bottom: calc(var(--grid-size) * 5); } +.pb6 { padding-bottom: calc(var(--grid-size) * 6); } +.pb7 { padding-bottom: calc(var(--grid-size) * 7); } +.pb8 { padding-bottom: calc(var(--grid-size) * 8); } +.pb9 { padding-bottom: calc(var(--grid-size) * 9); } +.pb10 { padding-bottom: calc(var(--grid-size) * 10); } +.pb11 { padding-bottom: calc(var(--grid-size) * 11); } +.pb12 { padding-bottom: calc(var(--grid-size) * 12); } +.pb13 { padding-bottom: calc(var(--grid-size) * 13); } +.pb14 { padding-bottom: calc(var(--grid-size) * 14); } +.pb15 { padding-bottom: calc(var(--grid-size) * 15); } +.pb16 { padding-bottom: calc(var(--grid-size) * 16); } +.pb17 { padding-bottom: calc(var(--grid-size) * 17); } +.pb18 { padding-bottom: calc(var(--grid-size) * 18); } +.pb19 { padding-bottom: calc(var(--grid-size) * 19); } +.pb20 { padding-bottom: calc(var(--grid-size) * 20); } +.pb25 { padding-bottom: calc(var(--grid-size) * 25); } +.pb30 { padding-bottom: calc(var(--grid-size) * 30); } +.pb40 { padding-bottom: calc(var(--grid-size) * 40); } +.pb50 { padding-bottom: calc(var(--grid-size) * 50); } + +.pl0 { padding-left: 0; } +.pl1 { padding-left: calc(var(--grid-size) * 1); } +.pl2 { padding-left: calc(var(--grid-size) * 2); } +.pl3 { padding-left: calc(var(--grid-size) * 3); } +.pl4 { padding-left: calc(var(--grid-size) * 4); } +.pl5 { padding-left: calc(var(--grid-size) * 5); } +.pl6 { padding-left: calc(var(--grid-size) * 6); } +.pl7 { padding-left: calc(var(--grid-size) * 7); } +.pl8 { padding-left: calc(var(--grid-size) * 8); } +.pl9 { padding-left: calc(var(--grid-size) * 9); } +.pl10 { padding-left: calc(var(--grid-size) * 10); } +.pl11 { padding-left: calc(var(--grid-size) * 11); } +.pl12 { padding-left: calc(var(--grid-size) * 12); } +.pl13 { padding-left: calc(var(--grid-size) * 13); } +.pl14 { padding-left: calc(var(--grid-size) * 14); } +.pl15 { padding-left: calc(var(--grid-size) * 15); } +.pl16 { padding-left: calc(var(--grid-size) * 16); } +.pl17 { padding-left: calc(var(--grid-size) * 17); } +.pl18 { padding-left: calc(var(--grid-size) * 18); } +.pl19 { padding-left: calc(var(--grid-size) * 19); } +.pl20 { padding-left: calc(var(--grid-size) * 20); } +.pl25 { padding-left: calc(var(--grid-size) * 25); } +.pl30 { padding-left: calc(var(--grid-size) * 30); } +.pl40 { padding-left: calc(var(--grid-size) * 40); } +.pl50 { padding-left: calc(var(--grid-size) * 50); } + +.pt0 { padding-top: 0; } +.pt1 { padding-top: calc(var(--grid-size) * 1); } +.pt2 { padding-top: calc(var(--grid-size) * 2); } +.pt3 { padding-top: calc(var(--grid-size) * 3); } +.pt4 { padding-top: calc(var(--grid-size) * 4); } +.pt5 { padding-top: calc(var(--grid-size) * 5); } +.pt6 { padding-top: calc(var(--grid-size) * 6); } +.pt7 { padding-top: calc(var(--grid-size) * 7); } +.pt8 { padding-top: calc(var(--grid-size) * 8); } +.pt9 { padding-top: calc(var(--grid-size) * 9); } +.pt10 { padding-top: calc(var(--grid-size) * 10); } +.pt11 { padding-top: calc(var(--grid-size) * 11); } +.pt12 { padding-top: calc(var(--grid-size) * 12); } +.pt13 { padding-top: calc(var(--grid-size) * 13); } +.pt14 { padding-top: calc(var(--grid-size) * 14); } +.pt15 { padding-top: calc(var(--grid-size) * 15); } +.pt16 { padding-top: calc(var(--grid-size) * 16); } +.pt17 { padding-top: calc(var(--grid-size) * 17); } +.pt18 { padding-top: calc(var(--grid-size) * 18); } +.pt19 { padding-top: calc(var(--grid-size) * 19); } +.pt20 { padding-top: calc(var(--grid-size) * 20); } +.pt25 { padding-top: calc(var(--grid-size) * 25); } +.pt30 { padding-top: calc(var(--grid-size) * 30); } +.pt40 { padding-top: calc(var(--grid-size) * 40); } +.pt50 { padding-top: calc(var(--grid-size) * 50); } + +.ma0 { margin: 0; } +.ma1 { margin: calc(var(--grid-size) * 1); } +.ma2 { margin: calc(var(--grid-size) * 2); } +.ma3 { margin: calc(var(--grid-size) * 3); } +.ma4 { margin: calc(var(--grid-size) * 4); } +.ma5 { margin: calc(var(--grid-size) * 5); } +.ma6 { margin: calc(var(--grid-size) * 6); } +.ma7 { margin: calc(var(--grid-size) * 7); } +.ma8 { margin: calc(var(--grid-size) * 8); } +.ma9 { margin: calc(var(--grid-size) * 9); } +.ma10 { margin: calc(var(--grid-size) * 10); } +.ma11 { margin: calc(var(--grid-size) * 11); } +.ma12 { margin: calc(var(--grid-size) * 12); } +.ma13 { margin: calc(var(--grid-size) * 13); } +.ma14 { margin: calc(var(--grid-size) * 14); } +.ma15 { margin: calc(var(--grid-size) * 15); } +.ma16 { margin: calc(var(--grid-size) * 16); } +.ma17 { margin: calc(var(--grid-size) * 17); } +.ma18 { margin: calc(var(--grid-size) * 18); } +.ma19 { margin: calc(var(--grid-size) * 19); } +.ma20 { margin: calc(var(--grid-size) * 20); } +.ma25 { margin: calc(var(--grid-size) * 25); } +.ma30 { margin: calc(var(--grid-size) * 30); } +.ma40 { margin: calc(var(--grid-size) * 40); } +.ma50 { margin: calc(var(--grid-size) * 50); } + +.mr0 { margin-right: 0; } +.mr1 { margin-right: calc(var(--grid-size) * 1); } +.mr2 { margin-right: calc(var(--grid-size) * 2); } +.mr3 { margin-right: calc(var(--grid-size) * 3); } +.mr4 { margin-right: calc(var(--grid-size) * 4); } +.mr5 { margin-right: calc(var(--grid-size) * 5); } +.mr6 { margin-right: calc(var(--grid-size) * 6); } +.mr7 { margin-right: calc(var(--grid-size) * 7); } +.mr8 { margin-right: calc(var(--grid-size) * 8); } +.mr9 { margin-right: calc(var(--grid-size) * 9); } +.mr10 { margin-right: calc(var(--grid-size) * 10); } +.mr11 { margin-right: calc(var(--grid-size) * 11); } +.mr12 { margin-right: calc(var(--grid-size) * 12); } +.mr13 { margin-right: calc(var(--grid-size) * 13); } +.mr14 { margin-right: calc(var(--grid-size) * 14); } +.mr15 { margin-right: calc(var(--grid-size) * 15); } +.mr16 { margin-right: calc(var(--grid-size) * 16); } +.mr17 { margin-right: calc(var(--grid-size) * 17); } +.mr18 { margin-right: calc(var(--grid-size) * 18); } +.mr19 { margin-right: calc(var(--grid-size) * 19); } +.mr20 { margin-right: calc(var(--grid-size) * 20); } +.mr25 { margin-right: calc(var(--grid-size) * 25); } +.mr30 { margin-right: calc(var(--grid-size) * 30); } +.mr40 { margin-right: calc(var(--grid-size) * 40); } +.mr50 { margin-right: calc(var(--grid-size) * 50); } + +.mb0 { margin-bottom: 0; } +.mb1 { margin-bottom: calc(var(--grid-size) * 1); } +.mb2 { margin-bottom: calc(var(--grid-size) * 2); } +.mb3 { margin-bottom: calc(var(--grid-size) * 3); } +.mb4 { margin-bottom: calc(var(--grid-size) * 4); } +.mb5 { margin-bottom: calc(var(--grid-size) * 5); } +.mb6 { margin-bottom: calc(var(--grid-size) * 6); } +.mb7 { margin-bottom: calc(var(--grid-size) * 7); } +.mb8 { margin-bottom: calc(var(--grid-size) * 8); } +.mb9 { margin-bottom: calc(var(--grid-size) * 9); } +.mb10 { margin-bottom: calc(var(--grid-size) * 10); } +.mb11 { margin-bottom: calc(var(--grid-size) * 11); } +.mb12 { margin-bottom: calc(var(--grid-size) * 12); } +.mb13 { margin-bottom: calc(var(--grid-size) * 13); } +.mb14 { margin-bottom: calc(var(--grid-size) * 14); } +.mb15 { margin-bottom: calc(var(--grid-size) * 15); } +.mb16 { margin-bottom: calc(var(--grid-size) * 16); } +.mb17 { margin-bottom: calc(var(--grid-size) * 17); } +.mb18 { margin-bottom: calc(var(--grid-size) * 18); } +.mb19 { margin-bottom: calc(var(--grid-size) * 19); } +.mb20 { margin-bottom: calc(var(--grid-size) * 20); } +.mb25 { margin-bottom: calc(var(--grid-size) * 25); } +.mb30 { margin-bottom: calc(var(--grid-size) * 30); } +.mb40 { margin-bottom: calc(var(--grid-size) * 40); } +.mb50 { margin-bottom: calc(var(--grid-size) * 50); } + +.ml0 { margin-left: 0; } +.ml1 { margin-left: calc(var(--grid-size) * 1); } +.ml2 { margin-left: calc(var(--grid-size) * 2); } +.ml3 { margin-left: calc(var(--grid-size) * 3); } +.ml4 { margin-left: calc(var(--grid-size) * 4); } +.ml5 { margin-left: calc(var(--grid-size) * 5); } +.ml6 { margin-left: calc(var(--grid-size) * 6); } +.ml7 { margin-left: calc(var(--grid-size) * 7); } +.ml8 { margin-left: calc(var(--grid-size) * 8); } +.ml9 { margin-left: calc(var(--grid-size) * 9); } +.ml10 { margin-left: calc(var(--grid-size) * 10); } +.ml11 { margin-left: calc(var(--grid-size) * 11); } +.ml12 { margin-left: calc(var(--grid-size) * 12); } +.ml13 { margin-left: calc(var(--grid-size) * 13); } +.ml14 { margin-left: calc(var(--grid-size) * 14); } +.ml15 { margin-left: calc(var(--grid-size) * 15); } +.ml16 { margin-left: calc(var(--grid-size) * 16); } +.ml17 { margin-left: calc(var(--grid-size) * 17); } +.ml18 { margin-left: calc(var(--grid-size) * 18); } +.ml19 { margin-left: calc(var(--grid-size) * 19); } +.ml20 { margin-left: calc(var(--grid-size) * 20); } +.ml25 { margin-left: calc(var(--grid-size) * 25); } +.ml30 { margin-left: calc(var(--grid-size) * 30); } +.ml40 { margin-left: calc(var(--grid-size) * 40); } +.ml50 { margin-left: calc(var(--grid-size) * 50); } + +.mt0 { margin-top: 0; } +.mt1 { margin-top: calc(var(--grid-size) * 1); } +.mt2 { margin-top: calc(var(--grid-size) * 2); } +.mt3 { margin-top: calc(var(--grid-size) * 3); } +.mt4 { margin-top: calc(var(--grid-size) * 4); } +.mt5 { margin-top: calc(var(--grid-size) * 5); } +.mt6 { margin-top: calc(var(--grid-size) * 6); } +.mt7 { margin-top: calc(var(--grid-size) * 7); } +.mt8 { margin-top: calc(var(--grid-size) * 8); } +.mt9 { margin-top: calc(var(--grid-size) * 9); } +.mt10 { margin-top: calc(var(--grid-size) * 10); } +.mt11 { margin-top: calc(var(--grid-size) * 11); } +.mt12 { margin-top: calc(var(--grid-size) * 12); } +.mt13 { margin-top: calc(var(--grid-size) * 13); } +.mt14 { margin-top: calc(var(--grid-size) * 14); } +.mt15 { margin-top: calc(var(--grid-size) * 15); } +.mt16 { margin-top: calc(var(--grid-size) * 16); } +.mt17 { margin-top: calc(var(--grid-size) * 17); } +.mt18 { margin-top: calc(var(--grid-size) * 18); } +.mt19 { margin-top: calc(var(--grid-size) * 19); } +.mt20 { margin-top: calc(var(--grid-size) * 20); } +.mt25 { margin-top: calc(var(--grid-size) * 25); } +.mt30 { margin-top: calc(var(--grid-size) * 30); } +.mt40 { margin-top: calc(var(--grid-size) * 40); } +.mt50 { margin-top: calc(var(--grid-size) * 50); } + +@media (--breakpoint-not-small) { + .pa0-ns { padding: 0; } + .pa1-ns { padding: calc(var(--grid-size) * 1); } + .pa2-ns { padding: calc(var(--grid-size) * 2); } + .pa3-ns { padding: calc(var(--grid-size) * 3); } + .pa4-ns { padding: calc(var(--grid-size) * 4); } + .pa5-ns { padding: calc(var(--grid-size) * 5); } + .pa6-ns { padding: calc(var(--grid-size) * 6); } + .pa7-ns { padding: calc(var(--grid-size) * 7); } + .pa8-ns { padding: calc(var(--grid-size) * 8); } + .pa9-ns { padding: calc(var(--grid-size) * 9); } + .pa10-ns { padding: calc(var(--grid-size) * 10); } + .pa11-ns { padding: calc(var(--grid-size) * 11); } + .pa12-ns { padding: calc(var(--grid-size) * 12); } + .pa13-ns { padding: calc(var(--grid-size) * 13); } + .pa14-ns { padding: calc(var(--grid-size) * 14); } + .pa15-ns { padding: calc(var(--grid-size) * 15); } + .pa16-ns { padding: calc(var(--grid-size) * 16); } + .pa17-ns { padding: calc(var(--grid-size) * 17); } + .pa18-ns { padding: calc(var(--grid-size) * 18); } + .pa19-ns { padding: calc(var(--grid-size) * 19); } + .pa20-ns { padding: calc(var(--grid-size) * 20); } + .pa25-ns { padding: calc(var(--grid-size) * 25); } + .pa30-ns { padding: calc(var(--grid-size) * 30); } + .pa40-ns { padding: calc(var(--grid-size) * 40); } + .pa50-ns { padding: calc(var(--grid-size) * 50); } + + .pr0-ns { padding-right: 0; } + .pr1-ns { padding-right: calc(var(--grid-size) * 1); } + .pr2-ns { padding-right: calc(var(--grid-size) * 2); } + .pr3-ns { padding-right: calc(var(--grid-size) * 3); } + .pr4-ns { padding-right: calc(var(--grid-size) * 4); } + .pr5-ns { padding-right: calc(var(--grid-size) * 5); } + .pr6-ns { padding-right: calc(var(--grid-size) * 6); } + .pr7-ns { padding-right: calc(var(--grid-size) * 7); } + .pr8-ns { padding-right: calc(var(--grid-size) * 8); } + .pr9-ns { padding-right: calc(var(--grid-size) * 9); } + .pr10-ns { padding-right: calc(var(--grid-size) * 10); } + .pr11-ns { padding-right: calc(var(--grid-size) * 11); } + .pr12-ns { padding-right: calc(var(--grid-size) * 12); } + .pr13-ns { padding-right: calc(var(--grid-size) * 13); } + .pr14-ns { padding-right: calc(var(--grid-size) * 14); } + .pr15-ns { padding-right: calc(var(--grid-size) * 15); } + .pr16-ns { padding-right: calc(var(--grid-size) * 16); } + .pr17-ns { padding-right: calc(var(--grid-size) * 17); } + .pr18-ns { padding-right: calc(var(--grid-size) * 18); } + .pr19-ns { padding-right: calc(var(--grid-size) * 19); } + .pr20-ns { padding-right: calc(var(--grid-size) * 20); } + .pr25-ns { padding-right: calc(var(--grid-size) * 25); } + .pr30-ns { padding-right: calc(var(--grid-size) * 30); } + .pr40-ns { padding-right: calc(var(--grid-size) * 40); } + .pr50-ns { padding-right: calc(var(--grid-size) * 50); } + + .pb0-ns { padding-bottom: 0; } + .pb1-ns { padding-bottom: calc(var(--grid-size) * 1); } + .pb2-ns { padding-bottom: calc(var(--grid-size) * 2); } + .pb3-ns { padding-bottom: calc(var(--grid-size) * 3); } + .pb4-ns { padding-bottom: calc(var(--grid-size) * 4); } + .pb5-ns { padding-bottom: calc(var(--grid-size) * 5); } + .pb6-ns { padding-bottom: calc(var(--grid-size) * 6); } + .pb7-ns { padding-bottom: calc(var(--grid-size) * 7); } + .pb8-ns { padding-bottom: calc(var(--grid-size) * 8); } + .pb9-ns { padding-bottom: calc(var(--grid-size) * 9); } + .pb10-ns { padding-bottom: calc(var(--grid-size) * 10); } + .pb11-ns { padding-bottom: calc(var(--grid-size) * 11); } + .pb12-ns { padding-bottom: calc(var(--grid-size) * 12); } + .pb13-ns { padding-bottom: calc(var(--grid-size) * 13); } + .pb14-ns { padding-bottom: calc(var(--grid-size) * 14); } + .pb15-ns { padding-bottom: calc(var(--grid-size) * 15); } + .pb16-ns { padding-bottom: calc(var(--grid-size) * 16); } + .pb17-ns { padding-bottom: calc(var(--grid-size) * 17); } + .pb18-ns { padding-bottom: calc(var(--grid-size) * 18); } + .pb19-ns { padding-bottom: calc(var(--grid-size) * 19); } + .pb20-ns { padding-bottom: calc(var(--grid-size) * 20); } + .pb25-ns { padding-bottom: calc(var(--grid-size) * 25); } + .pb30-ns { padding-bottom: calc(var(--grid-size) * 30); } + .pb40-ns { padding-bottom: calc(var(--grid-size) * 40); } + .pb50-ns { padding-bottom: calc(var(--grid-size) * 50); } + + .pl0-ns { padding-left: 0; } + .pl1-ns { padding-left: calc(var(--grid-size) * 1); } + .pl2-ns { padding-left: calc(var(--grid-size) * 2); } + .pl3-ns { padding-left: calc(var(--grid-size) * 3); } + .pl4-ns { padding-left: calc(var(--grid-size) * 4); } + .pl5-ns { padding-left: calc(var(--grid-size) * 5); } + .pl6-ns { padding-left: calc(var(--grid-size) * 6); } + .pl7-ns { padding-left: calc(var(--grid-size) * 7); } + .pl8-ns { padding-left: calc(var(--grid-size) * 8); } + .pl9-ns { padding-left: calc(var(--grid-size) * 9); } + .pl10-ns { padding-left: calc(var(--grid-size) * 10); } + .pl11-ns { padding-left: calc(var(--grid-size) * 11); } + .pl12-ns { padding-left: calc(var(--grid-size) * 12); } + .pl13-ns { padding-left: calc(var(--grid-size) * 13); } + .pl14-ns { padding-left: calc(var(--grid-size) * 14); } + .pl15-ns { padding-left: calc(var(--grid-size) * 15); } + .pl16-ns { padding-left: calc(var(--grid-size) * 16); } + .pl17-ns { padding-left: calc(var(--grid-size) * 17); } + .pl18-ns { padding-left: calc(var(--grid-size) * 18); } + .pl19-ns { padding-left: calc(var(--grid-size) * 19); } + .pl20-ns { padding-left: calc(var(--grid-size) * 20); } + .pl25-ns { padding-left: calc(var(--grid-size) * 25); } + .pl30-ns { padding-left: calc(var(--grid-size) * 30); } + .pl40-ns { padding-left: calc(var(--grid-size) * 40); } + .pl50-ns { padding-left: calc(var(--grid-size) * 50); } + + .pt0-ns { padding-top: 0; } + .pt1-ns { padding-top: calc(var(--grid-size) * 1); } + .pt2-ns { padding-top: calc(var(--grid-size) * 2); } + .pt3-ns { padding-top: calc(var(--grid-size) * 3); } + .pt4-ns { padding-top: calc(var(--grid-size) * 4); } + .pt5-ns { padding-top: calc(var(--grid-size) * 5); } + .pt6-ns { padding-top: calc(var(--grid-size) * 6); } + .pt7-ns { padding-top: calc(var(--grid-size) * 7); } + .pt8-ns { padding-top: calc(var(--grid-size) * 8); } + .pt9-ns { padding-top: calc(var(--grid-size) * 9); } + .pt10-ns { padding-top: calc(var(--grid-size) * 10); } + .pt11-ns { padding-top: calc(var(--grid-size) * 11); } + .pt12-ns { padding-top: calc(var(--grid-size) * 12); } + .pt13-ns { padding-top: calc(var(--grid-size) * 13); } + .pt14-ns { padding-top: calc(var(--grid-size) * 14); } + .pt15-ns { padding-top: calc(var(--grid-size) * 15); } + .pt16-ns { padding-top: calc(var(--grid-size) * 16); } + .pt17-ns { padding-top: calc(var(--grid-size) * 17); } + .pt18-ns { padding-top: calc(var(--grid-size) * 18); } + .pt19-ns { padding-top: calc(var(--grid-size) * 19); } + .pt20-ns { padding-top: calc(var(--grid-size) * 20); } + .pt25-ns { padding-top: calc(var(--grid-size) * 25); } + .pt30-ns { padding-top: calc(var(--grid-size) * 30); } + .pt40-ns { padding-top: calc(var(--grid-size) * 40); } + .pt50-ns { padding-top: calc(var(--grid-size) * 50); } + + .ma0-ns { margin: 0; } + .ma1-ns { margin: calc(var(--grid-size) * 1); } + .ma2-ns { margin: calc(var(--grid-size) * 2); } + .ma3-ns { margin: calc(var(--grid-size) * 3); } + .ma4-ns { margin: calc(var(--grid-size) * 4); } + .ma5-ns { margin: calc(var(--grid-size) * 5); } + .ma6-ns { margin: calc(var(--grid-size) * 6); } + .ma7-ns { margin: calc(var(--grid-size) * 7); } + .ma8-ns { margin: calc(var(--grid-size) * 8); } + .ma9-ns { margin: calc(var(--grid-size) * 9); } + .ma10-ns { margin: calc(var(--grid-size) * 10); } + .ma11-ns { margin: calc(var(--grid-size) * 11); } + .ma12-ns { margin: calc(var(--grid-size) * 12); } + .ma13-ns { margin: calc(var(--grid-size) * 13); } + .ma14-ns { margin: calc(var(--grid-size) * 14); } + .ma15-ns { margin: calc(var(--grid-size) * 15); } + .ma16-ns { margin: calc(var(--grid-size) * 16); } + .ma17-ns { margin: calc(var(--grid-size) * 17); } + .ma18-ns { margin: calc(var(--grid-size) * 18); } + .ma19-ns { margin: calc(var(--grid-size) * 19); } + .ma20-ns { margin: calc(var(--grid-size) * 20); } + .ma25-ns { margin: calc(var(--grid-size) * 25); } + .ma30-ns { margin: calc(var(--grid-size) * 30); } + .ma40-ns { margin: calc(var(--grid-size) * 40); } + .ma50-ns { margin: calc(var(--grid-size) * 50); } + + .mr0-ns { margin-right: 0; } + .mr1-ns { margin-right: calc(var(--grid-size) * 1); } + .mr2-ns { margin-right: calc(var(--grid-size) * 2); } + .mr3-ns { margin-right: calc(var(--grid-size) * 3); } + .mr4-ns { margin-right: calc(var(--grid-size) * 4); } + .mr5-ns { margin-right: calc(var(--grid-size) * 5); } + .mr6-ns { margin-right: calc(var(--grid-size) * 6); } + .mr7-ns { margin-right: calc(var(--grid-size) * 7); } + .mr8-ns { margin-right: calc(var(--grid-size) * 8); } + .mr9-ns { margin-right: calc(var(--grid-size) * 9); } + .mr10-ns { margin-right: calc(var(--grid-size) * 10); } + .mr11-ns { margin-right: calc(var(--grid-size) * 11); } + .mr12-ns { margin-right: calc(var(--grid-size) * 12); } + .mr13-ns { margin-right: calc(var(--grid-size) * 13); } + .mr14-ns { margin-right: calc(var(--grid-size) * 14); } + .mr15-ns { margin-right: calc(var(--grid-size) * 15); } + .mr16-ns { margin-right: calc(var(--grid-size) * 16); } + .mr17-ns { margin-right: calc(var(--grid-size) * 17); } + .mr18-ns { margin-right: calc(var(--grid-size) * 18); } + .mr19-ns { margin-right: calc(var(--grid-size) * 19); } + .mr20-ns { margin-right: calc(var(--grid-size) * 20); } + .mr25-ns { margin-right: calc(var(--grid-size) * 25); } + .mr30-ns { margin-right: calc(var(--grid-size) * 30); } + .mr40-ns { margin-right: calc(var(--grid-size) * 40); } + .mr50-ns { margin-right: calc(var(--grid-size) * 50); } + + .mb0-ns { margin-bottom: 0; } + .mb1-ns { margin-bottom: calc(var(--grid-size) * 1); } + .mb2-ns { margin-bottom: calc(var(--grid-size) * 2); } + .mb3-ns { margin-bottom: calc(var(--grid-size) * 3); } + .mb4-ns { margin-bottom: calc(var(--grid-size) * 4); } + .mb5-ns { margin-bottom: calc(var(--grid-size) * 5); } + .mb6-ns { margin-bottom: calc(var(--grid-size) * 6); } + .mb7-ns { margin-bottom: calc(var(--grid-size) * 7); } + .mb8-ns { margin-bottom: calc(var(--grid-size) * 8); } + .mb9-ns { margin-bottom: calc(var(--grid-size) * 9); } + .mb10-ns { margin-bottom: calc(var(--grid-size) * 10); } + .mb11-ns { margin-bottom: calc(var(--grid-size) * 11); } + .mb12-ns { margin-bottom: calc(var(--grid-size) * 12); } + .mb13-ns { margin-bottom: calc(var(--grid-size) * 13); } + .mb14-ns { margin-bottom: calc(var(--grid-size) * 14); } + .mb15-ns { margin-bottom: calc(var(--grid-size) * 15); } + .mb16-ns { margin-bottom: calc(var(--grid-size) * 16); } + .mb17-ns { margin-bottom: calc(var(--grid-size) * 17); } + .mb18-ns { margin-bottom: calc(var(--grid-size) * 18); } + .mb19-ns { margin-bottom: calc(var(--grid-size) * 19); } + .mb20-ns { margin-bottom: calc(var(--grid-size) * 20); } + .mb25-ns { margin-bottom: calc(var(--grid-size) * 25); } + .mb30-ns { margin-bottom: calc(var(--grid-size) * 30); } + .mb40-ns { margin-bottom: calc(var(--grid-size) * 40); } + .mb50-ns { margin-bottom: calc(var(--grid-size) * 50); } + + .ml0-ns { margin-left: 0; } + .ml1-ns { margin-left: calc(var(--grid-size) * 1); } + .ml2-ns { margin-left: calc(var(--grid-size) * 2); } + .ml3-ns { margin-left: calc(var(--grid-size) * 3); } + .ml4-ns { margin-left: calc(var(--grid-size) * 4); } + .ml5-ns { margin-left: calc(var(--grid-size) * 5); } + .ml6-ns { margin-left: calc(var(--grid-size) * 6); } + .ml7-ns { margin-left: calc(var(--grid-size) * 7); } + .ml8-ns { margin-left: calc(var(--grid-size) * 8); } + .ml9-ns { margin-left: calc(var(--grid-size) * 9); } + .ml10-ns { margin-left: calc(var(--grid-size) * 10); } + .ml11-ns { margin-left: calc(var(--grid-size) * 11); } + .ml12-ns { margin-left: calc(var(--grid-size) * 12); } + .ml13-ns { margin-left: calc(var(--grid-size) * 13); } + .ml14-ns { margin-left: calc(var(--grid-size) * 14); } + .ml15-ns { margin-left: calc(var(--grid-size) * 15); } + .ml16-ns { margin-left: calc(var(--grid-size) * 16); } + .ml17-ns { margin-left: calc(var(--grid-size) * 17); } + .ml18-ns { margin-left: calc(var(--grid-size) * 18); } + .ml19-ns { margin-left: calc(var(--grid-size) * 19); } + .ml20-ns { margin-left: calc(var(--grid-size) * 20); } + .ml25-ns { margin-left: calc(var(--grid-size) * 25); } + .ml30-ns { margin-left: calc(var(--grid-size) * 30); } + .ml40-ns { margin-left: calc(var(--grid-size) * 40); } + .ml50-ns { margin-left: calc(var(--grid-size) * 50); } + + .mt0-ns { margin-top: 0; } + .mt1-ns { margin-top: calc(var(--grid-size) * 1); } + .mt2-ns { margin-top: calc(var(--grid-size) * 2); } + .mt3-ns { margin-top: calc(var(--grid-size) * 3); } + .mt4-ns { margin-top: calc(var(--grid-size) * 4); } + .mt5-ns { margin-top: calc(var(--grid-size) * 5); } + .mt6-ns { margin-top: calc(var(--grid-size) * 6); } + .mt7-ns { margin-top: calc(var(--grid-size) * 7); } + .mt8-ns { margin-top: calc(var(--grid-size) * 8); } + .mt9-ns { margin-top: calc(var(--grid-size) * 9); } + .mt10-ns { margin-top: calc(var(--grid-size) * 10); } + .mt11-ns { margin-top: calc(var(--grid-size) * 11); } + .mt12-ns { margin-top: calc(var(--grid-size) * 12); } + .mt13-ns { margin-top: calc(var(--grid-size) * 13); } + .mt14-ns { margin-top: calc(var(--grid-size) * 14); } + .mt15-ns { margin-top: calc(var(--grid-size) * 15); } + .mt16-ns { margin-top: calc(var(--grid-size) * 16); } + .mt17-ns { margin-top: calc(var(--grid-size) * 17); } + .mt18-ns { margin-top: calc(var(--grid-size) * 18); } + .mt19-ns { margin-top: calc(var(--grid-size) * 19); } + .mt20-ns { margin-top: calc(var(--grid-size) * 20); } + .mt25-ns { margin-top: calc(var(--grid-size) * 25); } + .mt30-ns { margin-top: calc(var(--grid-size) * 30); } + .mt40-ns { margin-top: calc(var(--grid-size) * 40); } + .mt50-ns { margin-top: calc(var(--grid-size) * 50); } +} + +@media (--breakpoint-medium) { + .pa0-m { padding: 0; } + .pa1-m { padding: calc(var(--grid-size) * 1); } + .pa2-m { padding: calc(var(--grid-size) * 2); } + .pa3-m { padding: calc(var(--grid-size) * 3); } + .pa4-m { padding: calc(var(--grid-size) * 4); } + .pa5-m { padding: calc(var(--grid-size) * 5); } + .pa6-m { padding: calc(var(--grid-size) * 6); } + .pa7-m { padding: calc(var(--grid-size) * 7); } + .pa8-m { padding: calc(var(--grid-size) * 8); } + .pa9-m { padding: calc(var(--grid-size) * 9); } + .pa10-m { padding: calc(var(--grid-size) * 10); } + .pa11-m { padding: calc(var(--grid-size) * 11); } + .pa12-m { padding: calc(var(--grid-size) * 12); } + .pa13-m { padding: calc(var(--grid-size) * 13); } + .pa14-m { padding: calc(var(--grid-size) * 14); } + .pa15-m { padding: calc(var(--grid-size) * 15); } + .pa16-m { padding: calc(var(--grid-size) * 16); } + .pa17-m { padding: calc(var(--grid-size) * 17); } + .pa18-m { padding: calc(var(--grid-size) * 18); } + .pa19-m { padding: calc(var(--grid-size) * 19); } + .pa20-m { padding: calc(var(--grid-size) * 20); } + .pa25-m { padding: calc(var(--grid-size) * 25); } + .pa30-m { padding: calc(var(--grid-size) * 30); } + .pa40-m { padding: calc(var(--grid-size) * 40); } + .pa50-m { padding: calc(var(--grid-size) * 50); } + + .pr0-m { padding-right: 0; } + .pr1-m { padding-right: calc(var(--grid-size) * 1); } + .pr2-m { padding-right: calc(var(--grid-size) * 2); } + .pr3-m { padding-right: calc(var(--grid-size) * 3); } + .pr4-m { padding-right: calc(var(--grid-size) * 4); } + .pr5-m { padding-right: calc(var(--grid-size) * 5); } + .pr6-m { padding-right: calc(var(--grid-size) * 6); } + .pr7-m { padding-right: calc(var(--grid-size) * 7); } + .pr8-m { padding-right: calc(var(--grid-size) * 8); } + .pr9-m { padding-right: calc(var(--grid-size) * 9); } + .pr10-m { padding-right: calc(var(--grid-size) * 10); } + .pr11-m { padding-right: calc(var(--grid-size) * 11); } + .pr12-m { padding-right: calc(var(--grid-size) * 12); } + .pr13-m { padding-right: calc(var(--grid-size) * 13); } + .pr14-m { padding-right: calc(var(--grid-size) * 14); } + .pr15-m { padding-right: calc(var(--grid-size) * 15); } + .pr16-m { padding-right: calc(var(--grid-size) * 16); } + .pr17-m { padding-right: calc(var(--grid-size) * 17); } + .pr18-m { padding-right: calc(var(--grid-size) * 18); } + .pr19-m { padding-right: calc(var(--grid-size) * 19); } + .pr20-m { padding-right: calc(var(--grid-size) * 20); } + .pr25-m { padding-right: calc(var(--grid-size) * 25); } + .pr30-m { padding-right: calc(var(--grid-size) * 30); } + .pr40-m { padding-right: calc(var(--grid-size) * 40); } + .pr50-m { padding-right: calc(var(--grid-size) * 50); } + + .pb0-m { padding-bottom: 0; } + .pb1-m { padding-bottom: calc(var(--grid-size) * 1); } + .pb2-m { padding-bottom: calc(var(--grid-size) * 2); } + .pb3-m { padding-bottom: calc(var(--grid-size) * 3); } + .pb4-m { padding-bottom: calc(var(--grid-size) * 4); } + .pb5-m { padding-bottom: calc(var(--grid-size) * 5); } + .pb6-m { padding-bottom: calc(var(--grid-size) * 6); } + .pb7-m { padding-bottom: calc(var(--grid-size) * 7); } + .pb8-m { padding-bottom: calc(var(--grid-size) * 8); } + .pb9-m { padding-bottom: calc(var(--grid-size) * 9); } + .pb10-m { padding-bottom: calc(var(--grid-size) * 10); } + .pb11-m { padding-bottom: calc(var(--grid-size) * 11); } + .pb12-m { padding-bottom: calc(var(--grid-size) * 12); } + .pb13-m { padding-bottom: calc(var(--grid-size) * 13); } + .pb14-m { padding-bottom: calc(var(--grid-size) * 14); } + .pb15-m { padding-bottom: calc(var(--grid-size) * 15); } + .pb16-m { padding-bottom: calc(var(--grid-size) * 16); } + .pb17-m { padding-bottom: calc(var(--grid-size) * 17); } + .pb18-m { padding-bottom: calc(var(--grid-size) * 18); } + .pb19-m { padding-bottom: calc(var(--grid-size) * 19); } + .pb20-m { padding-bottom: calc(var(--grid-size) * 20); } + .pb25-m { padding-bottom: calc(var(--grid-size) * 25); } + .pb30-m { padding-bottom: calc(var(--grid-size) * 30); } + .pb40-m { padding-bottom: calc(var(--grid-size) * 40); } + .pb50-m { padding-bottom: calc(var(--grid-size) * 50); } + + .pl0-m { padding-left: 0; } + .pl1-m { padding-left: calc(var(--grid-size) * 1); } + .pl2-m { padding-left: calc(var(--grid-size) * 2); } + .pl3-m { padding-left: calc(var(--grid-size) * 3); } + .pl4-m { padding-left: calc(var(--grid-size) * 4); } + .pl5-m { padding-left: calc(var(--grid-size) * 5); } + .pl6-m { padding-left: calc(var(--grid-size) * 6); } + .pl7-m { padding-left: calc(var(--grid-size) * 7); } + .pl8-m { padding-left: calc(var(--grid-size) * 8); } + .pl9-m { padding-left: calc(var(--grid-size) * 9); } + .pl10-m { padding-left: calc(var(--grid-size) * 10); } + .pl11-m { padding-left: calc(var(--grid-size) * 11); } + .pl12-m { padding-left: calc(var(--grid-size) * 12); } + .pl13-m { padding-left: calc(var(--grid-size) * 13); } + .pl14-m { padding-left: calc(var(--grid-size) * 14); } + .pl15-m { padding-left: calc(var(--grid-size) * 15); } + .pl16-m { padding-left: calc(var(--grid-size) * 16); } + .pl17-m { padding-left: calc(var(--grid-size) * 17); } + .pl18-m { padding-left: calc(var(--grid-size) * 18); } + .pl19-m { padding-left: calc(var(--grid-size) * 19); } + .pl20-m { padding-left: calc(var(--grid-size) * 20); } + .pl25-m { padding-left: calc(var(--grid-size) * 25); } + .pl30-m { padding-left: calc(var(--grid-size) * 30); } + .pl40-m { padding-left: calc(var(--grid-size) * 40); } + .pl50-m { padding-left: calc(var(--grid-size) * 50); } + + .pt0-m { padding-top: 0; } + .pt1-m { padding-top: calc(var(--grid-size) * 1); } + .pt2-m { padding-top: calc(var(--grid-size) * 2); } + .pt3-m { padding-top: calc(var(--grid-size) * 3); } + .pt4-m { padding-top: calc(var(--grid-size) * 4); } + .pt5-m { padding-top: calc(var(--grid-size) * 5); } + .pt6-m { padding-top: calc(var(--grid-size) * 6); } + .pt7-m { padding-top: calc(var(--grid-size) * 7); } + .pt8-m { padding-top: calc(var(--grid-size) * 8); } + .pt9-m { padding-top: calc(var(--grid-size) * 9); } + .pt10-m { padding-top: calc(var(--grid-size) * 10); } + .pt11-m { padding-top: calc(var(--grid-size) * 11); } + .pt12-m { padding-top: calc(var(--grid-size) * 12); } + .pt13-m { padding-top: calc(var(--grid-size) * 13); } + .pt14-m { padding-top: calc(var(--grid-size) * 14); } + .pt15-m { padding-top: calc(var(--grid-size) * 15); } + .pt16-m { padding-top: calc(var(--grid-size) * 16); } + .pt17-m { padding-top: calc(var(--grid-size) * 17); } + .pt18-m { padding-top: calc(var(--grid-size) * 18); } + .pt19-m { padding-top: calc(var(--grid-size) * 19); } + .pt20-m { padding-top: calc(var(--grid-size) * 20); } + .pt25-m { padding-top: calc(var(--grid-size) * 25); } + .pt30-m { padding-top: calc(var(--grid-size) * 30); } + .pt40-m { padding-top: calc(var(--grid-size) * 40); } + .pt50-m { padding-top: calc(var(--grid-size) * 50); } + + .ma0-m { margin: 0; } + .ma1-m { margin: calc(var(--grid-size) * 1); } + .ma2-m { margin: calc(var(--grid-size) * 2); } + .ma3-m { margin: calc(var(--grid-size) * 3); } + .ma4-m { margin: calc(var(--grid-size) * 4); } + .ma5-m { margin: calc(var(--grid-size) * 5); } + .ma6-m { margin: calc(var(--grid-size) * 6); } + .ma7-m { margin: calc(var(--grid-size) * 7); } + .ma8-m { margin: calc(var(--grid-size) * 8); } + .ma9-m { margin: calc(var(--grid-size) * 9); } + .ma10-m { margin: calc(var(--grid-size) * 10); } + .ma11-m { margin: calc(var(--grid-size) * 11); } + .ma12-m { margin: calc(var(--grid-size) * 12); } + .ma13-m { margin: calc(var(--grid-size) * 13); } + .ma14-m { margin: calc(var(--grid-size) * 14); } + .ma15-m { margin: calc(var(--grid-size) * 15); } + .ma16-m { margin: calc(var(--grid-size) * 16); } + .ma17-m { margin: calc(var(--grid-size) * 17); } + .ma18-m { margin: calc(var(--grid-size) * 18); } + .ma19-m { margin: calc(var(--grid-size) * 19); } + .ma20-m { margin: calc(var(--grid-size) * 20); } + .ma25-m { margin: calc(var(--grid-size) * 25); } + .ma30-m { margin: calc(var(--grid-size) * 30); } + .ma40-m { margin: calc(var(--grid-size) * 40); } + .ma50-m { margin: calc(var(--grid-size) * 50); } + + .mr0-m { margin-right: 0; } + .mr1-m { margin-right: calc(var(--grid-size) * 1); } + .mr2-m { margin-right: calc(var(--grid-size) * 2); } + .mr3-m { margin-right: calc(var(--grid-size) * 3); } + .mr4-m { margin-right: calc(var(--grid-size) * 4); } + .mr5-m { margin-right: calc(var(--grid-size) * 5); } + .mr6-m { margin-right: calc(var(--grid-size) * 6); } + .mr7-m { margin-right: calc(var(--grid-size) * 7); } + .mr8-m { margin-right: calc(var(--grid-size) * 8); } + .mr9-m { margin-right: calc(var(--grid-size) * 9); } + .mr10-m { margin-right: calc(var(--grid-size) * 10); } + .mr11-m { margin-right: calc(var(--grid-size) * 11); } + .mr12-m { margin-right: calc(var(--grid-size) * 12); } + .mr13-m { margin-right: calc(var(--grid-size) * 13); } + .mr14-m { margin-right: calc(var(--grid-size) * 14); } + .mr15-m { margin-right: calc(var(--grid-size) * 15); } + .mr16-m { margin-right: calc(var(--grid-size) * 16); } + .mr17-m { margin-right: calc(var(--grid-size) * 17); } + .mr18-m { margin-right: calc(var(--grid-size) * 18); } + .mr19-m { margin-right: calc(var(--grid-size) * 19); } + .mr20-m { margin-right: calc(var(--grid-size) * 20); } + .mr25-m { margin-right: calc(var(--grid-size) * 25); } + .mr30-m { margin-right: calc(var(--grid-size) * 30); } + .mr40-m { margin-right: calc(var(--grid-size) * 40); } + .mr50-m { margin-right: calc(var(--grid-size) * 50); } + + .mb0-m { margin-bottom: 0; } + .mb1-m { margin-bottom: calc(var(--grid-size) * 1); } + .mb2-m { margin-bottom: calc(var(--grid-size) * 2); } + .mb3-m { margin-bottom: calc(var(--grid-size) * 3); } + .mb4-m { margin-bottom: calc(var(--grid-size) * 4); } + .mb5-m { margin-bottom: calc(var(--grid-size) * 5); } + .mb6-m { margin-bottom: calc(var(--grid-size) * 6); } + .mb7-m { margin-bottom: calc(var(--grid-size) * 7); } + .mb8-m { margin-bottom: calc(var(--grid-size) * 8); } + .mb9-m { margin-bottom: calc(var(--grid-size) * 9); } + .mb10-m { margin-bottom: calc(var(--grid-size) * 10); } + .mb11-m { margin-bottom: calc(var(--grid-size) * 11); } + .mb12-m { margin-bottom: calc(var(--grid-size) * 12); } + .mb13-m { margin-bottom: calc(var(--grid-size) * 13); } + .mb14-m { margin-bottom: calc(var(--grid-size) * 14); } + .mb15-m { margin-bottom: calc(var(--grid-size) * 15); } + .mb16-m { margin-bottom: calc(var(--grid-size) * 16); } + .mb17-m { margin-bottom: calc(var(--grid-size) * 17); } + .mb18-m { margin-bottom: calc(var(--grid-size) * 18); } + .mb19-m { margin-bottom: calc(var(--grid-size) * 19); } + .mb20-m { margin-bottom: calc(var(--grid-size) * 20); } + .mb25-m { margin-bottom: calc(var(--grid-size) * 25); } + .mb30-m { margin-bottom: calc(var(--grid-size) * 30); } + .mb40-m { margin-bottom: calc(var(--grid-size) * 40); } + .mb50-m { margin-bottom: calc(var(--grid-size) * 50); } + + .ml0-m { margin-left: 0; } + .ml1-m { margin-left: calc(var(--grid-size) * 1); } + .ml2-m { margin-left: calc(var(--grid-size) * 2); } + .ml3-m { margin-left: calc(var(--grid-size) * 3); } + .ml4-m { margin-left: calc(var(--grid-size) * 4); } + .ml5-m { margin-left: calc(var(--grid-size) * 5); } + .ml6-m { margin-left: calc(var(--grid-size) * 6); } + .ml7-m { margin-left: calc(var(--grid-size) * 7); } + .ml8-m { margin-left: calc(var(--grid-size) * 8); } + .ml9-m { margin-left: calc(var(--grid-size) * 9); } + .ml10-m { margin-left: calc(var(--grid-size) * 10); } + .ml11-m { margin-left: calc(var(--grid-size) * 11); } + .ml12-m { margin-left: calc(var(--grid-size) * 12); } + .ml13-m { margin-left: calc(var(--grid-size) * 13); } + .ml14-m { margin-left: calc(var(--grid-size) * 14); } + .ml15-m { margin-left: calc(var(--grid-size) * 15); } + .ml16-m { margin-left: calc(var(--grid-size) * 16); } + .ml17-m { margin-left: calc(var(--grid-size) * 17); } + .ml18-m { margin-left: calc(var(--grid-size) * 18); } + .ml19-m { margin-left: calc(var(--grid-size) * 19); } + .ml20-m { margin-left: calc(var(--grid-size) * 20); } + .ml25-m { margin-left: calc(var(--grid-size) * 25); } + .ml30-m { margin-left: calc(var(--grid-size) * 30); } + .ml40-m { margin-left: calc(var(--grid-size) * 40); } + .ml50-m { margin-left: calc(var(--grid-size) * 50); } + + .mt0-m { margin-top: 0; } + .mt1-m { margin-top: calc(var(--grid-size) * 1); } + .mt2-m { margin-top: calc(var(--grid-size) * 2); } + .mt3-m { margin-top: calc(var(--grid-size) * 3); } + .mt4-m { margin-top: calc(var(--grid-size) * 4); } + .mt5-m { margin-top: calc(var(--grid-size) * 5); } + .mt6-m { margin-top: calc(var(--grid-size) * 6); } + .mt7-m { margin-top: calc(var(--grid-size) * 7); } + .mt8-m { margin-top: calc(var(--grid-size) * 8); } + .mt9-m { margin-top: calc(var(--grid-size) * 9); } + .mt10-m { margin-top: calc(var(--grid-size) * 10); } + .mt11-m { margin-top: calc(var(--grid-size) * 11); } + .mt12-m { margin-top: calc(var(--grid-size) * 12); } + .mt13-m { margin-top: calc(var(--grid-size) * 13); } + .mt14-m { margin-top: calc(var(--grid-size) * 14); } + .mt15-m { margin-top: calc(var(--grid-size) * 15); } + .mt16-m { margin-top: calc(var(--grid-size) * 16); } + .mt17-m { margin-top: calc(var(--grid-size) * 17); } + .mt18-m { margin-top: calc(var(--grid-size) * 18); } + .mt19-m { margin-top: calc(var(--grid-size) * 19); } + .mt20-m { margin-top: calc(var(--grid-size) * 20); } + .mt25-m { margin-top: calc(var(--grid-size) * 25); } + .mt30-m { margin-top: calc(var(--grid-size) * 30); } + .mt40-m { margin-top: calc(var(--grid-size) * 40); } + .mt50-m { margin-top: calc(var(--grid-size) * 50); } +} + +@media (--breakpoint-large) { + .pa0-l { padding: 0; } + .pa1-l { padding: calc(var(--grid-size) * 1); } + .pa2-l { padding: calc(var(--grid-size) * 2); } + .pa3-l { padding: calc(var(--grid-size) * 3); } + .pa4-l { padding: calc(var(--grid-size) * 4); } + .pa5-l { padding: calc(var(--grid-size) * 5); } + .pa6-l { padding: calc(var(--grid-size) * 6); } + .pa7-l { padding: calc(var(--grid-size) * 7); } + .pa8-l { padding: calc(var(--grid-size) * 8); } + .pa9-l { padding: calc(var(--grid-size) * 9); } + .pa10-l { padding: calc(var(--grid-size) * 10); } + .pa11-l { padding: calc(var(--grid-size) * 11); } + .pa12-l { padding: calc(var(--grid-size) * 12); } + .pa13-l { padding: calc(var(--grid-size) * 13); } + .pa14-l { padding: calc(var(--grid-size) * 14); } + .pa15-l { padding: calc(var(--grid-size) * 15); } + .pa16-l { padding: calc(var(--grid-size) * 16); } + .pa17-l { padding: calc(var(--grid-size) * 17); } + .pa18-l { padding: calc(var(--grid-size) * 18); } + .pa19-l { padding: calc(var(--grid-size) * 19); } + .pa20-l { padding: calc(var(--grid-size) * 20); } + .pa25-l { padding: calc(var(--grid-size) * 25); } + .pa30-l { padding: calc(var(--grid-size) * 30); } + .pa40-l { padding: calc(var(--grid-size) * 40); } + .pa50-l { padding: calc(var(--grid-size) * 50); } + + .pr0-l { padding-right: 0; } + .pr1-l { padding-right: calc(var(--grid-size) * 1); } + .pr2-l { padding-right: calc(var(--grid-size) * 2); } + .pr3-l { padding-right: calc(var(--grid-size) * 3); } + .pr4-l { padding-right: calc(var(--grid-size) * 4); } + .pr5-l { padding-right: calc(var(--grid-size) * 5); } + .pr6-l { padding-right: calc(var(--grid-size) * 6); } + .pr7-l { padding-right: calc(var(--grid-size) * 7); } + .pr8-l { padding-right: calc(var(--grid-size) * 8); } + .pr9-l { padding-right: calc(var(--grid-size) * 9); } + .pr10-l { padding-right: calc(var(--grid-size) * 10); } + .pr11-l { padding-right: calc(var(--grid-size) * 11); } + .pr12-l { padding-right: calc(var(--grid-size) * 12); } + .pr13-l { padding-right: calc(var(--grid-size) * 13); } + .pr14-l { padding-right: calc(var(--grid-size) * 14); } + .pr15-l { padding-right: calc(var(--grid-size) * 15); } + .pr16-l { padding-right: calc(var(--grid-size) * 16); } + .pr17-l { padding-right: calc(var(--grid-size) * 17); } + .pr18-l { padding-right: calc(var(--grid-size) * 18); } + .pr19-l { padding-right: calc(var(--grid-size) * 19); } + .pr20-l { padding-right: calc(var(--grid-size) * 20); } + .pr25-l { padding-right: calc(var(--grid-size) * 25); } + .pr30-l { padding-right: calc(var(--grid-size) * 30); } + .pr40-l { padding-right: calc(var(--grid-size) * 40); } + .pr50-l { padding-right: calc(var(--grid-size) * 50); } + + .pb0-l { padding-bottom: 0; } + .pb1-l { padding-bottom: calc(var(--grid-size) * 1); } + .pb2-l { padding-bottom: calc(var(--grid-size) * 2); } + .pb3-l { padding-bottom: calc(var(--grid-size) * 3); } + .pb4-l { padding-bottom: calc(var(--grid-size) * 4); } + .pb5-l { padding-bottom: calc(var(--grid-size) * 5); } + .pb6-l { padding-bottom: calc(var(--grid-size) * 6); } + .pb7-l { padding-bottom: calc(var(--grid-size) * 7); } + .pb8-l { padding-bottom: calc(var(--grid-size) * 8); } + .pb9-l { padding-bottom: calc(var(--grid-size) * 9); } + .pb10-l { padding-bottom: calc(var(--grid-size) * 10); } + .pb11-l { padding-bottom: calc(var(--grid-size) * 11); } + .pb12-l { padding-bottom: calc(var(--grid-size) * 12); } + .pb13-l { padding-bottom: calc(var(--grid-size) * 13); } + .pb14-l { padding-bottom: calc(var(--grid-size) * 14); } + .pb15-l { padding-bottom: calc(var(--grid-size) * 15); } + .pb16-l { padding-bottom: calc(var(--grid-size) * 16); } + .pb17-l { padding-bottom: calc(var(--grid-size) * 17); } + .pb18-l { padding-bottom: calc(var(--grid-size) * 18); } + .pb19-l { padding-bottom: calc(var(--grid-size) * 19); } + .pb20-l { padding-bottom: calc(var(--grid-size) * 20); } + .pb25-l { padding-bottom: calc(var(--grid-size) * 25); } + .pb30-l { padding-bottom: calc(var(--grid-size) * 30); } + .pb40-l { padding-bottom: calc(var(--grid-size) * 40); } + .pb50-l { padding-bottom: calc(var(--grid-size) * 50); } + + .pl0-l { padding-left: 0; } + .pl1-l { padding-left: calc(var(--grid-size) * 1); } + .pl2-l { padding-left: calc(var(--grid-size) * 2); } + .pl3-l { padding-left: calc(var(--grid-size) * 3); } + .pl4-l { padding-left: calc(var(--grid-size) * 4); } + .pl5-l { padding-left: calc(var(--grid-size) * 5); } + .pl6-l { padding-left: calc(var(--grid-size) * 6); } + .pl7-l { padding-left: calc(var(--grid-size) * 7); } + .pl8-l { padding-left: calc(var(--grid-size) * 8); } + .pl9-l { padding-left: calc(var(--grid-size) * 9); } + .pl10-l { padding-left: calc(var(--grid-size) * 10); } + .pl11-l { padding-left: calc(var(--grid-size) * 11); } + .pl12-l { padding-left: calc(var(--grid-size) * 12); } + .pl13-l { padding-left: calc(var(--grid-size) * 13); } + .pl14-l { padding-left: calc(var(--grid-size) * 14); } + .pl15-l { padding-left: calc(var(--grid-size) * 15); } + .pl16-l { padding-left: calc(var(--grid-size) * 16); } + .pl17-l { padding-left: calc(var(--grid-size) * 17); } + .pl18-l { padding-left: calc(var(--grid-size) * 18); } + .pl19-l { padding-left: calc(var(--grid-size) * 19); } + .pl20-l { padding-left: calc(var(--grid-size) * 20); } + .pl25-l { padding-left: calc(var(--grid-size) * 25); } + .pl30-l { padding-left: calc(var(--grid-size) * 30); } + .pl40-l { padding-left: calc(var(--grid-size) * 40); } + .pl50-l { padding-left: calc(var(--grid-size) * 50); } + + .pt0-l { padding-top: 0; } + .pt1-l { padding-top: calc(var(--grid-size) * 1); } + .pt2-l { padding-top: calc(var(--grid-size) * 2); } + .pt3-l { padding-top: calc(var(--grid-size) * 3); } + .pt4-l { padding-top: calc(var(--grid-size) * 4); } + .pt5-l { padding-top: calc(var(--grid-size) * 5); } + .pt6-l { padding-top: calc(var(--grid-size) * 6); } + .pt7-l { padding-top: calc(var(--grid-size) * 7); } + .pt8-l { padding-top: calc(var(--grid-size) * 8); } + .pt9-l { padding-top: calc(var(--grid-size) * 9); } + .pt10-l { padding-top: calc(var(--grid-size) * 10); } + .pt11-l { padding-top: calc(var(--grid-size) * 11); } + .pt12-l { padding-top: calc(var(--grid-size) * 12); } + .pt13-l { padding-top: calc(var(--grid-size) * 13); } + .pt14-l { padding-top: calc(var(--grid-size) * 14); } + .pt15-l { padding-top: calc(var(--grid-size) * 15); } + .pt16-l { padding-top: calc(var(--grid-size) * 16); } + .pt17-l { padding-top: calc(var(--grid-size) * 17); } + .pt18-l { padding-top: calc(var(--grid-size) * 18); } + .pt19-l { padding-top: calc(var(--grid-size) * 19); } + .pt20-l { padding-top: calc(var(--grid-size) * 20); } + .pt25-l { padding-top: calc(var(--grid-size) * 25); } + .pt30-l { padding-top: calc(var(--grid-size) * 30); } + .pt40-l { padding-top: calc(var(--grid-size) * 40); } + .pt50-l { padding-top: calc(var(--grid-size) * 50); } + + .ma0-l { margin: 0; } + .ma1-l { margin: calc(var(--grid-size) * 1); } + .ma2-l { margin: calc(var(--grid-size) * 2); } + .ma3-l { margin: calc(var(--grid-size) * 3); } + .ma4-l { margin: calc(var(--grid-size) * 4); } + .ma5-l { margin: calc(var(--grid-size) * 5); } + .ma6-l { margin: calc(var(--grid-size) * 6); } + .ma7-l { margin: calc(var(--grid-size) * 7); } + .ma8-l { margin: calc(var(--grid-size) * 8); } + .ma9-l { margin: calc(var(--grid-size) * 9); } + .ma10-l { margin: calc(var(--grid-size) * 10); } + .ma11-l { margin: calc(var(--grid-size) * 11); } + .ma12-l { margin: calc(var(--grid-size) * 12); } + .ma13-l { margin: calc(var(--grid-size) * 13); } + .ma14-l { margin: calc(var(--grid-size) * 14); } + .ma15-l { margin: calc(var(--grid-size) * 15); } + .ma16-l { margin: calc(var(--grid-size) * 16); } + .ma17-l { margin: calc(var(--grid-size) * 17); } + .ma18-l { margin: calc(var(--grid-size) * 18); } + .ma19-l { margin: calc(var(--grid-size) * 19); } + .ma20-l { margin: calc(var(--grid-size) * 20); } + .ma25-l { margin: calc(var(--grid-size) * 25); } + .ma30-l { margin: calc(var(--grid-size) * 30); } + .ma40-l { margin: calc(var(--grid-size) * 40); } + .ma50-l { margin: calc(var(--grid-size) * 50); } + + .mr0-l { margin-right: 0; } + .mr1-l { margin-right: calc(var(--grid-size) * 1); } + .mr2-l { margin-right: calc(var(--grid-size) * 2); } + .mr3-l { margin-right: calc(var(--grid-size) * 3); } + .mr4-l { margin-right: calc(var(--grid-size) * 4); } + .mr5-l { margin-right: calc(var(--grid-size) * 5); } + .mr6-l { margin-right: calc(var(--grid-size) * 6); } + .mr7-l { margin-right: calc(var(--grid-size) * 7); } + .mr8-l { margin-right: calc(var(--grid-size) * 8); } + .mr9-l { margin-right: calc(var(--grid-size) * 9); } + .mr10-l { margin-right: calc(var(--grid-size) * 10); } + .mr11-l { margin-right: calc(var(--grid-size) * 11); } + .mr12-l { margin-right: calc(var(--grid-size) * 12); } + .mr13-l { margin-right: calc(var(--grid-size) * 13); } + .mr14-l { margin-right: calc(var(--grid-size) * 14); } + .mr15-l { margin-right: calc(var(--grid-size) * 15); } + .mr16-l { margin-right: calc(var(--grid-size) * 16); } + .mr17-l { margin-right: calc(var(--grid-size) * 17); } + .mr18-l { margin-right: calc(var(--grid-size) * 18); } + .mr19-l { margin-right: calc(var(--grid-size) * 19); } + .mr20-l { margin-right: calc(var(--grid-size) * 20); } + .mr25-l { margin-right: calc(var(--grid-size) * 25); } + .mr30-l { margin-right: calc(var(--grid-size) * 30); } + .mr40-l { margin-right: calc(var(--grid-size) * 40); } + .mr50-l { margin-right: calc(var(--grid-size) * 50); } + + .mb0-l { margin-bottom: 0; } + .mb1-l { margin-bottom: calc(var(--grid-size) * 1); } + .mb2-l { margin-bottom: calc(var(--grid-size) * 2); } + .mb3-l { margin-bottom: calc(var(--grid-size) * 3); } + .mb4-l { margin-bottom: calc(var(--grid-size) * 4); } + .mb5-l { margin-bottom: calc(var(--grid-size) * 5); } + .mb6-l { margin-bottom: calc(var(--grid-size) * 6); } + .mb7-l { margin-bottom: calc(var(--grid-size) * 7); } + .mb8-l { margin-bottom: calc(var(--grid-size) * 8); } + .mb9-l { margin-bottom: calc(var(--grid-size) * 9); } + .mb10-l { margin-bottom: calc(var(--grid-size) * 10); } + .mb11-l { margin-bottom: calc(var(--grid-size) * 11); } + .mb12-l { margin-bottom: calc(var(--grid-size) * 12); } + .mb13-l { margin-bottom: calc(var(--grid-size) * 13); } + .mb14-l { margin-bottom: calc(var(--grid-size) * 14); } + .mb15-l { margin-bottom: calc(var(--grid-size) * 15); } + .mb16-l { margin-bottom: calc(var(--grid-size) * 16); } + .mb17-l { margin-bottom: calc(var(--grid-size) * 17); } + .mb18-l { margin-bottom: calc(var(--grid-size) * 18); } + .mb19-l { margin-bottom: calc(var(--grid-size) * 19); } + .mb20-l { margin-bottom: calc(var(--grid-size) * 20); } + .mb25-l { margin-bottom: calc(var(--grid-size) * 25); } + .mb30-l { margin-bottom: calc(var(--grid-size) * 30); } + .mb40-l { margin-bottom: calc(var(--grid-size) * 40); } + .mb50-l { margin-bottom: calc(var(--grid-size) * 50); } + + .ml0-l { margin-left: 0; } + .ml1-l { margin-left: calc(var(--grid-size) * 1); } + .ml2-l { margin-left: calc(var(--grid-size) * 2); } + .ml3-l { margin-left: calc(var(--grid-size) * 3); } + .ml4-l { margin-left: calc(var(--grid-size) * 4); } + .ml5-l { margin-left: calc(var(--grid-size) * 5); } + .ml6-l { margin-left: calc(var(--grid-size) * 6); } + .ml7-l { margin-left: calc(var(--grid-size) * 7); } + .ml8-l { margin-left: calc(var(--grid-size) * 8); } + .ml9-l { margin-left: calc(var(--grid-size) * 9); } + .ml10-l { margin-left: calc(var(--grid-size) * 10); } + .ml11-l { margin-left: calc(var(--grid-size) * 11); } + .ml12-l { margin-left: calc(var(--grid-size) * 12); } + .ml13-l { margin-left: calc(var(--grid-size) * 13); } + .ml14-l { margin-left: calc(var(--grid-size) * 14); } + .ml15-l { margin-left: calc(var(--grid-size) * 15); } + .ml16-l { margin-left: calc(var(--grid-size) * 16); } + .ml17-l { margin-left: calc(var(--grid-size) * 17); } + .ml18-l { margin-left: calc(var(--grid-size) * 18); } + .ml19-l { margin-left: calc(var(--grid-size) * 19); } + .ml20-l { margin-left: calc(var(--grid-size) * 20); } + .ml25-l { margin-left: calc(var(--grid-size) * 25); } + .ml30-l { margin-left: calc(var(--grid-size) * 30); } + .ml40-l { margin-left: calc(var(--grid-size) * 40); } + .ml50-l { margin-left: calc(var(--grid-size) * 50); } + + .mt0-l { margin-top: 0; } + .mt1-l { margin-top: calc(var(--grid-size) * 1); } + .mt2-l { margin-top: calc(var(--grid-size) * 2); } + .mt3-l { margin-top: calc(var(--grid-size) * 3); } + .mt4-l { margin-top: calc(var(--grid-size) * 4); } + .mt5-l { margin-top: calc(var(--grid-size) * 5); } + .mt6-l { margin-top: calc(var(--grid-size) * 6); } + .mt7-l { margin-top: calc(var(--grid-size) * 7); } + .mt8-l { margin-top: calc(var(--grid-size) * 8); } + .mt9-l { margin-top: calc(var(--grid-size) * 9); } + .mt10-l { margin-top: calc(var(--grid-size) * 10); } + .mt11-l { margin-top: calc(var(--grid-size) * 11); } + .mt12-l { margin-top: calc(var(--grid-size) * 12); } + .mt13-l { margin-top: calc(var(--grid-size) * 13); } + .mt14-l { margin-top: calc(var(--grid-size) * 14); } + .mt15-l { margin-top: calc(var(--grid-size) * 15); } + .mt16-l { margin-top: calc(var(--grid-size) * 16); } + .mt17-l { margin-top: calc(var(--grid-size) * 17); } + .mt18-l { margin-top: calc(var(--grid-size) * 18); } + .mt19-l { margin-top: calc(var(--grid-size) * 19); } + .mt20-l { margin-top: calc(var(--grid-size) * 20); } + .mt25-l { margin-top: calc(var(--grid-size) * 25); } + .mt30-l { margin-top: calc(var(--grid-size) * 30); } + .mt40-l { margin-top: calc(var(--grid-size) * 40); } + .mt50-l { margin-top: calc(var(--grid-size) * 50); } +} diff --git a/ghost/admin/app/styles/spirit/_tables.css b/ghost/admin/app/styles/spirit/_tables.css new file mode 100644 index 0000000000..846583be1e --- /dev/null +++ b/ghost/admin/app/styles/spirit/_tables.css @@ -0,0 +1,17 @@ +.collapse { + border-collapse: collapse; + border-spacing: 0; +} + +.striped:nth-child(odd) { + border-bottom: 1px solid var(--whitegrey); +} + +.striped:nth-child(even) { + background-color: var(--whitegrey-l2); + border-bottom: 1px solid var(--whitegrey); +} + +th, td { + vertical-align: top; +} diff --git a/ghost/admin/app/styles/spirit/_text-align.css b/ghost/admin/app/styles/spirit/_text-align.css new file mode 100644 index 0000000000..d31796960e --- /dev/null +++ b/ghost/admin/app/styles/spirit/_text-align.css @@ -0,0 +1,43 @@ +/* + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tl { text-align: left; } +.tr { text-align: right; } +.tc { text-align: center; } +.tj { text-align: justify; } + +@media (--breakpoint-not-small) { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } +} + +@media (--breakpoint-medium) { + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } +} + +@media (--breakpoint-large) { + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .tj-l { text-align: justify; } +} diff --git a/ghost/admin/app/styles/spirit/_text-block-spacings.css b/ghost/admin/app/styles/spirit/_text-block-spacings.css new file mode 100644 index 0000000000..119b9eab40 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_text-block-spacings.css @@ -0,0 +1,53 @@ +:root { + --baseline-grid: 1.6rem; +} + +.tmb { margin: 0 0 calc(var(--baseline-grid)); } +.tmb--0 { margin: 0; } +.tmb--0-25x { margin: 0 0 calc(var(--baseline-grid) * 0.25); } +.tmb--0-5x { margin: 0 0 calc(var(--baseline-grid) * 0.5); } +.tmb--0-75x { margin: 0 0 calc(var(--baseline-grid) * 0.75); } +.tmb--1-25x { margin: 0 0 calc(var(--baseline-grid) * 1.25); } +.tmb--1-5x { margin: 0 0 calc(var(--baseline-grid) * 1.5); } +.tmb--2-0x { margin: 0 0 calc(var(--baseline-grid) * 2.0); } +.tmb--2-5x { margin: 0 0 calc(var(--baseline-grid) * 2.5); } +.tmb--3-0x { margin: 0 0 calc(var(--baseline-grid) * 3.0); } + +@media (--breakpoint-not-small) { + .tmb-ns { margin: 0 0 calc(var(--baseline-grid)); } + .tmb--0-ns { margin: 0; } + .tmb--0-25x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.25); } + .tmb--0-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.5); } + .tmb--0-75x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.75); } + .tmb--1-25x-ns { margin: 0 0 calc(var(--baseline-grid) * 1.25); } + .tmb--1-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 1.5); } + .tmb--2-0x-ns { margin: 0 0 calc(var(--baseline-grid) * 2.0); } + .tmb--2-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 2.5); } + .tmb--3-0x-ns { margin: 0 0 calc(var(--baseline-grid) * 3.0); } +} + +@media (--breakpoint-medium) { + .tmb-m { margin: 0 0 calc(var(--baseline-grid)); } + .tmb--0-m { margin: 0; } + .tmb--0-25x-m { margin: 0 0 calc(var(--baseline-grid) * 0.25); } + .tmb--0-5x-m { margin: 0 0 calc(var(--baseline-grid) * 0.5); } + .tmb--0-75x-m { margin: 0 0 calc(var(--baseline-grid) * 0.75); } + .tmb--1-25x-m { margin: 0 0 calc(var(--baseline-grid) * 1.25); } + .tmb--1-5x-m { margin: 0 0 calc(var(--baseline-grid) * 1.5); } + .tmb--2-0x-m { margin: 0 0 calc(var(--baseline-grid) * 2.0); } + .tmb--2-5x-m { margin: 0 0 calc(var(--baseline-grid) * 2.5); } + .tmb--3-0x-m { margin: 0 0 calc(var(--baseline-grid) * 3.0); } +} + +@media (--breakpoint-large) { + .tmb-l { margin: 0 0 calc(var(--baseline-grid)); } + .tmb--0-l { margin: 0; } + .tmb--0-25x-l { margin: 0 0 calc(var(--baseline-grid) * 0.25); } + .tmb--0-5x-l { margin: 0 0 calc(var(--baseline-grid) * 0.5); } + .tmb--0-75x-l { margin: 0 0 calc(var(--baseline-grid) * 0.75); } + .tmb--1-25x-l { margin: 0 0 calc(var(--baseline-grid) * 1.25); } + .tmb--1-5x-l { margin: 0 0 calc(var(--baseline-grid) * 1.5); } + .tmb--2-0x-l { margin: 0 0 calc(var(--baseline-grid) * 2.0); } + .tmb--2-5x-l { margin: 0 0 calc(var(--baseline-grid) * 2.5); } + .tmb--3-0x-l { margin: 0 0 calc(var(--baseline-grid) * 3.0); } +} diff --git a/ghost/admin/app/styles/spirit/_text-decoration.css b/ghost/admin/app/styles/spirit/_text-decoration.css new file mode 100644 index 0000000000..d69032c51c --- /dev/null +++ b/ghost/admin/app/styles/spirit/_text-decoration.css @@ -0,0 +1,31 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.strike { text-decoration: line-through; } +.underline { text-decoration: underline; } +.no-underline { text-decoration: none; } + + +@media (--breakpoint-not-small) { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} + +@media (--breakpoint-medium) { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} + +@media (--breakpoint-large) { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } +} diff --git a/ghost/admin/app/styles/spirit/_text-transform.css b/ghost/admin/app/styles/spirit/_text-transform.css new file mode 100644 index 0000000000..a7c2b19700 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_text-transform.css @@ -0,0 +1,43 @@ +/* + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ttc { text-transform: capitalize; } +.ttl { text-transform: lowercase; } +.ttu { text-transform: uppercase; } +.ttn { text-transform: none; } + +@media (--breakpoint-not-small) { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } +} + +@media (--breakpoint-medium) { + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } +} + +@media (--breakpoint-large) { + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .ttn-l { text-transform: none; } +} diff --git a/ghost/admin/app/styles/spirit/_type-scale.css b/ghost/admin/app/styles/spirit/_type-scale.css new file mode 100644 index 0000000000..f0bbca7ed7 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_type-scale.css @@ -0,0 +1,95 @@ +/* + + Vertical rhythm = 1.067 + Tools that can help with experimenting with type scale: + http://type-scale.com/ + https://www.gridlover.net/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + :root { + --ts-base-fontsize: 62.5%; + + --ts-headline: 3.6rem; + --ts-subheadline: 2.8rem; + + --ts-1: 2.3rem; + --ts-2: 2.1rem; + --ts-3: 2.0rem; + --ts-4: 1.9rem; + --ts-5: 1.75rem; + --ts-6: 1.6rem; + --ts-7: 1.4rem; + --ts-8: 1.3rem; + --ts-small: 1.2rem; + --ts-supersmall: 1.1rem; + } + + +.fs-base { font-size: var(--ts-base-fontsize); } +.f-headline { font-size: var(--ts-headline); } +.f-subheadline { font-size: var(--ts-subheadline); } +.f1 { font-size: var(--ts-1); } +.f2 { font-size: var(--ts-2); } +.f3 { font-size: var(--ts-3); } +.f4 { font-size: var(--ts-4); } +.f5 { font-size: var(--ts-5); } +.f6 { font-size: var(--ts-6); } +.f7 { font-size: var(--ts-7); } +.f8, .f-default { font-size: var(--ts-8); } +.f-small { font-size: var(--ts-small); } +.f-supersmall { font-size: var(--ts-supersmall); } + + +@media (--breakpoint-not-small){ + .fs-base-ns { font-size: var(--ts-base-fontsize); } + .f-headline-ns { font-size: var(--ts-headline); } + .f-subheadline-ns { font-size: var(--ts-subheadline); } + .f1-ns { font-size: var(--ts-1); } + .f2-ns { font-size: var(--ts-2); } + .f3-ns { font-size: var(--ts-3); } + .f4-ns { font-size: var(--ts-4); } + .f5-ns { font-size: var(--ts-5); } + .f6-ns { font-size: var(--ts-6); } + .f7-ns { font-size: var(--ts-7); } + .f8-ns, .f-default-ns { font-size: var(--ts-8); } + .fsmall-ns { font-size: var(--ts-small); } + .f-supersmall-ns { font-size: var(--ts-supersmall); } +} + +@media (--breakpoint-medium) { + .fs-base-m { font-size: var(--ts-base-fontsize); } + .f-headline-m { font-size: var(--ts-headline); } + .f-subheadline-m { font-size: var(--ts-subheadline); } + .f1-m { font-size: var(--ts-1); } + .f2-m { font-size: var(--ts-2); } + .f3-m { font-size: var(--ts-3); } + .f4-m { font-size: var(--ts-4); } + .f5-m { font-size: var(--ts-5); } + .f6-m { font-size: var(--ts-6); } + .f7-m { font-size: var(--ts-7); } + .f8-m, .f-default-m { font-size: var(--ts-8); } + .fsmall-m { font-size: var(--ts-small); } + .f-supersmall-m { font-size: var(--ts-supersmall); } +} + +@media (--breakpoint-large) { + .fs-base-l { font-size: var(--ts-base-fontsize); } + .f-headline-l { font-size: var(--ts-headline); } + .f-subheadline-l { font-size: var(--ts-subheadline); } + .f1-l { font-size: var(--ts-1); } + .f2-l { font-size: var(--ts-2); } + .f3-l { font-size: var(--ts-3); } + .f4-l { font-size: var(--ts-4); } + .f5-l { font-size: var(--ts-5); } + .f6-l { font-size: var(--ts-6); } + .f7-l { font-size: var(--ts-7); } + .f8-l, .f-default-l { font-size: var(--ts-8); } + .fsmall-l { font-size: var(--ts-small); } + .f-supersmall-l { font-size: var(--ts-supersmall); } +} diff --git a/ghost/admin/app/styles/spirit/_typography.css b/ghost/admin/app/styles/spirit/_typography.css new file mode 100644 index 0000000000..93ce6cb879 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_typography.css @@ -0,0 +1,144 @@ +/* + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + + +/* Measure is limited to ~66 characters */ +.measure { + max-width: 30em; +} + +/* Measure is limited to ~80 characters */ +.measure-wide { + max-width: 42em; +} + +/* Measure is limited to ~45 characters */ +.measure-narrow { + max-width: 20em; +} + +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.small-caps { + font-variant: small-caps; +} + +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.readability { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; +} + +@media (--breakpoint-not-small) { + .measure-ns { + max-width: 30em; + } + .measure-wide-ns { + max-width: 34em; + } + .measure-narrow-ns { + max-width: 20em; + } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-ns { + font-variant: small-caps; + } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .readability-ns { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; + } +} + +@media (--breakpoint-medium) { + .measure-m { + max-width: 30em; + } + .measure-wide-m { + max-width: 34em; + } + .measure-narrow-m { + max-width: 20em; + } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-m { + font-variant: small-caps; + } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .readability-m { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; + } +} + +@media (--breakpoint-large) { + .measure-l { + max-width: 30em; + } + .measure-wide-l { + max-width: 34em; + } + .measure-narrow-l { + max-width: 20em; + } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-l { + font-variant: small-caps; + } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .readability-l { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; + } +} diff --git a/ghost/admin/app/styles/spirit/_utilities.css b/ghost/admin/app/styles/spirit/_utilities.css new file mode 100644 index 0000000000..6dc7c55fe3 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_utilities.css @@ -0,0 +1,50 @@ +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Equivalent to .overflow-y-scroll */ +.overflow-container { + overflow-y: scroll; +} + +.center { + margin-right: auto; + margin-left: auto; +} + +.mr-auto { margin-right: auto; } +.ml-auto { margin-left: auto; } + +@media (--breakpoint-not-small){ + .center-ns { + margin-right: auto; + margin-left: auto; + } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } +} + +@media (--breakpoint-medium){ + .center-m { + margin-right: auto; + margin-left: auto; + } + .mr-auto-m { margin-right: auto; } + .ml-auto-m { margin-left: auto; } +} + +@media (--breakpoint-large){ + .center-l { + margin-right: auto; + margin-left: auto; + } + .mr-auto-l { margin-right: auto; } + .ml-auto-l { margin-left: auto; } +} diff --git a/ghost/admin/app/styles/spirit/_vertical-align.css b/ghost/admin/app/styles/spirit/_vertical-align.css new file mode 100644 index 0000000000..83f9114842 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_vertical-align.css @@ -0,0 +1,36 @@ +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.v-base { vertical-align: baseline; } +.v-mid { vertical-align: middle; } +.v-top { vertical-align: top; } +.v-btm { vertical-align: bottom; } + +@media (--breakpoint-not-small) { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} + +@media (--breakpoint-medium) { + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } +} + +@media (--breakpoint-large) { + .v-base-l { vertical-align: baseline; } + .v-mid-l { vertical-align: middle; } + .v-top-l { vertical-align: top; } + .v-btm-l { vertical-align: bottom; } +} diff --git a/ghost/admin/app/styles/spirit/_visibility.css b/ghost/admin/app/styles/spirit/_visibility.css new file mode 100644 index 0000000000..f5a8c44b6e --- /dev/null +++ b/ghost/admin/app/styles/spirit/_visibility.css @@ -0,0 +1,51 @@ +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ + +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} + +@media (--breakpoint-not-small) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media (--breakpoint-medium) { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media (--breakpoint-large) { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + diff --git a/ghost/admin/app/styles/spirit/_white-space.css b/ghost/admin/app/styles/spirit/_white-space.css new file mode 100644 index 0000000000..3902f1f7c1 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_white-space.css @@ -0,0 +1,34 @@ +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + +.ws-normal { white-space: normal; } +.nowrap { white-space: nowrap; } +.pre { white-space: pre; } + +@media (--breakpoint-not-small) { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } +} + +@media (--breakpoint-medium) { + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } +} + +@media (--breakpoint-large) { + .ws-normal-l { white-space: normal; } + .nowrap-l { white-space: nowrap; } + .pre-l { white-space: pre; } +} + diff --git a/ghost/admin/app/styles/spirit/_widths.css b/ghost/admin/app/styles/spirit/_widths.css new file mode 100644 index 0000000000..dcfbc1816e --- /dev/null +++ b/ghost/admin/app/styles/spirit/_widths.css @@ -0,0 +1,208 @@ +/* + + Base: + w = width + + Value: + (n) = (n * grid size) + -(m) = (m)% + -third = third of full width + -two-thirds = two thirds of full width + -auto = auto + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.w1 { width: calc(var(--grid-size) * 1); } +.w2 { width: calc(var(--grid-size) * 2); } +.w3 { width: calc(var(--grid-size) * 3); } +.w4 { width: calc(var(--grid-size) * 4); } +.w5 { width: calc(var(--grid-size) * 5); } +.w6 { width: calc(var(--grid-size) * 6); } +.w7 { width: calc(var(--grid-size) * 7); } +.w8 { width: calc(var(--grid-size) * 8); } +.w9 { width: calc(var(--grid-size) * 9); } +.w10 { width: calc(var(--grid-size) * 10); } +.w11 { width: calc(var(--grid-size) * 11); } +.w12 { width: calc(var(--grid-size) * 12); } +.w13 { width: calc(var(--grid-size) * 13); } +.w14 { width: calc(var(--grid-size) * 14); } +.w15 { width: calc(var(--grid-size) * 15); } +.w16 { width: calc(var(--grid-size) * 16); } +.w17 { width: calc(var(--grid-size) * 17); } +.w18 { width: calc(var(--grid-size) * 18); } +.w19 { width: calc(var(--grid-size) * 19); } +.w20 { width: calc(var(--grid-size) * 20); } +.w25 { width: calc(var(--grid-size) * 25); } +.w30 { width: calc(var(--grid-size) * 30); } +.w40 { width: calc(var(--grid-size) * 40); } +.w50 { width: calc(var(--grid-size) * 50); } +.w70 { width: calc(var(--grid-size) * 70); } +.w88 { width: calc(var(--grid-size) * 88); } + +.w-10 { width: 10%; } +.w-20 { width: 20%; } +.w-25 { width: 25%; } +.w-30 { width: 30%; } +.w-33 { width: 33%; } +.w-34 { width: 34%; } +.w-40 { width: 40%; } +.w-50 { width: 50%; } +.w-60 { width: 60%; } +.w-70 { width: 70%; } +.w-75 { width: 75%; } +.w-80 { width: 80%; } +.w-90 { width: 90%; } +.w-100 { width: 100%; } + +.w-third { width: calc(100% / 3); } +.w-two-thirds { width: calc(100% / 1.5); } +.w-auto { width: auto; } + +@media (--breakpoint-not-small) { + .w1-ns { width: calc(var(--grid-size) * 1); } + .w2-ns { width: calc(var(--grid-size) * 2); } + .w3-ns { width: calc(var(--grid-size) * 3); } + .w4-ns { width: calc(var(--grid-size) * 4); } + .w5-ns { width: calc(var(--grid-size) * 5); } + .w6-ns { width: calc(var(--grid-size) * 6); } + .w7-ns { width: calc(var(--grid-size) * 7); } + .w8-ns { width: calc(var(--grid-size) * 8); } + .w9-ns { width: calc(var(--grid-size) * 9); } + .w10-ns { width: calc(var(--grid-size) * 10); } + .w11-ns { width: calc(var(--grid-size) * 11); } + .w12-ns { width: calc(var(--grid-size) * 12); } + .w13-ns { width: calc(var(--grid-size) * 13); } + .w14-ns { width: calc(var(--grid-size) * 14); } + .w15-ns { width: calc(var(--grid-size) * 15); } + .w16-ns { width: calc(var(--grid-size) * 16); } + .w17-ns { width: calc(var(--grid-size) * 17); } + .w18-ns { width: calc(var(--grid-size) * 18); } + .w19-ns { width: calc(var(--grid-size) * 19); } + .w20-ns { width: calc(var(--grid-size) * 20); } + .w25-ns { width: calc(var(--grid-size) * 25); } + .w30-ns { width: calc(var(--grid-size) * 30); } + .w40-ns { width: calc(var(--grid-size) * 40); } + .w50-ns { width: calc(var(--grid-size) * 50); } + .w70-ns { width: calc(var(--grid-size) * 70); } + .w88-ns { width: calc(var(--grid-size) * 88); } + + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + + .w-third-ns { width: calc(100% / 3); } + .w-two-thirds-ns { width: calc(100% / 1.5); } + .w-auto-ns { width: auto; } +} + +@media (--breakpoint-medium) { + .w1-m { width: calc(var(--grid-size) * 1); } + .w2-m { width: calc(var(--grid-size) * 2); } + .w3-m { width: calc(var(--grid-size) * 3); } + .w4-m { width: calc(var(--grid-size) * 4); } + .w5-m { width: calc(var(--grid-size) * 5); } + .w6-m { width: calc(var(--grid-size) * 6); } + .w7-m { width: calc(var(--grid-size) * 7); } + .w8-m { width: calc(var(--grid-size) * 8); } + .w9-m { width: calc(var(--grid-size) * 9); } + .w10-m { width: calc(var(--grid-size) * 10); } + .w11-m { width: calc(var(--grid-size) * 11); } + .w12-m { width: calc(var(--grid-size) * 12); } + .w13-m { width: calc(var(--grid-size) * 13); } + .w14-m { width: calc(var(--grid-size) * 14); } + .w15-m { width: calc(var(--grid-size) * 15); } + .w16-m { width: calc(var(--grid-size) * 16); } + .w17-m { width: calc(var(--grid-size) * 17); } + .w18-m { width: calc(var(--grid-size) * 18); } + .w19-m { width: calc(var(--grid-size) * 19); } + .w20-m { width: calc(var(--grid-size) * 20); } + .w25-m { width: calc(var(--grid-size) * 25); } + .w30-m { width: calc(var(--grid-size) * 30); } + .w40-m { width: calc(var(--grid-size) * 40); } + .w50-m { width: calc(var(--grid-size) * 50); } + .w70-m { width: calc(var(--grid-size) * 70); } + .w88-m { width: calc(var(--grid-size) * 88); } + + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + + .w-third-m { width: calc(100% / 3); } + .w-two-thirds-m { width: calc(100% / 1.5); } + .w-auto-m { width: auto; } +} + +@media (--breakpoint-large) { + .w1-l { width: calc(var(--grid-size) * 1); } + .w2-l { width: calc(var(--grid-size) * 2); } + .w3-l { width: calc(var(--grid-size) * 3); } + .w4-l { width: calc(var(--grid-size) * 4); } + .w5-l { width: calc(var(--grid-size) * 5); } + .w6-l { width: calc(var(--grid-size) * 6); } + .w7-l { width: calc(var(--grid-size) * 7); } + .w8-l { width: calc(var(--grid-size) * 8); } + .w9-l { width: calc(var(--grid-size) * 9); } + .w10-l { width: calc(var(--grid-size) * 10); } + .w11-l { width: calc(var(--grid-size) * 11); } + .w12-l { width: calc(var(--grid-size) * 12); } + .w13-l { width: calc(var(--grid-size) * 13); } + .w14-l { width: calc(var(--grid-size) * 14); } + .w15-l { width: calc(var(--grid-size) * 15); } + .w16-l { width: calc(var(--grid-size) * 16); } + .w17-l { width: calc(var(--grid-size) * 17); } + .w18-l { width: calc(var(--grid-size) * 18); } + .w19-l { width: calc(var(--grid-size) * 19); } + .w20-l { width: calc(var(--grid-size) * 20); } + .w25-l { width: calc(var(--grid-size) * 25); } + .w30-l { width: calc(var(--grid-size) * 30); } + .w40-l { width: calc(var(--grid-size) * 40); } + .w50-l { width: calc(var(--grid-size) * 50); } + .w70-l { width: calc(var(--grid-size) * 70); } + .w88-l { width: calc(var(--grid-size) * 88); } + + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + + .w-third-l { width: calc(100% / 3); } + .w-two-thirds-l { width: calc(100% / 1.5); } + .w-auto-l { width: auto; } +} diff --git a/ghost/admin/app/styles/spirit/_word-break.css b/ghost/admin/app/styles/spirit/_word-break.css new file mode 100644 index 0000000000..bc88931a0d --- /dev/null +++ b/ghost/admin/app/styles/spirit/_word-break.css @@ -0,0 +1,36 @@ +/* + + WORD BREAK + + Base: + word = word-break + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.word-normal { word-break: normal; } +.word-wrap { word-break: break-all; } +.word-nowrap { word-break: keep-all; } + +@media (--breakpoint-not-small) { + .word-normal-ns { word-break: normal; } + .word-wrap-ns { word-break: break-all; } + .word-nowrap-ns { word-break: keep-all; } +} + +@media (--breakpoint-medium) { + .word-normal-m { word-break: normal; } + .word-wrap-m { word-break: break-all; } + .word-nowrap-m { word-break: keep-all; } +} + +@media (--breakpoint-large) { + .word-normal-l { word-break: normal; } + .word-wrap-l { word-break: break-all; } + .word-nowrap-l { word-break: keep-all; } +} + diff --git a/ghost/admin/app/styles/spirit/_z-index.css b/ghost/admin/app/styles/spirit/_z-index.css new file mode 100644 index 0000000000..a45da72f33 --- /dev/null +++ b/ghost/admin/app/styles/spirit/_z-index.css @@ -0,0 +1,55 @@ +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + +*/ + +.z-0 { z-index: 0; } +.z-1 { z-index: 1; } +.z-2 { z-index: 2; } +.z-3 { z-index: 3; } +.z-4 { z-index: 4; } +.z-5 { z-index: 5; } + +.z-999 { z-index: 999; } +.z-9999 { z-index: 9999; } + +.z--999 { z-index: -999; } +.z--9999 { z-index: -9999; } + +.z-max { + z-index: 2147483647; +} + +.z-inherit { z-index: inherit; } +.z-initial { z-index: initial; } +.z-unset { z-index: unset; } diff --git a/ghost/admin/app/styles/spirit/spirit-dark.css b/ghost/admin/app/styles/spirit/spirit-dark.css new file mode 100644 index 0000000000..907910a4a9 --- /dev/null +++ b/ghost/admin/app/styles/spirit/spirit-dark.css @@ -0,0 +1,5 @@ +@import "./spirit.css"; + +/* Import dark theme overrides */ +@import "./_colors-dark.css"; +@import "./_koenig-dark.css"; diff --git a/ghost/admin/app/styles/spirit/spirit.css b/ghost/admin/app/styles/spirit/spirit.css new file mode 100644 index 0000000000..d482e27678 --- /dev/null +++ b/ghost/admin/app/styles/spirit/spirit.css @@ -0,0 +1,77 @@ +/* External Library Includes */ +@import './_normalize'; + +/* Modules */ +@import './_spacing'; +@import './_box-sizing'; +@import './_aspect-ratios'; +@import './_images'; +@import './_background-size'; +@import './_background-position'; +@import './_outlines'; +@import './_borders'; +@import './_border-colors'; +@import './_border-radius'; +@import './_border-style'; +@import './_border-widths'; +@import './_box-shadow'; +@import './_code'; +@import './_coordinates'; +@import './_clears'; +@import './_display'; +@import './_flexbox'; +@import './_floats'; +@import './_font-family'; +@import './_font-style'; +@import './_font-weight'; +@import './_forms'; +@import './_heights'; +@import './_letter-spacing'; +@import './_line-height'; +@import './_links'; +@import './_lists'; +@import './_max-widths'; +@import './_min-widths'; +@import './_min-heights'; +@import './_widths'; +@import './_overflow'; +@import './_position'; +@import './_opacity'; +@import './_rotations'; +@import './_skins'; +@import './_gradients'; +@import './_hovers'; +@import './_text-block-spacings'; +@import './_negative-margins'; +@import './_tables'; +@import './_text-decoration'; +@import './_text-align'; +@import './_text-transform'; +@import './_type-scale'; +@import './_typography'; +@import './_utilities'; +@import './_visibility'; +@import './_white-space'; +@import './_vertical-align'; +@import './_hovers'; +@import './_z-index'; +@import './_nested'; +@import './_dropdown'; +@import './_nudge'; +@import './_icons'; +@import './_animations'; +@import './_pointer-events'; + +/* Variables */ +/* Importing here will allow you to override any variables in the modules */ +@import './_colors'; +@import './_media-queries'; + +/* Debugging */ +@import './_debug-children'; +@import './_debug-grid'; + +/* Uncomment out the line below to help debug layout issues */ +/* @import './_debug'; */ +@import './_koenig'; +@import './_custom-styles'; diff --git a/ghost/admin/ember-cli-build.js b/ghost/admin/ember-cli-build.js index 334b6b5709..84a3c05392 100644 --- a/ghost/admin/ember-cli-build.js +++ b/ghost/admin/ember-cli-build.js @@ -9,6 +9,13 @@ const Funnel = require('broccoli-funnel'); const environment = EmberApp.env(); const isProduction = environment === 'production'; +const postcssEasyImport = require('postcss-easy-import'); +const postcssCustomProperties = require('postcss-custom-properties'); +const postcssColorModFunction = require('postcss-color-mod-function'); +const postcssCustomMedia = require('postcss-custom-media'); +const autoprefixer = require('autoprefixer'); +const cssnano = require('cssnano'); + const assetLocation = function (fileName) { if (isProduction) { fileName = fileName.replace('.', '.min.'); @@ -137,6 +144,48 @@ module.exports = function (defaults) { codemirror: codemirrorAssets(), simplemde: simplemdeAssets() }, + postcssOptions: { + compile: { + enabled: true, + plugins: [ + { + module: postcssEasyImport, + options: { + path: ['app/styles'] + } + }, + { + module: postcssCustomProperties, + options: { + preserve: false + } + }, + { + module: postcssColorModFunction + }, + { + module: postcssCustomMedia + }, + { + module: autoprefixer + }, + { + module: cssnano, + options: { + zindex: false, + // cssnano sometimes minifies animations incorrectly causing them to break + // See: https://github.com/ben-eb/gulp-cssnano/issues/33#issuecomment-210518957 + reduceIdents: { + keyframes: false + }, + discardUnused: { + keyframes: false + } + } + } + ] + } + }, svgJar: { strategy: 'inline', stripPath: false, diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js index e599f666e0..38dca555db 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js @@ -1,8 +1,8 @@ import Component from '@ember/component'; import Key from 'mobiledoc-kit/utils/key'; +import kgStyle from '../helpers/kg-style'; import layout from '../templates/components/koenig-caption-input'; import {computed} from '@ember/object'; -import {kgStyle} from 'ember-cli-ghost-spirit/helpers/kg-style'; import {run} from '@ember/runloop'; export default Component.extend({ diff --git a/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js new file mode 100644 index 0000000000..3f40048003 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js @@ -0,0 +1,68 @@ +import {helper} from '@ember/component/helper'; + +export function kgStyle([style], options) { + let cssClass = ''; + + let pFontStyle = 'f3 fw3 lh-copy tracked-1 serif'; + let cardBorderStyle = 'pt2 pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-left-border kg-card-hover'; + + switch (style) { + // Card menu + case 'cardmenu': + cssClass = 'koenig-cardmenu absolute top-0 flex flex-wrap justify-start mt0 mr0 mb5 ml0 pa4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal'; + break; + + case 'cardmenu-card': + cssClass = 'flex flex-column justify-center items-center w20 h19 br3 midgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pt1 anim-fast'; + break; + + case 'cardmenu-icon': + cssClass = 'flex items-center'; + break; + + case 'cardmenu-label': + cssClass = 'f-supersmall tracked-1 fw1 ma0 mt1'; + break; + + // Container cards + case 'container-card': + cssClass = cardBorderStyle; + break; + + // Generic media card + case 'media-card': + cssClass = `${pFontStyle} ma0 ba b--transparent kg-card-hover`; + break; + + // Media styles & figure caption + case 'image-normal': + cssClass = 'center db'; + break; + case 'image-wide': + cssClass = 'center mw-100 db'; + break; + case 'image-full': + cssClass = 'center mw-100vw db'; + if (options.sidebar) { + cssClass = `${cssClass} kg-image-full--sidebar`; + } + break; + case 'figcaption': + cssClass = 'db pa2 center lh-title sans-serif fw4 f7 middarkgrey tracked-2 tc'; + break; + + // Media breakout styles + case 'breakout': + if (options.size === 'wide') { + cssClass = `${cssClass} koenig-breakout-wide`; + } + if (options.size === 'full') { + cssClass = `${cssClass} koenig-breakout-full`; + } + break; + } + + return cssClass; +} + +export default helper(kgStyle); diff --git a/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js new file mode 100644 index 0000000000..969a63e893 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js @@ -0,0 +1 @@ +export {default, kgStyle} from 'koenig-editor/helpers/kg-style'; diff --git a/ghost/admin/package.json b/ghost/admin/package.json index b370eda8f7..1beb963b05 100644 --- a/ghost/admin/package.json +++ b/ghost/admin/package.json @@ -30,6 +30,7 @@ "@ember/optional-features": "0.7.0", "@html-next/vertical-collection": "1.0.0-beta.12", "@tryghost/mobiledoc-kit": "0.11.1-ghost.6", + "autoprefixer": "9.4.8", "blueimp-md5": "2.10.0", "broccoli-asset-rev": "3.0.0", "broccoli-concat": "3.7.3", @@ -40,6 +41,7 @@ "codemirror": "5.42.2", "coveralls": "3.0.2", "csscomb": "4.2.0", + "cssnano": "4.1.10", "current-device": "0.7.8", "element-resize-detector": "^1.1.14", "ember-ajax": "4.0.2", @@ -54,14 +56,13 @@ "ember-cli-dependency-checker": "3.1.0", "ember-cli-es6-transform": "0.0.5", "ember-cli-eslint": "4.2.3", - "ember-cli-ghost-spirit": "0.0.6", "ember-cli-htmlbars": "3.0.1", "ember-cli-htmlbars-inline-precompile": "2.1.0", "ember-cli-inject-live-reload": "2.0.1", "ember-cli-mirage": "0.4.12", "ember-cli-moment-shim": "3.7.1", "ember-cli-node-assets": "0.2.2", - "ember-cli-postcss": "4.0.0", + "ember-cli-postcss": "4.2.0", "ember-cli-pretender": "3.0.0", "ember-cli-shims": "1.2.0", "ember-cli-string-helpers": "2.0.0", @@ -99,7 +100,6 @@ "eslint": "4.19.1", "eslint-plugin-ghost": "0.1.0", "fs-extra": "4.0.3", - "ghost-spirit": "0.0.50", "glob": "7.1.3", "google-caja-bower": "https://github.com/acburdine/google-caja-bower#ghost", "grunt": "1.0.3", @@ -116,6 +116,10 @@ "matchdep": "2.0.0", "normalize.css": "3.0.3", "password-generator": "2.2.0", + "postcss-color-mod-function": "3.0.3", + "postcss-custom-media": "7.0.7", + "postcss-custom-properties": "8.0.9", + "postcss-easy-import": "3.0.0", "reframe.js": "2.2.5", "simplemde": "https://github.com/kevinansfield/simplemde-markdown-editor.git#ghost", "testem": "2.14.0", diff --git a/ghost/admin/yarn.lock b/ghost/admin/yarn.lock index ef0fa7a667..bccc29b50d 100644 --- a/ghost/admin/yarn.lock +++ b/ghost/admin/yarn.lock @@ -725,6 +725,11 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== +"@types/minimatch@^3.0.3": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" + integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA== + "@types/node@*": version "10.12.18" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67" @@ -1049,13 +1054,6 @@ amdefine@>=0.0.4: resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU= -ansi-cyan@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873" - integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM= - dependencies: - ansi-wrap "0.1.0" - ansi-escapes@^1.1.0: version "1.4.0" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e" @@ -1066,20 +1064,6 @@ ansi-escapes@^3.0.0: resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30" integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw== -ansi-gray@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251" - integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE= - dependencies: - ansi-wrap "0.1.0" - -ansi-red@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c" - integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw= - dependencies: - ansi-wrap "0.1.0" - ansi-regex@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" @@ -1107,11 +1091,6 @@ ansi-styles@^3.0.0, ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" -ansi-wrap@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf" - integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768= - ansicolors@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef" @@ -1152,14 +1131,6 @@ argparse@^1.0.2, argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" -arr-diff@^1.0.1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a" - integrity sha1-aHwydYFjWI/vfeezb6vklesaOZo= - dependencies: - arr-flatten "^1.0.1" - array-slice "^0.2.3" - arr-diff@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf" @@ -1177,11 +1148,6 @@ arr-flatten@^1.0.1, arr-flatten@^1.1.0: resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1" integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg== -arr-union@^2.0.1: - version "2.1.0" - resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d" - integrity sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0= - arr-union@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4" @@ -1207,11 +1173,6 @@ array-from@^2.1.1: resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195" integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU= -array-slice@^0.2.3: - version "0.2.3" - resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5" - integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU= - array-to-error@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/array-to-error/-/array-to-error-1.1.1.tgz#d68812926d14097a205579a667eeaf1856a44c07" @@ -1340,7 +1301,7 @@ async-promise-queue@^1.0.3, async-promise-queue@^1.0.4: async "^2.4.1" debug "^2.6.8" -async@1.x, async@^1.4.0, async@^1.5.2, async@~1.5.2: +async@1.x, async@^1.5.2, async@~1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo= @@ -1367,17 +1328,17 @@ atob@^2.1.1: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== -autoprefixer@8.2.0: - version "8.2.0" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.2.0.tgz#1e49b611b31a5259b86b7a6b2b1b8faf091abe2a" - integrity sha512-xBVQpGAcSNNS1PBnEfT+F9VF8ZJeoKZ121I3OVQ0n1F0SqVuj4oLI6yFeEviPV8Z/GjoqBRXcYis0oSS8zjNEg== +autoprefixer@9.4.8: + version "9.4.8" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.8.tgz#575dcdfd984228c7bccbc08c5fe53f0ea6915593" + integrity sha512-DIhd0KMi9Nql3oJkJ2HCeOVihrXFPtWXc6ckwaUNwliDOt9OGr0fk8vV8jCLWXnZc1EXvQ2uLUzGpcPxFAQHEQ== dependencies: - browserslist "^3.2.0" - caniuse-lite "^1.0.30000817" + browserslist "^4.4.1" + caniuse-lite "^1.0.30000938" normalize-range "^0.1.2" num2fraction "^1.2.2" - postcss "^6.0.20" - postcss-value-parser "^3.2.3" + postcss "^7.0.14" + postcss-value-parser "^3.3.1" aws-sign2@~0.7.0: version "0.7.0" @@ -2227,7 +2188,7 @@ bluebird@^2.9.33: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.11.0.tgz#534b9033c022c9579c56ba3b3e5a5caafbb650e1" integrity sha1-U0uQM8AiyVecVro7Plpcqvu2UOE= -bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.3: +bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7" integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw== @@ -2415,7 +2376,7 @@ broccoli-builder@^0.18.14: rsvp "^3.0.17" silent-error "^1.0.1" -broccoli-caching-writer@3.0.3, broccoli-caching-writer@^3.0.3: +broccoli-caching-writer@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/broccoli-caching-writer/-/broccoli-caching-writer-3.0.3.tgz#0bd2c96a9738d6a6ab590f07ba35c5157d7db476" integrity sha1-C9LJapc41qarWQ8HujXFFX19tHY= @@ -2642,25 +2603,6 @@ broccoli-node-info@^1.1.0: resolved "https://registry.yarnpkg.com/broccoli-node-info/-/broccoli-node-info-1.1.0.tgz#3aa2e31e07e5bdb516dd25214f7c45ba1c459412" integrity sha1-OqLjHgflvbUW3SUhT3xFuhxFlBI= -broccoli-persistent-filter@1.4.3: - version "1.4.3" - resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.3.tgz#3511bc52fc53740cda51621f58a28152d9911bc1" - integrity sha512-JwNLDvvXJlhUmr+CHcbVhCyp33NbCIAITjQZmJY9e8QzANXh3jpFWlhSFvkWghwKA8rTAKcXkW12agtiZjxr4g== - dependencies: - async-disk-cache "^1.2.1" - async-promise-queue "^1.0.3" - broccoli-plugin "^1.0.0" - fs-tree-diff "^0.5.2" - hash-for-dep "^1.0.2" - heimdalljs "^0.2.1" - heimdalljs-logger "^0.1.7" - mkdirp "^0.5.1" - promise-map-series "^0.2.1" - rimraf "^2.6.1" - rsvp "^3.0.18" - symlink-or-copy "^1.0.1" - walk-sync "^0.3.1" - broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.2.0, broccoli-persistent-filter@^1.4.2, broccoli-persistent-filter@^1.4.3: version "1.4.6" resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615" @@ -2680,6 +2622,25 @@ broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-p symlink-or-copy "^1.0.1" walk-sync "^0.3.1" +broccoli-persistent-filter@^2.1.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-2.2.1.tgz#d2a911ec02ebbbcfb382242c517159cb7a9c10d7" + integrity sha512-07rUlzzhsyrly4Waq/eMK/fhWcN3g0txirzx4EKqQ9pF4w+XXI/oRPibRyHRa5NL6DfNGC54fPFRwMYHjjm5nw== + dependencies: + async-disk-cache "^1.2.1" + async-promise-queue "^1.0.3" + broccoli-plugin "^1.0.0" + fs-tree-diff "^1.0.2" + hash-for-dep "^1.0.2" + heimdalljs "^0.2.1" + heimdalljs-logger "^0.1.7" + mkdirp "^0.5.1" + promise-map-series "^0.2.1" + rimraf "^2.6.1" + rsvp "^4.7.0" + symlink-or-copy "^1.0.1" + walk-sync "^1.0.0" + broccoli-persistent-filter@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-2.1.1.tgz#7bb2b1015baedf5cf58b5b2608495f3d78f81b12" @@ -2709,26 +2670,26 @@ broccoli-plugin@^1.0.0, broccoli-plugin@^1.1.0, broccoli-plugin@^1.2.0, broccoli rimraf "^2.3.4" symlink-or-copy "^1.1.8" -broccoli-postcss-single@^1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/broccoli-postcss-single/-/broccoli-postcss-single-1.6.0.tgz#da008ba24087f5cd1d7ec851d3d8921c9896a8ff" - integrity sha512-cE89P8mEmNPQS3VdxY8r2cUWTbdPyZMfkbsXLQ3bKrJ+oX8L0H1u3P0ryVXwkFGpgs9bfJiQF+m7HYK+iWcV9g== +broccoli-postcss-single@^2.1.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/broccoli-postcss-single/-/broccoli-postcss-single-2.1.2.tgz#cca8d3cab37985aef6e24d87a2defeb492a81ec2" + integrity sha512-YBM/CvU55oHUk33KlUCIrHkHY73PTyjDVQO1CooIyesbbzp/c75Ux2365PSMz3w/O8rUdGPAYS5Ha8YhJvebOQ== dependencies: - broccoli-caching-writer "3.0.3" - include-path-searcher "0.1.0" - mkdirp "0.5.1" - object-assign "4.1.1" - postcss "6.0.16" + broccoli-caching-writer "^3.0.3" + include-path-searcher "^0.1.0" + mkdirp "^0.5.1" + object-assign "^4.1.1" + postcss "^7.0.0" -broccoli-postcss@^3.5.3: - version "3.5.3" - resolved "https://registry.yarnpkg.com/broccoli-postcss/-/broccoli-postcss-3.5.3.tgz#bfbb12531d8c774d23651b462c3ed23f0227a8e8" - integrity sha512-eJNDuvdE3eVplT+236EYzlbz2ONN13q0RNcphJXnlIqv3d4qm4Ho+QRhSbZJao6UpBTTOK6OCSkQBNAVtVTdDQ== +broccoli-postcss@^4.0.1: + version "4.0.3" + resolved "https://registry.yarnpkg.com/broccoli-postcss/-/broccoli-postcss-4.0.3.tgz#9a2839660888dc5544189fc7faa4552e6bfb72b0" + integrity sha512-sparRjTNnP83v11F7F+kbSv1yH2LrdPvHUIzh0KyisVlYTjaBkS/B0tdccmk0VjXXO8H23IMn5msxuJxoeJ5/w== dependencies: - broccoli-funnel "2.0.1" - broccoli-persistent-filter "1.4.3" - object-assign "4.1.1" - postcss "6.0.22" + broccoli-funnel "^2.0.1" + broccoli-persistent-filter "^2.1.0" + object-assign "^4.1.1" + postcss "^7.0.5" broccoli-rollup@^1.0.3: version "1.3.0" @@ -2943,7 +2904,7 @@ browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@^3.1.1, browserslist@^3.2.0, browserslist@^3.2.6: +browserslist@^3.1.1, browserslist@^3.2.6: version "3.2.8" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6" integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ== @@ -2960,6 +2921,15 @@ browserslist@^4.0.0, browserslist@^4.3.4: electron-to-chromium "^1.3.96" node-releases "^1.1.3" +browserslist@^4.4.1: + version "4.4.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.2.tgz#6ea8a74d6464bb0bd549105f659b41197d8f0ba2" + integrity sha512-ISS/AIAiHERJ3d45Fz0AVYKkgcy+F/eJHzKEvv1j0wwKGKD9T3BrwKr/5g45L+Y4XIK5PlTqefHciRFcfE1Jxg== + dependencies: + caniuse-lite "^1.0.30000939" + electron-to-chromium "^1.3.113" + node-releases "^1.1.8" + bser@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -3024,24 +2994,6 @@ builtins@^1.0.3: resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88" integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og= -bunyan-loggly@^1.3.1: - version "1.4.0" - resolved "https://registry.yarnpkg.com/bunyan-loggly/-/bunyan-loggly-1.4.0.tgz#a10b61d7b32422e1c648031185d8e0413427db8f" - integrity sha512-AgpiqhaeAhFCjPdCeZqUEaTDG7Mf9XyjBUY+Piqkmas2MGun4KePcYXwQ3j9yoI1mJTlSCFQwQ5ajBpLUM8GtA== - dependencies: - json-stringify-safe "^5.0.1" - node-loggly-bulk "^2.2.4" - -bunyan@1.8.12: - version "1.8.12" - resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797" - integrity sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c= - optionalDependencies: - dtrace-provider "~0.8" - moment "^2.10.6" - mv "~2" - safe-json-stringify "~1" - bytes@1: version "1.0.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8" @@ -3115,11 +3067,6 @@ caller-path@^2.0.0: dependencies: caller-callsite "^2.0.0" -caller@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/caller/-/caller-1.0.1.tgz#b851860f70e195db3d277395aa1a7e23ea30ecf5" - integrity sha1-uFGGD3Dhlds9J3OVqhp+I+ow7PU= - callsite@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20" @@ -3143,12 +3090,12 @@ camelcase-keys@^2.0.0: camelcase "^2.0.0" map-obj "^1.0.0" -camelcase@^1.0.2, camelcase@^1.2.1: +camelcase@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39" integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk= -camelcase@^2.0.0, camelcase@^2.0.1: +camelcase@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f" integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8= @@ -3175,11 +3122,16 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000817, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000925: +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000925: version "1.0.30000928" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000928.tgz#805e828dc72b06498e3683a32e61c7507fd67b88" integrity sha512-aSpMWRXL6ZXNnzm8hgE4QDLibG5pVJ2Ujzsuj3icazlIkxXkPXtL+BWnMx6FBkWmkZgBHGUxPZQvrbRw2ZTxhg== +caniuse-lite@^1.0.30000938, caniuse-lite@^1.0.30000939: + version "1.0.30000939" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000939.tgz#b9ab7ac9e861bf78840b80c5dfbc471a5cd7e679" + integrity sha512-oXB23ImDJOgQpGjRv1tCtzAvJr4/OvrHi5SO2vUgB0g0xpdZZoA/BxfImiWfdwoYdUTtQrPsXsvYU/dmCSM8gg== + capture-exit@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f" @@ -3423,15 +3375,6 @@ cliui@^2.1.0: right-align "^0.1.1" wordwrap "0.0.2" -cliui@^3.0.3: - version "3.2.0" - resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d" - integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0= - dependencies: - string-width "^1.0.1" - strip-ansi "^3.0.1" - wrap-ansi "^2.0.0" - clone@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f" @@ -3516,11 +3459,6 @@ color-string@^1.5.2: color-name "^1.0.0" simple-swizzle "^0.2.2" -color-support@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" - integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== - color@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/color/-/color-3.1.0.tgz#d8e9fb096732875774c84bf922815df0308d0ffc" @@ -3534,11 +3472,6 @@ colors@1.0.3: resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b" integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs= -colors@^1.1.2: - version "1.3.3" - resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d" - integrity sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg== - colors@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" @@ -3568,7 +3501,7 @@ commander@2.8.x: dependencies: graceful-readlink ">= 1.0.0" -commander@^2.5.0, commander@^2.6.0, commander@^2.9.0: +commander@^2.5.0, commander@^2.6.0: version "2.19.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg== @@ -3653,14 +3586,6 @@ concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@^1.6.0: readable-stream "^2.2.2" typedarray "^0.0.6" -config-chain@~1.1.5: - version "1.1.12" - resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa" - integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA== - dependencies: - ini "^1.3.4" - proto-list "~1.2.1" - configstore@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/configstore/-/configstore-4.0.0.tgz#5933311e95d3687efb592c528b922d9262d227e7" @@ -3673,11 +3598,6 @@ configstore@^4.0.0: write-file-atomic "^2.0.0" xdg-basedir "^3.0.0" -connect-slashes@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/connect-slashes/-/connect-slashes-1.3.1.tgz#95d61830d0f9d5853c8688f0b5f43988b186ac37" - integrity sha1-ldYYMND51YU8hojwtfQ5iLGGrDc= - console-browserify@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10" @@ -3790,27 +3710,15 @@ core-util-is@1.0.2, core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= -cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: - version "2.2.2" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892" - integrity sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A== - dependencies: - is-directory "^0.3.1" - js-yaml "^3.4.3" - minimist "^1.2.0" - object-assign "^4.1.0" - os-homedir "^1.0.1" - parse-json "^2.2.0" - require-from-string "^1.1.0" - cosmiconfig@^5.0.0: - version "5.0.7" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04" - integrity sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA== + version "5.1.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.1.0.tgz#6c5c35e97f37f985061cdf653f114784231185cf" + integrity sha512-kCNPvthka8gvLtzAxQXvWo4FxqRB+ftRZyPZNuab5ngvM9Y7yw7hbEysglptLgpkGX9nAOKTBVkHUAe8xtYR6Q== dependencies: import-fresh "^2.0.0" is-directory "^0.3.1" js-yaml "^3.9.0" + lodash.get "^4.4.2" parse-json "^4.0.0" coveralls@3.0.2: @@ -3962,11 +3870,16 @@ css-url-regex@^1.1.0: resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec" integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w= -css-what@2.1, css-what@^2.1.2: +css-what@2.1: version "2.1.2" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d" integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ== +css-what@^2.1.2: + version "2.1.3" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" + integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== + csscomb@4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/csscomb/-/csscomb-4.2.0.tgz#5f948bc94afa61c033c3984e4192f0e6fef67fdb" @@ -3985,40 +3898,40 @@ cssesc@^2.0.0: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703" integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg== -cssnano-preset-default@^4.0.6: - version "4.0.6" - resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.6.tgz#92379e2a6db4a91c0ea727f5f556eeac693eab6a" - integrity sha512-UPboYbFaJFtDUhJ4fqctThWbbyF4q01/7UhsZbLzp35l+nUxtzh1SifoVlEfyLM3n3Z0htd8B1YlCxy9i+bQvg== +cssnano-preset-default@^4.0.7: + version "4.0.7" + resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76" + integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA== dependencies: css-declaration-sorter "^4.0.1" cssnano-util-raw-cache "^4.0.1" postcss "^7.0.0" - postcss-calc "^7.0.0" - postcss-colormin "^4.0.2" + postcss-calc "^7.0.1" + postcss-colormin "^4.0.3" postcss-convert-values "^4.0.1" - postcss-discard-comments "^4.0.1" + postcss-discard-comments "^4.0.2" postcss-discard-duplicates "^4.0.2" postcss-discard-empty "^4.0.1" postcss-discard-overridden "^4.0.1" - postcss-merge-longhand "^4.0.10" - postcss-merge-rules "^4.0.2" + postcss-merge-longhand "^4.0.11" + postcss-merge-rules "^4.0.3" postcss-minify-font-values "^4.0.2" - postcss-minify-gradients "^4.0.1" - postcss-minify-params "^4.0.1" - postcss-minify-selectors "^4.0.1" + postcss-minify-gradients "^4.0.2" + postcss-minify-params "^4.0.2" + postcss-minify-selectors "^4.0.2" postcss-normalize-charset "^4.0.1" - postcss-normalize-display-values "^4.0.1" - postcss-normalize-positions "^4.0.1" - postcss-normalize-repeat-style "^4.0.1" - postcss-normalize-string "^4.0.1" - postcss-normalize-timing-functions "^4.0.1" + postcss-normalize-display-values "^4.0.2" + postcss-normalize-positions "^4.0.2" + postcss-normalize-repeat-style "^4.0.2" + postcss-normalize-string "^4.0.2" + postcss-normalize-timing-functions "^4.0.2" postcss-normalize-unicode "^4.0.1" postcss-normalize-url "^4.0.1" - postcss-normalize-whitespace "^4.0.1" - postcss-ordered-values "^4.1.1" - postcss-reduce-initial "^4.0.2" - postcss-reduce-transforms "^4.0.1" - postcss-svgo "^4.0.1" + postcss-normalize-whitespace "^4.0.2" + postcss-ordered-values "^4.1.2" + postcss-reduce-initial "^4.0.3" + postcss-reduce-transforms "^4.0.2" + postcss-svgo "^4.0.2" postcss-unique-selectors "^4.0.1" cssnano-util-get-arguments@^4.0.0: @@ -4043,13 +3956,13 @@ cssnano-util-same-parent@^4.0.0: resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3" integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q== -cssnano@^4.0.0-rc.2: - version "4.1.8" - resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.8.tgz#8014989679d5fd42491e4499a521dbfb85c95fd1" - integrity sha512-5GIY0VzAHORpbKiL3rMXp4w4M1Ki+XlXgEXyuWXVd3h6hlASb+9Vo76dNP56/elLMVBBsUfusCo1q56uW0UWig== +cssnano@4.1.10: + version "4.1.10" + resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2" + integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ== dependencies: cosmiconfig "^5.0.0" - cssnano-preset-default "^4.0.6" + cssnano-preset-default "^4.0.7" is-resolvable "^1.0.0" postcss "^7.0.0" @@ -4180,7 +4093,7 @@ debug@^4.1.0, debug@~4.1.0: dependencies: ms "^2.1.1" -decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2: +decamelize@^1.0.0, decamelize@^1.1.2: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= @@ -4417,13 +4330,6 @@ dot-prop@^4.1.0, dot-prop@^4.1.1: dependencies: is-obj "^1.0.0" -dtrace-provider@~0.8: - version "0.8.7" - resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.7.tgz#dc939b4d3e0620cfe0c1cd803d0d2d7ed04ffd04" - integrity sha1-3JObTT4GIM/gwc2APQ0tftBP/QQ= - dependencies: - nan "^2.10.0" - duplexify@^3.4.2, duplexify@^3.6.0: version "3.6.1" resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125" @@ -4447,22 +4353,16 @@ editions@^1.1.1: resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b" integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg== -editorconfig@^0.13.2: - version "0.13.3" - resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.13.3.tgz#e5219e587951d60958fd94ea9a9a008cdeff1b34" - integrity sha512-WkjsUNVCu+ITKDj73QDvi0trvpdDWdkDyHybDGSXPfekLCqwmpD7CP7iPbvBgosNuLcI96XTDwNa75JyFl7tEQ== - dependencies: - bluebird "^3.0.5" - commander "^2.9.0" - lru-cache "^3.2.0" - semver "^5.1.0" - sigmund "^1.0.1" - ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= +electron-to-chromium@^1.3.113: + version "1.3.113" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9" + integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g== + electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.96: version "1.3.100" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.100.tgz#899fb088def210aee6b838a47655bbb299190e13" @@ -4667,7 +4567,7 @@ ember-cli-chai@0.5.0: rollup-plugin-commonjs "^8.0.2" rollup-plugin-node-resolve "^3.0.0" -ember-cli-cjs-transform@1.3.0, ember-cli-cjs-transform@^1.2.0, ember-cli-cjs-transform@^1.3.0: +ember-cli-cjs-transform@1.3.0, ember-cli-cjs-transform@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/ember-cli-cjs-transform/-/ember-cli-cjs-transform-1.3.0.tgz#73a24a9335067b83a4acac9c5fe4deb51a62391a" integrity sha1-c6JKkzUGe4OkrKycX+TetRpiORo= @@ -4740,19 +4640,6 @@ ember-cli-get-component-path-option@^1.0.0: resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771" integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E= -ember-cli-ghost-spirit@0.0.6: - version "0.0.6" - resolved "https://registry.yarnpkg.com/ember-cli-ghost-spirit/-/ember-cli-ghost-spirit-0.0.6.tgz#38f370da5943429e180622875a1db0010f29ea32" - integrity sha1-OPNw2llDQp4YBiKHWh2wAQ8p6jI= - dependencies: - broccoli-file-creator "^2.1.1" - broccoli-funnel "^2.0.1" - broccoli-merge-trees "^3.0.0" - ember-cli-babel "^6.6.0" - ember-cli-cjs-transform "^1.2.0" - ember-cli-postcss "4.0.0" - ghost-spirit ">=0.0.18" - ember-cli-htmlbars-inline-precompile@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ember-cli-htmlbars-inline-precompile/-/ember-cli-htmlbars-inline-precompile-2.1.0.tgz#61b91ff1879d44ae504cadb46fb1f2604995ae08" @@ -4885,16 +4772,16 @@ ember-cli-path-utils@^1.0.0: resolved "https://registry.yarnpkg.com/ember-cli-path-utils/-/ember-cli-path-utils-1.0.0.tgz#4e39af8b55301cddc5017739b77a804fba2071ed" integrity sha1-Tjmvi1UwHN3FAXc5t3qAT7ogce0= -ember-cli-postcss@4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/ember-cli-postcss/-/ember-cli-postcss-4.0.0.tgz#d32c4ab5539122e3bc8fe26bb9cc18d8ac377739" - integrity sha512-PApMjEhR6cIDegoI8OlNIESdYKoECsbByqsBJ239BNfwne5BaqwvoUlj+RaZV5isye7uHR8cjG5aD2BX0ES97A== +ember-cli-postcss@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/ember-cli-postcss/-/ember-cli-postcss-4.2.0.tgz#7c840c0b5317923f35f062ff6882189dc55b8c13" + integrity sha512-TkSl+v94Wx3eiX24773nv7Wk61+mrDg+WIqYu1Fvkm+HCmt09UuUJJHnpZUk2d+Uv0FZcXe2aay/6unIAmZufw== dependencies: broccoli-file-creator "^2.1.1" broccoli-merge-trees "^3.0.0" - broccoli-postcss "^3.5.3" - broccoli-postcss-single "^1.6.0" - ember-cli-babel "^6.12.0" + broccoli-postcss "^4.0.1" + broccoli-postcss-single "^2.1.0" + ember-cli-babel "^7.1.0" merge "^1.2.0" ember-cli-preprocess-registry@^3.1.2: @@ -5723,6 +5610,11 @@ ensure-posix-path@^1.0.0, ensure-posix-path@^1.0.1, ensure-posix-path@^1.0.2: resolved "https://registry.yarnpkg.com/ensure-posix-path/-/ensure-posix-path-1.0.2.tgz#a65b3e42d0b71cfc585eb774f9943c8d9b91b0c2" integrity sha1-pls+QtC3HPxYXrd0+ZQ8jZuRsMI= +ensure-posix-path@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/ensure-posix-path/-/ensure-posix-path-1.1.1.tgz#3c62bdb19fa4681544289edb2b382adc029179ce" + integrity sha512-VWU0/zXzVbeJNXvME/5EmLuEj2TauvoaTz6aFYK1Z92JCBlDlZ3Gu0tuGR42kpW1754ywTs+QB0g5TP0oj9Zaw== + entities@^1.1.1, entities@~1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56" @@ -6169,16 +6061,7 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2: dependencies: homedir-polyfill "^1.0.1" -express-hbs@^1.0.2: - version "1.0.4" - resolved "https://registry.yarnpkg.com/express-hbs/-/express-hbs-1.0.4.tgz#c4480d6e8a9f8c23500d3b1a1394f17eae451786" - integrity sha1-xEgNboqfjCNQDTsaE5Txfq5FF4Y= - dependencies: - handlebars "4.0.6" - js-beautify "1.6.8" - readdirp "2.1.0" - -express@^4.10.7, express@^4.14.0, express@^4.16.3: +express@^4.10.7, express@^4.16.3: version "4.16.4" resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e" integrity sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg== @@ -6214,13 +6097,6 @@ express@^4.10.7, express@^4.14.0, express@^4.16.3: utils-merge "1.0.1" vary "~1.1.2" -extend-shallow@^1.1.2: - version "1.1.4" - resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071" - integrity sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE= - dependencies: - kind-of "^1.1.0" - extend-shallow@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f" @@ -6300,16 +6176,6 @@ faker@^3.0.0: resolved "https://registry.yarnpkg.com/faker/-/faker-3.1.0.tgz#0f908faf4e6ec02524e54a57e432c5c013e08c9f" integrity sha1-D5CPr05uwCUk5UpX5DLFwBPgjJ8= -fancy-log@^1.3.2: - version "1.3.3" - resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7" - integrity sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw== - dependencies: - ansi-gray "^0.1.1" - color-support "^1.1.3" - parse-node-version "^1.0.0" - time-stamp "^1.0.0" - fast-deep-equal@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614" @@ -6451,11 +6317,6 @@ find-index@^1.1.0: resolved "https://registry.yarnpkg.com/find-index/-/find-index-1.1.0.tgz#53007c79cd30040d6816d79458e8837d5c5705ef" integrity sha1-UwB8ec0wBA1oFteUWOiDfVxXBe8= -find-root@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" - integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== - find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -6652,15 +6513,6 @@ fs-extra@^0.30.0: path-is-absolute "^1.0.0" rimraf "^2.2.8" -fs-extra@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291" - integrity sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE= - dependencies: - graceful-fs "^4.1.2" - jsonfile "^3.0.0" - universalify "^0.1.0" - fs-extra@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd" @@ -6710,6 +6562,16 @@ fs-tree-diff@^0.5.2, fs-tree-diff@^0.5.3, fs-tree-diff@^0.5.4, fs-tree-diff@^0.5 path-posix "^1.0.0" symlink-or-copy "^1.1.8" +fs-tree-diff@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/fs-tree-diff/-/fs-tree-diff-1.0.2.tgz#0e2931733a85b55feb3472c0b89a20b0c03ac0de" + integrity sha512-Zro2ACaPVDgVOx9+s5s5AfPlAD0kMJdbwGvTGF6KC1SjxjiGWxJvV4mUTDkFVSy3OUw2C/f1qpdjF81hGqSBAw== + dependencies: + heimdalljs-logger "^0.1.7" + object-assign "^4.1.0" + path-posix "^1.0.0" + symlink-or-copy "^1.1.8" + fs-updater@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/fs-updater/-/fs-updater-1.0.4.tgz#2329980f99ae9176e9a0e84f7637538a182ce63b" @@ -6812,64 +6674,6 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" -ghost-ignition@^2.7.0: - version "2.9.6" - resolved "https://registry.yarnpkg.com/ghost-ignition/-/ghost-ignition-2.9.6.tgz#cc8358f0a356bae490e5abeca3c3bda8383352fe" - integrity sha512-4C/z6PZOxp8xjqcHR+QqYBjt0T7IRdfUwHcN86gKNXMhybaWwsH7JDyfnxLfgDfQDunx7wTHmFiSo3UT//f7MQ== - dependencies: - bunyan "1.8.12" - bunyan-loggly "^1.3.1" - caller "1.0.1" - debug "^2.6.9" - find-root "1.1.0" - fs-extra "^3.0.1" - json-stringify-safe "^5.0.1" - lodash "^4.16.4" - moment "^2.15.2" - nconf "^0.10.0" - prettyjson "^1.1.3" - uuid "^3.0.0" - -ghost-spirit@0.0.50: - version "0.0.50" - resolved "https://registry.yarnpkg.com/ghost-spirit/-/ghost-spirit-0.0.50.tgz#d880226dff7be3feef96905e486eee21ad3bd6c4" - integrity sha512-Law87t/V/I8wve28gqrBHcOiT0mB9K0gNqwKKo15HIR9PFWX8Kxyru/NfmWJi5RcjEukpnd7BWLap9iYGc74mg== - dependencies: - autoprefixer "8.2.0" - bluebird "^3.4.6" - connect-slashes "^1.3.1" - cssnano "^4.0.0-rc.2" - express "^4.14.0" - express-hbs "^1.0.2" - ghost-ignition "^2.7.0" - gulp-postcss "7.0.1" - lodash "^4.15.0" - postcss-color-mod-function "2.4.2" - postcss-custom-media "6.0.0" - postcss-custom-properties "7.0.0" - postcss-easy-import "3.0.0" - postcss-prefix-selector "1.6.0" - -ghost-spirit@>=0.0.18: - version "0.0.49" - resolved "https://registry.yarnpkg.com/ghost-spirit/-/ghost-spirit-0.0.49.tgz#e806f896803b0a31976060ad6f656d333ebeb7dd" - integrity sha512-gmbPXYenZ1BpeI/2+pw7RJCXOAduUxNu8eXl2b0YA/5oU8mbtJtVoitF93NJ/C4CvrJ3E0Q1z4li30TupmmPgQ== - dependencies: - autoprefixer "8.2.0" - bluebird "^3.4.6" - connect-slashes "^1.3.1" - cssnano "^4.0.0-rc.2" - express "^4.14.0" - express-hbs "^1.0.2" - ghost-ignition "^2.7.0" - gulp-postcss "7.0.1" - lodash "^4.15.0" - postcss-color-mod-function "2.4.2" - postcss-custom-media "6.0.0" - postcss-custom-properties "7.0.0" - postcss-easy-import "3.0.0" - postcss-prefix-selector "1.6.0" - git-repo-info@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/git-repo-info/-/git-repo-info-1.4.1.tgz#2a072823254aaf62fcf0766007d7b6651bd41943" @@ -6941,17 +6745,6 @@ glob@^5.0.10, glob@^5.0.15, glob@~5.0.0: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^6.0.1: - version "6.0.4" - resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22" - integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI= - dependencies: - inflight "^1.0.4" - inherits "2" - minimatch "2 || 3" - once "^1.3.0" - path-is-absolute "^1.0.0" - glob@~7.0.0: version "7.0.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a" @@ -7124,28 +6917,6 @@ grunt@1.0.3: path-is-absolute "~1.0.0" rimraf "~2.6.2" -gulp-postcss@7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-7.0.1.tgz#3f1c36db1197140c399c252ddff339129638e395" - integrity sha1-Pxw22xGXFAw5nCUt3/M5EpY445U= - dependencies: - fancy-log "^1.3.2" - plugin-error "^0.1.2" - postcss "^6.0.0" - postcss-load-config "^1.2.0" - vinyl-sourcemaps-apply "^0.2.1" - -handlebars@4.0.6: - version "4.0.6" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7" - integrity sha1-LORISFBTf5yXqAJtU5m5NcTtTtc= - dependencies: - async "^1.4.0" - optimist "^0.6.1" - source-map "^0.4.4" - optionalDependencies: - uglify-js "^2.6" - handlebars@^4.0.1, handlebars@^4.0.11, handlebars@^4.0.4: version "4.0.12" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.12.tgz#2c15c8a96d46da5e266700518ba8cb8d919d5bc5" @@ -7476,7 +7247,7 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= -include-path-searcher@0.1.0: +include-path-searcher@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/include-path-searcher/-/include-path-searcher-0.1.0.tgz#c0cf2ddfa164fb2eae07bc7ca43a7f191cb4d7bd" integrity sha1-wM8t36Fk+y6uB7x8pDp/GRy0170= @@ -7521,7 +7292,7 @@ inherits@2.0.1: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1" integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE= -ini@^1.3.0, ini@^1.3.4, ini@~1.3.0: +ini@^1.3.4, ini@~1.3.0: version "1.3.5" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== @@ -7999,21 +7770,6 @@ jquery@^3.3.1: resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca" integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg== -js-base64@^2.1.9: - version "2.5.0" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e" - integrity sha512-wlEBIZ5LP8usDylWbDNhKPEFVFdI5hCHpnVoT/Ysvoi/PRhJENm/Rlh9TvjYB38HFfKZN7OzEbRjmjvLkFw11g== - -js-beautify@1.6.8: - version "1.6.8" - resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.6.8.tgz#da1146d34431145309c89be7f69ed16e8e0ff07e" - integrity sha1-2hFG00QxFFMJyJvn9p7Rbo4P8H4= - dependencies: - config-chain "~1.1.5" - editorconfig "^0.13.2" - mkdirp "~0.5.0" - nopt "~3.0.1" - js-levenshtein@^1.1.3: version "1.1.5" resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.5.tgz#57e4b1b5cc35e6d2721f118bd5245b36ac56b253" @@ -8039,7 +7795,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@3.x, js-yaml@^3.11.0, js-yaml@^3.12.0, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.4.3, js-yaml@^3.9.0, js-yaml@^3.9.1: +js-yaml@3.x, js-yaml@^3.11.0, js-yaml@^3.12.0, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.9.0, js-yaml@^3.9.1: version "3.12.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600" integrity sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA== @@ -8152,7 +7908,7 @@ json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1: dependencies: jsonify "~0.0.0" -json-stringify-safe@5.0.x, json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1: +json-stringify-safe@~5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= @@ -8188,13 +7944,6 @@ jsonfile@^2.1.0: optionalDependencies: graceful-fs "^4.1.6" -jsonfile@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66" - integrity sha1-pezG9l9T9mLEQVx2daAzHQmS7GY= - optionalDependencies: - graceful-fs "^4.1.6" - jsonfile@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" @@ -8226,11 +7975,6 @@ just-extend@^4.0.2: version "1.6.3" resolved "https://github.com/madrobby/keymaster.git#f8f43ddafad663b505dc0908e72853bcf8daea49" -kind-of@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44" - integrity sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ= - kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0: version "3.2.2" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64" @@ -8862,7 +8606,7 @@ lodash@^3.10.0, lodash@^3.9.3: resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y= -lodash@^4.11.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.10, lodash@~4.17.5: +lodash@^4.11.1, lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.10, lodash@~4.17.5: version "4.17.11" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== @@ -8919,13 +8663,6 @@ lru-cache@2: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952" integrity sha1-bUUk6LlV+V1PW1iFHOId1y+06VI= -lru-cache@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-3.2.0.tgz#71789b3b7f5399bec8565dda38aa30d2a097efee" - integrity sha1-cXibO39Tmb7IVl3aOKow0qCX7+4= - dependencies: - pseudomap "^1.0.1" - lru-cache@^4.0.1: version "4.1.5" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" @@ -9052,6 +8789,13 @@ matcher-collection@^1.0.0, matcher-collection@^1.0.4, matcher-collection@^1.0.5: dependencies: minimatch "^3.0.2" +matcher-collection@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/matcher-collection/-/matcher-collection-1.1.2.tgz#1076f506f10ca85897b53d14ef54f90a5c426838" + integrity sha512-YQ/teqaOIIfUHedRam08PB3NK7Mjct6BvzRnJmpGDm8uFXpNr1sbY4yuflI5JcEs6COpYA0FpRQhSDBf1tT95g== + dependencies: + minimatch "^3.0.2" + math-random@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac" @@ -9389,7 +9133,7 @@ moment-timezone@^0.5.13: dependencies: moment ">= 2.9.0" -"moment@>= 2.9.0", moment@^2.10.6, moment@^2.15.2, moment@^2.18.1, moment@^2.19.3: +"moment@>= 2.9.0", moment@^2.19.3: version "2.23.0" resolved "https://registry.yarnpkg.com/moment/-/moment-2.23.0.tgz#759ea491ac97d54bac5ad776996e2a58cc1bc225" integrity sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA== @@ -9452,15 +9196,6 @@ mute-stream@0.0.7: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab" integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s= -mv@~2: - version "2.1.1" - resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2" - integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI= - dependencies: - mkdirp "~0.5.1" - ncp "~2.0.0" - rimraf "~2.4.0" - najax@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/najax/-/najax-1.0.4.tgz#63fd8dbf15d18f24dc895b3a16fec66c136b8084" @@ -9470,7 +9205,7 @@ najax@^1.0.3: lodash.defaultsdeep "^4.6.0" qs "^6.2.0" -nan@^2.10.0, nan@^2.9.2: +nan@^2.9.2: version "2.12.1" resolved "https://registry.yarnpkg.com/nan/-/nan-2.12.1.tgz#7b1aa193e9aa86057e3c7bbd0ac448e770925552" integrity sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw== @@ -9497,21 +9232,6 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -nconf@^0.10.0: - version "0.10.0" - resolved "https://registry.yarnpkg.com/nconf/-/nconf-0.10.0.tgz#da1285ee95d0a922ca6cee75adcf861f48205ad2" - integrity sha512-fKiXMQrpP7CYWJQzKkPPx9hPgmq+YLDyxcG9N8RpiE9FoCkCbzD0NyW0YhE3xn3Aupe7nnDeIx4PFzYehpHT9Q== - dependencies: - async "^1.4.0" - ini "^1.3.0" - secure-keys "^1.0.0" - yargs "^3.19.0" - -ncp@~2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3" - integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M= - needle@^2.2.1: version "2.2.4" resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e" @@ -9605,15 +9325,6 @@ node-libs-browser@^2.0.0: util "^0.10.3" vm-browserify "0.0.4" -node-loggly-bulk@^2.2.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/node-loggly-bulk/-/node-loggly-bulk-2.2.4.tgz#bdd8638d97c43ecf1e1831ca98b250968fa6dee9" - integrity sha512-DfhtsDfkSBU6Dp1zvK+H1MgHRcA2yb4z07ctyA6uo+bNwKtv1exhohN910zcWNkdSYq1TImCq+O+3bOTuYHvmQ== - dependencies: - json-stringify-safe "5.0.x" - moment "^2.18.1" - request ">=2.76.0 <3.0.0" - node-modules-path@^1.0.0, node-modules-path@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/node-modules-path/-/node-modules-path-1.0.2.tgz#e3acede9b7baf4bc336e3496b58e5b40d517056e" @@ -9652,7 +9363,14 @@ node-releases@^1.1.3: dependencies: semver "^5.3.0" -nopt@3.x, nopt@^3.0.6, nopt@~3.0.1, nopt@~3.0.6: +node-releases@^1.1.8: + version "1.1.8" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.8.tgz#32a63fff63c5e51b7e0f540ac95947d220fc6862" + integrity sha512-gQm+K9mGCiT/NXHy+V/ZZS1N/LOaGGqRAAJJs3X9Ah1g+CIbRcBgNyoNYQ+SEtcyAtB9KqDruu+fF7nWjsqRaA== + dependencies: + semver "^5.3.0" + +nopt@3.x, nopt@^3.0.6, nopt@~3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k= @@ -9771,7 +9489,7 @@ oauth-sign@~0.9.0: resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== -object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0: +object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= @@ -10045,11 +9763,6 @@ parse-ms@^1.0.0: resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-1.0.1.tgz#56346d4749d78f23430ca0c713850aef91aa361d" integrity sha1-VjRtR0nXjyNDDKDHE4UK75GqNh0= -parse-node-version@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.0.tgz#33d9aa8920dcc3c0d33658ec18ce237009a56d53" - integrity sha512-02GTVHD1u0nWc20n2G7WX/PgdhNFG04j5fi1OkaJzPWLTcf6vh6229Lta1wTmXG/7Dg42tCssgkccVt7qvd8Kg== - parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" @@ -10242,17 +9955,6 @@ pkg-up@^2.0.0: dependencies: find-up "^2.1.0" -plugin-error@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace" - integrity sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4= - dependencies: - ansi-cyan "^0.1.1" - ansi-red "^0.1.1" - arr-diff "^1.0.1" - arr-union "^2.0.1" - extend-shallow "^1.1.2" - pluralize@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777" @@ -10277,7 +9979,7 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= -postcss-calc@^7.0.0: +postcss-calc@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436" integrity sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ== @@ -10287,19 +9989,19 @@ postcss-calc@^7.0.0: postcss-selector-parser "^5.0.0-rc.4" postcss-value-parser "^3.3.1" -postcss-color-mod-function@2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-2.4.2.tgz#bdf408f152bc3201517a4c38b7eb5cd2996114fb" - integrity sha512-j9RM33ybsEJUvIc22Y5I4ucvSJVHMliiW0I34JDLV0gVdvCo7/Y+zW6QMBANj+M4VZJLmyGz2mafIK4Tb5GVyg== +postcss-color-mod-function@3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d" + integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ== dependencies: "@csstools/convert-colors" "^1.4.0" - postcss "^6.0.19" - postcss-values-parser "^1.3.2" + postcss "^7.0.2" + postcss-values-parser "^2.0.0" -postcss-colormin@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.2.tgz#93cd1fa11280008696887db1a528048b18e7ed99" - integrity sha512-1QJc2coIehnVFsz0otges8kQLsryi4lo19WD+U5xCWvXd0uw/Z+KKYnbiNDCnO9GP+PvErPHCG0jNvWTngk9Rw== +postcss-colormin@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381" + integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw== dependencies: browserslist "^4.0.0" color "^3.0.0" @@ -10315,25 +10017,25 @@ postcss-convert-values@^4.0.1: postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-custom-media@6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737" - integrity sha1-vlMnhBEOyylQRPtTlaGABushpzc= +postcss-custom-media@7.0.7: + version "7.0.7" + resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.7.tgz#bbc698ed3089ded61aad0f5bfb1fb48bf6969e73" + integrity sha512-bWPCdZKdH60wKOTG4HKEgxWnZVjAIVNOJDvi3lkuTa90xo/K0YHa2ZnlKLC5e2qF8qCcMQXt0yzQITBp8d0OFA== dependencies: - postcss "^6.0.1" + postcss "^7.0.5" -postcss-custom-properties@7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-7.0.0.tgz#24dc4fbe6d6ed550ea4fd3b11204660e9ffa3b33" - integrity sha512-dl/CNaM6z2RBa0vZZqsV6Hunj4HD6Spu7FcAkiVp5B2tgm6xReKKYzI7x7QNx3wTMBNj5v+ylfVcQGMW4xdkHw== +postcss-custom-properties@8.0.9: + version "8.0.9" + resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.9.tgz#8943870528a6eae4c8e8d285b6ccc9fd1f97e69c" + integrity sha512-/Lbn5GP2JkKhgUO2elMs4NnbUJcvHX4AaF5nuJDaNkd2chYW1KA5qtOGGgdkBEWcXtKSQfHXzT7C6grEVyb13w== dependencies: - balanced-match "^1.0.0" - postcss "^6.0.18" + postcss "^7.0.5" + postcss-values-parser "^2.0.0" -postcss-discard-comments@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.1.tgz#30697735b0c476852a7a11050eb84387a67ef55d" - integrity sha512-Ay+rZu1Sz6g8IdzRjUgG2NafSNpp2MSMOQUb+9kkzzzP+kh07fP0yNbhtFejURnyVXSX3FYy2nVNW1QTnNjgBQ== +postcss-discard-comments@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033" + integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg== dependencies: postcss "^7.0.0" @@ -10383,46 +10085,20 @@ postcss-import@^10.0.0: read-cache "^1.0.0" resolve "^1.1.7" -postcss-load-config@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a" - integrity sha1-U56a/J3chiASHr+djDZz4M5Q0oo= - dependencies: - cosmiconfig "^2.1.0" - object-assign "^4.1.0" - postcss-load-options "^1.2.0" - postcss-load-plugins "^2.3.0" - -postcss-load-options@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c" - integrity sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw= - dependencies: - cosmiconfig "^2.1.0" - object-assign "^4.1.0" - -postcss-load-plugins@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92" - integrity sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI= - dependencies: - cosmiconfig "^2.1.1" - object-assign "^4.1.0" - -postcss-merge-longhand@^4.0.10: - version "4.0.10" - resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.10.tgz#c4d63ab57bdc054ab4067ab075d488c8c2978380" - integrity sha512-hME10s6CSjm9nlVIcO1ukR7Jr5RisTaaC1y83jWCivpuBtPohA3pZE7cGTIVSYjXvLnXozHTiVOkG4dnnl756g== +postcss-merge-longhand@^4.0.11: + version "4.0.11" + resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24" + integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw== dependencies: css-color-names "0.0.4" postcss "^7.0.0" postcss-value-parser "^3.0.0" stylehacks "^4.0.0" -postcss-merge-rules@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.2.tgz#2be44401bf19856f27f32b8b12c0df5af1b88e74" - integrity sha512-UiuXwCCJtQy9tAIxsnurfF0mrNHKc4NnNx6NxqmzNNjXpQwLSukUxELHTRF0Rg1pAmcoKLih8PwvZbiordchag== +postcss-merge-rules@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650" + integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ== dependencies: browserslist "^4.0.0" caniuse-api "^3.0.0" @@ -10439,20 +10115,20 @@ postcss-minify-font-values@^4.0.2: postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-minify-gradients@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.1.tgz#6da95c6e92a809f956bb76bf0c04494953e1a7dd" - integrity sha512-pySEW3E6Ly5mHm18rekbWiAjVi/Wj8KKt2vwSfVFAWdW6wOIekgqxKxLU7vJfb107o3FDNPkaYFCxGAJBFyogA== +postcss-minify-gradients@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471" + integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q== dependencies: cssnano-util-get-arguments "^4.0.0" is-color-stop "^1.0.0" postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-minify-params@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.1.tgz#5b2e2d0264dd645ef5d68f8fec0d4c38c1cf93d2" - integrity sha512-h4W0FEMEzBLxpxIVelRtMheskOKKp52ND6rJv+nBS33G1twu2tCyurYj/YtgU76+UDCvWeNs0hs8HFAWE2OUFg== +postcss-minify-params@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874" + integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg== dependencies: alphanum-sort "^1.0.0" browserslist "^4.0.0" @@ -10461,10 +10137,10 @@ postcss-minify-params@^4.0.1: postcss-value-parser "^3.0.0" uniqs "^2.0.0" -postcss-minify-selectors@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.1.tgz#a891c197977cc37abf60b3ea06b84248b1c1e9cd" - integrity sha512-8+plQkomve3G+CodLCgbhAKrb5lekAnLYuL1d7Nz+/7RANpBEVdgBkPNwljfSKvZ9xkkZTZITd04KP+zeJTJqg== +postcss-minify-selectors@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8" + integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g== dependencies: alphanum-sort "^1.0.0" has "^1.0.0" @@ -10478,48 +10154,48 @@ postcss-normalize-charset@^4.0.1: dependencies: postcss "^7.0.0" -postcss-normalize-display-values@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.1.tgz#d9a83d47c716e8a980f22f632c8b0458cfb48a4c" - integrity sha512-R5mC4vaDdvsrku96yXP7zak+O3Mm9Y8IslUobk7IMP+u/g+lXvcN4jngmHY5zeJnrQvE13dfAg5ViU05ZFDwdg== +postcss-normalize-display-values@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a" + integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ== dependencies: cssnano-util-get-match "^4.0.0" postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-normalize-positions@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.1.tgz#ee2d4b67818c961964c6be09d179894b94fd6ba1" - integrity sha512-GNoOaLRBM0gvH+ZRb2vKCIujzz4aclli64MBwDuYGU2EY53LwiP7MxOZGE46UGtotrSnmarPPZ69l2S/uxdaWA== +postcss-normalize-positions@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f" + integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA== dependencies: cssnano-util-get-arguments "^4.0.0" has "^1.0.0" postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-normalize-repeat-style@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.1.tgz#5293f234b94d7669a9f805495d35b82a581c50e5" - integrity sha512-fFHPGIjBUyUiswY2rd9rsFcC0t3oRta4wxE1h3lpwfQZwFeFjXFSiDtdJ7APCmHQOnUZnqYBADNRPKPwFAONgA== +postcss-normalize-repeat-style@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c" + integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q== dependencies: cssnano-util-get-arguments "^4.0.0" cssnano-util-get-match "^4.0.0" postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-normalize-string@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.1.tgz#23c5030c2cc24175f66c914fa5199e2e3c10fef3" - integrity sha512-IJoexFTkAvAq5UZVxWXAGE0yLoNN/012v7TQh5nDo6imZJl2Fwgbhy3J2qnIoaDBrtUP0H7JrXlX1jjn2YcvCQ== +postcss-normalize-string@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c" + integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA== dependencies: has "^1.0.0" postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-normalize-timing-functions@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.1.tgz#8be83e0b9cb3ff2d1abddee032a49108f05f95d7" - integrity sha512-1nOtk7ze36+63ONWD8RCaRDYsnzorrj+Q6fxkQV+mlY5+471Qx9kspqv0O/qQNMeApg8KNrRf496zHwJ3tBZ7w== +postcss-normalize-timing-functions@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9" + integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A== dependencies: cssnano-util-get-match "^4.0.0" postcss "^7.0.0" @@ -10544,44 +10220,37 @@ postcss-normalize-url@^4.0.1: postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-normalize-whitespace@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.1.tgz#d14cb639b61238418ac8bc8d3b7bdd65fc86575e" - integrity sha512-U8MBODMB2L+nStzOk6VvWWjZgi5kQNShCyjRhMT3s+W9Jw93yIjOnrEkKYD3Ul7ChWbEcjDWmXq0qOL9MIAnAw== +postcss-normalize-whitespace@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82" + integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA== dependencies: postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-ordered-values@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.1.tgz#2e3b432ef3e489b18333aeca1f1295eb89be9fc2" - integrity sha512-PeJiLgJWPzkVF8JuKSBcylaU+hDJ/TX3zqAMIjlghgn1JBi6QwQaDZoDIlqWRcCAI8SxKrt3FCPSRmOgKRB97Q== +postcss-ordered-values@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee" + integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw== dependencies: cssnano-util-get-arguments "^4.0.0" postcss "^7.0.0" postcss-value-parser "^3.0.0" -postcss-prefix-selector@1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/postcss-prefix-selector/-/postcss-prefix-selector-1.6.0.tgz#b495949d639c63147145648326853216f3c10900" - integrity sha1-tJWUnWOcYxRxRWSDJoUyFvPBCQA= - dependencies: - postcss "^5.0.8" - -postcss-reduce-initial@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.2.tgz#bac8e325d67510ee01fa460676dc8ea9e3b40f15" - integrity sha512-epUiC39NonKUKG+P3eAOKKZtm5OtAtQJL7Ye0CBN1f+UQTHzqotudp+hki7zxXm7tT0ZAKDMBj1uihpPjP25ug== +postcss-reduce-initial@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df" + integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA== dependencies: browserslist "^4.0.0" caniuse-api "^3.0.0" has "^1.0.0" postcss "^7.0.0" -postcss-reduce-transforms@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.1.tgz#8600d5553bdd3ad640f43bff81eb52f8760d4561" - integrity sha512-sZVr3QlGs0pjh6JAIe6DzWvBaqYw05V1t3d9Tp+VnFRT5j+rsqoWsysh/iSD7YNsULjq9IAylCznIwVd5oU/zA== +postcss-reduce-transforms@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29" + integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg== dependencies: cssnano-util-get-match "^4.0.0" has "^1.0.0" @@ -10606,10 +10275,10 @@ postcss-selector-parser@^5.0.0-rc.4: indexes-of "^1.0.1" uniq "^1.0.1" -postcss-svgo@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.1.tgz#5628cdb38f015de6b588ce6d0bf0724b492b581d" - integrity sha512-YD5uIk5NDRySy0hcI+ZJHwqemv2WiqqzDgtvgMzO8EGSkK5aONyX8HMVFRFJSdO8wUWTuisUFn/d7yRRbBr5Qw== +postcss-svgo@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258" + integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw== dependencies: is-svg "^3.0.0" postcss "^7.0.0" @@ -10630,44 +10299,16 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== -postcss-values-parser@^1.3.2: - version "1.5.0" - resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047" - integrity sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ== +postcss-values-parser@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f" + integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg== dependencies: flatten "^1.0.2" indexes-of "^1.0.1" uniq "^1.0.1" -postcss@6.0.16: - version "6.0.16" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146" - integrity sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA== - dependencies: - chalk "^2.3.0" - source-map "^0.6.1" - supports-color "^5.1.0" - -postcss@6.0.22: - version "6.0.22" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3" - integrity sha512-Toc9lLoUASwGqxBSJGTVcOQiDqjK+Z2XlWBg+IgYwQMY9vA2f7iMpXVc1GpPcfTSyM5lkxNo0oDwDRO+wm7XHA== - dependencies: - chalk "^2.4.1" - source-map "^0.6.1" - supports-color "^5.4.0" - -postcss@^5.0.8: - version "5.2.18" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" - integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== - dependencies: - chalk "^1.1.3" - js-base64 "^2.1.9" - source-map "^0.5.6" - supports-color "^3.2.3" - -postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.18, postcss@^6.0.19, postcss@^6.0.20: +postcss@^6.0.1, postcss@^6.0.11: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== @@ -10676,14 +10317,14 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.18, postcss@^6.0.1 source-map "^0.6.1" supports-color "^5.4.0" -postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.5: - version "7.0.8" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.8.tgz#2a3c5f2bdd00240cd0d0901fd998347c93d36696" - integrity sha512-WudsIzuTKRw9IInRTPBgVXJ7DKR26HT09Rxp0g3w0Fqh3TUtYICcUmvC0xURj04o3vdcDtnjCAUCECg/p341iQ== +postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5: + version "7.0.14" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5" + integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg== dependencies: chalk "^2.4.2" source-map "^0.6.1" - supports-color "^6.0.0" + supports-color "^6.1.0" prelude-ls@~1.1.2: version "1.1.2" @@ -10720,14 +10361,6 @@ pretty-ms@^3.1.0: dependencies: parse-ms "^1.0.0" -prettyjson@^1.1.3: - version "1.2.1" - resolved "https://registry.yarnpkg.com/prettyjson/-/prettyjson-1.2.1.tgz#fcffab41d19cab4dfae5e575e64246619b12d289" - integrity sha1-/P+rQdGcq0365eV15kJGYZsS0ok= - dependencies: - colors "^1.1.2" - minimist "^1.2.0" - printf@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.1.tgz#e0466788260859ed153006dc6867f09ddf240cf3" @@ -10772,11 +10405,6 @@ promise-map-series@^0.2.1, promise-map-series@^0.2.3: dependencies: rsvp "^3.0.14" -proto-list@~1.2.1: - version "1.2.4" - resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" - integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk= - proxy-addr@~2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93" @@ -10790,7 +10418,7 @@ prr@~1.0.1: resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY= -pseudomap@^1.0.1, pseudomap@^1.0.2: +pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM= @@ -11004,16 +10632,6 @@ readable-stream@~1.0.2: isarray "0.0.1" string_decoder "~0.10.x" -readdirp@2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78" - integrity sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg= - dependencies: - graceful-fs "^4.1.2" - minimatch "^3.0.2" - readable-stream "^2.0.2" - set-immediate-shim "^1.0.1" - readdirp@^2.0.0: version "2.2.1" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525" @@ -11254,7 +10872,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.0" tough-cookie ">=2.3.3" -"request@>=2.76.0 <3.0.0", request@^2.72.0, request@^2.85.0, request@^2.87.0: +request@^2.72.0, request@^2.85.0, request@^2.87.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -11280,11 +10898,6 @@ request-promise-native@^1.0.5: tunnel-agent "^0.6.0" uuid "^3.3.2" -require-from-string@^1.1.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" - integrity sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg= - require-relative@^0.8.7: version "0.8.7" resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de" @@ -11393,13 +11006,6 @@ rimraf@~2.2.6: resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582" integrity sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI= -rimraf@~2.4.0: - version "2.4.5" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da" - integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto= - dependencies: - glob "^6.0.1" - ripemd160@^2.0.0, ripemd160@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c" @@ -11557,11 +11163,6 @@ safe-json-parse@~1.0.1: resolved "https://registry.yarnpkg.com/safe-json-parse/-/safe-json-parse-1.0.1.tgz#3e76723e38dfdda13c9b1d29a1e07ffee4b30b57" integrity sha1-PnZyPjjf3aE8mx0poeB//uSzC1c= -safe-json-stringify@~1: - version "1.2.0" - resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd" - integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg== - safe-regex@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e" @@ -11629,12 +11230,7 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" -secure-keys@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/secure-keys/-/secure-keys-1.0.0.tgz#f0c82d98a3b139a8776a8808050b824431087fca" - integrity sha1-8MgtmKOxOah3aogIBQuCRDEIf8o= - -"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0: +"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0: version "5.6.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004" integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg== @@ -11678,11 +11274,6 @@ set-blocking@~2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= -set-immediate-shim@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61" - integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E= - set-value@^0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1" @@ -11738,7 +11329,7 @@ shellwords@^0.1.1: resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b" integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww== -sigmund@^1.0.1, sigmund@~1.0.0: +sigmund@~1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590" integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA= @@ -11952,7 +11543,7 @@ source-map@0.1.32: dependencies: amdefine ">=0.0.4" -source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4: +source-map@0.4.x, source-map@^0.4.2: version "0.4.4" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" integrity sha1-66T12pwNyZneaAMti092FzZSA2s= @@ -11964,7 +11555,7 @@ source-map@0.5.6: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" integrity sha1-dc449SvwczxafwwRjYEzSiu19BI= -source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1: +source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= @@ -12258,9 +11849,9 @@ styled_string@0.0.1: integrity sha1-0ieCvYEpVFm8Tx3xjEutjpTdEko= stylehacks@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.1.tgz#3186595d047ab0df813d213e51c8b94e0b9010f2" - integrity sha512-TK5zEPeD9NyC1uPIdjikzsgWxdQQN/ry1X3d1iOz1UkYDCmcr928gWD1KHgyC27F50UnE0xCTrBOO1l6KR8M4w== + version "4.0.3" + resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" + integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g== dependencies: browserslist "^4.0.0" postcss "^7.0.0" @@ -12283,24 +11874,24 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^3.1.0, supports-color@^3.2.3: +supports-color@^3.1.0: version "3.2.3" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY= dependencies: has-flag "^1.0.0" -supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0: +supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== dependencies: has-flag "^3.0.0" -supports-color@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a" - integrity sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg== +supports-color@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3" + integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ== dependencies: has-flag "^3.0.0" @@ -12484,11 +12075,6 @@ through@^2.3.6, through@^2.3.8, through@~2.3.8: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= -time-stamp@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3" - integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM= - time-zone@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/time-zone/-/time-zone-1.0.0.tgz#99c5bf55958966af6d06d83bdf3800dc82faec5d" @@ -12723,16 +12309,6 @@ uc.micro@^1.0.1, uc.micro@^1.0.5: resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.5.tgz#0c65f15f815aa08b560a61ce8b4db7ffc3f45376" integrity sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg== -uglify-js@^2.6: - version "2.8.29" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" - integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0= - dependencies: - source-map "~0.5.1" - yargs "~3.10.0" - optionalDependencies: - uglify-to-browserify "~1.0.0" - uglify-js@^3.1.4: version "3.4.9" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3" @@ -12741,11 +12317,6 @@ uglify-js@^3.1.4: commander "~2.17.1" source-map "~0.6.1" -uglify-to-browserify@~1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" - integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc= - underscore.string@~3.3.4: version "3.3.5" resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023" @@ -12954,7 +12525,7 @@ uuid@^2.0.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho= -uuid@^3.0.0, uuid@^3.3.2: +uuid@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA== @@ -13003,13 +12574,6 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" -vinyl-sourcemaps-apply@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705" - integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU= - dependencies: - source-map "^0.5.1" - vlq@^0.2.2: version "0.2.3" resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26" @@ -13072,6 +12636,15 @@ walk-sync@^0.3.0, walk-sync@^0.3.1, walk-sync@^0.3.2, walk-sync@^0.3.3: ensure-posix-path "^1.0.0" matcher-collection "^1.0.0" +walk-sync@^1.0.0: + version "1.1.3" + resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-1.1.3.tgz#3b7b6468f068b5eba2278c931c57db3d39092969" + integrity sha512-23ivbET0Q/389y3EHpiIgxx881AS2mwdXA7iBqUDNSymoTPYb2jWlF3gkuuAP1iLgdNXmiHw/kZ/wZwrELU6Ag== + dependencies: + "@types/minimatch" "^3.0.3" + ensure-posix-path "^1.1.0" + matcher-collection "^1.1.1" + walker@~1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb" @@ -13224,12 +12797,7 @@ wide-align@^1.1.0: dependencies: string-width "^1.0.2 || 2" -window-size@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d" - integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0= - -window-size@^0.1.2, window-size@^0.1.4: +window-size@^0.1.2: version "0.1.4" resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876" integrity sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY= @@ -13263,14 +12831,6 @@ workerpool@^2.3.0, workerpool@^2.3.1: dependencies: object-assign "4.1.1" -wrap-ansi@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85" - integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU= - dependencies: - string-width "^1.0.1" - strip-ansi "^3.0.1" - wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" @@ -13366,29 +12926,6 @@ yargs-parser@^8.0.0: dependencies: camelcase "^4.1.0" -yargs@^3.19.0: - version "3.32.0" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995" - integrity sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU= - dependencies: - camelcase "^2.0.1" - cliui "^3.0.3" - decamelize "^1.1.1" - os-locale "^1.4.0" - string-width "^1.0.1" - window-size "^0.1.4" - y18n "^3.2.0" - -yargs@~3.10.0: - version "3.10.0" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1" - integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E= - dependencies: - camelcase "^1.0.2" - cliui "^2.1.0" - decamelize "^1.0.0" - window-size "0.1.0" - yargs@~3.27.0: version "3.27.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.27.0.tgz#21205469316e939131d59f2da0c6d7f98221ea40"