diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ebda126..18196169 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,14 @@ Future Todo List - Make typography and utility classes silent extenders (so that they can be extended by components without importing all utility classes). - Update to use latest v2 PIE design tokens +v9.3.0 +------------------------------ +*August 25, 2022* + +### Fixed +- `spacing` & `zIndex` references. + + v9.2.0 ------------------------------ *August 24, 2022* diff --git a/package.json b/package.json index 19f6fd94..294fee8a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@justeat/fozzie", "title": "Fozzie – Just Eat UI Web Framework", "description": "UI Web Framework for the Just Eat Global Platform", - "version": "9.2.0", + "version": "9.3.0", "main": "dist/js/index.js", "files": [ "dist/js", @@ -42,12 +42,12 @@ "@babel/eslint-parser": "7.18.9", "@babel/preset-env": "7.18.10", "@justeat/browserslist-config-fozzie": "2.0.0", + "caniuse-lite": "1.0.30001374", "@justeat/eslint-config-fozzie": "5.1.0", "@justeat/f-dom": "1.1.0", "@justeat/f-logger": "0.8.1", "@justeat/js-test-buddy": "0.4.1", "@justeat/stylelint-config-fozzie": "2.3.0", - "caniuse-lite": "1.0.30001374", "concurrently": "7.3.0", "coveralls": "3.1.1", "danger": "11.1.1", diff --git a/src/scss/base/_layout.scss b/src/scss/base/_layout.scss index e4b35af8..4543aa99 100644 --- a/src/scss/base/_layout.scss +++ b/src/scss/base/_layout.scss @@ -2,6 +2,7 @@ @use '../settings/variables' as v; @use '../settings/include-media' as *; @use '../tools/mixins/type'; +@use '../tools/functions/spacing' as spacing; @mixin layout() { /** @@ -68,14 +69,14 @@ } .l-innerContainer--verticalSpacing { - margin: spacing(f) 0; + margin: spacing.spacing(f) 0; @include media('>=mid') { - margin: spacing(g) auto spacing(h); + margin: spacing.spacing(g) auto spacing.spacing(h); } @include media('>=wide') { - margin: spacing(i) auto; + margin: spacing.spacing(i) auto; } } @@ -83,18 +84,18 @@ * Layout class for containers that contain content (such as T&cs and Privacy pages) */ .l-content { - padding-top: spacing(d); + padding-top: spacing.spacing(d); @include media('>mid') { - padding-top: spacing(f); + padding-top: spacing.spacing(f); } } .l-content-header { - margin: 0 0 spacing(d); + margin: 0 0 spacing.spacing(d); @include media('>mid') { - margin: spacing(d) 0 spacing(f); + margin: spacing.spacing(d) 0 spacing.spacing(f); } > h1 { diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss index 06d53a88..befc683e 100644 --- a/src/scss/base/_typography.scss +++ b/src/scss/base/_typography.scss @@ -1,6 +1,7 @@ @use '../settings/variables' as v; @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../tools/mixins/type'; +@use '../tools/functions/spacing' as spacing; @use '../settings/include-media' as *; @mixin typography() { @@ -49,7 +50,7 @@ */ p { @include type.font-size(body-l); - margin-top: spacing(d); + margin-top: spacing.spacing(d); margin-bottom: 0; } @@ -83,8 +84,8 @@ h1, .alpha { @include type.font-size(heading-xl, true, narrow); - margin-top: spacing(f); - margin-bottom: spacing(d); + margin-top: spacing.spacing(f); + margin-bottom: spacing.spacing(d); @include media('>mid') { @include type.font-size(heading-xl); @@ -125,14 +126,14 @@ // Only give these headings a margin-top if they are after other elements * + h2, * + .beta { - margin-top: spacing(f); + margin-top: spacing.spacing(f); } * + h3, * + .gamma, * + h4, * + .delta { - margin-top: spacing(d); + margin-top: spacing.spacing(d); } small { @@ -165,7 +166,7 @@ */ blockquote { padding-left: 10px; - margin: spacing(d); + margin: spacing.spacing(d); border-left: 4px solid lighten(#000, 80%); p { @@ -217,7 +218,7 @@ address { font-style: normal; - margin-top: spacing(d); + margin-top: spacing.spacing(d); margin-bottom: 0; } @@ -240,7 +241,7 @@ // Horizontal rules hr { - margin: spacing(d) 0; + margin: spacing.spacing(d) 0; border: 0; border-top: 1px solid dt.$color-divider-default; } diff --git a/src/scss/components/_alerts.scss b/src/scss/components/_alerts.scss index 3c243e37..c52b4581 100644 --- a/src/scss/components/_alerts.scss +++ b/src/scss/components/_alerts.scss @@ -1,5 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../tools/mixins/alerts'; +@use '../tools/functions/spacing' as spacing; @mixin alerts() { /** @@ -22,8 +23,8 @@ // ------------------------- .c-alert { - padding: spacing(); - margin-top: spacing(d); + padding: spacing.spacing(); + margin-top: spacing.spacing(d); border: 1px solid transparent; border-radius: $alert-border-radius; @@ -32,7 +33,7 @@ } & + * { - margin-top: spacing(d); + margin-top: spacing.spacing(d); } } diff --git a/src/scss/components/_breadcrumbs.scss b/src/scss/components/_breadcrumbs.scss index ae1a5aa0..6814145c 100644 --- a/src/scss/components/_breadcrumbs.scss +++ b/src/scss/components/_breadcrumbs.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/include-media' as *; @use '../tools/mixins/type'; +@use '../tools/functions/spacing' as spacing; @mixin breadcrumbs() { /** @@ -69,7 +70,7 @@ } .c-breadcrumb-item-icon { - margin: 0 spacing(b); + margin: 0 spacing.spacing(b); } .c-breadcrumb--transparent { @@ -100,7 +101,7 @@ background-color: $breadcrumb--compact-background; border-radius: $breadcrumb-border-radius; line-height: 2; - padding-right: spacing(d); + padding-right: spacing.spacing(d); .c-breadcrumb-item-icon { float: left; diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index 0b5704d9..23cc8bb0 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/include-media' as *; @use '../tools/mixins/truncate'; +@use '../tools/functions/spacing' as spacing; @mixin cards() { /** @@ -19,12 +20,12 @@ $card-bgColor--disabled : dt.$color-container-subtle; $card-tooltip-width : 10px; $card-arrow-bottom-position : 0; - $card-padding : spacing(d); + $card-padding : spacing.spacing(d); $card-radius : dt.$radius-rounded-c; $card-borderColor : dt.$color-border-default; $card-info-bgColor--active : dt.$color-support-warning-02; - $card-section-margin : spacing(f); - $card-section-margin--large : spacing(i); + $card-section-margin : spacing.spacing(f); + $card-section-margin--large : spacing.spacing(i); $card-section-highlight-backgroundColor : dt.$color-support-brand-02; $card-section-highlight-color : dt.$color-content-default; $card-section-collapsible-paddingRight : 60px; @@ -34,7 +35,7 @@ .c-card { background-color: $card-bgColor--active; display: block; - margin-bottom: spacing(); + margin-bottom: spacing.spacing(); padding: $card-padding; position: relative; @@ -72,29 +73,29 @@ .c-card--padBottom--belowMid { @include media('=mid') { border-top: solid 1px $card-borderColor; - margin-left: -#{spacing(d)}; - padding-left: spacing(e); + margin-left: -#{spacing.spacing(d)}; + padding-left: spacing.spacing(e); } } @@ -169,8 +170,8 @@ background-color: $card-section-highlight-backgroundColor; border-top: none; color: $card-section-highlight-color; - margin-top: spacing(d); - padding: spacing(a) spacing(); + margin-top: spacing.spacing(d); + padding: spacing.spacing(a) spacing.spacing(); + .c-card-section--highlight { margin-top: 1px; @@ -189,7 +190,7 @@ .c-card-section--collapsible { overflow: hidden; - padding-bottom: spacing(d); + padding-bottom: spacing.spacing(d); padding-right: $card-section-collapsible-paddingRight; position: relative; user-select: none; @@ -199,7 +200,7 @@ padding-right: $card-section-collapsible-paddingRight; &.c-card-section { - margin-bottom: spacing(d); + margin-bottom: spacing.spacing(d); &.has-noSpacing { margin-bottom: 0; @@ -213,13 +214,13 @@ } .c-card-section--collapsible--noPad { - margin-left: -#{spacing(f)}; - padding: 0 $card-section-collapsible-paddingRight 0 spacing(d); + margin-left: -#{spacing.spacing(f)}; + padding: 0 $card-section-collapsible-paddingRight 0 spacing.spacing(d); width: calc(100% + #{$card-section-margin--large}); @include media('>=mid') { - margin-left: -#{spacing(d)}; - padding: 0 $card-section-collapsible-paddingRight 0 spacing(e); + margin-left: -#{spacing.spacing(d)}; + padding: 0 $card-section-collapsible-paddingRight 0 spacing.spacing(e); width: calc(100% + #{$card-section-margin}); } } @@ -242,7 +243,7 @@ height: 6px; display: none; position: absolute; - right: spacing(d); + right: spacing.spacing(d); top: 22px; transform: rotate(180deg); transition: transform 0.4s; @@ -250,7 +251,7 @@ @include media('>=mid') { height: 8px; - right: spacing(e); + right: spacing.spacing(e); width: 14px; } @@ -266,7 +267,7 @@ right: 21px; @include media('>=mid') { - right: spacing(e); + right: spacing.spacing(e); } } } diff --git a/src/scss/components/_media-element.scss b/src/scss/components/_media-element.scss index ac6f6de4..9b06b753 100644 --- a/src/scss/components/_media-element.scss +++ b/src/scss/components/_media-element.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../tools/mixins/type'; @use '../settings/include-media' as *; +@use '../tools/functions/spacing' as spacing; @mixin mediaElement() { /** @@ -22,7 +23,7 @@ $mediaElement-img-borderRadius : dt.$radius-rounded-c; $mediaElement-infoLinkColor : dt.$color-content-link-distinct; $mediaElement-fontSize : body-l; - $mediaElement-spacing : spacing(d); + $mediaElement-spacing : spacing.spacing(d); // mediaElement module @@ -34,7 +35,7 @@ & > :not(:last-child) { @include media('>=mid') { - margin-right: spacing(b); + margin-right: spacing.spacing(b); } } } @@ -92,7 +93,7 @@ } @include media('>=mid') { - margin-top: spacing(b) / 4; + margin-top: spacing.spacing(b) / 4; } @include media('>=wide') { @@ -124,7 +125,7 @@ } .c-mediaElement-heading { - margin: spacing(h) 0 spacing(d); + margin: spacing.spacing(h) 0 spacing.spacing(d); } .c-mediaElement-content { @@ -133,12 +134,12 @@ .c-mediaElement--fullstack & { flex: auto; - margin-top: spacing(a); + margin-top: spacing.spacing(a); } .c-mediaElement--fullstack--negativeTop & { flex: auto; - margin-top: spacing(f); + margin-top: spacing.spacing(f); } // some content uses br for content shaping – get rid of it on mobile devices @@ -170,11 +171,12 @@ top: $mediaElement-spacing; @include media('=mid') { - margin-top: spacing(); + margin-top: spacing.spacing(); } } } } .c-appsBanner-buttons { - margin-top: spacing(e); + margin-top: spacing.spacing(e); } .c-appsBanner-appBtn { diff --git a/src/scss/components/optional/_content-header.scss b/src/scss/components/optional/_content-header.scss index ef9d8373..3a7053fe 100644 --- a/src/scss/components/optional/_content-header.scss +++ b/src/scss/components/optional/_content-header.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../tools/mixins/type'; @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; @mixin contentHeader() { /** @@ -18,14 +19,14 @@ */ .c-contentHeader { - padding-top: spacing(d); - padding-bottom: spacing(); + padding-top: spacing.spacing(d); + padding-bottom: spacing.spacing(); } .c-contentHeader-title { padding: 0; display: inline-block; - margin: 0 spacing(d) 0 0; + margin: 0 spacing.spacing(d) 0 0; font-weight: dt.$font-weight-regular; @include type.font-size(body-l, false); // TODO – this should be updated with a more semantic font alias when it's ported to fozzie-components repo } diff --git a/src/scss/components/optional/_content-title.scss b/src/scss/components/optional/_content-title.scss index 9b0f3cf3..d538a153 100644 --- a/src/scss/components/optional/_content-title.scss +++ b/src/scss/components/optional/_content-title.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/variables' as v; @use '../../tools/mixins/type'; +@use '../../tools/functions/spacing' as spacing; @mixin contentTitle() { /** @@ -21,12 +22,12 @@ width: 100%; display: flex; align-items: center; - margin: spacing(d) 0; + margin: spacing.spacing(d) 0; } .c-contentTitle-icon { width: 24px; - margin-right: spacing(); + margin-right: spacing.spacing(); } .c-contentTitle-text { diff --git a/src/scss/components/optional/_cookie-warning.scss b/src/scss/components/optional/_cookie-warning.scss index 39f2910b..eb9c50cf 100644 --- a/src/scss/components/optional/_cookie-warning.scss +++ b/src/scss/components/optional/_cookie-warning.scss @@ -1,5 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../tools/mixins/type'; +@use '../../tools/functions/spacing'; +@use '../../tools/functions/zIndex'; @mixin cookieWarning() { /** @@ -17,7 +19,7 @@ position: fixed; bottom: 0; width: 100%; - z-index: zIndex(high); + z-index: zIndex.zIndex(high); & p { @include type.font-size(caption, false); @@ -29,8 +31,8 @@ .c-cookieWarning-inner { margin: 0 auto; - padding: spacing(); - padding-right: spacing(e); + padding: spacing.spacing(); + padding-right: spacing.spacing(e); overflow: hidden; } diff --git a/src/scss/components/optional/_cuisines-widget.scss b/src/scss/components/optional/_cuisines-widget.scss index 7b0448b4..0cfc5207 100644 --- a/src/scss/components/optional/_cuisines-widget.scss +++ b/src/scss/components/optional/_cuisines-widget.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../tools/mixins/type'; @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; @mixin cuisinesWidget() { /** @@ -26,8 +27,8 @@ position: relative; background-color: $cuisinesWidget-defaultBackground; box-shadow: dt.$elevation-01; // token values for cards - margin-top: spacing(); - margin-bottom: spacing(); + margin-top: spacing.spacing(); + margin-bottom: spacing.spacing(); &:hover, &:focus { @@ -42,14 +43,14 @@ bottom: 0; left: 0; width: 100%; - padding: spacing(d) spacing(d) spacing(); + padding: spacing.spacing(d) spacing.spacing(d) spacing.spacing(); color: dt.$color-container-default; text-align: center; background-image: $cuisinesWidget-gradient; @include media('>=mid-wide') { @include type.font-size(heading-m, false); - padding: spacing(d); + padding: spacing.spacing(d); } } diff --git a/src/scss/components/optional/_fullscreen-pop-over.scss b/src/scss/components/optional/_fullscreen-pop-over.scss index 93356930..fcd75cec 100644 --- a/src/scss/components/optional/_fullscreen-pop-over.scss +++ b/src/scss/components/optional/_fullscreen-pop-over.scss @@ -1,5 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/zIndex' as zIndex; @mixin fullScreenPopOver() { /** @@ -18,7 +20,7 @@ $fullScreenPopOver-background : dt.$color-grey-10; $fullScreenPopOver-action-background : dt.$color-white; - $fullScreenPopOver-padding : spacing(d); + $fullScreenPopOver-padding : spacing.spacing(d); $fullScreenPopOver-border-color : dt.$color-grey-30; $fullScreenPopOver-shadow-color : rgba(dt.$color-black, 0.12); @@ -31,7 +33,7 @@ width: 100vw; position: fixed; overflow: hidden; - z-index: zIndex(high); + z-index: zIndex.zIndex(high); background: $fullScreenPopOver-background; transition: top 200ms ease, opacity 150ms ease; @@ -79,7 +81,7 @@ .c-fullScreenPopOver-header { top: 0; - z-index: zIndex(high); + z-index: zIndex.zIndex(high); box-shadow: dt.$elevation-03; // token value for sticky headers } @@ -120,7 +122,7 @@ height: 100%; overflow-x: hidden; overflow-y: scroll; - padding: spacing(d) 0; + padding: spacing.spacing(d) 0; -webkit-overflow-scrolling: touch; } } diff --git a/src/scss/components/optional/_listings-skeleton.scss b/src/scss/components/optional/_listings-skeleton.scss index 042afe36..2c5b1a3c 100644 --- a/src/scss/components/optional/_listings-skeleton.scss +++ b/src/scss/components/optional/_listings-skeleton.scss @@ -1,5 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; @mixin listingSkeleton() { /** @@ -20,8 +21,8 @@ position: relative; background: dt.$color-container-default; border-radius: dt.$radius-rounded-c; - padding: 85px spacing(d) spacing(d); - margin-bottom: spacing(d); + padding: 85px spacing.spacing(d) spacing.spacing(d); + margin-bottom: spacing.spacing(d); @include media('>mid') { padding-top: 73px; @@ -33,13 +34,13 @@ &:after { content: ''; position: absolute; - top: spacing(d); + top: spacing.spacing(d); @include anim(); } //Skeleton image &:before { - left: spacing(d); + left: spacing.spacing(d); height: 55px; width: 55px; } @@ -72,7 +73,7 @@ //Review stars &:before { width: 70px; - margin-right: spacing(); + margin-right: spacing.spacing(); @include media('>mid') { width: 80px; @@ -104,7 +105,7 @@ &:before { width: 50px; - margin-right: spacing(); + margin-right: spacing.spacing(); @include media('>mid') { width: 70px; @@ -141,7 +142,7 @@ &:after { content: ''; position: absolute; - margin-bottom: spacing(); + margin-bottom: spacing.spacing(); } &:before { @@ -157,8 +158,8 @@ @include media('>mid') { width: 360px; position: absolute; - top: spacing(d); - right: spacing(d); + top: spacing.spacing(d); + right: spacing.spacing(d); } } } diff --git a/src/scss/components/optional/_listings.scss b/src/scss/components/optional/_listings.scss index ec06000f..856068fd 100644 --- a/src/scss/components/optional/_listings.scss +++ b/src/scss/components/optional/_listings.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; @use '../../tools/mixins/type'; +@use '../../tools/functions/spacing' as spacing; @mixin listing() { /** @@ -58,12 +59,12 @@ // Inactive listing is styling used for searchWeb offline .c-listing--subsequent, .c-listing--inactive { - margin-top: spacing(e); + margin-top: spacing.spacing(e); } .c-listing--subsequent { overflow: hidden; - padding: 0 spacing(d) spacing(d); + padding: 0 spacing.spacing(d) spacing.spacing(d); background: $listing--subsequent-bg; } @@ -80,13 +81,13 @@ } .c-listing-item { - margin-bottom: spacing(d); + margin-bottom: spacing.spacing(d); box-shadow: dt.$elevation-01; // token value for card default state - padding-bottom: spacing(); + padding-bottom: spacing.spacing(); @include media('>mid') { min-height: 96px; - padding: spacing(a); + padding: spacing.spacing(a); } &.is-active { @@ -104,10 +105,10 @@ .c-listing-item--withHeader { overflow: hidden; // Specific padding top % is based on an image size of 288x104 and maintaining an aspect ratio of 36 : 13 - padding-top: calc(37.69% + #{spacing(a)}); + padding-top: calc(37.69% + #{spacing.spacing(a)}); @include media('>mid') { - padding-top: spacing(); + padding-top: spacing.spacing(); } } @@ -123,8 +124,8 @@ width: 87px; height: 87px; padding-top: 0; - top: spacing(a); - left: spacing(a); + top: spacing.spacing(a); + left: spacing.spacing(a); border-radius: $listing-border-radius; } @@ -199,8 +200,8 @@ .c-listing-item-img { width: 55px; height: 55px; - top: spacing(d); - left: spacing(d); + top: spacing.spacing(d); + left: spacing.spacing(d); position: absolute; border: 1px solid dt.$color-border-subtle; border-radius: $listing-border-radius; @@ -221,7 +222,7 @@ transform: none; } @include media('>=wide') { - top: spacing(d); + top: spacing.spacing(d); left: calc(17.5% - 33px); } } @@ -241,7 +242,7 @@ @include media('>mid') { width: 55%; - padding-top: spacing(); + padding-top: spacing.spacing(); } @include media('>=wide') { padding-left: 92px; @@ -265,12 +266,12 @@ .c-listing-item-title { word-break: break-word; - padding-right: spacing(); + padding-right: spacing.spacing(); @include type.font-size(body-l, false); @include media('>mid') { - margin: spacing(a) 0; - padding-right: spacing(d); + margin: spacing.spacing(a) 0; + padding-right: spacing.spacing(d); } } @@ -278,7 +279,7 @@ top: -4px; color: dt.$color-content-positive; position: relative; - margin-right: spacing(a); + margin-right: spacing.spacing(a); } .c-listing-item-details { @@ -288,7 +289,7 @@ @include media('>mid') { width: 45%; margin-top: auto; - padding: spacing() spacing() 0 spacing(d); + padding: spacing.spacing() spacing.spacing() 0 spacing.spacing(d); } @include media('>=wide') { @@ -299,7 +300,7 @@ .c-listing-item-detailsRow { display : flex; align-items : center; - margin-bottom: spacing(a); + margin-bottom: spacing.spacing(a); } .c-listing-item-detailsRow-icon { @@ -310,7 +311,7 @@ .c-listing-item-detailsRow-text { white-space: initial; - margin-left: spacing(); + margin-left: spacing.spacing(); } .c-listing-item-badge { @@ -374,7 +375,7 @@ .c-listing-item-label { padding: 1px 4px; - margin-bottom: spacing(); + margin-bottom: spacing.spacing(); @include type.font-size(caption, false); @include media('>mid') { @@ -388,7 +389,7 @@ @include media('>=mid') { top: 0; - right: spacing(); + right: spacing.spacing(); position: absolute; } diff --git a/src/scss/components/optional/_menu.scss b/src/scss/components/optional/_menu.scss index 51a40acb..1b4b60ff 100644 --- a/src/scss/components/optional/_menu.scss +++ b/src/scss/components/optional/_menu.scss @@ -1,7 +1,9 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../tools/mixins/type'; -@use '../../settings/include-media' as *; @use '../../tools/mixins/truncate'; +@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/zIndex' as zIndex; +@use '../../settings/include-media' as *; @mixin menu() { /** @@ -25,9 +27,9 @@ $menu-border-width : 1px; $menu-border-width--active : 2px; $menu-link-color : dt.$color-content-default; - $menu-link-padding : spacing() spacing(d); - $menu-positionTop : $menu-headerHeight + spacing(d); - $menu--condensed-link-padding : spacing(a); + $menu-link-padding : spacing.spacing() spacing.spacing(d); + $menu-positionTop : $menu-headerHeight + spacing.spacing(d); + $menu--condensed-link-padding : spacing.spacing(a); .c-menu { @extend %u-unstyled; @@ -52,7 +54,7 @@ } .c-menu-link { - padding: spacing(); + padding: spacing.spacing(); } .c-menu-item:active, @@ -69,12 +71,12 @@ .c-menu-openBtnWrapper { display: flex; justify-content: center; - margin-bottom: spacing(f); - margin-top: -#{spacing(e)}; + margin-bottom: spacing.spacing(f); + margin-top: -#{spacing.spacing(e)}; position: sticky; top: $menu-positionTop; transition: 100ms top ease-in-out; - z-index: zIndex(low); + z-index: zIndex.zIndex(low); } .c-menu-openBtn { @@ -82,11 +84,11 @@ align-items: center; border-radius: dt.$radius-rounded-d; display: flex; - padding: spacing() spacing(d); + padding: spacing.spacing() spacing.spacing(d); } .c-menu-closeBtn { - padding: spacing(d); + padding: spacing.spacing(d); position: absolute; right: 0; top: 0; @@ -105,7 +107,7 @@ align-items: center; .c-menu-link { - padding-right: spacing(a); + padding-right: spacing.spacing(a); } } } diff --git a/src/scss/components/optional/_modal.scss b/src/scss/components/optional/_modal.scss index 56481787..53fb1b2c 100644 --- a/src/scss/components/optional/_modal.scss +++ b/src/scss/components/optional/_modal.scss @@ -1,6 +1,8 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; @use '../../tools/mixins/type'; +@use '../../tools/functions/zIndex' as zIndex; +@use '../../tools/functions/spacing' as spacing; @mixin modal() { /** @@ -21,7 +23,7 @@ $modal-borderRadius : dt.$radius-rounded-d; .c-modal { - z-index: zIndex(high); + z-index: zIndex.zIndex(high); } .c-modal--popUp { @@ -48,7 +50,7 @@ } .c-modal-title--spacing { - padding: spacing(g) spacing(h) spacing(d); + padding: spacing.spacing(g) spacing.spacing(h) spacing.spacing(d); } .c-modal-content { @@ -71,7 +73,7 @@ } .c-modal-closeBtn { - z-index: zIndex(high); + z-index: zIndex.zIndex(high); position: fixed; } @@ -88,11 +90,11 @@ } .c-modal-closeBtn { - padding: spacing(); + padding: spacing.spacing(); position: absolute; - right: spacing(d); - top: spacing(c); - z-index: zIndex(high); + right: spacing.spacing(d); + top: spacing.spacing(c); + z-index: zIndex.zIndex(high); @include media('>=mid') { position: fixed; @@ -120,7 +122,7 @@ .c-modal-title { @include type.font-size($modal-titleFontSize); - padding: 0 spacing(e); + padding: 0 spacing.spacing(e); @include media('>=mid') { @include type.font-size(heading-m); @@ -128,10 +130,10 @@ } .c-modal-title--spacing { - padding: spacing(e) spacing(h); + padding: spacing.spacing(e) spacing.spacing(h); @include media('>=mid') { - padding: spacing(g) spacing(h) spacing(d); + padding: spacing.spacing(g) spacing.spacing(h) spacing.spacing(d); } } @@ -140,7 +142,7 @@ border-radius: $modal-borderRadius; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.12); display: none; - padding: spacing(e); + padding: spacing.spacing(e); position: fixed; right: 50%; text-align: center; @@ -165,7 +167,7 @@ max-height: 90vh; max-width: 600px; overflow: hidden; - padding: spacing(g); + padding: spacing.spacing(g); } } @@ -215,7 +217,7 @@ background-color: dt.$color-white; box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12); bottom: 0; - padding: spacing(e); + padding: spacing.spacing(e); position: sticky; width: 100%; } @@ -223,7 +225,7 @@ .c-modal-textSeparator { font-weight: dt.$font-weight-bold; @include type.font-size(body-l); - margin: spacing(e) 0 0; + margin: spacing.spacing(e) 0 0; @include media('>=narrow') { margin: 0; @@ -231,6 +233,6 @@ } .c-modal-textSeparator--spaceAround { - margin: spacing(e) 0 spacing(d); + margin: spacing.spacing(e) 0 spacing.spacing(d); } } diff --git a/src/scss/components/optional/_order-card.scss b/src/scss/components/optional/_order-card.scss index c5270754..29230d96 100644 --- a/src/scss/components/optional/_order-card.scss +++ b/src/scss/components/optional/_order-card.scss @@ -1,6 +1,8 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; @use '../../tools/mixins/type'; +@use '../../tools/functions/zIndex' as zIndex; +@use '../../tools/functions/spacing' as spacing; @use '../../settings/variables' as v; @mixin orderCard() { @@ -95,7 +97,7 @@ position: absolute; bottom: -1px; left: 0; - z-index: zIndex(low); + z-index: zIndex.zIndex(low); } } @@ -123,8 +125,8 @@ @include type.font-size(22px); color: dt.$color-blue; text-align: center; - margin-top: spacing(); - padding: 2px spacing(c) spacing(c); + margin-top: spacing.spacing(); + padding: 2px spacing.spacing(c) spacing.spacing(c); border-top: 1px solid dt.$color-grey-10; } @@ -138,7 +140,7 @@ .c-orderCard-date { margin-top: 0; - margin-bottom: spacing(); + margin-bottom: spacing.spacing(); color: dt.$color-grey-40; display: block; } @@ -156,13 +158,13 @@ } .c-orderCard-orderTotal { - margin-right: spacing(); - margin-left: spacing(e); + margin-right: spacing.spacing(); + margin-left: spacing.spacing(e); align-self: flex-end; } .c-orderCard-content { - padding: spacing() spacing(d) 0; + padding: spacing.spacing() spacing.spacing(d) 0; color: dt.$color-grey; flex: 1 0 auto; display: flex; @@ -170,11 +172,11 @@ } .c-orderCard-yourFavourites-content { - padding: spacing() spacing(d); + padding: spacing.spacing() spacing.spacing(d); } .c-orderCard-content--defaultMessage { - padding: 0 spacing(d); + padding: 0 spacing.spacing(d); @include type.font-size(body-l, false); } @@ -191,22 +193,22 @@ } .c-orderCard--inactive { - margin-left: spacing(f); + margin-left: spacing.spacing(f); } .c-orderCard-header { flex-direction: row; align-items: baseline; display: flex; - margin-left: spacing(d); + margin-left: spacing.spacing(d); @include media('>mid') { - margin-left: spacing(f); + margin-left: spacing.spacing(f); } } .c-orderCard-seeAllText { width: fit-content; - margin-left: spacing(d); + margin-left: spacing.spacing(d); } } diff --git a/src/scss/components/optional/_overflow-carousel.scss b/src/scss/components/optional/_overflow-carousel.scss index a53783d7..94fe80ba 100644 --- a/src/scss/components/optional/_overflow-carousel.scss +++ b/src/scss/components/optional/_overflow-carousel.scss @@ -1,4 +1,5 @@ @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; @mixin overflowCarousel() { /** @@ -17,7 +18,7 @@ .c-overflowCarousel { @include media('mid') { - padding: spacing(d) spacing(f) spacing(); + padding: spacing.spacing(d) spacing.spacing(f) spacing.spacing(); } .c-overflowCarousel-item { flex: 1 0 auto; - margin-right: spacing(); + margin-right: spacing.spacing(); @include media('>=mid') { - margin-right: spacing(d); + margin-right: spacing.spacing(d); } } } @@ -104,6 +105,6 @@ @mixin overflowCarouselContent() { display: inline-flex; white-space: nowrap; - padding-left: spacing(d); - padding-right: spacing(d); + padding-left: spacing.spacing(d); + padding-right: spacing.spacing(d); } diff --git a/src/scss/components/optional/_page-banner.scss b/src/scss/components/optional/_page-banner.scss index b606a272..c4e618e9 100644 --- a/src/scss/components/optional/_page-banner.scss +++ b/src/scss/components/optional/_page-banner.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/variables' as v; @use '../../settings/include-media' as *; +@use '../../tools/functions/zIndex' as zIndex; @mixin pageBanner() { /** @@ -103,7 +104,7 @@ bottom: -1px; left: 0; width: 100%; - z-index: zIndex(low); + z-index: zIndex.zIndex(low); @include media('>=mid') { background: url('#{v.$img-path-url}/decoration/rays--white--wide.svg') no-repeat bottom left; @@ -121,7 +122,7 @@ left: 0; right: 0; width: 100.1%; - z-index: zIndex(low); + z-index: zIndex.zIndex(low); bottom: -$rays--coloured-spacing; @include media('>=mid') { diff --git a/src/scss/components/optional/_toast.scss b/src/scss/components/optional/_toast.scss index 8501ce51..824ad651 100644 --- a/src/scss/components/optional/_toast.scss +++ b/src/scss/components/optional/_toast.scss @@ -1,5 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/zIndex' as zIndex; @mixin toast() { /** @@ -63,12 +65,12 @@ color: $toast-textColor; height: $toast-height; opacity: 0.9; - padding: spacing(); + padding: spacing.spacing(); position: absolute; text-align: center; transform: translateY($toast-translateY); width: calc(100% - 16px); - z-index: zIndex(low); + z-index: zIndex.zIndex(low); @include media('>=narrow') { animation: toastSlideUp--aboveNarrow $toast-animation-duration; diff --git a/src/scss/components/optional/_user-message.scss b/src/scss/components/optional/_user-message.scss index e5707220..e166fbe5 100644 --- a/src/scss/components/optional/_user-message.scss +++ b/src/scss/components/optional/_user-message.scss @@ -1,5 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; +@use '../../tools/functions/spacing' as spacing; @mixin userMessage() { /** @@ -15,13 +16,13 @@ color: dt.$color-white; background-color: dt.$color-orange; max-width: 100%; - margin-top: spacing(d); + margin-top: spacing.spacing(d); } .c-userMessageContainer { max-width: 350px; margin: 0 auto; - padding: spacing(d) 0; + padding: spacing.spacing(d) 0; display: flex; @include media('>=narrow') { @@ -45,7 +46,7 @@ } .c-userMessageText { - margin-left: spacing(d); + margin-left: spacing.spacing(d); margin-top: 0; @include media('>=mid') { diff --git a/src/scss/objects/_buttons.scss b/src/scss/objects/_buttons.scss index 676c805f..5d74e429 100644 --- a/src/scss/objects/_buttons.scss +++ b/src/scss/objects/_buttons.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../components/optional/loading-indicator'; @use '../tools/mixins/type'; +@use '../tools/functions/spacing'; @use '../settings/include-media' as *; @use '../trumps/utilities' as *; @@ -19,7 +20,7 @@ $btn-default-borderRadius : dt.$radius-rounded-e; $btn-default-font-size : 'heading-s'; $btn-default-weight : dt.$font-weight-bold; - $btn-default-padding : 10px spacing(e); + $btn-default-padding : 10px spacing.spacing(e); $btn-default-outline-color : dt.$color-focus; $btn-default-bgColor : dt.$color-interactive-brand; @@ -64,14 +65,14 @@ $btn-disabled-bgColor : dt.$color-disabled-01; $btn-disabled-textColor : dt.$color-content-disabled; - $btn-sizeLarge-padding : 14px spacing(e); + $btn-sizeLarge-padding : 14px spacing.spacing(e); $btn-sizeLarge-loading-color : dt.$color-content-interactive-light; $btn-sizeSmall-font-size : 'body-l'; - $btn-sizeSmall-padding : spacing() spacing(d); + $btn-sizeSmall-padding : spacing.spacing() spacing.spacing(d); $btn-sizeXSmall-font-size : 'body-s'; - $btn-sizeXSmall-padding : 6px spacing(); + $btn-sizeXSmall-padding : 6px spacing.spacing(); @include loading-indicator.loadingIndicator('medium'); @@ -136,7 +137,7 @@ } p + & { - margin-top: spacing(d); + margin-top: spacing.spacing(d); } & .note { @@ -147,7 +148,7 @@ } } &[type='submit'] { - margin-top: spacing(d); + margin-top: spacing.spacing(d); } } @@ -345,7 +346,7 @@ // Vertically space out multiple fullWidth buttons // same as .o-btn--fullWidth + .o-btn--fullWidth & + & { - margin-top: spacing(); + margin-top: spacing.spacing(); } } diff --git a/src/scss/objects/_form-controls.scss b/src/scss/objects/_form-controls.scss index 55f4b440..454b0e00 100644 --- a/src/scss/objects/_form-controls.scss +++ b/src/scss/objects/_form-controls.scss @@ -1,5 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/include-media' as *; +@use '../tools/functions/spacing' as spacing; +@use '../tools/functions/zIndex' as zIndex; @mixin formControls() { /** @@ -43,7 +45,7 @@ $formControl-color--hover : darken(dt.$color-orange, dt.$color-hover-01); $formControl-background-color : dt.$color-background-default; $formControl-margin-left : 0; - $formControl-padding-left : spacing(f); + $formControl-padding-left : spacing.spacing(f); $formControl-width : 24px; $formControl-width--wide : 20px; $formControl-height : 24px; @@ -56,7 +58,7 @@ display: block; cursor: pointer; user-select: none; - padding: spacing(); + padding: spacing.spacing(); padding-left: $formControl-padding-left; &:hover .o-formControl-indicator { @@ -83,7 +85,7 @@ .o-formControl-input { position: absolute; opacity: 0; - z-index: zIndex(lowest); // Put the input behind the label so it doesn't overlay text + z-index: zIndex.zIndex(lowest); // Put the input behind the label so it doesn't overlay text &:focus { & + .o-formControl-indicator { @extend %u-elementFocus; } @@ -149,8 +151,8 @@ .o-formControl-icon { background-position: center 0; - left: spacing(); - min-width: spacing(c); + left: spacing.spacing(); + min-width: spacing.spacing(c); position: absolute; } diff --git a/src/scss/objects/_form-toggle.scss b/src/scss/objects/_form-toggle.scss index 8294f828..48aee789 100644 --- a/src/scss/objects/_form-toggle.scss +++ b/src/scss/objects/_form-toggle.scss @@ -1,6 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/include-media' as *; -@use '../tools/functions/spacing'; +@use '../tools/functions/spacing' as spacing; @use 'sass:math'; $formToggle-padding : spacing.spacing() !default; @@ -36,7 +36,7 @@ $formToggle-text--checked : dt.$color-green; .o-formToggle { position: relative; display: inline-block; - margin-bottom: spacing(); + margin-bottom: spacing.spacing(); border-radius: $formToggle-border-radius; padding: math.div($formToggle-padding, 2) $formToggle-padding; border: $formToggle-border-width solid $formToggle-border-color; @@ -47,7 +47,7 @@ $formToggle-text--checked : dt.$color-green; } .o-formToggle--button { - padding-left: spacing(f); + padding-left: spacing.spacing(f); color: $formToggle-button-color; background: $formToggle-button-background; border-color: $formToggle-button-background; @@ -64,7 +64,7 @@ $formToggle-text--checked : dt.$color-green; //Used alongside the default styles but for a larger tap area (min 44px) on narrow screens .o-formToggle--largeTouchArea { @include media('=mid') { float: left; - margin: 0 0 spacing(); + margin: 0 0 spacing.spacing(); @include formToggle-large(); } } @@ -191,7 +191,7 @@ $formToggle-text--checked : dt.$color-green; height: 10px; position: absolute; margin-top: -4px; - left: spacing(); + left: spacing.spacing(); display: inline-block; transform: rotate(-45deg) scale(0.5); transition: transform 200ms ease, opacity 250ms ease; @@ -231,12 +231,12 @@ $formToggle-text--checked : dt.$color-green; .o-formToggle-count { pointer-events: none; - padding-left: spacing(); + padding-left: spacing.spacing(); @include media('>mid') { top: 50%; padding-left: 0; - right: spacing(); + right: spacing.spacing(); position: absolute; transform: translateY(-50%); } @@ -253,7 +253,7 @@ $formToggle-text--checked : dt.$color-green; width: calc(50% - 4px); &:nth-child(2n) { - margin-left: spacing(); + margin-left: spacing.spacing(); } } diff --git a/src/scss/objects/_lists.scss b/src/scss/objects/_lists.scss index b10b0964..86688f2f 100644 --- a/src/scss/objects/_lists.scss +++ b/src/scss/objects/_lists.scss @@ -1,5 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../tools/mixins/type'; +@use '../tools/functions/spacing' as spacing; @mixin lists() { /** @@ -20,15 +21,15 @@ ul, ol { padding: 0; - margin: spacing(d) 0 0 spacing(d); + margin: spacing.spacing(d) 0 0 spacing.spacing(d); li { - margin-bottom: spacing(); + margin-bottom: spacing.spacing(); } ul, ol { - margin-top: spacing(); + margin-top: spacing.spacing(); } } @@ -42,7 +43,7 @@ color: $list-bullet-color; content: '\2022'; /* Unicode for circle character */ font-size: 1.8em; - padding-right: spacing(); + padding-right: spacing.spacing(); position: relative; top: 0.15em; margin-left: -1.5rem; @@ -51,7 +52,7 @@ ol { > li { - padding-left: spacing(); + padding-left: spacing.spacing(); } } @@ -59,7 +60,7 @@ > li { font-weight: dt.$font-weight-bold; @include type.font-size(heading-s); // TODO – this should be updated with a more semantic font alias specific to lists - margin-bottom: spacing(f); + margin-bottom: spacing.spacing(f); > div { font-weight: dt.$font-weight-regular; diff --git a/src/scss/objects/_tables.scss b/src/scss/objects/_tables.scss index 2d84ffaf..4c3d2edc 100644 --- a/src/scss/objects/_tables.scss +++ b/src/scss/objects/_tables.scss @@ -1,6 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/variables' as v; @use '../tools/functions/units'; +@use '../tools/functions/spacing' as spacing; @mixin tables() { /** @@ -40,8 +41,8 @@ .table { width: 100%; max-width: 100%; - margin-top: spacing(f); - margin-bottom: spacing(f); + margin-top: spacing.spacing(f); + margin-bottom: spacing.spacing(f); border-spacing: 0; background-color: $table-bgColor; border: $table-border--width solid $table-border--color; diff --git a/src/scss/tools/helpers/_code-highlighting.scss b/src/scss/tools/helpers/_code-highlighting.scss index fda4fa92..45db4074 100644 --- a/src/scss/tools/helpers/_code-highlighting.scss +++ b/src/scss/tools/helpers/_code-highlighting.scss @@ -1,3 +1,8 @@ +@use '../../settings/variables' as v; +@use '../../settings/include-media' as *; +@use '../../tools/mixins/type'; +@use '../../tools/functions/spacing' as spacing; + /** * Code Highlighting * =================================== @@ -44,7 +49,7 @@ code[class*='language-'] ::selection { /* Code blocks */ pre[class*='language-'] { padding: 1em; - margin: spacing(d) 0; + margin: spacing.spacing(d) 0; overflow: auto; } @@ -144,9 +149,9 @@ code, pre { border: 1px solid #ddd; padding: 10px; - font-family: $font-family-mono; + font-family: v.$font-family-mono; - @include font-size(small, false); + @include type.font-size(small, false); color: $code-textColor; tab-size: 3; @@ -163,8 +168,8 @@ code { // Blocks of code pre { display: block; - padding: floor($spacing(d) / 2); - margin: spacing(d) 0; + padding: floor(v.$spacing(d) / 2); + margin: spacing.spacing(d) 0; color: $pre-textColor; background-color: $pre-bgColor; white-space: pre; diff --git a/src/scss/tools/mixins/_border.scss b/src/scss/tools/mixins/_border.scss index 39bd8ffb..9f12ef48 100644 --- a/src/scss/tools/mixins/_border.scss +++ b/src/scss/tools/mixins/_border.scss @@ -1,6 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/variables' as v; -@use '../functions/spacing'; +@use '../functions/spacing' as spacing; // // ========================================================================== diff --git a/src/scss/tools/mixins/_utilities.scss b/src/scss/tools/mixins/_utilities.scss index a482a8c6..a7c0e6dd 100644 --- a/src/scss/tools/mixins/_utilities.scss +++ b/src/scss/tools/mixins/_utilities.scss @@ -20,8 +20,8 @@ $spacing-map: map.merge(( // ========================================================================== // // Usage: -// @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacingValue) { -// padding-top: spacing(#{$spacingValue}); +// @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacing-value) { +// padding-top: spacing(#{$spacing-value}); // } // // eg. the output of the above would generate the following @@ -39,10 +39,11 @@ $spacing-map: map.merge(( // .u-pad-j--top { padding-top: spacing(j); } // @mixin spacing-classes($spacings, $name, $modifier: '') { - @each $spacing-value, $value in $spacings { - $separator: if($spacing-value == '', '', '-'); + @each $spacing, $value in $spacings { + $separator: if($spacing == '', '', '-'); $modifier-str: if($modifier == '', '', '--#{$modifier}'); - $suffix: #{$separator}#{$spacing-value}#{$modifier-str}; + $suffix: #{$separator}#{$spacing}#{$modifier-str}; + $spacing-value: if($spacing == '', 'b', $spacing); .u-#{$name}#{$suffix} { @content($spacing-value); diff --git a/src/scss/trumps/_spacing.scss b/src/scss/trumps/_spacing.scss index 8db79ff6..50295459 100644 --- a/src/scss/trumps/_spacing.scss +++ b/src/scss/trumps/_spacing.scss @@ -1,4 +1,5 @@ @use '../tools/mixins/utilities'; +@use '../tools/functions/spacing'; @mixin trumps-spacing() { @@ -13,15 +14,15 @@ * * eg. a subset of the generated classes * - * .u-spacing { margin: spacing(); } - * .u-spacing--top { margin-top: spacing(); } - * .u-spacing-a--top { margin-top: spacing(a); } - * .u-spacing-b--top { margin-top: spacing(b); } + * .u-spacing { margin: 8px; } + * .u-spacing--top { margin-top: 8px; } + * .u-spacing-a--top { margin-top: 4px; } + * .u-spacing-b--top { margin-top: 8px; } * - * .u-pad { padding: spacing(); } - * .u-pad--top { padding-top: spacing(); } - * .u-pad-a--top { padding-top: spacing(a); } - * .u-pad-b--top { padding-top: spacing(b); } + * .u-pad { padding: 8px; } + * .u-pad--top { padding-top: 8px; } + * .u-pad-a--top { padding-top: 4px; } + * .u-pad-b--top { padding-top: 8px; } * * This is an optional component within Fozzie. * If you'd like to use it in your project you can include it by adding `@include trumps-spacing();` into your SCSS dependencies file. @@ -31,34 +32,34 @@ // Margin Utilities // ========================================================================== - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing') using ($spacingValue) { - margin: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing') using ($spacing-value) { + margin: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'top') using ($spacingValue) { - margin-top: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'top') using ($spacing-value) { + margin-top: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'bottom') using ($spacingValue) { - margin-bottom: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'bottom') using ($spacing-value) { + margin-bottom: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'left') using ($spacingValue) { - margin-left: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'left') using ($spacing-value) { + margin-left: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'right') using ($spacingValue) { - margin-right: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'right') using ($spacing-value) { + margin-right: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'horizontal') using ($spacingValue) { - margin-left: spacing(#{$spacingValue}) !important; - margin-right: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'horizontal') using ($spacing-value) { + margin-left: spacing.spacing(#{$spacing-value}) !important; + margin-right: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'vertical') using ($spacingValue) { - margin-bottom: spacing(#{$spacingValue}) !important; - margin-top: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'vertical') using ($spacing-value) { + margin-bottom: spacing.spacing(#{$spacing-value}) !important; + margin-top: spacing.spacing(#{$spacing-value}) !important; } @@ -66,33 +67,33 @@ // Padding Utilities // ========================================================================== - @include utilities.spacing-classes(utilities.$spacing-map, 'pad') using ($spacingValue) { - padding: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad') using ($spacing-value) { + padding: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacingValue) { - padding-top: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacing-value) { + padding-top: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'bottom') using ($spacingValue) { - padding-bottom: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'bottom') using ($spacing-value) { + padding-bottom: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'left') using ($spacingValue) { - padding-left: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'left') using ($spacing-value) { + padding-left: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'right') using ($spacingValue) { - padding-right: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'right') using ($spacing-value) { + padding-right: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'horizontal') using ($spacingValue) { - padding-left: spacing(#{$spacingValue}) !important; - padding-right: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'horizontal') using ($spacing-value) { + padding-left: spacing.spacing(#{$spacing-value}) !important; + padding-right: spacing.spacing(#{$spacing-value}) !important; } - @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'vertical') using ($spacingValue) { - padding-bottom: spacing(#{$spacingValue}) !important; - padding-top: spacing(#{$spacingValue}) !important; + @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'vertical') using ($spacing-value) { + padding-bottom: spacing.spacing(#{$spacing-value}) !important; + padding-top: spacing.spacing(#{$spacing-value}) !important; } } diff --git a/src/scss/trumps/_utilities.scss b/src/scss/trumps/_utilities.scss index 5622efbe..025a446c 100644 --- a/src/scss/trumps/_utilities.scss +++ b/src/scss/trumps/_utilities.scss @@ -2,6 +2,8 @@ @use '../settings/include-media' as *; @use '../tools/mixins/border'; @use '../tools/mixins/truncate'; +@use '../tools/functions/spacing'; +@use '../tools/functions/zIndex'; // ==================== // @TODO - MOVE TO DIFFERENT FILE. @@ -166,14 +168,14 @@ .is-sticky { width: 100%; - z-index: zIndex(mid); + z-index: zIndex.zIndex(mid); position: fixed; transition: top 0.2s ease; } .u-sticky { position: sticky !important; - top: spacing(d); + top: spacing.spacing(d); } .u-absolutelyCentered { @@ -197,7 +199,7 @@ } .u-textPad { - padding-left: spacing(f) !important; + padding-left: spacing.spacing(f) !important; } .u-text-truncate { @@ -236,7 +238,7 @@ } .u-text-indent { - margin-left: spacing(d); + margin-left: spacing.spacing(d); } // @@ -286,37 +288,37 @@ } .u-spacingTop { - margin-top: spacing() !important; + margin-top: spacing.spacing() !important; } .u-spacingTop--small { - margin-top: spacing(a) !important; + margin-top: spacing.spacing(a) !important; } .u-spacingTop--large { - margin-top: spacing(d) !important; + margin-top: spacing.spacing(d) !important; } .u-spacingRight { - margin-right: spacing() !important; + margin-right: spacing.spacing() !important; } .u-spacingBottom { - margin-bottom: spacing() !important; + margin-bottom: spacing.spacing() !important; } .u-spacingBottom--large { - margin-bottom: spacing(d) !important; + margin-bottom: spacing.spacing(d) !important; } .u-spacingBottom--large--aboveMid { @include media('>=mid') { - margin-bottom: spacing(d); + margin-bottom: spacing.spacing(d); } } .u-spacingLeft { - margin-left: spacing() !important; + margin-left: spacing.spacing() !important; } // @@ -328,16 +330,16 @@ } .u-padTop { - padding-top: spacing() !important; + padding-top: spacing.spacing() !important; } .u-padTop--large { - padding-top: spacing(d) !important; + padding-top: spacing.spacing(d) !important; } .u-padTop--large--aboveMid { @include media('>=mid') { - padding-top: spacing(d) !important; + padding-top: spacing.spacing(d) !important; } } @@ -364,7 +366,7 @@ position: fixed; right: 0; top: 0; - z-index: zIndex(low); + z-index: zIndex.zIndex(low); } } @@ -436,7 +438,7 @@ // Misc classes // ========================================================================== .u-shadowBottom--belowMid { - padding-bottom: spacing(h); + padding-bottom: spacing.spacing(h); @include media('