first crack at fluid margins and paddings
This commit is contained in:
Jon McClure
parent
08d5c670e5
commit
1343a8a76a
20 changed files with 410 additions and 214 deletions
|
|
@ -17,6 +17,17 @@
|
|||
* @required
|
||||
*/
|
||||
export let altText: string;
|
||||
/**
|
||||
* Add an id to target with custom CSS.
|
||||
* @type {string}
|
||||
*/
|
||||
export let id: string = '';
|
||||
/**
|
||||
* Add extra classes to target with custom CSS.
|
||||
* @type {string}
|
||||
*/
|
||||
let cls: string = '';
|
||||
export { cls as class };
|
||||
/**
|
||||
* Caption below the photo
|
||||
* @type {string}
|
||||
|
|
@ -70,34 +81,37 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<Block width="{width}" class="photo">
|
||||
<figure bind:this="{container}" aria-label="media">
|
||||
<Block width="{width}" class="photo {cls}" id="{id}">
|
||||
<figure
|
||||
bind:this="{container}"
|
||||
aria-label="media"
|
||||
class="mt-0 mx-0 mb-6 flex flex-col"
|
||||
>
|
||||
{#if !lazy || (intersectable && intersecting)}
|
||||
<img src="{src}" alt="{altText}" />
|
||||
<img class="m-0" src="{src}" alt="{altText}" />
|
||||
{:else}
|
||||
<div class="placeholder" height="{`${height}px`}"></div>
|
||||
{/if}
|
||||
{#if caption}
|
||||
<PaddingReset containerIsFluid="{width === 'fluid'}">
|
||||
<figcaption>{caption}</figcaption>
|
||||
<figcaption class="font-note my-0 text-xs leading-tight">
|
||||
{caption}
|
||||
</figcaption>
|
||||
</PaddingReset>
|
||||
{/if}
|
||||
{#if !altText}
|
||||
<div class="alt-warning">altText</div>
|
||||
<div class="alt-warning text-xxs py-1 px-2">altText</div>
|
||||
{/if}
|
||||
</figure>
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/fonts/variables';
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
|
|
@ -106,22 +120,11 @@
|
|||
}
|
||||
|
||||
div.alt-warning {
|
||||
font-family: $font-family-display;
|
||||
padding: 5px 10px;
|
||||
background-color: red;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
{:else if title}
|
||||
<PaddingReset containerIsFluid="{width === 'fluid'}">
|
||||
<TextBlock width="{textWidth}">
|
||||
<h3>{title}</h3>
|
||||
<h3 class="mt-0 mb-2.5">{title}</h3>
|
||||
{#if description}
|
||||
{@html marked(description)}
|
||||
{/if}
|
||||
|
|
@ -133,15 +133,28 @@
|
|||
</Block>
|
||||
|
||||
<!-- svelte-ignore css-unused-selector -->
|
||||
<style lang="scss">
|
||||
<style lang="scss" global>
|
||||
@import '../../scss/mixins';
|
||||
// div {
|
||||
// :global {
|
||||
// @include graphic-text;
|
||||
// }
|
||||
// }
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
div.article-block.graphic {
|
||||
p {
|
||||
@include font-note;
|
||||
@include text-sm;
|
||||
&:last-of-type {
|
||||
margin-block-end: calc(var(--theme-font-size-sm) * 0.875);
|
||||
}
|
||||
}
|
||||
aside {
|
||||
p {
|
||||
@include font-note;
|
||||
@include text-secondary;
|
||||
@include text-xs;
|
||||
margin-block-end: 0;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
import Block from '../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
<Block class="notes mb-6">
|
||||
<Block class="notes mb-24">
|
||||
{#if text}
|
||||
{@html marked.parse(text)}
|
||||
{/if}
|
||||
|
|
@ -19,11 +19,27 @@
|
|||
|
||||
<!-- svelte-ignore css-unused-selector -->
|
||||
<style lang="scss" global>
|
||||
// Same as body text... we probably should unbind these styles from the component
|
||||
// and import them in the app through a separate scss file.
|
||||
@import '../../scss/mixins';
|
||||
|
||||
div.article-block.notes {
|
||||
@include note-text;
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: var(--theme-font-size-base) 0 0;
|
||||
@include text-sm;
|
||||
@include text-primary;
|
||||
@include leading-tight;
|
||||
@include tracking-normal;
|
||||
@include font-bold;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-note;
|
||||
@include font-light;
|
||||
@include text-sm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,9 +41,6 @@
|
|||
<style lang="scss">
|
||||
@import './../../../scss/mixins';
|
||||
div.embedded-foreground {
|
||||
:global {
|
||||
@include body-text;
|
||||
}
|
||||
:global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,9 @@
|
|||
:global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:global(*:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/fonts/variables';
|
||||
@import '../../scss/mixins';
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
fill: var(--theme-colour-brand-rules);
|
||||
}
|
||||
.search--input {
|
||||
font-family: var(--theme-font-family-hed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary);
|
||||
@include font-sans;
|
||||
@include text-primary;
|
||||
padding: 0 0 0 2rem;
|
||||
font-size: 0.8rem;
|
||||
height: 33px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ $header: #5e81ac;
|
|||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 2rem;
|
||||
font-weight: 400;
|
||||
a span {
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,30 @@ import margin from '$lib/scss/tokens/spacers/\_margin.scss?inline';
|
|||
{/* @ts-ignore */}
|
||||
import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fluidMargin from '$lib/scss/tokens/spacers/\_fluid-margin.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fluidPadding from '$lib/scss/tokens/spacers/\_fluid-padding.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Layout/Spacers" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Spacer tokens
|
||||
|
||||
Spacers include tokens that control static and fluid margins and paddings.
|
||||
|
||||
### What's the difference between "static" and "fluid"?
|
||||
|
||||
**Static** margin/padding tokens set values that don't change with the size of the viewport. These tokens are best for creating space between block-like elements — divs, pictures, videos, graphics, etc. The tables below contain dozens of levels so you can finely tune spacing, but their values also are at intervals that help you maintain consistent balance on your page.
|
||||
|
||||
**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokes have fewer available levels to help make sure our typography is consistent.
|
||||
|
||||
As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding` tables).
|
||||
|
||||
---
|
||||
|
||||
<CopyTable
|
||||
title="Margin"
|
||||
mdnLink="margin"
|
||||
|
|
@ -30,3 +48,19 @@ import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
|
|||
body={cssStringToTableArray(padding)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Fluid margin"
|
||||
mdnLink="margin"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(fluidMargin, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Fluid padding"
|
||||
mdnLink="margin"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(fluidPadding, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@forward 'mixins/block';
|
||||
@forward 'tokens/accessibility/mixins/main';
|
||||
@forward 'tokens/backgrounds/mixins/main';
|
||||
@forward 'tokens/spacers/mixins/main';
|
||||
@forward 'tokens/text/mixins/main';
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
// @import '../fonts/mixins';
|
||||
// @import '../fonts/variables';
|
||||
// @import '../typography_old/font-size';
|
||||
// @import '../colours/thematic/tr';
|
||||
@use '../../mixins' as *;
|
||||
|
||||
@mixin body-text {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
li,
|
||||
blockquote {
|
||||
@include text-primary;
|
||||
}
|
||||
|
||||
p,
|
||||
ul li,
|
||||
ul li p,
|
||||
ol li,
|
||||
ol li p {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@include font-serif;
|
||||
@include text-primary;
|
||||
@include text-base;
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
background-size: 1px 1px;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
|
||||
background-position: 0 1.3rem;
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
// TODO: Assign this to background colour CSS var and the underline will skip descenders
|
||||
text-shadow: 1px 1px var(--theme-colour-background, #ffffff),
|
||||
1px -1px var(--theme-colour-background, #ffffff),
|
||||
-1px 1px var(--theme-colour-background, #ffffff),
|
||||
-1px -1px var(--theme-colour-background, #ffffff);
|
||||
|
||||
@media (max-width: 540px) {
|
||||
background-position: 0 1.1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 4rem 0 2rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.75rem;
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
p + ul {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 30px 0;
|
||||
border-left: 2px solid
|
||||
var(--theme-colour-text-secondary, var(--tr-medium-grey));
|
||||
padding-left: 15px;
|
||||
|
||||
p {
|
||||
@extend .blockquote-size;
|
||||
font-family: var(--theme-font-family-body, $font-family-serif);
|
||||
}
|
||||
|
||||
// Markdown cheat to use for attribution
|
||||
blockquote {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: -5px 0 0;
|
||||
|
||||
p {
|
||||
font-family: var(--theme-font-family-body, $font-family-serif);
|
||||
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: 540px) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Kill any additional nestings...
|
||||
blockquote {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.font-sans {
|
||||
font-family: var(
|
||||
--theme-font-family-sans-serif,
|
||||
$font-family-sans-serif
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
@import '../colours/thematic/tr';
|
||||
@import '../fonts/mixins';
|
||||
|
||||
@mixin graphic-text {
|
||||
h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
|
||||
}
|
||||
|
||||
p {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@include font-display;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5rem;
|
||||
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
|
||||
margin-bottom: 1rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.35rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
background-size: 1px 1px;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
|
||||
background-position: 0 1.1rem;
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Used for footnotes and source lines
|
||||
aside {
|
||||
p {
|
||||
@include font-display;
|
||||
margin-bottom: 0;
|
||||
color: var(--theme-colour-text-secondary, var(--tr-medium-grey));
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,5 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-size: 1rem;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
@use '../mixins' as *;
|
||||
|
||||
body {
|
||||
font-size: 1rem;
|
||||
@include font-sans;
|
||||
@include font-normal;
|
||||
@include leading-normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/////////////
|
||||
|
|
@ -93,12 +95,21 @@ ul {
|
|||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
text-underline-offset: 8%;
|
||||
text-decoration-thickness: from-font;
|
||||
}
|
||||
|
||||
strong {
|
||||
@include font-bold;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include text-sm;
|
||||
@include font-normal;
|
||||
@include leading-normal;
|
||||
@include text-secondary;
|
||||
@include font-note;
|
||||
}
|
||||
|
|
|
|||
68
src/scss/tokens/spacers/_fluid-margin.scss
Normal file
68
src/scss/tokens/spacers/_fluid-margin.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
@use 'mixins/fluid-margin' as *;
|
||||
|
||||
$fluid-margin-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
|
||||
|
||||
@each $level, $value in $fluid-margin-placeholder-levels {
|
||||
.fm-#{$level} {
|
||||
@extend %fm-#{$level};
|
||||
}
|
||||
.fmt-#{$level} {
|
||||
@extend %fmt-#{$level};
|
||||
}
|
||||
.fmr-#{$level} {
|
||||
@extend %fmr-#{$level};
|
||||
}
|
||||
.fmb-#{$level} {
|
||||
@extend %fmb-#{$level};
|
||||
}
|
||||
.fml-#{$level} {
|
||||
@extend %fml-#{$level};
|
||||
}
|
||||
.fmx-#{$level} {
|
||||
@extend %fmx-#{$level};
|
||||
}
|
||||
.fmy-#{$level} {
|
||||
@extend %fmy-#{$level};
|
||||
}
|
||||
|
||||
.\!fm-#{$level} {
|
||||
@extend %\!fm-#{$level};
|
||||
}
|
||||
.\!fmt-#{$level} {
|
||||
@extend %\!fmt-#{$level};
|
||||
}
|
||||
.\!fmr-#{$level} {
|
||||
@extend %\!fmr-#{$level};
|
||||
}
|
||||
.\!fmb-#{$level} {
|
||||
@extend %\!fmb-#{$level};
|
||||
}
|
||||
.\!fml-#{$level} {
|
||||
@extend %\!fml-#{$level};
|
||||
}
|
||||
.\!fmx-#{$level} {
|
||||
@extend %\!fmx-#{$level};
|
||||
}
|
||||
.\!fmy-#{$level} {
|
||||
@extend %\!fmy-#{$level};
|
||||
}
|
||||
}
|
||||
|
||||
.fm-auto {
|
||||
@extend %fm-auto;
|
||||
}
|
||||
.fmx-auto {
|
||||
@extend %fmx-auto;
|
||||
}
|
||||
.fmy-auto {
|
||||
@extend %fmy-auto;
|
||||
}
|
||||
.\!fm-auto {
|
||||
@extend %\!fm-auto;
|
||||
}
|
||||
.\!fmx-auto {
|
||||
@extend %\!fmx-auto;
|
||||
}
|
||||
.\!fmy-auto {
|
||||
@extend %\!fmy-auto;
|
||||
}
|
||||
49
src/scss/tokens/spacers/_fluid-padding.scss
Normal file
49
src/scss/tokens/spacers/_fluid-padding.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@use 'mixins/fluid-padding' as *;
|
||||
|
||||
$fluid-padding-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
|
||||
|
||||
@each $level, $value in $fluid-padding-placeholder-levels {
|
||||
.fp-#{$level} {
|
||||
@extend %fp-#{$level};
|
||||
}
|
||||
.fpt-#{$level} {
|
||||
@extend %fpt-#{$level};
|
||||
}
|
||||
.fpr-#{$level} {
|
||||
@extend %fpr-#{$level};
|
||||
}
|
||||
.fpb-#{$level} {
|
||||
@extend %fpb-#{$level};
|
||||
}
|
||||
.fpl-#{$level} {
|
||||
@extend %fpl-#{$level};
|
||||
}
|
||||
.fpx-#{$level} {
|
||||
@extend %fpx-#{$level};
|
||||
}
|
||||
.fpy-#{$level} {
|
||||
@extend %fpy-#{$level};
|
||||
}
|
||||
|
||||
.\!fp-#{$level} {
|
||||
@extend %\!fp-#{$level};
|
||||
}
|
||||
.\!fpt-#{$level} {
|
||||
@extend %\!fpt-#{$level};
|
||||
}
|
||||
.\!fpr-#{$level} {
|
||||
@extend %\!fpr-#{$level};
|
||||
}
|
||||
.\!fpb-#{$level} {
|
||||
@extend %\!fpb-#{$level};
|
||||
}
|
||||
.\!fpl-#{$level} {
|
||||
@extend %\!fpl-#{$level};
|
||||
}
|
||||
.\!fpx-#{$level} {
|
||||
@extend %\!fpx-#{$level};
|
||||
}
|
||||
.\!fpy-#{$level} {
|
||||
@extend %\!fpy-#{$level};
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,4 @@
|
|||
@forward 'fluid-margin';
|
||||
@forward 'fluid-padding';
|
||||
@forward 'margin';
|
||||
@forward 'padding';
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ $margin-levels: (
|
|||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
.\!m-#{$level}\! {
|
||||
.\!m-#{$level} {
|
||||
margin: $value !important;
|
||||
}
|
||||
.\!mt-#{$level} {
|
||||
|
|
|
|||
85
src/scss/tokens/spacers/mixins/_fluid-margin.scss
Normal file
85
src/scss/tokens/spacers/mixins/_fluid-margin.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
$fluid-margin-levels: (
|
||||
'0': 0,
|
||||
'1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
|
||||
'2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
|
||||
'3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
|
||||
'4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
|
||||
'5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
|
||||
'6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
|
||||
'7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
|
||||
'8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
|
||||
'9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
|
||||
);
|
||||
|
||||
@each $level, $value in $fluid-margin-levels {
|
||||
%fm-#{$level} {
|
||||
margin: $value;
|
||||
}
|
||||
%fmt-#{$level} {
|
||||
margin-top: $value;
|
||||
}
|
||||
%fmr-#{$level} {
|
||||
margin-right: $value;
|
||||
}
|
||||
%fmb-#{$level} {
|
||||
margin-bottom: $value;
|
||||
}
|
||||
%fml-#{$level} {
|
||||
margin-left: $value;
|
||||
}
|
||||
%fmx-#{$level} {
|
||||
margin-right: $value;
|
||||
margin-left: $value;
|
||||
}
|
||||
%fmy-#{$level} {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
%\!fm-#{$level} {
|
||||
margin: $value !important;
|
||||
}
|
||||
%\!fmt-#{$level} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
%\!fmr-#{$level} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
%\!fmb-#{$level} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
%\!fml-#{$level} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
%\!fmx-#{$level} {
|
||||
margin-right: $value !important;
|
||||
margin-left: $value !important;
|
||||
}
|
||||
%\!fmy-#{$level} {
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
%fm-auto {
|
||||
margin: auto;
|
||||
}
|
||||
%fmx-auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
%fmy-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
%\!fm-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
%\!fmx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
%\!fmy-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
85
src/scss/tokens/spacers/mixins/_fluid-padding.scss
Normal file
85
src/scss/tokens/spacers/mixins/_fluid-padding.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
$fluid-padding-levels: (
|
||||
'0': 0,
|
||||
'1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
|
||||
'2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
|
||||
'3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
|
||||
'4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
|
||||
'5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
|
||||
'6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
|
||||
'7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
|
||||
'8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
|
||||
'9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
|
||||
);
|
||||
|
||||
@each $level, $value in $fluid-padding-levels {
|
||||
%fp-#{$level} {
|
||||
padding: $value;
|
||||
}
|
||||
%fpt-#{$level} {
|
||||
padding-top: $value;
|
||||
}
|
||||
%fpr-#{$level} {
|
||||
padding-right: $value;
|
||||
}
|
||||
%fpb-#{$level} {
|
||||
padding-bottom: $value;
|
||||
}
|
||||
%fpl-#{$level} {
|
||||
padding-left: $value;
|
||||
}
|
||||
%fpx-#{$level} {
|
||||
padding-right: $value;
|
||||
padding-left: $value;
|
||||
}
|
||||
%fpy-#{$level} {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
%\!fp-#{$level} {
|
||||
padding: $value !important;
|
||||
}
|
||||
%\!fpt-#{$level} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
%\!fpr-#{$level} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
%\!fpb-#{$level} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
%\!fpl-#{$level} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
%\!fpx-#{$level} {
|
||||
padding-right: $value !important;
|
||||
padding-left: $value !important;
|
||||
}
|
||||
%\!fpy-#{$level} {
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
%fp-auto {
|
||||
padding: auto;
|
||||
}
|
||||
%fpx-auto {
|
||||
padding-right: auto;
|
||||
padding-left: auto;
|
||||
}
|
||||
%fpy-auto {
|
||||
padding-top: auto;
|
||||
padding-bottom: auto;
|
||||
}
|
||||
%\!fp-auto {
|
||||
padding: auto !important;
|
||||
}
|
||||
%\!fpx-auto {
|
||||
padding-right: auto !important;
|
||||
padding-left: auto !important;
|
||||
}
|
||||
%\!fpy-auto {
|
||||
padding-top: auto !important;
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
2
src/scss/tokens/spacers/mixins/_main.scss
Normal file
2
src/scss/tokens/spacers/mixins/_main.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward 'fluid-margin';
|
||||
@forward 'fluid-padding';
|
||||
Loading…
Reference in a new issue