@@ -50,6 +54,10 @@ export default {
props: {
disabled: Boolean,
inline: Boolean,
+ name: {
+ type: String,
+ default: 'no-name',
+ },
errorMessage: {
type: String,
default: '',
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.stories.js b/src/components/DsfrSearchBar/DsfrSearchBar.stories.js
index 0985381a..50f46a19 100644
--- a/src/components/DsfrSearchBar/DsfrSearchBar.stories.js
+++ b/src/components/DsfrSearchBar/DsfrSearchBar.stories.js
@@ -2,7 +2,7 @@ import DsfrSearchBar from './DsfrSearchBar.vue'
export default {
components: DsfrSearchBar,
- title: 'Éléments/Barre de recherche - Search bar',
+ title: 'Composants/Barre de recherche - DsfrSearchBar',
argTypes: {
label: { control: 'text' },
dark: {
diff --git a/src/components/DsfrSelect/DsfrSelect.stories.js b/src/components/DsfrSelect/DsfrSelect.stories.js
index d3838078..33f3af22 100644
--- a/src/components/DsfrSelect/DsfrSelect.stories.js
+++ b/src/components/DsfrSelect/DsfrSelect.stories.js
@@ -2,7 +2,7 @@ import DsfrSelect from './DsfrSelect.vue'
export default {
component: DsfrSelect,
- title: 'Basic/Liste déroulante - Select',
+ title: 'Composants/Liste déroulante - DsfrSelect',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrTable/DsfrTable.stories.js b/src/components/DsfrTable/DsfrTable.stories.js
index 28634aee..e9185b0b 100644
--- a/src/components/DsfrTable/DsfrTable.stories.js
+++ b/src/components/DsfrTable/DsfrTable.stories.js
@@ -7,7 +7,7 @@ app.component('DsfrTag', DsfrTag)
export default {
components: DsfrTable,
- title: 'Éléments/Table',
+ title: 'Composants/Table - DsfrTable',
argTypes: {
title: { control: 'text' },
dark: {
diff --git a/src/components/DsfrTabs/DsfrTabContent.stories.js b/src/components/DsfrTabs/DsfrTabContent.stories.js
index 554b45a6..efb8e9dd 100644
--- a/src/components/DsfrTabs/DsfrTabContent.stories.js
+++ b/src/components/DsfrTabs/DsfrTabContent.stories.js
@@ -2,7 +2,7 @@ import DsfrTabContent from './DsfrTabContent.vue'
export default {
component: DsfrTabContent,
- title: 'Éléments/Onglets - Tabs/Contenu',
+ title: 'Composants/Onglets - DsfrTabs',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrTabs/DsfrTabItem.stories.js b/src/components/DsfrTabs/DsfrTabItem.stories.js
index 3e93f405..2dfda1a6 100644
--- a/src/components/DsfrTabs/DsfrTabItem.stories.js
+++ b/src/components/DsfrTabs/DsfrTabItem.stories.js
@@ -2,7 +2,7 @@ import DsfrTabItem from './DsfrTabItem.vue'
export default {
component: DsfrTabItem,
- title: 'Éléments/Onglets - Tabs/Titre',
+ title: 'Composants/Onglets - DsfrTabs',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrTabs/DsfrTabItem.vue b/src/components/DsfrTabs/DsfrTabItem.vue
index 3d7bcdab..328f71bc 100644
--- a/src/components/DsfrTabs/DsfrTabItem.vue
+++ b/src/components/DsfrTabs/DsfrTabItem.vue
@@ -15,6 +15,10 @@
@click="$emit('click', $event)"
@keydown.right="$emit('next')"
@keydown.left="$emit('previous')"
+ @keydown.down="$emit('next')"
+ @keydown.up="$emit('previous')"
+ @keydown.home="$emit('first')"
+ @keydown.end="$emit('last')"
>
{
+ it('should mount Tabs', () => {
+ mount(DsfrTabs, {
+ global: {
+ components: {
+ VIcon,
+ },
+ },
+ props: {
+ tabListName: 'Liste d’onglets',
+ tabTitles: [
+ { title: 'Titre 1', icon: 'ri-checkbox-circle-line' },
+ { title: 'Titre 2', icon: 'ri-checkbox-circle-line' },
+ { title: 'Titre 3', icon: 'ri-checkbox-circle-line' },
+ { title: 'Titre 4', icon: 'ri-checkbox-circle-line' },
+ ],
+ tabContents: [
+ 'Contenu Tab1',
+ 'Contenu Tab2',
+ 'Contenu Tab3',
+ 'Contenu Tab4',
+ ],
+ },
+ })
+
+ cy.tab()
+
+ cy.get('li:first-child button')
+ .should('have.focus')
+ .type('{rightArrow}')
+ .should('not.have.focus')
+
+ cy.get('li:nth-child(2) button')
+ .should('have.focus')
+ .type('{end}')
+ .should('not.have.focus')
+
+ cy.get('li:last-child button')
+ .should('have.focus')
+ .type('{home}')
+ .should('not.have.focus')
+
+ cy.get('li:first-child button')
+ .should('have.focus')
+ .type('{leftArrow}')
+ .should('not.have.focus')
+
+ cy.get('li:last-child button')
+ .should('have.focus')
+ .type('{rightArrow}')
+ .should('not.have.focus')
+
+ cy.get('li:first-child button')
+ .should('have.focus')
+ })
+})
diff --git a/src/components/DsfrTabs/DsfrTabs.spec.js b/src/components/DsfrTabs/DsfrTabs.spec.js
index da13ad9e..bda2659b 100644
--- a/src/components/DsfrTabs/DsfrTabs.spec.js
+++ b/src/components/DsfrTabs/DsfrTabs.spec.js
@@ -23,7 +23,7 @@ describe('DsfrTabs', () => {
const tabContents = ['Contenu1', 'Contenu2', 'Contenu3', 'Contenu4']
// When
- const { getByText, getByTestId, getAllByRole } = render(DsfrTabs, {
+ const { getByText, getByTestId, getAllByRole, getByRole } = render(DsfrTabs, {
global: {
components: {
VIcon,
@@ -36,17 +36,92 @@ describe('DsfrTabs', () => {
},
})
+ const tabListEl = getByRole('tablist')
+
const firstTabEl = getByTestId('test-tab1')
const secondTabEl = getByText(title2)
const thirdTabEl = getByText(title3)
const tabTitleEls = getAllByRole('presentation')
+ const tabItemEls = getAllByRole('tab')
+
+ let i = 0
+ for (const tabItemEl of tabItemEls) {
+ if (i === 0) {
+ expect(tabItemEl).toHaveAttribute('aria-selected', 'true')
+ } else {
+ expect(tabItemEl).toHaveAttribute('aria-selected', 'false')
+ }
+ expect(tabItemEl).toHaveClass('fr-tabs__tab')
+ i++
+ }
+
await fireEvent.click(secondTabEl)
await fireEvent.click(thirdTabEl)
await fireEvent.click(secondTabEl)
+ i = 0
+ for (const tabItemEl of tabItemEls) {
+ if (i === 1) {
+ expect(tabItemEl).toHaveAttribute('aria-selected', 'true')
+ } else {
+ expect(tabItemEl).toHaveAttribute('aria-selected', 'false')
+ }
+ i++
+ }
+
// Then
expect(tabTitleEls[0]).toContainElement(firstTabEl)
expect(tabTitleEls[0].textContent).toContain(title1)
expect(tabTitleEls[0].textContent).toContain(title1)
+ expect(tabListEl).toHaveClass('fr-tabs__list')
+ expect(tabItemEls).toHaveLength(4)
+ })
+
+ it('should render tabs with proper aria-* attributes', async () => {
+ // Given
+ const tabListName = 'Liste d’onglet'
+ const title1 = 'Titre 1'
+ const title2 = 'Titre 2'
+ const title3 = 'Titre 3'
+
+ const tabTitles = [
+ { title: title1 },
+ { title: title2 },
+ { title: title3 },
+ { title: 'Titre 4' },
+ ]
+
+ const tabContents = ['Contenu1', 'Contenu2', 'Contenu3', 'Contenu4']
+
+ // When
+ const { container, getAllByRole, getByRole } = render(DsfrTabs, {
+ global: {
+ components: {
+ VIcon,
+ },
+ },
+ props: {
+ tabListName,
+ tabTitles,
+ tabContents,
+ },
+ })
+
+ getByRole('tablist')
+
+ const tabItemEls = getAllByRole('tab')
+ const panelEls = container.querySelectorAll('.fr-tabs__panel')
+
+ // Then
+ expect(tabItemEls).toHaveLength(tabTitles.length)
+ expect(panelEls).toHaveLength(tabTitles.length)
+ let i = 0
+ for (const tabPanelEl of panelEls) {
+ expect(tabPanelEl).toHaveAttribute('role', 'tabpanel')
+ expect(tabItemEls[i]).toHaveAttribute('role', 'tab')
+ expect(tabPanelEl).toHaveAttribute('aria-labelledby', tabItemEls[i].id)
+ expect(tabItemEls[i]).toHaveAttribute('aria-controls', tabPanelEl.id)
+ i++
+ }
})
})
diff --git a/src/components/DsfrTabs/DsfrTabs.stories.js b/src/components/DsfrTabs/DsfrTabs.stories.js
index d7d0d8c8..1aa0682b 100644
--- a/src/components/DsfrTabs/DsfrTabs.stories.js
+++ b/src/components/DsfrTabs/DsfrTabs.stories.js
@@ -10,7 +10,7 @@ OhVueIcon.add(RiCheckboxCircleLine)
export default {
component: DsfrTabs,
- title: 'Éléments/Onglets - Tabs/Onglets',
+ title: 'Composants/Onglets - DsfrTabs',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrTabs/DsfrTabs.vue b/src/components/DsfrTabs/DsfrTabs.vue
index bf6bc89b..b1bac264 100644
--- a/src/components/DsfrTabs/DsfrTabs.vue
+++ b/src/components/DsfrTabs/DsfrTabs.vue
@@ -15,6 +15,8 @@
@click="selectIndex(index)"
@next="selectNext()"
@previous="selectPrevious()"
+ @first="selectFirst()"
+ @last="selectLast()"
>
{{ tabTitle.title }}
@@ -101,6 +103,12 @@ export default {
const newIndex = this.selectedIndex === this.tabTitles.length - 1 ? 0 : this.selectedIndex + 1
this.selectIndex(newIndex)
},
+ async selectFirst () {
+ this.selectIndex(0)
+ },
+ async selectLast () {
+ this.selectIndex(this.tabTitles.length - 1)
+ },
},
}
diff --git a/src/components/DsfrTag/DsfrTags.stories.js b/src/components/DsfrTag/DsfrTags.stories.js
index d04717a9..7905cd27 100644
--- a/src/components/DsfrTag/DsfrTags.stories.js
+++ b/src/components/DsfrTag/DsfrTags.stories.js
@@ -14,7 +14,7 @@ VIcon.add(
export default {
component: DsfrTags,
- title: 'Basic/Étiquettes - Tags',
+ title: 'Composants/Étiquettes - DsfrTags',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrTile/DsfrTile.spec.js b/src/components/DsfrTile/DsfrTile.spec.js
index 69b0bedc..df555ed4 100644
--- a/src/components/DsfrTile/DsfrTile.spec.js
+++ b/src/components/DsfrTile/DsfrTile.spec.js
@@ -1,14 +1,29 @@
import { render } from '@testing-library/vue'
+import { createRouter, createWebHistory } from 'vue-router'
import DsfrTile from './DsfrTile.vue'
+const router = createRouter({
+ history: createWebHistory('/'),
+ routes: [
+ {
+ path: '/',
+ name: 'One',
+ component: { template: '' },
+ },
+ ],
+})
+
describe('DsfrTile', () => {
- it('should display a tile', () => {
+ it('should display a tile', async () => {
const title = 'Titre de la tuile'
const imgSrc = 'https://placekitten.com/80/80'
const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
const { getByText } = render(DsfrTile, {
+ global: {
+ plugins: [router],
+ },
props: {
title,
imgSrc,
@@ -17,6 +32,8 @@ describe('DsfrTile', () => {
},
})
+ await router.isReady()
+
const titleEl = getByText(title)
const descriptionEl = getByText(description)
@@ -24,13 +41,16 @@ describe('DsfrTile', () => {
expect(descriptionEl).toHaveClass('fr-tile__desc')
})
- it('should display a tile', () => {
+ it('should display a tile', async () => {
const title = 'Titre de la tuile'
const imgSrc = 'https://placekitten.com/80/80'
const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
const horizontal = true
const { getByText } = render(DsfrTile, {
+ global: {
+ plugins: [router],
+ },
props: {
title,
imgSrc,
@@ -40,6 +60,8 @@ describe('DsfrTile', () => {
},
})
+ await router.isReady()
+
const titleEl = getByText(title)
const descriptionEl = getByText(description)
diff --git a/src/components/DsfrTile/DsfrTile.stories.js b/src/components/DsfrTile/DsfrTile.stories.js
index 60bb6868..d39db321 100644
--- a/src/components/DsfrTile/DsfrTile.stories.js
+++ b/src/components/DsfrTile/DsfrTile.stories.js
@@ -2,7 +2,7 @@ import DsfrTile from './DsfrTile.vue'
export default {
components: DsfrTile,
- title: 'Éléments/Tuile - Tile',
+ title: 'Composants/Tuile - DsfrTile',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrTile/DsfrTiles.spec.js b/src/components/DsfrTile/DsfrTiles.spec.js
index d875b74e..df555ed4 100644
--- a/src/components/DsfrTile/DsfrTiles.spec.js
+++ b/src/components/DsfrTile/DsfrTiles.spec.js
@@ -1,49 +1,71 @@
-import { render } from '@testing-library/vue'
-
-import DsfrTile from './DsfrTile.vue'
-
-describe('DsfrTile', () => {
- it('should display a tile', () => {
- const title = 'Titre de la tuile'
- const imgSrc = 'https://placekitten.com/80/80'
- const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
-
- const { getByText } = render(DsfrTile, {
- props: {
- title,
- imgSrc,
- description,
- to: 'https://placekitten.com/80/80',
- },
- })
-
- const titleEl = getByText(title)
- const descriptionEl = getByText(description)
-
- expect(titleEl.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
- expect(descriptionEl).toHaveClass('fr-tile__desc')
- })
-
- it('should display a tile', () => {
- const title = 'Titre de la tuile'
- const imgSrc = 'https://placekitten.com/80/80'
- const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
- const horizontal = true
-
- const { getByText } = render(DsfrTile, {
- props: {
- title,
- imgSrc,
- description,
- horizontal,
- to: 'https://placekitten.com/80/80',
- },
- })
-
- const titleEl = getByText(title)
- const descriptionEl = getByText(description)
-
- expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
- expect(descriptionEl).toHaveClass('fr-tile__desc')
+import { render } from '@testing-library/vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import DsfrTile from './DsfrTile.vue'
+
+const router = createRouter({
+ history: createWebHistory('/'),
+ routes: [
+ {
+ path: '/',
+ name: 'One',
+ component: { template: '' },
+ },
+ ],
+})
+
+describe('DsfrTile', () => {
+ it('should display a tile', async () => {
+ const title = 'Titre de la tuile'
+ const imgSrc = 'https://placekitten.com/80/80'
+ const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+
+ const { getByText } = render(DsfrTile, {
+ global: {
+ plugins: [router],
+ },
+ props: {
+ title,
+ imgSrc,
+ description,
+ to: 'https://placekitten.com/80/80',
+ },
+ })
+
+ await router.isReady()
+
+ const titleEl = getByText(title)
+ const descriptionEl = getByText(description)
+
+ expect(titleEl.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
+ expect(descriptionEl).toHaveClass('fr-tile__desc')
+ })
+
+ it('should display a tile', async () => {
+ const title = 'Titre de la tuile'
+ const imgSrc = 'https://placekitten.com/80/80'
+ const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+ const horizontal = true
+
+ const { getByText } = render(DsfrTile, {
+ global: {
+ plugins: [router],
+ },
+ props: {
+ title,
+ imgSrc,
+ description,
+ horizontal,
+ to: 'https://placekitten.com/80/80',
+ },
+ })
+
+ await router.isReady()
+
+ const titleEl = getByText(title)
+ const descriptionEl = getByText(description)
+
+ expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
+ expect(descriptionEl).toHaveClass('fr-tile__desc')
})
})
diff --git a/src/components/DsfrTile/DsfrTiles.stories.js b/src/components/DsfrTile/DsfrTiles.stories.js
index 85635358..a626b05d 100644
--- a/src/components/DsfrTile/DsfrTiles.stories.js
+++ b/src/components/DsfrTile/DsfrTiles.stories.js
@@ -2,7 +2,7 @@ import DsfrTiles from './DsfrTiles.vue'
export default {
components: DsfrTiles,
- title: 'Éléments/Jeu de Tuiles - Tiles',
+ title: 'Composants/Jeu de Tuiles - DsfrTiles',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.js b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.js
index 168d1600..c3054e30 100644
--- a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.js
+++ b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.js
@@ -2,7 +2,7 @@ import DsfrToggleSwitch from './DsfrToggleSwitch.vue'
export default {
component: DsfrToggleSwitch,
- title: 'Basic/Interrupteur - Toggle switch',
+ title: 'Composants/Interrupteur - DsfrToggleSwitch',
argTypes: {
dark: {
control: 'boolean',
diff --git a/src/components/index.js b/src/components/index.js
index ab3daa83..d50cb011 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -15,6 +15,13 @@ export { default as DsfrFooter } from './DsfrFooter/DsfrFooter.vue'
export { default as DsfrFooterPartners } from './DsfrFooter/DsfrFooterPartners.vue'
export { default as DsfrLogo } from './DsfrLogo/DsfrLogo.vue'
export { default as DsfrModal } from './DsfrModal/DsfrModal.vue'
+export { default as DsfrNavigation } from './DsfrNavigation/DsfrNavigation.vue'
+export { default as DsfrNavigationItem } from './DsfrNavigation/DsfrNavigationItem.vue'
+export { default as DsfrNavigationMegaMenu } from './DsfrNavigation/DsfrNavigationMegaMenu.vue'
+export { default as DsfrNavigationMegaMenuCategory } from './DsfrNavigation/DsfrNavigationMegaMenuCategory.vue'
+export { default as DsfrNavigationMenu } from './DsfrNavigation/DsfrNavigationMenu.vue'
+export { default as DsfrNavigationMenuItem } from './DsfrNavigation/DsfrNavigationMenuItem.vue'
+export { default as DsfrNavigationMenuLink } from './DsfrNavigation/DsfrNavigationMenuLink.vue'
export { default as DsfrPicture } from './DsfrMedia/DsfrPicture.vue'
export { default as DsfrRadioButton } from './DsfrRadioButton/DsfrRadioButton.vue'
export { default as DsfrRadioButtonSet } from './DsfrRadioButton/DsfrRadioButtonSet.vue'
diff --git a/src/icons.js b/src/icons.js
index 019d755d..f1287f71 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -2,6 +2,15 @@ import VIcon from 'oh-vue-icons/dist/v3/icon.es'
import {
RiAlertFill,
RiAlertLine,
+ RiArrowUpLine,
+ RiArrowRightLine,
+ RiArrowDownLine,
+ RiArrowDropDownLine,
+ RiArrowLeftLine,
+ RiArrowUpSLine,
+ RiArrowRightSLine,
+ RiArrowDownSLine,
+ RiArrowLeftSLine,
RiChat1Line,
RiDoubleQuotesL,
RiQuestionFill,
@@ -18,15 +27,6 @@ import {
RiCloseCircleLine,
RiMenuFill,
RiMenu2Fill,
- RiArrowUpLine,
- RiArrowRightLine,
- RiArrowDownLine,
- RiArrowDropDownLine,
- RiArrowLeftLine,
- RiArrowUpSLine,
- RiArrowRightSLine,
- RiArrowDownSLine,
- RiArrowLeftSLine,
RiUserFill,
RiUserLine,
RiAccountCircleFill,
@@ -78,6 +78,15 @@ import {
VIcon.add(
RiAlertFill,
RiAlertLine,
+ RiArrowUpLine,
+ RiArrowRightLine,
+ RiArrowDownLine,
+ RiArrowDropDownLine,
+ RiArrowLeftLine,
+ RiArrowUpSLine,
+ RiArrowRightSLine,
+ RiArrowDownSLine,
+ RiArrowLeftSLine,
RiChat1Line,
RiDoubleQuotesL,
RiQuestionFill,
@@ -94,15 +103,6 @@ VIcon.add(
RiCloseCircleLine,
RiMenuFill,
RiMenu2Fill,
- RiArrowUpLine,
- RiArrowRightLine,
- RiArrowDownLine,
- RiArrowDropDownLine,
- RiArrowLeftLine,
- RiArrowUpSLine,
- RiArrowRightSLine,
- RiArrowDownSLine,
- RiArrowLeftSLine,
RiUserFill,
RiUserLine,
RiAccountCircleFill,
diff --git a/src/stories/docs/intro.stories.mdx b/src/stories/docs/01-intro.stories.mdx
similarity index 95%
rename from src/stories/docs/intro.stories.mdx
rename to src/stories/docs/01-intro.stories.mdx
index b6e178b8..b91cd76f 100644
--- a/src/stories/docs/intro.stories.mdx
+++ b/src/stories/docs/01-intro.stories.mdx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/addon-docs';
import GithubIcon from './github-fill.svg'
import MailIcon from './mail-fill.svg'
-
+
# Qu'est-ce que VueDsfr
@@ -45,10 +45,12 @@ Ce projet de bibliothèque de composants
# Quels sont les choix techniques retenus
+La bibliothèque est faite avec [Vue 3](https://v3.vuejs.org/) et [Vue-router 4](https://next.router.vuejs.org/).
+
Le JavaScript est linté avec [ESLint](https://eslint.org/) et formatté selon [StandardJS](https://standardjs.org)
avec une seule modification : les virgules
doivent être ajoutées pour tout ce qui est en multiligne (`"comma-dangle": ["error", "always-multiline"]`
-cf. [Documentation ESLint]((https://eslint.org/docs/rules/comma-dangle#options)))
+cf. [Documentation ESLint]((https://eslint.org/docs/rules/comma-dangle#options))).
Le serveur de développement est celui de [Storybook](https://storybook.js.org/), toute la documentation est faite avec
Storybook, et le site pour tester les composants est le storybook lui-même.
diff --git a/src/stories/docs/guide.stories.mdx b/src/stories/docs/02-guide.stories.mdx
similarity index 83%
rename from src/stories/docs/guide.stories.mdx
rename to src/stories/docs/02-guide.stories.mdx
index fe7662ae..626dd7c5 100644
--- a/src/stories/docs/guide.stories.mdx
+++ b/src/stories/docs/02-guide.stories.mdx
@@ -1,6 +1,6 @@
import { Meta } from '@storybook/addon-docs';
-
+
# Comment débuter
@@ -9,6 +9,11 @@ Ceci est le guide d̛’utilisation de la bibliothèque. Si vous cherchez à con
## Utiliser la bibliothèque en tant que plugin
+| Notes : |
+|:---------------------------|
+| Pour utiliser cette bibliothèque, il vous faudra **[Vue 3](https://v3.vuejs.org/)** et **[Vue-Router 4](https://next.router.vuejs.org/)**. Par conséquent, si vous utilisez Nuxt, il vous faut **[Nuxt 3](https://v3.nuxtjs.org/)**. |
+| Il est fortement conseillé d’utiliser **[Vite](https://vitejs.dev)** plutôt que Vue-CLI. |
+
### Installer le plugin
Afin d'installer le plugin taper cette commande dans votre console au sein de votre répertoire de projet :
@@ -17,7 +22,10 @@ Afin d'installer le plugin taper cette commande dans votre console au sein de vo
npm install @laruiss/vue-dsfr@beta
```
-*N.B. : Bien indiquer le `@beta` pour avoir la dernière version.
+| Note : |
+|:---------------------------|
+| Bien indiquer le **`@beta`** pour avoir la dernière version. |
+
### Ajouter le plugin
@@ -31,9 +39,7 @@ const app = createApp(App)
.mount('#app')
```
-Ajouter le plugin :
-
-Exemple :
+ajouter les lignes commentées :
```js
import { createApp } from 'vue'
diff --git a/src/stories/docs/dev.stories.mdx b/src/stories/docs/03-dev.stories.mdx
similarity index 96%
rename from src/stories/docs/dev.stories.mdx
rename to src/stories/docs/03-dev.stories.mdx
index 22271b5a..8d1efa62 100644
--- a/src/stories/docs/dev.stories.mdx
+++ b/src/stories/docs/03-dev.stories.mdx
@@ -1,6 +1,6 @@
import { Meta } from '@storybook/addon-docs';
-
+
# Comment contribuer
diff --git a/src/stories/fondamentaux/class-utilitaires.stories.mdx b/src/stories/fondamentaux/class-utilitaires.stories.mdx
new file mode 100644
index 00000000..8180189f
--- /dev/null
+++ b/src/stories/fondamentaux/class-utilitaires.stories.mdx
@@ -0,0 +1,3007 @@
+
+
+# Les classes utilitaires
+
+```css
+.fr-m-n8v, .fr-m-n4w {
+ margin: -2rem !important;
+}
+
+.fr-ml-n8v, .fr-ml-n4w, .fr-mx-n8v, .fr-mx-n4w {
+ margin-left: -2rem !important;
+}
+
+.fr-mr-n8v, .fr-mr-n4w, .fr-mx-n8v, .fr-mx-n4w {
+ margin-right: -2rem !important;
+}
+
+.fr-mt-n8v, .fr-mt-n4w, .fr-my-n8v, .fr-my-n4w {
+ margin-top: -2rem !important;
+}
+
+.fr-mb-n8v, .fr-mb-n4w, .fr-my-n8v, .fr-my-n4w {
+ margin-bottom: -2rem !important;
+}
+
+.fr-m-n7v {
+ margin: -1.75rem !important;
+}
+
+.fr-ml-n7v, .fr-mx-n7v {
+ margin-left: -1.75rem !important;
+}
+
+.fr-mr-n7v, .fr-mx-n7v {
+ margin-right: -1.75rem !important;
+}
+
+.fr-mt-n7v, .fr-my-n7v {
+ margin-top: -1.75rem !important;
+}
+
+.fr-mb-n7v, .fr-my-n7v {
+ margin-bottom: -1.75rem !important;
+}
+
+.fr-m-n6v, .fr-m-n3w {
+ margin: -1.5rem !important;
+}
+
+.fr-ml-n6v, .fr-ml-n3w, .fr-mx-n6v, .fr-mx-n3w {
+ margin-left: -1.5rem !important;
+}
+
+.fr-mr-n6v, .fr-mr-n3w, .fr-mx-n6v, .fr-mx-n3w {
+ margin-right: -1.5rem !important;
+}
+
+.fr-mt-n6v, .fr-mt-n3w, .fr-my-n6v, .fr-my-n3w {
+ margin-top: -1.5rem !important;
+}
+
+.fr-mb-n6v, .fr-mb-n3w, .fr-my-n6v, .fr-my-n3w {
+ margin-bottom: -1.5rem !important;
+}
+
+.fr-m-n5v {
+ margin: -1.25rem !important;
+}
+
+.fr-ml-n5v, .fr-mx-n5v {
+ margin-left: -1.25rem !important;
+}
+
+.fr-mr-n5v, .fr-mx-n5v {
+ margin-right: -1.25rem !important;
+}
+
+.fr-mt-n5v, .fr-my-n5v {
+ margin-top: -1.25rem !important;
+}
+
+.fr-mb-n5v, .fr-my-n5v {
+ margin-bottom: -1.25rem !important;
+}
+
+.fr-m-n4v, .fr-m-n2w {
+ margin: -1rem !important;
+}
+
+.fr-ml-n4v, .fr-ml-n2w, .fr-mx-n4v, .fr-mx-n2w {
+ margin-left: -1rem !important;
+}
+
+.fr-mr-n4v, .fr-mr-n2w, .fr-mx-n4v, .fr-mx-n2w {
+ margin-right: -1rem !important;
+}
+
+.fr-mt-n4v, .fr-mt-n2w, .fr-my-n4v, .fr-my-n2w {
+ margin-top: -1rem !important;
+}
+
+.fr-mb-n4v, .fr-mb-n2w, .fr-my-n4v, .fr-my-n2w {
+ margin-bottom: -1rem !important;
+}
+
+.fr-m-n3v {
+ margin: -0.75rem !important;
+}
+
+.fr-ml-n3v, .fr-mx-n3v {
+ margin-left: -0.75rem !important;
+}
+
+.fr-mr-n3v, .fr-mx-n3v {
+ margin-right: -0.75rem !important;
+}
+
+.fr-mt-n3v, .fr-my-n3v {
+ margin-top: -0.75rem !important;
+}
+
+.fr-mb-n3v, .fr-my-n3v {
+ margin-bottom: -0.75rem !important;
+}
+
+.fr-m-n2v, .fr-m-n1w {
+ margin: -0.5rem !important;
+}
+
+.fr-ml-n2v, .fr-ml-n1w, .fr-mx-n2v, .fr-mx-n1w {
+ margin-left: -0.5rem !important;
+}
+
+.fr-mr-n2v, .fr-mr-n1w, .fr-mx-n2v, .fr-mx-n1w {
+ margin-right: -0.5rem !important;
+}
+
+.fr-mt-n2v, .fr-mt-n1w, .fr-my-n2v, .fr-my-n1w {
+ margin-top: -0.5rem !important;
+}
+
+.fr-mb-n2v, .fr-mb-n1w, .fr-my-n2v, .fr-my-n1w {
+ margin-bottom: -0.5rem !important;
+}
+
+.fr-m-n1v {
+ margin: -0.25rem !important;
+}
+
+.fr-ml-n1v, .fr-mx-n1v {
+ margin-left: -0.25rem !important;
+}
+
+.fr-mr-n1v, .fr-mx-n1v {
+ margin-right: -0.25rem !important;
+}
+
+.fr-mt-n1v, .fr-my-n1v {
+ margin-top: -0.25rem !important;
+}
+
+.fr-mb-n1v, .fr-my-n1v {
+ margin-bottom: -0.25rem !important;
+}
+
+.fr-m-0 {
+ margin: 0 !important;
+}
+
+.fr-ml-0, .fr-mx-0 {
+ margin-left: 0 !important;
+}
+
+.fr-mr-0, .fr-mx-0 {
+ margin-right: 0 !important;
+}
+
+.fr-mt-0, .fr-my-0 {
+ margin-top: 0 !important;
+}
+
+.fr-mb-0, .fr-my-0 {
+ margin-bottom: 0 !important;
+}
+
+.fr-m-1v {
+ margin: 0.25rem !important;
+}
+
+.fr-ml-1v, .fr-mx-1v {
+ margin-left: 0.25rem !important;
+}
+
+.fr-mr-1v, .fr-mx-1v {
+ margin-right: 0.25rem !important;
+}
+
+.fr-mt-1v, .fr-my-1v {
+ margin-top: 0.25rem !important;
+}
+
+.fr-mb-1v, .fr-my-1v {
+ margin-bottom: 0.25rem !important;
+}
+
+.fr-m-2v, .fr-m-1w {
+ margin: 0.5rem !important;
+}
+
+.fr-ml-2v, .fr-ml-1w, .fr-mx-2v, .fr-mx-1w {
+ margin-left: 0.5rem !important;
+}
+
+.fr-mr-2v, .fr-mr-1w, .fr-mx-2v, .fr-mx-1w {
+ margin-right: 0.5rem !important;
+}
+
+.fr-mt-2v, .fr-mt-1w, .fr-my-2v, .fr-my-1w {
+ margin-top: 0.5rem !important;
+}
+
+.fr-mb-2v, .fr-mb-1w, .fr-my-2v, .fr-my-1w {
+ margin-bottom: 0.5rem !important;
+}
+
+.fr-m-3v {
+ margin: 0.75rem !important;
+}
+
+.fr-ml-3v, .fr-mx-3v {
+ margin-left: 0.75rem !important;
+}
+
+.fr-mr-3v, .fr-mx-3v {
+ margin-right: 0.75rem !important;
+}
+
+.fr-mt-3v, .fr-my-3v {
+ margin-top: 0.75rem !important;
+}
+
+.fr-mb-3v, .fr-my-3v {
+ margin-bottom: 0.75rem !important;
+}
+
+.fr-m-4v, .fr-m-2w {
+ margin: 1rem !important;
+}
+
+.fr-ml-4v, .fr-ml-2w, .fr-mx-4v, .fr-mx-2w {
+ margin-left: 1rem !important;
+}
+
+.fr-mr-4v, .fr-mr-2w, .fr-mx-4v, .fr-mx-2w {
+ margin-right: 1rem !important;
+}
+
+.fr-mt-4v, .fr-mt-2w, .fr-my-4v, .fr-my-2w {
+ margin-top: 1rem !important;
+}
+
+.fr-mb-4v, .fr-mb-2w, .fr-my-4v, .fr-my-2w {
+ margin-bottom: 1rem !important;
+}
+
+.fr-m-5v {
+ margin: 1.25rem !important;
+}
+
+.fr-ml-5v, .fr-mx-5v {
+ margin-left: 1.25rem !important;
+}
+
+.fr-mr-5v, .fr-mx-5v {
+ margin-right: 1.25rem !important;
+}
+
+.fr-mt-5v, .fr-my-5v {
+ margin-top: 1.25rem !important;
+}
+
+.fr-mb-5v, .fr-my-5v {
+ margin-bottom: 1.25rem !important;
+}
+
+.fr-m-6v, .fr-m-3w {
+ margin: 1.5rem !important;
+}
+
+.fr-ml-6v, .fr-ml-3w, .fr-mx-6v, .fr-mx-3w {
+ margin-left: 1.5rem !important;
+}
+
+.fr-mr-6v, .fr-mr-3w, .fr-mx-6v, .fr-mx-3w {
+ margin-right: 1.5rem !important;
+}
+
+.fr-mt-6v, .fr-mt-3w, .fr-my-6v, .fr-my-3w {
+ margin-top: 1.5rem !important;
+}
+
+.fr-mb-6v, .fr-mb-3w, .fr-my-6v, .fr-my-3w {
+ margin-bottom: 1.5rem !important;
+}
+
+.fr-m-7v {
+ margin: 1.75rem !important;
+}
+
+.fr-ml-7v, .fr-mx-7v {
+ margin-left: 1.75rem !important;
+}
+
+.fr-mr-7v, .fr-mx-7v {
+ margin-right: 1.75rem !important;
+}
+
+.fr-mt-7v, .fr-my-7v {
+ margin-top: 1.75rem !important;
+}
+
+.fr-mb-7v, .fr-my-7v {
+ margin-bottom: 1.75rem !important;
+}
+
+.fr-m-8v, .fr-m-4w {
+ margin: 2rem !important;
+}
+
+.fr-ml-8v, .fr-ml-4w, .fr-mx-8v, .fr-mx-4w {
+ margin-left: 2rem !important;
+}
+
+.fr-mr-8v, .fr-mr-4w, .fr-mx-8v, .fr-mx-4w {
+ margin-right: 2rem !important;
+}
+
+.fr-mt-8v, .fr-mt-4w, .fr-my-8v, .fr-my-4w {
+ margin-top: 2rem !important;
+}
+
+.fr-mb-8v, .fr-mb-4w, .fr-my-8v, .fr-my-4w {
+ margin-bottom: 2rem !important;
+}
+
+.fr-m-9v {
+ margin: 2.25rem !important;
+}
+
+.fr-ml-9v, .fr-mx-9v {
+ margin-left: 2.25rem !important;
+}
+
+.fr-mr-9v, .fr-mx-9v {
+ margin-right: 2.25rem !important;
+}
+
+.fr-mt-9v, .fr-my-9v {
+ margin-top: 2.25rem !important;
+}
+
+.fr-mb-9v, .fr-my-9v {
+ margin-bottom: 2.25rem !important;
+}
+
+.fr-m-10v, .fr-m-5w {
+ margin: 2.5rem !important;
+}
+
+.fr-ml-10v, .fr-ml-5w, .fr-mx-10v, .fr-mx-5w {
+ margin-left: 2.5rem !important;
+}
+
+.fr-mr-10v, .fr-mr-5w, .fr-mx-10v, .fr-mx-5w {
+ margin-right: 2.5rem !important;
+}
+
+.fr-mt-10v, .fr-mt-5w, .fr-my-10v, .fr-my-5w {
+ margin-top: 2.5rem !important;
+}
+
+.fr-mb-10v, .fr-mb-5w, .fr-my-10v, .fr-my-5w {
+ margin-bottom: 2.5rem !important;
+}
+
+.fr-m-11v {
+ margin: 2.75rem !important;
+}
+
+.fr-ml-11v, .fr-mx-11v {
+ margin-left: 2.75rem !important;
+}
+
+.fr-mr-11v, .fr-mx-11v {
+ margin-right: 2.75rem !important;
+}
+
+.fr-mt-11v, .fr-my-11v {
+ margin-top: 2.75rem !important;
+}
+
+.fr-mb-11v, .fr-my-11v {
+ margin-bottom: 2.75rem !important;
+}
+
+.fr-m-12v, .fr-m-6w {
+ margin: 3rem !important;
+}
+
+.fr-ml-12v, .fr-ml-6w, .fr-mx-12v, .fr-mx-6w {
+ margin-left: 3rem !important;
+}
+
+.fr-mr-12v, .fr-mr-6w, .fr-mx-12v, .fr-mx-6w {
+ margin-right: 3rem !important;
+}
+
+.fr-mt-12v, .fr-mt-6w, .fr-my-12v, .fr-my-6w {
+ margin-top: 3rem !important;
+}
+
+.fr-mb-12v, .fr-mb-6w, .fr-my-12v, .fr-my-6w {
+ margin-bottom: 3rem !important;
+}
+
+.fr-m-13v {
+ margin: 3.25rem !important;
+}
+
+.fr-ml-13v, .fr-mx-13v {
+ margin-left: 3.25rem !important;
+}
+
+.fr-mr-13v, .fr-mx-13v {
+ margin-right: 3.25rem !important;
+}
+
+.fr-mt-13v, .fr-my-13v {
+ margin-top: 3.25rem !important;
+}
+
+.fr-mb-13v, .fr-my-13v {
+ margin-bottom: 3.25rem !important;
+}
+
+.fr-m-14v, .fr-m-7w {
+ margin: 3.5rem !important;
+}
+
+.fr-ml-14v, .fr-ml-7w, .fr-mx-14v, .fr-mx-7w {
+ margin-left: 3.5rem !important;
+}
+
+.fr-mr-14v, .fr-mr-7w, .fr-mx-14v, .fr-mx-7w {
+ margin-right: 3.5rem !important;
+}
+
+.fr-mt-14v, .fr-mt-7w, .fr-my-14v, .fr-my-7w {
+ margin-top: 3.5rem !important;
+}
+
+.fr-mb-14v, .fr-mb-7w, .fr-my-14v, .fr-my-7w {
+ margin-bottom: 3.5rem !important;
+}
+
+.fr-m-15v {
+ margin: 3.75rem !important;
+}
+
+.fr-ml-15v, .fr-mx-15v {
+ margin-left: 3.75rem !important;
+}
+
+.fr-mr-15v, .fr-mx-15v {
+ margin-right: 3.75rem !important;
+}
+
+.fr-mt-15v, .fr-my-15v {
+ margin-top: 3.75rem !important;
+}
+
+.fr-mb-15v, .fr-my-15v {
+ margin-bottom: 3.75rem !important;
+}
+
+.fr-m-16v, .fr-m-8w {
+ margin: 4rem !important;
+}
+
+.fr-ml-16v, .fr-ml-8w, .fr-mx-16v, .fr-mx-8w {
+ margin-left: 4rem !important;
+}
+
+.fr-mr-16v, .fr-mr-8w, .fr-mx-16v, .fr-mx-8w {
+ margin-right: 4rem !important;
+}
+
+.fr-mt-16v, .fr-mt-8w, .fr-my-16v, .fr-my-8w {
+ margin-top: 4rem !important;
+}
+
+.fr-mb-16v, .fr-mb-8w, .fr-my-16v, .fr-my-8w {
+ margin-bottom: 4rem !important;
+}
+
+.fr-m-17v {
+ margin: 4.25rem !important;
+}
+
+.fr-ml-17v, .fr-mx-17v {
+ margin-left: 4.25rem !important;
+}
+
+.fr-mr-17v, .fr-mx-17v {
+ margin-right: 4.25rem !important;
+}
+
+.fr-mt-17v, .fr-my-17v {
+ margin-top: 4.25rem !important;
+}
+
+.fr-mb-17v, .fr-my-17v {
+ margin-bottom: 4.25rem !important;
+}
+
+.fr-m-18v, .fr-m-9w {
+ margin: 4.5rem !important;
+}
+
+.fr-ml-18v, .fr-ml-9w, .fr-mx-18v, .fr-mx-9w {
+ margin-left: 4.5rem !important;
+}
+
+.fr-mr-18v, .fr-mr-9w, .fr-mx-18v, .fr-mx-9w {
+ margin-right: 4.5rem !important;
+}
+
+.fr-mt-18v, .fr-mt-9w, .fr-my-18v, .fr-my-9w {
+ margin-top: 4.5rem !important;
+}
+
+.fr-mb-18v, .fr-mb-9w, .fr-my-18v, .fr-my-9w {
+ margin-bottom: 4.5rem !important;
+}
+
+.fr-m-19v {
+ margin: 4.75rem !important;
+}
+
+.fr-ml-19v, .fr-mx-19v {
+ margin-left: 4.75rem !important;
+}
+
+.fr-mr-19v, .fr-mx-19v {
+ margin-right: 4.75rem !important;
+}
+
+.fr-mt-19v, .fr-my-19v {
+ margin-top: 4.75rem !important;
+}
+
+.fr-mb-19v, .fr-my-19v {
+ margin-bottom: 4.75rem !important;
+}
+
+.fr-m-20v, .fr-m-10w {
+ margin: 5rem !important;
+}
+
+.fr-ml-20v, .fr-ml-10w, .fr-mx-20v, .fr-mx-10w {
+ margin-left: 5rem !important;
+}
+
+.fr-mr-20v, .fr-mr-10w, .fr-mx-20v, .fr-mx-10w {
+ margin-right: 5rem !important;
+}
+
+.fr-mt-20v, .fr-mt-10w, .fr-my-20v, .fr-my-10w {
+ margin-top: 5rem !important;
+}
+
+.fr-mb-20v, .fr-mb-10w, .fr-my-20v, .fr-my-10w {
+ margin-bottom: 5rem !important;
+}
+
+.fr-m-21v {
+ margin: 5.25rem !important;
+}
+
+.fr-ml-21v, .fr-mx-21v {
+ margin-left: 5.25rem !important;
+}
+
+.fr-mr-21v, .fr-mx-21v {
+ margin-right: 5.25rem !important;
+}
+
+.fr-mt-21v, .fr-my-21v {
+ margin-top: 5.25rem !important;
+}
+
+.fr-mb-21v, .fr-my-21v {
+ margin-bottom: 5.25rem !important;
+}
+
+.fr-m-22v, .fr-m-11w {
+ margin: 5.5rem !important;
+}
+
+.fr-ml-22v, .fr-ml-11w, .fr-mx-22v, .fr-mx-11w {
+ margin-left: 5.5rem !important;
+}
+
+.fr-mr-22v, .fr-mr-11w, .fr-mx-22v, .fr-mx-11w {
+ margin-right: 5.5rem !important;
+}
+
+.fr-mt-22v, .fr-mt-11w, .fr-my-22v, .fr-my-11w {
+ margin-top: 5.5rem !important;
+}
+
+.fr-mb-22v, .fr-mb-11w, .fr-my-22v, .fr-my-11w {
+ margin-bottom: 5.5rem !important;
+}
+
+.fr-m-23v {
+ margin: 5.75rem !important;
+}
+
+.fr-ml-23v, .fr-mx-23v {
+ margin-left: 5.75rem !important;
+}
+
+.fr-mr-23v, .fr-mx-23v {
+ margin-right: 5.75rem !important;
+}
+
+.fr-mt-23v, .fr-my-23v {
+ margin-top: 5.75rem !important;
+}
+
+.fr-mb-23v, .fr-my-23v {
+ margin-bottom: 5.75rem !important;
+}
+
+.fr-m-24v, .fr-m-12w {
+ margin: 6rem !important;
+}
+
+.fr-ml-24v, .fr-ml-12w, .fr-mx-24v, .fr-mx-12w {
+ margin-left: 6rem !important;
+}
+
+.fr-mr-24v, .fr-mr-12w, .fr-mx-24v, .fr-mx-12w {
+ margin-right: 6rem !important;
+}
+
+.fr-mt-24v, .fr-mt-12w, .fr-my-24v, .fr-my-12w {
+ margin-top: 6rem !important;
+}
+
+.fr-mb-24v, .fr-mb-12w, .fr-my-24v, .fr-my-12w {
+ margin-bottom: 6rem !important;
+}
+
+.fr-m-25v {
+ margin: 6.25rem !important;
+}
+
+.fr-ml-25v, .fr-mx-25v {
+ margin-left: 6.25rem !important;
+}
+
+.fr-mr-25v, .fr-mx-25v {
+ margin-right: 6.25rem !important;
+}
+
+.fr-mt-25v, .fr-my-25v {
+ margin-top: 6.25rem !important;
+}
+
+.fr-mb-25v, .fr-my-25v {
+ margin-bottom: 6.25rem !important;
+}
+
+.fr-m-26v, .fr-m-13w {
+ margin: 6.5rem !important;
+}
+
+.fr-ml-26v, .fr-ml-13w, .fr-mx-26v, .fr-mx-13w {
+ margin-left: 6.5rem !important;
+}
+
+.fr-mr-26v, .fr-mr-13w, .fr-mx-26v, .fr-mx-13w {
+ margin-right: 6.5rem !important;
+}
+
+.fr-mt-26v, .fr-mt-13w, .fr-my-26v, .fr-my-13w {
+ margin-top: 6.5rem !important;
+}
+
+.fr-mb-26v, .fr-mb-13w, .fr-my-26v, .fr-my-13w {
+ margin-bottom: 6.5rem !important;
+}
+
+.fr-m-27v {
+ margin: 6.75rem !important;
+}
+
+.fr-ml-27v, .fr-mx-27v {
+ margin-left: 6.75rem !important;
+}
+
+.fr-mr-27v, .fr-mx-27v {
+ margin-right: 6.75rem !important;
+}
+
+.fr-mt-27v, .fr-my-27v {
+ margin-top: 6.75rem !important;
+}
+
+.fr-mb-27v, .fr-my-27v {
+ margin-bottom: 6.75rem !important;
+}
+
+.fr-m-28v, .fr-m-14w {
+ margin: 7rem !important;
+}
+
+.fr-ml-28v, .fr-ml-14w, .fr-mx-28v, .fr-mx-14w {
+ margin-left: 7rem !important;
+}
+
+.fr-mr-28v, .fr-mr-14w, .fr-mx-28v, .fr-mx-14w {
+ margin-right: 7rem !important;
+}
+
+.fr-mt-28v, .fr-mt-14w, .fr-my-28v, .fr-my-14w {
+ margin-top: 7rem !important;
+}
+
+.fr-mb-28v, .fr-mb-14w, .fr-my-28v, .fr-my-14w {
+ margin-bottom: 7rem !important;
+}
+
+.fr-m-29v {
+ margin: 7.25rem !important;
+}
+
+.fr-ml-29v, .fr-mx-29v {
+ margin-left: 7.25rem !important;
+}
+
+.fr-mr-29v, .fr-mx-29v {
+ margin-right: 7.25rem !important;
+}
+
+.fr-mt-29v, .fr-my-29v {
+ margin-top: 7.25rem !important;
+}
+
+.fr-mb-29v, .fr-my-29v {
+ margin-bottom: 7.25rem !important;
+}
+
+.fr-m-30v, .fr-m-15w {
+ margin: 7.5rem !important;
+}
+
+.fr-ml-30v, .fr-ml-15w, .fr-mx-30v, .fr-mx-15w {
+ margin-left: 7.5rem !important;
+}
+
+.fr-mr-30v, .fr-mr-15w, .fr-mx-30v, .fr-mx-15w {
+ margin-right: 7.5rem !important;
+}
+
+.fr-mt-30v, .fr-mt-15w, .fr-my-30v, .fr-my-15w {
+ margin-top: 7.5rem !important;
+}
+
+.fr-mb-30v, .fr-mb-15w, .fr-my-30v, .fr-my-15w {
+ margin-bottom: 7.5rem !important;
+}
+
+.fr-m-31v {
+ margin: 7.75rem !important;
+}
+
+.fr-ml-31v, .fr-mx-31v {
+ margin-left: 7.75rem !important;
+}
+
+.fr-mr-31v, .fr-mx-31v {
+ margin-right: 7.75rem !important;
+}
+
+.fr-mt-31v, .fr-my-31v {
+ margin-top: 7.75rem !important;
+}
+
+.fr-mb-31v, .fr-my-31v {
+ margin-bottom: 7.75rem !important;
+}
+
+.fr-m-32v, .fr-m-16w {
+ margin: 8rem !important;
+}
+
+.fr-ml-32v, .fr-ml-16w, .fr-mx-32v, .fr-mx-16w {
+ margin-left: 8rem !important;
+}
+
+.fr-mr-32v, .fr-mr-16w, .fr-mx-32v, .fr-mx-16w {
+ margin-right: 8rem !important;
+}
+
+.fr-mt-32v, .fr-mt-16w, .fr-my-32v, .fr-my-16w {
+ margin-top: 8rem !important;
+}
+
+.fr-mb-32v, .fr-mb-16w, .fr-my-32v, .fr-my-16w {
+ margin-bottom: 8rem !important;
+}
+
+.fr-m-auto {
+ margin: auto;
+}
+
+.fr-ml-auto, .fr-mx-auto {
+ margin-left: auto;
+}
+
+.fr-mr-auto, .fr-mx-auto {
+ margin-right: auto;
+}
+
+.fr-mt-auto, .fr-my-auto {
+ margin-top: auto;
+}
+
+.fr-mb-auto, .fr-my-auto {
+ margin-bottom: auto;
+}
+
+.fr-p-0 {
+ padding: 0 !important;
+}
+
+.fr-pl-0, .fr-px-0 {
+ padding-left: 0 !important;
+}
+
+.fr-pr-0, .fr-px-0 {
+ padding-right: 0 !important;
+}
+
+.fr-pt-0, .fr-py-0 {
+ padding-top: 0 !important;
+}
+
+.fr-pb-0, .fr-py-0 {
+ padding-bottom: 0 !important;
+}
+
+.fr-p-1v {
+ padding: 0.25rem !important;
+}
+
+.fr-pl-1v, .fr-px-1v {
+ padding-left: 0.25rem !important;
+}
+
+.fr-pr-1v, .fr-px-1v {
+ padding-right: 0.25rem !important;
+}
+
+.fr-pt-1v, .fr-py-1v {
+ padding-top: 0.25rem !important;
+}
+
+.fr-pb-1v, .fr-py-1v {
+ padding-bottom: 0.25rem !important;
+}
+
+.fr-p-2v, .fr-p-1w {
+ padding: 0.5rem !important;
+}
+
+.fr-pl-2v, .fr-pl-1w, .fr-px-2v, .fr-px-1w {
+ padding-left: 0.5rem !important;
+}
+
+.fr-pr-2v, .fr-pr-1w, .fr-px-2v, .fr-px-1w {
+ padding-right: 0.5rem !important;
+}
+
+.fr-pt-2v, .fr-pt-1w, .fr-py-2v, .fr-py-1w {
+ padding-top: 0.5rem !important;
+}
+
+.fr-pb-2v, .fr-pb-1w, .fr-py-2v, .fr-py-1w {
+ padding-bottom: 0.5rem !important;
+}
+
+.fr-p-3v {
+ padding: 0.75rem !important;
+}
+
+.fr-pl-3v, .fr-px-3v {
+ padding-left: 0.75rem !important;
+}
+
+.fr-pr-3v, .fr-px-3v {
+ padding-right: 0.75rem !important;
+}
+
+.fr-pt-3v, .fr-py-3v {
+ padding-top: 0.75rem !important;
+}
+
+.fr-pb-3v, .fr-py-3v {
+ padding-bottom: 0.75rem !important;
+}
+
+.fr-p-4v, .fr-p-2w {
+ padding: 1rem !important;
+}
+
+.fr-pl-4v, .fr-pl-2w, .fr-px-4v, .fr-px-2w {
+ padding-left: 1rem !important;
+}
+
+.fr-pr-4v, .fr-pr-2w, .fr-px-4v, .fr-px-2w {
+ padding-right: 1rem !important;
+}
+
+.fr-pt-4v, .fr-pt-2w, .fr-py-4v, .fr-py-2w {
+ padding-top: 1rem !important;
+}
+
+.fr-pb-4v, .fr-pb-2w, .fr-py-4v, .fr-py-2w {
+ padding-bottom: 1rem !important;
+}
+
+.fr-p-5v {
+ padding: 1.25rem !important;
+}
+
+.fr-pl-5v, .fr-px-5v {
+ padding-left: 1.25rem !important;
+}
+
+.fr-pr-5v, .fr-px-5v {
+ padding-right: 1.25rem !important;
+}
+
+.fr-pt-5v, .fr-py-5v {
+ padding-top: 1.25rem !important;
+}
+
+.fr-pb-5v, .fr-py-5v {
+ padding-bottom: 1.25rem !important;
+}
+
+.fr-p-6v, .fr-p-3w {
+ padding: 1.5rem !important;
+}
+
+.fr-pl-6v, .fr-pl-3w, .fr-px-6v, .fr-px-3w {
+ padding-left: 1.5rem !important;
+}
+
+.fr-pr-6v, .fr-pr-3w, .fr-px-6v, .fr-px-3w {
+ padding-right: 1.5rem !important;
+}
+
+.fr-pt-6v, .fr-pt-3w, .fr-py-6v, .fr-py-3w {
+ padding-top: 1.5rem !important;
+}
+
+.fr-pb-6v, .fr-pb-3w, .fr-py-6v, .fr-py-3w {
+ padding-bottom: 1.5rem !important;
+}
+
+.fr-p-7v {
+ padding: 1.75rem !important;
+}
+
+.fr-pl-7v, .fr-px-7v {
+ padding-left: 1.75rem !important;
+}
+
+.fr-pr-7v, .fr-px-7v {
+ padding-right: 1.75rem !important;
+}
+
+.fr-pt-7v, .fr-py-7v {
+ padding-top: 1.75rem !important;
+}
+
+.fr-pb-7v, .fr-py-7v {
+ padding-bottom: 1.75rem !important;
+}
+
+.fr-p-8v, .fr-p-4w {
+ padding: 2rem !important;
+}
+
+.fr-pl-8v, .fr-pl-4w, .fr-px-8v, .fr-px-4w {
+ padding-left: 2rem !important;
+}
+
+.fr-pr-8v, .fr-pr-4w, .fr-px-8v, .fr-px-4w {
+ padding-right: 2rem !important;
+}
+
+.fr-pt-8v, .fr-pt-4w, .fr-py-8v, .fr-py-4w {
+ padding-top: 2rem !important;
+}
+
+.fr-pb-8v, .fr-pb-4w, .fr-py-8v, .fr-py-4w {
+ padding-bottom: 2rem !important;
+}
+
+.fr-p-9v {
+ padding: 2.25rem !important;
+}
+
+.fr-pl-9v, .fr-px-9v {
+ padding-left: 2.25rem !important;
+}
+
+.fr-pr-9v, .fr-px-9v {
+ padding-right: 2.25rem !important;
+}
+
+.fr-pt-9v, .fr-py-9v {
+ padding-top: 2.25rem !important;
+}
+
+.fr-pb-9v, .fr-py-9v {
+ padding-bottom: 2.25rem !important;
+}
+
+.fr-p-10v, .fr-p-5w {
+ padding: 2.5rem !important;
+}
+
+.fr-pl-10v, .fr-pl-5w, .fr-px-10v, .fr-px-5w {
+ padding-left: 2.5rem !important;
+}
+
+.fr-pr-10v, .fr-pr-5w, .fr-px-10v, .fr-px-5w {
+ padding-right: 2.5rem !important;
+}
+
+.fr-pt-10v, .fr-pt-5w, .fr-py-10v, .fr-py-5w {
+ padding-top: 2.5rem !important;
+}
+
+.fr-pb-10v, .fr-pb-5w, .fr-py-10v, .fr-py-5w {
+ padding-bottom: 2.5rem !important;
+}
+
+.fr-p-11v {
+ padding: 2.75rem !important;
+}
+
+.fr-pl-11v, .fr-px-11v {
+ padding-left: 2.75rem !important;
+}
+
+.fr-pr-11v, .fr-px-11v {
+ padding-right: 2.75rem !important;
+}
+
+.fr-pt-11v, .fr-py-11v {
+ padding-top: 2.75rem !important;
+}
+
+.fr-pb-11v, .fr-py-11v {
+ padding-bottom: 2.75rem !important;
+}
+
+.fr-p-12v, .fr-p-6w {
+ padding: 3rem !important;
+}
+
+.fr-pl-12v, .fr-pl-6w, .fr-px-12v, .fr-px-6w {
+ padding-left: 3rem !important;
+}
+
+.fr-pr-12v, .fr-pr-6w, .fr-px-12v, .fr-px-6w {
+ padding-right: 3rem !important;
+}
+
+.fr-pt-12v, .fr-pt-6w, .fr-py-12v, .fr-py-6w {
+ padding-top: 3rem !important;
+}
+
+.fr-pb-12v, .fr-pb-6w, .fr-py-12v, .fr-py-6w {
+ padding-bottom: 3rem !important;
+}
+
+.fr-p-13v {
+ padding: 3.25rem !important;
+}
+
+.fr-pl-13v, .fr-px-13v {
+ padding-left: 3.25rem !important;
+}
+
+.fr-pr-13v, .fr-px-13v {
+ padding-right: 3.25rem !important;
+}
+
+.fr-pt-13v, .fr-py-13v {
+ padding-top: 3.25rem !important;
+}
+
+.fr-pb-13v, .fr-py-13v {
+ padding-bottom: 3.25rem !important;
+}
+
+.fr-p-14v, .fr-p-7w {
+ padding: 3.5rem !important;
+}
+
+.fr-pl-14v, .fr-pl-7w, .fr-px-14v, .fr-px-7w {
+ padding-left: 3.5rem !important;
+}
+
+.fr-pr-14v, .fr-pr-7w, .fr-px-14v, .fr-px-7w {
+ padding-right: 3.5rem !important;
+}
+
+.fr-pt-14v, .fr-pt-7w, .fr-py-14v, .fr-py-7w {
+ padding-top: 3.5rem !important;
+}
+
+.fr-pb-14v, .fr-pb-7w, .fr-py-14v, .fr-py-7w {
+ padding-bottom: 3.5rem !important;
+}
+
+.fr-p-15v {
+ padding: 3.75rem !important;
+}
+
+.fr-pl-15v, .fr-px-15v {
+ padding-left: 3.75rem !important;
+}
+
+.fr-pr-15v, .fr-px-15v {
+ padding-right: 3.75rem !important;
+}
+
+.fr-pt-15v, .fr-py-15v {
+ padding-top: 3.75rem !important;
+}
+
+.fr-pb-15v, .fr-py-15v {
+ padding-bottom: 3.75rem !important;
+}
+
+.fr-p-16v, .fr-p-8w {
+ padding: 4rem !important;
+}
+
+.fr-pl-16v, .fr-pl-8w, .fr-px-16v, .fr-px-8w {
+ padding-left: 4rem !important;
+}
+
+.fr-pr-16v, .fr-pr-8w, .fr-px-16v, .fr-px-8w {
+ padding-right: 4rem !important;
+}
+
+.fr-pt-16v, .fr-pt-8w, .fr-py-16v, .fr-py-8w {
+ padding-top: 4rem !important;
+}
+
+.fr-pb-16v, .fr-pb-8w, .fr-py-16v, .fr-py-8w {
+ padding-bottom: 4rem !important;
+}
+
+.fr-p-17v {
+ padding: 4.25rem !important;
+}
+
+.fr-pl-17v, .fr-px-17v {
+ padding-left: 4.25rem !important;
+}
+
+.fr-pr-17v, .fr-px-17v {
+ padding-right: 4.25rem !important;
+}
+
+.fr-pt-17v, .fr-py-17v {
+ padding-top: 4.25rem !important;
+}
+
+.fr-pb-17v, .fr-py-17v {
+ padding-bottom: 4.25rem !important;
+}
+
+.fr-p-18v, .fr-p-9w {
+ padding: 4.5rem !important;
+}
+
+.fr-pl-18v, .fr-pl-9w, .fr-px-18v, .fr-px-9w {
+ padding-left: 4.5rem !important;
+}
+
+.fr-pr-18v, .fr-pr-9w, .fr-px-18v, .fr-px-9w {
+ padding-right: 4.5rem !important;
+}
+
+.fr-pt-18v, .fr-pt-9w, .fr-py-18v, .fr-py-9w {
+ padding-top: 4.5rem !important;
+}
+
+.fr-pb-18v, .fr-pb-9w, .fr-py-18v, .fr-py-9w {
+ padding-bottom: 4.5rem !important;
+}
+
+.fr-p-19v {
+ padding: 4.75rem !important;
+}
+
+.fr-pl-19v, .fr-px-19v {
+ padding-left: 4.75rem !important;
+}
+
+.fr-pr-19v, .fr-px-19v {
+ padding-right: 4.75rem !important;
+}
+
+.fr-pt-19v, .fr-py-19v {
+ padding-top: 4.75rem !important;
+}
+
+.fr-pb-19v, .fr-py-19v {
+ padding-bottom: 4.75rem !important;
+}
+
+.fr-p-20v, .fr-p-10w {
+ padding: 5rem !important;
+}
+
+.fr-pl-20v, .fr-pl-10w, .fr-px-20v, .fr-px-10w {
+ padding-left: 5rem !important;
+}
+
+.fr-pr-20v, .fr-pr-10w, .fr-px-20v, .fr-px-10w {
+ padding-right: 5rem !important;
+}
+
+.fr-pt-20v, .fr-pt-10w, .fr-py-20v, .fr-py-10w {
+ padding-top: 5rem !important;
+}
+
+.fr-pb-20v, .fr-pb-10w, .fr-py-20v, .fr-py-10w {
+ padding-bottom: 5rem !important;
+}
+
+.fr-p-21v {
+ padding: 5.25rem !important;
+}
+
+.fr-pl-21v, .fr-px-21v {
+ padding-left: 5.25rem !important;
+}
+
+.fr-pr-21v, .fr-px-21v {
+ padding-right: 5.25rem !important;
+}
+
+.fr-pt-21v, .fr-py-21v {
+ padding-top: 5.25rem !important;
+}
+
+.fr-pb-21v, .fr-py-21v {
+ padding-bottom: 5.25rem !important;
+}
+
+.fr-p-22v, .fr-p-11w {
+ padding: 5.5rem !important;
+}
+
+.fr-pl-22v, .fr-pl-11w, .fr-px-22v, .fr-px-11w {
+ padding-left: 5.5rem !important;
+}
+
+.fr-pr-22v, .fr-pr-11w, .fr-px-22v, .fr-px-11w {
+ padding-right: 5.5rem !important;
+}
+
+.fr-pt-22v, .fr-pt-11w, .fr-py-22v, .fr-py-11w {
+ padding-top: 5.5rem !important;
+}
+
+.fr-pb-22v, .fr-pb-11w, .fr-py-22v, .fr-py-11w {
+ padding-bottom: 5.5rem !important;
+}
+
+.fr-p-23v {
+ padding: 5.75rem !important;
+}
+
+.fr-pl-23v, .fr-px-23v {
+ padding-left: 5.75rem !important;
+}
+
+.fr-pr-23v, .fr-px-23v {
+ padding-right: 5.75rem !important;
+}
+
+.fr-pt-23v, .fr-py-23v {
+ padding-top: 5.75rem !important;
+}
+
+.fr-pb-23v, .fr-py-23v {
+ padding-bottom: 5.75rem !important;
+}
+
+.fr-p-24v, .fr-p-12w {
+ padding: 6rem !important;
+}
+
+.fr-pl-24v, .fr-pl-12w, .fr-px-24v, .fr-px-12w {
+ padding-left: 6rem !important;
+}
+
+.fr-pr-24v, .fr-pr-12w, .fr-px-24v, .fr-px-12w {
+ padding-right: 6rem !important;
+}
+
+.fr-pt-24v, .fr-pt-12w, .fr-py-24v, .fr-py-12w {
+ padding-top: 6rem !important;
+}
+
+.fr-pb-24v, .fr-pb-12w, .fr-py-24v, .fr-py-12w {
+ padding-bottom: 6rem !important;
+}
+
+.fr-p-25v {
+ padding: 6.25rem !important;
+}
+
+.fr-pl-25v, .fr-px-25v {
+ padding-left: 6.25rem !important;
+}
+
+.fr-pr-25v, .fr-px-25v {
+ padding-right: 6.25rem !important;
+}
+
+.fr-pt-25v, .fr-py-25v {
+ padding-top: 6.25rem !important;
+}
+
+.fr-pb-25v, .fr-py-25v {
+ padding-bottom: 6.25rem !important;
+}
+
+.fr-p-26v, .fr-p-13w {
+ padding: 6.5rem !important;
+}
+
+.fr-pl-26v, .fr-pl-13w, .fr-px-26v, .fr-px-13w {
+ padding-left: 6.5rem !important;
+}
+
+.fr-pr-26v, .fr-pr-13w, .fr-px-26v, .fr-px-13w {
+ padding-right: 6.5rem !important;
+}
+
+.fr-pt-26v, .fr-pt-13w, .fr-py-26v, .fr-py-13w {
+ padding-top: 6.5rem !important;
+}
+
+.fr-pb-26v, .fr-pb-13w, .fr-py-26v, .fr-py-13w {
+ padding-bottom: 6.5rem !important;
+}
+
+.fr-p-27v {
+ padding: 6.75rem !important;
+}
+
+.fr-pl-27v, .fr-px-27v {
+ padding-left: 6.75rem !important;
+}
+
+.fr-pr-27v, .fr-px-27v {
+ padding-right: 6.75rem !important;
+}
+
+.fr-pt-27v, .fr-py-27v {
+ padding-top: 6.75rem !important;
+}
+
+.fr-pb-27v, .fr-py-27v {
+ padding-bottom: 6.75rem !important;
+}
+
+.fr-p-28v, .fr-p-14w {
+ padding: 7rem !important;
+}
+
+.fr-pl-28v, .fr-pl-14w, .fr-px-28v, .fr-px-14w {
+ padding-left: 7rem !important;
+}
+
+.fr-pr-28v, .fr-pr-14w, .fr-px-28v, .fr-px-14w {
+ padding-right: 7rem !important;
+}
+
+.fr-pt-28v, .fr-pt-14w, .fr-py-28v, .fr-py-14w {
+ padding-top: 7rem !important;
+}
+
+.fr-pb-28v, .fr-pb-14w, .fr-py-28v, .fr-py-14w {
+ padding-bottom: 7rem !important;
+}
+
+.fr-p-29v {
+ padding: 7.25rem !important;
+}
+
+.fr-pl-29v, .fr-px-29v {
+ padding-left: 7.25rem !important;
+}
+
+.fr-pr-29v, .fr-px-29v {
+ padding-right: 7.25rem !important;
+}
+
+.fr-pt-29v, .fr-py-29v {
+ padding-top: 7.25rem !important;
+}
+
+.fr-pb-29v, .fr-py-29v {
+ padding-bottom: 7.25rem !important;
+}
+
+.fr-p-30v, .fr-p-15w {
+ padding: 7.5rem !important;
+}
+
+.fr-pl-30v, .fr-pl-15w, .fr-px-30v, .fr-px-15w {
+ padding-left: 7.5rem !important;
+}
+
+.fr-pr-30v, .fr-pr-15w, .fr-px-30v, .fr-px-15w {
+ padding-right: 7.5rem !important;
+}
+
+.fr-pt-30v, .fr-pt-15w, .fr-py-30v, .fr-py-15w {
+ padding-top: 7.5rem !important;
+}
+
+.fr-pb-30v, .fr-pb-15w, .fr-py-30v, .fr-py-15w {
+ padding-bottom: 7.5rem !important;
+}
+
+.fr-p-31v {
+ padding: 7.75rem !important;
+}
+
+.fr-pl-31v, .fr-px-31v {
+ padding-left: 7.75rem !important;
+}
+
+.fr-pr-31v, .fr-px-31v {
+ padding-right: 7.75rem !important;
+}
+
+.fr-pt-31v, .fr-py-31v {
+ padding-top: 7.75rem !important;
+}
+
+.fr-pb-31v, .fr-py-31v {
+ padding-bottom: 7.75rem !important;
+}
+
+.fr-p-32v, .fr-p-16w {
+ padding: 8rem !important;
+}
+
+.fr-pl-32v, .fr-pl-16w, .fr-px-32v, .fr-px-16w {
+ padding-left: 8rem !important;
+}
+
+.fr-pr-32v, .fr-pr-16w, .fr-px-32v, .fr-px-16w {
+ padding-right: 8rem !important;
+}
+
+.fr-pt-32v, .fr-pt-16w, .fr-py-32v, .fr-py-16w {
+ padding-top: 8rem !important;
+}
+
+.fr-pb-32v, .fr-pb-16w, .fr-py-32v, .fr-py-16w {
+ padding-bottom: 8rem !important;
+}
+
+@media (min-width: 48em) {
+ .fr-m-md-n8v, .fr-m-md-n4w {
+ margin: -2rem !important;
+ }
+
+ .fr-ml-md-n8v, .fr-ml-md-n4w, .fr-mx-md-n8v, .fr-mx-md-n4w {
+ margin-left: -2rem !important;
+ }
+
+ .fr-mr-md-n8v, .fr-mr-md-n4w, .fr-mx-md-n8v, .fr-mx-md-n4w {
+ margin-right: -2rem !important;
+ }
+
+ .fr-mt-md-n8v, .fr-mt-md-n4w, .fr-my-md-n8v, .fr-my-md-n4w {
+ margin-top: -2rem !important;
+ }
+
+ .fr-mb-md-n8v, .fr-mb-md-n4w, .fr-my-md-n8v, .fr-my-md-n4w {
+ margin-bottom: -2rem !important;
+ }
+
+ .fr-m-md-n7v {
+ margin: -1.75rem !important;
+ }
+
+ .fr-ml-md-n7v, .fr-mx-md-n7v {
+ margin-left: -1.75rem !important;
+ }
+
+ .fr-mr-md-n7v, .fr-mx-md-n7v {
+ margin-right: -1.75rem !important;
+ }
+
+ .fr-mt-md-n7v, .fr-my-md-n7v {
+ margin-top: -1.75rem !important;
+ }
+
+ .fr-mb-md-n7v, .fr-my-md-n7v {
+ margin-bottom: -1.75rem !important;
+ }
+
+ .fr-m-md-n6v, .fr-m-md-n3w {
+ margin: -1.5rem !important;
+ }
+
+ .fr-ml-md-n6v, .fr-ml-md-n3w, .fr-mx-md-n6v, .fr-mx-md-n3w {
+ margin-left: -1.5rem !important;
+ }
+
+ .fr-mr-md-n6v, .fr-mr-md-n3w, .fr-mx-md-n6v, .fr-mx-md-n3w {
+ margin-right: -1.5rem !important;
+ }
+
+ .fr-mt-md-n6v, .fr-mt-md-n3w, .fr-my-md-n6v, .fr-my-md-n3w {
+ margin-top: -1.5rem !important;
+ }
+
+ .fr-mb-md-n6v, .fr-mb-md-n3w, .fr-my-md-n6v, .fr-my-md-n3w {
+ margin-bottom: -1.5rem !important;
+ }
+
+ .fr-m-md-n5v {
+ margin: -1.25rem !important;
+ }
+
+ .fr-ml-md-n5v, .fr-mx-md-n5v {
+ margin-left: -1.25rem !important;
+ }
+
+ .fr-mr-md-n5v, .fr-mx-md-n5v {
+ margin-right: -1.25rem !important;
+ }
+
+ .fr-mt-md-n5v, .fr-my-md-n5v {
+ margin-top: -1.25rem !important;
+ }
+
+ .fr-mb-md-n5v, .fr-my-md-n5v {
+ margin-bottom: -1.25rem !important;
+ }
+
+ .fr-m-md-n4v, .fr-m-md-n2w {
+ margin: -1rem !important;
+ }
+
+ .fr-ml-md-n4v, .fr-ml-md-n2w, .fr-mx-md-n4v, .fr-mx-md-n2w {
+ margin-left: -1rem !important;
+ }
+
+ .fr-mr-md-n4v, .fr-mr-md-n2w, .fr-mx-md-n4v, .fr-mx-md-n2w {
+ margin-right: -1rem !important;
+ }
+
+ .fr-mt-md-n4v, .fr-mt-md-n2w, .fr-my-md-n4v, .fr-my-md-n2w {
+ margin-top: -1rem !important;
+ }
+
+ .fr-mb-md-n4v, .fr-mb-md-n2w, .fr-my-md-n4v, .fr-my-md-n2w {
+ margin-bottom: -1rem !important;
+ }
+
+ .fr-m-md-n3v {
+ margin: -0.75rem !important;
+ }
+
+ .fr-ml-md-n3v, .fr-mx-md-n3v {
+ margin-left: -0.75rem !important;
+ }
+
+ .fr-mr-md-n3v, .fr-mx-md-n3v {
+ margin-right: -0.75rem !important;
+ }
+
+ .fr-mt-md-n3v, .fr-my-md-n3v {
+ margin-top: -0.75rem !important;
+ }
+
+ .fr-mb-md-n3v, .fr-my-md-n3v {
+ margin-bottom: -0.75rem !important;
+ }
+
+ .fr-m-md-n2v, .fr-m-md-n1w {
+ margin: -0.5rem !important;
+ }
+
+ .fr-ml-md-n2v, .fr-ml-md-n1w, .fr-mx-md-n2v, .fr-mx-md-n1w {
+ margin-left: -0.5rem !important;
+ }
+
+ .fr-mr-md-n2v, .fr-mr-md-n1w, .fr-mx-md-n2v, .fr-mx-md-n1w {
+ margin-right: -0.5rem !important;
+ }
+
+ .fr-mt-md-n2v, .fr-mt-md-n1w, .fr-my-md-n2v, .fr-my-md-n1w {
+ margin-top: -0.5rem !important;
+ }
+
+ .fr-mb-md-n2v, .fr-mb-md-n1w, .fr-my-md-n2v, .fr-my-md-n1w {
+ margin-bottom: -0.5rem !important;
+ }
+
+ .fr-m-md-n1v {
+ margin: -0.25rem !important;
+ }
+
+ .fr-ml-md-n1v, .fr-mx-md-n1v {
+ margin-left: -0.25rem !important;
+ }
+
+ .fr-mr-md-n1v, .fr-mx-md-n1v {
+ margin-right: -0.25rem !important;
+ }
+
+ .fr-mt-md-n1v, .fr-my-md-n1v {
+ margin-top: -0.25rem !important;
+ }
+
+ .fr-mb-md-n1v, .fr-my-md-n1v {
+ margin-bottom: -0.25rem !important;
+ }
+
+ .fr-m-md-0 {
+ margin: 0 !important;
+ }
+
+ .fr-ml-md-0, .fr-mx-md-0 {
+ margin-left: 0 !important;
+ }
+
+ .fr-mr-md-0, .fr-mx-md-0 {
+ margin-right: 0 !important;
+ }
+
+ .fr-mt-md-0, .fr-my-md-0 {
+ margin-top: 0 !important;
+ }
+
+ .fr-mb-md-0, .fr-my-md-0 {
+ margin-bottom: 0 !important;
+ }
+
+ .fr-m-md-1v {
+ margin: 0.25rem !important;
+ }
+
+ .fr-ml-md-1v, .fr-mx-md-1v {
+ margin-left: 0.25rem !important;
+ }
+
+ .fr-mr-md-1v, .fr-mx-md-1v {
+ margin-right: 0.25rem !important;
+ }
+
+ .fr-mt-md-1v, .fr-my-md-1v {
+ margin-top: 0.25rem !important;
+ }
+
+ .fr-mb-md-1v, .fr-my-md-1v {
+ margin-bottom: 0.25rem !important;
+ }
+
+ .fr-m-md-2v, .fr-m-md-1w {
+ margin: 0.5rem !important;
+ }
+
+ .fr-ml-md-2v, .fr-ml-md-1w, .fr-mx-md-2v, .fr-mx-md-1w {
+ margin-left: 0.5rem !important;
+ }
+
+ .fr-mr-md-2v, .fr-mr-md-1w, .fr-mx-md-2v, .fr-mx-md-1w {
+ margin-right: 0.5rem !important;
+ }
+
+ .fr-mt-md-2v, .fr-mt-md-1w, .fr-my-md-2v, .fr-my-md-1w {
+ margin-top: 0.5rem !important;
+ }
+
+ .fr-mb-md-2v, .fr-mb-md-1w, .fr-my-md-2v, .fr-my-md-1w {
+ margin-bottom: 0.5rem !important;
+ }
+
+ .fr-m-md-3v {
+ margin: 0.75rem !important;
+ }
+
+ .fr-ml-md-3v, .fr-mx-md-3v {
+ margin-left: 0.75rem !important;
+ }
+
+ .fr-mr-md-3v, .fr-mx-md-3v {
+ margin-right: 0.75rem !important;
+ }
+
+ .fr-mt-md-3v, .fr-my-md-3v {
+ margin-top: 0.75rem !important;
+ }
+
+ .fr-mb-md-3v, .fr-my-md-3v {
+ margin-bottom: 0.75rem !important;
+ }
+
+ .fr-m-md-4v, .fr-m-md-2w {
+ margin: 1rem !important;
+ }
+
+ .fr-ml-md-4v, .fr-ml-md-2w, .fr-mx-md-4v, .fr-mx-md-2w {
+ margin-left: 1rem !important;
+ }
+
+ .fr-mr-md-4v, .fr-mr-md-2w, .fr-mx-md-4v, .fr-mx-md-2w {
+ margin-right: 1rem !important;
+ }
+
+ .fr-mt-md-4v, .fr-mt-md-2w, .fr-my-md-4v, .fr-my-md-2w {
+ margin-top: 1rem !important;
+ }
+
+ .fr-mb-md-4v, .fr-mb-md-2w, .fr-my-md-4v, .fr-my-md-2w {
+ margin-bottom: 1rem !important;
+ }
+
+ .fr-m-md-5v {
+ margin: 1.25rem !important;
+ }
+
+ .fr-ml-md-5v, .fr-mx-md-5v {
+ margin-left: 1.25rem !important;
+ }
+
+ .fr-mr-md-5v, .fr-mx-md-5v {
+ margin-right: 1.25rem !important;
+ }
+
+ .fr-mt-md-5v, .fr-my-md-5v {
+ margin-top: 1.25rem !important;
+ }
+
+ .fr-mb-md-5v, .fr-my-md-5v {
+ margin-bottom: 1.25rem !important;
+ }
+
+ .fr-m-md-6v, .fr-m-md-3w {
+ margin: 1.5rem !important;
+ }
+
+ .fr-ml-md-6v, .fr-ml-md-3w, .fr-mx-md-6v, .fr-mx-md-3w {
+ margin-left: 1.5rem !important;
+ }
+
+ .fr-mr-md-6v, .fr-mr-md-3w, .fr-mx-md-6v, .fr-mx-md-3w {
+ margin-right: 1.5rem !important;
+ }
+
+ .fr-mt-md-6v, .fr-mt-md-3w, .fr-my-md-6v, .fr-my-md-3w {
+ margin-top: 1.5rem !important;
+ }
+
+ .fr-mb-md-6v, .fr-mb-md-3w, .fr-my-md-6v, .fr-my-md-3w {
+ margin-bottom: 1.5rem !important;
+ }
+
+ .fr-m-md-7v {
+ margin: 1.75rem !important;
+ }
+
+ .fr-ml-md-7v, .fr-mx-md-7v {
+ margin-left: 1.75rem !important;
+ }
+
+ .fr-mr-md-7v, .fr-mx-md-7v {
+ margin-right: 1.75rem !important;
+ }
+
+ .fr-mt-md-7v, .fr-my-md-7v {
+ margin-top: 1.75rem !important;
+ }
+
+ .fr-mb-md-7v, .fr-my-md-7v {
+ margin-bottom: 1.75rem !important;
+ }
+
+ .fr-m-md-8v, .fr-m-md-4w {
+ margin: 2rem !important;
+ }
+
+ .fr-ml-md-8v, .fr-ml-md-4w, .fr-mx-md-8v, .fr-mx-md-4w {
+ margin-left: 2rem !important;
+ }
+
+ .fr-mr-md-8v, .fr-mr-md-4w, .fr-mx-md-8v, .fr-mx-md-4w {
+ margin-right: 2rem !important;
+ }
+
+ .fr-mt-md-8v, .fr-mt-md-4w, .fr-my-md-8v, .fr-my-md-4w {
+ margin-top: 2rem !important;
+ }
+
+ .fr-mb-md-8v, .fr-mb-md-4w, .fr-my-md-8v, .fr-my-md-4w {
+ margin-bottom: 2rem !important;
+ }
+
+ .fr-m-md-9v {
+ margin: 2.25rem !important;
+ }
+
+ .fr-ml-md-9v, .fr-mx-md-9v {
+ margin-left: 2.25rem !important;
+ }
+
+ .fr-mr-md-9v, .fr-mx-md-9v {
+ margin-right: 2.25rem !important;
+ }
+
+ .fr-mt-md-9v, .fr-my-md-9v {
+ margin-top: 2.25rem !important;
+ }
+
+ .fr-mb-md-9v, .fr-my-md-9v {
+ margin-bottom: 2.25rem !important;
+ }
+
+ .fr-m-md-10v, .fr-m-md-5w {
+ margin: 2.5rem !important;
+ }
+
+ .fr-ml-md-10v, .fr-ml-md-5w, .fr-mx-md-10v, .fr-mx-md-5w {
+ margin-left: 2.5rem !important;
+ }
+
+ .fr-mr-md-10v, .fr-mr-md-5w, .fr-mx-md-10v, .fr-mx-md-5w {
+ margin-right: 2.5rem !important;
+ }
+
+ .fr-mt-md-10v, .fr-mt-md-5w, .fr-my-md-10v, .fr-my-md-5w {
+ margin-top: 2.5rem !important;
+ }
+
+ .fr-mb-md-10v, .fr-mb-md-5w, .fr-my-md-10v, .fr-my-md-5w {
+ margin-bottom: 2.5rem !important;
+ }
+
+ .fr-m-md-11v {
+ margin: 2.75rem !important;
+ }
+
+ .fr-ml-md-11v, .fr-mx-md-11v {
+ margin-left: 2.75rem !important;
+ }
+
+ .fr-mr-md-11v, .fr-mx-md-11v {
+ margin-right: 2.75rem !important;
+ }
+
+ .fr-mt-md-11v, .fr-my-md-11v {
+ margin-top: 2.75rem !important;
+ }
+
+ .fr-mb-md-11v, .fr-my-md-11v {
+ margin-bottom: 2.75rem !important;
+ }
+
+ .fr-m-md-12v, .fr-m-md-6w {
+ margin: 3rem !important;
+ }
+
+ .fr-ml-md-12v, .fr-ml-md-6w, .fr-mx-md-12v, .fr-mx-md-6w {
+ margin-left: 3rem !important;
+ }
+
+ .fr-mr-md-12v, .fr-mr-md-6w, .fr-mx-md-12v, .fr-mx-md-6w {
+ margin-right: 3rem !important;
+ }
+
+ .fr-mt-md-12v, .fr-mt-md-6w, .fr-my-md-12v, .fr-my-md-6w {
+ margin-top: 3rem !important;
+ }
+
+ .fr-mb-md-12v, .fr-mb-md-6w, .fr-my-md-12v, .fr-my-md-6w {
+ margin-bottom: 3rem !important;
+ }
+
+ .fr-m-md-13v {
+ margin: 3.25rem !important;
+ }
+
+ .fr-ml-md-13v, .fr-mx-md-13v {
+ margin-left: 3.25rem !important;
+ }
+
+ .fr-mr-md-13v, .fr-mx-md-13v {
+ margin-right: 3.25rem !important;
+ }
+
+ .fr-mt-md-13v, .fr-my-md-13v {
+ margin-top: 3.25rem !important;
+ }
+
+ .fr-mb-md-13v, .fr-my-md-13v {
+ margin-bottom: 3.25rem !important;
+ }
+
+ .fr-m-md-14v, .fr-m-md-7w {
+ margin: 3.5rem !important;
+ }
+
+ .fr-ml-md-14v, .fr-ml-md-7w, .fr-mx-md-14v, .fr-mx-md-7w {
+ margin-left: 3.5rem !important;
+ }
+
+ .fr-mr-md-14v, .fr-mr-md-7w, .fr-mx-md-14v, .fr-mx-md-7w {
+ margin-right: 3.5rem !important;
+ }
+
+ .fr-mt-md-14v, .fr-mt-md-7w, .fr-my-md-14v, .fr-my-md-7w {
+ margin-top: 3.5rem !important;
+ }
+
+ .fr-mb-md-14v, .fr-mb-md-7w, .fr-my-md-14v, .fr-my-md-7w {
+ margin-bottom: 3.5rem !important;
+ }
+
+ .fr-m-md-15v {
+ margin: 3.75rem !important;
+ }
+
+ .fr-ml-md-15v, .fr-mx-md-15v {
+ margin-left: 3.75rem !important;
+ }
+
+ .fr-mr-md-15v, .fr-mx-md-15v {
+ margin-right: 3.75rem !important;
+ }
+
+ .fr-mt-md-15v, .fr-my-md-15v {
+ margin-top: 3.75rem !important;
+ }
+
+ .fr-mb-md-15v, .fr-my-md-15v {
+ margin-bottom: 3.75rem !important;
+ }
+
+ .fr-m-md-16v, .fr-m-md-8w {
+ margin: 4rem !important;
+ }
+
+ .fr-ml-md-16v, .fr-ml-md-8w, .fr-mx-md-16v, .fr-mx-md-8w {
+ margin-left: 4rem !important;
+ }
+
+ .fr-mr-md-16v, .fr-mr-md-8w, .fr-mx-md-16v, .fr-mx-md-8w {
+ margin-right: 4rem !important;
+ }
+
+ .fr-mt-md-16v, .fr-mt-md-8w, .fr-my-md-16v, .fr-my-md-8w {
+ margin-top: 4rem !important;
+ }
+
+ .fr-mb-md-16v, .fr-mb-md-8w, .fr-my-md-16v, .fr-my-md-8w {
+ margin-bottom: 4rem !important;
+ }
+
+ .fr-m-md-17v {
+ margin: 4.25rem !important;
+ }
+
+ .fr-ml-md-17v, .fr-mx-md-17v {
+ margin-left: 4.25rem !important;
+ }
+
+ .fr-mr-md-17v, .fr-mx-md-17v {
+ margin-right: 4.25rem !important;
+ }
+
+ .fr-mt-md-17v, .fr-my-md-17v {
+ margin-top: 4.25rem !important;
+ }
+
+ .fr-mb-md-17v, .fr-my-md-17v {
+ margin-bottom: 4.25rem !important;
+ }
+
+ .fr-m-md-18v, .fr-m-md-9w {
+ margin: 4.5rem !important;
+ }
+
+ .fr-ml-md-18v, .fr-ml-md-9w, .fr-mx-md-18v, .fr-mx-md-9w {
+ margin-left: 4.5rem !important;
+ }
+
+ .fr-mr-md-18v, .fr-mr-md-9w, .fr-mx-md-18v, .fr-mx-md-9w {
+ margin-right: 4.5rem !important;
+ }
+
+ .fr-mt-md-18v, .fr-mt-md-9w, .fr-my-md-18v, .fr-my-md-9w {
+ margin-top: 4.5rem !important;
+ }
+
+ .fr-mb-md-18v, .fr-mb-md-9w, .fr-my-md-18v, .fr-my-md-9w {
+ margin-bottom: 4.5rem !important;
+ }
+
+ .fr-m-md-19v {
+ margin: 4.75rem !important;
+ }
+
+ .fr-ml-md-19v, .fr-mx-md-19v {
+ margin-left: 4.75rem !important;
+ }
+
+ .fr-mr-md-19v, .fr-mx-md-19v {
+ margin-right: 4.75rem !important;
+ }
+
+ .fr-mt-md-19v, .fr-my-md-19v {
+ margin-top: 4.75rem !important;
+ }
+
+ .fr-mb-md-19v, .fr-my-md-19v {
+ margin-bottom: 4.75rem !important;
+ }
+
+ .fr-m-md-20v, .fr-m-md-10w {
+ margin: 5rem !important;
+ }
+
+ .fr-ml-md-20v, .fr-ml-md-10w, .fr-mx-md-20v, .fr-mx-md-10w {
+ margin-left: 5rem !important;
+ }
+
+ .fr-mr-md-20v, .fr-mr-md-10w, .fr-mx-md-20v, .fr-mx-md-10w {
+ margin-right: 5rem !important;
+ }
+
+ .fr-mt-md-20v, .fr-mt-md-10w, .fr-my-md-20v, .fr-my-md-10w {
+ margin-top: 5rem !important;
+ }
+
+ .fr-mb-md-20v, .fr-mb-md-10w, .fr-my-md-20v, .fr-my-md-10w {
+ margin-bottom: 5rem !important;
+ }
+
+ .fr-m-md-21v {
+ margin: 5.25rem !important;
+ }
+
+ .fr-ml-md-21v, .fr-mx-md-21v {
+ margin-left: 5.25rem !important;
+ }
+
+ .fr-mr-md-21v, .fr-mx-md-21v {
+ margin-right: 5.25rem !important;
+ }
+
+ .fr-mt-md-21v, .fr-my-md-21v {
+ margin-top: 5.25rem !important;
+ }
+
+ .fr-mb-md-21v, .fr-my-md-21v {
+ margin-bottom: 5.25rem !important;
+ }
+
+ .fr-m-md-22v, .fr-m-md-11w {
+ margin: 5.5rem !important;
+ }
+
+ .fr-ml-md-22v, .fr-ml-md-11w, .fr-mx-md-22v, .fr-mx-md-11w {
+ margin-left: 5.5rem !important;
+ }
+
+ .fr-mr-md-22v, .fr-mr-md-11w, .fr-mx-md-22v, .fr-mx-md-11w {
+ margin-right: 5.5rem !important;
+ }
+
+ .fr-mt-md-22v, .fr-mt-md-11w, .fr-my-md-22v, .fr-my-md-11w {
+ margin-top: 5.5rem !important;
+ }
+
+ .fr-mb-md-22v, .fr-mb-md-11w, .fr-my-md-22v, .fr-my-md-11w {
+ margin-bottom: 5.5rem !important;
+ }
+
+ .fr-m-md-23v {
+ margin: 5.75rem !important;
+ }
+
+ .fr-ml-md-23v, .fr-mx-md-23v {
+ margin-left: 5.75rem !important;
+ }
+
+ .fr-mr-md-23v, .fr-mx-md-23v {
+ margin-right: 5.75rem !important;
+ }
+
+ .fr-mt-md-23v, .fr-my-md-23v {
+ margin-top: 5.75rem !important;
+ }
+
+ .fr-mb-md-23v, .fr-my-md-23v {
+ margin-bottom: 5.75rem !important;
+ }
+
+ .fr-m-md-24v, .fr-m-md-12w {
+ margin: 6rem !important;
+ }
+
+ .fr-ml-md-24v, .fr-ml-md-12w, .fr-mx-md-24v, .fr-mx-md-12w {
+ margin-left: 6rem !important;
+ }
+
+ .fr-mr-md-24v, .fr-mr-md-12w, .fr-mx-md-24v, .fr-mx-md-12w {
+ margin-right: 6rem !important;
+ }
+
+ .fr-mt-md-24v, .fr-mt-md-12w, .fr-my-md-24v, .fr-my-md-12w {
+ margin-top: 6rem !important;
+ }
+
+ .fr-mb-md-24v, .fr-mb-md-12w, .fr-my-md-24v, .fr-my-md-12w {
+ margin-bottom: 6rem !important;
+ }
+
+ .fr-m-md-25v {
+ margin: 6.25rem !important;
+ }
+
+ .fr-ml-md-25v, .fr-mx-md-25v {
+ margin-left: 6.25rem !important;
+ }
+
+ .fr-mr-md-25v, .fr-mx-md-25v {
+ margin-right: 6.25rem !important;
+ }
+
+ .fr-mt-md-25v, .fr-my-md-25v {
+ margin-top: 6.25rem !important;
+ }
+
+ .fr-mb-md-25v, .fr-my-md-25v {
+ margin-bottom: 6.25rem !important;
+ }
+
+ .fr-m-md-26v, .fr-m-md-13w {
+ margin: 6.5rem !important;
+ }
+
+ .fr-ml-md-26v, .fr-ml-md-13w, .fr-mx-md-26v, .fr-mx-md-13w {
+ margin-left: 6.5rem !important;
+ }
+
+ .fr-mr-md-26v, .fr-mr-md-13w, .fr-mx-md-26v, .fr-mx-md-13w {
+ margin-right: 6.5rem !important;
+ }
+
+ .fr-mt-md-26v, .fr-mt-md-13w, .fr-my-md-26v, .fr-my-md-13w {
+ margin-top: 6.5rem !important;
+ }
+
+ .fr-mb-md-26v, .fr-mb-md-13w, .fr-my-md-26v, .fr-my-md-13w {
+ margin-bottom: 6.5rem !important;
+ }
+
+ .fr-m-md-27v {
+ margin: 6.75rem !important;
+ }
+
+ .fr-ml-md-27v, .fr-mx-md-27v {
+ margin-left: 6.75rem !important;
+ }
+
+ .fr-mr-md-27v, .fr-mx-md-27v {
+ margin-right: 6.75rem !important;
+ }
+
+ .fr-mt-md-27v, .fr-my-md-27v {
+ margin-top: 6.75rem !important;
+ }
+
+ .fr-mb-md-27v, .fr-my-md-27v {
+ margin-bottom: 6.75rem !important;
+ }
+
+ .fr-m-md-28v, .fr-m-md-14w {
+ margin: 7rem !important;
+ }
+
+ .fr-ml-md-28v, .fr-ml-md-14w, .fr-mx-md-28v, .fr-mx-md-14w {
+ margin-left: 7rem !important;
+ }
+
+ .fr-mr-md-28v, .fr-mr-md-14w, .fr-mx-md-28v, .fr-mx-md-14w {
+ margin-right: 7rem !important;
+ }
+
+ .fr-mt-md-28v, .fr-mt-md-14w, .fr-my-md-28v, .fr-my-md-14w {
+ margin-top: 7rem !important;
+ }
+
+ .fr-mb-md-28v, .fr-mb-md-14w, .fr-my-md-28v, .fr-my-md-14w {
+ margin-bottom: 7rem !important;
+ }
+
+ .fr-m-md-29v {
+ margin: 7.25rem !important;
+ }
+
+ .fr-ml-md-29v, .fr-mx-md-29v {
+ margin-left: 7.25rem !important;
+ }
+
+ .fr-mr-md-29v, .fr-mx-md-29v {
+ margin-right: 7.25rem !important;
+ }
+
+ .fr-mt-md-29v, .fr-my-md-29v {
+ margin-top: 7.25rem !important;
+ }
+
+ .fr-mb-md-29v, .fr-my-md-29v {
+ margin-bottom: 7.25rem !important;
+ }
+
+ .fr-m-md-30v, .fr-m-md-15w {
+ margin: 7.5rem !important;
+ }
+
+ .fr-ml-md-30v, .fr-ml-md-15w, .fr-mx-md-30v, .fr-mx-md-15w {
+ margin-left: 7.5rem !important;
+ }
+
+ .fr-mr-md-30v, .fr-mr-md-15w, .fr-mx-md-30v, .fr-mx-md-15w {
+ margin-right: 7.5rem !important;
+ }
+
+ .fr-mt-md-30v, .fr-mt-md-15w, .fr-my-md-30v, .fr-my-md-15w {
+ margin-top: 7.5rem !important;
+ }
+
+ .fr-mb-md-30v, .fr-mb-md-15w, .fr-my-md-30v, .fr-my-md-15w {
+ margin-bottom: 7.5rem !important;
+ }
+
+ .fr-m-md-31v {
+ margin: 7.75rem !important;
+ }
+
+ .fr-ml-md-31v, .fr-mx-md-31v {
+ margin-left: 7.75rem !important;
+ }
+
+ .fr-mr-md-31v, .fr-mx-md-31v {
+ margin-right: 7.75rem !important;
+ }
+
+ .fr-mt-md-31v, .fr-my-md-31v {
+ margin-top: 7.75rem !important;
+ }
+
+ .fr-mb-md-31v, .fr-my-md-31v {
+ margin-bottom: 7.75rem !important;
+ }
+
+ .fr-m-md-32v, .fr-m-md-16w {
+ margin: 8rem !important;
+ }
+
+ .fr-ml-md-32v, .fr-ml-md-16w, .fr-mx-md-32v, .fr-mx-md-16w {
+ margin-left: 8rem !important;
+ }
+
+ .fr-mr-md-32v, .fr-mr-md-16w, .fr-mx-md-32v, .fr-mx-md-16w {
+ margin-right: 8rem !important;
+ }
+
+ .fr-mt-md-32v, .fr-mt-md-16w, .fr-my-md-32v, .fr-my-md-16w {
+ margin-top: 8rem !important;
+ }
+
+ .fr-mb-md-32v, .fr-mb-md-16w, .fr-my-md-32v, .fr-my-md-16w {
+ margin-bottom: 8rem !important;
+ }
+
+ .fr-m-md-auto {
+ margin: auto;
+ }
+
+ .fr-ml-md-auto, .fr-mx-md-auto {
+ margin-left: auto;
+ }
+
+ .fr-mr-md-auto, .fr-mx-md-auto {
+ margin-right: auto;
+ }
+
+ .fr-mt-md-auto, .fr-my-md-auto {
+ margin-top: auto;
+ }
+
+ .fr-mb-md-auto, .fr-my-md-auto {
+ margin-bottom: auto;
+ }
+
+ .fr-p-md-0 {
+ padding: 0 !important;
+ }
+
+ .fr-pl-md-0, .fr-px-md-0 {
+ padding-left: 0 !important;
+ }
+
+ .fr-pr-md-0, .fr-px-md-0 {
+ padding-right: 0 !important;
+ }
+
+ .fr-pt-md-0, .fr-py-md-0 {
+ padding-top: 0 !important;
+ }
+
+ .fr-pb-md-0, .fr-py-md-0 {
+ padding-bottom: 0 !important;
+ }
+
+ .fr-p-md-1v {
+ padding: 0.25rem !important;
+ }
+
+ .fr-pl-md-1v, .fr-px-md-1v {
+ padding-left: 0.25rem !important;
+ }
+
+ .fr-pr-md-1v, .fr-px-md-1v {
+ padding-right: 0.25rem !important;
+ }
+
+ .fr-pt-md-1v, .fr-py-md-1v {
+ padding-top: 0.25rem !important;
+ }
+
+ .fr-pb-md-1v, .fr-py-md-1v {
+ padding-bottom: 0.25rem !important;
+ }
+
+ .fr-p-md-2v, .fr-p-md-1w {
+ padding: 0.5rem !important;
+ }
+
+ .fr-pl-md-2v, .fr-pl-md-1w, .fr-px-md-2v, .fr-px-md-1w {
+ padding-left: 0.5rem !important;
+ }
+
+ .fr-pr-md-2v, .fr-pr-md-1w, .fr-px-md-2v, .fr-px-md-1w {
+ padding-right: 0.5rem !important;
+ }
+
+ .fr-pt-md-2v, .fr-pt-md-1w, .fr-py-md-2v, .fr-py-md-1w {
+ padding-top: 0.5rem !important;
+ }
+
+ .fr-pb-md-2v, .fr-pb-md-1w, .fr-py-md-2v, .fr-py-md-1w {
+ padding-bottom: 0.5rem !important;
+ }
+
+ .fr-p-md-3v {
+ padding: 0.75rem !important;
+ }
+
+ .fr-pl-md-3v, .fr-px-md-3v {
+ padding-left: 0.75rem !important;
+ }
+
+ .fr-pr-md-3v, .fr-px-md-3v {
+ padding-right: 0.75rem !important;
+ }
+
+ .fr-pt-md-3v, .fr-py-md-3v {
+ padding-top: 0.75rem !important;
+ }
+
+ .fr-pb-md-3v, .fr-py-md-3v {
+ padding-bottom: 0.75rem !important;
+ }
+
+ .fr-p-md-4v, .fr-p-md-2w {
+ padding: 1rem !important;
+ }
+
+ .fr-pl-md-4v, .fr-pl-md-2w, .fr-px-md-4v, .fr-px-md-2w {
+ padding-left: 1rem !important;
+ }
+
+ .fr-pr-md-4v, .fr-pr-md-2w, .fr-px-md-4v, .fr-px-md-2w {
+ padding-right: 1rem !important;
+ }
+
+ .fr-pt-md-4v, .fr-pt-md-2w, .fr-py-md-4v, .fr-py-md-2w {
+ padding-top: 1rem !important;
+ }
+
+ .fr-pb-md-4v, .fr-pb-md-2w, .fr-py-md-4v, .fr-py-md-2w {
+ padding-bottom: 1rem !important;
+ }
+
+ .fr-p-md-5v {
+ padding: 1.25rem !important;
+ }
+
+ .fr-pl-md-5v, .fr-px-md-5v {
+ padding-left: 1.25rem !important;
+ }
+
+ .fr-pr-md-5v, .fr-px-md-5v {
+ padding-right: 1.25rem !important;
+ }
+
+ .fr-pt-md-5v, .fr-py-md-5v {
+ padding-top: 1.25rem !important;
+ }
+
+ .fr-pb-md-5v, .fr-py-md-5v {
+ padding-bottom: 1.25rem !important;
+ }
+
+ .fr-p-md-6v, .fr-p-md-3w {
+ padding: 1.5rem !important;
+ }
+
+ .fr-pl-md-6v, .fr-pl-md-3w, .fr-px-md-6v, .fr-px-md-3w {
+ padding-left: 1.5rem !important;
+ }
+
+ .fr-pr-md-6v, .fr-pr-md-3w, .fr-px-md-6v, .fr-px-md-3w {
+ padding-right: 1.5rem !important;
+ }
+
+ .fr-pt-md-6v, .fr-pt-md-3w, .fr-py-md-6v, .fr-py-md-3w {
+ padding-top: 1.5rem !important;
+ }
+
+ .fr-pb-md-6v, .fr-pb-md-3w, .fr-py-md-6v, .fr-py-md-3w {
+ padding-bottom: 1.5rem !important;
+ }
+
+ .fr-p-md-7v {
+ padding: 1.75rem !important;
+ }
+
+ .fr-pl-md-7v, .fr-px-md-7v {
+ padding-left: 1.75rem !important;
+ }
+
+ .fr-pr-md-7v, .fr-px-md-7v {
+ padding-right: 1.75rem !important;
+ }
+
+ .fr-pt-md-7v, .fr-py-md-7v {
+ padding-top: 1.75rem !important;
+ }
+
+ .fr-pb-md-7v, .fr-py-md-7v {
+ padding-bottom: 1.75rem !important;
+ }
+
+ .fr-p-md-8v, .fr-p-md-4w {
+ padding: 2rem !important;
+ }
+
+ .fr-pl-md-8v, .fr-pl-md-4w, .fr-px-md-8v, .fr-px-md-4w {
+ padding-left: 2rem !important;
+ }
+
+ .fr-pr-md-8v, .fr-pr-md-4w, .fr-px-md-8v, .fr-px-md-4w {
+ padding-right: 2rem !important;
+ }
+
+ .fr-pt-md-8v, .fr-pt-md-4w, .fr-py-md-8v, .fr-py-md-4w {
+ padding-top: 2rem !important;
+ }
+
+ .fr-pb-md-8v, .fr-pb-md-4w, .fr-py-md-8v, .fr-py-md-4w {
+ padding-bottom: 2rem !important;
+ }
+
+ .fr-p-md-9v {
+ padding: 2.25rem !important;
+ }
+
+ .fr-pl-md-9v, .fr-px-md-9v {
+ padding-left: 2.25rem !important;
+ }
+
+ .fr-pr-md-9v, .fr-px-md-9v {
+ padding-right: 2.25rem !important;
+ }
+
+ .fr-pt-md-9v, .fr-py-md-9v {
+ padding-top: 2.25rem !important;
+ }
+
+ .fr-pb-md-9v, .fr-py-md-9v {
+ padding-bottom: 2.25rem !important;
+ }
+
+ .fr-p-md-10v, .fr-p-md-5w {
+ padding: 2.5rem !important;
+ }
+
+ .fr-pl-md-10v, .fr-pl-md-5w, .fr-px-md-10v, .fr-px-md-5w {
+ padding-left: 2.5rem !important;
+ }
+
+ .fr-pr-md-10v, .fr-pr-md-5w, .fr-px-md-10v, .fr-px-md-5w {
+ padding-right: 2.5rem !important;
+ }
+
+ .fr-pt-md-10v, .fr-pt-md-5w, .fr-py-md-10v, .fr-py-md-5w {
+ padding-top: 2.5rem !important;
+ }
+
+ .fr-pb-md-10v, .fr-pb-md-5w, .fr-py-md-10v, .fr-py-md-5w {
+ padding-bottom: 2.5rem !important;
+ }
+
+ .fr-p-md-11v {
+ padding: 2.75rem !important;
+ }
+
+ .fr-pl-md-11v, .fr-px-md-11v {
+ padding-left: 2.75rem !important;
+ }
+
+ .fr-pr-md-11v, .fr-px-md-11v {
+ padding-right: 2.75rem !important;
+ }
+
+ .fr-pt-md-11v, .fr-py-md-11v {
+ padding-top: 2.75rem !important;
+ }
+
+ .fr-pb-md-11v, .fr-py-md-11v {
+ padding-bottom: 2.75rem !important;
+ }
+
+ .fr-p-md-12v, .fr-p-md-6w {
+ padding: 3rem !important;
+ }
+
+ .fr-pl-md-12v, .fr-pl-md-6w, .fr-px-md-12v, .fr-px-md-6w {
+ padding-left: 3rem !important;
+ }
+
+ .fr-pr-md-12v, .fr-pr-md-6w, .fr-px-md-12v, .fr-px-md-6w {
+ padding-right: 3rem !important;
+ }
+
+ .fr-pt-md-12v, .fr-pt-md-6w, .fr-py-md-12v, .fr-py-md-6w {
+ padding-top: 3rem !important;
+ }
+
+ .fr-pb-md-12v, .fr-pb-md-6w, .fr-py-md-12v, .fr-py-md-6w {
+ padding-bottom: 3rem !important;
+ }
+
+ .fr-p-md-13v {
+ padding: 3.25rem !important;
+ }
+
+ .fr-pl-md-13v, .fr-px-md-13v {
+ padding-left: 3.25rem !important;
+ }
+
+ .fr-pr-md-13v, .fr-px-md-13v {
+ padding-right: 3.25rem !important;
+ }
+
+ .fr-pt-md-13v, .fr-py-md-13v {
+ padding-top: 3.25rem !important;
+ }
+
+ .fr-pb-md-13v, .fr-py-md-13v {
+ padding-bottom: 3.25rem !important;
+ }
+
+ .fr-p-md-14v, .fr-p-md-7w {
+ padding: 3.5rem !important;
+ }
+
+ .fr-pl-md-14v, .fr-pl-md-7w, .fr-px-md-14v, .fr-px-md-7w {
+ padding-left: 3.5rem !important;
+ }
+
+ .fr-pr-md-14v, .fr-pr-md-7w, .fr-px-md-14v, .fr-px-md-7w {
+ padding-right: 3.5rem !important;
+ }
+
+ .fr-pt-md-14v, .fr-pt-md-7w, .fr-py-md-14v, .fr-py-md-7w {
+ padding-top: 3.5rem !important;
+ }
+
+ .fr-pb-md-14v, .fr-pb-md-7w, .fr-py-md-14v, .fr-py-md-7w {
+ padding-bottom: 3.5rem !important;
+ }
+
+ .fr-p-md-15v {
+ padding: 3.75rem !important;
+ }
+
+ .fr-pl-md-15v, .fr-px-md-15v {
+ padding-left: 3.75rem !important;
+ }
+
+ .fr-pr-md-15v, .fr-px-md-15v {
+ padding-right: 3.75rem !important;
+ }
+
+ .fr-pt-md-15v, .fr-py-md-15v {
+ padding-top: 3.75rem !important;
+ }
+
+ .fr-pb-md-15v, .fr-py-md-15v {
+ padding-bottom: 3.75rem !important;
+ }
+
+ .fr-p-md-16v, .fr-p-md-8w {
+ padding: 4rem !important;
+ }
+
+ .fr-pl-md-16v, .fr-pl-md-8w, .fr-px-md-16v, .fr-px-md-8w {
+ padding-left: 4rem !important;
+ }
+
+ .fr-pr-md-16v, .fr-pr-md-8w, .fr-px-md-16v, .fr-px-md-8w {
+ padding-right: 4rem !important;
+ }
+
+ .fr-pt-md-16v, .fr-pt-md-8w, .fr-py-md-16v, .fr-py-md-8w {
+ padding-top: 4rem !important;
+ }
+
+ .fr-pb-md-16v, .fr-pb-md-8w, .fr-py-md-16v, .fr-py-md-8w {
+ padding-bottom: 4rem !important;
+ }
+
+ .fr-p-md-17v {
+ padding: 4.25rem !important;
+ }
+
+ .fr-pl-md-17v, .fr-px-md-17v {
+ padding-left: 4.25rem !important;
+ }
+
+ .fr-pr-md-17v, .fr-px-md-17v {
+ padding-right: 4.25rem !important;
+ }
+
+ .fr-pt-md-17v, .fr-py-md-17v {
+ padding-top: 4.25rem !important;
+ }
+
+ .fr-pb-md-17v, .fr-py-md-17v {
+ padding-bottom: 4.25rem !important;
+ }
+
+ .fr-p-md-18v, .fr-p-md-9w {
+ padding: 4.5rem !important;
+ }
+
+ .fr-pl-md-18v, .fr-pl-md-9w, .fr-px-md-18v, .fr-px-md-9w {
+ padding-left: 4.5rem !important;
+ }
+
+ .fr-pr-md-18v, .fr-pr-md-9w, .fr-px-md-18v, .fr-px-md-9w {
+ padding-right: 4.5rem !important;
+ }
+
+ .fr-pt-md-18v, .fr-pt-md-9w, .fr-py-md-18v, .fr-py-md-9w {
+ padding-top: 4.5rem !important;
+ }
+
+ .fr-pb-md-18v, .fr-pb-md-9w, .fr-py-md-18v, .fr-py-md-9w {
+ padding-bottom: 4.5rem !important;
+ }
+
+ .fr-p-md-19v {
+ padding: 4.75rem !important;
+ }
+
+ .fr-pl-md-19v, .fr-px-md-19v {
+ padding-left: 4.75rem !important;
+ }
+
+ .fr-pr-md-19v, .fr-px-md-19v {
+ padding-right: 4.75rem !important;
+ }
+
+ .fr-pt-md-19v, .fr-py-md-19v {
+ padding-top: 4.75rem !important;
+ }
+
+ .fr-pb-md-19v, .fr-py-md-19v {
+ padding-bottom: 4.75rem !important;
+ }
+
+ .fr-p-md-20v, .fr-p-md-10w {
+ padding: 5rem !important;
+ }
+
+ .fr-pl-md-20v, .fr-pl-md-10w, .fr-px-md-20v, .fr-px-md-10w {
+ padding-left: 5rem !important;
+ }
+
+ .fr-pr-md-20v, .fr-pr-md-10w, .fr-px-md-20v, .fr-px-md-10w {
+ padding-right: 5rem !important;
+ }
+
+ .fr-pt-md-20v, .fr-pt-md-10w, .fr-py-md-20v, .fr-py-md-10w {
+ padding-top: 5rem !important;
+ }
+
+ .fr-pb-md-20v, .fr-pb-md-10w, .fr-py-md-20v, .fr-py-md-10w {
+ padding-bottom: 5rem !important;
+ }
+
+ .fr-p-md-21v {
+ padding: 5.25rem !important;
+ }
+
+ .fr-pl-md-21v, .fr-px-md-21v {
+ padding-left: 5.25rem !important;
+ }
+
+ .fr-pr-md-21v, .fr-px-md-21v {
+ padding-right: 5.25rem !important;
+ }
+
+ .fr-pt-md-21v, .fr-py-md-21v {
+ padding-top: 5.25rem !important;
+ }
+
+ .fr-pb-md-21v, .fr-py-md-21v {
+ padding-bottom: 5.25rem !important;
+ }
+
+ .fr-p-md-22v, .fr-p-md-11w {
+ padding: 5.5rem !important;
+ }
+
+ .fr-pl-md-22v, .fr-pl-md-11w, .fr-px-md-22v, .fr-px-md-11w {
+ padding-left: 5.5rem !important;
+ }
+
+ .fr-pr-md-22v, .fr-pr-md-11w, .fr-px-md-22v, .fr-px-md-11w {
+ padding-right: 5.5rem !important;
+ }
+
+ .fr-pt-md-22v, .fr-pt-md-11w, .fr-py-md-22v, .fr-py-md-11w {
+ padding-top: 5.5rem !important;
+ }
+
+ .fr-pb-md-22v, .fr-pb-md-11w, .fr-py-md-22v, .fr-py-md-11w {
+ padding-bottom: 5.5rem !important;
+ }
+
+ .fr-p-md-23v {
+ padding: 5.75rem !important;
+ }
+
+ .fr-pl-md-23v, .fr-px-md-23v {
+ padding-left: 5.75rem !important;
+ }
+
+ .fr-pr-md-23v, .fr-px-md-23v {
+ padding-right: 5.75rem !important;
+ }
+
+ .fr-pt-md-23v, .fr-py-md-23v {
+ padding-top: 5.75rem !important;
+ }
+
+ .fr-pb-md-23v, .fr-py-md-23v {
+ padding-bottom: 5.75rem !important;
+ }
+
+ .fr-p-md-24v, .fr-p-md-12w {
+ padding: 6rem !important;
+ }
+
+ .fr-pl-md-24v, .fr-pl-md-12w, .fr-px-md-24v, .fr-px-md-12w {
+ padding-left: 6rem !important;
+ }
+
+ .fr-pr-md-24v, .fr-pr-md-12w, .fr-px-md-24v, .fr-px-md-12w {
+ padding-right: 6rem !important;
+ }
+
+ .fr-pt-md-24v, .fr-pt-md-12w, .fr-py-md-24v, .fr-py-md-12w {
+ padding-top: 6rem !important;
+ }
+
+ .fr-pb-md-24v, .fr-pb-md-12w, .fr-py-md-24v, .fr-py-md-12w {
+ padding-bottom: 6rem !important;
+ }
+
+ .fr-p-md-25v {
+ padding: 6.25rem !important;
+ }
+
+ .fr-pl-md-25v, .fr-px-md-25v {
+ padding-left: 6.25rem !important;
+ }
+
+ .fr-pr-md-25v, .fr-px-md-25v {
+ padding-right: 6.25rem !important;
+ }
+
+ .fr-pt-md-25v, .fr-py-md-25v {
+ padding-top: 6.25rem !important;
+ }
+
+ .fr-pb-md-25v, .fr-py-md-25v {
+ padding-bottom: 6.25rem !important;
+ }
+
+ .fr-p-md-26v, .fr-p-md-13w {
+ padding: 6.5rem !important;
+ }
+
+ .fr-pl-md-26v, .fr-pl-md-13w, .fr-px-md-26v, .fr-px-md-13w {
+ padding-left: 6.5rem !important;
+ }
+
+ .fr-pr-md-26v, .fr-pr-md-13w, .fr-px-md-26v, .fr-px-md-13w {
+ padding-right: 6.5rem !important;
+ }
+
+ .fr-pt-md-26v, .fr-pt-md-13w, .fr-py-md-26v, .fr-py-md-13w {
+ padding-top: 6.5rem !important;
+ }
+
+ .fr-pb-md-26v, .fr-pb-md-13w, .fr-py-md-26v, .fr-py-md-13w {
+ padding-bottom: 6.5rem !important;
+ }
+
+ .fr-p-md-27v {
+ padding: 6.75rem !important;
+ }
+
+ .fr-pl-md-27v, .fr-px-md-27v {
+ padding-left: 6.75rem !important;
+ }
+
+ .fr-pr-md-27v, .fr-px-md-27v {
+ padding-right: 6.75rem !important;
+ }
+
+ .fr-pt-md-27v, .fr-py-md-27v {
+ padding-top: 6.75rem !important;
+ }
+
+ .fr-pb-md-27v, .fr-py-md-27v {
+ padding-bottom: 6.75rem !important;
+ }
+
+ .fr-p-md-28v, .fr-p-md-14w {
+ padding: 7rem !important;
+ }
+
+ .fr-pl-md-28v, .fr-pl-md-14w, .fr-px-md-28v, .fr-px-md-14w {
+ padding-left: 7rem !important;
+ }
+
+ .fr-pr-md-28v, .fr-pr-md-14w, .fr-px-md-28v, .fr-px-md-14w {
+ padding-right: 7rem !important;
+ }
+
+ .fr-pt-md-28v, .fr-pt-md-14w, .fr-py-md-28v, .fr-py-md-14w {
+ padding-top: 7rem !important;
+ }
+
+ .fr-pb-md-28v, .fr-pb-md-14w, .fr-py-md-28v, .fr-py-md-14w {
+ padding-bottom: 7rem !important;
+ }
+
+ .fr-p-md-29v {
+ padding: 7.25rem !important;
+ }
+
+ .fr-pl-md-29v, .fr-px-md-29v {
+ padding-left: 7.25rem !important;
+ }
+
+ .fr-pr-md-29v, .fr-px-md-29v {
+ padding-right: 7.25rem !important;
+ }
+
+ .fr-pt-md-29v, .fr-py-md-29v {
+ padding-top: 7.25rem !important;
+ }
+
+ .fr-pb-md-29v, .fr-py-md-29v {
+ padding-bottom: 7.25rem !important;
+ }
+
+ .fr-p-md-30v, .fr-p-md-15w {
+ padding: 7.5rem !important;
+ }
+
+ .fr-pl-md-30v, .fr-pl-md-15w, .fr-px-md-30v, .fr-px-md-15w {
+ padding-left: 7.5rem !important;
+ }
+
+ .fr-pr-md-30v, .fr-pr-md-15w, .fr-px-md-30v, .fr-px-md-15w {
+ padding-right: 7.5rem !important;
+ }
+
+ .fr-pt-md-30v, .fr-pt-md-15w, .fr-py-md-30v, .fr-py-md-15w {
+ padding-top: 7.5rem !important;
+ }
+
+ .fr-pb-md-30v, .fr-pb-md-15w, .fr-py-md-30v, .fr-py-md-15w {
+ padding-bottom: 7.5rem !important;
+ }
+
+ .fr-p-md-31v {
+ padding: 7.75rem !important;
+ }
+
+ .fr-pl-md-31v, .fr-px-md-31v {
+ padding-left: 7.75rem !important;
+ }
+
+ .fr-pr-md-31v, .fr-px-md-31v {
+ padding-right: 7.75rem !important;
+ }
+
+ .fr-pt-md-31v, .fr-py-md-31v {
+ padding-top: 7.75rem !important;
+ }
+
+ .fr-pb-md-31v, .fr-py-md-31v {
+ padding-bottom: 7.75rem !important;
+ }
+
+ .fr-p-md-32v, .fr-p-md-16w {
+ padding: 8rem !important;
+ }
+
+ .fr-pl-md-32v, .fr-pl-md-16w, .fr-px-md-32v, .fr-px-md-16w {
+ padding-left: 8rem !important;
+ }
+
+ .fr-pr-md-32v, .fr-pr-md-16w, .fr-px-md-32v, .fr-px-md-16w {
+ padding-right: 8rem !important;
+ }
+
+ .fr-pt-md-32v, .fr-pt-md-16w, .fr-py-md-32v, .fr-py-md-16w {
+ padding-top: 8rem !important;
+ }
+
+ .fr-pb-md-32v, .fr-pb-md-16w, .fr-py-md-32v, .fr-py-md-16w {
+ padding-bottom: 8rem !important;
+ }
+}
+```
diff --git a/src/stories/titles.stories.js b/src/stories/fondamentaux/titles.stories.js
similarity index 97%
rename from src/stories/titles.stories.js
rename to src/stories/fondamentaux/titles.stories.js
index b16a165f..c0cb96b7 100644
--- a/src/stories/titles.stories.js
+++ b/src/stories/fondamentaux/titles.stories.js
@@ -1,11 +1,10 @@
export default {
- title: 'Basic/Titres',
+ title: 'Fondamentaux/1. Titres',
argTypes: {
dark: {
control: 'boolean',
description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
},
-
},
}
diff --git a/src/stories/fondamentaux/variables.stories.mdx b/src/stories/fondamentaux/variables.stories.mdx
new file mode 100644
index 00000000..32bbc29a
--- /dev/null
+++ b/src/stories/fondamentaux/variables.stories.mdx
@@ -0,0 +1,218 @@
+
+
+# Les Couleurs et autres variables
+
+## Les Couleurs
+
+```css
+:root {
+ --bs100: #f6f8fc;
+ --bf100: #f2f2f9;
+ --bf300: #bfbfe3;
+
+ --bf500: #000091;
+ --bf500-plain: #000091;
+ --w-bf500: #fff;
+ --bf300-plain: #9a9aff;
+ --bf200-bf300: #ececff;
+ --bf100-g750: #f5f5ff;
+ --t-plain: transparent;
+ --t-w: transparent;
+ --g800: #1e1e1e;
+ --g700: #383838;
+ --g600: #6a6a6a;
+ --g500: #9c9c9c;
+ --g400: #cecece;
+ --g300: #e7e7e7;
+ --g200: #f0f0f0;
+ --g100: #f8f8f8;
+ --w: #fff;
+ --beige: #f9f8f6;
+ --g800-plain: #1e1e1e;
+ --g600-g400: #6a6a6a;
+ --g400-t: #cecece;
+ --g100-g800: #f8f8f8;
+ --w-g750: #fff;
+ --focus: #2a7ffe;
+ --info: #0762c8;
+ --success: #008941;
+ --error: #e10600;
+ --rm300: #f7bfc3;
+ --rm500: #e1000f;
+ --scroll-shadow: rgba(30, 30, 30, 0.16);
+ --overlay: rgba(156, 156, 156, 0.32);
+
+ --color-hover: rgba(0, 0, 221, 0.5);
+ --color-active: rgba(41, 41, 255, 0.5);
+
+ --block-color-hover: hsla(0,0%,87.8%,0.5);
+ --block-color-active: hsla(0,0%,76.1%,0.5);
+
+ --in-content-page-background: rgb(28,27,34);
+ --in-content-page-color: rgb(251,251,254);
+ --in-content-deemphasized-text: rgb(191,191,201);
+ --in-content-box-background: rgb(35, 34, 43);
+ --in-content-box-background-odd: rgba(249,249,250,0.05);
+ --in-content-box-info-background: rgba(249,249,250,0.15);
+ --in-content-border-color: rgba(249,249,250,0.2);
+ --in-content-border-hover: rgba(249,249,250,0.3);
+ --in-content-border-invalid: rgb(255,132,139);
+ --in-content-error-text-color: #FF9AA2;
+ --in-content-button-background: rgb(43,42,51);
+ --in-content-button-background-hover: rgb(82,82,94);
+ --in-content-button-background-active: rgb(91,91,102);
+ --in-content-icon-color: rgb(251,251,254);
+ --in-content-primary-button-text-color: rgb(43,42,51);
+ --in-content-primary-button-background: rgb(0,221,255);
+ --in-content-primary-button-background-hover: rgb(128,235,255);
+ --in-content-primary-button-background-active: rgb(170,242,255);
+ --in-content-danger-button-background: #ff848b;
+ --in-content-danger-button-background-hover: #ffbdc5;
+ --in-content-danger-button-background-active: #ffdfe7;
+ --in-content-table-background: rgb(35, 34, 43);
+ --in-content-table-border-dark-color: rgba(249,249,250,0.2);
+ --in-content-table-header-background: rgb(5, 64, 150);
+ --in-content-table-header-color: var(--in-content-page-color);
+ --in-content-dialog-header-background: rgba(249,249,250,0.05);
+ --in-content-accent-color: var(--in-content-primary-button-background);
+ --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
+ --in-content-link-color: var(--in-content-primary-button-background);
+ --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
+ --in-content-link-color-active: var(--in-content-primary-button-background-active);
+ --in-content-link-color-visited: var(--in-content-link-color);
+ --card-outline-color: var(--grey-60);
+ --dialog-warning-text-color: var(--red-40);
+ --is-link: '';
+ scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+ --ul-type: none;
+ --ol-type: none;
+
+ --block-color-hover: rgba(224, 224, 224, 0.5);
+ --block-color-active: rgba(194, 194, 194, 0.5);
+
+ --bg-success: #00894122;
+ --bg-error: #e1060022;
+ --bg-warning: #f902;
+ --bg-info: #0762c822;
+}
+
+:host, :root {
+ --in-content-page-color: rgb(21, 20, 26);
+ --in-content-page-background: #fff;
+ --in-content-text-color: var(--in-content-page-color);
+ --in-content-deemphasized-text: rgb(91, 91, 102);
+ --in-content-box-background: #fff;
+ --in-content-box-background-odd: rgba(12, 12, 13, 0.05);
+ --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
+ --in-content-box-info-background: #f0f0f4;
+ --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
+ --in-content-item-hover-text: var(--in-content-page-color);
+ --in-content-item-selected: var(--in-content-primary-button-background);
+ --in-content-item-selected-text: var(--in-content-primary-button-text-color);
+ --in-content-icon-color: rgb(91,91,102);
+ --in-content-accent-color: #0a84ff;
+ --in-content-accent-color-active: #0060df;
+ --in-content-border-hover: var(--grey-90-a50);
+ --in-content-border-invalid: var(--red-50);
+ --in-content-border-color: #d7d7db;
+ --in-content-error-text-color: #c50042;
+ --in-content-link-color: var(--blue-60);
+ --in-content-link-color-hover: var(--blue-70);
+ --in-content-link-color-active: var(--blue-80);
+ --in-content-link-color-visited: var(--blue-60);
+ --in-content-button-text-color: var(--in-content-text-color);
+ --in-content-button-text-color-hover: var(--in-content-text-color);
+ --in-content-button-background: rgba(207,207,216,.33);
+ --in-content-button-background-hover: rgba(207,207,216,.66);
+ --in-content-button-background-active: rgb(207,207,216);
+ --in-content-primary-button-text-color: rgb(251,251,254);
+ --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
+ --in-content-primary-button-background: #0061e0;
+ --in-content-primary-button-background-hover: #0250bb;
+ --in-content-primary-button-background-active: #053e94;
+ --in-content-danger-button-background: #e22850;
+ --in-content-danger-button-background-hover: #c50042;
+ --in-content-danger-button-background-active: #810220;
+ --in-content-focus-outline-color: var(--in-content-primary-button-background);
+ --in-content-button-border-radius: 4px;
+ --in-content-button-horizontal-padding: 15px;
+ --in-content-button-vertical-padding: 7px;
+ --in-content-table-background: #f8f8fa;
+ --in-content-table-border-dark-color: #d1d1d1;
+ --in-content-table-header-background: #0a84ff;
+ --in-content-table-header-color: #ffffff;
+ --in-content-dialog-header-background: #f1f1f1;
+ --in-content-sidebar-width: 240px;
+ --dialog-warning-text-color: var(--red-60);
+ --checkbox-border-color: var(--in-content-box-border-color);
+ --checkbox-unchecked-bgcolor: var(--in-content-button-background);
+ --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
+ --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
+ --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
+ --checkbox-checked-color: var(--in-content-primary-button-text-color);
+ --checkbox-checked-border-color: transparent;
+ --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
+ --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
+}
+
+[data-rf-theme="dark"] {
+ --bf500: #9a9aff;
+ --bf500-plain: #000091;
+ --w-bf500: #000091;
+ --bf300-plain: #9a9aff;
+ --bf200-bf300: #9a9aff;
+ --bf100-g750: #2a2a2a;
+ --t-w: #fff;
+ --t-plain: transparent;
+ --g800: #fff;
+ --g700: #f0f0f0;
+ --g600: #e7e7e7;
+ --g400: #9c9c9c;
+ --g300: #6a6a6a;
+ --g200: #383838;
+ --g100: #2a2a2a;
+ --w: #1e1e1e;
+ --g100-g800: #1e1e1e;
+ --g600-g400: #cecece;
+ --focus: #5398ff;
+ --rm500: #f7bfc3;
+ --beige: #2a2a2a;
+ --g800-plain: #1e1e1e;
+ --g600-g400: #cecece;
+ --g400-t: transparent;
+ --g100-g800: #1e1e1e;
+ --w-g750: #2a2a2a;
+ --focus: #5398ff;
+ --info: #2b8bf7;
+ --success: #00eb5e;
+ --error: #f33;
+ --rm300: #383838;
+ --rm500: #f7bfc3;
+ --scroll-shadow: #1e1e1e;
+ --overlay: rgba(206, 206, 206, 0.32);
+
+ --color-hover: rgba(71, 71, 255, 0.5);
+ --color-active: rgba(0, 0, 243, 0.5);
+
+ --bg-success: #00eb5e33;
+ --bg-error: #f333;
+ --bg-warning: #f903;
+ --bg-info: #2b8bf733;
+}
+```
+
+## Les autres variables
+
+```css
+--link-underline: 0 1px 0 0 currentColor;
+--link-blank-font: normal normal normal 1rem/1 dsfr-icons;
+--link-blank-content: "\00a0";
+--ul-type: "●\00a0\00a0";
+--ol-type: decimal;
+--ul-start: 1rem;
+--ol-start: 1.5rem;
+--xl-block: 0.5rem;
+--li-bottom: 0.25rem;
+--xl-base: 1em;
+--ol-content: counters(li-counter, ".") ".\00a0\00a0";
+```
diff --git a/tests/unit/jest-setup.js b/tests/unit/jest-setup.js
index 981e7382..61944d65 100644
--- a/tests/unit/jest-setup.js
+++ b/tests/unit/jest-setup.js
@@ -1,21 +1,6 @@
-import 'core-js/stable'
+// import 'core-js/stable'
import 'regenerator-runtime/runtime'
import '@testing-library/jest-dom'
-import { config } from '@vue/test-utils'
-import {
- VueRouterMock,
- createRouterMock,
- injectRouterMock,
-} from 'vue-router-mock'
jest.mock('oh-vue-icons/dist/v3/icon.es', () => ({ add () {}, template: '' }))
jest.mock('oh-vue-icons/icons/ri/index.js', () => ({}))
-
-// create one router per test file
-const router = createRouterMock()
-beforeEach(() => {
- injectRouterMock(router)
-})
-
-// Add properties to the wrapper
-config.plugins.VueWrapper.install(VueRouterMock)
diff --git a/vite.config.js b/vite.config.js
index d0b3506d..42d74f32 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -23,6 +23,10 @@ export default defineConfig({
find: '@',
replacement: path.resolve(projectDir, 'src'),
},
+ {
+ find: 'vue',
+ replacement: 'vue/dist/vue.esm-bundler.js',
+ },
],
},
build: {