basic hero headline
This commit is contained in:
Prasanta Kumar Dutta
parent
08a0e9984e
commit
f1ae721d3f
15 changed files with 427 additions and 320 deletions
|
|
@ -123,7 +123,7 @@
|
|||
{:else if notes}
|
||||
<PaddingReset containerIsFluid="{width === 'fluid'}">
|
||||
<TextBlock width="{textWidth}">
|
||||
<aside>
|
||||
<aside class="fmt-2">
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</TextBlock>
|
||||
|
|
@ -143,7 +143,6 @@
|
|||
}
|
||||
// Caption and Sources
|
||||
aside {
|
||||
@include fmt-2;
|
||||
p {
|
||||
@include body-caption;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@
|
|||
<slot name="byline" />
|
||||
{:else if authors.length > 0 || publishTime}
|
||||
<Byline
|
||||
class="fmy-3"
|
||||
authors="{authors}"
|
||||
publishTime="{publishTime}"
|
||||
updateTime="{updateTime}"
|
||||
|
|
@ -138,10 +139,6 @@
|
|||
@include font-light;
|
||||
}
|
||||
}
|
||||
|
||||
.byline-container {
|
||||
@include fmy-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
|
||||
// @ts-ignore
|
||||
import polarImgSrc from './stories/polar.jpg';
|
||||
|
||||
import Hero from './Hero.svelte';
|
||||
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Components/Hero"
|
||||
component="{Hero}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Hero {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics interactive',
|
||||
imgSrc: polarImgSrc,
|
||||
}}"
|
||||
/>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Headline
|
||||
*/
|
||||
export let hed: string = 'Reuters Graphics Interactive';
|
||||
/**
|
||||
* Hedline colour
|
||||
*/
|
||||
export let hedColour = 'white';
|
||||
/**
|
||||
* Dek
|
||||
*/
|
||||
export let dek: string | null = null;
|
||||
/**
|
||||
* Section title
|
||||
*/
|
||||
export let section: string | null = null;
|
||||
/**
|
||||
* Section colour
|
||||
*/
|
||||
export let sectionColour: string = 'red';
|
||||
|
||||
export let imgSrc: string;
|
||||
export let imgAltText: string;
|
||||
|
||||
|
||||
|
||||
export let overlay: boolean | string = true;
|
||||
|
||||
export let top = false;
|
||||
export let bottom = false;
|
||||
export let left = false;
|
||||
export let right = false;
|
||||
</script>
|
||||
|
||||
|
||||
<section class="hero-title">
|
||||
<figure>
|
||||
{#if $$slots.image}
|
||||
<slot name='image'></slot>
|
||||
{:else}
|
||||
<img src="{imgSrc}" alt="{imgAltText}" />
|
||||
{/if}
|
||||
{#if overlay}
|
||||
<div
|
||||
class="overlay"
|
||||
class:lightest={overlay === 'lightest'}
|
||||
class:lighter={overlay === 'lighter'}
|
||||
class:light={overlay === 'light'}
|
||||
class:dark={overlay === 'dark'}
|
||||
class:darker={overlay === 'darker'}
|
||||
class:darkest={overlay === 'darkest'}
|
||||
></div>
|
||||
{/if}
|
||||
</figure>
|
||||
<div
|
||||
class="title color-white"
|
||||
class:top={top}
|
||||
class:bottom={bottom}
|
||||
class:left={left}
|
||||
class:right={right}
|
||||
>
|
||||
{#if section}
|
||||
<p class={`section-title color-${sectionColour} text-shadow`}>{section}</p>
|
||||
{/if}
|
||||
|
||||
{#if $$slots.hed}
|
||||
<slot name="hed"></slot>
|
||||
{:else}
|
||||
<h2
|
||||
class={`text-shadow-darker color-${hedColour} important`}
|
||||
>{hed}</h2>
|
||||
{/if}
|
||||
|
||||
{#if $$slots.dek}
|
||||
<slot name="dek"></slot>
|
||||
{:else}
|
||||
{#if dek}
|
||||
<p class="text-shadow-darkest">{dek}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
---
|
||||
title: Hero
|
||||
description: A headline over a hero image
|
||||
slug: hero
|
||||
---
|
||||
|
||||
<script>
|
||||
import DemoContainer from '../_docs/DemoContainer/index.svelte'; import Hero
|
||||
from './index.svelte'; import {assets} from '$app/paths';
|
||||
</script>
|
||||
|
||||
<section>
|
||||
|
||||
## {title}
|
||||
|
||||
{description}
|
||||
|
||||
</section>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-svelte-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Hero hed="Eisbär" section="Climate Change" dek="The last of the white bears">
|
||||
<img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
|
||||
</Hero>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<Hero hed="Eisbär" section="Climate Change" dek="The last of the white bears">
|
||||
<img slot="image" src={`${assets}/images/polar.jpg`} alt="A polar bear" />
|
||||
</Hero>
|
||||
</DemoContainer>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-svelte-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<!-- Place the title with top, bottom, left & right props-->
|
||||
<Hero
|
||||
hed="Eisbär"
|
||||
section="Climate Change"
|
||||
dek="The last of the white bears"
|
||||
overlay="{'darker'}"
|
||||
bottom
|
||||
left
|
||||
>
|
||||
<img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
|
||||
</Hero>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<Hero
|
||||
hed="Eisbär"
|
||||
section="Climate Change"
|
||||
dek="The last of the white bears"
|
||||
overlay={'darker'}
|
||||
bottom
|
||||
left
|
||||
>
|
||||
<img slot="image" src={`${assets}/images/polar.jpg`} alt="A polar bear" />
|
||||
</Hero>
|
||||
</DemoContainer>
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-svelte-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Hero section="Climate Change" overlay="{false}">
|
||||
<img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
|
||||
<!-- Override the hed and/or dek with named slots -->
|
||||
<h2 slot="hed" class="uppercase spaced-more color-blue text-shadow-lighter">
|
||||
Eisbaer
|
||||
</h2>
|
||||
<p slot="dek" class="color-blue text-shadow-lighter">
|
||||
The last of the white bears
|
||||
</p>
|
||||
</Hero>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<Hero section="Climate Change" overlay={false}>
|
||||
<img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
|
||||
<h2 slot="hed" class="uppercase spaced-more color-blue text-shadow-lighter">
|
||||
Eisbaer
|
||||
</h2>
|
||||
<p slot="dek" class="color-blue text-shadow-lighter">
|
||||
The last of the white bears
|
||||
</p>
|
||||
</Hero>
|
||||
</DemoContainer>
|
||||
|
||||
<style lang="scss">
|
||||
/*Fudging some styles for the demo...*/
|
||||
:global {
|
||||
section.hero-title {
|
||||
figure {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
div.title {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
Add a byline and dateline with `byline` and `dateline` named slots.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
sectionColour="{'orange'}"
|
||||
>
|
||||
<!-- Use named slots to add a byline... -->
|
||||
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||
<!-- ...and a dateline. -->
|
||||
<span slot="dateline">Published Jan. 1, 2020</span>
|
||||
</Headline>
|
||||
```
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Headline>
|
||||
<!-- Add a crown -->
|
||||
<img slot="crown" src="{`${assets}/images/crown.png`}" />
|
||||
<!-- Override the hed with a named slot -->
|
||||
<h2 slot="hed" class="spaced font-serif">Europa</h2>
|
||||
<span slot="dateline">Published Jan. 1, 2020</span>
|
||||
</Headline>
|
||||
```
|
||||
67
src/components/HeroHeadline/Hero.stories.svelte
Normal file
67
src/components/HeroHeadline/Hero.stories.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
// import backgroundImageDocs from './stories/docs/backgroundImage.md?raw';
|
||||
|
||||
// @ts-ignore
|
||||
import polarImgSrc from './stories/polar.jpg';
|
||||
// import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
|
||||
import HeroHeadline from './Hero.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
// withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
hedSize: {
|
||||
control: 'select',
|
||||
options: ['small', 'normal', 'big', 'bigger', 'biggest'],
|
||||
},
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Components/HeroHeadline"
|
||||
component="{HeroHeadline}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<HeroHeadline {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics Interactive',
|
||||
hedSize: 'normal',
|
||||
dek: 'The beginning of a beautiful page',
|
||||
authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
|
||||
publishTime: new Date('2022-03-04').toISOString(),
|
||||
img: polarImgSrc,
|
||||
}}"
|
||||
/>
|
||||
|
||||
<!-- <Story name="With inline media" {...withStoryDocs(backgroundImageDocs)}>
|
||||
<HeroHeadline
|
||||
hed="{'The plunge from 29,000 feet'}"
|
||||
dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
/>
|
||||
</Story> -->
|
||||
240
src/components/HeroHeadline/Hero.svelte
Normal file
240
src/components/HeroHeadline/Hero.svelte
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
|
||||
<script lang="ts">
|
||||
import { HeadlineSize } from '../@types/global';
|
||||
import cssVariables from '../../actions/cssVariables/index.js';
|
||||
|
||||
/** Set to true for embeddables. */
|
||||
export let embedded: boolean = false;
|
||||
|
||||
/**
|
||||
* Path to background image
|
||||
* @type {string}
|
||||
*/
|
||||
export let img: string;
|
||||
|
||||
/**
|
||||
* Size value for CSS property background-size
|
||||
* @type {string}
|
||||
*/
|
||||
export let backgroundSize: 'auto' | 'cover' | 'contain' = 'cover';
|
||||
|
||||
/**
|
||||
* Position value for CSS property background-position
|
||||
* @type {string}
|
||||
*/
|
||||
export let backgroundPos = 'center';
|
||||
|
||||
/**
|
||||
* ARIA description, passed in as a markdown string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let ariaDescription: string | null = null;
|
||||
|
||||
/**
|
||||
* Notes to the graphic, passed in as a markdown string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let notes: string | null = null;
|
||||
|
||||
/**
|
||||
* Height as a percetange of viewport height
|
||||
* @type {number}
|
||||
*/
|
||||
export let heroHeight: number = 100;
|
||||
|
||||
/**
|
||||
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
||||
* @type {string}
|
||||
*/
|
||||
export let hed: string = 'Reuters Graphics Interactive';
|
||||
|
||||
/** Add extra classes to the block tag to target it with custom CSS. */
|
||||
let cls: string = '';
|
||||
export { cls as class };
|
||||
|
||||
/**
|
||||
* Headline size
|
||||
* @type {string}
|
||||
*/
|
||||
export let hedSize: HeadlineSize = 'normal';
|
||||
|
||||
/**
|
||||
* Headline horizontal alignment
|
||||
* @type {string}
|
||||
*/
|
||||
export let hedAlign: 'left' | 'center' | 'right' = 'center';
|
||||
|
||||
/**
|
||||
* Dek, parsed as a markdown string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let dek: string | null = null;
|
||||
/**
|
||||
* Section title
|
||||
* @type {string}
|
||||
*/
|
||||
export let section: string | null = null;
|
||||
/**
|
||||
* Array of author names, which will be slugified to create links to Reuters author pages
|
||||
*/
|
||||
export let authors: string[] = [];
|
||||
/**
|
||||
* Publish time as a datetime string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let publishTime: string = '';
|
||||
/**
|
||||
* Update time as a datetime string.
|
||||
* @type {string}
|
||||
*/
|
||||
export let updateTime: string = '';
|
||||
|
||||
/**
|
||||
* Width of the headline.
|
||||
*/
|
||||
export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
|
||||
|
||||
import Headline from '../Headline/Headline.svelte';
|
||||
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
import TextBlock from '../GraphicBlock/TextBlock.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import Byline from '../Byline/Byline.svelte';
|
||||
import { marked } from 'marked';
|
||||
|
||||
let hedClass;
|
||||
$: {
|
||||
switch (hedSize) {
|
||||
case 'biggest':
|
||||
hedClass = 'text-6xl';
|
||||
break;
|
||||
case 'bigger':
|
||||
hedClass = 'text-5xl';
|
||||
break;
|
||||
case 'big':
|
||||
hedClass = 'text-4xl';
|
||||
break;
|
||||
case 'small':
|
||||
hedClass = 'text-2xl';
|
||||
break;
|
||||
default:
|
||||
hedClass = 'text-3xl';
|
||||
}
|
||||
}
|
||||
|
||||
$: variables = {
|
||||
heroHeight: embedded ? '850px' : heroHeight + 'svh',
|
||||
backgroundSize,
|
||||
backgroundPos,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="hero-wrapper" use:cssVariables="{variables}">
|
||||
<!-- Background media -->
|
||||
{#if $$slots.background || img}
|
||||
<Block width="fluid" class="hero-headline fmt-0">
|
||||
<Headline
|
||||
class="{cls} mt-0 !text-{hedAlign}"
|
||||
width="{width}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
/>
|
||||
<div class="background-container">
|
||||
{#if $$slots.background}
|
||||
<!-- Hero named slot -->
|
||||
<slot name="background" />
|
||||
{:else}
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
role="img"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
ariaDescription="{ariaDescription}"
|
||||
>
|
||||
<div
|
||||
class="background-image"
|
||||
style="background-image: url({img})"
|
||||
></div>
|
||||
</GraphicBlock>
|
||||
{/if}
|
||||
</div>
|
||||
</Block>
|
||||
{/if}
|
||||
{#if notes}
|
||||
<TextBlock width="normal">
|
||||
<aside class="fmt-2">
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</TextBlock>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $$slots.inline}
|
||||
<div class="crown-container">
|
||||
<!-- Hero named slot -->
|
||||
<slot name="inline" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $$slots.byline}
|
||||
<!-- Custom byline/dateline -->
|
||||
<slot name="byline" />
|
||||
{:else if authors.length > 0 || publishTime}
|
||||
<Byline
|
||||
class="fmt-7 fmb-5"
|
||||
authors="{authors}"
|
||||
publishTime="{publishTime}"
|
||||
updateTime="{updateTime}"
|
||||
align="left"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/mixins';
|
||||
|
||||
:global {
|
||||
.hero-headline {
|
||||
height: var(--heroHeight);
|
||||
max-height: 1800px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: var(--heroHeight);
|
||||
max-height: 1800px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
// Caption and Sources
|
||||
aside {
|
||||
p {
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.background-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: var(--heroHeight);
|
||||
max-height: 1800px;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: var(--backgroundPos);
|
||||
background-size: var(--backgroundSize);
|
||||
}
|
||||
</style>
|
||||
16
src/components/HeroHeadline/stories/docs/component.md
Normal file
16
src/components/HeroHeadline/stories/docs/component.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
> 🔨 **Under construction**: We're working on this component to make it better. Pardon our mess.
|
||||
|
||||
Reuters Graphics headline
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
sectionColour="{'orange'}"
|
||||
/>
|
||||
```
|
||||
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
|
@ -3,7 +3,10 @@ export { default as cssVariables } from './actions/cssVariables/index.js';
|
|||
export { default as resizeObserver } from './actions/resizeObserver/index.js';
|
||||
|
||||
// Components
|
||||
export { default as Analytics, registerPageview } from './components/Analytics/Analytics.svelte';
|
||||
export {
|
||||
default as Analytics,
|
||||
registerPageview,
|
||||
} from './components/Analytics/Analytics.svelte';
|
||||
export { default as Article } from './components/Article/Article.svelte';
|
||||
export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
|
||||
export { default as Block } from './components/Block/Block.svelte';
|
||||
|
|
@ -16,7 +19,7 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
|
|||
export { default as Framer } from './components/Framer/Framer.svelte';
|
||||
export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
|
||||
export { default as Headline } from './components/Headline/Headline.svelte';
|
||||
export { default as Hero } from './components/Hero/Hero.svelte';
|
||||
export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
|
||||
export { default as NoteText } from './components/NoteText/NoteText.svelte';
|
||||
export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
|
||||
export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
|
||||
|
|
@ -39,7 +42,7 @@ export { default as Table } from './components/Table/Table.svelte';
|
|||
export {
|
||||
default as Theme,
|
||||
// @ts-ignore
|
||||
themes
|
||||
themes,
|
||||
} from './components/Theme/Theme.svelte';
|
||||
export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
|
||||
export { default as Video } from './components/Video/Video.svelte';
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@
|
|||
margin-left: $value;
|
||||
}
|
||||
%fmx-#{$level} {
|
||||
margin-inline: $value;
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
}
|
||||
%fmy-#{$level} {
|
||||
margin-block: $value;
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
%\!fm-#{$level} {
|
||||
|
|
@ -39,10 +41,12 @@
|
|||
margin-left: $value !important;
|
||||
}
|
||||
%\!fmx-#{$level} {
|
||||
margin-inline: $value !important;
|
||||
margin-left: $value !important;
|
||||
margin-right: $value !important;
|
||||
}
|
||||
%\!fmy-#{$level} {
|
||||
margin-block: $value !important;
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '0');
|
||||
}
|
||||
@mixin fmx-0 {
|
||||
margin-inline: map.get($fluid-margin-levels, '0');
|
||||
margin-left: map.get($fluid-margin-levels, '0');
|
||||
margin-right: map.get($fluid-margin-levels, '0');
|
||||
}
|
||||
@mixin fmy-0 {
|
||||
margin-block: map.get($fluid-margin-levels, '0');
|
||||
margin-top: map.get($fluid-margin-levels, '0');
|
||||
margin-bottom: map.get($fluid-margin-levels, '0');
|
||||
}
|
||||
@mixin fmt-0 {
|
||||
margin-top: map.get($fluid-margin-levels, '0');
|
||||
|
|
@ -38,10 +40,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '0') !important;
|
||||
}
|
||||
@mixin \!fmx-0 {
|
||||
margin-inline: map.get($fluid-margin-levels, '0') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '0') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '0') !important;
|
||||
}
|
||||
@mixin \!fmy-0 {
|
||||
margin-block: map.get($fluid-margin-levels, '0') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '0') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '0') !important;
|
||||
}
|
||||
@mixin \!fmt-0 {
|
||||
margin-top: map.get($fluid-margin-levels, '0') !important;
|
||||
|
|
@ -60,10 +64,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '1');
|
||||
}
|
||||
@mixin fmx-1 {
|
||||
margin-inline: map.get($fluid-margin-levels, '1');
|
||||
margin-left: map.get($fluid-margin-levels, '1');
|
||||
margin-right: map.get($fluid-margin-levels, '1');
|
||||
}
|
||||
@mixin fmy-1 {
|
||||
margin-block: map.get($fluid-margin-levels, '1');
|
||||
margin-top: map.get($fluid-margin-levels, '1');
|
||||
margin-bottom: map.get($fluid-margin-levels, '1');
|
||||
}
|
||||
@mixin fmt-1 {
|
||||
margin-top: map.get($fluid-margin-levels, '1');
|
||||
|
|
@ -81,10 +87,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '1') !important;
|
||||
}
|
||||
@mixin \!fmx-1 {
|
||||
margin-inline: map.get($fluid-margin-levels, '1') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '1') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '1') !important;
|
||||
}
|
||||
@mixin \!fmy-1 {
|
||||
margin-block: map.get($fluid-margin-levels, '1') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '1') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '1') !important;
|
||||
}
|
||||
@mixin \!fmt-1 {
|
||||
margin-top: map.get($fluid-margin-levels, '1') !important;
|
||||
|
|
@ -103,10 +111,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '2');
|
||||
}
|
||||
@mixin fmx-2 {
|
||||
margin-inline: map.get($fluid-margin-levels, '2');
|
||||
margin-left: map.get($fluid-margin-levels, '2');
|
||||
margin-right: map.get($fluid-margin-levels, '2');
|
||||
}
|
||||
@mixin fmy-2 {
|
||||
margin-block: map.get($fluid-margin-levels, '2');
|
||||
margin-top: map.get($fluid-margin-levels, '2');
|
||||
margin-bottom: map.get($fluid-margin-levels, '2');
|
||||
}
|
||||
@mixin fmt-2 {
|
||||
margin-top: map.get($fluid-margin-levels, '2');
|
||||
|
|
@ -124,10 +134,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '2') !important;
|
||||
}
|
||||
@mixin \!fmx-2 {
|
||||
margin-inline: map.get($fluid-margin-levels, '2') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '2') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '2') !important;
|
||||
}
|
||||
@mixin \!fmy-2 {
|
||||
margin-block: map.get($fluid-margin-levels, '2') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '2') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '2') !important;
|
||||
}
|
||||
@mixin \!fmt-2 {
|
||||
margin-top: map.get($fluid-margin-levels, '2') !important;
|
||||
|
|
@ -146,10 +158,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '3');
|
||||
}
|
||||
@mixin fmx-3 {
|
||||
margin-inline: map.get($fluid-margin-levels, '3');
|
||||
margin-left: map.get($fluid-margin-levels, '3');
|
||||
margin-right: map.get($fluid-margin-levels, '3');
|
||||
}
|
||||
@mixin fmy-3 {
|
||||
margin-block: map.get($fluid-margin-levels, '3');
|
||||
margin-top: map.get($fluid-margin-levels, '3');
|
||||
margin-bottom: map.get($fluid-margin-levels, '3');
|
||||
}
|
||||
@mixin fmt-3 {
|
||||
margin-top: map.get($fluid-margin-levels, '3');
|
||||
|
|
@ -167,10 +181,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '3') !important;
|
||||
}
|
||||
@mixin \!fmx-3 {
|
||||
margin-inline: map.get($fluid-margin-levels, '3') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '3') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '3') !important;
|
||||
}
|
||||
@mixin \!fmy-3 {
|
||||
margin-block: map.get($fluid-margin-levels, '3') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '3') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '3') !important;
|
||||
}
|
||||
@mixin \!fmt-3 {
|
||||
margin-top: map.get($fluid-margin-levels, '3') !important;
|
||||
|
|
@ -189,10 +205,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '4');
|
||||
}
|
||||
@mixin fmx-4 {
|
||||
margin-inline: map.get($fluid-margin-levels, '4');
|
||||
margin-left: map.get($fluid-margin-levels, '4');
|
||||
margin-right: map.get($fluid-margin-levels, '4');
|
||||
}
|
||||
@mixin fmy-4 {
|
||||
margin-block: map.get($fluid-margin-levels, '4');
|
||||
margin-top: map.get($fluid-margin-levels, '4');
|
||||
margin-bottom: map.get($fluid-margin-levels, '4');
|
||||
}
|
||||
@mixin fmt-4 {
|
||||
margin-top: map.get($fluid-margin-levels, '4');
|
||||
|
|
@ -210,10 +228,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '4') !important;
|
||||
}
|
||||
@mixin \!fmx-4 {
|
||||
margin-inline: map.get($fluid-margin-levels, '4') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '4') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '4') !important;
|
||||
}
|
||||
@mixin \!fmy-4 {
|
||||
margin-block: map.get($fluid-margin-levels, '4') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '4') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '4') !important;
|
||||
}
|
||||
@mixin \!fmt-4 {
|
||||
margin-top: map.get($fluid-margin-levels, '4') !important;
|
||||
|
|
@ -232,10 +252,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '5');
|
||||
}
|
||||
@mixin fmx-5 {
|
||||
margin-inline: map.get($fluid-margin-levels, '5');
|
||||
margin-left: map.get($fluid-margin-levels, '5');
|
||||
margin-right: map.get($fluid-margin-levels, '5');
|
||||
}
|
||||
@mixin fmy-5 {
|
||||
margin-block: map.get($fluid-margin-levels, '5');
|
||||
margin-top: map.get($fluid-margin-levels, '5');
|
||||
margin-bottom: map.get($fluid-margin-levels, '5');
|
||||
}
|
||||
@mixin fmt-5 {
|
||||
margin-top: map.get($fluid-margin-levels, '5');
|
||||
|
|
@ -253,10 +275,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '5') !important;
|
||||
}
|
||||
@mixin \!fmx-5 {
|
||||
margin-inline: map.get($fluid-margin-levels, '5') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '5') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '5') !important;
|
||||
}
|
||||
@mixin \!fmy-5 {
|
||||
margin-block: map.get($fluid-margin-levels, '5') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '5') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '5') !important;
|
||||
}
|
||||
@mixin \!fmt-5 {
|
||||
margin-top: map.get($fluid-margin-levels, '5') !important;
|
||||
|
|
@ -275,10 +299,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '6');
|
||||
}
|
||||
@mixin fmx-6 {
|
||||
margin-inline: map.get($fluid-margin-levels, '6');
|
||||
margin-left: map.get($fluid-margin-levels, '6');
|
||||
margin-right: map.get($fluid-margin-levels, '6');
|
||||
}
|
||||
@mixin fmy-6 {
|
||||
margin-block: map.get($fluid-margin-levels, '6');
|
||||
margin-top: map.get($fluid-margin-levels, '6');
|
||||
margin-bottom: map.get($fluid-margin-levels, '6');
|
||||
}
|
||||
@mixin fmt-6 {
|
||||
margin-top: map.get($fluid-margin-levels, '6');
|
||||
|
|
@ -296,10 +322,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '6') !important;
|
||||
}
|
||||
@mixin \!fmx-6 {
|
||||
margin-inline: map.get($fluid-margin-levels, '6') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '6') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '6') !important;
|
||||
}
|
||||
@mixin \!fmy-6 {
|
||||
margin-block: map.get($fluid-margin-levels, '6') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '6') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '6') !important;
|
||||
}
|
||||
@mixin \!fmt-6 {
|
||||
margin-top: map.get($fluid-margin-levels, '6') !important;
|
||||
|
|
@ -318,10 +346,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '7');
|
||||
}
|
||||
@mixin fmx-7 {
|
||||
margin-inline: map.get($fluid-margin-levels, '7');
|
||||
margin-left: map.get($fluid-margin-levels, '7');
|
||||
margin-right: map.get($fluid-margin-levels, '7');
|
||||
}
|
||||
@mixin fmy-7 {
|
||||
margin-block: map.get($fluid-margin-levels, '7');
|
||||
margin-top: map.get($fluid-margin-levels, '7');
|
||||
margin-bottom: map.get($fluid-margin-levels, '7');
|
||||
}
|
||||
@mixin fmt-7 {
|
||||
margin-top: map.get($fluid-margin-levels, '7');
|
||||
|
|
@ -339,10 +369,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '7') !important;
|
||||
}
|
||||
@mixin \!fmx-7 {
|
||||
margin-inline: map.get($fluid-margin-levels, '7') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '7') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '7') !important;
|
||||
}
|
||||
@mixin \!fmy-7 {
|
||||
margin-block: map.get($fluid-margin-levels, '7') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '7') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '7') !important;
|
||||
}
|
||||
@mixin \!fmt-7 {
|
||||
margin-top: map.get($fluid-margin-levels, '7') !important;
|
||||
|
|
@ -361,10 +393,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '8');
|
||||
}
|
||||
@mixin fmx-8 {
|
||||
margin-inline: map.get($fluid-margin-levels, '8');
|
||||
margin-left: map.get($fluid-margin-levels, '8');
|
||||
margin-right: map.get($fluid-margin-levels, '8');
|
||||
}
|
||||
@mixin fmy-8 {
|
||||
margin-block: map.get($fluid-margin-levels, '8');
|
||||
margin-top: map.get($fluid-margin-levels, '8');
|
||||
margin-bottom: map.get($fluid-margin-levels, '8');
|
||||
}
|
||||
@mixin fmt-8 {
|
||||
margin-top: map.get($fluid-margin-levels, '8');
|
||||
|
|
@ -382,10 +416,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '8') !important;
|
||||
}
|
||||
@mixin \!fmx-8 {
|
||||
margin-inline: map.get($fluid-margin-levels, '8') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '8') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '8') !important;
|
||||
}
|
||||
@mixin \!fmy-8 {
|
||||
margin-block: map.get($fluid-margin-levels, '8') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '8') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '8') !important;
|
||||
}
|
||||
@mixin \!fmt-8 {
|
||||
margin-top: map.get($fluid-margin-levels, '8') !important;
|
||||
|
|
@ -404,10 +440,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '9');
|
||||
}
|
||||
@mixin fmx-9 {
|
||||
margin-inline: map.get($fluid-margin-levels, '9');
|
||||
margin-left: map.get($fluid-margin-levels, '9');
|
||||
margin-right: map.get($fluid-margin-levels, '9');
|
||||
}
|
||||
@mixin fmy-9 {
|
||||
margin-block: map.get($fluid-margin-levels, '9');
|
||||
margin-top: map.get($fluid-margin-levels, '9');
|
||||
margin-bottom: map.get($fluid-margin-levels, '9');
|
||||
}
|
||||
@mixin fmt-9 {
|
||||
margin-top: map.get($fluid-margin-levels, '9');
|
||||
|
|
@ -425,10 +463,12 @@ $fluid-margin-levels: (
|
|||
margin: map.get($fluid-margin-levels, '9') !important;
|
||||
}
|
||||
@mixin \!fmx-9 {
|
||||
margin-inline: map.get($fluid-margin-levels, '9') !important;
|
||||
margin-left: map.get($fluid-margin-levels, '9') !important;
|
||||
margin-right: map.get($fluid-margin-levels, '9') !important;
|
||||
}
|
||||
@mixin \!fmy-9 {
|
||||
margin-block: map.get($fluid-margin-levels, '9') !important;
|
||||
margin-top: map.get($fluid-margin-levels, '9') !important;
|
||||
margin-bottom: map.get($fluid-margin-levels, '9') !important;
|
||||
}
|
||||
@mixin \!fmt-9 {
|
||||
margin-top: map.get($fluid-margin-levels, '9') !important;
|
||||
|
|
@ -447,17 +487,21 @@ $fluid-margin-levels: (
|
|||
margin: auto;
|
||||
}
|
||||
@mixin fmx-auto {
|
||||
margin-inline: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@mixin fmy-auto {
|
||||
margin-block: auto;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
@mixin \!fm-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
@mixin \!fmx-auto {
|
||||
margin-inline: auto !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
@mixin \!fmy-auto {
|
||||
margin-block: auto !important;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue