diff --git a/.changeset/angry-zoos-wonder.md b/.changeset/angry-zoos-wonder.md new file mode 100644 index 00000000..6d457e6d --- /dev/null +++ b/.changeset/angry-zoos-wonder.md @@ -0,0 +1,5 @@ +--- +'@reuters-graphics/graphics-components': patch +--- + +Update tokens and component layouts to accomodate margins and paddings for RTL webpages diff --git a/.storybook/main.ts b/.storybook/main.ts index d752804b..8cb90af2 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -8,6 +8,7 @@ const config: StorybookConfig = { '@chromatic-com/storybook', '@storybook/addon-interactions', '@storybook/addon-a11y', + 'storybook-addon-rtl', ], framework: { name: '@storybook/sveltekit', diff --git a/chromatic.config.json b/chromatic.config.json new file mode 100644 index 00000000..1a16ff50 --- /dev/null +++ b/chromatic.config.json @@ -0,0 +1,6 @@ +{ + "onlyChanged": true, + "projectId": "Project:64a5c42823795823edcb60f4", + "zip": true, + "buildScriptName": "build:docs" +} diff --git a/package.json b/package.json index eeeeda59..f945eda4 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,7 @@ "proper-url-join": "^2.1.2", "pym.js": "^1.3.2", "slugify": "^1.6.6", + "storybook-addon-rtl": "^1.1.0", "svelte-fa": "^4.0.3", "svelte-intersection-observer": "^1.0.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd3f4d14..116f2c56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: slugify: specifier: ^1.6.6 version: 1.6.6 + storybook-addon-rtl: + specifier: ^1.1.0 + version: 1.1.0 svelte-fa: specifier: ^4.0.3 version: 4.0.3(svelte@5.28.1) @@ -3539,6 +3542,9 @@ packages: sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} + storybook-addon-rtl@1.1.0: + resolution: {integrity: sha512-L8JljF1M+30rcSuM4JjeIi4ZRmg9WZi/1u4T/5/EQvpDKCMOAq7uHeOKj4YS1InC4Zksnz3DrggXmO3mISXKcQ==} + storybook@8.6.12: resolution: {integrity: sha512-Z/nWYEHBTLK1ZBtAWdhxC0l5zf7ioJ7G4+zYqtTdYeb67gTnxNj80gehf8o8QY9L2zA2+eyMRGLC2V5fI7Z3Tw==} hasBin: true @@ -8081,6 +8087,8 @@ snapshots: sprintf-js@1.0.3: {} + storybook-addon-rtl@1.1.0: {} + storybook@8.6.12(prettier@3.5.3): dependencies: '@storybook/core': 8.6.12(prettier@3.5.3)(storybook@8.6.12(prettier@3.5.3)) 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..1378e912 100644 --- a/src/components/Article/Article.stories.svelte +++ b/src/components/Article/Article.stories.svelte @@ -65,12 +65,12 @@ } :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; position: relative; - margin-bottom: 10px; + margin-block-end: 10px; } :global(#article-column-widths-demo .article-boundaries) { padding: 0; @@ -86,9 +86,9 @@ :global(#article-column-widths-demo div.article-block) { height: 300px; background: #81a1c1; - margin-bottom: 2px; + margin-block-end: 2px; height: 50px; - padding-left: 3px; + padding-inline-start: 3px; color: white; font-size: 1rem; } diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte index 74ef3be3..4e23d53d 100644 --- a/src/components/BeforeAfter/BeforeAfter.stories.svelte +++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte @@ -40,13 +40,13 @@ afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020." > {#snippet beforeOverlay()} -
+

July 7, 2020

Initially, this site was far smaller.

{/snippet} {#snippet afterOverlay()} -
+

Oct. 20, 2020

But then forces built up.

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte index 414497cc..3a79ef3d 100644 --- a/src/components/BeforeAfter/BeforeAfter.svelte +++ b/src/components/BeforeAfter/BeforeAfter.svelte @@ -280,6 +280,7 @@ button.before-after-container { box-sizing: content-box; + text-align: inherit; img { top: 0; @@ -296,10 +297,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; @@ -352,18 +353,18 @@ height: 0; user-select: none; position: relative; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; + border-block-start: 10px solid transparent; + border-block-end: 10px solid transparent; } .arrow-right { - left: 19px; - bottom: 14px; - border-left: 10px solid var(--before-after-handle-colour); + inset-inline-start: 19px; + inset-block-end: 14px; + border-inline-start: 10px solid var(--before-after-handle-colour); } .arrow-left { - left: 3px; - top: 6px; - border-right: 10px solid var(--before-after-handle-colour); + inset-inline-start: 3px; + inset-block-start: 6px; + border-inline-end: 10px solid var(--before-after-handle-colour); } } diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte index 8441468d..ce95e9fb 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; @@ -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; } @@ -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/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte index 33705d5a..c79cffd9 100644 --- a/src/components/Byline/Byline.stories.svelte +++ b/src/components/Byline/Byline.stories.svelte @@ -9,7 +9,7 @@ argTypes: { align: { control: 'select', - options: ['left', 'center'], + options: ['auto', 'center'], }, }, }); diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte index ae41a269..c67cb91e 100644 --- a/src/components/Byline/Byline.svelte +++ b/src/components/Byline/Byline.svelte @@ -21,7 +21,7 @@ /** * Alignment of the byline. */ - align?: 'left' | 'center'; + align?: 'auto' | 'center'; /** * Add an id to to target with custom CSS. * @type {string} @@ -54,7 +54,7 @@ authors = [], publishTime, updateTime, - align = 'left', + align = 'auto', id = '', cls = '', getAuthorPage = getAuthorPageUrl, @@ -63,7 +63,7 @@ updated, }: Props = $props(); - let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center'); + let alignmentClass = $derived(align === 'center' ? 'text-center' : ''); /** /* Date validation and formatter functions 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 9b41b617..e406ed9b 100644 --- a/src/components/Framer/Resizer/index.svelte +++ b/src/components/Framer/Resizer/index.svelte @@ -167,7 +167,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; @@ -198,10 +198,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/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte index dd26a4a8..798f2198 100644 --- a/src/components/Framer/Typeahead/index.svelte +++ b/src/components/Framer/Typeahead/index.svelte @@ -349,7 +349,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/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte index afc25cc0..bf38f92b 100644 --- a/src/components/HeroHeadline/HeroHeadline.svelte +++ b/src/components/HeroHeadline/HeroHeadline.svelte @@ -200,7 +200,7 @@ {getAuthorPage} {published} {updated} - align="left" + align="auto" /> {/if}
@@ -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/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/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte index 01e78d05..831f2c34 100644 --- a/src/components/SearchInput/SearchInput.svelte +++ b/src/components/SearchInput/SearchInput.svelte @@ -57,8 +57,8 @@ .search { width: 250px; .search--icon { - left: 0.5rem; - top: 0.55rem; + inset-inline-start: 0.5rem; + inset-block-start: 0.55rem; width: 1.5rem; height: 1.5rem; fill: mixins.$theme-colour-brand-rules; @@ -71,8 +71,8 @@ width: 100%; } .search--x { - right: 0; - top: 0.55rem; + inset-inline-end: 0; + inset-block-start: 0.55rem; width: 1.5rem; height: 1.5rem; fill: mixins.$theme-colour-text-primary; diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte index ea292d9c..0a13767d 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -95,15 +95,15 @@ @use '../../scss/mixins' as mixins; .timeline { .date { - border-left: 1px solid var(--symbol-colour); + border-inline-start: 1px solid var(--symbol-colour); &:last-child { - border-left: 1px solid mixins.$theme-colour-background; + border-inline-start: 1px solid mixins.$theme-colour-background; @include mixins.fpb-0; } } svg { - top: -1px; - left: -10px; + inset-block-start: -1px; + inset-inline-start: -10px; } div.title { @include mixins.fmt-2; diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte index be3c6f29..4ed6b018 100644 --- a/src/components/SiteFooter/CompanyLinks.svelte +++ b/src/components/SiteFooter/CompanyLinks.svelte @@ -78,8 +78,8 @@ } .company { - padding-top: 24px; - padding-bottom: 24px; + padding-block-start: 24px; + padding-block-end: 24px; box-sizing: border-box; .content-container { @@ -92,7 +92,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 { @@ -146,17 +146,17 @@ 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; } } 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 306c78bb..c4e950f3 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); } } @@ -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 19d2973a..f17363b3 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 { @@ -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.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/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/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/Table/Table.svelte b/src/components/Table/Table.svelte index 4ee347a4..0cd90bb7 100644 --- a/src/components/Table/Table.svelte +++ b/src/components/Table/Table.svelte @@ -304,7 +304,7 @@ thead { tr { th { - border-bottom: 1px solid var(--theme-colour-text-primary); + border-block-end: 1px solid var(--theme-colour-text-primary); @include mixins.bg; text-align: inherit; &.sortable { @@ -314,7 +314,7 @@ .table--thead--sortarrow { display: inline-block; position: relative; - top: 5px; + inset-inline-start: 5px; } } } @@ -323,8 +323,9 @@ td { @include mixins.text-sm; @include mixins.font-regular; + font-variant-numeric: tabular-nums; vertical-align: top; - border-bottom: 1px solid + border-block-end: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey)); &.no-results { @include mixins.text-secondary; @@ -333,7 +334,7 @@ } tfoot.table--tfoot { tr { - border-bottom: 0; + border-block-end: 0; } td { @include mixins.body-caption; @@ -341,7 +342,7 @@ } &.truncated { tbody tr:last-child:not(:first-child) { - border-bottom: none; + border-block-end: none; mask-image: linear-gradient( to bottom, var(--theme-colour-text-primary) 0%, diff --git a/src/components/Table/components/RightArrow.svelte b/src/components/Table/components/NextArrow.svelte similarity index 86% rename from src/components/Table/components/RightArrow.svelte rename to src/components/Table/components/NextArrow.svelte index cbc5acaa..3749a681 100644 --- a/src/components/Table/components/RightArrow.svelte +++ b/src/components/Table/components/NextArrow.svelte @@ -15,4 +15,7 @@ width: 1rem; fill: currentColor; } + :global([dir='rtl']) .icon { + transform: rotate(180deg); + } 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 @@ -
+
+
+ +
diff --git a/src/scss/tokens/borders/_border-radius.scss b/src/scss/tokens/borders/_border-radius.scss index 93c0c436..10350b72 100644 --- a/src/scss/tokens/borders/_border-radius.scss +++ b/src/scss/tokens/borders/_border-radius.scss @@ -26,254 +26,254 @@ border-radius: 9999px; } .rounded-t-none { - border-top-left-radius: 0px; - border-top-right-radius: 0px; + border-start-start-radius: 0px; + border-start-end-radius: 0px; } .rounded-t-sm { - border-top-left-radius: 0.125rem; - border-top-right-radius: 0.125rem; + border-start-start-radius: 0.125rem; + border-start-end-radius: 0.125rem; } .rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-start-start-radius: 0.25rem; + border-start-end-radius: 0.25rem; } .rounded-t-md { - border-top-left-radius: 0.375rem; - border-top-right-radius: 0.375rem; + border-start-start-radius: 0.375rem; + border-start-end-radius: 0.375rem; } .rounded-t-lg { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; + border-start-start-radius: 0.5rem; + border-start-end-radius: 0.5rem; } .rounded-t-xl { - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; + border-start-start-radius: 0.75rem; + border-start-end-radius: 0.75rem; } .rounded-t-2xl { - border-top-left-radius: 1rem; - border-top-right-radius: 1rem; + border-start-start-radius: 1rem; + border-start-end-radius: 1rem; } .rounded-t-3xl { - border-top-left-radius: 1.5rem; - border-top-right-radius: 1.5rem; + border-start-start-radius: 1.5rem; + border-start-end-radius: 1.5rem; } .rounded-t-full { - border-top-left-radius: 9999px; - border-top-right-radius: 9999px; + border-start-start-radius: 9999px; + border-start-end-radius: 9999px; } .rounded-r-none { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; + border-start-end-radius: 0px; + border-end-end-radius: 0px; } .rounded-r-sm { - border-top-right-radius: 0.125rem; - border-bottom-right-radius: 0.125rem; + border-start-end-radius: 0.125rem; + border-end-end-radius: 0.125rem; } .rounded-r { - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; + border-start-end-radius: 0.25rem; + border-end-end-radius: 0.25rem; } .rounded-r-md { - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; + border-start-end-radius: 0.375rem; + border-end-end-radius: 0.375rem; } .rounded-r-lg { - border-top-right-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; + border-start-end-radius: 0.5rem; + border-end-end-radius: 0.5rem; } .rounded-r-xl { - border-top-right-radius: 0.75rem; - border-bottom-right-radius: 0.75rem; + border-start-end-radius: 0.75rem; + border-end-end-radius: 0.75rem; } .rounded-r-2xl { - border-top-right-radius: 1rem; - border-bottom-right-radius: 1rem; + border-start-end-radius: 1rem; + border-end-end-radius: 1rem; } .rounded-r-3xl { - border-top-right-radius: 1.5rem; - border-bottom-right-radius: 1.5rem; + border-start-end-radius: 1.5rem; + border-end-end-radius: 1.5rem; } .rounded-r-full { - border-top-right-radius: 9999px; - border-bottom-right-radius: 9999px; + border-start-end-radius: 9999px; + border-end-end-radius: 9999px; } .rounded-b-none { - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; + border-end-end-radius: 0px; + border-end-start-radius: 0px; } .rounded-b-sm { - border-bottom-right-radius: 0.125rem; - border-bottom-left-radius: 0.125rem; + border-end-end-radius: 0.125rem; + border-end-start-radius: 0.125rem; } .rounded-b { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + border-end-end-radius: 0.25rem; + border-end-start-radius: 0.25rem; } .rounded-b-md { - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; + border-end-end-radius: 0.375rem; + border-end-start-radius: 0.375rem; } .rounded-b-lg { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; + border-end-end-radius: 0.5rem; + border-end-start-radius: 0.5rem; } .rounded-b-xl { - border-bottom-right-radius: 0.75rem; - border-bottom-left-radius: 0.75rem; + border-end-end-radius: 0.75rem; + border-end-start-radius: 0.75rem; } .rounded-b-2xl { - border-bottom-right-radius: 1rem; - border-bottom-left-radius: 1rem; + border-end-end-radius: 1rem; + border-end-start-radius: 1rem; } .rounded-b-3xl { - border-bottom-right-radius: 1.5rem; - border-bottom-left-radius: 1.5rem; + border-end-end-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .rounded-b-full { - border-bottom-right-radius: 9999px; - border-bottom-left-radius: 9999px; + border-end-end-radius: 9999px; + border-end-start-radius: 9999px; } .rounded-l-none { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + border-start-start-radius: 0px; + border-end-start-radius: 0px; } .rounded-l-sm { - border-top-left-radius: 0.125rem; - border-bottom-left-radius: 0.125rem; + border-start-start-radius: 0.125rem; + border-end-start-radius: 0.125rem; } .rounded-l { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; } .rounded-l-md { - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; + border-start-start-radius: 0.375rem; + border-end-start-radius: 0.375rem; } .rounded-l-lg { - border-top-left-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; + border-start-start-radius: 0.5rem; + border-end-start-radius: 0.5rem; } .rounded-l-xl { - border-top-left-radius: 0.75rem; - border-bottom-left-radius: 0.75rem; + border-start-start-radius: 0.75rem; + border-end-start-radius: 0.75rem; } .rounded-l-2xl { - border-top-left-radius: 1rem; - border-bottom-left-radius: 1rem; + border-start-start-radius: 1rem; + border-end-start-radius: 1rem; } .rounded-l-3xl { - border-top-left-radius: 1.5rem; - border-bottom-left-radius: 1.5rem; + border-start-start-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .rounded-l-full { - border-top-left-radius: 9999px; - border-bottom-left-radius: 9999px; + border-start-start-radius: 9999px; + border-end-start-radius: 9999px; } .rounded-tl-none { - border-top-left-radius: 0px; + border-start-start-radius: 0px; } .rounded-tl-sm { - border-top-left-radius: 0.125rem; + border-start-start-radius: 0.125rem; } .rounded-tl { - border-top-left-radius: 0.25rem; + border-start-start-radius: 0.25rem; } .rounded-tl-md { - border-top-left-radius: 0.375rem; + border-start-start-radius: 0.375rem; } .rounded-tl-lg { - border-top-left-radius: 0.5rem; + border-start-start-radius: 0.5rem; } .rounded-tl-xl { - border-top-left-radius: 0.75rem; + border-start-start-radius: 0.75rem; } .rounded-tl-2xl { - border-top-left-radius: 1rem; + border-start-start-radius: 1rem; } .rounded-tl-3xl { - border-top-left-radius: 1.5rem; + border-start-start-radius: 1.5rem; } .rounded-tl-full { - border-top-left-radius: 9999px; + border-start-start-radius: 9999px; } .rounded-tr-none { - border-top-right-radius: 0px; + border-start-end-radius: 0px; } .rounded-tr-sm { - border-top-right-radius: 0.125rem; + border-start-end-radius: 0.125rem; } .rounded-tr { - border-top-right-radius: 0.25rem; + border-start-end-radius: 0.25rem; } .rounded-tr-md { - border-top-right-radius: 0.375rem; + border-start-end-radius: 0.375rem; } .rounded-tr-lg { - border-top-right-radius: 0.5rem; + border-start-end-radius: 0.5rem; } .rounded-tr-xl { - border-top-right-radius: 0.75rem; + border-start-end-radius: 0.75rem; } .rounded-tr-2xl { - border-top-right-radius: 1rem; + border-start-end-radius: 1rem; } .rounded-tr-3xl { - border-top-right-radius: 1.5rem; + border-start-end-radius: 1.5rem; } .rounded-tr-full { - border-top-right-radius: 9999px; + border-start-end-radius: 9999px; } .rounded-br-none { - border-bottom-right-radius: 0px; + border-end-end-radius: 0px; } .rounded-br-sm { - border-bottom-right-radius: 0.125rem; + border-end-end-radius: 0.125rem; } .rounded-br { - border-bottom-right-radius: 0.25rem; + border-end-end-radius: 0.25rem; } .rounded-br-md { - border-bottom-right-radius: 0.375rem; + border-end-end-radius: 0.375rem; } .rounded-br-lg { - border-bottom-right-radius: 0.5rem; + border-end-end-radius: 0.5rem; } .rounded-br-xl { - border-bottom-right-radius: 0.75rem; + border-end-end-radius: 0.75rem; } .rounded-br-2xl { - border-bottom-right-radius: 1rem; + border-end-end-radius: 1rem; } .rounded-br-3xl { - border-bottom-right-radius: 1.5rem; + border-end-end-radius: 1.5rem; } .rounded-br-full { - border-bottom-right-radius: 9999px; + border-end-end-radius: 9999px; } .rounded-bl-none { - border-bottom-left-radius: 0px; + border-end-start-radius: 0px; } .rounded-bl-sm { - border-bottom-left-radius: 0.125rem; + border-end-start-radius: 0.125rem; } .rounded-bl { - border-bottom-left-radius: 0.25rem; + border-end-start-radius: 0.25rem; } .rounded-bl-md { - border-bottom-left-radius: 0.375rem; + border-end-start-radius: 0.375rem; } .rounded-bl-lg { - border-bottom-left-radius: 0.5rem; + border-end-start-radius: 0.5rem; } .rounded-bl-xl { - border-bottom-left-radius: 0.75rem; + border-end-start-radius: 0.75rem; } .rounded-bl-2xl { - border-bottom-left-radius: 1rem; + border-end-start-radius: 1rem; } .rounded-bl-3xl { - border-bottom-left-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .rounded-bl-full { - border-bottom-left-radius: 9999px; + border-end-start-radius: 9999px; } diff --git a/src/scss/tokens/borders/_border-width.scss b/src/scss/tokens/borders/_border-width.scss index 6375ef63..f59482ce 100644 --- a/src/scss/tokens/borders/_border-width.scss +++ b/src/scss/tokens/borders/_border-width.scss @@ -14,102 +14,102 @@ border-width: 1px; } .border-x-0 { - border-left-width: 0px; - border-right-width: 0px; + border-inline-start-width: 0px; + border-inline-end-width: 0px; } .border-x-2 { - border-left-width: 2px; - border-right-width: 2px; + border-inline-start-width: 2px; + border-inline-end-width: 2px; } .border-x-4 { - border-left-width: 4px; - border-right-width: 4px; + border-inline-start-width: 4px; + border-inline-end-width: 4px; } .border-x-8 { - border-left-width: 8px; - border-right-width: 8px; + border-inline-start-width: 8px; + border-inline-end-width: 8px; } .border-x { - border-left-width: 1px; - border-right-width: 1px; + border-inline-start-width: 1px; + border-inline-end-width: 1px; } .border-y-0 { - border-top-width: 0px; - border-bottom-width: 0px; + border-block-start-width: 0px; + border-block-end-width: 0px; } .border-y-2 { - border-top-width: 2px; - border-bottom-width: 2px; + border-block-start-width: 2px; + border-block-end-width: 2px; } .border-y-4 { - border-top-width: 4px; - border-bottom-width: 4px; + border-block-start-width: 4px; + border-block-end-width: 4px; } .border-y-8 { - border-top-width: 8px; - border-bottom-width: 8px; + border-block-start-width: 8px; + border-block-end-width: 8px; } .border-y { - border-top-width: 1px; - border-bottom-width: 1px; + border-block-start-width: 1px; + border-block-end-width: 1px; } .border-t-0 { - border-top-width: 0px; + border-block-start-width: 0px; } .border-t-2 { - border-top-width: 2px; + border-block-start-width: 2px; } .border-t-4 { - border-top-width: 4px; + border-block-start-width: 4px; } .border-t-8 { - border-top-width: 8px; + border-block-start-width: 8px; } .border-t { - border-top-width: 1px; + border-block-start-width: 1px; } .border-r-0 { - border-right-width: 0px; + border-inline-end-width: 0px; } .border-r-2 { - border-right-width: 2px; + border-inline-end-width: 2px; } .border-r-4 { - border-right-width: 4px; + border-inline-end-width: 4px; } .border-r-8 { - border-right-width: 8px; + border-inline-end-width: 8px; } .border-r { - border-right-width: 1px; + border-inline-end-width: 1px; } .border-b-0 { - border-bottom-width: 0px; + border-block-end-width: 0px; } .border-b-2 { - border-bottom-width: 2px; + border-block-end-width: 2px; } .border-b-4 { - border-bottom-width: 4px; + border-block-end-width: 4px; } .border-b-8 { - border-bottom-width: 8px; + border-block-end-width: 8px; } .border-b { - border-bottom-width: 1px; + border-block-end-width: 1px; } .border-l-0 { - border-left-width: 0px; + border-inline-start-width: 0px; } .border-l-2 { - border-left-width: 2px; + border-inline-start-width: 2px; } .border-l-4 { - border-left-width: 4px; + border-inline-start-width: 4px; } .border-l-8 { - border-left-width: 8px; + border-inline-start-width: 8px; } .border-l { - border-left-width: 1px; + border-inline-start-width: 1px; } 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..15ebb8f2 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-start: $value; + padding-inline-end: $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-start: $value !important; + padding-inline-end: $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..e70b7a36 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-start: $value; + margin-inline-end: $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-start: $value !important; + margin-inline-end: $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-start: auto; + margin-inline-end: 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-start: auto !important; + margin-inline-end: 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..a2bc4a50 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-start: $value; + padding-inline-end: $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-start: $value !important; + padding-inline-end: $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..d00c09ca 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-start: auto; + padding-inline-end: 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-start: auto !important; + padding-inline-end: auto !important; } %\!fpy-auto { - padding-top: auto !important; - padding-bottom: auto !important; + padding-block-start: auto !important; + padding-block-end: auto !important; }