diff --git a/CHANGELOG.md b/CHANGELOG.md index cd27b79..0d9ab1e 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 +v10.4.0 +------------------------------ +*September 27, 2022* + +### Changed +- Unify namespaced `function` references throughout. + + v10.3.0 ------------------------------ *September 26, 2022* diff --git a/package.json b/package.json index ff96bb6..086315f 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": "10.3.0", + "version": "10.4.0", "main": "dist/js/index.js", "files": [ "dist/js", diff --git a/src/scss/base/_layout.scss b/src/scss/base/_layout.scss index 4543aa9..97b87ae 100644 --- a/src/scss/base/_layout.scss +++ b/src/scss/base/_layout.scss @@ -2,7 +2,7 @@ @use '../settings/variables' as v; @use '../settings/include-media' as *; @use '../tools/mixins/type'; -@use '../tools/functions/spacing' as spacing; +@use '../tools/functions/index' as functions; @mixin layout() { /** @@ -69,14 +69,14 @@ } .l-innerContainer--verticalSpacing { - margin: spacing.spacing(f) 0; + margin: functions.spacing(f) 0; @include media('>=mid') { - margin: spacing.spacing(g) auto spacing.spacing(h); + margin: functions.spacing(g) auto functions.spacing(h); } @include media('>=wide') { - margin: spacing.spacing(i) auto; + margin: functions.spacing(i) auto; } } @@ -84,18 +84,18 @@ * Layout class for containers that contain content (such as T&cs and Privacy pages) */ .l-content { - padding-top: spacing.spacing(d); + padding-top: functions.spacing(d); @include media('>mid') { - padding-top: spacing.spacing(f); + padding-top: functions.spacing(f); } } .l-content-header { - margin: 0 0 spacing.spacing(d); + margin: 0 0 functions.spacing(d); @include media('>mid') { - margin: spacing.spacing(d) 0 spacing.spacing(f); + margin: functions.spacing(d) 0 functions.spacing(f); } > h1 { diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss index befc683..f78b330 100644 --- a/src/scss/base/_typography.scss +++ b/src/scss/base/_typography.scss @@ -1,7 +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 '../tools/functions/index' as functions; @use '../settings/include-media' as *; @mixin typography() { @@ -50,7 +50,7 @@ */ p { @include type.font-size(body-l); - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); margin-bottom: 0; } @@ -84,8 +84,8 @@ h1, .alpha { @include type.font-size(heading-xl, true, narrow); - margin-top: spacing.spacing(f); - margin-bottom: spacing.spacing(d); + margin-top: functions.spacing(f); + margin-bottom: functions.spacing(d); @include media('>mid') { @include type.font-size(heading-xl); @@ -126,14 +126,14 @@ // Only give these headings a margin-top if they are after other elements * + h2, * + .beta { - margin-top: spacing.spacing(f); + margin-top: functions.spacing(f); } * + h3, * + .gamma, * + h4, * + .delta { - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); } small { @@ -166,7 +166,7 @@ */ blockquote { padding-left: 10px; - margin: spacing.spacing(d); + margin: functions.spacing(d); border-left: 4px solid lighten(#000, 80%); p { @@ -218,7 +218,7 @@ address { font-style: normal; - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); margin-bottom: 0; } @@ -241,7 +241,7 @@ // Horizontal rules hr { - margin: spacing.spacing(d) 0; + margin: functions.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 c52b458..11ef676 100644 --- a/src/scss/components/_alerts.scss +++ b/src/scss/components/_alerts.scss @@ -1,6 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../tools/mixins/alerts'; -@use '../tools/functions/spacing' as spacing; +@use '../tools/functions/index' as functions; @mixin alerts() { /** @@ -23,8 +23,8 @@ // ------------------------- .c-alert { - padding: spacing.spacing(); - margin-top: spacing.spacing(d); + padding: functions.spacing(); + margin-top: functions.spacing(d); border: 1px solid transparent; border-radius: $alert-border-radius; @@ -33,7 +33,7 @@ } & + * { - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); } } diff --git a/src/scss/components/_breadcrumbs.scss b/src/scss/components/_breadcrumbs.scss index 6814145..643bec5 100644 --- a/src/scss/components/_breadcrumbs.scss +++ b/src/scss/components/_breadcrumbs.scss @@ -1,7 +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; +@use '../tools/functions/index' as functions; @mixin breadcrumbs() { /** @@ -70,7 +70,7 @@ } .c-breadcrumb-item-icon { - margin: 0 spacing.spacing(b); + margin: 0 functions.spacing(b); } .c-breadcrumb--transparent { @@ -101,7 +101,7 @@ background-color: $breadcrumb--compact-background; border-radius: $breadcrumb-border-radius; line-height: 2; - padding-right: spacing.spacing(d); + padding-right: functions.spacing(d); .c-breadcrumb-item-icon { float: left; diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index 23cc8bb..2f28ae2 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -1,7 +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; +@use '../tools/functions/index' as functions; @mixin cards() { /** @@ -20,12 +20,12 @@ $card-bgColor--disabled : dt.$color-container-subtle; $card-tooltip-width : 10px; $card-arrow-bottom-position : 0; - $card-padding : spacing.spacing(d); + $card-padding : functions.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.spacing(f); - $card-section-margin--large : spacing.spacing(i); + $card-section-margin : functions.spacing(f); + $card-section-margin--large : functions.spacing(i); $card-section-highlight-backgroundColor : dt.$color-support-brand-02; $card-section-highlight-color : dt.$color-content-default; $card-section-collapsible-paddingRight : 60px; @@ -35,7 +35,7 @@ .c-card { background-color: $card-bgColor--active; display: block; - margin-bottom: spacing.spacing(); + margin-bottom: functions.spacing(); padding: $card-padding; position: relative; @@ -73,29 +73,29 @@ .c-card--padBottom--belowMid { @include media('=mid') { border-top: solid 1px $card-borderColor; - margin-left: -#{spacing.spacing(d)}; - padding-left: spacing.spacing(e); + margin-left: -#{functions.spacing(d)}; + padding-left: functions.spacing(e); } } @@ -170,8 +170,8 @@ background-color: $card-section-highlight-backgroundColor; border-top: none; color: $card-section-highlight-color; - margin-top: spacing.spacing(d); - padding: spacing.spacing(a) spacing.spacing(); + margin-top: functions.spacing(d); + padding: functions.spacing(a) functions.spacing(); + .c-card-section--highlight { margin-top: 1px; @@ -190,7 +190,7 @@ .c-card-section--collapsible { overflow: hidden; - padding-bottom: spacing.spacing(d); + padding-bottom: functions.spacing(d); padding-right: $card-section-collapsible-paddingRight; position: relative; user-select: none; @@ -200,7 +200,7 @@ padding-right: $card-section-collapsible-paddingRight; &.c-card-section { - margin-bottom: spacing.spacing(d); + margin-bottom: functions.spacing(d); &.has-noSpacing { margin-bottom: 0; @@ -214,13 +214,13 @@ } .c-card-section--collapsible--noPad { - margin-left: -#{spacing.spacing(f)}; - padding: 0 $card-section-collapsible-paddingRight 0 spacing.spacing(d); + margin-left: -#{functions.spacing(f)}; + padding: 0 $card-section-collapsible-paddingRight 0 functions.spacing(d); width: calc(100% + #{$card-section-margin--large}); @include media('>=mid') { - margin-left: -#{spacing.spacing(d)}; - padding: 0 $card-section-collapsible-paddingRight 0 spacing.spacing(e); + margin-left: -#{functions.spacing(d)}; + padding: 0 $card-section-collapsible-paddingRight 0 functions.spacing(e); width: calc(100% + #{$card-section-margin}); } } @@ -243,7 +243,7 @@ height: 6px; display: none; position: absolute; - right: spacing.spacing(d); + right: functions.spacing(d); top: 22px; transform: rotate(180deg); transition: transform 0.4s; @@ -251,7 +251,7 @@ @include media('>=mid') { height: 8px; - right: spacing.spacing(e); + right: functions.spacing(e); width: 14px; } @@ -267,7 +267,7 @@ right: 21px; @include media('>=mid') { - right: spacing.spacing(e); + right: functions.spacing(e); } } } diff --git a/src/scss/components/_media-element.scss b/src/scss/components/_media-element.scss index 49f7d3f..e08f7fc 100644 --- a/src/scss/components/_media-element.scss +++ b/src/scss/components/_media-element.scss @@ -1,7 +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; +@use '../tools/functions/index' as functions; @use 'sass:math'; @mixin mediaElement() { @@ -24,7 +24,7 @@ $mediaElement-img-borderRadius : dt.$radius-rounded-c; $mediaElement-infoLinkColor : dt.$color-content-link-distinct; $mediaElement-fontSize : body-l; - $mediaElement-spacing : spacing.spacing(d); + $mediaElement-spacing : functions.spacing(d); // mediaElement module @@ -36,7 +36,7 @@ & > :not(:last-child) { @include media('>=mid') { - margin-right: spacing.spacing(b); + margin-right: functions.spacing(b); } } } @@ -94,7 +94,7 @@ } @include media('>=mid') { - margin-top: math.div(spacing.spacing(b), 4); + margin-top: math.div(functions.spacing(b), 4); } @include media('>=wide') { @@ -126,7 +126,7 @@ } .c-mediaElement-heading { - margin: spacing.spacing(h) 0 spacing.spacing(d); + margin: functions.spacing(h) 0 functions.spacing(d); } .c-mediaElement-content { @@ -135,12 +135,12 @@ .c-mediaElement--fullstack & { flex: auto; - margin-top: spacing.spacing(a); + margin-top: functions.spacing(a); } .c-mediaElement--fullstack--negativeTop & { flex: auto; - margin-top: spacing.spacing(f); + margin-top: functions.spacing(f); } // some content uses br for content shaping – get rid of it on mobile devices @@ -172,8 +172,8 @@ top: $mediaElement-spacing; @include media('=mid') { - margin-top: spacing.spacing(); + margin-top: functions.spacing(); } } } } .c-appsBanner-buttons { - margin-top: spacing.spacing(e); + margin-top: functions.spacing(e); } .c-appsBanner-appBtn { diff --git a/src/scss/components/optional/_content-header.scss b/src/scss/components/optional/_content-header.scss index 3a7053f..df36626 100644 --- a/src/scss/components/optional/_content-header.scss +++ b/src/scss/components/optional/_content-header.scss @@ -1,7 +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; +@use '../../tools/functions/index' as functions; @mixin contentHeader() { /** @@ -19,14 +19,14 @@ */ .c-contentHeader { - padding-top: spacing.spacing(d); - padding-bottom: spacing.spacing(); + padding-top: functions.spacing(d); + padding-bottom: functions.spacing(); } .c-contentHeader-title { padding: 0; display: inline-block; - margin: 0 spacing.spacing(d) 0 0; + margin: 0 functions.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 d538a15..5b970d9 100644 --- a/src/scss/components/optional/_content-title.scss +++ b/src/scss/components/optional/_content-title.scss @@ -1,7 +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; +@use '../../tools/functions/index' as functions; @mixin contentTitle() { /** @@ -22,12 +22,12 @@ width: 100%; display: flex; align-items: center; - margin: spacing.spacing(d) 0; + margin: functions.spacing(d) 0; } .c-contentTitle-icon { width: 24px; - margin-right: spacing.spacing(); + margin-right: functions.spacing(); } .c-contentTitle-text { diff --git a/src/scss/components/optional/_cookie-warning.scss b/src/scss/components/optional/_cookie-warning.scss index c7cc939..1b226ce 100644 --- a/src/scss/components/optional/_cookie-warning.scss +++ b/src/scss/components/optional/_cookie-warning.scss @@ -1,7 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../tools/mixins/type'; -@use '../../tools/functions/spacing'; -@use '../../tools/functions/zIndex'; +@use '../../tools/functions/index' as functions; @mixin cookieWarning() { /** @@ -19,7 +18,7 @@ position: fixed; bottom: 0; width: 100%; - z-index: zIndex.zIndex(high); + z-index: functions.zIndex(high); & p { @include type.font-size(caption, false); @@ -31,8 +30,8 @@ .c-cookieWarning-inner { margin: 0 auto; - padding: spacing.spacing(); - padding-right: spacing.spacing(e); + padding: functions.spacing(); + padding-right: functions.spacing(e); overflow: hidden; } diff --git a/src/scss/components/optional/_cuisines-widget.scss b/src/scss/components/optional/_cuisines-widget.scss index fc8919a..89819d9 100644 --- a/src/scss/components/optional/_cuisines-widget.scss +++ b/src/scss/components/optional/_cuisines-widget.scss @@ -1,7 +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; +@use '../../tools/functions/index' as functions; @mixin cuisinesWidget() { /** @@ -27,8 +27,8 @@ position: relative; background-color: $cuisinesWidget-defaultBackground; box-shadow: dt.$elevation-01; // token values for cards - margin-top: spacing.spacing(); - margin-bottom: spacing.spacing(); + margin-top: functions.spacing(); + margin-bottom: functions.spacing(); &:hover, &:focus { @@ -43,14 +43,14 @@ bottom: 0; left: 0; width: 100%; - padding: spacing.spacing(d) spacing.spacing(d) spacing.spacing(); + padding: functions.spacing(d) functions.spacing(d) functions.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.spacing(d); + padding: functions.spacing(d); } } diff --git a/src/scss/components/optional/_fullscreen-pop-over.scss b/src/scss/components/optional/_fullscreen-pop-over.scss index 0bd80e5..b969f98 100644 --- a/src/scss/components/optional/_fullscreen-pop-over.scss +++ b/src/scss/components/optional/_fullscreen-pop-over.scss @@ -1,7 +1,6 @@ @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; +@use '../../tools/functions/index' as functions; @mixin fullScreenPopOver() { /** @@ -20,7 +19,7 @@ $fullScreenPopOver-background : dt.$color-background-default; $fullScreenPopOver-action-background : dt.$color-white; - $fullScreenPopOver-padding : spacing.spacing(d); + $fullScreenPopOver-padding : functions.spacing(d); $fullScreenPopOver-border-color : dt.$color-border-default; $fullScreenPopOver-shadow-color : rgba(dt.$color-black, 0.12); @@ -33,7 +32,7 @@ width: 100vw; position: fixed; overflow: hidden; - z-index: zIndex.zIndex(high); + z-index: functions.zIndex(high); background: $fullScreenPopOver-background; transition: top 200ms ease, opacity 150ms ease; @@ -81,7 +80,7 @@ .c-fullScreenPopOver-header { top: 0; - z-index: zIndex.zIndex(high); + z-index: functions.zIndex(high); box-shadow: dt.$elevation-03; // token value for sticky headers } @@ -122,7 +121,7 @@ height: 100%; overflow-x: hidden; overflow-y: scroll; - padding: spacing.spacing(d) 0; + padding: functions.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 9470ad9..1a43048 100644 --- a/src/scss/components/optional/_listings-skeleton.scss +++ b/src/scss/components/optional/_listings-skeleton.scss @@ -1,6 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; -@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/index' as functions; @mixin listingSkeleton() { /** @@ -21,8 +21,8 @@ position: relative; background: dt.$color-container-default; border-radius: dt.$radius-rounded-c; - padding: 85px spacing.spacing(d) spacing.spacing(d); - margin-bottom: spacing.spacing(d); + padding: 85px functions.spacing(d) functions.spacing(d); + margin-bottom: functions.spacing(d); @include media('>mid') { padding-top: 73px; @@ -34,13 +34,13 @@ &:after { content: ''; position: absolute; - top: spacing.spacing(d); + top: functions.spacing(d); @include anim(); } //Skeleton image &:before { - left: spacing.spacing(d); + left: functions.spacing(d); height: 55px; width: 55px; } @@ -73,7 +73,7 @@ //Review stars &:before { width: 70px; - margin-right: spacing.spacing(); + margin-right: functions.spacing(); @include media('>mid') { width: 80px; @@ -105,7 +105,7 @@ &:before { width: 50px; - margin-right: spacing.spacing(); + margin-right: functions.spacing(); @include media('>mid') { width: 70px; @@ -142,7 +142,7 @@ &:after { content: ''; position: absolute; - margin-bottom: spacing.spacing(); + margin-bottom: functions.spacing(); } &:before { @@ -158,8 +158,8 @@ @include media('>mid') { width: 360px; position: absolute; - top: spacing.spacing(d); - right: spacing.spacing(d); + top: functions.spacing(d); + right: functions.spacing(d); } } } diff --git a/src/scss/components/optional/_listings.scss b/src/scss/components/optional/_listings.scss index 538bbd0..55bc433 100644 --- a/src/scss/components/optional/_listings.scss +++ b/src/scss/components/optional/_listings.scss @@ -1,7 +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; +@use '../../tools/functions/index' as functions; @mixin listing() { /** @@ -59,12 +59,12 @@ // Inactive listing is styling used for searchWeb offline .c-listing--subsequent, .c-listing--inactive { - margin-top: spacing.spacing(e); + margin-top: functions.spacing(e); } .c-listing--subsequent { overflow: hidden; - padding: 0 spacing.spacing(d) spacing.spacing(d); + padding: 0 functions.spacing(d) functions.spacing(d); background: $listing--subsequent-bg; } @@ -81,13 +81,13 @@ } .c-listing-item { - margin-bottom: spacing.spacing(d); + margin-bottom: functions.spacing(d); box-shadow: dt.$elevation-01; // token value for card default state - padding-bottom: spacing.spacing(); + padding-bottom: functions.spacing(); @include media('>mid') { min-height: 96px; - padding: spacing.spacing(a); + padding: functions.spacing(a); } &.is-active { @@ -105,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.spacing(a)}); + padding-top: calc(37.69% + #{functions.spacing(a)}); @include media('>mid') { - padding-top: spacing.spacing(); + padding-top: functions.spacing(); } } @@ -124,8 +124,8 @@ width: 87px; height: 87px; padding-top: 0; - top: spacing.spacing(a); - left: spacing.spacing(a); + top: functions.spacing(a); + left: functions.spacing(a); border-radius: $listing-border-radius; } @@ -200,8 +200,8 @@ .c-listing-item-img { width: 55px; height: 55px; - top: spacing.spacing(d); - left: spacing.spacing(d); + top: functions.spacing(d); + left: functions.spacing(d); position: absolute; border: 1px solid dt.$color-border-subtle; border-radius: $listing-border-radius; @@ -222,7 +222,7 @@ transform: none; } @include media('>=wide') { - top: spacing.spacing(d); + top: functions.spacing(d); left: calc(17.5% - 33px); } } @@ -242,7 +242,7 @@ @include media('>mid') { width: 55%; - padding-top: spacing.spacing(); + padding-top: functions.spacing(); } @include media('>=wide') { padding-left: 92px; @@ -266,12 +266,12 @@ .c-listing-item-title { word-break: break-word; - padding-right: spacing.spacing(); + padding-right: functions.spacing(); @include type.font-size(body-l, false); @include media('>mid') { - margin: spacing.spacing(a) 0; - padding-right: spacing.spacing(d); + margin: functions.spacing(a) 0; + padding-right: functions.spacing(d); } } @@ -279,7 +279,7 @@ top: -4px; color: dt.$color-content-positive; position: relative; - margin-right: spacing.spacing(a); + margin-right: functions.spacing(a); } .c-listing-item-details { @@ -289,7 +289,7 @@ @include media('>mid') { width: 45%; margin-top: auto; - padding: spacing.spacing() spacing.spacing() 0 spacing.spacing(d); + padding: functions.spacing() functions.spacing() 0 functions.spacing(d); } @include media('>=wide') { @@ -300,7 +300,7 @@ .c-listing-item-detailsRow { display : flex; align-items : center; - margin-bottom: spacing.spacing(a); + margin-bottom: functions.spacing(a); } .c-listing-item-detailsRow-icon { @@ -311,7 +311,7 @@ .c-listing-item-detailsRow-text { white-space: initial; - margin-left: spacing.spacing(); + margin-left: functions.spacing(); } .c-listing-item-badge { @@ -375,7 +375,7 @@ .c-listing-item-label { padding: 1px 4px; - margin-bottom: spacing.spacing(); + margin-bottom: functions.spacing(); @include type.font-size(caption, false); @include media('>mid') { @@ -389,7 +389,7 @@ @include media('>=mid') { top: 0; - right: spacing.spacing(); + right: functions.spacing(); position: absolute; } diff --git a/src/scss/components/optional/_menu.scss b/src/scss/components/optional/_menu.scss index a8c92ef..b76d8a9 100644 --- a/src/scss/components/optional/_menu.scss +++ b/src/scss/components/optional/_menu.scss @@ -1,8 +1,7 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../tools/mixins/type'; @use '../../tools/mixins/truncate'; -@use '../../tools/functions/spacing' as spacing; -@use '../../tools/functions/zIndex' as zIndex; +@use '../../tools/functions/index' as functions; @use '../../settings/include-media' as *; @mixin menu() { @@ -27,9 +26,9 @@ $menu-border-width : 1px; $menu-border-width--active : 2px; $menu-link-color : dt.$color-content-default; - $menu-link-padding : spacing.spacing() spacing.spacing(d); - $menu-positionTop : $menu-headerHeight + spacing.spacing(d); - $menu--condensed-link-padding : spacing.spacing(a); + $menu-link-padding : functions.spacing() functions.spacing(d); + $menu-positionTop : $menu-headerHeight + functions.spacing(d); + $menu--condensed-link-padding : functions.spacing(a); .c-menu { @extend %u-unstyled; @@ -54,7 +53,7 @@ } .c-menu-link { - padding: spacing.spacing(); + padding: functions.spacing(); } .c-menu-item:active, @@ -71,12 +70,12 @@ .c-menu-openBtnWrapper { display: flex; justify-content: center; - margin-bottom: spacing.spacing(f); - margin-top: -#{spacing.spacing(e)}; + margin-bottom: functions.spacing(f); + margin-top: -#{functions.spacing(e)}; position: sticky; top: $menu-positionTop; transition: 100ms top ease-in-out; - z-index: zIndex.zIndex(low); + z-index: functions.zIndex(low); } .c-menu-openBtn { @@ -84,11 +83,11 @@ align-items: center; border-radius: dt.$radius-rounded-d; display: flex; - padding: spacing.spacing() spacing.spacing(d); + padding: functions.spacing() functions.spacing(d); } .c-menu-closeBtn { - padding: spacing.spacing(d); + padding: functions.spacing(d); position: absolute; right: 0; top: 0; @@ -107,7 +106,7 @@ align-items: center; .c-menu-link { - padding-right: spacing.spacing(a); + padding-right: functions.spacing(a); } } } diff --git a/src/scss/components/optional/_modal.scss b/src/scss/components/optional/_modal.scss index 53fb1b2..598156d 100644 --- a/src/scss/components/optional/_modal.scss +++ b/src/scss/components/optional/_modal.scss @@ -1,8 +1,7 @@ @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 '../../tools/functions/index' as functions; @mixin modal() { /** @@ -23,7 +22,7 @@ $modal-borderRadius : dt.$radius-rounded-d; .c-modal { - z-index: zIndex.zIndex(high); + z-index: functions.zIndex(high); } .c-modal--popUp { @@ -50,7 +49,7 @@ } .c-modal-title--spacing { - padding: spacing.spacing(g) spacing.spacing(h) spacing.spacing(d); + padding: functions.spacing(g) functions.spacing(h) functions.spacing(d); } .c-modal-content { @@ -73,7 +72,7 @@ } .c-modal-closeBtn { - z-index: zIndex.zIndex(high); + z-index: functions.zIndex(high); position: fixed; } @@ -90,11 +89,11 @@ } .c-modal-closeBtn { - padding: spacing.spacing(); + padding: functions.spacing(); position: absolute; - right: spacing.spacing(d); - top: spacing.spacing(c); - z-index: zIndex.zIndex(high); + right: functions.spacing(d); + top: functions.spacing(c); + z-index: functions.zIndex(high); @include media('>=mid') { position: fixed; @@ -122,7 +121,7 @@ .c-modal-title { @include type.font-size($modal-titleFontSize); - padding: 0 spacing.spacing(e); + padding: 0 functions.spacing(e); @include media('>=mid') { @include type.font-size(heading-m); @@ -130,10 +129,10 @@ } .c-modal-title--spacing { - padding: spacing.spacing(e) spacing.spacing(h); + padding: functions.spacing(e) functions.spacing(h); @include media('>=mid') { - padding: spacing.spacing(g) spacing.spacing(h) spacing.spacing(d); + padding: functions.spacing(g) functions.spacing(h) functions.spacing(d); } } @@ -142,7 +141,7 @@ border-radius: $modal-borderRadius; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.12); display: none; - padding: spacing.spacing(e); + padding: functions.spacing(e); position: fixed; right: 50%; text-align: center; @@ -167,7 +166,7 @@ max-height: 90vh; max-width: 600px; overflow: hidden; - padding: spacing.spacing(g); + padding: functions.spacing(g); } } @@ -217,7 +216,7 @@ background-color: dt.$color-white; box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12); bottom: 0; - padding: spacing.spacing(e); + padding: functions.spacing(e); position: sticky; width: 100%; } @@ -225,7 +224,7 @@ .c-modal-textSeparator { font-weight: dt.$font-weight-bold; @include type.font-size(body-l); - margin: spacing.spacing(e) 0 0; + margin: functions.spacing(e) 0 0; @include media('>=narrow') { margin: 0; @@ -233,6 +232,6 @@ } .c-modal-textSeparator--spaceAround { - margin: spacing.spacing(e) 0 spacing.spacing(d); + margin: functions.spacing(e) 0 functions.spacing(d); } } diff --git a/src/scss/components/optional/_order-card.scss b/src/scss/components/optional/_order-card.scss index bf6985c..54c8a14 100644 --- a/src/scss/components/optional/_order-card.scss +++ b/src/scss/components/optional/_order-card.scss @@ -1,8 +1,7 @@ @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 '../../tools/functions/index' as functions; @use '../../settings/variables' as v; @mixin orderCard() { @@ -97,7 +96,7 @@ position: absolute; bottom: -1px; left: 0; - z-index: zIndex.zIndex(low); + z-index: functions.zIndex(low); } } @@ -125,8 +124,8 @@ @include type.font-size(22px); color: dt.$color-blue; text-align: center; - margin-top: spacing.spacing(); - padding: 2px spacing.spacing(c) spacing.spacing(c); + margin-top: functions.spacing(); + padding: 2px functions.spacing(c) functions.spacing(c); border-top: 1px solid dt.$color-border-subtle; } @@ -140,7 +139,7 @@ .c-orderCard-date { margin-top: 0; - margin-bottom: spacing.spacing(); + margin-bottom: functions.spacing(); color: dt.$color-support-neutral; display: block; } @@ -158,13 +157,13 @@ } .c-orderCard-orderTotal { - margin-right: spacing.spacing(); - margin-left: spacing.spacing(e); + margin-right: functions.spacing(); + margin-left: functions.spacing(e); align-self: flex-end; } .c-orderCard-content { - padding: spacing.spacing() spacing.spacing(d) 0; + padding: functions.spacing() functions.spacing(d) 0; color: dt.$color-content-interactive-tertiary; flex: 1 0 auto; display: flex; @@ -172,11 +171,11 @@ } .c-orderCard-yourFavourites-content { - padding: spacing.spacing() spacing.spacing(d); + padding: functions.spacing() functions.spacing(d); } .c-orderCard-content--defaultMessage { - padding: 0 spacing.spacing(d); + padding: 0 functions.spacing(d); @include type.font-size(body-l, false); } @@ -193,22 +192,22 @@ } .c-orderCard--inactive { - margin-left: spacing.spacing(f); + margin-left: functions.spacing(f); } .c-orderCard-header { flex-direction: row; align-items: baseline; display: flex; - margin-left: spacing.spacing(d); + margin-left: functions.spacing(d); @include media('>mid') { - margin-left: spacing.spacing(f); + margin-left: functions.spacing(f); } } .c-orderCard-seeAllText { width: fit-content; - margin-left: spacing.spacing(d); + margin-left: functions.spacing(d); } } diff --git a/src/scss/components/optional/_overflow-carousel.scss b/src/scss/components/optional/_overflow-carousel.scss index 94fe80b..4f36aa7 100644 --- a/src/scss/components/optional/_overflow-carousel.scss +++ b/src/scss/components/optional/_overflow-carousel.scss @@ -1,5 +1,5 @@ @use '../../settings/include-media' as *; -@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/index' as functions; @mixin overflowCarousel() { /** @@ -18,7 +18,7 @@ .c-overflowCarousel { @include media('mid') { - padding: spacing.spacing(d) spacing.spacing(f) spacing.spacing(); + padding: functions.spacing(d) functions.spacing(f) functions.spacing(); } .c-overflowCarousel-item { flex: 1 0 auto; - margin-right: spacing.spacing(); + margin-right: functions.spacing(); @include media('>=mid') { - margin-right: spacing.spacing(d); + margin-right: functions.spacing(d); } } } @@ -105,6 +105,6 @@ @mixin overflowCarouselContent() { display: inline-flex; white-space: nowrap; - padding-left: spacing.spacing(d); - padding-right: spacing.spacing(d); + padding-left: functions.spacing(d); + padding-right: functions.spacing(d); } diff --git a/src/scss/components/optional/_page-banner.scss b/src/scss/components/optional/_page-banner.scss index c4e618e..8cb523c 100644 --- a/src/scss/components/optional/_page-banner.scss +++ b/src/scss/components/optional/_page-banner.scss @@ -1,7 +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; +@use '../../tools/functions/index' as functions; @mixin pageBanner() { /** @@ -104,7 +104,7 @@ bottom: -1px; left: 0; width: 100%; - z-index: zIndex.zIndex(low); + z-index: functions.zIndex(low); @include media('>=mid') { background: url('#{v.$img-path-url}/decoration/rays--white--wide.svg') no-repeat bottom left; @@ -122,7 +122,7 @@ left: 0; right: 0; width: 100.1%; - z-index: zIndex.zIndex(low); + z-index: functions.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 94874fe..d9f3ce5 100644 --- a/src/scss/components/optional/_toast.scss +++ b/src/scss/components/optional/_toast.scss @@ -1,7 +1,6 @@ @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; +@use '../../tools/functions/index' as functions; @mixin toast() { /** @@ -65,12 +64,12 @@ color: $toast-textColor; height: $toast-height; opacity: 0.9; - padding: spacing.spacing(); + padding: functions.spacing(); position: absolute; text-align: center; transform: translateY($toast-translateY); width: calc(100% - 16px); - z-index: zIndex.zIndex(low); + z-index: functions.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 e166fbe..c01d69d 100644 --- a/src/scss/components/optional/_user-message.scss +++ b/src/scss/components/optional/_user-message.scss @@ -1,6 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../../settings/include-media' as *; -@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/index' as functions; @mixin userMessage() { /** @@ -16,13 +16,13 @@ color: dt.$color-white; background-color: dt.$color-orange; max-width: 100%; - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); } .c-userMessageContainer { max-width: 350px; margin: 0 auto; - padding: spacing.spacing(d) 0; + padding: functions.spacing(d) 0; display: flex; @include media('>=narrow') { @@ -46,7 +46,7 @@ } .c-userMessageText { - margin-left: spacing.spacing(d); + margin-left: functions.spacing(d); margin-top: 0; @include media('>=mid') { diff --git a/src/scss/objects/_buttons.scss b/src/scss/objects/_buttons.scss index 5d74e42..34ae41e 100644 --- a/src/scss/objects/_buttons.scss +++ b/src/scss/objects/_buttons.scss @@ -1,7 +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 '../tools/functions/index' as functions; @use '../settings/include-media' as *; @use '../trumps/utilities' as *; @@ -20,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.spacing(e); + $btn-default-padding : 10px functions.spacing(e); $btn-default-outline-color : dt.$color-focus; $btn-default-bgColor : dt.$color-interactive-brand; @@ -65,14 +65,14 @@ $btn-disabled-bgColor : dt.$color-disabled-01; $btn-disabled-textColor : dt.$color-content-disabled; - $btn-sizeLarge-padding : 14px spacing.spacing(e); + $btn-sizeLarge-padding : 14px functions.spacing(e); $btn-sizeLarge-loading-color : dt.$color-content-interactive-light; $btn-sizeSmall-font-size : 'body-l'; - $btn-sizeSmall-padding : spacing.spacing() spacing.spacing(d); + $btn-sizeSmall-padding : functions.spacing() functions.spacing(d); $btn-sizeXSmall-font-size : 'body-s'; - $btn-sizeXSmall-padding : 6px spacing.spacing(); + $btn-sizeXSmall-padding : 6px functions.spacing(); @include loading-indicator.loadingIndicator('medium'); @@ -137,7 +137,7 @@ } p + & { - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); } & .note { @@ -148,7 +148,7 @@ } } &[type='submit'] { - margin-top: spacing.spacing(d); + margin-top: functions.spacing(d); } } @@ -346,7 +346,7 @@ // Vertically space out multiple fullWidth buttons // same as .o-btn--fullWidth + .o-btn--fullWidth & + & { - margin-top: spacing.spacing(); + margin-top: functions.spacing(); } } diff --git a/src/scss/objects/_form-controls.scss b/src/scss/objects/_form-controls.scss index 944f25e..1716bbd 100644 --- a/src/scss/objects/_form-controls.scss +++ b/src/scss/objects/_form-controls.scss @@ -1,7 +1,6 @@ @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; +@use '../tools/functions/index' as functions; @mixin formControls() { /** @@ -45,7 +44,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.spacing(f); + $formControl-padding-left : functions.spacing(f); $formControl-width : 24px; $formControl-width--wide : 20px; $formControl-height : 24px; @@ -58,7 +57,7 @@ display: block; cursor: pointer; user-select: none; - padding: spacing.spacing(); + padding: functions.spacing(); padding-left: $formControl-padding-left; &:hover .o-formControl-indicator { @@ -85,7 +84,7 @@ .o-formControl-input { position: absolute; opacity: 0; - z-index: zIndex.zIndex(lowest); // Put the input behind the label so it doesn't overlay text + z-index: functions.zIndex(lowest); // Put the input behind the label so it doesn't overlay text &:focus { & + .o-formControl-indicator { @extend %u-elementFocus; } @@ -151,8 +150,8 @@ .o-formControl-icon { background-position: center 0; - left: spacing.spacing(); - min-width: spacing.spacing(c); + left: functions.spacing(); + min-width: functions.spacing(c); position: absolute; } diff --git a/src/scss/objects/_form-toggle.scss b/src/scss/objects/_form-toggle.scss index d45fe88..67600d1 100644 --- a/src/scss/objects/_form-toggle.scss +++ b/src/scss/objects/_form-toggle.scss @@ -1,9 +1,9 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/include-media' as *; -@use '../tools/functions/spacing' as spacing; +@use '../tools/functions/index' as functions; @use 'sass:math'; -$formToggle-padding : spacing.spacing() !default; +$formToggle-padding : functions.spacing() !default; $formToggle-border-color : dt.$color-border-default; $formToggle-border-color--interact : dt.$color-border-strong; $formToggle-border-color--checked : dt.$color-green; @@ -36,7 +36,7 @@ $formToggle-text--checked : dt.$color-green; .o-formToggle { position: relative; display: inline-block; - margin-bottom: spacing.spacing(); + margin-bottom: functions.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.spacing(f); + padding-left: functions.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.spacing(); + margin: 0 0 functions.spacing(); @include formToggle-large(); } } @@ -191,7 +191,7 @@ $formToggle-text--checked : dt.$color-green; height: 10px; position: absolute; margin-top: -4px; - left: spacing.spacing(); + left: functions.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.spacing(); + padding-left: functions.spacing(); @include media('>mid') { top: 50%; padding-left: 0; - right: spacing.spacing(); + right: functions.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.spacing(); + margin-left: functions.spacing(); } } diff --git a/src/scss/objects/_lists.scss b/src/scss/objects/_lists.scss index 86688f2..de06db9 100644 --- a/src/scss/objects/_lists.scss +++ b/src/scss/objects/_lists.scss @@ -1,6 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../tools/mixins/type'; -@use '../tools/functions/spacing' as spacing; +@use '../tools/functions/index' as functions; @mixin lists() { /** @@ -21,15 +21,15 @@ ul, ol { padding: 0; - margin: spacing.spacing(d) 0 0 spacing.spacing(d); + margin: functions.spacing(d) 0 0 functions.spacing(d); li { - margin-bottom: spacing.spacing(); + margin-bottom: functions.spacing(); } ul, ol { - margin-top: spacing.spacing(); + margin-top: functions.spacing(); } } @@ -43,7 +43,7 @@ color: $list-bullet-color; content: '\2022'; /* Unicode for circle character */ font-size: 1.8em; - padding-right: spacing.spacing(); + padding-right: functions.spacing(); position: relative; top: 0.15em; margin-left: -1.5rem; @@ -52,7 +52,7 @@ ol { > li { - padding-left: spacing.spacing(); + padding-left: functions.spacing(); } } @@ -60,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.spacing(f); + margin-bottom: functions.spacing(f); > div { font-weight: dt.$font-weight-regular; diff --git a/src/scss/objects/_tables.scss b/src/scss/objects/_tables.scss index 663a983..59bf087 100644 --- a/src/scss/objects/_tables.scss +++ b/src/scss/objects/_tables.scss @@ -1,7 +1,6 @@ @use '@justeat/pie-design-tokens/dist/jet' as dt; @use '../settings/variables' as v; -@use '../tools/functions/units'; -@use '../tools/functions/spacing' as spacing; +@use '../tools/functions/index' as functions; @mixin tables() { /** @@ -41,8 +40,8 @@ .table { width: 100%; max-width: 100%; - margin-top: spacing.spacing(f); - margin-bottom: spacing.spacing(f); + margin-top: functions.spacing(f); + margin-bottom: functions.spacing(f); border-spacing: 0; background-color: $table-bgColor; border: $table-border--width solid $table-border--color; @@ -55,7 +54,7 @@ th, td { padding: $table-cell-padding; - line-height: units.$line-height-base; + line-height: functions.$line-height-base; vertical-align: top; border-right: 1px solid $table-verticalBorder--color; } diff --git a/src/scss/tools/helpers/_breakpoints.scss b/src/scss/tools/helpers/_breakpoints.scss index 4b4f18d..6768a08 100644 --- a/src/scss/tools/helpers/_breakpoints.scss +++ b/src/scss/tools/helpers/_breakpoints.scss @@ -1,9 +1,8 @@ @use '../../settings/variables' as v; -@use '../functions/units'; -@use '../functions/px-to-em'; +@use '../functions/index' as functions; // Lifted out of the variables file to fix circular reference issues -$fozzie-breakpoints: px-to-em.map-to-em(( +$fozzie-breakpoints: functions.map-to-em(( tiny : 375px, narrow : 414px, // narrow devices narrowMid : 600px, // narrow-mid tweakpoint @@ -14,7 +13,7 @@ $fozzie-breakpoints: px-to-em.map-to-em(( @function populate-breakpoints() { $breakpointString: ''; - $breakpointsPx: units.map-to-px($fozzie-breakpoints, 16); + $breakpointsPx: functions.map-to-px($fozzie-breakpoints, 16); @each $name, $value in $breakpointsPx { $breakpointString: $breakpointString + '#{$name}:#{$value},'; diff --git a/src/scss/tools/helpers/_code-highlighting.scss b/src/scss/tools/helpers/_code-highlighting.scss index 45db407..ea07743 100644 --- a/src/scss/tools/helpers/_code-highlighting.scss +++ b/src/scss/tools/helpers/_code-highlighting.scss @@ -1,7 +1,7 @@ @use '../../settings/variables' as v; @use '../../settings/include-media' as *; @use '../../tools/mixins/type'; -@use '../../tools/functions/spacing' as spacing; +@use '../../tools/functions/index' as functions; /** * Code Highlighting @@ -49,7 +49,7 @@ code[class*='language-'] ::selection { /* Code blocks */ pre[class*='language-'] { padding: 1em; - margin: spacing.spacing(d) 0; + margin: functions.spacing(d) 0; overflow: auto; } @@ -169,7 +169,7 @@ code { pre { display: block; padding: floor(v.$spacing(d) / 2); - margin: spacing.spacing(d) 0; + margin: functions.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 9f12ef4..fe79140 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' as spacing; +@use '../functions/index' as functions; // // ========================================================================== @@ -15,7 +15,7 @@ // Override default values // @include bordered(10px, 30px, green); -@mixin bordered($bordered-radius: v.$border-radius, $bordered-spacing : spacing.spacing(e), $bordered-colour: dt.$color-border-strong) { // stylelint-disable-line max-line-length +@mixin bordered($bordered-radius: v.$border-radius, $bordered-spacing : functions.spacing(e), $bordered-colour: dt.$color-border-strong) { // stylelint-disable-line max-line-length border: 1px solid $bordered-colour; padding: $bordered-spacing; border-radius: $bordered-radius; diff --git a/src/scss/tools/mixins/_type.scss b/src/scss/tools/mixins/_type.scss index 17f8365..5d5994c 100644 --- a/src/scss/tools/mixins/_type.scss +++ b/src/scss/tools/mixins/_type.scss @@ -1,6 +1,5 @@ @use '../../settings/variables' as v; -@use '../functions/strip-units'; -@use '../functions/units'; +@use '../functions/index' as functions; // ========================================================================== // Typography mixins @@ -11,7 +10,7 @@ @use 'sass:math'; @mixin rem($property, $sizeValue: v.$font-size-base) { - $unitlessSizeValue: strip-units.strip-units($sizeValue); + $unitlessSizeValue: functions.strip-units($sizeValue); $remValue: math.div($unitlessSizeValue, v.$font-size-base); #{$property}: ceil($unitlessSizeValue) + px; @@ -21,7 +20,7 @@ // EM // @include em(margin, $font-size-base); @mixin em($property, $sizeValue: v.$font-size-base) { - #{$property}: math.div(strip-units.strip-units($sizeValue), v.$font-size-base) + em; + #{$property}: math.div(functions.strip-units($sizeValue), v.$font-size-base) + em; } /** @@ -59,7 +58,7 @@ @if length($font-list) > 1 and $line-height == true { $line-height: nth($font-list, 2); // get the second part of the font definition list - line-height: units.line-height($font-size, $line-height); + line-height: functions.line-height($font-size, $line-height); } } @else { @if $relativeToParent == true { diff --git a/src/scss/trumps/_spacing.scss b/src/scss/trumps/_spacing.scss index 5029545..fc73101 100644 --- a/src/scss/trumps/_spacing.scss +++ b/src/scss/trumps/_spacing.scss @@ -1,5 +1,5 @@ @use '../tools/mixins/utilities'; -@use '../tools/functions/spacing'; +@use '../tools/functions/index' as functions; @mixin trumps-spacing() { @@ -33,33 +33,33 @@ // ========================================================================== @include utilities.spacing-classes(utilities.$spacing-map, 'spacing') using ($spacing-value) { - margin: spacing.spacing(#{$spacing-value}) !important; + margin: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'top') using ($spacing-value) { - margin-top: spacing.spacing(#{$spacing-value}) !important; + margin-top: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'bottom') using ($spacing-value) { - margin-bottom: spacing.spacing(#{$spacing-value}) !important; + margin-bottom: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'left') using ($spacing-value) { - margin-left: spacing.spacing(#{$spacing-value}) !important; + margin-left: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'right') using ($spacing-value) { - margin-right: spacing.spacing(#{$spacing-value}) !important; + margin-right: functions.spacing(#{$spacing-value}) !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; + margin-left: functions.spacing(#{$spacing-value}) !important; + margin-right: functions.spacing(#{$spacing-value}) !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; + margin-bottom: functions.spacing(#{$spacing-value}) !important; + margin-top: functions.spacing(#{$spacing-value}) !important; } @@ -68,32 +68,32 @@ // ========================================================================== @include utilities.spacing-classes(utilities.$spacing-map, 'pad') using ($spacing-value) { - padding: spacing.spacing(#{$spacing-value}) !important; + padding: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacing-value) { - padding-top: spacing.spacing(#{$spacing-value}) !important; + padding-top: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'bottom') using ($spacing-value) { - padding-bottom: spacing.spacing(#{$spacing-value}) !important; + padding-bottom: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'left') using ($spacing-value) { - padding-left: spacing.spacing(#{$spacing-value}) !important; + padding-left: functions.spacing(#{$spacing-value}) !important; } @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'right') using ($spacing-value) { - padding-right: spacing.spacing(#{$spacing-value}) !important; + padding-right: functions.spacing(#{$spacing-value}) !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; + padding-left: functions.spacing(#{$spacing-value}) !important; + padding-right: functions.spacing(#{$spacing-value}) !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; + padding-bottom: functions.spacing(#{$spacing-value}) !important; + padding-top: functions.spacing(#{$spacing-value}) !important; } } diff --git a/src/scss/trumps/_utilities.scss b/src/scss/trumps/_utilities.scss index 802172b..88c4084 100644 --- a/src/scss/trumps/_utilities.scss +++ b/src/scss/trumps/_utilities.scss @@ -2,8 +2,7 @@ @use '../settings/include-media' as *; @use '../tools/mixins/border'; @use '../tools/mixins/truncate'; -@use '../tools/functions/spacing'; -@use '../tools/functions/zIndex'; +@use '../tools/functions/index' as functions; // ==================== // @TODO - MOVE TO DIFFERENT FILE. @@ -168,14 +167,14 @@ .is-sticky { width: 100%; - z-index: zIndex.zIndex(mid); + z-index: functions.zIndex(mid); position: fixed; transition: top 0.2s ease; } .u-sticky { position: sticky !important; - top: spacing.spacing(d); + top: functions.spacing(d); } .u-absolutelyCentered { @@ -199,7 +198,7 @@ } .u-textPad { - padding-left: spacing.spacing(f) !important; + padding-left: functions.spacing(f) !important; } .u-text-truncate { @@ -238,7 +237,7 @@ } .u-text-indent { - margin-left: spacing.spacing(d); + margin-left: functions.spacing(d); } // @@ -288,37 +287,37 @@ } .u-spacingTop { - margin-top: spacing.spacing() !important; + margin-top: functions.spacing() !important; } .u-spacingTop--small { - margin-top: spacing.spacing(a) !important; + margin-top: functions.spacing(a) !important; } .u-spacingTop--large { - margin-top: spacing.spacing(d) !important; + margin-top: functions.spacing(d) !important; } .u-spacingRight { - margin-right: spacing.spacing() !important; + margin-right: functions.spacing() !important; } .u-spacingBottom { - margin-bottom: spacing.spacing() !important; + margin-bottom: functions.spacing() !important; } .u-spacingBottom--large { - margin-bottom: spacing.spacing(d) !important; + margin-bottom: functions.spacing(d) !important; } .u-spacingBottom--large--aboveMid { @include media('>=mid') { - margin-bottom: spacing.spacing(d); + margin-bottom: functions.spacing(d); } } .u-spacingLeft { - margin-left: spacing.spacing() !important; + margin-left: functions.spacing() !important; } // @@ -330,16 +329,16 @@ } .u-padTop { - padding-top: spacing.spacing() !important; + padding-top: functions.spacing() !important; } .u-padTop--large { - padding-top: spacing.spacing(d) !important; + padding-top: functions.spacing(d) !important; } .u-padTop--large--aboveMid { @include media('>=mid') { - padding-top: spacing.spacing(d) !important; + padding-top: functions.spacing(d) !important; } } @@ -366,7 +365,7 @@ position: fixed; right: 0; top: 0; - z-index: zIndex.zIndex(low); + z-index: functions.zIndex(low); } } @@ -438,7 +437,7 @@ // Misc classes // ========================================================================== .u-shadowBottom--belowMid { - padding-bottom: spacing.spacing(h); + padding-bottom: functions.spacing(h); @include media('