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',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
'storybook-addon-rtl',
],
framework: {
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",
"pym.js": "^1.3.2",
"slugify": "^1.6.6",
"storybook-addon-rtl": "^1.1.0",
"svelte-fa": "^4.0.3",
"svelte-intersection-observer": "^1.0.0"
},

8
pnpm-lock.yaml
View file

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

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 {
width: calc(100% + 30px);
margin-left: -15px;
margin-inline-start: -15px;
max-width: none;
}
}

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

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

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."
>
{#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="body-note">Initially, this site was far smaller.</p>
</div>
{/snippet}
{#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="body-note">But then forces built up.</p>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;
}
.hero-wrapper {
margin-top: -64px;
margin-block-start: -64px;
}
```
@ -316,7 +316,7 @@ Add styles in `global.scss`:
}
.dek {
margin-top: 1rem;
margin-block-start: 1rem;
p {
color: #ffffff;
text-shadow: 1px 1px 8px #ff7c88;

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

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

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

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

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

@ -85,7 +85,7 @@
<div
class="photopack-row flex justify-between"
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}
<figure

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -73,8 +73,8 @@
}
.legal {
padding-top: 24px;
padding-bottom: 24px;
padding-block-start: 24px;
padding-block-end: 24px;
box-sizing: border-box;
.content-container {
@ -87,7 +87,7 @@
.content-container {
box-sizing: border-box;
@include grids.spacing-single(padding-left padding-right);
@include grids.spacing-single(padding-inline-start padding-inline-end);
}
}
@ -151,7 +151,7 @@
li {
display: inline-flex;
margin-right: 16px;
margin-inline-end: 16px;
list-style: none;
align-items: center;
a {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -16,7 +16,7 @@
.spinner-container {
position: relative;
height: 0;
padding-bottom: 100%;
padding-block-end: 100%;
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 {
margin-right: 10px;
margin-inline-end: 10px;
width: 100%;
&.has-thumbnail {
width: calc(100% - 84px);
@ -68,7 +68,7 @@
time {
@include font-sans;
margin-top: 8px;
margin-block-start: 8px;
display: block;
font-size: 12px;
font-weight: 400;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -15,4 +15,7 @@
width: 1rem;
fill: currentColor;
}
:global([dir='rtl']) .icon {
transform: rotate(180deg);
}
</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">
import { intcomma } from 'journalize';
import LeftArrow from './LeftArrow.svelte';
import RightArrow from './RightArrow.svelte';
import PrevArrow from './PrevArrow.svelte';
import NextArrow from './NextArrow.svelte';
interface Props {
/**
@ -49,7 +49,7 @@
<nav aria-label="pagination" class="pagination fmt-4">
<button onclick={goToPreviousPage} disabled={pageNumber === 1}
><div class="icon-wrapper">
<LeftArrow />
<PrevArrow />
<span class="visually-hidden">Previous page</span>
</div></button
>
@ -62,7 +62,7 @@
onclick={goToNextPage}
disabled={pageNumber === Math.ceil(n / pageSize)}
><div class="icon-wrapper">
<RightArrow />
<NextArrow />
<span class="visually-hidden">Next page</span>
</div></button
>
@ -75,6 +75,7 @@
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
button {
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;
fill: currentColor;
}
:global([dir='rtl']) .icon {
transform: rotate(180deg);
}
</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>
<div class="select">
<div class="select relative inline-flex">
<select
class="select--input body-caption fpx-2"
name="select--input"
@ -34,6 +34,18 @@
<option value={obj.value}>{obj.text} {label.toLowerCase()}</option>
{/each}
</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>
<style lang="scss">
@ -50,12 +62,13 @@
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none; /* Remove the default arrow */
background: transparent;
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>');
background-repeat: no-repeat;
background-position-x: 225px;
background-position-y: 55%;
}
.arrow {
pointer-events: none;
inset-inline-end: 0;
inset-block-start: 0.55rem;
width: 1.5rem;
height: 1.5rem;
}
.select--input::-ms-expand {
display: none; /* Remove the default arrow in Internet Explorer 11 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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