From 8400065eb432737fe042cf38ea58682dc26d6ae7 Mon Sep 17 00:00:00 2001 From: pkd2512 Date: Tue, 22 Apr 2025 16:48:43 +0200 Subject: [PATCH 01/10] update tokens and Block --- src/components/Article/Article.mdx | 2 +- src/components/Article/Article.stories.svelte | 4 +- src/components/Block/Block.stories.svelte | 4 +- src/components/Framer/Resizer/index.svelte | 4 +- .../HeroHeadline/HeroHeadline.svelte | 2 +- src/components/SiteFooter/CompanyLinks.svelte | 10 +- src/components/SiteFooter/LegalLinks.svelte | 6 +- src/components/SiteFooter/QuickLinks.svelte | 6 +- .../SiteFooter/SiteFooter.stories.svelte | 2 +- .../SiteHeader/MobileMenu/index.svelte | 12 +- .../SiteHeader/NavBar/DownArrow.svelte | 2 +- .../NavBar/NavDropdown/Spinner/index.svelte | 2 +- .../NavBar/NavDropdown/index.svelte | 12 +- src/components/SiteHeader/NavBar/index.svelte | 2 +- .../SiteHeader/SiteHeader.stories.svelte | 2 +- src/components/SiteHeader/SiteHeader.svelte | 8 +- src/components/Spinner/Spinner.svelte | 2 +- .../ToolsHeader/ToolsHeader.stories.svelte | 2 +- src/scss/tokens/sizing/_width.scss | 4 +- src/scss/tokens/spacers/_fluid-margin.scss | 32 +- src/scss/tokens/spacers/_fluid-padding.scss | 32 +- src/scss/tokens/spacers/_margin.scss | 48 +-- src/scss/tokens/spacers/_padding.scss | 32 +- .../tokens/spacers/mixins/_fluid-margin.scss | 336 +++++++++--------- .../tokens/spacers/mixins/_fluid-padding.scss | 176 ++++----- 25 files changed, 372 insertions(+), 372 deletions(-) diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx index 8015229e..6242425e 100644 --- a/src/components/Article/Article.mdx +++ b/src/components/Article/Article.mdx @@ -105,7 +105,7 @@ If you're not using our `Block` component, you can still inherit the column widt } &.fluid { width: calc(100% + 30px); - margin-left: -15px; + margin-inline-start: -15px; max-width: none; } } diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte index 79d69c36..f403f164 100644 --- a/src/components/Article/Article.stories.svelte +++ b/src/components/Article/Article.stories.svelte @@ -65,7 +65,7 @@ } :global(#article-story-basic, #article-column-widths-demo) { width: calc(100% + 30px); - margin-left: -15px; + margin-inline-start: -15px; } :global(#article-column-widths-demo) { background-color: #ddd; @@ -88,7 +88,7 @@ background: #81a1c1; margin-bottom: 2px; height: 50px; - padding-left: 3px; + padding-inline-start: 3px; color: white; font-size: 1rem; } diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte index 8441468d..42826ec0 100644 --- a/src/components/Block/Block.stories.svelte +++ b/src/components/Block/Block.stories.svelte @@ -129,7 +129,7 @@ background-color: #ddd; position: relative; width: calc(100% + 30px); - margin-left: -15px; + margin-inline-start: -15px; } :global(#block-demo-article .article-boundaries) { padding: 0 0 18px; @@ -153,7 +153,7 @@ #block-demo-article .label, #block-demo-article div.article-block.block-snap-widths-demo ) { - padding-left: 3px; + padding-inline-start: 3px; color: white; font-weight: 500; } diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte index 66652811..6eea7de8 100644 --- a/src/components/Framer/Resizer/index.svelte +++ b/src/components/Framer/Resizer/index.svelte @@ -199,10 +199,10 @@ } &.left { text-align: right; - padding-right: 3px; + padding-inline-end: 3px; } &.right { - padding-left: 6px; + padding-inline-start: 6px; text-align: left; } } diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte index afc25cc0..55c189c0 100644 --- a/src/components/HeroHeadline/HeroHeadline.svelte +++ b/src/components/HeroHeadline/HeroHeadline.svelte @@ -251,7 +251,7 @@ @media (max-width: 690px) { width: 100%; padding: 0 15px; - margin-left: 0; + margin-inline-start: 0; } } } diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte index 443dc930..33c9f092 100644 --- a/src/components/SiteFooter/CompanyLinks.svelte +++ b/src/components/SiteFooter/CompanyLinks.svelte @@ -70,8 +70,8 @@ } .company { - padding-top: 24px; - padding-bottom: 24px; + padding-block-start: 24px; + padding-block-end: 24px; box-sizing: border-box; .content-container { @@ -84,7 +84,7 @@ .content-container { box-sizing: border-box; - @include grids.spacing-single(padding-left padding-right); + @include grids.spacing-single(padding-inline-start padding-inline-end); } } .company .content-container { @@ -138,10 +138,10 @@ list-style: none; display: inline-block; vertical-align: middle; - margin-left: 16px; + margin-inline-start: 16px; &:first-child { - margin-left: 0; + margin-inline-start: 0; } } diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte index 306c78bb..b3ba19ef 100644 --- a/src/components/SiteFooter/LegalLinks.svelte +++ b/src/components/SiteFooter/LegalLinks.svelte @@ -73,8 +73,8 @@ } .legal { - padding-top: 24px; - padding-bottom: 24px; + padding-block-start: 24px; + padding-block-end: 24px; box-sizing: border-box; .content-container { @@ -87,7 +87,7 @@ .content-container { box-sizing: border-box; - @include grids.spacing-single(padding-left padding-right); + @include grids.spacing-single(padding-inline-start padding-inline-end); } } diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte index 19d2973a..648bcd4c 100644 --- a/src/components/SiteFooter/QuickLinks.svelte +++ b/src/components/SiteFooter/QuickLinks.svelte @@ -160,8 +160,8 @@ } .quick-links { - padding-top: 24px; - padding-bottom: 24px; + padding-block-start: 24px; + padding-block-end: 24px; box-sizing: border-box; .content-container { @@ -193,7 +193,7 @@ .content-container { box-sizing: border-box; - @include grids.spacing-single(padding-left padding-right); + @include grids.spacing-single(padding-inline-start padding-inline-end); } h3 { diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte index a41de20c..d05461ad 100644 --- a/src/components/SiteFooter/SiteFooter.stories.svelte +++ b/src/components/SiteFooter/SiteFooter.stories.svelte @@ -24,6 +24,6 @@ diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte index e2dc2dd0..8f279730 100644 --- a/src/components/SiteHeader/MobileMenu/index.svelte +++ b/src/components/SiteHeader/MobileMenu/index.svelte @@ -79,7 +79,7 @@ left: 0; width: 100%; height: 100%; - padding-bottom: 60px; + padding-block-end: 60px; box-sizing: border-box; background: var(--nav-background); color: var(--nav-primary); @@ -106,7 +106,7 @@ .close-button { width: 40px; height: 40px; - margin-left: auto; + margin-inline-start: auto; display: inline-block; vertical-align: top; outline: none; @@ -141,16 +141,16 @@ .header { border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey)); - @include spacing-single(padding-left padding-right); + @include spacing-single(padding-inline-start padding-inline-end); } .section { - padding-top: 16px; - padding-bottom: 16px; + padding-block-start: 16px; + padding-block-end: 16px; border-bottom: 1px solid var(--tr-muted-grey); width: 100%; max-width: 100%; - @include spacing-single(padding-left padding-right); + @include spacing-single(padding-inline-start padding-inline-end); .subsections { margin: 20px 0 0; diff --git a/src/components/SiteHeader/NavBar/DownArrow.svelte b/src/components/SiteHeader/NavBar/DownArrow.svelte index 23751bc3..24467c96 100644 --- a/src/components/SiteHeader/NavBar/DownArrow.svelte +++ b/src/components/SiteHeader/NavBar/DownArrow.svelte @@ -22,7 +22,7 @@ diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte index 876bd73d..a6e3cc37 100644 --- a/src/components/SiteHeader/SiteHeader.svelte +++ b/src/components/SiteHeader/SiteHeader.svelte @@ -155,7 +155,7 @@ height: $nav-height; justify-content: space-between; @include max-width; - @include grids.spacing-single(padding-left padding-right); + @include grids.spacing-single(padding-inline-start padding-inline-end); @include for-mobile { height: $mobile-nav-height; @@ -180,7 +180,7 @@ } .spacer-container { - margin-left: auto; + margin-inline-start: auto; display: flex; align-items: center; justify-content: flex-end; @@ -199,7 +199,7 @@ } .mobile-button-group { - margin-left: auto; + margin-inline-start: auto; display: flex; align-items: center; justify-content: flex-end; @@ -209,7 +209,7 @@ } .mobile-menu { - margin-left: 8px; + margin-inline-start: 8px; @include for-tablet-up { display: none; } diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte index be6dd41b..62cc38aa 100644 --- a/src/components/Spinner/Spinner.svelte +++ b/src/components/Spinner/Spinner.svelte @@ -61,7 +61,7 @@ .spinner-container { height: 0; - padding-bottom: 100%; + padding-block-end: 100%; color: var(--spinner-colour, #666); } diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte index e7685ec7..1c46b89f 100644 --- a/src/components/ToolsHeader/ToolsHeader.stories.svelte +++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte @@ -17,6 +17,6 @@ diff --git a/src/scss/tokens/sizing/_width.scss b/src/scss/tokens/sizing/_width.scss index 7ac8526a..a68c0c6a 100644 --- a/src/scss/tokens/sizing/_width.scss +++ b/src/scss/tokens/sizing/_width.scss @@ -3,7 +3,7 @@ } .w-full-fluid { width: calc(100% + 30px); - margin-left: -15px !important; + margin-inline-start: -15px !important; } .w-screen { width: 100vw; @@ -91,7 +91,7 @@ } .\!w-full-fluid { width: calc(100% + 30px) !important; - margin-left: -15px !important; + margin-inline-start: -15px !important; } .\!w-screen { width: 100vw !important; diff --git a/src/scss/tokens/spacers/_fluid-margin.scss b/src/scss/tokens/spacers/_fluid-margin.scss index bb641847..629c903f 100644 --- a/src/scss/tokens/spacers/_fluid-margin.scss +++ b/src/scss/tokens/spacers/_fluid-margin.scss @@ -5,48 +5,48 @@ margin: $value; } %fmt-#{$level} { - margin-top: $value; + margin-block-start: $value; } %fmr-#{$level} { - margin-right: $value; + margin-inline-end: $value; } %fmb-#{$level} { - margin-bottom: $value; + margin-block-end: $value; } %fml-#{$level} { - margin-left: $value; + margin-inline-start: $value; } %fmx-#{$level} { - margin-left: $value; - margin-right: $value; + margin-inline-start: $value; + margin-inline-end: $value; } %fmy-#{$level} { - margin-top: $value; - margin-bottom: $value; + margin-block-start: $value; + margin-block-end: $value; } %\!fm-#{$level} { margin: $value !important; } %\!fmt-#{$level} { - margin-top: $value !important; + margin-block-start: $value !important; } %\!fmr-#{$level} { - margin-right: $value !important; + margin-inline-end: $value !important; } %\!fmb-#{$level} { - margin-bottom: $value !important; + margin-block-end: $value !important; } %\!fml-#{$level} { - margin-left: $value !important; + margin-inline-start: $value !important; } %\!fmx-#{$level} { - margin-left: $value !important; - margin-right: $value !important; + margin-inline-start: $value !important; + margin-inline-end: $value !important; } %\!fmy-#{$level} { - margin-top: $value !important; - margin-bottom: $value !important; + margin-block-start: $value !important; + margin-block-end: $value !important; } } diff --git a/src/scss/tokens/spacers/_fluid-padding.scss b/src/scss/tokens/spacers/_fluid-padding.scss index 9a0f0306..4acc15be 100644 --- a/src/scss/tokens/spacers/_fluid-padding.scss +++ b/src/scss/tokens/spacers/_fluid-padding.scss @@ -5,48 +5,48 @@ padding: $value; } %fpt-#{$level} { - padding-top: $value; + padding-block-start: $value; } %fpr-#{$level} { - padding-right: $value; + padding-inline-end: $value; } %fpb-#{$level} { - padding-bottom: $value; + padding-block-end: $value; } %fpl-#{$level} { - padding-left: $value; + padding-inline-start: $value; } %fpx-#{$level} { - padding-right: $value; - padding-left: $value; + padding-inline-end: $value; + padding-inline-start: $value; } %fpy-#{$level} { - padding-top: $value; - padding-bottom: $value; + padding-block-start: $value; + padding-block-end: $value; } %\!fp-#{$level} { padding: $value !important; } %\!fpt-#{$level} { - padding-top: $value !important; + padding-block-start: $value !important; } %\!fpr-#{$level} { - padding-right: $value !important; + padding-inline-end: $value !important; } %\!fpb-#{$level} { - padding-bottom: $value !important; + padding-block-end: $value !important; } %\!fpl-#{$level} { - padding-left: $value !important; + padding-inline-start: $value !important; } %\!fpx-#{$level} { - padding-right: $value !important; - padding-left: $value !important; + padding-inline-end: $value !important; + padding-inline-start: $value !important; } %\!fpy-#{$level} { - padding-top: $value !important; - padding-bottom: $value !important; + padding-block-start: $value !important; + padding-block-end: $value !important; } } diff --git a/src/scss/tokens/spacers/_margin.scss b/src/scss/tokens/spacers/_margin.scss index d601c1b2..d2d06ea2 100644 --- a/src/scss/tokens/spacers/_margin.scss +++ b/src/scss/tokens/spacers/_margin.scss @@ -40,48 +40,48 @@ $margin-levels: ( margin: $value; } .mt-#{$level} { - margin-top: $value; + margin-block-start: $value; } .mr-#{$level} { - margin-right: $value; + margin-inline-end: $value; } .mb-#{$level} { - margin-bottom: $value; + margin-block-end: $value; } .ml-#{$level} { - margin-left: $value; + margin-inline-start: $value; } .mx-#{$level} { - margin-right: $value; - margin-left: $value; + margin-inline-end: $value; + margin-inline-start: $value; } .my-#{$level} { - margin-top: $value; - margin-bottom: $value; + margin-block-start: $value; + margin-block-end: $value; } .\!m-#{$level} { margin: $value !important; } .\!mt-#{$level} { - margin-top: $value !important; + margin-block-start: $value !important; } .\!mr-#{$level} { - margin-right: $value !important; + margin-inline-end: $value !important; } .\!mb-#{$level} { - margin-bottom: $value !important; + margin-block-end: $value !important; } .\!ml-#{$level} { - margin-left: $value !important; + margin-inline-start: $value !important; } .\!mx-#{$level} { - margin-right: $value !important; - margin-left: $value !important; + margin-inline-end: $value !important; + margin-inline-start: $value !important; } .\!my-#{$level} { - margin-top: $value !important; - margin-bottom: $value !important; + margin-block-start: $value !important; + margin-block-end: $value !important; } } @@ -89,21 +89,21 @@ $margin-levels: ( margin: auto; } .mx-auto { - margin-right: auto; - margin-left: auto; + margin-inline-end: auto; + margin-inline-start: auto; } .my-auto { - margin-top: auto; - margin-bottom: auto; + margin-block-start: auto; + margin-block-end: auto; } .\!m-auto { margin: auto !important; } .\!mx-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-inline-end: auto !important; + margin-inline-start: auto !important; } .\!my-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-block-start: auto !important; + margin-block-end: auto !important; } diff --git a/src/scss/tokens/spacers/_padding.scss b/src/scss/tokens/spacers/_padding.scss index 6d1a94c7..bcc18c83 100644 --- a/src/scss/tokens/spacers/_padding.scss +++ b/src/scss/tokens/spacers/_padding.scss @@ -40,47 +40,47 @@ $padding-levels: ( padding: $value; } .pt-#{$level} { - padding-top: $value; + padding-block-start: $value; } .pr-#{$level} { - padding-right: $value; + padding-inline-end: $value; } .pb-#{$level} { - padding-bottom: $value; + padding-block-end: $value; } .pl-#{$level} { - padding-left: $value; + padding-inline-start: $value; } .px-#{$level} { - padding-right: $value; - padding-left: $value; + padding-inline-end: $value; + padding-inline-start: $value; } .py-#{$level} { - padding-top: $value; - padding-bottom: $value; + padding-block-start: $value; + padding-block-end: $value; } .\!p-#{$level} { padding: $value !important; } .\!pt-#{$level} { - padding-top: $value !important; + padding-block-start: $value !important; } .\!pr-#{$level} { - padding-right: $value !important; + padding-inline-end: $value !important; } .\!pb-#{$level} { - padding-bottom: $value !important; + padding-block-end: $value !important; } .\!pl-#{$level} { - padding-left: $value !important; + padding-inline-start: $value !important; } .\!px-#{$level} { - padding-right: $value !important; - padding-left: $value !important; + padding-inline-end: $value !important; + padding-inline-start: $value !important; } .\!py-#{$level} { - padding-top: $value !important; - padding-bottom: $value !important; + padding-block-start: $value !important; + padding-block-end: $value !important; } } diff --git a/src/scss/tokens/spacers/mixins/_fluid-margin.scss b/src/scss/tokens/spacers/mixins/_fluid-margin.scss index 36bec9ab..a8e818ac 100644 --- a/src/scss/tokens/spacers/mixins/_fluid-margin.scss +++ b/src/scss/tokens/spacers/mixins/_fluid-margin.scss @@ -20,491 +20,491 @@ $fluid-margin-levels: ( margin: map.get($fluid-margin-levels, '0'); } @mixin fmx-0 { - margin-left: map.get($fluid-margin-levels, '0'); - margin-right: map.get($fluid-margin-levels, '0'); + margin-inline-start: map.get($fluid-margin-levels, '0'); + margin-inline-end: map.get($fluid-margin-levels, '0'); } @mixin fmy-0 { - margin-top: map.get($fluid-margin-levels, '0'); - margin-bottom: map.get($fluid-margin-levels, '0'); + margin-block-start: map.get($fluid-margin-levels, '0'); + margin-block-end: map.get($fluid-margin-levels, '0'); } @mixin fmt-0 { - margin-top: map.get($fluid-margin-levels, '0'); + margin-block-start: map.get($fluid-margin-levels, '0'); } @mixin fmb-0 { - margin-bottom: map.get($fluid-margin-levels, '0'); + margin-block-end: map.get($fluid-margin-levels, '0'); } @mixin fml-0 { - margin-left: map.get($fluid-margin-levels, '0'); + margin-inline-start: map.get($fluid-margin-levels, '0'); } @mixin fmr-0 { - margin-right: map.get($fluid-margin-levels, '0'); + margin-inline-end: map.get($fluid-margin-levels, '0'); } @mixin \!fm-0 { margin: map.get($fluid-margin-levels, '0') !important; } @mixin \!fmx-0 { - margin-left: map.get($fluid-margin-levels, '0') !important; - margin-right: map.get($fluid-margin-levels, '0') !important; + margin-inline-start: map.get($fluid-margin-levels, '0') !important; + margin-inline-end: map.get($fluid-margin-levels, '0') !important; } @mixin \!fmy-0 { - margin-top: map.get($fluid-margin-levels, '0') !important; - margin-bottom: map.get($fluid-margin-levels, '0') !important; + margin-block-start: map.get($fluid-margin-levels, '0') !important; + margin-block-end: map.get($fluid-margin-levels, '0') !important; } @mixin \!fmt-0 { - margin-top: map.get($fluid-margin-levels, '0') !important; + margin-block-start: map.get($fluid-margin-levels, '0') !important; } @mixin \!fmb-0 { - margin-bottom: map.get($fluid-margin-levels, '0') !important; + margin-block-end: map.get($fluid-margin-levels, '0') !important; } @mixin \!fml-0 { - margin-left: map.get($fluid-margin-levels, '0') !important; + margin-inline-start: map.get($fluid-margin-levels, '0') !important; } @mixin \!fmr-0 { - margin-right: map.get($fluid-margin-levels, '0') !important; + margin-inline-end: map.get($fluid-margin-levels, '0') !important; } @mixin fm-1 { margin: map.get($fluid-margin-levels, '1'); } @mixin fmx-1 { - margin-left: map.get($fluid-margin-levels, '1'); - margin-right: map.get($fluid-margin-levels, '1'); + margin-inline-start: map.get($fluid-margin-levels, '1'); + margin-inline-end: map.get($fluid-margin-levels, '1'); } @mixin fmy-1 { - margin-top: map.get($fluid-margin-levels, '1'); - margin-bottom: map.get($fluid-margin-levels, '1'); + margin-block-start: map.get($fluid-margin-levels, '1'); + margin-block-end: map.get($fluid-margin-levels, '1'); } @mixin fmt-1 { - margin-top: map.get($fluid-margin-levels, '1'); + margin-block-start: map.get($fluid-margin-levels, '1'); } @mixin fmb-1 { - margin-bottom: map.get($fluid-margin-levels, '1'); + margin-block-end: map.get($fluid-margin-levels, '1'); } @mixin fml-1 { - margin-left: map.get($fluid-margin-levels, '1'); + margin-inline-start: map.get($fluid-margin-levels, '1'); } @mixin fmr-1 { - margin-right: map.get($fluid-margin-levels, '1'); + margin-inline-end: map.get($fluid-margin-levels, '1'); } @mixin \!fm-1 { margin: map.get($fluid-margin-levels, '1') !important; } @mixin \!fmx-1 { - margin-left: map.get($fluid-margin-levels, '1') !important; - margin-right: map.get($fluid-margin-levels, '1') !important; + margin-inline-start: map.get($fluid-margin-levels, '1') !important; + margin-inline-end: map.get($fluid-margin-levels, '1') !important; } @mixin \!fmy-1 { - margin-top: map.get($fluid-margin-levels, '1') !important; - margin-bottom: map.get($fluid-margin-levels, '1') !important; + margin-block-start: map.get($fluid-margin-levels, '1') !important; + margin-block-end: map.get($fluid-margin-levels, '1') !important; } @mixin \!fmt-1 { - margin-top: map.get($fluid-margin-levels, '1') !important; + margin-block-start: map.get($fluid-margin-levels, '1') !important; } @mixin \!fmb-1 { - margin-bottom: map.get($fluid-margin-levels, '1') !important; + margin-block-end: map.get($fluid-margin-levels, '1') !important; } @mixin \!fml-1 { - margin-left: map.get($fluid-margin-levels, '1') !important; + margin-inline-start: map.get($fluid-margin-levels, '1') !important; } @mixin \!fmr-1 { - margin-right: map.get($fluid-margin-levels, '1') !important; + margin-inline-end: map.get($fluid-margin-levels, '1') !important; } @mixin fm-2 { margin: map.get($fluid-margin-levels, '2'); } @mixin fmx-2 { - margin-left: map.get($fluid-margin-levels, '2'); - margin-right: map.get($fluid-margin-levels, '2'); + margin-inline-start: map.get($fluid-margin-levels, '2'); + margin-inline-end: map.get($fluid-margin-levels, '2'); } @mixin fmy-2 { - margin-top: map.get($fluid-margin-levels, '2'); - margin-bottom: map.get($fluid-margin-levels, '2'); + margin-block-start: map.get($fluid-margin-levels, '2'); + margin-block-end: map.get($fluid-margin-levels, '2'); } @mixin fmt-2 { - margin-top: map.get($fluid-margin-levels, '2'); + margin-block-start: map.get($fluid-margin-levels, '2'); } @mixin fmb-2 { - margin-bottom: map.get($fluid-margin-levels, '2'); + margin-block-end: map.get($fluid-margin-levels, '2'); } @mixin fml-2 { - margin-left: map.get($fluid-margin-levels, '2'); + margin-inline-start: map.get($fluid-margin-levels, '2'); } @mixin fmr-2 { - margin-right: map.get($fluid-margin-levels, '2'); + margin-inline-end: map.get($fluid-margin-levels, '2'); } @mixin \!fm-2 { margin: map.get($fluid-margin-levels, '2') !important; } @mixin \!fmx-2 { - margin-left: map.get($fluid-margin-levels, '2') !important; - margin-right: map.get($fluid-margin-levels, '2') !important; + margin-inline-start: map.get($fluid-margin-levels, '2') !important; + margin-inline-end: map.get($fluid-margin-levels, '2') !important; } @mixin \!fmy-2 { - margin-top: map.get($fluid-margin-levels, '2') !important; - margin-bottom: map.get($fluid-margin-levels, '2') !important; + margin-block-start: map.get($fluid-margin-levels, '2') !important; + margin-block-end: map.get($fluid-margin-levels, '2') !important; } @mixin \!fmt-2 { - margin-top: map.get($fluid-margin-levels, '2') !important; + margin-block-start: map.get($fluid-margin-levels, '2') !important; } @mixin \!fmb-2 { - margin-bottom: map.get($fluid-margin-levels, '2') !important; + margin-block-end: map.get($fluid-margin-levels, '2') !important; } @mixin \!fml-2 { - margin-left: map.get($fluid-margin-levels, '2') !important; + margin-inline-start: map.get($fluid-margin-levels, '2') !important; } @mixin \!fmr-2 { - margin-right: map.get($fluid-margin-levels, '2') !important; + margin-inline-end: map.get($fluid-margin-levels, '2') !important; } @mixin fm-3 { margin: map.get($fluid-margin-levels, '3'); } @mixin fmx-3 { - margin-left: map.get($fluid-margin-levels, '3'); - margin-right: map.get($fluid-margin-levels, '3'); + margin-inline-start: map.get($fluid-margin-levels, '3'); + margin-inline-end: map.get($fluid-margin-levels, '3'); } @mixin fmy-3 { - margin-top: map.get($fluid-margin-levels, '3'); - margin-bottom: map.get($fluid-margin-levels, '3'); + margin-block-start: map.get($fluid-margin-levels, '3'); + margin-block-end: map.get($fluid-margin-levels, '3'); } @mixin fmt-3 { - margin-top: map.get($fluid-margin-levels, '3'); + margin-block-start: map.get($fluid-margin-levels, '3'); } @mixin fmb-3 { - margin-bottom: map.get($fluid-margin-levels, '3'); + margin-block-end: map.get($fluid-margin-levels, '3'); } @mixin fml-3 { - margin-left: map.get($fluid-margin-levels, '3'); + margin-inline-start: map.get($fluid-margin-levels, '3'); } @mixin fmr-3 { - margin-right: map.get($fluid-margin-levels, '3'); + margin-inline-end: map.get($fluid-margin-levels, '3'); } @mixin \!fm-3 { margin: map.get($fluid-margin-levels, '3') !important; } @mixin \!fmx-3 { - margin-left: map.get($fluid-margin-levels, '3') !important; - margin-right: map.get($fluid-margin-levels, '3') !important; + margin-inline-start: map.get($fluid-margin-levels, '3') !important; + margin-inline-end: map.get($fluid-margin-levels, '3') !important; } @mixin \!fmy-3 { - margin-top: map.get($fluid-margin-levels, '3') !important; - margin-bottom: map.get($fluid-margin-levels, '3') !important; + margin-block-start: map.get($fluid-margin-levels, '3') !important; + margin-block-end: map.get($fluid-margin-levels, '3') !important; } @mixin \!fmt-3 { - margin-top: map.get($fluid-margin-levels, '3') !important; + margin-block-start: map.get($fluid-margin-levels, '3') !important; } @mixin \!fmb-3 { - margin-bottom: map.get($fluid-margin-levels, '3') !important; + margin-block-end: map.get($fluid-margin-levels, '3') !important; } @mixin \!fml-3 { - margin-left: map.get($fluid-margin-levels, '3') !important; + margin-inline-start: map.get($fluid-margin-levels, '3') !important; } @mixin \!fmr-3 { - margin-right: map.get($fluid-margin-levels, '3') !important; + margin-inline-end: map.get($fluid-margin-levels, '3') !important; } @mixin fm-4 { margin: map.get($fluid-margin-levels, '4'); } @mixin fmx-4 { - margin-left: map.get($fluid-margin-levels, '4'); - margin-right: map.get($fluid-margin-levels, '4'); + margin-inline-start: map.get($fluid-margin-levels, '4'); + margin-inline-end: map.get($fluid-margin-levels, '4'); } @mixin fmy-4 { - margin-top: map.get($fluid-margin-levels, '4'); - margin-bottom: map.get($fluid-margin-levels, '4'); + margin-block-start: map.get($fluid-margin-levels, '4'); + margin-block-end: map.get($fluid-margin-levels, '4'); } @mixin fmt-4 { - margin-top: map.get($fluid-margin-levels, '4'); + margin-block-start: map.get($fluid-margin-levels, '4'); } @mixin fmb-4 { - margin-bottom: map.get($fluid-margin-levels, '4'); + margin-block-end: map.get($fluid-margin-levels, '4'); } @mixin fml-4 { - margin-left: map.get($fluid-margin-levels, '4'); + margin-inline-start: map.get($fluid-margin-levels, '4'); } @mixin fmr-4 { - margin-right: map.get($fluid-margin-levels, '4'); + margin-inline-end: map.get($fluid-margin-levels, '4'); } @mixin \!fm-4 { margin: map.get($fluid-margin-levels, '4') !important; } @mixin \!fmx-4 { - margin-left: map.get($fluid-margin-levels, '4') !important; - margin-right: map.get($fluid-margin-levels, '4') !important; + margin-inline-start: map.get($fluid-margin-levels, '4') !important; + margin-inline-end: map.get($fluid-margin-levels, '4') !important; } @mixin \!fmy-4 { - margin-top: map.get($fluid-margin-levels, '4') !important; - margin-bottom: map.get($fluid-margin-levels, '4') !important; + margin-block-start: map.get($fluid-margin-levels, '4') !important; + margin-block-end: map.get($fluid-margin-levels, '4') !important; } @mixin \!fmt-4 { - margin-top: map.get($fluid-margin-levels, '4') !important; + margin-block-start: map.get($fluid-margin-levels, '4') !important; } @mixin \!fmb-4 { - margin-bottom: map.get($fluid-margin-levels, '4') !important; + margin-block-end: map.get($fluid-margin-levels, '4') !important; } @mixin \!fml-4 { - margin-left: map.get($fluid-margin-levels, '4') !important; + margin-inline-start: map.get($fluid-margin-levels, '4') !important; } @mixin \!fmr-4 { - margin-right: map.get($fluid-margin-levels, '4') !important; + margin-inline-end: map.get($fluid-margin-levels, '4') !important; } @mixin fm-5 { margin: map.get($fluid-margin-levels, '5'); } @mixin fmx-5 { - margin-left: map.get($fluid-margin-levels, '5'); - margin-right: map.get($fluid-margin-levels, '5'); + margin-inline-start: map.get($fluid-margin-levels, '5'); + margin-inline-end: map.get($fluid-margin-levels, '5'); } @mixin fmy-5 { - margin-top: map.get($fluid-margin-levels, '5'); - margin-bottom: map.get($fluid-margin-levels, '5'); + margin-block-start: map.get($fluid-margin-levels, '5'); + margin-block-end: map.get($fluid-margin-levels, '5'); } @mixin fmt-5 { - margin-top: map.get($fluid-margin-levels, '5'); + margin-block-start: map.get($fluid-margin-levels, '5'); } @mixin fmb-5 { - margin-bottom: map.get($fluid-margin-levels, '5'); + margin-block-end: map.get($fluid-margin-levels, '5'); } @mixin fml-5 { - margin-left: map.get($fluid-margin-levels, '5'); + margin-inline-start: map.get($fluid-margin-levels, '5'); } @mixin fmr-5 { - margin-right: map.get($fluid-margin-levels, '5'); + margin-inline-end: map.get($fluid-margin-levels, '5'); } @mixin \!fm-5 { margin: map.get($fluid-margin-levels, '5') !important; } @mixin \!fmx-5 { - margin-left: map.get($fluid-margin-levels, '5') !important; - margin-right: map.get($fluid-margin-levels, '5') !important; + margin-inline-start: map.get($fluid-margin-levels, '5') !important; + margin-inline-end: map.get($fluid-margin-levels, '5') !important; } @mixin \!fmy-5 { - margin-top: map.get($fluid-margin-levels, '5') !important; - margin-bottom: map.get($fluid-margin-levels, '5') !important; + margin-block-start: map.get($fluid-margin-levels, '5') !important; + margin-block-end: map.get($fluid-margin-levels, '5') !important; } @mixin \!fmt-5 { - margin-top: map.get($fluid-margin-levels, '5') !important; + margin-block-start: map.get($fluid-margin-levels, '5') !important; } @mixin \!fmb-5 { - margin-bottom: map.get($fluid-margin-levels, '5') !important; + margin-block-end: map.get($fluid-margin-levels, '5') !important; } @mixin \!fml-5 { - margin-left: map.get($fluid-margin-levels, '5') !important; + margin-inline-start: map.get($fluid-margin-levels, '5') !important; } @mixin \!fmr-5 { - margin-right: map.get($fluid-margin-levels, '5') !important; + margin-inline-end: map.get($fluid-margin-levels, '5') !important; } @mixin fm-6 { margin: map.get($fluid-margin-levels, '6'); } @mixin fmx-6 { - margin-left: map.get($fluid-margin-levels, '6'); - margin-right: map.get($fluid-margin-levels, '6'); + margin-inline-start: map.get($fluid-margin-levels, '6'); + margin-inline-end: map.get($fluid-margin-levels, '6'); } @mixin fmy-6 { - margin-top: map.get($fluid-margin-levels, '6'); - margin-bottom: map.get($fluid-margin-levels, '6'); + margin-block-start: map.get($fluid-margin-levels, '6'); + margin-block-end: map.get($fluid-margin-levels, '6'); } @mixin fmt-6 { - margin-top: map.get($fluid-margin-levels, '6'); + margin-block-start: map.get($fluid-margin-levels, '6'); } @mixin fmb-6 { - margin-bottom: map.get($fluid-margin-levels, '6'); + margin-block-end: map.get($fluid-margin-levels, '6'); } @mixin fml-6 { - margin-left: map.get($fluid-margin-levels, '6'); + margin-inline-start: map.get($fluid-margin-levels, '6'); } @mixin fmr-6 { - margin-right: map.get($fluid-margin-levels, '6'); + margin-inline-end: map.get($fluid-margin-levels, '6'); } @mixin \!fm-6 { margin: map.get($fluid-margin-levels, '6') !important; } @mixin \!fmx-6 { - margin-left: map.get($fluid-margin-levels, '6') !important; - margin-right: map.get($fluid-margin-levels, '6') !important; + margin-inline-start: map.get($fluid-margin-levels, '6') !important; + margin-inline-end: map.get($fluid-margin-levels, '6') !important; } @mixin \!fmy-6 { - margin-top: map.get($fluid-margin-levels, '6') !important; - margin-bottom: map.get($fluid-margin-levels, '6') !important; + margin-block-start: map.get($fluid-margin-levels, '6') !important; + margin-block-end: map.get($fluid-margin-levels, '6') !important; } @mixin \!fmt-6 { - margin-top: map.get($fluid-margin-levels, '6') !important; + margin-block-start: map.get($fluid-margin-levels, '6') !important; } @mixin \!fmb-6 { - margin-bottom: map.get($fluid-margin-levels, '6') !important; + margin-block-end: map.get($fluid-margin-levels, '6') !important; } @mixin \!fml-6 { - margin-left: map.get($fluid-margin-levels, '6') !important; + margin-inline-start: map.get($fluid-margin-levels, '6') !important; } @mixin \!fmr-6 { - margin-right: map.get($fluid-margin-levels, '6') !important; + margin-inline-end: map.get($fluid-margin-levels, '6') !important; } @mixin fm-7 { margin: map.get($fluid-margin-levels, '7'); } @mixin fmx-7 { - margin-left: map.get($fluid-margin-levels, '7'); - margin-right: map.get($fluid-margin-levels, '7'); + margin-inline-start: map.get($fluid-margin-levels, '7'); + margin-inline-end: map.get($fluid-margin-levels, '7'); } @mixin fmy-7 { - margin-top: map.get($fluid-margin-levels, '7'); - margin-bottom: map.get($fluid-margin-levels, '7'); + margin-block-start: map.get($fluid-margin-levels, '7'); + margin-block-end: map.get($fluid-margin-levels, '7'); } @mixin fmt-7 { - margin-top: map.get($fluid-margin-levels, '7'); + margin-block-start: map.get($fluid-margin-levels, '7'); } @mixin fmb-7 { - margin-bottom: map.get($fluid-margin-levels, '7'); + margin-block-end: map.get($fluid-margin-levels, '7'); } @mixin fml-7 { - margin-left: map.get($fluid-margin-levels, '7'); + margin-inline-start: map.get($fluid-margin-levels, '7'); } @mixin fmr-7 { - margin-right: map.get($fluid-margin-levels, '7'); + margin-inline-end: map.get($fluid-margin-levels, '7'); } @mixin \!fm-7 { margin: map.get($fluid-margin-levels, '7') !important; } @mixin \!fmx-7 { - margin-left: map.get($fluid-margin-levels, '7') !important; - margin-right: map.get($fluid-margin-levels, '7') !important; + margin-inline-start: map.get($fluid-margin-levels, '7') !important; + margin-inline-end: map.get($fluid-margin-levels, '7') !important; } @mixin \!fmy-7 { - margin-top: map.get($fluid-margin-levels, '7') !important; - margin-bottom: map.get($fluid-margin-levels, '7') !important; + margin-block-start: map.get($fluid-margin-levels, '7') !important; + margin-block-end: map.get($fluid-margin-levels, '7') !important; } @mixin \!fmt-7 { - margin-top: map.get($fluid-margin-levels, '7') !important; + margin-block-start: map.get($fluid-margin-levels, '7') !important; } @mixin \!fmb-7 { - margin-bottom: map.get($fluid-margin-levels, '7') !important; + margin-block-end: map.get($fluid-margin-levels, '7') !important; } @mixin \!fml-7 { - margin-left: map.get($fluid-margin-levels, '7') !important; + margin-inline-start: map.get($fluid-margin-levels, '7') !important; } @mixin \!fmr-7 { - margin-right: map.get($fluid-margin-levels, '7') !important; + margin-inline-end: map.get($fluid-margin-levels, '7') !important; } @mixin fm-8 { margin: map.get($fluid-margin-levels, '8'); } @mixin fmx-8 { - margin-left: map.get($fluid-margin-levels, '8'); - margin-right: map.get($fluid-margin-levels, '8'); + margin-inline-start: map.get($fluid-margin-levels, '8'); + margin-inline-end: map.get($fluid-margin-levels, '8'); } @mixin fmy-8 { - margin-top: map.get($fluid-margin-levels, '8'); - margin-bottom: map.get($fluid-margin-levels, '8'); + margin-block-start: map.get($fluid-margin-levels, '8'); + margin-block-end: map.get($fluid-margin-levels, '8'); } @mixin fmt-8 { - margin-top: map.get($fluid-margin-levels, '8'); + margin-block-start: map.get($fluid-margin-levels, '8'); } @mixin fmb-8 { - margin-bottom: map.get($fluid-margin-levels, '8'); + margin-block-end: map.get($fluid-margin-levels, '8'); } @mixin fml-8 { - margin-left: map.get($fluid-margin-levels, '8'); + margin-inline-start: map.get($fluid-margin-levels, '8'); } @mixin fmr-8 { - margin-right: map.get($fluid-margin-levels, '8'); + margin-inline-end: map.get($fluid-margin-levels, '8'); } @mixin \!fm-8 { margin: map.get($fluid-margin-levels, '8') !important; } @mixin \!fmx-8 { - margin-left: map.get($fluid-margin-levels, '8') !important; - margin-right: map.get($fluid-margin-levels, '8') !important; + margin-inline-start: map.get($fluid-margin-levels, '8') !important; + margin-inline-end: map.get($fluid-margin-levels, '8') !important; } @mixin \!fmy-8 { - margin-top: map.get($fluid-margin-levels, '8') !important; - margin-bottom: map.get($fluid-margin-levels, '8') !important; + margin-block-start: map.get($fluid-margin-levels, '8') !important; + margin-block-end: map.get($fluid-margin-levels, '8') !important; } @mixin \!fmt-8 { - margin-top: map.get($fluid-margin-levels, '8') !important; + margin-block-start: map.get($fluid-margin-levels, '8') !important; } @mixin \!fmb-8 { - margin-bottom: map.get($fluid-margin-levels, '8') !important; + margin-block-end: map.get($fluid-margin-levels, '8') !important; } @mixin \!fml-8 { - margin-left: map.get($fluid-margin-levels, '8') !important; + margin-inline-start: map.get($fluid-margin-levels, '8') !important; } @mixin \!fmr-8 { - margin-right: map.get($fluid-margin-levels, '8') !important; + margin-inline-end: map.get($fluid-margin-levels, '8') !important; } @mixin fm-9 { margin: map.get($fluid-margin-levels, '9'); } @mixin fmx-9 { - margin-left: map.get($fluid-margin-levels, '9'); - margin-right: map.get($fluid-margin-levels, '9'); + margin-inline-start: map.get($fluid-margin-levels, '9'); + margin-inline-end: map.get($fluid-margin-levels, '9'); } @mixin fmy-9 { - margin-top: map.get($fluid-margin-levels, '9'); - margin-bottom: map.get($fluid-margin-levels, '9'); + margin-block-start: map.get($fluid-margin-levels, '9'); + margin-block-end: map.get($fluid-margin-levels, '9'); } @mixin fmt-9 { - margin-top: map.get($fluid-margin-levels, '9'); + margin-block-start: map.get($fluid-margin-levels, '9'); } @mixin fmb-9 { - margin-bottom: map.get($fluid-margin-levels, '9'); + margin-block-end: map.get($fluid-margin-levels, '9'); } @mixin fml-9 { - margin-left: map.get($fluid-margin-levels, '9'); + margin-inline-start: map.get($fluid-margin-levels, '9'); } @mixin fmr-9 { - margin-right: map.get($fluid-margin-levels, '9'); + margin-inline-end: map.get($fluid-margin-levels, '9'); } @mixin \!fm-9 { margin: map.get($fluid-margin-levels, '9') !important; } @mixin \!fmx-9 { - margin-left: map.get($fluid-margin-levels, '9') !important; - margin-right: map.get($fluid-margin-levels, '9') !important; + margin-inline-start: map.get($fluid-margin-levels, '9') !important; + margin-inline-end: map.get($fluid-margin-levels, '9') !important; } @mixin \!fmy-9 { - margin-top: map.get($fluid-margin-levels, '9') !important; - margin-bottom: map.get($fluid-margin-levels, '9') !important; + margin-block-start: map.get($fluid-margin-levels, '9') !important; + margin-block-end: map.get($fluid-margin-levels, '9') !important; } @mixin \!fmt-9 { - margin-top: map.get($fluid-margin-levels, '9') !important; + margin-block-start: map.get($fluid-margin-levels, '9') !important; } @mixin \!fmb-9 { - margin-bottom: map.get($fluid-margin-levels, '9') !important; + margin-block-end: map.get($fluid-margin-levels, '9') !important; } @mixin \!fml-9 { - margin-left: map.get($fluid-margin-levels, '9') !important; + margin-inline-start: map.get($fluid-margin-levels, '9') !important; } @mixin \!fmr-9 { - margin-right: map.get($fluid-margin-levels, '9') !important; + margin-inline-end: map.get($fluid-margin-levels, '9') !important; } @mixin fm-auto { margin: auto; } @mixin fmx-auto { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } @mixin fmy-auto { - margin-top: auto; - margin-bottom: auto; + margin-block-start: auto; + margin-block-end: auto; } @mixin \!fm-auto { margin: auto !important; } @mixin \!fmx-auto { - margin-left: auto !important; - margin-right: auto !important; + margin-inline-start: auto !important; + margin-inline-end: auto !important; } @mixin \!fmy-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-block-start: auto !important; + margin-block-end: auto !important; } diff --git a/src/scss/tokens/spacers/mixins/_fluid-padding.scss b/src/scss/tokens/spacers/mixins/_fluid-padding.scss index 43c866b0..3640c41b 100644 --- a/src/scss/tokens/spacers/mixins/_fluid-padding.scss +++ b/src/scss/tokens/spacers/mixins/_fluid-padding.scss @@ -26,16 +26,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '0'); } @mixin fpt-0 { - padding-top: map.get($fluid-padding-levels, '0'); + padding-block-start: map.get($fluid-padding-levels, '0'); } @mixin fpb-0 { - padding-bottom: map.get($fluid-padding-levels, '0'); + padding-block-end: map.get($fluid-padding-levels, '0'); } @mixin fpl-0 { - padding-left: map.get($fluid-padding-levels, '0'); + padding-inline-start: map.get($fluid-padding-levels, '0'); } @mixin fpr-0 { - padding-right: map.get($fluid-padding-levels, '0'); + padding-inline-end: map.get($fluid-padding-levels, '0'); } @mixin \!fp-0 { padding: map.get($fluid-padding-levels, '0') !important; @@ -47,16 +47,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '0') !important; } @mixin \!fpt-0 { - padding-top: map.get($fluid-padding-levels, '0') !important; + padding-block-start: map.get($fluid-padding-levels, '0') !important; } @mixin \!fpb-0 { - padding-bottom: map.get($fluid-padding-levels, '0') !important; + padding-block-end: map.get($fluid-padding-levels, '0') !important; } @mixin \!fpl-0 { - padding-left: map.get($fluid-padding-levels, '0') !important; + padding-inline-start: map.get($fluid-padding-levels, '0') !important; } @mixin \!fpr-0 { - padding-right: map.get($fluid-padding-levels, '0') !important; + padding-inline-end: map.get($fluid-padding-levels, '0') !important; } @mixin fp-1 { @@ -69,16 +69,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '1'); } @mixin fpt-1 { - padding-top: map.get($fluid-padding-levels, '1'); + padding-block-start: map.get($fluid-padding-levels, '1'); } @mixin fpb-1 { - padding-bottom: map.get($fluid-padding-levels, '1'); + padding-block-end: map.get($fluid-padding-levels, '1'); } @mixin fpl-1 { - padding-left: map.get($fluid-padding-levels, '1'); + padding-inline-start: map.get($fluid-padding-levels, '1'); } @mixin fpr-1 { - padding-right: map.get($fluid-padding-levels, '1'); + padding-inline-end: map.get($fluid-padding-levels, '1'); } @mixin \!fp-1 { padding: map.get($fluid-padding-levels, '1') !important; @@ -90,16 +90,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '1') !important; } @mixin \!fpt-1 { - padding-top: map.get($fluid-padding-levels, '1') !important; + padding-block-start: map.get($fluid-padding-levels, '1') !important; } @mixin \!fpb-1 { - padding-bottom: map.get($fluid-padding-levels, '1') !important; + padding-block-end: map.get($fluid-padding-levels, '1') !important; } @mixin \!fpl-1 { - padding-left: map.get($fluid-padding-levels, '1') !important; + padding-inline-start: map.get($fluid-padding-levels, '1') !important; } @mixin \!fpr-1 { - padding-right: map.get($fluid-padding-levels, '1') !important; + padding-inline-end: map.get($fluid-padding-levels, '1') !important; } @mixin fp-2 { @@ -112,16 +112,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '2'); } @mixin fpt-2 { - padding-top: map.get($fluid-padding-levels, '2'); + padding-block-start: map.get($fluid-padding-levels, '2'); } @mixin fpb-2 { - padding-bottom: map.get($fluid-padding-levels, '2'); + padding-block-end: map.get($fluid-padding-levels, '2'); } @mixin fpl-2 { - padding-left: map.get($fluid-padding-levels, '2'); + padding-inline-start: map.get($fluid-padding-levels, '2'); } @mixin fpr-2 { - padding-right: map.get($fluid-padding-levels, '2'); + padding-inline-end: map.get($fluid-padding-levels, '2'); } @mixin \!fp-2 { padding: map.get($fluid-padding-levels, '2') !important; @@ -133,16 +133,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '2') !important; } @mixin \!fpt-2 { - padding-top: map.get($fluid-padding-levels, '2') !important; + padding-block-start: map.get($fluid-padding-levels, '2') !important; } @mixin \!fpb-2 { - padding-bottom: map.get($fluid-padding-levels, '2') !important; + padding-block-end: map.get($fluid-padding-levels, '2') !important; } @mixin \!fpl-2 { - padding-left: map.get($fluid-padding-levels, '2') !important; + padding-inline-start: map.get($fluid-padding-levels, '2') !important; } @mixin \!fpr-2 { - padding-right: map.get($fluid-padding-levels, '2') !important; + padding-inline-end: map.get($fluid-padding-levels, '2') !important; } @mixin fp-3 { @@ -155,16 +155,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '3'); } @mixin fpt-3 { - padding-top: map.get($fluid-padding-levels, '3'); + padding-block-start: map.get($fluid-padding-levels, '3'); } @mixin fpb-3 { - padding-bottom: map.get($fluid-padding-levels, '3'); + padding-block-end: map.get($fluid-padding-levels, '3'); } @mixin fpl-3 { - padding-left: map.get($fluid-padding-levels, '3'); + padding-inline-start: map.get($fluid-padding-levels, '3'); } @mixin fpr-3 { - padding-right: map.get($fluid-padding-levels, '3'); + padding-inline-end: map.get($fluid-padding-levels, '3'); } @mixin \!fp-3 { padding: map.get($fluid-padding-levels, '3') !important; @@ -176,16 +176,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '3') !important; } @mixin \!fpt-3 { - padding-top: map.get($fluid-padding-levels, '3') !important; + padding-block-start: map.get($fluid-padding-levels, '3') !important; } @mixin \!fpb-3 { - padding-bottom: map.get($fluid-padding-levels, '3') !important; + padding-block-end: map.get($fluid-padding-levels, '3') !important; } @mixin \!fpl-3 { - padding-left: map.get($fluid-padding-levels, '3') !important; + padding-inline-start: map.get($fluid-padding-levels, '3') !important; } @mixin \!fpr-3 { - padding-right: map.get($fluid-padding-levels, '3') !important; + padding-inline-end: map.get($fluid-padding-levels, '3') !important; } @mixin fp-4 { @@ -198,16 +198,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '4'); } @mixin fpt-4 { - padding-top: map.get($fluid-padding-levels, '4'); + padding-block-start: map.get($fluid-padding-levels, '4'); } @mixin fpb-4 { - padding-bottom: map.get($fluid-padding-levels, '4'); + padding-block-end: map.get($fluid-padding-levels, '4'); } @mixin fpl-4 { - padding-left: map.get($fluid-padding-levels, '4'); + padding-inline-start: map.get($fluid-padding-levels, '4'); } @mixin fpr-4 { - padding-right: map.get($fluid-padding-levels, '4'); + padding-inline-end: map.get($fluid-padding-levels, '4'); } @mixin \!fp-4 { padding: map.get($fluid-padding-levels, '4') !important; @@ -219,16 +219,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '4') !important; } @mixin \!fpt-4 { - padding-top: map.get($fluid-padding-levels, '4') !important; + padding-block-start: map.get($fluid-padding-levels, '4') !important; } @mixin \!fpb-4 { - padding-bottom: map.get($fluid-padding-levels, '4') !important; + padding-block-end: map.get($fluid-padding-levels, '4') !important; } @mixin \!fpl-4 { - padding-left: map.get($fluid-padding-levels, '4') !important; + padding-inline-start: map.get($fluid-padding-levels, '4') !important; } @mixin \!fpr-4 { - padding-right: map.get($fluid-padding-levels, '4') !important; + padding-inline-end: map.get($fluid-padding-levels, '4') !important; } @mixin fp-5 { @@ -241,16 +241,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '5'); } @mixin fpt-5 { - padding-top: map.get($fluid-padding-levels, '5'); + padding-block-start: map.get($fluid-padding-levels, '5'); } @mixin fpb-5 { - padding-bottom: map.get($fluid-padding-levels, '5'); + padding-block-end: map.get($fluid-padding-levels, '5'); } @mixin fpl-5 { - padding-left: map.get($fluid-padding-levels, '5'); + padding-inline-start: map.get($fluid-padding-levels, '5'); } @mixin fpr-5 { - padding-right: map.get($fluid-padding-levels, '5'); + padding-inline-end: map.get($fluid-padding-levels, '5'); } @mixin \!fp-5 { padding: map.get($fluid-padding-levels, '5') !important; @@ -262,16 +262,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '5') !important; } @mixin \!fpt-5 { - padding-top: map.get($fluid-padding-levels, '5') !important; + padding-block-start: map.get($fluid-padding-levels, '5') !important; } @mixin \!fpb-5 { - padding-bottom: map.get($fluid-padding-levels, '5') !important; + padding-block-end: map.get($fluid-padding-levels, '5') !important; } @mixin \!fpl-5 { - padding-left: map.get($fluid-padding-levels, '5') !important; + padding-inline-start: map.get($fluid-padding-levels, '5') !important; } @mixin \!fpr-5 { - padding-right: map.get($fluid-padding-levels, '5') !important; + padding-inline-end: map.get($fluid-padding-levels, '5') !important; } @mixin fp-6 { @@ -284,16 +284,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '6'); } @mixin fpt-6 { - padding-top: map.get($fluid-padding-levels, '6'); + padding-block-start: map.get($fluid-padding-levels, '6'); } @mixin fpb-6 { - padding-bottom: map.get($fluid-padding-levels, '6'); + padding-block-end: map.get($fluid-padding-levels, '6'); } @mixin fpl-6 { - padding-left: map.get($fluid-padding-levels, '6'); + padding-inline-start: map.get($fluid-padding-levels, '6'); } @mixin fpr-6 { - padding-right: map.get($fluid-padding-levels, '6'); + padding-inline-end: map.get($fluid-padding-levels, '6'); } @mixin \!fp-6 { padding: map.get($fluid-padding-levels, '6') !important; @@ -305,16 +305,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '6') !important; } @mixin \!fpt-6 { - padding-top: map.get($fluid-padding-levels, '6') !important; + padding-block-start: map.get($fluid-padding-levels, '6') !important; } @mixin \!fpb-6 { - padding-bottom: map.get($fluid-padding-levels, '6') !important; + padding-block-end: map.get($fluid-padding-levels, '6') !important; } @mixin \!fpl-6 { - padding-left: map.get($fluid-padding-levels, '6') !important; + padding-inline-start: map.get($fluid-padding-levels, '6') !important; } @mixin \!fpr-6 { - padding-right: map.get($fluid-padding-levels, '6') !important; + padding-inline-end: map.get($fluid-padding-levels, '6') !important; } @mixin fp-7 { @@ -327,16 +327,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '7'); } @mixin fpt-7 { - padding-top: map.get($fluid-padding-levels, '7'); + padding-block-start: map.get($fluid-padding-levels, '7'); } @mixin fpb-7 { - padding-bottom: map.get($fluid-padding-levels, '7'); + padding-block-end: map.get($fluid-padding-levels, '7'); } @mixin fpl-7 { - padding-left: map.get($fluid-padding-levels, '7'); + padding-inline-start: map.get($fluid-padding-levels, '7'); } @mixin fpr-7 { - padding-right: map.get($fluid-padding-levels, '7'); + padding-inline-end: map.get($fluid-padding-levels, '7'); } @mixin \!fp-7 { padding: map.get($fluid-padding-levels, '7') !important; @@ -348,16 +348,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '7') !important; } @mixin \!fpt-7 { - padding-top: map.get($fluid-padding-levels, '7') !important; + padding-block-start: map.get($fluid-padding-levels, '7') !important; } @mixin \!fpb-7 { - padding-bottom: map.get($fluid-padding-levels, '7') !important; + padding-block-end: map.get($fluid-padding-levels, '7') !important; } @mixin \!fpl-7 { - padding-left: map.get($fluid-padding-levels, '7') !important; + padding-inline-start: map.get($fluid-padding-levels, '7') !important; } @mixin \!fpr-7 { - padding-right: map.get($fluid-padding-levels, '7') !important; + padding-inline-end: map.get($fluid-padding-levels, '7') !important; } @mixin fp-8 { @@ -370,16 +370,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '8'); } @mixin fpt-8 { - padding-top: map.get($fluid-padding-levels, '8'); + padding-block-start: map.get($fluid-padding-levels, '8'); } @mixin fpb-8 { - padding-bottom: map.get($fluid-padding-levels, '8'); + padding-block-end: map.get($fluid-padding-levels, '8'); } @mixin fpl-8 { - padding-left: map.get($fluid-padding-levels, '8'); + padding-inline-start: map.get($fluid-padding-levels, '8'); } @mixin fpr-8 { - padding-right: map.get($fluid-padding-levels, '8'); + padding-inline-end: map.get($fluid-padding-levels, '8'); } @mixin \!fp-8 { padding: map.get($fluid-padding-levels, '8') !important; @@ -391,16 +391,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '8') !important; } @mixin \!fpt-8 { - padding-top: map.get($fluid-padding-levels, '8') !important; + padding-block-start: map.get($fluid-padding-levels, '8') !important; } @mixin \!fpb-8 { - padding-bottom: map.get($fluid-padding-levels, '8') !important; + padding-block-end: map.get($fluid-padding-levels, '8') !important; } @mixin \!fpl-8 { - padding-left: map.get($fluid-padding-levels, '8') !important; + padding-inline-start: map.get($fluid-padding-levels, '8') !important; } @mixin \!fpr-8 { - padding-right: map.get($fluid-padding-levels, '8') !important; + padding-inline-end: map.get($fluid-padding-levels, '8') !important; } @mixin fp-9 { @@ -413,16 +413,16 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '9'); } @mixin fpt-9 { - padding-top: map.get($fluid-padding-levels, '9'); + padding-block-start: map.get($fluid-padding-levels, '9'); } @mixin fpb-9 { - padding-bottom: map.get($fluid-padding-levels, '9'); + padding-block-end: map.get($fluid-padding-levels, '9'); } @mixin fpl-9 { - padding-left: map.get($fluid-padding-levels, '9'); + padding-inline-start: map.get($fluid-padding-levels, '9'); } @mixin fpr-9 { - padding-right: map.get($fluid-padding-levels, '9'); + padding-inline-end: map.get($fluid-padding-levels, '9'); } @mixin \!fp-9 { padding: map.get($fluid-padding-levels, '9') !important; @@ -434,37 +434,37 @@ $fluid-padding-levels: ( padding-block: map.get($fluid-padding-levels, '9') !important; } @mixin \!fpt-9 { - padding-top: map.get($fluid-padding-levels, '9') !important; + padding-block-start: map.get($fluid-padding-levels, '9') !important; } @mixin \!fpb-9 { - padding-bottom: map.get($fluid-padding-levels, '9') !important; + padding-block-end: map.get($fluid-padding-levels, '9') !important; } @mixin \!fpl-9 { - padding-left: map.get($fluid-padding-levels, '9') !important; + padding-inline-start: map.get($fluid-padding-levels, '9') !important; } @mixin \!fpr-9 { - padding-right: map.get($fluid-padding-levels, '9') !important; + padding-inline-end: map.get($fluid-padding-levels, '9') !important; } %fp-auto { padding: auto; } %fpx-auto { - padding-right: auto; - padding-left: auto; + padding-inline-end: auto; + padding-inline-start: auto; } %fpy-auto { - padding-top: auto; - padding-bottom: auto; + padding-block-start: auto; + padding-block-end: auto; } %\!fp-auto { padding: auto !important; } %\!fpx-auto { - padding-right: auto !important; - padding-left: auto !important; + padding-inline-end: auto !important; + padding-inline-start: auto !important; } %\!fpy-auto { - padding-top: auto !important; - padding-bottom: auto !important; + padding-block-start: auto !important; + padding-block-end: auto !important; } From 464c7505aa0e46628418cb8545a7f72917f20d73 Mon Sep 17 00:00:00 2001 From: pkd2512 Date: Tue, 22 Apr 2025 16:56:54 +0200 Subject: [PATCH 02/10] margins --- src/components/Article/Article.stories.svelte | 4 ++-- src/components/BeforeAfter/BeforeAfter.svelte | 4 ++-- src/components/Block/Block.stories.svelte | 2 +- src/components/EndNotes/EndNotes.svelte | 2 +- src/components/Framer/Resizer/index.svelte | 2 +- src/components/Framer/Typeahead/index.svelte | 2 +- src/components/HeroHeadline/HeroHeadline.mdx | 4 ++-- src/components/HeroHeadline/HeroHeadline.stories.svelte | 4 ++-- src/components/PhotoPack/PhotoPack.svelte | 2 +- src/components/ReferralBlock/ReferralBlock.svelte | 2 +- src/components/Scroller/Embedded/Foreground.svelte | 2 +- src/components/Scroller/Foreground.svelte | 4 ++-- src/components/SiteFooter/CompanyLinks.svelte | 2 +- src/components/SiteFooter/LegalLinks.svelte | 2 +- src/components/SiteFooter/QuickLinks.svelte | 6 +++--- src/components/SiteFooter/SiteFooter.svelte | 2 +- .../SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte | 6 +++--- .../SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte | 6 +++--- .../SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte | 4 ++-- 19 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte index f403f164..1378e912 100644 --- a/src/components/Article/Article.stories.svelte +++ b/src/components/Article/Article.stories.svelte @@ -70,7 +70,7 @@ :global(#article-column-widths-demo) { background-color: #ddd; position: relative; - margin-bottom: 10px; + margin-block-end: 10px; } :global(#article-column-widths-demo .article-boundaries) { padding: 0; @@ -86,7 +86,7 @@ :global(#article-column-widths-demo div.article-block) { height: 300px; background: #81a1c1; - margin-bottom: 2px; + margin-block-end: 2px; height: 50px; padding-inline-start: 3px; color: white; diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte index 414497cc..adf8250a 100644 --- a/src/components/BeforeAfter/BeforeAfter.svelte +++ b/src/components/BeforeAfter/BeforeAfter.svelte @@ -296,10 +296,10 @@ .overlay-container { top: 0; :global(:first-child) { - margin-top: 0; + margin-block-start: 0; } :global(:last-child) { - margin-bottom: 0; + margin-block-end: 0; } &.before { left: 0; diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte index 42826ec0..ce95e9fb 100644 --- a/src/components/Block/Block.stories.svelte +++ b/src/components/Block/Block.stories.svelte @@ -142,7 +142,7 @@ background: #81a1c1; } :global(#block-demo-article div.article-block.block-snap-widths-demo) { - margin-bottom: 2px; + margin-block-end: 2px; height: 40px; font-size: 11px; } diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte index 7c921bec..01913fb2 100644 --- a/src/components/EndNotes/EndNotes.svelte +++ b/src/components/EndNotes/EndNotes.svelte @@ -44,7 +44,7 @@ @include mixins.font-medium; @include mixins.tracking-normal; @include mixins.fmt-3; - margin-bottom: 0.125rem; + margin-block-end: 0.125rem; text-transform: none; } } diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte index 6eea7de8..66942e07 100644 --- a/src/components/Framer/Resizer/index.svelte +++ b/src/components/Framer/Resizer/index.svelte @@ -168,7 +168,7 @@ background-color: rgba(255, 255, 255, 0.8); padding: 4px 8px; border-radius: 4px; - margin-right: 5px; + margin-inline-end: 5px; } button.icon { font-size: 14px; diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte index cbd62dad..42e978c7 100644 --- a/src/components/Framer/Typeahead/index.svelte +++ b/src/components/Framer/Typeahead/index.svelte @@ -350,7 +350,7 @@ } :global([data-svelte-search] label) { - margin-bottom: 0.25rem; + margin-block-end: 0.25rem; display: inline-flex; font-size: 0.75rem; color: #aaa; diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx index 5fe0dde6..1091015b 100644 --- a/src/components/HeroHeadline/HeroHeadline.mdx +++ b/src/components/HeroHeadline/HeroHeadline.mdx @@ -51,7 +51,7 @@ In the graphics kit, set styles in `global.scss` to make the Reuters site header border: none !important; } .hero-wrapper { - margin-top: -64px; + margin-block-start: -64px; } ``` @@ -316,7 +316,7 @@ Add styles in `global.scss`: } .dek { - margin-top: 1rem; + margin-block-start: 1rem; p { color: #ffffff; text-shadow: 1px 1px 8px #ff7c88; diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte index 7311cbd5..5e4000e7 100644 --- a/src/components/HeroHeadline/HeroHeadline.stories.svelte +++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte @@ -259,7 +259,7 @@ } .dek { - margin-top: 1rem; + margin-block-start: 1rem; p { color: #ffffff; text-shadow: 1px 1px 8px #ff7c88; @@ -281,7 +281,7 @@ } :global(.hero-wrapper) { - margin-top: -64px; + margin-block-start: -64px; } } diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte index 50f23855..51f2d359 100644 --- a/src/components/PhotoPack/PhotoPack.svelte +++ b/src/components/PhotoPack/PhotoPack.svelte @@ -85,7 +85,7 @@
{#each row as img, i}
div.embedded-foreground { :global(p:last-child) { - margin-bottom: 0; + margin-block-end: 0; } } diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte index f0f26f90..e42912ff 100644 --- a/src/components/Scroller/Foreground.svelte +++ b/src/components/Scroller/Foreground.svelte @@ -54,10 +54,10 @@ background: rgba(255, 255, 255, 0.9); :global(p:last-child) { - margin-bottom: 0; + margin-block-end: 0; } :global(*:first-child) { - margin-top: 0; + margin-block-start: 0; } } } diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte index 33c9f092..e6703d15 100644 --- a/src/components/SiteFooter/CompanyLinks.svelte +++ b/src/components/SiteFooter/CompanyLinks.svelte @@ -148,7 +148,7 @@ section.company { max-width: 100%; h2 { - margin-bottom: 12px; + margin-block-end: 12px; line-height: 1.333; font-size: 16px; color: var(--nav-primary); diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte index b3ba19ef..c4e950f3 100644 --- a/src/components/SiteFooter/LegalLinks.svelte +++ b/src/components/SiteFooter/LegalLinks.svelte @@ -151,7 +151,7 @@ li { display: inline-flex; - margin-right: 16px; + margin-inline-end: 16px; list-style: none; align-items: center; a { diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte index 648bcd4c..f17363b3 100644 --- a/src/components/SiteFooter/QuickLinks.svelte +++ b/src/components/SiteFooter/QuickLinks.svelte @@ -223,7 +223,7 @@ grid-row: 1; .media { - margin-top: 24px; + margin-block-start: 24px; } } @@ -242,13 +242,13 @@ } .stay-informed { - margin-top: 24px; + margin-block-start: 24px; } } .symbol { width: 20px; - margin-right: 16px; + margin-inline-end: 16px; } .visually-hidden { diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte index 80f6a2de..ece8bd18 100644 --- a/src/components/SiteFooter/SiteFooter.svelte +++ b/src/components/SiteFooter/SiteFooter.svelte @@ -69,7 +69,7 @@ diff --git a/src/components/Table/components/Pagination.svelte b/src/components/Table/components/Pagination.svelte index 254215d5..10f3443e 100644 --- a/src/components/Table/components/Pagination.svelte +++ b/src/components/Table/components/Pagination.svelte @@ -1,7 +1,7 @@ -
+
+
+ +