wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #299 from reuters-graphics/margins-for-rtl

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2025-05-14 01:51:27 -07:00 committed by GitHub
commit c1da24da0c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
55 changed files with 633 additions and 590 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/angry-zoos-wonder.md Normal file
View file

@ -0,0 +1,5 @@
---
'@reuters-graphics/graphics-components': patch
---
Update tokens and component layouts to accomodate margins and paddings for RTL webpages

1
.storybook/main.ts
View file

@ -8,6 +8,7 @@ const config: StorybookConfig = {
'@chromatic-com/storybook', '@chromatic-com/storybook',
'@storybook/addon-interactions', '@storybook/addon-interactions',
'@storybook/addon-a11y', '@storybook/addon-a11y',
'storybook-addon-rtl',
], ],
framework: { framework: {
name: '@storybook/sveltekit', name: '@storybook/sveltekit',

6
chromatic.config.json Normal file
View file

@ -0,0 +1,6 @@
{
"onlyChanged": true,
"projectId": "Project:64a5c42823795823edcb60f4",
"zip": true,
"buildScriptName": "build:docs"
}

1
package.json
View file

@ -105,6 +105,7 @@
"proper-url-join": "^2.1.2", "proper-url-join": "^2.1.2",
"pym.js": "^1.3.2", "pym.js": "^1.3.2",
"slugify": "^1.6.6", "slugify": "^1.6.6",
"storybook-addon-rtl": "^1.1.0",
"svelte-fa": "^4.0.3", "svelte-fa": "^4.0.3",
"svelte-intersection-observer": "^1.0.0" "svelte-intersection-observer": "^1.0.0"
}, },

8
pnpm-lock.yaml
View file

@ -38,6 +38,9 @@ importers:
slugify: slugify:
specifier: ^1.6.6 specifier: ^1.6.6
version: 1.6.6 version: 1.6.6
storybook-addon-rtl:
specifier: ^1.1.0
version: 1.1.0
svelte-fa: svelte-fa:
specifier: ^4.0.3 specifier: ^4.0.3
version: 4.0.3(svelte@5.28.1) version: 4.0.3(svelte@5.28.1)
@ -3539,6 +3542,9 @@ packages:
sprintf-js@1.0.3: sprintf-js@1.0.3:
resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
storybook-addon-rtl@1.1.0:
resolution: {integrity: sha512-L8JljF1M+30rcSuM4JjeIi4ZRmg9WZi/1u4T/5/EQvpDKCMOAq7uHeOKj4YS1InC4Zksnz3DrggXmO3mISXKcQ==}
storybook@8.6.12: storybook@8.6.12:
resolution: {integrity: sha512-Z/nWYEHBTLK1ZBtAWdhxC0l5zf7ioJ7G4+zYqtTdYeb67gTnxNj80gehf8o8QY9L2zA2+eyMRGLC2V5fI7Z3Tw==} resolution: {integrity: sha512-Z/nWYEHBTLK1ZBtAWdhxC0l5zf7ioJ7G4+zYqtTdYeb67gTnxNj80gehf8o8QY9L2zA2+eyMRGLC2V5fI7Z3Tw==}
hasBin: true hasBin: true
@ -8081,6 +8087,8 @@ snapshots:
sprintf-js@1.0.3: {} sprintf-js@1.0.3: {}
storybook-addon-rtl@1.1.0: {}
storybook@8.6.12(prettier@3.5.3): storybook@8.6.12(prettier@3.5.3):
dependencies: dependencies:
'@storybook/core': 8.6.12(prettier@3.5.3)(storybook@8.6.12(prettier@3.5.3)) '@storybook/core': 8.6.12(prettier@3.5.3)(storybook@8.6.12(prettier@3.5.3))

2
src/components/Article/Article.mdx
View file

@ -105,7 +105,7 @@ If you're not using our `Block` component, you can still inherit the column widt
} }
&.fluid { &.fluid {
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-inline-start: -15px;
max-width: none; max-width: none;
} }
} }

8
src/components/Article/Article.stories.svelte
View file

@ -65,12 +65,12 @@
} }
:global(#article-story-basic, #article-column-widths-demo) { :global(#article-story-basic, #article-column-widths-demo) {
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-inline-start: -15px;
} }
:global(#article-column-widths-demo) { :global(#article-column-widths-demo) {
background-color: #ddd; background-color: #ddd;
position: relative; position: relative;
margin-bottom: 10px; margin-block-end: 10px;
} }
:global(#article-column-widths-demo .article-boundaries) { :global(#article-column-widths-demo .article-boundaries) {
padding: 0; padding: 0;
@ -86,9 +86,9 @@
:global(#article-column-widths-demo div.article-block) { :global(#article-column-widths-demo div.article-block) {
height: 300px; height: 300px;
background: #81a1c1; background: #81a1c1;
margin-bottom: 2px; margin-block-end: 2px;
height: 50px; height: 50px;
padding-left: 3px; padding-inline-start: 3px;
color: white; color: white;
font-size: 1rem; font-size: 1rem;
} }

4
src/components/BeforeAfter/BeforeAfter.stories.svelte
View file

@ -40,13 +40,13 @@
afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020." afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
> >
{#snippet beforeOverlay()} {#snippet beforeOverlay()}
<div class="overlay p-3 before text-left"> <div class="overlay p-3 before">
<p class="h4 font-bold">July 7, 2020</p> <p class="h4 font-bold">July 7, 2020</p>
<p class="body-note">Initially, this site was far smaller.</p> <p class="body-note">Initially, this site was far smaller.</p>
</div> </div>
{/snippet} {/snippet}
{#snippet afterOverlay()} {#snippet afterOverlay()}
<div class="overlay p-3 after text-right"> <div class="overlay p-3 after">
<p class="h4 font-bold">Oct. 20, 2020</p> <p class="h4 font-bold">Oct. 20, 2020</p>
<p class="body-note">But then forces built up.</p> <p class="body-note">But then forces built up.</p>
</div> </div>

21
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -280,6 +280,7 @@
button.before-after-container { button.before-after-container {
box-sizing: content-box; box-sizing: content-box;
text-align: inherit;
img { img {
top: 0; top: 0;
@ -296,10 +297,10 @@
.overlay-container { .overlay-container {
top: 0; top: 0;
:global(:first-child) { :global(:first-child) {
margin-top: 0; margin-block-start: 0;
} }
:global(:last-child) { :global(:last-child) {
margin-bottom: 0; margin-block-end: 0;
} }
&.before { &.before {
left: 0; left: 0;
@ -352,18 +353,18 @@
height: 0; height: 0;
user-select: none; user-select: none;
position: relative; position: relative;
border-top: 10px solid transparent; border-block-start: 10px solid transparent;
border-bottom: 10px solid transparent; border-block-end: 10px solid transparent;
} }
.arrow-right { .arrow-right {
left: 19px; inset-inline-start: 19px;
bottom: 14px; inset-block-end: 14px;
border-left: 10px solid var(--before-after-handle-colour); border-inline-start: 10px solid var(--before-after-handle-colour);
} }
.arrow-left { .arrow-left {
left: 3px; inset-inline-start: 3px;
top: 6px; inset-block-start: 6px;
border-right: 10px solid var(--before-after-handle-colour); border-inline-end: 10px solid var(--before-after-handle-colour);
} }
} }

6
src/components/Block/Block.stories.svelte
View file

@ -129,7 +129,7 @@
background-color: #ddd; background-color: #ddd;
position: relative; position: relative;
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-inline-start: -15px;
} }
:global(#block-demo-article .article-boundaries) { :global(#block-demo-article .article-boundaries) {
padding: 0 0 18px; padding: 0 0 18px;
@ -142,7 +142,7 @@
background: #81a1c1; background: #81a1c1;
} }
:global(#block-demo-article div.article-block.block-snap-widths-demo) { :global(#block-demo-article div.article-block.block-snap-widths-demo) {
margin-bottom: 2px; margin-block-end: 2px;
height: 40px; height: 40px;
font-size: 11px; font-size: 11px;
} }
@ -153,7 +153,7 @@
#block-demo-article .label, #block-demo-article .label,
#block-demo-article div.article-block.block-snap-widths-demo #block-demo-article div.article-block.block-snap-widths-demo
) { ) {
padding-left: 3px; padding-inline-start: 3px;
color: white; color: white;
font-weight: 500; font-weight: 500;
} }

2
src/components/Byline/Byline.stories.svelte
View file

@ -9,7 +9,7 @@
argTypes: { argTypes: {
align: { align: {
control: 'select', control: 'select',
options: ['left', 'center'], options: ['auto', 'center'],
}, },
}, },
}); });

6
src/components/Byline/Byline.svelte
View file

@ -21,7 +21,7 @@
/** /**
* Alignment of the byline. * Alignment of the byline.
*/ */
align?: 'left' | 'center'; align?: 'auto' | 'center';
/** /**
* Add an id to to target with custom CSS. * Add an id to to target with custom CSS.
* @type {string} * @type {string}
@ -54,7 +54,7 @@
authors = [], authors = [],
publishTime, publishTime,
updateTime, updateTime,
align = 'left', align = 'auto',
id = '', id = '',
cls = '', cls = '',
getAuthorPage = getAuthorPageUrl, getAuthorPage = getAuthorPageUrl,
@ -63,7 +63,7 @@
updated, updated,
}: Props = $props(); }: Props = $props();
let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center'); let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
/** /**
/* Date validation and formatter functions /* Date validation and formatter functions

2
src/components/EndNotes/EndNotes.svelte
View file

@ -44,7 +44,7 @@
@include mixins.font-medium; @include mixins.font-medium;
@include mixins.tracking-normal; @include mixins.tracking-normal;
@include mixins.fmt-3; @include mixins.fmt-3;
margin-bottom: 0.125rem; margin-block-end: 0.125rem;
text-transform: none; text-transform: none;
} }
} }

6
src/components/Framer/Resizer/index.svelte
View file

@ -167,7 +167,7 @@
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
margin-right: 5px; margin-inline-end: 5px;
} }
button.icon { button.icon {
font-size: 14px; font-size: 14px;
@ -198,10 +198,10 @@
} }
&.left { &.left {
text-align: right; text-align: right;
padding-right: 3px; padding-inline-end: 3px;
} }
&.right { &.right {
padding-left: 6px; padding-inline-start: 6px;
text-align: left; text-align: left;
} }
} }

2
src/components/Framer/Typeahead/index.svelte
View file

@ -349,7 +349,7 @@
} }
:global([data-svelte-search] label) { :global([data-svelte-search] label) {
margin-bottom: 0.25rem; margin-block-end: 0.25rem;
display: inline-flex; display: inline-flex;
font-size: 0.75rem; font-size: 0.75rem;
color: #aaa; color: #aaa;

4
src/components/HeroHeadline/HeroHeadline.mdx
View file

@ -51,7 +51,7 @@ In the graphics kit, set styles in `global.scss` to make the Reuters site header
border: none !important; border: none !important;
} }
.hero-wrapper { .hero-wrapper {
margin-top: -64px; margin-block-start: -64px;
} }
``` ```
@ -316,7 +316,7 @@ Add styles in `global.scss`:
} }
.dek { .dek {
margin-top: 1rem; margin-block-start: 1rem;
p { p {
color: #ffffff; color: #ffffff;
text-shadow: 1px 1px 8px #ff7c88; text-shadow: 1px 1px 8px #ff7c88;

4
src/components/HeroHeadline/HeroHeadline.stories.svelte
View file

@ -259,7 +259,7 @@
} }
.dek { .dek {
margin-top: 1rem; margin-block-start: 1rem;
p { p {
color: #ffffff; color: #ffffff;
text-shadow: 1px 1px 8px #ff7c88; text-shadow: 1px 1px 8px #ff7c88;
@ -281,7 +281,7 @@
} }
:global(.hero-wrapper) { :global(.hero-wrapper) {
margin-top: -64px; margin-block-start: -64px;
} }
} }
</style> </style>

4
src/components/HeroHeadline/HeroHeadline.svelte
View file

@ -200,7 +200,7 @@
{getAuthorPage} {getAuthorPage}
{published} {published}
{updated} {updated}
align="left" align="auto"
/> />
{/if} {/if}
</div> </div>
@ -251,7 +251,7 @@
@media (max-width: 690px) { @media (max-width: 690px) {
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
margin-left: 0; margin-inline-start: 0;
} }
} }
} }

2
src/components/PhotoPack/PhotoPack.svelte
View file

@ -85,7 +85,7 @@
<div <div
class="photopack-row flex justify-between" class="photopack-row flex justify-between"
style:gap="0 {gap}px" style:gap="0 {gap}px"
style:margin-bottom={ri < rows.length - 1 ? gap + 'px' : ''} style:margin-block-end={ri < rows.length - 1 ? gap + 'px' : ''}
> >
{#each row as img, i} {#each row as img, i}
<figure <figure

2
src/components/ReferralBlock/ReferralBlock.svelte
View file

@ -185,7 +185,7 @@
} }
div.heading { div.heading {
margin-top: 0; margin-block-start: 0;
font-family: Knowledge, sans-serif; font-family: Knowledge, sans-serif;
&.stacked { &.stacked {
max-width: 450px; max-width: 450px;

2
src/components/Scroller/Embedded/Foreground.svelte
View file

@ -42,7 +42,7 @@
<style lang="scss"> <style lang="scss">
div.embedded-foreground { div.embedded-foreground {
:global(p:last-child) { :global(p:last-child) {
margin-bottom: 0; margin-block-end: 0;
} }
} }
</style> </style>

4
src/components/Scroller/Foreground.svelte
View file

@ -54,10 +54,10 @@
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
:global(p:last-child) { :global(p:last-child) {
margin-bottom: 0; margin-block-end: 0;
} }
:global(*:first-child) { :global(*:first-child) {
margin-top: 0; margin-block-start: 0;
} }
} }
} }

8
src/components/SearchInput/SearchInput.svelte
View file

@ -57,8 +57,8 @@
.search { .search {
width: 250px; width: 250px;
.search--icon { .search--icon {
left: 0.5rem; inset-inline-start: 0.5rem;
top: 0.55rem; inset-block-start: 0.55rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
fill: mixins.$theme-colour-brand-rules; fill: mixins.$theme-colour-brand-rules;
@ -71,8 +71,8 @@
width: 100%; width: 100%;
} }
.search--x { .search--x {
right: 0; inset-inline-end: 0;
top: 0.55rem; inset-block-start: 0.55rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
fill: mixins.$theme-colour-text-primary; fill: mixins.$theme-colour-text-primary;

8
src/components/SimpleTimeline/SimpleTimeline.svelte
View file

@ -95,15 +95,15 @@
@use '../../scss/mixins' as mixins; @use '../../scss/mixins' as mixins;
.timeline { .timeline {
.date { .date {
border-left: 1px solid var(--symbol-colour); border-inline-start: 1px solid var(--symbol-colour);
&:last-child { &:last-child {
border-left: 1px solid mixins.$theme-colour-background; border-inline-start: 1px solid mixins.$theme-colour-background;
@include mixins.fpb-0; @include mixins.fpb-0;
} }
} }
svg { svg {
top: -1px; inset-block-start: -1px;
left: -10px; inset-inline-start: -10px;
} }
div.title { div.title {
@include mixins.fmt-2; @include mixins.fmt-2;

12
src/components/SiteFooter/CompanyLinks.svelte
View file

@ -78,8 +78,8 @@
} }
.company { .company {
padding-top: 24px; padding-block-start: 24px;
padding-bottom: 24px; padding-block-end: 24px;
box-sizing: border-box; box-sizing: border-box;
.content-container { .content-container {
@ -92,7 +92,7 @@
.content-container { .content-container {
box-sizing: border-box; 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 { .company .content-container {
@ -146,17 +146,17 @@
list-style: none; list-style: none;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: 16px; margin-inline-start: 16px;
&:first-child { &:first-child {
margin-left: 0; margin-inline-start: 0;
} }
} }
section.company { section.company {
max-width: 100%; max-width: 100%;
h2 { h2 {
margin-bottom: 12px; margin-block-end: 12px;
line-height: 1.333; line-height: 1.333;
font-size: 16px; font-size: 16px;
color: var(--nav-primary); color: var(--nav-primary);

8
src/components/SiteFooter/LegalLinks.svelte
View file

@ -73,8 +73,8 @@
} }
.legal { .legal {
padding-top: 24px; padding-block-start: 24px;
padding-bottom: 24px; padding-block-end: 24px;
box-sizing: border-box; box-sizing: border-box;
.content-container { .content-container {
@ -87,7 +87,7 @@
.content-container { .content-container {
box-sizing: border-box; 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 { li {
display: inline-flex; display: inline-flex;
margin-right: 16px; margin-inline-end: 16px;
list-style: none; list-style: none;
align-items: center; align-items: center;
a { a {

12
src/components/SiteFooter/QuickLinks.svelte
View file

@ -160,8 +160,8 @@
} }
.quick-links { .quick-links {
padding-top: 24px; padding-block-start: 24px;
padding-bottom: 24px; padding-block-end: 24px;
box-sizing: border-box; box-sizing: border-box;
.content-container { .content-container {
@ -193,7 +193,7 @@
.content-container { .content-container {
box-sizing: border-box; box-sizing: border-box;
@include grids.spacing-single(padding-left padding-right); @include grids.spacing-single(padding-inline-start padding-inline-end);
} }
h3 { h3 {
@ -223,7 +223,7 @@
grid-row: 1; grid-row: 1;
.media { .media {
margin-top: 24px; margin-block-start: 24px;
} }
} }
@ -242,13 +242,13 @@
} }
.stay-informed { .stay-informed {
margin-top: 24px; margin-block-start: 24px;
} }
} }
.symbol { .symbol {
width: 20px; width: 20px;
margin-right: 16px; margin-inline-end: 16px;
} }
.visually-hidden { .visually-hidden {

2
src/components/SiteFooter/SiteFooter.stories.svelte
View file

@ -24,6 +24,6 @@
<style> <style>
div { div {
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-inline-start: -15px;
} }
</style> </style>

2
src/components/SiteFooter/SiteFooter.svelte
View file

@ -69,7 +69,7 @@
<style lang="scss"> <style lang="scss">
footer { footer {
margin-top: 0; margin-block-start: 0;
background-color: var(--nav-background, #fff); background-color: var(--nav-background, #fff);
div { div {
max-width: 1400px; max-width: 1400px;

12
src/components/SiteHeader/MobileMenu/index.svelte
View file

@ -83,7 +83,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-bottom: 60px; padding-block-end: 60px;
box-sizing: border-box; box-sizing: border-box;
background: var(--nav-background); background: var(--nav-background);
color: var(--nav-primary); color: var(--nav-primary);
@ -110,7 +110,7 @@
.close-button { .close-button {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-left: auto; margin-inline-start: auto;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
outline: none; outline: none;
@ -145,16 +145,16 @@
.header { .header {
border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey)); 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 { .section {
padding-top: 16px; padding-block-start: 16px;
padding-bottom: 16px; padding-block-end: 16px;
border-bottom: 1px solid var(--tr-muted-grey); border-bottom: 1px solid var(--tr-muted-grey);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@include spacing-single(padding-left padding-right); @include spacing-single(padding-inline-start padding-inline-end);
.subsections { .subsections {
margin: 20px 0 0; margin: 20px 0 0;

2
src/components/SiteHeader/NavBar/DownArrow.svelte
View file

@ -22,7 +22,7 @@
<style lang="scss"> <style lang="scss">
@use './../scss/_colors.scss' as *; @use './../scss/_colors.scss' as *;
svg { svg {
margin-left: 4px; margin-inline-start: 4px;
width: 10px; width: 10px;
fill: var(--nav-primary, var(--tr-dark-grey)); fill: var(--nav-primary, var(--tr-dark-grey));
transition: transform 0.15s ease; transition: transform 0.15s ease;

6
src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
View file

@ -61,7 +61,7 @@
.more-section-group { .more-section-group {
&.has-children { &.has-children {
margin-bottom: 20px; margin-block-end: 20px;
} }
.subsections { .subsections {
@ -83,7 +83,7 @@
font-weight: 400; font-weight: 400;
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
margin-bottom: 2px; margin-block-end: 2px;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline !important; text-decoration: underline !important;
@ -93,7 +93,7 @@
.section-link { .section-link {
grid-column: 1 / -1; grid-column: 1 / -1;
margin-bottom: 16px; margin-block-end: 16px;
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;

6
src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
View file

@ -78,12 +78,12 @@
} }
&:first-child { &:first-child {
margin-right: 16px; margin-inline-end: 16px;
} }
@include for-tablet-down { @include for-tablet-down {
&:nth-child(2) { &:nth-child(2) {
margin-top: 0; margin-block-start: 0;
} }
} }
} }
@ -94,7 +94,7 @@
font-weight: 400; font-weight: 400;
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
margin-bottom: 2px; margin-block-end: 2px;
font-family: var(--theme-font-family-sans-serif); font-family: var(--theme-font-family-sans-serif);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

2
src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
View file

@ -16,7 +16,7 @@
.spinner-container { .spinner-container {
position: relative; position: relative;
height: 0; height: 0;
padding-bottom: 100%; padding-block-end: 100%;
color: var(--nav-primary, var(--tr-dark-grey)); color: var(--nav-primary, var(--tr-dark-grey));
} }

4
src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
View file

@ -50,7 +50,7 @@
} }
.story-text { .story-text {
margin-right: 10px; margin-inline-end: 10px;
width: 100%; width: 100%;
&.has-thumbnail { &.has-thumbnail {
width: calc(100% - 84px); width: calc(100% - 84px);
@ -68,7 +68,7 @@
time { time {
@include font-sans; @include font-sans;
margin-top: 8px; margin-block-start: 8px;
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;

12
src/components/SiteHeader/NavBar/NavDropdown/index.svelte
View file

@ -131,7 +131,7 @@
margin: 0 auto; margin: 0 auto;
@include breakpoints.max-width; @include breakpoints.max-width;
@include grids.responsive-columns(12); @include grids.responsive-columns(12);
@include grids.spacing-single(padding-left padding-right); @include grids.spacing-single(padding-inline-start padding-inline-end);
} }
} }
@ -164,7 +164,7 @@
.inner { .inner {
border-left: 1px solid var(--nav-rules, var(--tr-muted-grey)); border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
@include grids.spacing-single(padding-left); @include grids.spacing-single(padding-inline-start);
} }
@include breakpoints.for-extra-wide-desktop { @include breakpoints.for-extra-wide-desktop {
@ -196,7 +196,7 @@
} }
.story-item { .story-item {
padding-bottom: 20px; padding-block-end: 20px;
margin: 0; margin: 0;
animation: fadein 0.5s both $easeOutExpo; animation: fadein 0.5s both $easeOutExpo;
@ -207,12 +207,12 @@
&:nth-child(3), &:nth-child(3),
&:nth-child(4) { &:nth-child(4) {
padding-top: 20px; padding-block-start: 20px;
} }
@include grids.at-4-columns { @include grids.at-4-columns {
&:nth-child(2) { &:nth-child(2) {
padding-top: 20px; padding-block-start: 20px;
} }
&:nth-child(3) { &:nth-child(3) {
border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey)); border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
@ -222,7 +222,7 @@
.spinner { .spinner {
width: 40px; width: 40px;
margin-left: -20px; margin-inline-start: -20px;
position: absolute; position: absolute;
top: 60px; top: 60px;
left: 50%; left: 50%;

2
src/components/SiteHeader/NavBar/index.svelte
View file

@ -135,7 +135,7 @@
$mobile-nav-height: 56px; $mobile-nav-height: 56px;
.nav-bar { .nav-bar {
margin-left: auto; margin-inline-start: auto;
@include for-mobile { @include for-mobile {
display: none; display: none;

2
src/components/SiteHeader/SiteHeader.stories.svelte
View file

@ -42,6 +42,6 @@
div { div {
min-height: 625px; min-height: 625px;
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-inline-start: -15px;
} }
</style> </style>

8
src/components/SiteHeader/SiteHeader.svelte
View file

@ -155,7 +155,7 @@
height: $nav-height; height: $nav-height;
justify-content: space-between; justify-content: space-between;
@include max-width; @include max-width;
@include grids.spacing-single(padding-left padding-right); @include grids.spacing-single(padding-inline-start padding-inline-end);
@include for-mobile { @include for-mobile {
height: $mobile-nav-height; height: $mobile-nav-height;
@ -180,7 +180,7 @@
} }
.spacer-container { .spacer-container {
margin-left: auto; margin-inline-start: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -199,7 +199,7 @@
} }
.mobile-button-group { .mobile-button-group {
margin-left: auto; margin-inline-start: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -209,7 +209,7 @@
} }
.mobile-menu { .mobile-menu {
margin-left: 8px; margin-inline-start: 8px;
@include for-tablet-up { @include for-tablet-up {
display: none; display: none;
} }

2
src/components/Spinner/Spinner.svelte
View file

@ -61,7 +61,7 @@
.spinner-container { .spinner-container {
height: 0; height: 0;
padding-bottom: 100%; padding-block-end: 100%;
color: var(--spinner-colour, #666); color: var(--spinner-colour, #666);
} }

11
src/components/Table/Table.svelte
View file

@ -304,7 +304,7 @@
thead { thead {
tr { tr {
th { th {
border-bottom: 1px solid var(--theme-colour-text-primary); border-block-end: 1px solid var(--theme-colour-text-primary);
@include mixins.bg; @include mixins.bg;
text-align: inherit; text-align: inherit;
&.sortable { &.sortable {
@ -314,7 +314,7 @@
.table--thead--sortarrow { .table--thead--sortarrow {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 5px; inset-inline-start: 5px;
} }
} }
} }
@ -323,8 +323,9 @@
td { td {
@include mixins.text-sm; @include mixins.text-sm;
@include mixins.font-regular; @include mixins.font-regular;
font-variant-numeric: tabular-nums;
vertical-align: top; vertical-align: top;
border-bottom: 1px solid border-block-end: 1px solid
var(--theme-colour-brand-rules, var(--tr-muted-grey)); var(--theme-colour-brand-rules, var(--tr-muted-grey));
&.no-results { &.no-results {
@include mixins.text-secondary; @include mixins.text-secondary;
@ -333,7 +334,7 @@
} }
tfoot.table--tfoot { tfoot.table--tfoot {
tr { tr {
border-bottom: 0; border-block-end: 0;
} }
td { td {
@include mixins.body-caption; @include mixins.body-caption;
@ -341,7 +342,7 @@
} }
&.truncated { &.truncated {
tbody tr:last-child:not(:first-child) { tbody tr:last-child:not(:first-child) {
border-bottom: none; border-block-end: none;
mask-image: linear-gradient( mask-image: linear-gradient(
to bottom, to bottom,
var(--theme-colour-text-primary) 0%, var(--theme-colour-text-primary) 0%,

3
src/components/Table/components/RightArrow.svelte → src/components/Table/components/NextArrow.svelte
View file

@ -15,4 +15,7 @@
width: 1rem; width: 1rem;
fill: currentColor; fill: currentColor;
} }
:global([dir='rtl']) .icon {
transform: rotate(180deg);
}
</style> </style>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 493 B

9
src/components/Table/components/Pagination.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { intcomma } from 'journalize'; import { intcomma } from 'journalize';
import LeftArrow from './LeftArrow.svelte'; import PrevArrow from './PrevArrow.svelte';
import RightArrow from './RightArrow.svelte'; import NextArrow from './NextArrow.svelte';
interface Props { interface Props {
/** /**
@ -49,7 +49,7 @@
<nav aria-label="pagination" class="pagination fmt-4"> <nav aria-label="pagination" class="pagination fmt-4">
<button onclick={goToPreviousPage} disabled={pageNumber === 1} <button onclick={goToPreviousPage} disabled={pageNumber === 1}
><div class="icon-wrapper"> ><div class="icon-wrapper">
<LeftArrow /> <PrevArrow />
<span class="visually-hidden">Previous page</span> <span class="visually-hidden">Previous page</span>
</div></button </div></button
> >
@ -62,7 +62,7 @@
onclick={goToNextPage} onclick={goToNextPage}
disabled={pageNumber === Math.ceil(n / pageSize)} disabled={pageNumber === Math.ceil(n / pageSize)}
><div class="icon-wrapper"> ><div class="icon-wrapper">
<RightArrow /> <NextArrow />
<span class="visually-hidden">Next page</span> <span class="visually-hidden">Next page</span>
</div></button </div></button
> >
@ -75,6 +75,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: row;
button { button {
border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey)); border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));

3
src/components/Table/components/LeftArrow.svelte → src/components/Table/components/PrevArrow.svelte
View file

@ -15,4 +15,7 @@
width: 1rem; width: 1rem;
fill: currentColor; fill: currentColor;
} }
:global([dir='rtl']) .icon {
transform: rotate(180deg);
}
</style> </style>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 493 B

27
src/components/Table/components/Select.svelte
View file

@ -23,7 +23,7 @@
} }
</script> </script>
<div class="select"> <div class="select relative inline-flex">
<select <select
class="select--input body-caption fpx-2" class="select--input body-caption fpx-2"
name="select--input" name="select--input"
@ -34,6 +34,18 @@
<option value={obj.value}>{obj.text} {label.toLowerCase()}</option> <option value={obj.value}>{obj.text} {label.toLowerCase()}</option>
{/each} {/each}
</select> </select>
<div class="arrow absolute">
<svg
width="15"
height="9"
viewBox="0 0 15 9"
xmlns="http://www.w3.org/2000/svg"
><path
d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z"
fill="var(--theme-colour-brand-rules)"
/></svg
>
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -50,12 +62,13 @@
-moz-appearance: none; /* Firefox */ -moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */ -webkit-appearance: none; /* Safari and Chrome */
appearance: none; /* Remove the default arrow */ appearance: none; /* Remove the default arrow */
}
background: transparent; .arrow {
background-image: url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>'); pointer-events: none;
background-repeat: no-repeat; inset-inline-end: 0;
background-position-x: 225px; inset-block-start: 0.55rem;
background-position-y: 55%; width: 1.5rem;
height: 1.5rem;
} }
.select--input::-ms-expand { .select--input::-ms-expand {
display: none; /* Remove the default arrow in Internet Explorer 11 */ display: none; /* Remove the default arrow in Internet Explorer 11 */

2
src/components/ToolsHeader/ToolsHeader.stories.svelte
View file

@ -17,6 +17,6 @@
<style> <style>
div { div {
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-inline-start: -15px;
} }
</style> </style>

216
src/scss/tokens/borders/_border-radius.scss
View file

@ -26,254 +26,254 @@
border-radius: 9999px; border-radius: 9999px;
} }
.rounded-t-none { .rounded-t-none {
border-top-left-radius: 0px; border-start-start-radius: 0px;
border-top-right-radius: 0px; border-start-end-radius: 0px;
} }
.rounded-t-sm { .rounded-t-sm {
border-top-left-radius: 0.125rem; border-start-start-radius: 0.125rem;
border-top-right-radius: 0.125rem; border-start-end-radius: 0.125rem;
} }
.rounded-t { .rounded-t {
border-top-left-radius: 0.25rem; border-start-start-radius: 0.25rem;
border-top-right-radius: 0.25rem; border-start-end-radius: 0.25rem;
} }
.rounded-t-md { .rounded-t-md {
border-top-left-radius: 0.375rem; border-start-start-radius: 0.375rem;
border-top-right-radius: 0.375rem; border-start-end-radius: 0.375rem;
} }
.rounded-t-lg { .rounded-t-lg {
border-top-left-radius: 0.5rem; border-start-start-radius: 0.5rem;
border-top-right-radius: 0.5rem; border-start-end-radius: 0.5rem;
} }
.rounded-t-xl { .rounded-t-xl {
border-top-left-radius: 0.75rem; border-start-start-radius: 0.75rem;
border-top-right-radius: 0.75rem; border-start-end-radius: 0.75rem;
} }
.rounded-t-2xl { .rounded-t-2xl {
border-top-left-radius: 1rem; border-start-start-radius: 1rem;
border-top-right-radius: 1rem; border-start-end-radius: 1rem;
} }
.rounded-t-3xl { .rounded-t-3xl {
border-top-left-radius: 1.5rem; border-start-start-radius: 1.5rem;
border-top-right-radius: 1.5rem; border-start-end-radius: 1.5rem;
} }
.rounded-t-full { .rounded-t-full {
border-top-left-radius: 9999px; border-start-start-radius: 9999px;
border-top-right-radius: 9999px; border-start-end-radius: 9999px;
} }
.rounded-r-none { .rounded-r-none {
border-top-right-radius: 0px; border-start-end-radius: 0px;
border-bottom-right-radius: 0px; border-end-end-radius: 0px;
} }
.rounded-r-sm { .rounded-r-sm {
border-top-right-radius: 0.125rem; border-start-end-radius: 0.125rem;
border-bottom-right-radius: 0.125rem; border-end-end-radius: 0.125rem;
} }
.rounded-r { .rounded-r {
border-top-right-radius: 0.25rem; border-start-end-radius: 0.25rem;
border-bottom-right-radius: 0.25rem; border-end-end-radius: 0.25rem;
} }
.rounded-r-md { .rounded-r-md {
border-top-right-radius: 0.375rem; border-start-end-radius: 0.375rem;
border-bottom-right-radius: 0.375rem; border-end-end-radius: 0.375rem;
} }
.rounded-r-lg { .rounded-r-lg {
border-top-right-radius: 0.5rem; border-start-end-radius: 0.5rem;
border-bottom-right-radius: 0.5rem; border-end-end-radius: 0.5rem;
} }
.rounded-r-xl { .rounded-r-xl {
border-top-right-radius: 0.75rem; border-start-end-radius: 0.75rem;
border-bottom-right-radius: 0.75rem; border-end-end-radius: 0.75rem;
} }
.rounded-r-2xl { .rounded-r-2xl {
border-top-right-radius: 1rem; border-start-end-radius: 1rem;
border-bottom-right-radius: 1rem; border-end-end-radius: 1rem;
} }
.rounded-r-3xl { .rounded-r-3xl {
border-top-right-radius: 1.5rem; border-start-end-radius: 1.5rem;
border-bottom-right-radius: 1.5rem; border-end-end-radius: 1.5rem;
} }
.rounded-r-full { .rounded-r-full {
border-top-right-radius: 9999px; border-start-end-radius: 9999px;
border-bottom-right-radius: 9999px; border-end-end-radius: 9999px;
} }
.rounded-b-none { .rounded-b-none {
border-bottom-right-radius: 0px; border-end-end-radius: 0px;
border-bottom-left-radius: 0px; border-end-start-radius: 0px;
} }
.rounded-b-sm { .rounded-b-sm {
border-bottom-right-radius: 0.125rem; border-end-end-radius: 0.125rem;
border-bottom-left-radius: 0.125rem; border-end-start-radius: 0.125rem;
} }
.rounded-b { .rounded-b {
border-bottom-right-radius: 0.25rem; border-end-end-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; border-end-start-radius: 0.25rem;
} }
.rounded-b-md { .rounded-b-md {
border-bottom-right-radius: 0.375rem; border-end-end-radius: 0.375rem;
border-bottom-left-radius: 0.375rem; border-end-start-radius: 0.375rem;
} }
.rounded-b-lg { .rounded-b-lg {
border-bottom-right-radius: 0.5rem; border-end-end-radius: 0.5rem;
border-bottom-left-radius: 0.5rem; border-end-start-radius: 0.5rem;
} }
.rounded-b-xl { .rounded-b-xl {
border-bottom-right-radius: 0.75rem; border-end-end-radius: 0.75rem;
border-bottom-left-radius: 0.75rem; border-end-start-radius: 0.75rem;
} }
.rounded-b-2xl { .rounded-b-2xl {
border-bottom-right-radius: 1rem; border-end-end-radius: 1rem;
border-bottom-left-radius: 1rem; border-end-start-radius: 1rem;
} }
.rounded-b-3xl { .rounded-b-3xl {
border-bottom-right-radius: 1.5rem; border-end-end-radius: 1.5rem;
border-bottom-left-radius: 1.5rem; border-end-start-radius: 1.5rem;
} }
.rounded-b-full { .rounded-b-full {
border-bottom-right-radius: 9999px; border-end-end-radius: 9999px;
border-bottom-left-radius: 9999px; border-end-start-radius: 9999px;
} }
.rounded-l-none { .rounded-l-none {
border-top-left-radius: 0px; border-start-start-radius: 0px;
border-bottom-left-radius: 0px; border-end-start-radius: 0px;
} }
.rounded-l-sm { .rounded-l-sm {
border-top-left-radius: 0.125rem; border-start-start-radius: 0.125rem;
border-bottom-left-radius: 0.125rem; border-end-start-radius: 0.125rem;
} }
.rounded-l { .rounded-l {
border-top-left-radius: 0.25rem; border-start-start-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; border-end-start-radius: 0.25rem;
} }
.rounded-l-md { .rounded-l-md {
border-top-left-radius: 0.375rem; border-start-start-radius: 0.375rem;
border-bottom-left-radius: 0.375rem; border-end-start-radius: 0.375rem;
} }
.rounded-l-lg { .rounded-l-lg {
border-top-left-radius: 0.5rem; border-start-start-radius: 0.5rem;
border-bottom-left-radius: 0.5rem; border-end-start-radius: 0.5rem;
} }
.rounded-l-xl { .rounded-l-xl {
border-top-left-radius: 0.75rem; border-start-start-radius: 0.75rem;
border-bottom-left-radius: 0.75rem; border-end-start-radius: 0.75rem;
} }
.rounded-l-2xl { .rounded-l-2xl {
border-top-left-radius: 1rem; border-start-start-radius: 1rem;
border-bottom-left-radius: 1rem; border-end-start-radius: 1rem;
} }
.rounded-l-3xl { .rounded-l-3xl {
border-top-left-radius: 1.5rem; border-start-start-radius: 1.5rem;
border-bottom-left-radius: 1.5rem; border-end-start-radius: 1.5rem;
} }
.rounded-l-full { .rounded-l-full {
border-top-left-radius: 9999px; border-start-start-radius: 9999px;
border-bottom-left-radius: 9999px; border-end-start-radius: 9999px;
} }
.rounded-tl-none { .rounded-tl-none {
border-top-left-radius: 0px; border-start-start-radius: 0px;
} }
.rounded-tl-sm { .rounded-tl-sm {
border-top-left-radius: 0.125rem; border-start-start-radius: 0.125rem;
} }
.rounded-tl { .rounded-tl {
border-top-left-radius: 0.25rem; border-start-start-radius: 0.25rem;
} }
.rounded-tl-md { .rounded-tl-md {
border-top-left-radius: 0.375rem; border-start-start-radius: 0.375rem;
} }
.rounded-tl-lg { .rounded-tl-lg {
border-top-left-radius: 0.5rem; border-start-start-radius: 0.5rem;
} }
.rounded-tl-xl { .rounded-tl-xl {
border-top-left-radius: 0.75rem; border-start-start-radius: 0.75rem;
} }
.rounded-tl-2xl { .rounded-tl-2xl {
border-top-left-radius: 1rem; border-start-start-radius: 1rem;
} }
.rounded-tl-3xl { .rounded-tl-3xl {
border-top-left-radius: 1.5rem; border-start-start-radius: 1.5rem;
} }
.rounded-tl-full { .rounded-tl-full {
border-top-left-radius: 9999px; border-start-start-radius: 9999px;
} }
.rounded-tr-none { .rounded-tr-none {
border-top-right-radius: 0px; border-start-end-radius: 0px;
} }
.rounded-tr-sm { .rounded-tr-sm {
border-top-right-radius: 0.125rem; border-start-end-radius: 0.125rem;
} }
.rounded-tr { .rounded-tr {
border-top-right-radius: 0.25rem; border-start-end-radius: 0.25rem;
} }
.rounded-tr-md { .rounded-tr-md {
border-top-right-radius: 0.375rem; border-start-end-radius: 0.375rem;
} }
.rounded-tr-lg { .rounded-tr-lg {
border-top-right-radius: 0.5rem; border-start-end-radius: 0.5rem;
} }
.rounded-tr-xl { .rounded-tr-xl {
border-top-right-radius: 0.75rem; border-start-end-radius: 0.75rem;
} }
.rounded-tr-2xl { .rounded-tr-2xl {
border-top-right-radius: 1rem; border-start-end-radius: 1rem;
} }
.rounded-tr-3xl { .rounded-tr-3xl {
border-top-right-radius: 1.5rem; border-start-end-radius: 1.5rem;
} }
.rounded-tr-full { .rounded-tr-full {
border-top-right-radius: 9999px; border-start-end-radius: 9999px;
} }
.rounded-br-none { .rounded-br-none {
border-bottom-right-radius: 0px; border-end-end-radius: 0px;
} }
.rounded-br-sm { .rounded-br-sm {
border-bottom-right-radius: 0.125rem; border-end-end-radius: 0.125rem;
} }
.rounded-br { .rounded-br {
border-bottom-right-radius: 0.25rem; border-end-end-radius: 0.25rem;
} }
.rounded-br-md { .rounded-br-md {
border-bottom-right-radius: 0.375rem; border-end-end-radius: 0.375rem;
} }
.rounded-br-lg { .rounded-br-lg {
border-bottom-right-radius: 0.5rem; border-end-end-radius: 0.5rem;
} }
.rounded-br-xl { .rounded-br-xl {
border-bottom-right-radius: 0.75rem; border-end-end-radius: 0.75rem;
} }
.rounded-br-2xl { .rounded-br-2xl {
border-bottom-right-radius: 1rem; border-end-end-radius: 1rem;
} }
.rounded-br-3xl { .rounded-br-3xl {
border-bottom-right-radius: 1.5rem; border-end-end-radius: 1.5rem;
} }
.rounded-br-full { .rounded-br-full {
border-bottom-right-radius: 9999px; border-end-end-radius: 9999px;
} }
.rounded-bl-none { .rounded-bl-none {
border-bottom-left-radius: 0px; border-end-start-radius: 0px;
} }
.rounded-bl-sm { .rounded-bl-sm {
border-bottom-left-radius: 0.125rem; border-end-start-radius: 0.125rem;
} }
.rounded-bl { .rounded-bl {
border-bottom-left-radius: 0.25rem; border-end-start-radius: 0.25rem;
} }
.rounded-bl-md { .rounded-bl-md {
border-bottom-left-radius: 0.375rem; border-end-start-radius: 0.375rem;
} }
.rounded-bl-lg { .rounded-bl-lg {
border-bottom-left-radius: 0.5rem; border-end-start-radius: 0.5rem;
} }
.rounded-bl-xl { .rounded-bl-xl {
border-bottom-left-radius: 0.75rem; border-end-start-radius: 0.75rem;
} }
.rounded-bl-2xl { .rounded-bl-2xl {
border-bottom-left-radius: 1rem; border-end-start-radius: 1rem;
} }
.rounded-bl-3xl { .rounded-bl-3xl {
border-bottom-left-radius: 1.5rem; border-end-start-radius: 1.5rem;
} }
.rounded-bl-full { .rounded-bl-full {
border-bottom-left-radius: 9999px; border-end-start-radius: 9999px;
} }

80
src/scss/tokens/borders/_border-width.scss
View file

@ -14,102 +14,102 @@
border-width: 1px; border-width: 1px;
} }
.border-x-0 { .border-x-0 {
border-left-width: 0px; border-inline-start-width: 0px;
border-right-width: 0px; border-inline-end-width: 0px;
} }
.border-x-2 { .border-x-2 {
border-left-width: 2px; border-inline-start-width: 2px;
border-right-width: 2px; border-inline-end-width: 2px;
} }
.border-x-4 { .border-x-4 {
border-left-width: 4px; border-inline-start-width: 4px;
border-right-width: 4px; border-inline-end-width: 4px;
} }
.border-x-8 { .border-x-8 {
border-left-width: 8px; border-inline-start-width: 8px;
border-right-width: 8px; border-inline-end-width: 8px;
} }
.border-x { .border-x {
border-left-width: 1px; border-inline-start-width: 1px;
border-right-width: 1px; border-inline-end-width: 1px;
} }
.border-y-0 { .border-y-0 {
border-top-width: 0px; border-block-start-width: 0px;
border-bottom-width: 0px; border-block-end-width: 0px;
} }
.border-y-2 { .border-y-2 {
border-top-width: 2px; border-block-start-width: 2px;
border-bottom-width: 2px; border-block-end-width: 2px;
} }
.border-y-4 { .border-y-4 {
border-top-width: 4px; border-block-start-width: 4px;
border-bottom-width: 4px; border-block-end-width: 4px;
} }
.border-y-8 { .border-y-8 {
border-top-width: 8px; border-block-start-width: 8px;
border-bottom-width: 8px; border-block-end-width: 8px;
} }
.border-y { .border-y {
border-top-width: 1px; border-block-start-width: 1px;
border-bottom-width: 1px; border-block-end-width: 1px;
} }
.border-t-0 { .border-t-0 {
border-top-width: 0px; border-block-start-width: 0px;
} }
.border-t-2 { .border-t-2 {
border-top-width: 2px; border-block-start-width: 2px;
} }
.border-t-4 { .border-t-4 {
border-top-width: 4px; border-block-start-width: 4px;
} }
.border-t-8 { .border-t-8 {
border-top-width: 8px; border-block-start-width: 8px;
} }
.border-t { .border-t {
border-top-width: 1px; border-block-start-width: 1px;
} }
.border-r-0 { .border-r-0 {
border-right-width: 0px; border-inline-end-width: 0px;
} }
.border-r-2 { .border-r-2 {
border-right-width: 2px; border-inline-end-width: 2px;
} }
.border-r-4 { .border-r-4 {
border-right-width: 4px; border-inline-end-width: 4px;
} }
.border-r-8 { .border-r-8 {
border-right-width: 8px; border-inline-end-width: 8px;
} }
.border-r { .border-r {
border-right-width: 1px; border-inline-end-width: 1px;
} }
.border-b-0 { .border-b-0 {
border-bottom-width: 0px; border-block-end-width: 0px;
} }
.border-b-2 { .border-b-2 {
border-bottom-width: 2px; border-block-end-width: 2px;
} }
.border-b-4 { .border-b-4 {
border-bottom-width: 4px; border-block-end-width: 4px;
} }
.border-b-8 { .border-b-8 {
border-bottom-width: 8px; border-block-end-width: 8px;
} }
.border-b { .border-b {
border-bottom-width: 1px; border-block-end-width: 1px;
} }
.border-l-0 { .border-l-0 {
border-left-width: 0px; border-inline-start-width: 0px;
} }
.border-l-2 { .border-l-2 {
border-left-width: 2px; border-inline-start-width: 2px;
} }
.border-l-4 { .border-l-4 {
border-left-width: 4px; border-inline-start-width: 4px;
} }
.border-l-8 { .border-l-8 {
border-left-width: 8px; border-inline-start-width: 8px;
} }
.border-l { .border-l {
border-left-width: 1px; border-inline-start-width: 1px;
} }

4
src/scss/tokens/sizing/_width.scss
View file

@ -3,7 +3,7 @@
} }
.w-full-fluid { .w-full-fluid {
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px !important; margin-inline-start: -15px !important;
} }
.w-screen { .w-screen {
width: 100vw; width: 100vw;
@ -91,7 +91,7 @@
} }
.\!w-full-fluid { .\!w-full-fluid {
width: calc(100% + 30px) !important; width: calc(100% + 30px) !important;
margin-left: -15px !important; margin-inline-start: -15px !important;
} }
.\!w-screen { .\!w-screen {
width: 100vw !important; width: 100vw !important;

32
src/scss/tokens/spacers/_fluid-margin.scss
View file

@ -5,48 +5,48 @@
margin: $value; margin: $value;
} }
%fmt-#{$level} { %fmt-#{$level} {
margin-top: $value; margin-block-start: $value;
} }
%fmr-#{$level} { %fmr-#{$level} {
margin-right: $value; margin-inline-end: $value;
} }
%fmb-#{$level} { %fmb-#{$level} {
margin-bottom: $value; margin-block-end: $value;
} }
%fml-#{$level} { %fml-#{$level} {
margin-left: $value; margin-inline-start: $value;
} }
%fmx-#{$level} { %fmx-#{$level} {
margin-left: $value; margin-inline-start: $value;
margin-right: $value; margin-inline-end: $value;
} }
%fmy-#{$level} { %fmy-#{$level} {
margin-top: $value; margin-block-start: $value;
margin-bottom: $value; margin-block-end: $value;
} }
%\!fm-#{$level} { %\!fm-#{$level} {
margin: $value !important; margin: $value !important;
} }
%\!fmt-#{$level} { %\!fmt-#{$level} {
margin-top: $value !important; margin-block-start: $value !important;
} }
%\!fmr-#{$level} { %\!fmr-#{$level} {
margin-right: $value !important; margin-inline-end: $value !important;
} }
%\!fmb-#{$level} { %\!fmb-#{$level} {
margin-bottom: $value !important; margin-block-end: $value !important;
} }
%\!fml-#{$level} { %\!fml-#{$level} {
margin-left: $value !important; margin-inline-start: $value !important;
} }
%\!fmx-#{$level} { %\!fmx-#{$level} {
margin-left: $value !important; margin-inline-start: $value !important;
margin-right: $value !important; margin-inline-end: $value !important;
} }
%\!fmy-#{$level} { %\!fmy-#{$level} {
margin-top: $value !important; margin-block-start: $value !important;
margin-bottom: $value !important; margin-block-end: $value !important;
} }
} }

32
src/scss/tokens/spacers/_fluid-padding.scss
View file

@ -5,48 +5,48 @@
padding: $value; padding: $value;
} }
%fpt-#{$level} { %fpt-#{$level} {
padding-top: $value; padding-block-start: $value;
} }
%fpr-#{$level} { %fpr-#{$level} {
padding-right: $value; padding-inline-end: $value;
} }
%fpb-#{$level} { %fpb-#{$level} {
padding-bottom: $value; padding-block-end: $value;
} }
%fpl-#{$level} { %fpl-#{$level} {
padding-left: $value; padding-inline-start: $value;
} }
%fpx-#{$level} { %fpx-#{$level} {
padding-right: $value; padding-inline-start: $value;
padding-left: $value; padding-inline-end: $value;
} }
%fpy-#{$level} { %fpy-#{$level} {
padding-top: $value; padding-block-start: $value;
padding-bottom: $value; padding-block-end: $value;
} }
%\!fp-#{$level} { %\!fp-#{$level} {
padding: $value !important; padding: $value !important;
} }
%\!fpt-#{$level} { %\!fpt-#{$level} {
padding-top: $value !important; padding-block-start: $value !important;
} }
%\!fpr-#{$level} { %\!fpr-#{$level} {
padding-right: $value !important; padding-inline-end: $value !important;
} }
%\!fpb-#{$level} { %\!fpb-#{$level} {
padding-bottom: $value !important; padding-block-end: $value !important;
} }
%\!fpl-#{$level} { %\!fpl-#{$level} {
padding-left: $value !important; padding-inline-start: $value !important;
} }
%\!fpx-#{$level} { %\!fpx-#{$level} {
padding-right: $value !important; padding-inline-start: $value !important;
padding-left: $value !important; padding-inline-end: $value !important;
} }
%\!fpy-#{$level} { %\!fpy-#{$level} {
padding-top: $value !important; padding-block-start: $value !important;
padding-bottom: $value !important; padding-block-end: $value !important;
} }
} }

48
src/scss/tokens/spacers/_margin.scss
View file

@ -40,48 +40,48 @@ $margin-levels: (
margin: $value; margin: $value;
} }
.mt-#{$level} { .mt-#{$level} {
margin-top: $value; margin-block-start: $value;
} }
.mr-#{$level} { .mr-#{$level} {
margin-right: $value; margin-inline-end: $value;
} }
.mb-#{$level} { .mb-#{$level} {
margin-bottom: $value; margin-block-end: $value;
} }
.ml-#{$level} { .ml-#{$level} {
margin-left: $value; margin-inline-start: $value;
} }
.mx-#{$level} { .mx-#{$level} {
margin-right: $value; margin-inline-start: $value;
margin-left: $value; margin-inline-end: $value;
} }
.my-#{$level} { .my-#{$level} {
margin-top: $value; margin-block-start: $value;
margin-bottom: $value; margin-block-end: $value;
} }
.\!m-#{$level} { .\!m-#{$level} {
margin: $value !important; margin: $value !important;
} }
.\!mt-#{$level} { .\!mt-#{$level} {
margin-top: $value !important; margin-block-start: $value !important;
} }
.\!mr-#{$level} { .\!mr-#{$level} {
margin-right: $value !important; margin-inline-end: $value !important;
} }
.\!mb-#{$level} { .\!mb-#{$level} {
margin-bottom: $value !important; margin-block-end: $value !important;
} }
.\!ml-#{$level} { .\!ml-#{$level} {
margin-left: $value !important; margin-inline-start: $value !important;
} }
.\!mx-#{$level} { .\!mx-#{$level} {
margin-right: $value !important; margin-inline-start: $value !important;
margin-left: $value !important; margin-inline-end: $value !important;
} }
.\!my-#{$level} { .\!my-#{$level} {
margin-top: $value !important; margin-block-start: $value !important;
margin-bottom: $value !important; margin-block-end: $value !important;
} }
} }
@ -89,21 +89,21 @@ $margin-levels: (
margin: auto; margin: auto;
} }
.mx-auto { .mx-auto {
margin-right: auto; margin-inline-start: auto;
margin-left: auto; margin-inline-end: auto;
} }
.my-auto { .my-auto {
margin-top: auto; margin-block-start: auto;
margin-bottom: auto; margin-block-end: auto;
} }
.\!m-auto { .\!m-auto {
margin: auto !important; margin: auto !important;
} }
.\!mx-auto { .\!mx-auto {
margin-right: auto !important; margin-inline-start: auto !important;
margin-left: auto !important; margin-inline-end: auto !important;
} }
.\!my-auto { .\!my-auto {
margin-top: auto !important; margin-block-start: auto !important;
margin-bottom: auto !important; margin-block-end: auto !important;
} }

32
src/scss/tokens/spacers/_padding.scss
View file

@ -40,47 +40,47 @@ $padding-levels: (
padding: $value; padding: $value;
} }
.pt-#{$level} { .pt-#{$level} {
padding-top: $value; padding-block-start: $value;
} }
.pr-#{$level} { .pr-#{$level} {
padding-right: $value; padding-inline-end: $value;
} }
.pb-#{$level} { .pb-#{$level} {
padding-bottom: $value; padding-block-end: $value;
} }
.pl-#{$level} { .pl-#{$level} {
padding-left: $value; padding-inline-start: $value;
} }
.px-#{$level} { .px-#{$level} {
padding-right: $value; padding-inline-start: $value;
padding-left: $value; padding-inline-end: $value;
} }
.py-#{$level} { .py-#{$level} {
padding-top: $value; padding-block-start: $value;
padding-bottom: $value; padding-block-end: $value;
} }
.\!p-#{$level} { .\!p-#{$level} {
padding: $value !important; padding: $value !important;
} }
.\!pt-#{$level} { .\!pt-#{$level} {
padding-top: $value !important; padding-block-start: $value !important;
} }
.\!pr-#{$level} { .\!pr-#{$level} {
padding-right: $value !important; padding-inline-end: $value !important;
} }
.\!pb-#{$level} { .\!pb-#{$level} {
padding-bottom: $value !important; padding-block-end: $value !important;
} }
.\!pl-#{$level} { .\!pl-#{$level} {
padding-left: $value !important; padding-inline-start: $value !important;
} }
.\!px-#{$level} { .\!px-#{$level} {
padding-right: $value !important; padding-inline-start: $value !important;
padding-left: $value !important; padding-inline-end: $value !important;
} }
.\!py-#{$level} { .\!py-#{$level} {
padding-top: $value !important; padding-block-start: $value !important;
padding-bottom: $value !important; padding-block-end: $value !important;
} }
} }

336
src/scss/tokens/spacers/mixins/_fluid-margin.scss
View file

@ -20,491 +20,491 @@ $fluid-margin-levels: (
margin: map.get($fluid-margin-levels, '0'); margin: map.get($fluid-margin-levels, '0');
} }
@mixin fmx-0 { @mixin fmx-0 {
margin-left: map.get($fluid-margin-levels, '0'); margin-inline-start: map.get($fluid-margin-levels, '0');
margin-right: map.get($fluid-margin-levels, '0'); margin-inline-end: map.get($fluid-margin-levels, '0');
} }
@mixin fmy-0 { @mixin fmy-0 {
margin-top: map.get($fluid-margin-levels, '0'); margin-block-start: map.get($fluid-margin-levels, '0');
margin-bottom: map.get($fluid-margin-levels, '0'); margin-block-end: map.get($fluid-margin-levels, '0');
} }
@mixin fmt-0 { @mixin fmt-0 {
margin-top: map.get($fluid-margin-levels, '0'); margin-block-start: map.get($fluid-margin-levels, '0');
} }
@mixin fmb-0 { @mixin fmb-0 {
margin-bottom: map.get($fluid-margin-levels, '0'); margin-block-end: map.get($fluid-margin-levels, '0');
} }
@mixin fml-0 { @mixin fml-0 {
margin-left: map.get($fluid-margin-levels, '0'); margin-inline-start: map.get($fluid-margin-levels, '0');
} }
@mixin fmr-0 { @mixin fmr-0 {
margin-right: map.get($fluid-margin-levels, '0'); margin-inline-end: map.get($fluid-margin-levels, '0');
} }
@mixin \!fm-0 { @mixin \!fm-0 {
margin: map.get($fluid-margin-levels, '0') !important; margin: map.get($fluid-margin-levels, '0') !important;
} }
@mixin \!fmx-0 { @mixin \!fmx-0 {
margin-left: map.get($fluid-margin-levels, '0') !important; margin-inline-start: map.get($fluid-margin-levels, '0') !important;
margin-right: map.get($fluid-margin-levels, '0') !important; margin-inline-end: map.get($fluid-margin-levels, '0') !important;
} }
@mixin \!fmy-0 { @mixin \!fmy-0 {
margin-top: map.get($fluid-margin-levels, '0') !important; margin-block-start: map.get($fluid-margin-levels, '0') !important;
margin-bottom: map.get($fluid-margin-levels, '0') !important; margin-block-end: map.get($fluid-margin-levels, '0') !important;
} }
@mixin \!fmt-0 { @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 { @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 { @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 { @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 { @mixin fm-1 {
margin: map.get($fluid-margin-levels, '1'); margin: map.get($fluid-margin-levels, '1');
} }
@mixin fmx-1 { @mixin fmx-1 {
margin-left: map.get($fluid-margin-levels, '1'); margin-inline-start: map.get($fluid-margin-levels, '1');
margin-right: map.get($fluid-margin-levels, '1'); margin-inline-end: map.get($fluid-margin-levels, '1');
} }
@mixin fmy-1 { @mixin fmy-1 {
margin-top: map.get($fluid-margin-levels, '1'); margin-block-start: map.get($fluid-margin-levels, '1');
margin-bottom: map.get($fluid-margin-levels, '1'); margin-block-end: map.get($fluid-margin-levels, '1');
} }
@mixin fmt-1 { @mixin fmt-1 {
margin-top: map.get($fluid-margin-levels, '1'); margin-block-start: map.get($fluid-margin-levels, '1');
} }
@mixin fmb-1 { @mixin fmb-1 {
margin-bottom: map.get($fluid-margin-levels, '1'); margin-block-end: map.get($fluid-margin-levels, '1');
} }
@mixin fml-1 { @mixin fml-1 {
margin-left: map.get($fluid-margin-levels, '1'); margin-inline-start: map.get($fluid-margin-levels, '1');
} }
@mixin fmr-1 { @mixin fmr-1 {
margin-right: map.get($fluid-margin-levels, '1'); margin-inline-end: map.get($fluid-margin-levels, '1');
} }
@mixin \!fm-1 { @mixin \!fm-1 {
margin: map.get($fluid-margin-levels, '1') !important; margin: map.get($fluid-margin-levels, '1') !important;
} }
@mixin \!fmx-1 { @mixin \!fmx-1 {
margin-left: map.get($fluid-margin-levels, '1') !important; margin-inline-start: map.get($fluid-margin-levels, '1') !important;
margin-right: map.get($fluid-margin-levels, '1') !important; margin-inline-end: map.get($fluid-margin-levels, '1') !important;
} }
@mixin \!fmy-1 { @mixin \!fmy-1 {
margin-top: map.get($fluid-margin-levels, '1') !important; margin-block-start: map.get($fluid-margin-levels, '1') !important;
margin-bottom: map.get($fluid-margin-levels, '1') !important; margin-block-end: map.get($fluid-margin-levels, '1') !important;
} }
@mixin \!fmt-1 { @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 { @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 { @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 { @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 { @mixin fm-2 {
margin: map.get($fluid-margin-levels, '2'); margin: map.get($fluid-margin-levels, '2');
} }
@mixin fmx-2 { @mixin fmx-2 {
margin-left: map.get($fluid-margin-levels, '2'); margin-inline-start: map.get($fluid-margin-levels, '2');
margin-right: map.get($fluid-margin-levels, '2'); margin-inline-end: map.get($fluid-margin-levels, '2');
} }
@mixin fmy-2 { @mixin fmy-2 {
margin-top: map.get($fluid-margin-levels, '2'); margin-block-start: map.get($fluid-margin-levels, '2');
margin-bottom: map.get($fluid-margin-levels, '2'); margin-block-end: map.get($fluid-margin-levels, '2');
} }
@mixin fmt-2 { @mixin fmt-2 {
margin-top: map.get($fluid-margin-levels, '2'); margin-block-start: map.get($fluid-margin-levels, '2');
} }
@mixin fmb-2 { @mixin fmb-2 {
margin-bottom: map.get($fluid-margin-levels, '2'); margin-block-end: map.get($fluid-margin-levels, '2');
} }
@mixin fml-2 { @mixin fml-2 {
margin-left: map.get($fluid-margin-levels, '2'); margin-inline-start: map.get($fluid-margin-levels, '2');
} }
@mixin fmr-2 { @mixin fmr-2 {
margin-right: map.get($fluid-margin-levels, '2'); margin-inline-end: map.get($fluid-margin-levels, '2');
} }
@mixin \!fm-2 { @mixin \!fm-2 {
margin: map.get($fluid-margin-levels, '2') !important; margin: map.get($fluid-margin-levels, '2') !important;
} }
@mixin \!fmx-2 { @mixin \!fmx-2 {
margin-left: map.get($fluid-margin-levels, '2') !important; margin-inline-start: map.get($fluid-margin-levels, '2') !important;
margin-right: map.get($fluid-margin-levels, '2') !important; margin-inline-end: map.get($fluid-margin-levels, '2') !important;
} }
@mixin \!fmy-2 { @mixin \!fmy-2 {
margin-top: map.get($fluid-margin-levels, '2') !important; margin-block-start: map.get($fluid-margin-levels, '2') !important;
margin-bottom: map.get($fluid-margin-levels, '2') !important; margin-block-end: map.get($fluid-margin-levels, '2') !important;
} }
@mixin \!fmt-2 { @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 { @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 { @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 { @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 { @mixin fm-3 {
margin: map.get($fluid-margin-levels, '3'); margin: map.get($fluid-margin-levels, '3');
} }
@mixin fmx-3 { @mixin fmx-3 {
margin-left: map.get($fluid-margin-levels, '3'); margin-inline-start: map.get($fluid-margin-levels, '3');
margin-right: map.get($fluid-margin-levels, '3'); margin-inline-end: map.get($fluid-margin-levels, '3');
} }
@mixin fmy-3 { @mixin fmy-3 {
margin-top: map.get($fluid-margin-levels, '3'); margin-block-start: map.get($fluid-margin-levels, '3');
margin-bottom: map.get($fluid-margin-levels, '3'); margin-block-end: map.get($fluid-margin-levels, '3');
} }
@mixin fmt-3 { @mixin fmt-3 {
margin-top: map.get($fluid-margin-levels, '3'); margin-block-start: map.get($fluid-margin-levels, '3');
} }
@mixin fmb-3 { @mixin fmb-3 {
margin-bottom: map.get($fluid-margin-levels, '3'); margin-block-end: map.get($fluid-margin-levels, '3');
} }
@mixin fml-3 { @mixin fml-3 {
margin-left: map.get($fluid-margin-levels, '3'); margin-inline-start: map.get($fluid-margin-levels, '3');
} }
@mixin fmr-3 { @mixin fmr-3 {
margin-right: map.get($fluid-margin-levels, '3'); margin-inline-end: map.get($fluid-margin-levels, '3');
} }
@mixin \!fm-3 { @mixin \!fm-3 {
margin: map.get($fluid-margin-levels, '3') !important; margin: map.get($fluid-margin-levels, '3') !important;
} }
@mixin \!fmx-3 { @mixin \!fmx-3 {
margin-left: map.get($fluid-margin-levels, '3') !important; margin-inline-start: map.get($fluid-margin-levels, '3') !important;
margin-right: map.get($fluid-margin-levels, '3') !important; margin-inline-end: map.get($fluid-margin-levels, '3') !important;
} }
@mixin \!fmy-3 { @mixin \!fmy-3 {
margin-top: map.get($fluid-margin-levels, '3') !important; margin-block-start: map.get($fluid-margin-levels, '3') !important;
margin-bottom: map.get($fluid-margin-levels, '3') !important; margin-block-end: map.get($fluid-margin-levels, '3') !important;
} }
@mixin \!fmt-3 { @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 { @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 { @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 { @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 { @mixin fm-4 {
margin: map.get($fluid-margin-levels, '4'); margin: map.get($fluid-margin-levels, '4');
} }
@mixin fmx-4 { @mixin fmx-4 {
margin-left: map.get($fluid-margin-levels, '4'); margin-inline-start: map.get($fluid-margin-levels, '4');
margin-right: map.get($fluid-margin-levels, '4'); margin-inline-end: map.get($fluid-margin-levels, '4');
} }
@mixin fmy-4 { @mixin fmy-4 {
margin-top: map.get($fluid-margin-levels, '4'); margin-block-start: map.get($fluid-margin-levels, '4');
margin-bottom: map.get($fluid-margin-levels, '4'); margin-block-end: map.get($fluid-margin-levels, '4');
} }
@mixin fmt-4 { @mixin fmt-4 {
margin-top: map.get($fluid-margin-levels, '4'); margin-block-start: map.get($fluid-margin-levels, '4');
} }
@mixin fmb-4 { @mixin fmb-4 {
margin-bottom: map.get($fluid-margin-levels, '4'); margin-block-end: map.get($fluid-margin-levels, '4');
} }
@mixin fml-4 { @mixin fml-4 {
margin-left: map.get($fluid-margin-levels, '4'); margin-inline-start: map.get($fluid-margin-levels, '4');
} }
@mixin fmr-4 { @mixin fmr-4 {
margin-right: map.get($fluid-margin-levels, '4'); margin-inline-end: map.get($fluid-margin-levels, '4');
} }
@mixin \!fm-4 { @mixin \!fm-4 {
margin: map.get($fluid-margin-levels, '4') !important; margin: map.get($fluid-margin-levels, '4') !important;
} }
@mixin \!fmx-4 { @mixin \!fmx-4 {
margin-left: map.get($fluid-margin-levels, '4') !important; margin-inline-start: map.get($fluid-margin-levels, '4') !important;
margin-right: map.get($fluid-margin-levels, '4') !important; margin-inline-end: map.get($fluid-margin-levels, '4') !important;
} }
@mixin \!fmy-4 { @mixin \!fmy-4 {
margin-top: map.get($fluid-margin-levels, '4') !important; margin-block-start: map.get($fluid-margin-levels, '4') !important;
margin-bottom: map.get($fluid-margin-levels, '4') !important; margin-block-end: map.get($fluid-margin-levels, '4') !important;
} }
@mixin \!fmt-4 { @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 { @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 { @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 { @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 { @mixin fm-5 {
margin: map.get($fluid-margin-levels, '5'); margin: map.get($fluid-margin-levels, '5');
} }
@mixin fmx-5 { @mixin fmx-5 {
margin-left: map.get($fluid-margin-levels, '5'); margin-inline-start: map.get($fluid-margin-levels, '5');
margin-right: map.get($fluid-margin-levels, '5'); margin-inline-end: map.get($fluid-margin-levels, '5');
} }
@mixin fmy-5 { @mixin fmy-5 {
margin-top: map.get($fluid-margin-levels, '5'); margin-block-start: map.get($fluid-margin-levels, '5');
margin-bottom: map.get($fluid-margin-levels, '5'); margin-block-end: map.get($fluid-margin-levels, '5');
} }
@mixin fmt-5 { @mixin fmt-5 {
margin-top: map.get($fluid-margin-levels, '5'); margin-block-start: map.get($fluid-margin-levels, '5');
} }
@mixin fmb-5 { @mixin fmb-5 {
margin-bottom: map.get($fluid-margin-levels, '5'); margin-block-end: map.get($fluid-margin-levels, '5');
} }
@mixin fml-5 { @mixin fml-5 {
margin-left: map.get($fluid-margin-levels, '5'); margin-inline-start: map.get($fluid-margin-levels, '5');
} }
@mixin fmr-5 { @mixin fmr-5 {
margin-right: map.get($fluid-margin-levels, '5'); margin-inline-end: map.get($fluid-margin-levels, '5');
} }
@mixin \!fm-5 { @mixin \!fm-5 {
margin: map.get($fluid-margin-levels, '5') !important; margin: map.get($fluid-margin-levels, '5') !important;
} }
@mixin \!fmx-5 { @mixin \!fmx-5 {
margin-left: map.get($fluid-margin-levels, '5') !important; margin-inline-start: map.get($fluid-margin-levels, '5') !important;
margin-right: map.get($fluid-margin-levels, '5') !important; margin-inline-end: map.get($fluid-margin-levels, '5') !important;
} }
@mixin \!fmy-5 { @mixin \!fmy-5 {
margin-top: map.get($fluid-margin-levels, '5') !important; margin-block-start: map.get($fluid-margin-levels, '5') !important;
margin-bottom: map.get($fluid-margin-levels, '5') !important; margin-block-end: map.get($fluid-margin-levels, '5') !important;
} }
@mixin \!fmt-5 { @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 { @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 { @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 { @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 { @mixin fm-6 {
margin: map.get($fluid-margin-levels, '6'); margin: map.get($fluid-margin-levels, '6');
} }
@mixin fmx-6 { @mixin fmx-6 {
margin-left: map.get($fluid-margin-levels, '6'); margin-inline-start: map.get($fluid-margin-levels, '6');
margin-right: map.get($fluid-margin-levels, '6'); margin-inline-end: map.get($fluid-margin-levels, '6');
} }
@mixin fmy-6 { @mixin fmy-6 {
margin-top: map.get($fluid-margin-levels, '6'); margin-block-start: map.get($fluid-margin-levels, '6');
margin-bottom: map.get($fluid-margin-levels, '6'); margin-block-end: map.get($fluid-margin-levels, '6');
} }
@mixin fmt-6 { @mixin fmt-6 {
margin-top: map.get($fluid-margin-levels, '6'); margin-block-start: map.get($fluid-margin-levels, '6');
} }
@mixin fmb-6 { @mixin fmb-6 {
margin-bottom: map.get($fluid-margin-levels, '6'); margin-block-end: map.get($fluid-margin-levels, '6');
} }
@mixin fml-6 { @mixin fml-6 {
margin-left: map.get($fluid-margin-levels, '6'); margin-inline-start: map.get($fluid-margin-levels, '6');
} }
@mixin fmr-6 { @mixin fmr-6 {
margin-right: map.get($fluid-margin-levels, '6'); margin-inline-end: map.get($fluid-margin-levels, '6');
} }
@mixin \!fm-6 { @mixin \!fm-6 {
margin: map.get($fluid-margin-levels, '6') !important; margin: map.get($fluid-margin-levels, '6') !important;
} }
@mixin \!fmx-6 { @mixin \!fmx-6 {
margin-left: map.get($fluid-margin-levels, '6') !important; margin-inline-start: map.get($fluid-margin-levels, '6') !important;
margin-right: map.get($fluid-margin-levels, '6') !important; margin-inline-end: map.get($fluid-margin-levels, '6') !important;
} }
@mixin \!fmy-6 { @mixin \!fmy-6 {
margin-top: map.get($fluid-margin-levels, '6') !important; margin-block-start: map.get($fluid-margin-levels, '6') !important;
margin-bottom: map.get($fluid-margin-levels, '6') !important; margin-block-end: map.get($fluid-margin-levels, '6') !important;
} }
@mixin \!fmt-6 { @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 { @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 { @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 { @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 { @mixin fm-7 {
margin: map.get($fluid-margin-levels, '7'); margin: map.get($fluid-margin-levels, '7');
} }
@mixin fmx-7 { @mixin fmx-7 {
margin-left: map.get($fluid-margin-levels, '7'); margin-inline-start: map.get($fluid-margin-levels, '7');
margin-right: map.get($fluid-margin-levels, '7'); margin-inline-end: map.get($fluid-margin-levels, '7');
} }
@mixin fmy-7 { @mixin fmy-7 {
margin-top: map.get($fluid-margin-levels, '7'); margin-block-start: map.get($fluid-margin-levels, '7');
margin-bottom: map.get($fluid-margin-levels, '7'); margin-block-end: map.get($fluid-margin-levels, '7');
} }
@mixin fmt-7 { @mixin fmt-7 {
margin-top: map.get($fluid-margin-levels, '7'); margin-block-start: map.get($fluid-margin-levels, '7');
} }
@mixin fmb-7 { @mixin fmb-7 {
margin-bottom: map.get($fluid-margin-levels, '7'); margin-block-end: map.get($fluid-margin-levels, '7');
} }
@mixin fml-7 { @mixin fml-7 {
margin-left: map.get($fluid-margin-levels, '7'); margin-inline-start: map.get($fluid-margin-levels, '7');
} }
@mixin fmr-7 { @mixin fmr-7 {
margin-right: map.get($fluid-margin-levels, '7'); margin-inline-end: map.get($fluid-margin-levels, '7');
} }
@mixin \!fm-7 { @mixin \!fm-7 {
margin: map.get($fluid-margin-levels, '7') !important; margin: map.get($fluid-margin-levels, '7') !important;
} }
@mixin \!fmx-7 { @mixin \!fmx-7 {
margin-left: map.get($fluid-margin-levels, '7') !important; margin-inline-start: map.get($fluid-margin-levels, '7') !important;
margin-right: map.get($fluid-margin-levels, '7') !important; margin-inline-end: map.get($fluid-margin-levels, '7') !important;
} }
@mixin \!fmy-7 { @mixin \!fmy-7 {
margin-top: map.get($fluid-margin-levels, '7') !important; margin-block-start: map.get($fluid-margin-levels, '7') !important;
margin-bottom: map.get($fluid-margin-levels, '7') !important; margin-block-end: map.get($fluid-margin-levels, '7') !important;
} }
@mixin \!fmt-7 { @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 { @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 { @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 { @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 { @mixin fm-8 {
margin: map.get($fluid-margin-levels, '8'); margin: map.get($fluid-margin-levels, '8');
} }
@mixin fmx-8 { @mixin fmx-8 {
margin-left: map.get($fluid-margin-levels, '8'); margin-inline-start: map.get($fluid-margin-levels, '8');
margin-right: map.get($fluid-margin-levels, '8'); margin-inline-end: map.get($fluid-margin-levels, '8');
} }
@mixin fmy-8 { @mixin fmy-8 {
margin-top: map.get($fluid-margin-levels, '8'); margin-block-start: map.get($fluid-margin-levels, '8');
margin-bottom: map.get($fluid-margin-levels, '8'); margin-block-end: map.get($fluid-margin-levels, '8');
} }
@mixin fmt-8 { @mixin fmt-8 {
margin-top: map.get($fluid-margin-levels, '8'); margin-block-start: map.get($fluid-margin-levels, '8');
} }
@mixin fmb-8 { @mixin fmb-8 {
margin-bottom: map.get($fluid-margin-levels, '8'); margin-block-end: map.get($fluid-margin-levels, '8');
} }
@mixin fml-8 { @mixin fml-8 {
margin-left: map.get($fluid-margin-levels, '8'); margin-inline-start: map.get($fluid-margin-levels, '8');
} }
@mixin fmr-8 { @mixin fmr-8 {
margin-right: map.get($fluid-margin-levels, '8'); margin-inline-end: map.get($fluid-margin-levels, '8');
} }
@mixin \!fm-8 { @mixin \!fm-8 {
margin: map.get($fluid-margin-levels, '8') !important; margin: map.get($fluid-margin-levels, '8') !important;
} }
@mixin \!fmx-8 { @mixin \!fmx-8 {
margin-left: map.get($fluid-margin-levels, '8') !important; margin-inline-start: map.get($fluid-margin-levels, '8') !important;
margin-right: map.get($fluid-margin-levels, '8') !important; margin-inline-end: map.get($fluid-margin-levels, '8') !important;
} }
@mixin \!fmy-8 { @mixin \!fmy-8 {
margin-top: map.get($fluid-margin-levels, '8') !important; margin-block-start: map.get($fluid-margin-levels, '8') !important;
margin-bottom: map.get($fluid-margin-levels, '8') !important; margin-block-end: map.get($fluid-margin-levels, '8') !important;
} }
@mixin \!fmt-8 { @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 { @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 { @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 { @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 { @mixin fm-9 {
margin: map.get($fluid-margin-levels, '9'); margin: map.get($fluid-margin-levels, '9');
} }
@mixin fmx-9 { @mixin fmx-9 {
margin-left: map.get($fluid-margin-levels, '9'); margin-inline-start: map.get($fluid-margin-levels, '9');
margin-right: map.get($fluid-margin-levels, '9'); margin-inline-end: map.get($fluid-margin-levels, '9');
} }
@mixin fmy-9 { @mixin fmy-9 {
margin-top: map.get($fluid-margin-levels, '9'); margin-block-start: map.get($fluid-margin-levels, '9');
margin-bottom: map.get($fluid-margin-levels, '9'); margin-block-end: map.get($fluid-margin-levels, '9');
} }
@mixin fmt-9 { @mixin fmt-9 {
margin-top: map.get($fluid-margin-levels, '9'); margin-block-start: map.get($fluid-margin-levels, '9');
} }
@mixin fmb-9 { @mixin fmb-9 {
margin-bottom: map.get($fluid-margin-levels, '9'); margin-block-end: map.get($fluid-margin-levels, '9');
} }
@mixin fml-9 { @mixin fml-9 {
margin-left: map.get($fluid-margin-levels, '9'); margin-inline-start: map.get($fluid-margin-levels, '9');
} }
@mixin fmr-9 { @mixin fmr-9 {
margin-right: map.get($fluid-margin-levels, '9'); margin-inline-end: map.get($fluid-margin-levels, '9');
} }
@mixin \!fm-9 { @mixin \!fm-9 {
margin: map.get($fluid-margin-levels, '9') !important; margin: map.get($fluid-margin-levels, '9') !important;
} }
@mixin \!fmx-9 { @mixin \!fmx-9 {
margin-left: map.get($fluid-margin-levels, '9') !important; margin-inline-start: map.get($fluid-margin-levels, '9') !important;
margin-right: map.get($fluid-margin-levels, '9') !important; margin-inline-end: map.get($fluid-margin-levels, '9') !important;
} }
@mixin \!fmy-9 { @mixin \!fmy-9 {
margin-top: map.get($fluid-margin-levels, '9') !important; margin-block-start: map.get($fluid-margin-levels, '9') !important;
margin-bottom: map.get($fluid-margin-levels, '9') !important; margin-block-end: map.get($fluid-margin-levels, '9') !important;
} }
@mixin \!fmt-9 { @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 { @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 { @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 { @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 { @mixin fm-auto {
margin: auto; margin: auto;
} }
@mixin fmx-auto { @mixin fmx-auto {
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
} }
@mixin fmy-auto { @mixin fmy-auto {
margin-top: auto; margin-block-start: auto;
margin-bottom: auto; margin-block-end: auto;
} }
@mixin \!fm-auto { @mixin \!fm-auto {
margin: auto !important; margin: auto !important;
} }
@mixin \!fmx-auto { @mixin \!fmx-auto {
margin-left: auto !important; margin-inline-start: auto !important;
margin-right: auto !important; margin-inline-end: auto !important;
} }
@mixin \!fmy-auto { @mixin \!fmy-auto {
margin-top: auto !important; margin-block-start: auto !important;
margin-bottom: auto !important; margin-block-end: auto !important;
} }

176
src/scss/tokens/spacers/mixins/_fluid-padding.scss
View file

@ -26,16 +26,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '0'); padding-block: map.get($fluid-padding-levels, '0');
} }
@mixin fpt-0 { @mixin fpt-0 {
padding-top: map.get($fluid-padding-levels, '0'); padding-block-start: map.get($fluid-padding-levels, '0');
} }
@mixin fpb-0 { @mixin fpb-0 {
padding-bottom: map.get($fluid-padding-levels, '0'); padding-block-end: map.get($fluid-padding-levels, '0');
} }
@mixin fpl-0 { @mixin fpl-0 {
padding-left: map.get($fluid-padding-levels, '0'); padding-inline-start: map.get($fluid-padding-levels, '0');
} }
@mixin fpr-0 { @mixin fpr-0 {
padding-right: map.get($fluid-padding-levels, '0'); padding-inline-end: map.get($fluid-padding-levels, '0');
} }
@mixin \!fp-0 { @mixin \!fp-0 {
padding: map.get($fluid-padding-levels, '0') !important; padding: map.get($fluid-padding-levels, '0') !important;
@ -47,16 +47,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '0') !important; padding-block: map.get($fluid-padding-levels, '0') !important;
} }
@mixin \!fpt-0 { @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 { @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 { @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 { @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 { @mixin fp-1 {
@ -69,16 +69,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '1'); padding-block: map.get($fluid-padding-levels, '1');
} }
@mixin fpt-1 { @mixin fpt-1 {
padding-top: map.get($fluid-padding-levels, '1'); padding-block-start: map.get($fluid-padding-levels, '1');
} }
@mixin fpb-1 { @mixin fpb-1 {
padding-bottom: map.get($fluid-padding-levels, '1'); padding-block-end: map.get($fluid-padding-levels, '1');
} }
@mixin fpl-1 { @mixin fpl-1 {
padding-left: map.get($fluid-padding-levels, '1'); padding-inline-start: map.get($fluid-padding-levels, '1');
} }
@mixin fpr-1 { @mixin fpr-1 {
padding-right: map.get($fluid-padding-levels, '1'); padding-inline-end: map.get($fluid-padding-levels, '1');
} }
@mixin \!fp-1 { @mixin \!fp-1 {
padding: map.get($fluid-padding-levels, '1') !important; padding: map.get($fluid-padding-levels, '1') !important;
@ -90,16 +90,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '1') !important; padding-block: map.get($fluid-padding-levels, '1') !important;
} }
@mixin \!fpt-1 { @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 { @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 { @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 { @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 { @mixin fp-2 {
@ -112,16 +112,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '2'); padding-block: map.get($fluid-padding-levels, '2');
} }
@mixin fpt-2 { @mixin fpt-2 {
padding-top: map.get($fluid-padding-levels, '2'); padding-block-start: map.get($fluid-padding-levels, '2');
} }
@mixin fpb-2 { @mixin fpb-2 {
padding-bottom: map.get($fluid-padding-levels, '2'); padding-block-end: map.get($fluid-padding-levels, '2');
} }
@mixin fpl-2 { @mixin fpl-2 {
padding-left: map.get($fluid-padding-levels, '2'); padding-inline-start: map.get($fluid-padding-levels, '2');
} }
@mixin fpr-2 { @mixin fpr-2 {
padding-right: map.get($fluid-padding-levels, '2'); padding-inline-end: map.get($fluid-padding-levels, '2');
} }
@mixin \!fp-2 { @mixin \!fp-2 {
padding: map.get($fluid-padding-levels, '2') !important; padding: map.get($fluid-padding-levels, '2') !important;
@ -133,16 +133,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '2') !important; padding-block: map.get($fluid-padding-levels, '2') !important;
} }
@mixin \!fpt-2 { @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 { @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 { @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 { @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 { @mixin fp-3 {
@ -155,16 +155,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '3'); padding-block: map.get($fluid-padding-levels, '3');
} }
@mixin fpt-3 { @mixin fpt-3 {
padding-top: map.get($fluid-padding-levels, '3'); padding-block-start: map.get($fluid-padding-levels, '3');
} }
@mixin fpb-3 { @mixin fpb-3 {
padding-bottom: map.get($fluid-padding-levels, '3'); padding-block-end: map.get($fluid-padding-levels, '3');
} }
@mixin fpl-3 { @mixin fpl-3 {
padding-left: map.get($fluid-padding-levels, '3'); padding-inline-start: map.get($fluid-padding-levels, '3');
} }
@mixin fpr-3 { @mixin fpr-3 {
padding-right: map.get($fluid-padding-levels, '3'); padding-inline-end: map.get($fluid-padding-levels, '3');
} }
@mixin \!fp-3 { @mixin \!fp-3 {
padding: map.get($fluid-padding-levels, '3') !important; padding: map.get($fluid-padding-levels, '3') !important;
@ -176,16 +176,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '3') !important; padding-block: map.get($fluid-padding-levels, '3') !important;
} }
@mixin \!fpt-3 { @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 { @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 { @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 { @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 { @mixin fp-4 {
@ -198,16 +198,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '4'); padding-block: map.get($fluid-padding-levels, '4');
} }
@mixin fpt-4 { @mixin fpt-4 {
padding-top: map.get($fluid-padding-levels, '4'); padding-block-start: map.get($fluid-padding-levels, '4');
} }
@mixin fpb-4 { @mixin fpb-4 {
padding-bottom: map.get($fluid-padding-levels, '4'); padding-block-end: map.get($fluid-padding-levels, '4');
} }
@mixin fpl-4 { @mixin fpl-4 {
padding-left: map.get($fluid-padding-levels, '4'); padding-inline-start: map.get($fluid-padding-levels, '4');
} }
@mixin fpr-4 { @mixin fpr-4 {
padding-right: map.get($fluid-padding-levels, '4'); padding-inline-end: map.get($fluid-padding-levels, '4');
} }
@mixin \!fp-4 { @mixin \!fp-4 {
padding: map.get($fluid-padding-levels, '4') !important; padding: map.get($fluid-padding-levels, '4') !important;
@ -219,16 +219,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '4') !important; padding-block: map.get($fluid-padding-levels, '4') !important;
} }
@mixin \!fpt-4 { @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 { @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 { @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 { @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 { @mixin fp-5 {
@ -241,16 +241,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '5'); padding-block: map.get($fluid-padding-levels, '5');
} }
@mixin fpt-5 { @mixin fpt-5 {
padding-top: map.get($fluid-padding-levels, '5'); padding-block-start: map.get($fluid-padding-levels, '5');
} }
@mixin fpb-5 { @mixin fpb-5 {
padding-bottom: map.get($fluid-padding-levels, '5'); padding-block-end: map.get($fluid-padding-levels, '5');
} }
@mixin fpl-5 { @mixin fpl-5 {
padding-left: map.get($fluid-padding-levels, '5'); padding-inline-start: map.get($fluid-padding-levels, '5');
} }
@mixin fpr-5 { @mixin fpr-5 {
padding-right: map.get($fluid-padding-levels, '5'); padding-inline-end: map.get($fluid-padding-levels, '5');
} }
@mixin \!fp-5 { @mixin \!fp-5 {
padding: map.get($fluid-padding-levels, '5') !important; padding: map.get($fluid-padding-levels, '5') !important;
@ -262,16 +262,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '5') !important; padding-block: map.get($fluid-padding-levels, '5') !important;
} }
@mixin \!fpt-5 { @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 { @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 { @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 { @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 { @mixin fp-6 {
@ -284,16 +284,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '6'); padding-block: map.get($fluid-padding-levels, '6');
} }
@mixin fpt-6 { @mixin fpt-6 {
padding-top: map.get($fluid-padding-levels, '6'); padding-block-start: map.get($fluid-padding-levels, '6');
} }
@mixin fpb-6 { @mixin fpb-6 {
padding-bottom: map.get($fluid-padding-levels, '6'); padding-block-end: map.get($fluid-padding-levels, '6');
} }
@mixin fpl-6 { @mixin fpl-6 {
padding-left: map.get($fluid-padding-levels, '6'); padding-inline-start: map.get($fluid-padding-levels, '6');
} }
@mixin fpr-6 { @mixin fpr-6 {
padding-right: map.get($fluid-padding-levels, '6'); padding-inline-end: map.get($fluid-padding-levels, '6');
} }
@mixin \!fp-6 { @mixin \!fp-6 {
padding: map.get($fluid-padding-levels, '6') !important; padding: map.get($fluid-padding-levels, '6') !important;
@ -305,16 +305,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '6') !important; padding-block: map.get($fluid-padding-levels, '6') !important;
} }
@mixin \!fpt-6 { @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 { @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 { @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 { @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 { @mixin fp-7 {
@ -327,16 +327,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '7'); padding-block: map.get($fluid-padding-levels, '7');
} }
@mixin fpt-7 { @mixin fpt-7 {
padding-top: map.get($fluid-padding-levels, '7'); padding-block-start: map.get($fluid-padding-levels, '7');
} }
@mixin fpb-7 { @mixin fpb-7 {
padding-bottom: map.get($fluid-padding-levels, '7'); padding-block-end: map.get($fluid-padding-levels, '7');
} }
@mixin fpl-7 { @mixin fpl-7 {
padding-left: map.get($fluid-padding-levels, '7'); padding-inline-start: map.get($fluid-padding-levels, '7');
} }
@mixin fpr-7 { @mixin fpr-7 {
padding-right: map.get($fluid-padding-levels, '7'); padding-inline-end: map.get($fluid-padding-levels, '7');
} }
@mixin \!fp-7 { @mixin \!fp-7 {
padding: map.get($fluid-padding-levels, '7') !important; padding: map.get($fluid-padding-levels, '7') !important;
@ -348,16 +348,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '7') !important; padding-block: map.get($fluid-padding-levels, '7') !important;
} }
@mixin \!fpt-7 { @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 { @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 { @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 { @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 { @mixin fp-8 {
@ -370,16 +370,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '8'); padding-block: map.get($fluid-padding-levels, '8');
} }
@mixin fpt-8 { @mixin fpt-8 {
padding-top: map.get($fluid-padding-levels, '8'); padding-block-start: map.get($fluid-padding-levels, '8');
} }
@mixin fpb-8 { @mixin fpb-8 {
padding-bottom: map.get($fluid-padding-levels, '8'); padding-block-end: map.get($fluid-padding-levels, '8');
} }
@mixin fpl-8 { @mixin fpl-8 {
padding-left: map.get($fluid-padding-levels, '8'); padding-inline-start: map.get($fluid-padding-levels, '8');
} }
@mixin fpr-8 { @mixin fpr-8 {
padding-right: map.get($fluid-padding-levels, '8'); padding-inline-end: map.get($fluid-padding-levels, '8');
} }
@mixin \!fp-8 { @mixin \!fp-8 {
padding: map.get($fluid-padding-levels, '8') !important; padding: map.get($fluid-padding-levels, '8') !important;
@ -391,16 +391,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '8') !important; padding-block: map.get($fluid-padding-levels, '8') !important;
} }
@mixin \!fpt-8 { @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 { @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 { @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 { @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 { @mixin fp-9 {
@ -413,16 +413,16 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '9'); padding-block: map.get($fluid-padding-levels, '9');
} }
@mixin fpt-9 { @mixin fpt-9 {
padding-top: map.get($fluid-padding-levels, '9'); padding-block-start: map.get($fluid-padding-levels, '9');
} }
@mixin fpb-9 { @mixin fpb-9 {
padding-bottom: map.get($fluid-padding-levels, '9'); padding-block-end: map.get($fluid-padding-levels, '9');
} }
@mixin fpl-9 { @mixin fpl-9 {
padding-left: map.get($fluid-padding-levels, '9'); padding-inline-start: map.get($fluid-padding-levels, '9');
} }
@mixin fpr-9 { @mixin fpr-9 {
padding-right: map.get($fluid-padding-levels, '9'); padding-inline-end: map.get($fluid-padding-levels, '9');
} }
@mixin \!fp-9 { @mixin \!fp-9 {
padding: map.get($fluid-padding-levels, '9') !important; padding: map.get($fluid-padding-levels, '9') !important;
@ -434,37 +434,37 @@ $fluid-padding-levels: (
padding-block: map.get($fluid-padding-levels, '9') !important; padding-block: map.get($fluid-padding-levels, '9') !important;
} }
@mixin \!fpt-9 { @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 { @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 { @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 { @mixin \!fpr-9 {
padding-right: map.get($fluid-padding-levels, '9') !important; padding-inline-end: map.get($fluid-padding-levels, '9') !important;
} }
%fp-auto { %fp-auto {
padding: auto; padding: auto;
} }
%fpx-auto { %fpx-auto {
padding-right: auto; padding-inline-start: auto;
padding-left: auto; padding-inline-end: auto;
} }
%fpy-auto { %fpy-auto {
padding-top: auto; padding-block-start: auto;
padding-bottom: auto; padding-block-end: auto;
} }
%\!fp-auto { %\!fp-auto {
padding: auto !important; padding: auto !important;
} }
%\!fpx-auto { %\!fpx-auto {
padding-right: auto !important; padding-inline-start: auto !important;
padding-left: auto !important; padding-inline-end: auto !important;
} }
%\!fpy-auto { %\!fpy-auto {
padding-top: auto !important; padding-block-start: auto !important;
padding-bottom: auto !important; padding-block-end: auto !important;
} }