From adf571131be6a7b5bb112b204636491ed72397d5 Mon Sep 17 00:00:00 2001
From: Emmanuel Raviart <emmanuel@raviart.com>
Date: Mon, 14 Oct 2024 17:12:47 +0200
Subject: [PATCH] Enable prettier-plugin-tailwindcss
---
.prettierrc | 2 +-
src/app.css | 12 +-
.../components/BudgetConnexionModal.svelte | 42 ++---
.../BudgetSimulationSharingModal.svelte | 34 ++--
src/lib/components/ModificationsPanel.svelte | 16 +-
src/lib/components/NavBar.svelte | 88 ++++-----
.../components/PlfVariablesListIntro.svelte | 20 +-
src/lib/components/ReadMore.svelte | 6 +-
src/lib/components/ReformsChanges.svelte | 48 ++---
.../components/ReplaceTestCaseModal.svelte | 14 +-
src/lib/components/SelectChip.svelte | 6 +-
.../components/SourcesMethodTooltip.svelte | 14 +-
.../TestCaseSimulationSharingModal.svelte | 30 +--
src/lib/components/Toggletip.svelte | 2 +-
src/lib/components/Tooltip.svelte | 2 +-
src/lib/components/ValueChange.svelte | 20 +-
src/lib/components/ValueChangeCompare.svelte | 8 +-
.../ValueChangeGagnantsPerdants.svelte | 36 ++--
src/lib/components/ValueChangeGraph.svelte | 12 +-
.../components/WaterfallCompareView.svelte | 42 ++---
src/lib/components/WaterfallPlainView.svelte | 18 +-
src/lib/components/WaterfallView.svelte | 44 ++---
.../components/accordion/AccordionItem.svelte | 2 +-
.../components/budget/BudgetDetailView.svelte | 20 +-
src/lib/components/budget/BudgetLayout.svelte | 90 ++++-----
.../budget/GagnantsPerdantsView.svelte | 6 +-
.../budget/SkeletonLoaderBudget.svelte | 32 ++--
.../components/budget/StaticAggregates.svelte | 52 +++---
.../budget/WithoutBudgetCard.svelte | 24 +--
.../parameters/ParameterView.svelte | 2 +-
.../components/pictos/PictoOpenFisca.svelte | 2 +-
.../piece_of_cake/DragSelect.svelte | 4 +-
.../piece_of_cake/SharedTooltip.svelte | 4 +-
src/lib/components/piece_of_cake/Svg.svelte | 2 +-
src/lib/components/search/NavBarSearch.svelte | 8 +-
src/lib/components/search/Search.svelte | 4 +-
.../components/search/WelcomeSearch.svelte | 6 +-
.../test_cases/OilSpendingBill.svelte | 6 +-
.../test_cases/TestCaseCompareModal.svelte | 2 +-
.../test_cases/TestCaseCompareView.svelte | 2 +-
.../components/test_cases/TestCaseEdit.svelte | 34 ++--
.../TestCaseEditVariablesSearch.svelte | 14 +-
.../test_cases/TestCaseFilters.svelte | 46 ++---
.../test_cases/TestCaseGraph.svelte | 122 ++++++------
.../test_cases/TestCaseGraphXlsxExport.svelte | 6 +-
.../TestCaseScreenshotLayout.svelte | 14 +-
.../test_cases/TestCaseSummary.svelte | 34 ++--
.../components/test_cases/TestCaseView.svelte | 8 +-
.../transverse_pages/AnchorTitle.svelte | 6 +-
.../components/transverse_pages/Footer.svelte | 28 +--
.../variables/InflationLawButton.svelte | 4 +-
.../variables/InflationLawDetails.svelte | 26 +--
.../variables/InflationLawInfoModal.svelte | 4 +-
.../variables/VariableDetail.svelte | 40 ++--
.../variables/VariableHeader.svelte | 12 +-
.../components/variables/VariableInput.svelte | 18 +-
.../variables/VariableReferredInputs.svelte | 16 +-
.../VariableReferredParameterHeader.svelte | 4 +-
.../VariableReferredParameters.svelte | 10 +-
.../VariableReferredScaleAtInstant.svelte | 22 +--
.../VariableReferredScaleParameter.svelte | 2 +-
.../VariableReferredValueParameter.svelte | 14 +-
.../VariableReferredValueView.svelte | 2 +-
.../components/variables/VariableView.svelte | 2 +-
src/routes/+page.svelte | 148 +++++++--------
src/routes/accueil/+page.svelte | 174 +++++++++---------
src/routes/budgets/simulations/+page.svelte | 34 ++--
src/routes/contribuer/+page.svelte | 2 +-
src/routes/fonctionnement/+page.svelte | 60 +++---
.../parameters/[parameter]/edit/+page.svelte | 2 +-
src/routes/variables/[variable]/+page.svelte | 4 +-
71 files changed, 848 insertions(+), 848 deletions(-)
diff --git a/.prettierrc b/.prettierrc
index ee3a4d662..a428fd098 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
{
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
- "plugins": ["prettier-plugin-svelte"],
+ "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"semi": false,
"trailingComma": "all"
}
diff --git a/src/app.css b/src/app.css
index 1f5a1b4f1..dd8d3b17b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,12 +21,12 @@
/* LIEN TEXTE: lien basique à l'intérieur d'un corps de texte, souligné sans changement de couleur*/
.lx-link-text {
- @apply underline hover:decoration-2 underline-offset-4;
+ @apply underline underline-offset-4 hover:decoration-2;
}
/* lien texte, bleu au survol : si besoin de plus de visibilité */
.lx-link-text-le-bleu {
- @apply underline hover:decoration-2 underline-offset-4 hover:text-le-bleu;
+ @apply underline underline-offset-4 hover:text-le-bleu hover:decoration-2;
}
/* LIEN SIMPLE : lien solo (en dehors d'un corps de texte), se caractérise par un écard entre les lettres plus grand*/
@@ -35,17 +35,17 @@
}
/* lien simple, sans soulignement : si besoin de plus de discretion */
.lx-link-simple-no-underline {
- @apply font-sans hover:underline hover:decoration-2 underline-offset-4 tracking-wider cursor-pointer;
+ @apply cursor-pointer font-sans tracking-wider underline-offset-4 hover:underline hover:decoration-2;
}
/* LIEN UPPERCASE : lien solo à la frontière avec un bouton, se caractérise par une casse en majuscule et un écard entre les lettres plus grand*/
.lx-link-uppercase {
- @apply gap-2 uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 hover:text-black text-nowrap text-neutral-700;
+ @apply gap-2 text-nowrap font-semibold uppercase tracking-widest text-neutral-700 decoration-2 underline-offset-4 hover:text-black hover:underline;
}
/* lien uppercase, bleu au survol : si besoin de plus de visibilité */
.lx-link-uppercase-le-bleu {
- @apply gap-2 text-le-bleu uppercase font-semibold tracking-widest hover:underline decoration-2 underline-offset-4 text-nowrap;
+ @apply gap-2 text-nowrap font-semibold uppercase tracking-widest text-le-bleu decoration-2 underline-offset-4 hover:underline;
}
/* *******--- TITRES ---******* */
.lx-titreh2 {
@@ -57,7 +57,7 @@
/* *******--- CARTES ---******* */
/* CARTE : conteneur avec des coins arrondis, de l'ombre et des états au survol/clic */
.lx-card {
- @apply bg-white hover:bg-gray-50 active:bg-gray-100 rounded-lg border shadow-md hover:shadow-lg hover:scale-105 transition-all;
+ @apply rounded-lg border bg-white shadow-md transition-all hover:scale-105 hover:bg-gray-50 hover:shadow-lg active:bg-gray-100;
}
/* carte avec une bordure inférieure le-jaune-dark */
.lx-card-underline-le-vert {
diff --git a/src/lib/components/BudgetConnexionModal.svelte b/src/lib/components/BudgetConnexionModal.svelte
index 201166618..20c026688 100644
--- a/src/lib/components/BudgetConnexionModal.svelte
+++ b/src/lib/components/BudgetConnexionModal.svelte
@@ -98,20 +98,20 @@
leaveTo="opacity-0 scale-95"
>
<div
- class="inline-block align-middle my-8 w-full max-w-4xl p-4 transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all"
+ class="my-8 inline-block w-full max-w-4xl transform overflow-hidden rounded-md bg-white p-4 text-left align-middle shadow-xl transition-all"
>
<div class="flex items-center justify-between">
<button
type="button"
- class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 active:bg-gray-200 ml-auto"
+ class="m-0.5 ml-auto whitespace-normal rounded-lg p-1.5 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-200"
aria-label="Close modal"
on:click={onClose}
><span class="sr-only">Close modal</span>
<iconify-icon class="block text-2xl" icon="ri-close-line" />
</button>
</div>
- <DialogDescription as="div" class="flex flex-col gap-5 md:px-5 py-3">
- <h1 class="w-full text-center text-3xl font-bold mb-8">
+ <DialogDescription as="div" class="flex flex-col gap-5 py-3 md:px-5">
+ <h1 class="mb-8 w-full text-center text-3xl font-bold">
Estimations budgétaires de votre réforme
</h1>
<div class="flex flex-col px-5">
@@ -120,13 +120,13 @@
<br />
Utilisez le simulateur :
</h2>
- <span class="w-full text-center font-normal mt-1.5">
+ <span class="mt-1.5 w-full text-center font-normal">
Identifiez-vous pour obtenir l'impact de votre réforme en moins
d'une minute.
</span>
<div class="mb-8 mt-4 grow-0 place-self-center">
<button
- class="flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="flex items-center gap-2 rounded-md bg-le-bleu px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-blue-800 active:bg-blue-900"
on:click={() => {
/*login(
$displayMode,
@@ -162,39 +162,39 @@
>
</div>
- <div class="flex flex-col gap-10 bg-gray-100 p-5 border-t mt-10">
+ <div class="mt-10 flex flex-col gap-10 border-t bg-gray-100 p-5">
{#if $page.data.canDemandBudgetSimulation}
<section>
<h2 class="w-full text-left text-2xl font-bold">
Demandez le calcul de votre réforme au service
LexImpact :
</h2>
- <p class="w-full text-base font-normal leading-6 mt-1.5 mb-5">
+ <p class="mb-5 mt-1.5 w-full text-base font-normal leading-6">
Après vérification par nos services, si elle est calculable
avec les données dont nous disposons et répond au secret
statistique, la simulation sera rendue publique. Vous serez
alors informé par e-mail :
</p>
{#if !$requestedSimulationSent}
- <span class="font-bold text-sm py-2 pl-10"
+ <span class="py-2 pl-10 text-sm font-bold"
>Votre adresse e-mail :</span
>
<div
- class="flex md:flex-row flex-col w-full px-0 md:px-10 items-center gap-5"
+ class="flex w-full flex-col items-center gap-5 px-0 md:flex-row md:px-10"
>
<div
- class="flex rounded-t-md border-b-2 border-b-black bg-white px-2 grow max-w-lg"
+ class="flex max-w-lg grow rounded-t-md border-b-2 border-b-black bg-white px-2"
>
<input
autocomplete="off"
- class="w-full px-3 py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
+ class="w-full border-none bg-transparent px-3 py-2 text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
placeholder="e-mail@email.fr"
type="email"
bind:value={email}
/>
</div>
<button
- class="flex items-center gap-2 py-2 px-5 shadow-lg bg-white hover:bg-gray-100 active:bg-gray-200 rounded-md border-2 border-le-bleu text-le-bleu text-sm font-bold tracking-[0.085em] uppercase"
+ class="flex items-center gap-2 rounded-md border-2 border-le-bleu bg-white px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-le-bleu shadow-lg hover:bg-gray-100 active:bg-gray-200"
title="Envoyer votre réforme budgétaire avec cet e-mail"
on:click={sendSimulationRequest}
>
@@ -215,7 +215,7 @@
Votre adresse mail semble ne pas être correcte.
</span>
{:else}
- <div class="w-full p-3 text-center bg-yellow-100 font-bold">
+ <div class="w-full bg-yellow-100 p-3 text-center font-bold">
Votre demande de simulation a bien été prise en compte !
</div>
{/if}
@@ -228,20 +228,20 @@
Consultez la liste des simulations budgétaires déjà
disponibles :
</h2>
- <table class="w-full text-sm mt-2">
+ <table class="mt-2 w-full text-sm">
{#each cachedSimulations as cachedSimulation}
<tr
- class="even:bg-white even:bg-opacity-30 odd:bg-gray-200"
+ class="odd:bg-gray-200 even:bg-white even:bg-opacity-30"
>
- <td class="pl-3 pr-10 py-2 text-start"
+ <td class="py-2 pl-3 pr-10 text-start"
>{cachedSimulation.date}</td
>
- <td class="py-2 text-start font-bold font-serif"
+ <td class="py-2 text-start font-serif font-bold"
>{cachedSimulation.title}</td
>
- <td class="pl-10 pr-3 py-2 text-end">
+ <td class="py-2 pl-10 pr-3 text-end">
<button
- class="underline text-gray-600"
+ class="text-gray-600 underline"
on:click={() => {
goto(
`/budgets/simulations/${cachedSimulation.hash}`,
@@ -254,7 +254,7 @@
{/each}
</table>
<button
- class="mt-2 flex items-center gap-3 py-2 px-5 hover:bg-gray-200 active:bg-gray-300 rounded-md underline text-gray-600 text-sm font-bold tracking-[0.085em] uppercase"
+ class="mt-2 flex items-center gap-3 rounded-md px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-gray-600 underline hover:bg-gray-200 active:bg-gray-300"
title="Voir toutes les simulations"
on:click={() => {
goto("/budgets/simulations")
diff --git a/src/lib/components/BudgetSimulationSharingModal.svelte b/src/lib/components/BudgetSimulationSharingModal.svelte
index 0f3cc3ca3..15a606a34 100644
--- a/src/lib/components/BudgetSimulationSharingModal.svelte
+++ b/src/lib/components/BudgetSimulationSharingModal.svelte
@@ -113,7 +113,7 @@
class="fixed inset-0 z-50 overflow-y-auto"
on:close={onClose}
>
- <div class="w-full min-h-screen text-center">
+ <div class="min-h-screen w-full text-center">
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -128,7 +128,7 @@
</TransitionChild>
<TransitionChild
- class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+ class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
@@ -137,12 +137,12 @@
leaveTo="opacity-0 scale-95"
>
<div
- class="w-screen md:max-w-4xl p-4 transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all"
+ class="w-screen transform overflow-hidden rounded-md bg-white p-4 text-left shadow-xl transition-all md:max-w-4xl"
>
<div class="flex items-center justify-between">
<button
type="button"
- class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 active:bg-gray-200 ml-auto"
+ class="m-0.5 ml-auto whitespace-normal rounded-lg p-1.5 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-200"
aria-label="Close modal"
on:click={onClose}
><span class="sr-only">Close modal</span>
@@ -150,7 +150,7 @@
</button>
</div>
<DialogDescription as="div" class="flex flex-col gap-5 py-3">
- <h1 class="w-full text-center text-2xl md:text-3xl font-bold">
+ <h1 class="w-full text-center text-2xl font-bold md:text-3xl">
Enregistrer / partager cette simulation budgétaire
</h1>
<div class="px-4 md:px-32">
@@ -159,23 +159,23 @@
doivent être rendus publics :
</span>
- <div class="w-full flex flex-col gap-2 md:px-12 py-5">
+ <div class="flex w-full flex-col gap-2 py-5 md:px-12">
<label
- class="w-full inline-flex flex-row-reverse items-center justify-between"
+ class="inline-flex w-full flex-row-reverse items-center justify-between"
class:cursor-pointer={!isSimulationShared}
>
<input
type="checkbox"
- class="sr-only peer"
+ class="peer sr-only"
bind:checked={isSimulationShared}
on:change={onChange}
disabled={isSimulationShared}
/>
<div
- class="relative w-11 h-6 bg-le-bleu-light border border-le-bleu peer-checked:border-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-5 peer-checked:after:border-gray-200 after:content-[''] after:absolute after:-top-[1px] after:right-[1.2rem] after:bg-white after:border-le-bleu after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-gray-200"
+ class="peer relative h-6 w-11 rounded-full border border-le-bleu bg-le-bleu-light after:absolute after:-top-[1px] after:right-[1.2rem] after:h-6 after:w-6 after:rounded-full after:border after:border-le-bleu after:bg-white after:transition-all after:content-[''] peer-checked:border-gray-200 peer-checked:bg-gray-200 peer-checked:after:translate-x-5 peer-checked:after:border-gray-200 peer-focus:outline-none"
></div>
<span
- class="uppercase text-sm text-le-bleu peer-checked:text-gray-500"
+ class="text-sm uppercase text-le-bleu peer-checked:text-gray-500"
>
Rendre publique cette simulation
</span>
@@ -186,9 +186,9 @@
</span>
<hr />
{#if isSimulationShared}
- <span class="text-center text-[#18753C] py-2">
+ <span class="py-2 text-center text-[#18753C]">
<iconify-icon
- class="text-lg align-[-0.2rem]"
+ class="align-[-0.2rem] text-lg"
icon="ri-checkbox-circle-fill"
/> La simulation est publiée :
</span>
@@ -196,20 +196,20 @@
<div class="flex justify-around md:justify-center md:gap-4">
<div bind:this={clipboardElement} />
<button
- class="relative shadow-lg bg-le-bleu disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none hover:opacity-90 active:opacity-80 rounded text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="relative rounded bg-le-bleu text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:opacity-90 active:opacity-80 disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none"
disabled={!isSimulationShared}
on:click={copyLink}
title="Copier le lien de la simulation"
>
<span
- class="flex justify-center items-center gap-2 py-2 px-3 md:px-7"
+ class="flex items-center justify-center gap-2 px-3 py-2 md:px-7"
class:invisible={hasClickedCopy}
>
Copier le lien
- <iconify-icon class="text-lg rotate-45" icon="ri-link" />
+ <iconify-icon class="rotate-45 text-lg" icon="ri-link" />
</span>
<span
- class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full flex justify-center items-center gap-2"
+ class="absolute left-1/2 top-1/2 flex h-full w-full -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-2"
class:invisible={!hasClickedCopy}
>
Lien copié
@@ -219,7 +219,7 @@
{#each shareButtons as shareButton}
<a
- class="w-9 h-9 flex justify-center items-center shadow-lg bg-le-bleu hover:opacity-90 active:opacity-80 rounded text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="flex h-9 w-9 items-center justify-center rounded bg-le-bleu text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:opacity-90 active:opacity-80"
class:!bg-gray-200={!isSimulationShared}
class:!text-gray-400={!isSimulationShared}
class:!shadow-none={!isSimulationShared}
diff --git a/src/lib/components/ModificationsPanel.svelte b/src/lib/components/ModificationsPanel.svelte
index 63c3dff2b..4b0520064 100644
--- a/src/lib/components/ModificationsPanel.svelte
+++ b/src/lib/components/ModificationsPanel.svelte
@@ -191,7 +191,7 @@
>
<div slot="activator" class="relative">
<div
- class="flex h-8 grow-0 items-center rounded-md bg-le-jaune-dark px-2 py-1 uppercase text-white shadow-md hover:bg-le-jaune-very-dark hover:bg-opacity-90 focus:outline-none active:bg-le-jaune-very-dark active:text-white text-xs mx-0 2xl:text-sm"
+ class="mx-0 flex h-8 grow-0 items-center rounded-md bg-le-jaune-dark px-2 py-1 text-xs uppercase text-white shadow-md hover:bg-le-jaune-very-dark hover:bg-opacity-90 focus:outline-none active:bg-le-jaune-very-dark active:text-white 2xl:text-sm"
class:!bg-gray-200={modificationsCount === 0}
class:!text-gray-500={modificationsCount === 0}
class:!shadow-none={modificationsCount === 0}
@@ -205,10 +205,10 @@
? "1 modification"
: `${modificationsCount} modifications`}
</div>
- <div class="absolute -top-3 -right-2 flex">
+ <div class="absolute -right-2 -top-3 flex">
{#if billModificationsCount > 0}
<span
- class="z-10 w-5 h-5 flex justify-center items-center shadow rounded-full bg-le-rouge-bill text-black text-xs font-bold tracking-wider border-[1.5px] border-white transition-all duration-200 ease-out-back translate-x-2"
+ class="z-10 flex h-5 w-5 translate-x-2 items-center justify-center rounded-full border-[1.5px] border-white bg-le-rouge-bill text-xs font-bold tracking-wider text-black shadow transition-all duration-200 ease-out-back"
class:translate-x-6={!showBudgetParametersError}
class:!translate-x-10={modificationsAmendmentCount === 0}
>
@@ -216,7 +216,7 @@
</span>
{/if}
<span
- class="z-20 w-5 h-5 flex justify-center items-center shadow rounded-full bg-le-jaune text-black text-xs font-bold tracking-wider border-[1.5px] border-white transition-all duration-200 translate-x-1"
+ class="z-20 flex h-5 w-5 translate-x-1 items-center justify-center rounded-full border-[1.5px] border-white bg-le-jaune text-xs font-bold tracking-wider text-black shadow transition-all duration-200"
class:opacity-0={modificationsAmendmentCount === 0}
class:scale-75={modificationsAmendmentCount === 0}
class:ease-out-back={modificationsAmendmentCount > 0}
@@ -226,7 +226,7 @@
</span>
<iconify-icon
icon="ri-error-warning-fill"
- class="z-30 w-5 h-5 shadow rounded-full bg-white text-red-700 text-xl transition-all duration-200"
+ class="z-30 h-5 w-5 rounded-full bg-white text-xl text-red-700 shadow transition-all duration-200"
class:opacity-0={!showBudgetParametersError}
class:scale-75={!showBudgetParametersError}
class:ease-out-back={showBudgetParametersError}
@@ -236,13 +236,13 @@
<div
slot="content"
- class="overflow-hidden my-2 w-80 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+ class="my-2 w-80 overflow-hidden rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
{#if showBudgetParametersError}
- <div class="bg-gray-100 text-xs text-red-700 p-2">
+ <div class="bg-gray-100 p-2 text-xs text-red-700">
<iconify-icon
icon="ri-error-warning-line"
class="mr-1 align-[-0.2rem] text-base"
@@ -251,7 +251,7 @@
</div>
{/if}
<button
- class="ml-4 h-10 place-self-start text-sm uppercase text-gray-600 disabled:text-gray-400 enabled:hover:text-black"
+ class="ml-4 h-10 place-self-start text-sm uppercase text-gray-600 enabled:hover:text-black disabled:text-gray-400"
on:click={reset}
title="Retirer les modifications de votre réforme"
disabled={modificationsAmendmentCount === 0}
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 2a29499f3..908c24325 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -173,11 +173,11 @@
<div class="hidden h-full justify-between md:flex">
<!-- Bloc gauche pour le logo AN et le logo "Simulateur LEXIMPACT" -->
<div
- class="basis-1/3 h-full flex items-center justify-between gap-2 xl:gap-5"
+ class="flex h-full basis-1/3 items-center justify-between gap-2 xl:gap-5"
>
<div class="flex items-center gap-2">
<img
- class="ml-2 pb-2 h-14 items-start self-start"
+ class="ml-2 h-14 items-start self-start pb-2"
src="/logo-assemblee-nationale-blanc-blanc.png"
alt="Logo de l'Assemblée nationale"
/>
@@ -185,21 +185,21 @@
<!-- Tutoriel Dropdown -->
<Menu let:open>
<MenuButton
- class="overflow-hidden rounded-lg uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40 text-sm cursor-pointer"
+ class="cursor-pointer overflow-hidden rounded-lg text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40"
>
<div
- class="py-2 pl-2 lg:pl-4 pr-3"
+ class="py-2 pl-2 pr-3 lg:pl-4"
class:bg-gray-400={open}
class:bg-opacity-40={open}
>
<span class="flex items-center gap-1.5">
<span class="flex-col items-center">
<span
- class="hidden lg:flex text-xs tracking-widest leading-4"
+ class="hidden text-xs leading-4 tracking-widest lg:flex"
>Accueil</span
>
</span><iconify-icon
- class="flex lg:hidden mr-1 align-[-0.2rem] text-lg"
+ class="mr-1 flex align-[-0.2rem] text-lg lg:hidden"
icon="ri:home-2-fill"
/>
<iconify-icon class="text-2xl" icon="ri:arrow-down-s-line" />
@@ -211,7 +211,7 @@
>
<MenuItem
as="a"
- class="block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer uppercase text-sm tracking-wider text-center"
+ class="block cursor-pointer border-b px-4 py-3 text-center text-sm uppercase tracking-wider hover:bg-gray-100"
href="/accueil"
>
Accueil simulateur
@@ -219,7 +219,7 @@
<MenuItem
as="a"
- class="block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer text-center"
+ class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100"
href={portalUrl}
>
<iconify-icon
@@ -242,10 +242,10 @@
out:fade={{ duration: 100 }}
>
<div
- class="h-full flex shrink-0 flex-col justify-center items-end rounded p-1 text-white"
+ class="flex h-full shrink-0 flex-col items-end justify-center rounded p-1 text-white"
>
<span
- class="text-sm uppercase font-light !leading-4 tracking-widest 2xl:text-lg"
+ class="text-sm font-light uppercase !leading-4 tracking-widest 2xl:text-lg"
>
Leximpact
</span>
@@ -289,12 +289,12 @@
{#if !$navbarConfig.showSearch}
<div
- class="absolute inset-0 pointer-events-none mx-auto h-full flex justify-center items-center gap-2 uppercase text-white"
+ class="pointer-events-none absolute inset-0 mx-auto flex h-full items-center justify-center gap-2 uppercase text-white"
in:fade={{ duration: 100, delay: 150 }}
out:fade={{ duration: 75 }}
>
<span class="text-2xl 2xl:text-3xl">Leximpact</span>
- <div class="h-full flex flex-col justify-center rounded">
+ <div class="flex h-full flex-col justify-center rounded">
<span
class="text-xs font-light leading-3 tracking-widest 2xl:text-base 2xl:leading-4"
>
@@ -310,11 +310,11 @@
{/if}
<!-- Bloc droite pour les commandes avancées-->
- <ul class="basis-1/3 flex items-center justify-end gap-2 xl:gap-5 pr-2">
+ <ul class="flex basis-1/3 items-center justify-end gap-2 pr-2 xl:gap-5">
<!-- Tutoriel Dropdown -->
<Menu let:open>
<MenuButton
- class="overflow-hidden rounded-lg uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40 text-sm cursor-pointer"
+ class="cursor-pointer overflow-hidden rounded-lg text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40"
>
<div
class="py-2 pl-4 pr-3"
@@ -335,55 +335,55 @@
>
<MenuItem
as="a"
- class="block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
href="/accueil#impacts-budgetaires"
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri-list-check-3"
/> Présentation des fonctionnalités
</MenuItem>
<MenuItem
as="a"
- class="hidden md:block group border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="group hidden cursor-pointer border-b px-4 py-3 hover:bg-gray-100 md:block"
on:click={help}
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri:drag-drop-line"
/>Tutoriel interactif
<br /><span
- class="lx-link-uppercase group-hover:flex hidden group-hover:underline"
+ class="lx-link-uppercase hidden group-hover:flex group-hover:underline"
>commencer<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri:arrow-right-line"
/></span
>
</MenuItem>
<MenuItem
as="a"
- class="block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
aria-label="Tutoriels vidéos sur le site Dailymotion"
href="https://www.dailymotion.com/leximpact.an.fr"
target="_blank"
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri:video-line"
/>
Tutoriels vidéos
<iconify-icon
- class="align-[-0.15rem] text-base ml-0.5"
+ class="ml-0.5 align-[-0.15rem] text-base"
icon="ri:external-link-line"
/>
</MenuItem>
<MenuItem
as="a"
- class="block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
href="/fonctionnement"
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri-database-line"
/>Méthode de calcul et traitement des données
</MenuItem>
@@ -410,7 +410,7 @@
<Menu let:open>
<MenuButton>
<div
- class="rounded-lg px-1 text-sm capitalize text-white hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40 hover:text-white focus:outline-none"
+ class="rounded-lg px-1 text-sm capitalize text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none active:bg-gray-400 active:bg-opacity-40"
class:bg-gray-400={open}
class:bg-opacity-40={open}
class:hover:bg-opacity-50={open}
@@ -466,7 +466,7 @@
<!-- Deuxième section pour le logo LexImpat-->
<div class="flex">
<div
- class="flex h-full flex-1 flex-col items-center rounded p-1 text-white uppercase"
+ class="flex h-full flex-1 flex-col items-center rounded p-1 uppercase text-white"
>
<span class="font-light leading-4">LexImpact</span>
<span class="text-lg leading-5">Socio-Fiscal</span>
@@ -487,7 +487,7 @@
<div class="flex flex-1 justify-end gap-3">
<Menu let:open>
<MenuButton
- class="overflow-hidden rounded-lg uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40 text-sm cursor-pointer"
+ class="cursor-pointer overflow-hidden rounded-lg text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40"
>
<div
class="py-2 pl-4 pr-3"
@@ -501,12 +501,12 @@
</div>
</MenuButton>
<MenuItems
- class="absolute inset-x-0 top-10 z-50 mr-6 mt-14 w-full rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none text-center"
+ class="absolute inset-x-0 top-10 z-50 mr-6 mt-14 w-full rounded bg-white text-center text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>{#if authenticationEnabled}
{#if user === undefined}
<MenuItem
as="a"
- class="group block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="group block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
on:click={() => goto(loginUrl)}
>
<span>
@@ -519,7 +519,7 @@
{:else}
<MenuItem
as="a"
- class="group block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="group block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
on:click={() => goto(logoutUrl)}
>
<span>
@@ -535,61 +535,61 @@
{/if}
<MenuItem
as="a"
- class="block md:hidden border-b px-4 py-3 hover:bg-gray-100 cursor-pointer text-center"
+ class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
href="/accueil#impacts-budgetaires"
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri-list-check-3"
/> Présentation des fonctionnalités
</MenuItem>
<MenuItem
as="a"
- class="group block md:hidden border-b px-4 py-3 hover:bg-gray-100 cursor-pointer text-center"
+ class="group block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
on:click={help}
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri:drag-drop-line"
/>Tutoriel interactif
</MenuItem>
<MenuItem
as="a"
- class="block md:hidden border-b px-4 py-3 hover:bg-gray-100 cursor-pointer text-center"
+ class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
aria-label="Tutoriels vidéos sur le site Dailymotion"
href="https://www.dailymotion.com/leximpact.an.fr"
target="_blank"
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri:video-line"
/>
Tutoriels vidéos
<iconify-icon
- class="align-[-0.15rem] text-base ml-0.5"
+ class="ml-0.5 align-[-0.15rem] text-base"
icon="ri:external-link-line"
/>
</MenuItem>
<MenuItem
as="a"
- class="block md:hidden border-b px-4 py-3 hover:bg-gray-100 cursor-pointer text-center"
+ class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
href="/fonctionnement"
>
<iconify-icon
- class="align-[-0.25rem] text-xl mr-1"
+ class="mr-1 align-[-0.25rem] text-xl"
icon="ri-database-line"
/> Méthode de calcul et traitement des données
</MenuItem>
<MenuItem
as="a"
- class="block border-b-2 border-black px-4 py-3 hover:bg-gray-100 cursor-pointer uppercase text-sm tracking-wider"
+ class="block cursor-pointer border-b-2 border-black px-4 py-3 text-sm uppercase tracking-wider hover:bg-gray-100"
href="/accueil"
>
Accueil simulateur
</MenuItem>
<MenuItem
as="a"
- class="block border-b px-4 py-3 hover:bg-gray-100 cursor-pointer"
+ class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
href={portalUrl}
>
<iconify-icon
@@ -643,7 +643,7 @@
}}
>
<span
- class="flex-shrink-0 text-start font-bold text-lg 2xl:text-xl"
+ class="flex-shrink-0 text-start text-lg font-bold 2xl:text-xl"
>
{variable.short_label ?? variable.label ?? variable.name}
</span>
@@ -668,7 +668,7 @@
{#each dispositifsTypes as dispositif}
<li>
<button
- class="w-full flex items-center gap-3 px-3 py-1 2xl:py-3 hover:bg-gray-200/70 active:bg-gray-200 transition"
+ class="flex w-full items-center gap-3 px-3 py-1 transition hover:bg-gray-200/70 active:bg-gray-200 2xl:py-3"
on:click={() => {
$searchVariableName = dispositif.parametersVariableName
focused = false
diff --git a/src/lib/components/PlfVariablesListIntro.svelte b/src/lib/components/PlfVariablesListIntro.svelte
index 4b3874d6d..ef1511404 100644
--- a/src/lib/components/PlfVariablesListIntro.svelte
+++ b/src/lib/components/PlfVariablesListIntro.svelte
@@ -6,12 +6,12 @@
</script>
<div>
- <h3 class="mt-4 mb-2 text-base mx-2 font-bold">
+ <h3 class="mx-2 mb-2 mt-4 text-base font-bold">
Article 2 du PLF 2025 | Impôt sur le revenu :
</h3>
<div class="flex">
<a
- class="flex mx-1 px-3 py-1 bg-white border-le-rouge-bill border-2 hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-sm hover:bg-red-100"
+ class="mx-1 flex rounded-full border-2 border-le-rouge-bill bg-white px-3 py-1 text-sm hover:bg-red-100 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -23,12 +23,12 @@
>
</a>
</div>
- <h3 class="mt-4 mb-2 text-base mx-2 font-bold">
+ <h3 class="mx-2 mb-2 mt-4 text-base font-bold">
Article 3 du PLF 2025 | Contribution différentielle sur les hauts revenus :
</h3>
<div class="flex">
<a
- class="flex mx-1 px-3 py-1 bg-white border-le-rouge-bill border-2 hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-sm hover:bg-red-100"
+ class="mx-1 flex rounded-full border-2 border-le-rouge-bill bg-white px-3 py-1 text-sm hover:bg-red-100 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -38,13 +38,13 @@
<span>Instauration de la contribution <b>CDHR</b></span>
</a>
</div>
- <h3 class="mt-4 mb-2 text-base mx-2 font-bold">
+ <h3 class="mx-2 mb-2 mt-4 text-base font-bold">
Article 6 du PLFSS 2025 | Allègements de cotisations :
</h3>
<div class="flex flex-col gap-3">
<div class="flex">
<a
- class="mx-1 px-3 py-1 bg-white border-le-rouge-bill border-2 hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-sm hover:bg-red-100"
+ class="mx-1 rounded-full border-2 border-le-rouge-bill bg-white px-3 py-1 text-sm hover:bg-red-100 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -59,7 +59,7 @@
</div>
<div class="flex">
<a
- class="mx-1 px-3 py-1 bg-white border-le-rouge-bill border-2 hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-sm hover:bg-red-100"
+ class="mx-1 rounded-full border-2 border-le-rouge-bill bg-white px-3 py-1 text-sm hover:bg-red-100 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -74,7 +74,7 @@
</div>
<div class="flex">
<a
- class="mx-1 px-3 py-1 bg-white border-le-rouge-bill border-2 hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-sm hover:bg-red-100"
+ class="mx-1 rounded-full border-2 border-le-rouge-bill bg-white px-3 py-1 text-sm hover:bg-red-100 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -89,12 +89,12 @@
</a>
</div>
</div>
- <h3 class="mt-4 mb-2 text-base mx-2 font-bold">
+ <h3 class="mx-2 mb-2 mt-4 text-base font-bold">
Article 4 du PLFSS 2025 | Exonération de cotisations TO-DE :
</h3>
<div class="flex">
<a
- class="mx-1 px-3 py-1 bg-white border-le-rouge-bill border-2 hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-sm hover:bg-red-100"
+ class="mx-1 rounded-full border-2 border-le-rouge-bill bg-white px-3 py-1 text-sm hover:bg-red-100 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
diff --git a/src/lib/components/ReadMore.svelte b/src/lib/components/ReadMore.svelte
index eb7ba5422..d2f68012e 100644
--- a/src/lib/components/ReadMore.svelte
+++ b/src/lib/components/ReadMore.svelte
@@ -34,11 +34,11 @@
>
<slot />
{#if truncated}
- <button class="absolute right-0 bottom-0 flex hover:underline" on:click>
- <span class="block pl-8 bg-gradient-to-r to-70% from-transparent to-white"
+ <button class="absolute bottom-0 right-0 flex hover:underline" on:click>
+ <span class="block bg-gradient-to-r from-transparent to-white to-70% pl-8"
>...</span
>
- <span class="block text-gray-500 bg-white"
+ <span class="block bg-white text-gray-500"
> {text.replace(" ", "\xa0")}</span
>
</button>
diff --git a/src/lib/components/ReformsChanges.svelte b/src/lib/components/ReformsChanges.svelte
index d82fdead1..7d344c4eb 100644
--- a/src/lib/components/ReformsChanges.svelte
+++ b/src/lib/components/ReformsChanges.svelte
@@ -237,19 +237,19 @@
Droit attendu en {$yearPLF} :
</h4>
<button
- class="mt-1 text-xs text-le-gris-dispositif-dark text-left"
+ class="mt-1 text-left text-xs text-le-gris-dispositif-dark"
on:click={() =>
(revaluationParametersListOpen = !revaluationParametersListOpen)}
>
<iconify-icon
- class="text-base align-[-0.25rem] transition-transform duration-300"
+ class="align-[-0.25rem] text-base transition-transform duration-300"
class:rotate-90={revaluationParametersListOpen}
icon="ri-arrow-right-s-line"
/>
Revalorisations automatiques attendues par la loi
</button>
{#if revaluationParametersListOpen}
- <ul class="list-inside max-h-36 pb-3 overflow-scroll">
+ <ul class="max-h-36 list-inside overflow-scroll pb-3">
{#each Object.entries(revaluationParametersByVariableName) as [variableName, parameters]}
{@const variable = billVariableSummaryByName[variableName]}
<span class="text-xs text-gray-600">
@@ -266,7 +266,7 @@
/\./g,
"_",
)}`}
- <li class="ml-4 my-0.5 text-xs leading-relaxed text-gray-600">
+ <li class="my-0.5 ml-4 text-xs leading-relaxed text-gray-600">
<Tooltip
arrowClass="bg-white border-le-gris-dispositif-dark"
arrowBorderWidth="2px"
@@ -293,12 +293,12 @@
{#if parameter.class === ParameterClass.Scale}
<span
- class="text-le-gris-dispositif-dark text-right font-bold"
+ class="text-right font-bold text-le-gris-dispositif-dark"
>barème modifié</span
>
{:else}
<span
- class="text-le-gris-dispositif-dark text-right font-bold"
+ class="text-right font-bold text-le-gris-dispositif-dark"
>{formatValue(
Object.entries(parameter.values).sort(
([instant1], [instant2]) =>
@@ -310,17 +310,17 @@
{/if}
</a>
{:else}
- <span id={tooltipId} class="text-xs cursor-default"
+ <span id={tooltipId} class="cursor-default text-xs"
>{parameter?.title} :
{#if parameter.class === ParameterClass.Scale}
<span
- class="text-le-gris-dispositif-dark text-right font-bold"
+ class="text-right font-bold text-le-gris-dispositif-dark"
>barème modifié</span
>
{:else}
<span
- class="text-le-gris-dispositif-dark text-right font-bold"
+ class="text-right font-bold text-le-gris-dispositif-dark"
>{formatValue(
Object.entries(parameter.values).sort(
([instant1], [instant2]) =>
@@ -334,7 +334,7 @@
{/if}
<div
slot="tooltip"
- class="rounded-lg shadow-md z-40 border-2 border-le-gris-dispositif-dark bg-white px-3 py-1 text-left text-xs text-gray-600"
+ class="z-40 rounded-lg border-2 border-le-gris-dispositif-dark bg-white px-3 py-1 text-left text-xs text-gray-600 shadow-md"
>
<span class="font-bold">
Paramètre revalorisé automatiquement :
@@ -355,7 +355,7 @@
{/each}
</ul>
<div
- class="absolute inset-x-0 h-5 -mt-5 bg-gradient-to-t from-white to-transparent pointer-events-none"
+ class="pointer-events-none absolute inset-x-0 -mt-5 h-5 bg-gradient-to-t from-white to-transparent"
/>
{/if}
</div>
@@ -366,18 +366,18 @@
</h4>
<button
- class="mt-1 text-xs text-gray-800 text-left"
+ class="mt-1 text-left text-xs text-gray-800"
on:click={() => (billParametersListOpen = !billParametersListOpen)}
>
<iconify-icon
- class="text-base align-[-0.25rem] transition-transform duration-300"
+ class="align-[-0.25rem] text-base transition-transform duration-300"
class:rotate-90={billParametersListOpen}
icon="ri-arrow-right-s-line"
/>
Paramètres modifiés par le PLF/PLFSS
</button>
{#if billParametersListOpen}
- <ul class="list-inside max-h-36 pb-3 overflow-scroll">
+ <ul class="max-h-36 list-inside overflow-scroll pb-3">
{#each Object.entries(billParametersByVariableName) as [variableName, parameters]}
{@const variable = billVariableSummaryByName[variableName]}
<span class="text-xs text-gray-600">
@@ -394,7 +394,7 @@
/\./g,
"_",
)}`}
- <li class="ml-4 my-0.5 text-xs leading-relaxed text-gray-600">
+ <li class="my-0.5 ml-4 text-xs leading-relaxed text-gray-600">
<Tooltip
arrowClass="bg-white border-le-rouge-bill"
arrowBorderWidth="2px"
@@ -420,11 +420,11 @@
>{parameter?.title} :
{#if parameter.class === ParameterClass.Scale}
- <span class="text-le-rouge-bill text-right font-bold"
+ <span class="text-right font-bold text-le-rouge-bill"
>barème modifié</span
>
{:else}
- <span class="text-le-rouge-bill text-right font-bold"
+ <span class="text-right font-bold text-le-rouge-bill"
>{formatValue(
Object.entries(parameter.values).sort(
([instant1], [instant2]) =>
@@ -436,15 +436,15 @@
{/if}
</a>
{:else}
- <span id={tooltipId} class="text-xs cursor-default"
+ <span id={tooltipId} class="cursor-default text-xs"
>{parameter?.title} :
{#if parameter.class === ParameterClass.Scale}
- <span class="text-le-rouge-bill text-right font-bold"
+ <span class="text-right font-bold text-le-rouge-bill"
>barème modifié</span
>
{:else}
- <span class="text-le-rouge-bill text-right font-bold"
+ <span class="text-right font-bold text-le-rouge-bill"
>{formatValue(
Object.entries(
asValueParameter(parameter)?.values,
@@ -459,7 +459,7 @@
{/if}
<div
slot="tooltip"
- class="rounded-lg shadow-md z-40 border-2 border-le-rouge-bill bg-white px-3 py-2 text-left text-xs text-gray-600"
+ class="z-40 rounded-lg border-2 border-le-rouge-bill bg-white px-3 py-2 text-left text-xs text-gray-600 shadow-md"
>
<span class="font-bold">
Paramètre modifié par le PLF/PLFSS :
@@ -481,7 +481,7 @@
</ul>
<div
- class="absolute inset-x-0 h-5 -mt-5 bg-gradient-to-t from-white to-transparent pointer-events-none"
+ class="pointer-events-none absolute inset-x-0 -mt-5 h-5 bg-gradient-to-t from-white to-transparent"
/>
{/if}
<!-- <h5 class="text-sm">
@@ -576,7 +576,7 @@
</a>
<div
slot="tooltip"
- class="rounded-lg shadow-md z-40 border-2 border-le-jaune-light bg-white px-3 py-2 text-left text-xs text-red-700"
+ class="z-40 rounded-lg border-2 border-le-jaune-light bg-white px-3 py-2 text-left text-xs text-red-700 shadow-md"
>
<span class="text-sm font-bold"
><iconify-icon
@@ -628,7 +628,7 @@
</a>
<div
slot="tooltip"
- class="rounded-lg shadow-md z-40 border-2 border-le-jaune-light bg-white px-3 py-2 text-left text-xs text-gray-600"
+ class="z-40 rounded-lg border-2 border-le-jaune-light bg-white px-3 py-2 text-left text-xs text-gray-600 shadow-md"
>
<span class="font-bold"
>Vous avez modifié ce paramètre :</span
diff --git a/src/lib/components/ReplaceTestCaseModal.svelte b/src/lib/components/ReplaceTestCaseModal.svelte
index 52107d997..39ec1766c 100644
--- a/src/lib/components/ReplaceTestCaseModal.svelte
+++ b/src/lib/components/ReplaceTestCaseModal.svelte
@@ -50,7 +50,7 @@
</span>
<TransitionChild
- class="inline-block align-middle my-8"
+ class="my-8 inline-block align-middle"
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
@@ -59,23 +59,23 @@
leaveTo="opacity-0 scale-95"
>
<div
- class="divide-y divide-gray-200 w-full max-w-2xl transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all"
+ class="w-full max-w-2xl transform divide-y divide-gray-200 overflow-hidden rounded-md bg-white text-left shadow-xl transition-all"
>
- <div class="px-6 py-4 flex items-center justify-between">
+ <div class="flex items-center justify-between px-6 py-4">
<DialogTitle as="h3" class="text-xl font-semibold text-gray-900">
Changer de cas type
</DialogTitle>
<button
type="button"
- class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 active:bg-gray-200 ml-auto"
+ class="m-0.5 ml-auto whitespace-normal rounded-lg p-1.5 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-200"
aria-label="Close modal"
on:click={onClose}
><span class="sr-only">Close modal</span>
<iconify-icon class="block text-2xl" icon="ri-close-line" />
</button>
</div>
- <DialogDescription as="div" class="p-6 space-y-6">
+ <DialogDescription as="div" class="space-y-6 p-6">
<div class="flex flex-col gap-3">
<p class="text-lg font-bold text-black">
Êtes-vous sûr de vouloir remplacer le cas type ?
@@ -89,11 +89,11 @@
<div class="flex justify-between">
<button
- class="rounded-md border border-le-vert-700 bg-white px-5 py-2 text-sm uppercase text-le-vert-800 hover:bg-le-vert-100 active:bg-le-vert-200 s-y_bCXRrkrYfP"
+ class="s-y_bCXRrkrYfP rounded-md border border-le-vert-700 bg-white px-5 py-2 text-sm uppercase text-le-vert-800 hover:bg-le-vert-100 active:bg-le-vert-200"
on:click={onClose}>Annuler</button
>
<button
- class="rounded-md bg-le-vert-600 px-5 py-2 text-sm uppercase text-white shadow-md hover:bg-le-vert-800 active:bg-le-vert-900 s-y_bCXRrkrYfP"
+ class="s-y_bCXRrkrYfP rounded-md bg-le-vert-600 px-5 py-2 text-sm uppercase text-white shadow-md hover:bg-le-vert-800 active:bg-le-vert-900"
on:click={onChange}>Remplacer</button
>
</div>
diff --git a/src/lib/components/SelectChip.svelte b/src/lib/components/SelectChip.svelte
index c0e745517..e6c4fb618 100644
--- a/src/lib/components/SelectChip.svelte
+++ b/src/lib/components/SelectChip.svelte
@@ -21,7 +21,7 @@
<div class="relative {$$props.class ?? ''}">
<button
bind:this={chipButton}
- class="relative flex items-center gap-1 px-3 py-1 bg-le-bleu-light rounded-full overflow-hidden transition after:absolute after:inset-0 after:rounded-full after:transition hover:after:bg-black/5 active:after:bg-black/10"
+ class="relative flex items-center gap-1 overflow-hidden rounded-full bg-le-bleu-light px-3 py-1 transition after:absolute after:inset-0 after:rounded-full after:transition hover:after:bg-black/5 active:after:bg-black/10"
class:after:bg-black={open}
class:after:bg-opacity-5={open}
on:click={() => (open = !open)}
@@ -38,7 +38,7 @@
{#if open}
<ul
- class="absolute -bottom-1 translate-y-full left-0 py-1.5 bg-white border shadow-md rounded-lg"
+ class="absolute -bottom-1 left-0 translate-y-full rounded-lg border bg-white py-1.5 shadow-md"
use:clickOutside={{
callback: () => (open = false),
excluded: [chipButton],
@@ -48,7 +48,7 @@
{@const selected = option.value === value}
<li>
<button
- class="w-full text-nowrap text-start px-3 py-1.5"
+ class="w-full text-nowrap px-3 py-1.5 text-start"
class:hover:bg-gray-100={!selected}
class:active:bg-gray-200={!selected}
class:bg-le-bleu-light={selected}
diff --git a/src/lib/components/SourcesMethodTooltip.svelte b/src/lib/components/SourcesMethodTooltip.svelte
index 81cb24d05..744868474 100644
--- a/src/lib/components/SourcesMethodTooltip.svelte
+++ b/src/lib/components/SourcesMethodTooltip.svelte
@@ -19,14 +19,14 @@
>
<div
slot="tooltip"
- class="overflow-hidden bg-white text-start text-sm rounded-lg border font-normal border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-start text-sm font-normal shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
ERFS-FPR et POTE comme bases sources
</h3>
</div>
- <div class="py-2 px-3">
+ <div class="px-3 py-2">
<span class="text-black">
Estimations effectuées sur un jeu de données constitué par
LexImpact à partir des données 2019 de l'Enquête Revenus Fiscaux
@@ -74,15 +74,15 @@
>
<div
slot="tooltip"
- class="overflow-hidden bg-white text-start text-sm font-normal rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-start text-sm font-normal shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Des calculs basés sur le moteur OpenFisca
</h3>
</div>
- <div class="py-2 px-3">
- <span class="text-black font-normal">
+ <div class="px-3 py-2">
+ <span class="font-normal text-black">
Les estimations sont effectuées grâce au moteur de calcul <a
class="lx-link-text"
href="https://openfisca.org/fr/"
diff --git a/src/lib/components/TestCaseSimulationSharingModal.svelte b/src/lib/components/TestCaseSimulationSharingModal.svelte
index 65621b5b6..bce37e59f 100644
--- a/src/lib/components/TestCaseSimulationSharingModal.svelte
+++ b/src/lib/components/TestCaseSimulationSharingModal.svelte
@@ -66,7 +66,7 @@
class="fixed inset-0 z-50 overflow-y-auto"
on:close={onClose}
>
- <div class="w-full min-h-screen text-center">
+ <div class="min-h-screen w-full text-center">
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -81,7 +81,7 @@
</TransitionChild>
<TransitionChild
- class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+ class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
@@ -90,12 +90,12 @@
leaveTo="opacity-0 scale-95"
>
<div
- class="w-screen max-w-4xl p-4 transform overflow-hidden rounded-md bg-white text-left shadow-xl transition-all"
+ class="w-screen max-w-4xl transform overflow-hidden rounded-md bg-white p-4 text-left shadow-xl transition-all"
>
<div class="flex items-center justify-between">
<button
type="button"
- class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 active:bg-gray-200 ml-auto"
+ class="m-0.5 ml-auto whitespace-normal rounded-lg p-1.5 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-200"
aria-label="Close modal"
on:click={onClose}
><span class="sr-only">Close modal</span>
@@ -104,9 +104,9 @@
</div>
<DialogDescription
as="div"
- class="flex flex-col gap-5 px-4 md:px-32 py-3"
+ class="flex flex-col gap-5 px-4 py-3 md:px-32"
>
- <h1 class="w-full text-center text-2xl md:text-3xl font-bold">
+ <h1 class="w-full text-center text-2xl font-bold md:text-3xl">
Enregistrer / partager
</h1>
<span class="w-full text-lg">
@@ -114,16 +114,16 @@
visible actuellement, gardez ou transmettez l'URL suivante :
</span>
- <div class="w-full flex flex-col gap-2 pb-5">
+ <div class="flex w-full flex-col gap-2 pb-5">
<div
- class="group/container flex justify-between items-center rounded bg-gray-200 px-3"
+ class="group/container flex items-center justify-between rounded bg-gray-200 px-3"
>
<code
- class="py-3 text-xs text-ellipsis overflow-hidden whitespace-nowrap"
+ class="overflow-hidden text-ellipsis whitespace-nowrap py-3 text-xs"
>{url}</code
>
<button
- class="opacity-0 group-hover/container:opacity-100 group/button p-1 rounded transition-all duration-100 ease-linear hover:bg-black hover:bg-opacity-5 active:bg-opacity-10"
+ class="group/button rounded p-1 opacity-0 transition-all duration-100 ease-linear hover:bg-black hover:bg-opacity-5 active:bg-opacity-10 group-hover/container:opacity-100"
on:click={copyLink}
>
<iconify-icon
@@ -143,19 +143,19 @@
<div class="flex justify-around md:justify-center md:gap-4">
<div bind:this={clipboardElement} />
<button
- class="relative shadow-lg bg-le-bleu disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none hover:opacity-90 active:opacity-80 rounded text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="relative rounded bg-le-bleu text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:opacity-90 active:opacity-80 disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none"
on:click={copyLink}
title="Copier le lien de la simulation"
>
<span
- class="flex justify-center items-center gap-2 py-2 px-3 md:px-7"
+ class="flex items-center justify-center gap-2 px-3 py-2 md:px-7"
class:invisible={hasClickedCopy}
>
Copier le lien
- <iconify-icon class="text-lg rotate-45" icon="ri-link" />
+ <iconify-icon class="rotate-45 text-lg" icon="ri-link" />
</span>
<span
- class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full flex justify-center items-center gap-2"
+ class="absolute left-1/2 top-1/2 flex h-full w-full -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-2"
class:invisible={!hasClickedCopy}
>
Lien copié
@@ -165,7 +165,7 @@
{#each shareButtons as shareButton}
<a
- class="w-9 h-9 flex justify-center items-center shadow-lg bg-le-bleu hover:opacity-90 active:opacity-80 rounded text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="flex h-9 w-9 items-center justify-center rounded bg-le-bleu text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:opacity-90 active:opacity-80"
href={`${shareButton.link}${shareButton.content}`}
target="_blank"
title={shareButton.title}
diff --git a/src/lib/components/Toggletip.svelte b/src/lib/components/Toggletip.svelte
index 92cefb2f7..f08468be4 100644
--- a/src/lib/components/Toggletip.svelte
+++ b/src/lib/components/Toggletip.svelte
@@ -95,7 +95,7 @@
<slot name="toggletip" />
<div
bind:this={arrowElement}
- class="{arrowClass} absolute w-1 h-1 after:absolute after:rotate-45 after:w-[0.5625rem] after:h-[0.5625rem] after:bg-inherit after:border-inherit after:top-[-2px] after:left-[-2.5px]"
+ class="{arrowClass} absolute h-1 w-1 after:absolute after:left-[-2.5px] after:top-[-2px] after:h-[0.5625rem] after:w-[0.5625rem] after:rotate-45 after:border-inherit after:bg-inherit"
style:top={placement === "top"
? `calc(100% - ${arrowSpace + arrowHeight / 2}px)`
: arrowCoords?.y
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
index 8d300bb69..535faa01f 100644
--- a/src/lib/components/Tooltip.svelte
+++ b/src/lib/components/Tooltip.svelte
@@ -103,7 +103,7 @@
<slot name="tooltip" />
<div
bind:this={arrowElement}
- class="{arrowClass} absolute w-1 h-1 after:absolute after:rotate-45 after:w-[0.5625rem] after:h-[0.5625rem] after:bg-inherit after:border-inherit after:top-[-2px] after:left-[-2.5px]"
+ class="{arrowClass} absolute h-1 w-1 after:absolute after:left-[-2.5px] after:top-[-2px] after:h-[0.5625rem] after:w-[0.5625rem] after:rotate-45 after:border-inherit after:bg-inherit"
style:top={placement === "top"
? `calc(100% - ${arrowSpace + arrowHeight / 2}px)`
: arrowCoords?.y
diff --git a/src/lib/components/ValueChange.svelte b/src/lib/components/ValueChange.svelte
index 1c6460904..dc1c0d147 100644
--- a/src/lib/components/ValueChange.svelte
+++ b/src/lib/components/ValueChange.svelte
@@ -101,14 +101,14 @@
{#if showLoader && (runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation"))}
<span class:block={!inline}>
<span
- class="bg-gray-500 blur-xs px-1 text-black animate-pulse-2"
+ class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
class:inline-block={!inline}
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{#if legend}
<span
- class="text-xs font-normal w-24 underline decoration-dotted"
+ class="w-24 text-xs font-normal underline decoration-dotted"
class:block={!inline}
title={billValue
? `Droit attendu en ${$yearPLF} suite aux revalorisations automatiques prévues dans la loi, sans les modifications qui seront apportées par le PLF et le PLFSS ${$yearPLF}.`
@@ -136,7 +136,7 @@
</span>
{#if legend}
<span
- class="text-xs font-normal w-24 underline decoration-dotted"
+ class="w-24 text-xs font-normal underline decoration-dotted"
class:block={!inline}
title={billValue
? `Droit attendu en ${$yearPLF} suite aux revalorisations automatiques prévues dans la loi, sans les modifications qui seront apportées par le PLF et le PLFSS ${$yearPLF}.`
@@ -154,10 +154,10 @@
{#if showLoader && runningCalculationNames.includes("bill")}
<span class:block={!inline}>
<span
- class="bg-le-rouge-bill blur-xs px-1 text-black animate-pulse-2"
+ class="animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
class:inline-block={!inline}
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{#if legend}
<span
@@ -192,14 +192,14 @@
{#if showLoader && runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<span class:block={!inline}>
<span
- class="bg-le-jaune blur-xs px-1 text-black animate-pulse-2"
+ class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
class:block={!inline}
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{#if legend}
<span
- class="text-xs font-normal text-le-jaune-dark text-center"
+ class="text-center text-xs font-normal text-le-jaune-dark"
class:block={!inline}
>
Votre réforme
@@ -213,7 +213,7 @@
</span>
{#if legend}
<span
- class="text-xs font-normal text-le-jaune-dark text-center"
+ class="text-center text-xs font-normal text-le-jaune-dark"
class:block={!inline}
>
Votre réforme
diff --git a/src/lib/components/ValueChangeCompare.svelte b/src/lib/components/ValueChangeCompare.svelte
index 4c812c73a..b7cec5203 100644
--- a/src/lib/components/ValueChangeCompare.svelte
+++ b/src/lib/components/ValueChangeCompare.svelte
@@ -139,8 +139,8 @@
<div class="flex flex-col">
{#if showLoader && (runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation"))}
<div class="flex flex-col items-center font-semibold">
- <div class="bg-gray-500 blur-xs px-1 text-black animate-pulse-2">
- <span class="blur text-white text-2xl">value €</span>
+ <div class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs">
+ <span class="text-2xl text-white blur">value €</span>
</div>
{#if legend}
<div
@@ -308,8 +308,8 @@
{#if showLoader && runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<br />
<div class="flex flex-col items-center">
- <div class="bg-le-jaune blur-xs px-1 text-black animate-pulse-2">
- <span class="blur text-white text-2xl">value €</span>
+ <div class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs">
+ <span class="text-2xl text-white blur">value €</span>
</div>
{#if legend}
<div class="ml-1 text-xs font-normal text-le-jaune-dark">
diff --git a/src/lib/components/ValueChangeGagnantsPerdants.svelte b/src/lib/components/ValueChangeGagnantsPerdants.svelte
index a3f483d5d..43dd1668b 100644
--- a/src/lib/components/ValueChangeGagnantsPerdants.svelte
+++ b/src/lib/components/ValueChangeGagnantsPerdants.svelte
@@ -70,7 +70,7 @@
class:text-emerald-500={variableType !== "prelevement"}
icon="ri-arrow-up-circle-fill"
/>
- <span class="text-base text-black font-bold">
+ <span class="text-base font-bold text-black">
Augmentation {variableLabels.ofThe} >5%
</span>
</h4>
@@ -82,7 +82,7 @@
class:text-emerald-500={variableType === "prelevement"}
icon="ri-arrow-down-circle-fill"
/>
- <span class="text-base text-black font-bold">
+ <span class="text-base font-bold text-black">
Baisse {variableLabels.ofThe} >5%
</span>
</h4>
@@ -92,7 +92,7 @@
class="mr-1 text-xl text-gray-400"
icon="ri-forbid-fill"
/>
- <span class="text-base text-black font-bold">
+ <span class="text-base font-bold text-black">
Impact nul ou inférieur à 5%
</span>
</h4>
@@ -100,7 +100,7 @@
<p class="mt-1">
{#if showBillValue}
- <span class="text-le-rouge-bill font-bold"
+ <span class="font-bold text-le-rouge-bill"
>{billValue === null
? "< 100 k"
: billValue === 0
@@ -111,7 +111,7 @@
/></span
>
- <span class="underline decoration-dotted text-sm"
+ <span class="text-sm underline decoration-dotted"
>par rapport au droit {$yearPLF} sans PLF</span
>.
<br />
@@ -123,14 +123,14 @@
? "Aucun"
: `${amendmentBillValueFormatted}`}
<iconify-icon
- class="align-[-0.1rem] -ml-0.5 text-base"
+ class="-ml-0.5 align-[-0.1rem] text-base"
icon="ri-team-fill"
/></span
>
{/if}
{#if showAmendmentValue && showBillValue}
- <span class="underline decoration-dotted text-sm"
+ <span class="text-sm underline decoration-dotted"
>par rapport au PLF</span
>.
<br /><span class="bg-le-jaune px-1"
@@ -143,11 +143,11 @@
icon="ri-team-fill"
/></span
>
- <span class="underline decoration-dotted text-sm"
+ <span class="text-sm underline decoration-dotted"
>par rapport au droit {$yearPLF} sans PLF</span
>.
{:else if showAmendmentValue}
- <span class="underline decoration-dotted text-sm"
+ <span class="text-sm underline decoration-dotted"
>par rapport au droit {$yearPLF} sans PLF</span
>.
{/if}
@@ -159,11 +159,11 @@
? "Aucun"
: `${amendmentLawValueFormatted}`}
<iconify-icon
- class="align-[-0.1rem] -ml-0.5 text-base"
+ class="-ml-0.5 align-[-0.1rem] text-base"
icon="ri-team-fill"
/></span
>
- <span class="underline decoration-dotted text-sm"
+ <span class="text-sm underline decoration-dotted"
>par rapport au droit en vigueur {$yearPLF}</span
>.
{/if}
@@ -171,12 +171,12 @@
<div
slot="tooltip"
- class="overflow-hidden bg-white text-base rounded-lg border border-gray-200 shadow-md p-4"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-base shadow-md"
>
{#if showBillValue}
<p>
<span class="font-bold">Avec le PLF</span> :<br />
- <span class="text-le-rouge-bill font-bold"
+ <span class="font-bold text-le-rouge-bill"
>{billValue === null
? "< 100 k"
: billValue === 0
@@ -194,7 +194,7 @@
eu un impact nul ou inférieur à 5% {variableLabels.ofThe}
{/if}
- <span class="underline underline-offset-2 decoration-2"
+ <span class="underline decoration-2 underline-offset-2"
>par rapport au droit {$yearPLF} sans PLF</span
>.
</p>
@@ -220,7 +220,7 @@
{/if}
{#if showAmendmentValue && showBillValue}
<span
- class="underline decoration-le-rouge-bill underline-offset-2 decoration-2"
+ class="underline decoration-le-rouge-bill decoration-2 underline-offset-2"
>par rapport au droit {$yearPLF} avec PLF.</span
><br />
<span class="bg-le-jaune"
@@ -239,11 +239,11 @@
{:else}
un impact nul ou inférieur à 5% {variableLabels.ofThe}
{/if}
- <span class="underline underline-offset-2 decoration-2"
+ <span class="underline decoration-2 underline-offset-2"
>par rapport au droit {$yearPLF} sans PLF</span
>.
{:else}
- <span class="underline underline-offset-2 decoration-2"
+ <span class="underline decoration-2 underline-offset-2"
>par rapport au droit {$yearPLF} sans PLF</span
>.
{/if}
@@ -266,7 +266,7 @@
{:else}
eu un impact nul ou inférieur à 5% {variableLabels.ofThe}
{/if}
- <span class="underline decoration-black underline-offset-2 decoration-2"
+ <span class="underline decoration-black decoration-2 underline-offset-2"
>par rapport au droit en vigueur {$yearPLF}.</span
><br />
{/if}
diff --git a/src/lib/components/ValueChangeGraph.svelte b/src/lib/components/ValueChangeGraph.svelte
index 46a8bcf07..6504b2126 100644
--- a/src/lib/components/ValueChangeGraph.svelte
+++ b/src/lib/components/ValueChangeGraph.svelte
@@ -94,8 +94,8 @@
<ul class="flex flex-col">
{#if showLoader && (runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation"))}
- <li class="bg-gray-500 blur-xs px-1 text-black animate-pulse-2">
- <span class="blur text-white">value €</span> /an
+ <li class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs">
+ <span class="text-white blur">value €</span> /an
</li>
{:else if showLawValue || showRevaluationValue}
<li
@@ -116,8 +116,8 @@
</li>
{/if}
{#if showLoader && runningCalculationNames.includes("bill")}
- <li class="bg-le-rouge-bill blur-xs px-1 text-black animate-pulse-2">
- <span class="blur text-white">value €</span> /an
+ <li class="animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs">
+ <span class="text-white blur">value €</span> /an
</li>
{:else if showBillValue}
<li
@@ -128,8 +128,8 @@
</li>
{/if}
{#if showLoader && runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
- <li class="bg-le-jaune blur-xs px-1 text-black animate-pulse-2">
- <span class="blur text-white">value €</span> /an
+ <li class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs">
+ <span class="text-white blur">value €</span> /an
</li>
{:else if showAmendmentValue}
<li class="bg-le-jaune px-1 text-black">
diff --git a/src/lib/components/WaterfallCompareView.svelte b/src/lib/components/WaterfallCompareView.svelte
index c422d2078..bb74d191e 100644
--- a/src/lib/components/WaterfallCompareView.svelte
+++ b/src/lib/components/WaterfallCompareView.svelte
@@ -184,16 +184,16 @@
/>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-2xl"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-2xl"
>
<div
- class="py-2 px-3 bg-gray-100 border-b border-gray-200"
+ class="border-b border-gray-200 bg-gray-100 px-3 py-2"
>
<h3 class="font-semibold text-gray-900">
⚠️ Ce dispositif n'est peut-être pas à jour
</h3>
</div>
- <div class="py-2 px-3 text-gray-500 text-sm font-light">
+ <div class="px-3 py-2 text-sm font-light text-gray-500">
Dernière relecture :
{#if decomposition.last_value_still_valid_on === undefined}
date indéterminée
@@ -322,23 +322,23 @@
<!---Composant loader pour les valeurs intermédiaires-->
{#if showLoader && runningCalculationNames.length > 0}
{#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span
- class="bg-gray-500 blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("bill")}
<span
- class="bg-le-rouge-bill blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<span
- class="bg-le-jaune blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
<!--Valeurs du waterfall des montants intermédiaires -->
@@ -437,23 +437,23 @@
<!---Composant loader pour la valeur suivante-->
{#if showLoader && runningCalculationNames.length > 0}
{#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span
- class="bg-gray-500 blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("bill")}
<span
- class="bg-le-rouge-bill blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<span
- class="bg-le-jaune blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
<!--Valeur-->
@@ -483,23 +483,23 @@
<!---Composant loader pour la valeur suivante-->
{#if showLoader && runningCalculationNames.length > 0}
{#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}<span
- class="bg-gray-500 blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("bill")}
<span
- class="bg-le-rouge-bill blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<span
- class="bg-le-jaune blur-xs px-1 mx-1 text-black animate-pulse-2"
+ class="mx-1 animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
<!--Valeur dispositifs-->
diff --git a/src/lib/components/WaterfallPlainView.svelte b/src/lib/components/WaterfallPlainView.svelte
index b7f1e16b0..b6caf6d01 100644
--- a/src/lib/components/WaterfallPlainView.svelte
+++ b/src/lib/components/WaterfallPlainView.svelte
@@ -73,10 +73,10 @@
{#if visibleDecompositions.length > 0}
<div class="col-span-2 md:col-span-1">
{#if !compact}
- <h3 class="font-bold mt-1.5 text-lg 2xl:text-xl">
+ <h3 class="mt-1.5 text-lg font-bold 2xl:text-xl">
Dispositifs affectant les {waterfall.label.toLowerCase()}s :
</h3>
- <p class="font-serif mb-4">
+ <p class="mb-4 font-serif">
{#if waterfall.name === "brut_to_disponible"}
Tous les dispositifs des particuliers : du salaire de base
<span class="text-sm 2xl:text-base"
@@ -92,10 +92,10 @@
</p>
{/if}
<div
- class="h-fit flex flex-col gap-3 px-4 py-3 border rounded-lg shadow-lg"
+ class="flex h-fit flex-col gap-3 rounded-lg border px-4 py-3 shadow-lg"
>
- <div class="w-full flex justify-center items-center">
- <img class="origin-center h-8" alt="" src={waterfall.icon} />
+ <div class="flex w-full items-center justify-center">
+ <img class="h-8 origin-center" alt="" src={waterfall.icon} />
</div>
<!-- Navigation dispositifs-->
<div class="flex-auto">
@@ -159,7 +159,7 @@
{/if}
{/each}
{:else}
- <div class="border rounded-lg shadow-lg overflow-hidden">
+ <div class="overflow-hidden rounded-lg border shadow-lg">
<div class="flex divide-x-2">
{#each waterfallsDecompositions as { waterfall, visibleDecompositions }}
{#if visibleDecompositions.length > 0}
@@ -178,7 +178,7 @@
<div class="flex-col gap-3 px-4 py-3">
{#each waterfallsDecompositions as { waterfall, visibleDecompositions }}
{#if waterfall.name === tab}
- <h3 class="mb-2 px-2 font-bold text-lg 2xl:text-xl">
+ <h3 class="mb-2 px-2 text-lg font-bold 2xl:text-xl">
Dispositifs affectant les {waterfall.label.toLowerCase()}s :
</h3>
<!-- Navigation dispositifs-->
@@ -196,7 +196,7 @@
</div>
{:else}
<button
- class="flex gap-1 h-8 items-center whitespace-nowrap pl-5 pr-2 tracking-wide border-t border-gray-200 hover:bg-neutral-100 active:bg-neutral-200"
+ class="flex h-8 items-center gap-1 whitespace-nowrap border-t border-gray-200 pl-5 pr-2 tracking-wide hover:bg-neutral-100 active:bg-neutral-200"
on:click={() => {
dispatch("click", decomposition.name)
}}
@@ -209,7 +209,7 @@
</div>
{/each}
<span
- class="flex-1 text-start text-ellipsis overflow-x-hidden"
+ class="flex-1 overflow-x-hidden text-ellipsis text-start"
>
{decomposition.short_label ?? decomposition.label}
</span>
diff --git a/src/lib/components/WaterfallView.svelte b/src/lib/components/WaterfallView.svelte
index 1405fc23a..7fd2e0a96 100644
--- a/src/lib/components/WaterfallView.svelte
+++ b/src/lib/components/WaterfallView.svelte
@@ -295,7 +295,7 @@
<div class="flex justify-between">
<!-- Navigation dispositifs-->
<div
- class="relative w-3/5 flex-auto after:absolute after:inset-0 after:pointer-events-none after:transition-colors after:duration-500"
+ class="relative w-3/5 flex-auto after:pointer-events-none after:absolute after:inset-0 after:transition-colors after:duration-500"
class:after:bg-gray-400={highlightDecomposition}
class:after:bg-opacity-30={highlightDecomposition}
class:after:animate-blink={highlightDecomposition}
@@ -347,17 +347,17 @@
/>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-2xl"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-2xl"
>
<div
- class="py-2 px-3 bg-gray-100 border-b border-gray-200"
+ class="border-b border-gray-200 bg-gray-100 px-3 py-2"
>
<h3 class="font-semibold text-gray-900">
⚠️ Ce dispositif n'est peut-être pas à jour
</h3>
</div>
<div
- class="py-2 px-3 text-gray-500 text-sm font-light"
+ class="px-3 py-2 text-sm font-light text-gray-500"
>
Dernière relecture :
{#if decomposition.last_value_still_valid_on === undefined}
@@ -492,23 +492,23 @@
{#if showLoader && runningCalculationNames.length > 0}
{#if runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation")}
<span
- class="bg-gray-500 blur-xs px-1 text-black animate-pulse-2"
+ class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("bill")}
<span
- class="bg-le-rouge-bill blur-xs px-1 text-black animate-pulse-2"
+ class="animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
{#if runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<span
- class="bg-le-jaune blur-xs px-1 text-black animate-pulse-2"
+ class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs"
>
- <span class="blur text-white">value €</span>
+ <span class="text-white blur">value €</span>
</span>
{/if}
<!--Valeur du waterfall-->
@@ -570,15 +570,15 @@
class="mx-4 mt-3 flex justify-start"
id="situation_{situationIndex}_waterfall_showall"
>
- <label class="inline-flex items-center cursor-pointer">
+ <label class="inline-flex cursor-pointer items-center">
<input
type="checkbox"
value=""
- class="sr-only peer"
+ class="peer sr-only"
bind:checked={$showNulls}
/>
<div
- class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-0 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-le-vert-500 shrink-0"
+ class="peer relative h-6 w-11 shrink-0 rounded-full bg-gray-400 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-le-vert-500 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-0"
></div>
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"
>Montrer tous les dispositifs, y compris si le montant est nul.</span
@@ -589,7 +589,7 @@
<!--AJout de la variable niveau de vie-->
{#if $waterfall.name === "brut_to_disponible"}
<div
- class="relative flex flex-col border-neutral-500 mt-10 ml-10 border-t-2"
+ class="relative ml-10 mt-10 flex flex-col border-t-2 border-neutral-500"
>
{#each Object.keys(householdSituation).sort( (populationId1, populationId2) => populationId1.localeCompare(populationId2), ) as populationId}
{@const niveau_de_vie =
@@ -622,7 +622,7 @@
) ?? 0}
{#if revenu_disponible !== 0}
<div
- class="border-t flex items-center justify-between text-gray-500"
+ class="flex items-center justify-between border-t text-gray-500"
>
<a
href={newSimulationUrl({
@@ -633,7 +633,7 @@
>
Revenu disponible du ménage
</a>
- <p class="flex gap-0.5 text-sm mr-4">
+ <p class="mr-4 flex gap-0.5 text-sm">
<ValueChange
unitName="currency-EUR"
valueByCalculationName={getCalculatedVariableValueByCalculationName(
@@ -648,7 +648,7 @@
{/if}
{#if unites_consommation !== 0}
<div
- class="border-t flex items-center justify-between text-gray-500"
+ class="flex items-center justify-between border-t text-gray-500"
>
<a
href={newSimulationUrl({
@@ -659,7 +659,7 @@
>
Unités de consommation du ménage
</a>
- <p class="flex gap-0.5 text-sm mr-4">
+ <p class="mr-4 flex gap-0.5 text-sm">
÷ <ValueChange
unitName={null}
valueByCalculationName={getCalculatedVariableValueByCalculationName(
@@ -674,17 +674,17 @@
{/if}
{#if niveau_de_vie !== 0}
<div
- class="border-t flex items-center justify-between text-gray-500 font-bold"
+ class="flex items-center justify-between border-t font-bold text-gray-500"
>
<a
href={newSimulationUrl({
...displayMode,
parametersVariableName: "niveau_de_vie",
})}
- class="border-t border-gray-400 ml-4 hover:underline"
+ class="ml-4 border-t border-gray-400 hover:underline"
>Niveau de vie</a
>
- <p class="flex text-sm mr-4 border-t border-gray-400 p-0.5 gap-1">
+ <p class="mr-4 flex gap-1 border-t border-gray-400 p-0.5 text-sm">
= <ValueChange
unitName="currency-EUR"
valueByCalculationName={getCalculatedVariableValueByCalculationName(
@@ -703,7 +703,7 @@
{#if firstPersonActivity !== "inactif"}
<button
- class="w-full flex items-center gap-2 text-neutral-600 text-start border-b px-4 py-2 mt-10 hover:bg-neutral-100 active:bg-neutral-200 transition-all"
+ class="mt-10 flex w-full items-center gap-2 border-b px-4 py-2 text-start text-neutral-600 transition-all hover:bg-neutral-100 active:bg-neutral-200"
on:click={() => {
if (situation.slider === undefined) {
requestAxesCalculation()
diff --git a/src/lib/components/accordion/AccordionItem.svelte b/src/lib/components/accordion/AccordionItem.svelte
index 495002f47..ce3379482 100644
--- a/src/lib/components/accordion/AccordionItem.svelte
+++ b/src/lib/components/accordion/AccordionItem.svelte
@@ -46,7 +46,7 @@
<button
bind:this={item}
- class="w-full flex justify-between items-center p-2 shadow-[0_1px_0_0_#a3a3a3] hover:bg-black hover:bg-opacity-5 active:bg-black active:bg-opacity-10 transition-all duration-300 text-lg tracking-wider"
+ class="flex w-full items-center justify-between p-2 text-lg tracking-wider shadow-[0_1px_0_0_#a3a3a3] transition-all duration-300 hover:bg-black hover:bg-opacity-5 active:bg-black active:bg-opacity-10"
class:shadow-[0_2px_0_0_#525252]={isOpen}
id={itemId}
on:click={toggleOpen}
diff --git a/src/lib/components/budget/BudgetDetailView.svelte b/src/lib/components/budget/BudgetDetailView.svelte
index ce895cf73..18e7f818a 100644
--- a/src/lib/components/budget/BudgetDetailView.svelte
+++ b/src/lib/components/budget/BudgetDetailView.svelte
@@ -712,17 +712,17 @@
>déciles de ménages classés par revenus / UC :</span
>
<div
- class="overflow-hidden bg-white text-sm rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-md"
slot="tooltip"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
déciles de ménages classés par « revenu / unité de
consommation (UC) »
</h3>
</div>
- <div class="py-2 px-3">
- <span class="text-black font-light">
+ <div class="px-3 py-2">
+ <span class="font-light text-black">
Chaque décile représente 10% de la population française,
agrégée par ménages classés par ordre croissant de revenus
divisés par le nombre d'unités de consommation (UC) du
@@ -748,16 +748,16 @@
>déciles de foyers fiscaux classés par RFR / part fiscale :</span
>
<div
- class="overflow-hidden bg-white text-sm rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-md"
slot="tooltip"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Déciles de foyers fiscaux classés par « revenu fiscal
de référence/part fiscale »
</h3>
</div>
- <div class="py-2 px-3">
+ <div class="px-3 py-2">
<span class="text-black">
Chaque décile représente 10% de la population française,
agrégée par foyers fiscaux classés par ordre croissant de
@@ -777,15 +777,15 @@
</Tooltip>
{/if}
</h4>
- <div class="mt-2 flex gap-2 flex-wrap">
+ <div class="mt-2 flex flex-wrap gap-2">
{#each budgetChartLegend as { id, label, pattern }}
<div
- class="h-9 flex items-center bg-white border rounded-full shadow-neutral-500 overflow-hidden transition-all border-black cursor-default shadow-sm"
+ class="flex h-9 cursor-default items-center overflow-hidden rounded-full border border-black bg-white shadow-sm shadow-neutral-500 transition-all"
class:opacity-30={hoverColumns.size > 0 && !hoverColumns.has(id)}
class:scale-105={hoverColumns.has(id)}
>
<div
- class="group w-9 h-9 border-r border-black {pattern.backgroundClass}"
+ class="group h-9 w-9 border-r border-black {pattern.backgroundClass}"
style:background-image={`url("${pattern.foreground ?? ""}")`}
/>
<span class="mx-2">{label}</span>
diff --git a/src/lib/components/budget/BudgetLayout.svelte b/src/lib/components/budget/BudgetLayout.svelte
index 95004b532..3125a8ec0 100644
--- a/src/lib/components/budget/BudgetLayout.svelte
+++ b/src/lib/components/budget/BudgetLayout.svelte
@@ -113,15 +113,15 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Le PLF 2025 comme hypothèse de recettes
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes calculées sont calibrées par rapport au montant
prévisionnel 2025 total des recettes nettes de l'IR annoncé à
93,8Md€ dans le <a
@@ -156,15 +156,15 @@
<div
slot="tooltip"
- class="overflow-hidden bg-white text-sm font-light rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm font-light shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Les comptes de la Sécurité sociale comme hypothèse de
recettes
</h3>
</div>
- <div class="py-2 px-3">
+ <div class="px-3 py-2">
<span class="font-normal text-black"
>Les recettes calculées sont calibrées par rapport aux <a
class="lx-link-text"
@@ -185,7 +185,7 @@
</Tooltip>.
{#if $billActive}
<br />
- <span class="bg-red-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-red-200 px-1 py-0.5 text-black">
⚠️ En attente des prévisions 2025 ! Montants actuels
correspondant à 2024 !
</span>
@@ -207,15 +207,15 @@
<div
slot="tooltip"
- class="overflow-hidden bg-white text-sm font-light rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm font-light shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Les comptes de la Sécurité sociale comme hypothèse de
recettes
</h3>
</div>
- <div class="py-2 px-3">
+ <div class="px-3 py-2">
<span class="font-normal text-black"
>Les recettes calculées sont calibrées par rapport aux <a
class="lx-link-text"
@@ -236,7 +236,7 @@
</Tooltip>.
{#if $billActive}
<br />
- <span class="bg-red-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-red-200 px-1 py-0.5 text-black">
⚠️ En attente des prévisions 2025 ! Montants actuels
correspondant à 2024 !
</span>
@@ -253,13 +253,13 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">Méthode de calcul</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les dépenses calculées sont calibrées par rapport au montant
total des prévisions 2024 de dépenses des allocations
familiales annoncées à 13,848 Md€ dans le <a
@@ -276,13 +276,13 @@
du rapport des comptes de la Sécurité sociale.
{#if $billActive}
<br />
- <span class="bg-red-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-red-200 px-1 py-0.5 text-black">
⚠️ En attente des prévisions 2025 ! Montants actuels
correspondant à 2024 !
</span>
{/if}
{:else if budgetVariable.name === "contribution_equilibre_general_salarie" || budgetVariable.name === "contribution_equilibre_general_employeur" || budgetVariable.name === "agirc_arrco_salarie" || budgetVariable.name === "agirc_arrco_employeur"}
- <span class="text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm px-1 py-0.5 text-black">
Hypothèse de calcul calibrée sur les
<Tooltip
arrowClass="bg-gray-100"
@@ -294,15 +294,15 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Méthode de calcul
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes calculées sont calibrées par rapport au montant
total des prévisions 2024 de recettes des cotisations et
contributions pour l'Agric-Arrco annoncées à 88,35 Md€ dans
@@ -321,7 +321,7 @@
du rapport des comptes de la Sécurité sociale.
{#if $billActive}
<br />
- <span class="bg-red-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-red-200 px-1 py-0.5 text-black">
⚠️ En attente des prévisions 2025 ! Montants actuels
correspondant à 2024 !
</span>
@@ -332,7 +332,7 @@
Hypothèse de calcul basée sur l'évolution des recettes du PLFSS
2025.
<br />
- <span class="bg-yellow-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-yellow-200 px-1 py-0.5 text-black">
⚠️ Premières estimations 2025 | En attente de la publication des
annexes budgétaires.
</span>
@@ -348,15 +348,15 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Méthode de calcul
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes calculées sont calibrées par rapport au montant
total des prévisions 2024 de recettes des cotisations au
Régime général des retraites annoncées à 110,11 Md€ dans le
@@ -378,7 +378,7 @@
Hypothèse de calcul basée sur l'évolution des recettes du PLFSS
2025.
<br />
- <span class="bg-yellow-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-yellow-200 px-1 py-0.5 text-black">
⚠️ Premières estimations 2025 | En attente de la publication des
annexes budgétaires.
</span>
@@ -394,15 +394,15 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Méthode de calcul
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes calculées sont calibrées par rapport aux
prévisions de recettes 2024 estimées à partir de :
<ul class="list-inside list-disc">
@@ -428,7 +428,7 @@
</li>
</ul>
- <a class="mt-4 lx-link-text-le-bleu" href="TODO mémo">
+ <a class="lx-link-text-le-bleu mt-4" href="TODO mémo">
Consulter la méthode de calcul</a
>
</div>
@@ -441,7 +441,7 @@
Hypothèse de calcul basée sur l'évolution des recettes du PLFSS
2025.
<br />
- <span class="bg-yellow-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-yellow-200 px-1 py-0.5 text-black">
⚠️ Premières estimations 2025 | En attente de la publication des
annexes budgétaires.
</span>
@@ -457,15 +457,15 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Méthode de calcul
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes calculées sont calibrées par rapport aux
prévisions de recettes 2024 par rapport à la prévision 2024
annoncée à 3,4 Md€ dans l'<a
@@ -486,7 +486,7 @@
Hypothèse de calcul basée sur les recettes d'allègements indiquées
dans le PLFSS 2025.
<br />
- <span class="bg-yellow-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-yellow-200 px-1 py-0.5 text-black">
⚠️ Premières estimations 2025 | En attente de la publication des
annexes budgétaires.
</span>
@@ -502,15 +502,15 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Méthode de calcul
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
L'allègement calculé est calibré par rapport à la prévision
2024 annoncée à {#if budgetVariable.name === "allegement_cotisation_maladie"}26,62{:else if budgetVariable.name === "allegement_general"}42,04{:else}9,69{/if}
Md€ dans l'<a
@@ -538,13 +538,13 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">Méthode de calcul</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes sont calibrées par rapport à la prévision 2024
annoncée à 3 Md€ dans le <a
class="lx-link-text"
@@ -560,7 +560,7 @@
du PLF pour 2024.
{#if $billActive}
<br />
- <span class="bg-red-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-red-200 px-1 py-0.5 text-black">
⚠️ En attente des prévisions 2025 ! Montants actuels
correspondant à 2024 !
</span>
@@ -577,13 +577,13 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">Méthode de calcul</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
Les recettes sont calibrées par rapport à la prévision 2024
annoncée à 27,1 Md€ dans les <a
class="lx-link-text"
@@ -598,7 +598,7 @@
du PLF pour 2024.
{#if $billActive}
<br />
- <span class="bg-red-200 text-black px-1 py-0.5 rounded-sm">
+ <span class="rounded-sm bg-red-200 px-1 py-0.5 text-black">
⚠️ En attente des prévisions 2025 ! Montants actuels
correspondant à 2024 !
</span>
diff --git a/src/lib/components/budget/GagnantsPerdantsView.svelte b/src/lib/components/budget/GagnantsPerdantsView.svelte
index 98d13a409..e4835739f 100644
--- a/src/lib/components/budget/GagnantsPerdantsView.svelte
+++ b/src/lib/components/budget/GagnantsPerdantsView.svelte
@@ -95,9 +95,9 @@
</span>
<div
slot="tooltip"
- class="overflow-hidden bg-white text-sm font-light rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm font-light shadow-md"
>
- <div class="py-2 px-3">
+ <div class="px-3 py-2">
<span class="font-normal text-black">
En 2021, il y avait <span class="font-bold"
><ValueChange
@@ -163,7 +163,7 @@
>
</div>
{#if amendmentStateBudget !== undefined || billStateBudget !== undefined}
- <div class="flex flex-col items-start gap-6 mt-8 border-t py-5">
+ <div class="mt-8 flex flex-col items-start gap-6 border-t py-5">
<ValueChangeGagnantsPerdants
augmentation={true}
unitName="/1"
diff --git a/src/lib/components/budget/SkeletonLoaderBudget.svelte b/src/lib/components/budget/SkeletonLoaderBudget.svelte
index a633b4ba7..e83101a9c 100644
--- a/src/lib/components/budget/SkeletonLoaderBudget.svelte
+++ b/src/lib/components/budget/SkeletonLoaderBudget.svelte
@@ -4,42 +4,42 @@
<div class="animate-pulse-2">
<div class="w-full rounded-lg border border-gray-200 bg-white shadow-md">
<div class="flex p-4">
- <div class="w-12 h-12 bg-neutral-300"></div>
+ <div class="h-12 w-12 bg-neutral-300"></div>
<div class="ml-2">
- <div class="w-56 h-6 bg-neutral-300"></div>
- <div class="w-96 h-4 bg-neutral-300 mt-2"></div>
+ <div class="h-6 w-56 bg-neutral-300"></div>
+ <div class="mt-2 h-4 w-96 bg-neutral-300"></div>
</div>
</div>
<div class="px-4">
<div class="relative flex-col gap-4 border-gray-400">
- <div class="w-44 h-14 bg-neutral-300"></div>
+ <div class="h-14 w-44 bg-neutral-300"></div>
<div
class="mt-10 flex flex-col items-center justify-between sm:flex-row"
>
- <div class="w-96 h-7 bg-neutral-300"></div>
- <div class="w-20 h-4 bg-neutral-300"></div>
+ <div class="h-7 w-96 bg-neutral-300"></div>
+ <div class="h-4 w-20 bg-neutral-300"></div>
</div>
- <div class="w-full h-64 mt-4 bg-neutral-300"></div>
+ <div class="mt-4 h-64 w-full bg-neutral-300"></div>
</div>
</div>
- <div class="w-full h-40 mt-10 bg-neutral-300"></div>
+ <div class="mt-10 h-40 w-full bg-neutral-300"></div>
<div class="flex flex-col items-end px-4 py-2">
- <div class="w-48 h-4 bg-neutral-300"></div>
- <div class="w-40 h-4 mt-1 bg-neutral-300"></div>
+ <div class="h-4 w-48 bg-neutral-300"></div>
+ <div class="mt-1 h-4 w-40 bg-neutral-300"></div>
</div>
</div>
<div class="mt-4 rounded-lg border border-gray-200 bg-white shadow-md">
<div class="flex p-4">
- <div class="w-12 h-12 bg-neutral-300"></div>
+ <div class="h-12 w-12 bg-neutral-300"></div>
<div class="ml-2">
- <div class="w-56 h-6 bg-neutral-300"></div>
- <div class="w-40 h-4 bg-neutral-300 mt-2"></div>
+ <div class="h-6 w-56 bg-neutral-300"></div>
+ <div class="mt-2 h-4 w-40 bg-neutral-300"></div>
</div>
</div>
- <div class="w-96 h-14 mx-4 bg-neutral-300"></div>
+ <div class="mx-4 h-14 w-96 bg-neutral-300"></div>
<div class="flex flex-col items-end px-4 py-2">
- <div class="w-48 h-4 bg-neutral-300"></div>
- <div class="w-40 h-4 mt-1 bg-neutral-300"></div>
+ <div class="h-4 w-48 bg-neutral-300"></div>
+ <div class="mt-1 h-4 w-40 bg-neutral-300"></div>
</div>
</div>
</div>
diff --git a/src/lib/components/budget/StaticAggregates.svelte b/src/lib/components/budget/StaticAggregates.svelte
index 2682ada7d..a69475294 100644
--- a/src/lib/components/budget/StaticAggregates.svelte
+++ b/src/lib/components/budget/StaticAggregates.svelte
@@ -6,15 +6,15 @@
{#if displayMode.parametersVariableName === "contribution_exceptionnelle_hauts_revenus"}
<div class="mb-8 mt-4 rounded-md bg-le-gris-dispositif-light p-3">
- <h4 class="uppercase tracking-widest px-5 mt-5">Chiffres clés</h4>
- <p class="mb-2 font-serif text-base mt-5 px-5">
+ <h4 class="mt-5 px-5 uppercase tracking-widest">Chiffres clés</h4>
+ <p class="mb-2 mt-5 px-5 font-serif text-base">
En 2022, la CEHR représente <b
>1,46 milliard d'euros de recettes pour l'État</b
>
et concerne <b>58 700 foyers fiscaux</b>.
</p>
- <ul class="list-disc list-inside font-serif px-5">
+ <ul class="list-inside list-disc px-5 font-serif">
<li>
<b>40 700 foyers fiscaux</b> sont assujettis au taux de 3% de CEHR,
leurs revenus étant compris entre 250 000 euros et 500 000€
@@ -30,7 +30,7 @@
</li>
</ul>
<p
- class="ml-10 mt-4 mb-2 justify-self-end text-right font-serif text-sm text-gray-700 px-5"
+ class="mb-2 ml-10 mt-4 justify-self-end px-5 text-right font-serif text-sm text-gray-700"
>
Calculs LexImpact
<span class="italic"
@@ -45,8 +45,8 @@
</div>
{:else if displayMode.parametersVariableName === "prelevement_forfaitaire_unique_ir"}
<div class="mb-8 mt-4 rounded-md bg-le-gris-dispositif-light p-3">
- <h4 class="uppercase tracking-widest px-5 mt-5">Chiffres clés</h4>
- <p class="mb-2 font-serif text-base mt-5 px-5">
+ <h4 class="mt-5 px-5 uppercase tracking-widest">Chiffres clés</h4>
+ <p class="mb-2 mt-5 px-5 font-serif text-base">
En 2022, le PFU au titre de l'impôt sur le revenu représente <b
>7,2 milliards d'euros de recettes pour l'État</b
>
@@ -54,7 +54,7 @@
<b>13,5 millions de foyers fiscaux</b>.
</p>
- <ul class="list-disc list-inside font-serif px-5">
+ <ul class="list-inside list-disc px-5 font-serif">
<li>
<b>4,94 milliards d'euros</b> concernent les revenus mobiliers ;
</li>
@@ -67,7 +67,7 @@
</li>
</ul>
- <p class="mb-2 font-serif text-base mt-5 px-5">
+ <p class="mb-2 mt-5 px-5 font-serif text-base">
En 2022, <b>1,86 million de foyers fiscaux</b> ayant des revenus concernés
par le PFU
<b>ont préféré l'imposition au barème de l'IR</b>, en cochant la case 2OP
@@ -76,57 +76,57 @@
<div class="overflow-x-scroll">
<table
- class="border-collapse table-auto w-screen text-sm mt-8 overflow-hidden"
+ class="mt-8 w-screen table-auto border-collapse overflow-hidden text-sm"
>
<thead>
<tr>
<th class="border-b border-gray-400"></th>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 1<br /><span class="text-xs">RFR inférieur à 1000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 2<br /><span class="text-xs">RFR moyen de 6000€</span></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 3<br /><span class="text-xs">RFR moyen de 11000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 4<br /><span class="text-xs">RFR moyen de 15000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 5<br /><span class="text-xs">RFR moyen de 18000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 6<br /><span class="text-xs">RFR moyen de 22000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 7<br /><span class="text-xs">RFR moyen de 27000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 8<br /><span class="text-xs">RFR moyen de 35000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 9<br /><span class="text-xs">RFR moyen de 47000€</span
></th
>
<th
- class="border-b border-gray-400 font-bold p-4 pl-2 pt-0 pb-3 text-gray-700 tracking-wider text-center"
+ class="border-b border-gray-400 p-4 pb-3 pl-2 pt-0 text-center font-bold tracking-wider text-gray-700"
>Décile 10<br /><span class="text-xs">RFR moyen de 107000€</span
></th
>
@@ -135,8 +135,8 @@
<tbody>
<tr>
<td
- class="border-b border-gray-400 p-4 pl-8 text-black font-bold tracking-wider"
- >Recettes du PFU <span class="font-normal text-xs"
+ class="border-b border-gray-400 p-4 pl-8 font-bold tracking-wider text-black"
+ >Recettes du PFU <span class="text-xs font-normal"
>(en milliards d'euros)</span
></td
>
@@ -174,8 +174,8 @@
</tr>
<tr>
<td
- class="border-b border-gray-400 p-4 pl-8 text-black font-bold tracking-wider"
- >Foyers imposés au PFU <span class="font-normal text-xs"
+ class="border-b border-gray-400 p-4 pl-8 font-bold tracking-wider text-black"
+ >Foyers imposés au PFU <span class="text-xs font-normal"
>(en millions)</span
></td
>
@@ -212,9 +212,9 @@
</tr>
<tr>
<td
- class="border-b border-gray-400 p-4 pl-8 text-black font-bold tracking-wider"
+ class="border-b border-gray-400 p-4 pl-8 font-bold tracking-wider text-black"
>Foyers ayant opté pour le barème de l'IR<span
- class="font-normal text-xs">(en millions)</span
+ class="text-xs font-normal">(en millions)</span
></td
>
<td class="border-b border-gray-400 p-4 pl-2 text-center">
@@ -252,7 +252,7 @@
</table>
</div>
<p
- class="ml-10 mt-4 mb-2 justify-self-end text-right font-serif text-sm text-gray-700 px-5"
+ class="mb-2 ml-10 mt-4 justify-self-end px-5 text-right font-serif text-sm text-gray-700"
>
Calculs LexImpact
<span class="italic"
diff --git a/src/lib/components/budget/WithoutBudgetCard.svelte b/src/lib/components/budget/WithoutBudgetCard.svelte
index 2f8502c3e..0fb43dfad 100644
--- a/src/lib/components/budget/WithoutBudgetCard.svelte
+++ b/src/lib/components/budget/WithoutBudgetCard.svelte
@@ -7,12 +7,12 @@
export let variable: Decomposition
</script>
-<div class="p-2 rounded-lg border border-gray-200 bg-white shadow-md">
+<div class="rounded-lg border border-gray-200 bg-white p-2 shadow-md">
<div
- class="flex flex-col items-center gap-6 px-10 py-28 text-center bg-gray-100 rounded-lg"
+ class="flex flex-col items-center gap-6 rounded-lg bg-gray-100 px-10 py-28 text-center"
>
{#if variable.name === "csg" || variable.name === "impots_directs" || variable.name === "cotisations_salariales" || variable.name === "cotisations_employeur_securite_sociale" || variable.name === "cotisations_employeur_retraite_complementaire" || variable.name === "prestations_sociales" || variable.name === "prestations_familiales" || variable.name === "af_nettes_crds"}
- <span class="text-lg text-gray-600 max-w-prose">
+ <span class="max-w-prose text-lg text-gray-600">
Les impacts budgétaires ne sont pas disponibles pour {#if variable.name === "csg"}la
totalité de la
{:else if variable.name === "impots_directs" || variable.name === "cotisations_salariales" || variable.name === "cotisations_employeur_securite_sociale" || variable.name === "cotisations_employeur_retraite_complementaire" || variable.name === "prestations_sociales" || variable.name === "prestations_familiales"}la
@@ -27,7 +27,7 @@
:
</span>
{#if variable.name === "csg"}
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>
<a
class="lx-link-uppercase"
@@ -71,7 +71,7 @@
/>
</a>
{:else if variable.name === "cotisations_salariales"}
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>
<a
class="lx-link-uppercase"
@@ -116,7 +116,7 @@
</li>
</ul>
{:else if variable.name === "cotisations_employeur_securite_sociale"}
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>
<a
class="lx-link-uppercase"
@@ -175,7 +175,7 @@
</li>
</ul>
{:else if variable.name === "cotisations_employeur_retraite_complementaire"}
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>
<a
class="lx-link-uppercase"
@@ -234,7 +234,7 @@
</a>
{/if}
{:else}
- <span class="text-lg text-gray-600 max-w-prose">
+ <span class="max-w-prose text-lg text-gray-600">
Les impacts budgétaires du dispositif « {variable.short_label ??
variable.label ??
variable.name} » ne sont pas encore disponibles. Vous en avez
@@ -245,7 +245,7 @@
</span>
<a
- class="flex items-center gap-1.5 py-1.5 px-3 bg-white hover:bg-neutral-200 active:bg-neutral-300 rounded-lg font-semibold text-le-gris-dispositif-dark hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-sm font-semibold uppercase tracking-wider text-le-gris-dispositif-dark transition-all duration-200 ease-out-back hover:bg-neutral-200 hover:text-black active:bg-neutral-300"
href={newSimulationUrl({
...displayMode,
parametersVariableName: undefined,
@@ -256,15 +256,15 @@
</a>
{/if}
- <div class="flex gap-9 mb-3 w-full mt-4">
+ <div class="mb-3 mt-4 flex w-full gap-9">
<hr class="mt-5 flex-1 border-dashed border-black" />
<span class="text-lg font-light xl:text-2xl 2xl:text-3xl">ou</span>
<hr class="mt-5 flex-1 border-dashed border-black" />
</div>
- <span class="font-light text-gray-600 max-w-screen-sm">
+ <span class="max-w-screen-sm font-light text-gray-600">
Les impacts sont aussi calculables sur des cas types :</span
><a
- class="flex items-center gap-1.5 py-1.5 px-3 bg-white hover:bg-neutral-200 active:bg-neutral-300 rounded-lg font-semibold text-le-gris-dispositif-dark hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-sm font-semibold uppercase tracking-wider text-le-gris-dispositif-dark transition-all duration-200 ease-out-back hover:bg-neutral-200 hover:text-black active:bg-neutral-300"
href={newSimulationUrl({
...displayMode,
budget: false,
diff --git a/src/lib/components/parameters/ParameterView.svelte b/src/lib/components/parameters/ParameterView.svelte
index a267b2a1e..be831fa0e 100644
--- a/src/lib/components/parameters/ParameterView.svelte
+++ b/src/lib/components/parameters/ParameterView.svelte
@@ -44,7 +44,7 @@
$: parameterRepositoryUrl = newParameterRepositoryUrl(metadata, parameter)
</script>
-<main class="bg-graph-paper flex items-center justify-center">
+<main class="flex items-center justify-center bg-graph-paper">
<div class="max-w-screen-md bg-white">
<button
class="ml-10 mt-5 inline-flex cursor-pointer items-center rounded bg-gray-200 p-2 pr-3 text-sm text-black shadow-md hover:bg-gray-300 active:bg-gray-400"
diff --git a/src/lib/components/pictos/PictoOpenFisca.svelte b/src/lib/components/pictos/PictoOpenFisca.svelte
index e9af97f3b..74ce7eabb 100644
--- a/src/lib/components/pictos/PictoOpenFisca.svelte
+++ b/src/lib/components/pictos/PictoOpenFisca.svelte
@@ -1,5 +1,5 @@
<svg
- class="ml-2 h-7 inline-flex"
+ class="ml-2 inline-flex h-7"
id="openfisca logo"
viewBox="0 0 40 30"
fill="none"
diff --git a/src/lib/components/piece_of_cake/DragSelect.svelte b/src/lib/components/piece_of_cake/DragSelect.svelte
index 9ddb94bec..1b3498f9f 100644
--- a/src/lib/components/piece_of_cake/DragSelect.svelte
+++ b/src/lib/components/piece_of_cake/DragSelect.svelte
@@ -86,7 +86,7 @@
>
{#if valid}
<div
- class="absolute bg-black bg-opacity-20 border border-white shadow-md"
+ class="absolute border border-white bg-black bg-opacity-20 shadow-md"
style:left="{!xInverted ? start[0] : end[0]}px"
style:top="{!yInverted ? start[1] : end[1]}px"
style:right="{!xInverted
@@ -98,7 +98,7 @@
>
{#if !isDragging}
<button
- class="flex items-center z-10 absolute right-0 -bottom-2 translate-y-full px-2 select-none bg-white rounded-full shadow-md hover:bg-neutral-50 active:bg-neutral-100 ease text-sm uppercase text-gray-600 transition-opacity duration-500 hover:text-black"
+ class="ease absolute -bottom-2 right-0 z-10 flex translate-y-full select-none items-center rounded-full bg-white px-2 text-sm uppercase text-gray-600 shadow-md transition-opacity duration-500 hover:bg-neutral-50 hover:text-black active:bg-neutral-100"
on:click={zoom}
><iconify-icon
class="mr-1 text-base"
diff --git a/src/lib/components/piece_of_cake/SharedTooltip.svelte b/src/lib/components/piece_of_cake/SharedTooltip.svelte
index 0cfe23540..3de899bc7 100644
--- a/src/lib/components/piece_of_cake/SharedTooltip.svelte
+++ b/src/lib/components/piece_of_cake/SharedTooltip.svelte
@@ -81,12 +81,12 @@
<BinaryTree let:event bind:index let:visible let:x {modelGroups}>
{#if event !== undefined && index !== undefined && visible && x !== undefined}
<div
- class="absolute inset-y-0 pointer-events-none border-l border-dotted border-neutral-600 -translate-x-1/2"
+ class="pointer-events-none absolute inset-y-0 -translate-x-1/2 border-l border-dotted border-neutral-600"
style:left="{x}px"
/>
{#if $$slots.default}
<div
- class="absolute z-30 pointer-events-none"
+ class="pointer-events-none absolute z-30"
use:tooltip={{ event, index }}
>
<slot {event} {index} {x} />
diff --git a/src/lib/components/piece_of_cake/Svg.svelte b/src/lib/components/piece_of_cake/Svg.svelte
index 791b51a56..ec1d86ea5 100644
--- a/src/lib/components/piece_of_cake/Svg.svelte
+++ b/src/lib/components/piece_of_cake/Svg.svelte
@@ -33,7 +33,7 @@
<svg
bind:this={element}
- class="absolute overflow-visible top-0 left-0"
+ class="absolute left-0 top-0 overflow-visible"
height={modifiedModelGroups?.[0]?.[0]?.containerHeight +
paddingRotatedTextAxisX.bottom}
style:clip-path={clipOverflow
diff --git a/src/lib/components/search/NavBarSearch.svelte b/src/lib/components/search/NavBarSearch.svelte
index 4254647c1..4507bd990 100644
--- a/src/lib/components/search/NavBarSearch.svelte
+++ b/src/lib/components/search/NavBarSearch.svelte
@@ -5,19 +5,19 @@
$: active = query.length > 0
</script>
-<section class="flex items-center h-12 pt-1.5 pb-2 md:p-0 md:h-full">
+<section class="flex h-12 items-center pb-2 pt-1.5 md:h-full md:p-0">
<div
class="flex w-full overflow-hidden rounded-t-md border-b-2 border-b-le-jaune bg-gray-100 px-2 md:w-[230px] lg:w-[400px] xl:w-[500px] 2xl:w-[600px]"
>
<iconify-icon
- class="md:mx-1 self-center p-1 text-lg text-black"
+ class="self-center p-1 text-lg text-black md:mx-1"
icon="ri-search-line"
noobserver
/>
<input
autocomplete="off"
bind:value={query}
- class="w-full px-1 py-1.5 md:px-3 md:py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
+ class="w-full border-none bg-transparent px-1 py-1.5 text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none md:px-3 md:py-2 2xl:text-base"
on:blur
on:focus
placeholder="impôt sur le revenu, CSG, ..."
@@ -25,7 +25,7 @@
/>
{#if active}
<button
- class="self-center p-1.5 hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 rounded-full text-sm transition-all duration-200 ease-out-back"
+ class="self-center rounded-full p-1.5 text-sm transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20"
on:click={() => (query = "")}
>
<iconify-icon class="block text-xl" icon="ri-close-line" />
diff --git a/src/lib/components/search/Search.svelte b/src/lib/components/search/Search.svelte
index bb474a74d..dabf6fa13 100644
--- a/src/lib/components/search/Search.svelte
+++ b/src/lib/components/search/Search.svelte
@@ -89,7 +89,7 @@
{/if}
</label>
<div
- class="px-2 shadow-inner-md mt-2 flex w-full items-center justify-between rounded-t-md border-b bg-gray-100 p-1 text-gray-400 focus-within:text-gray-900 hover:border-black"
+ class="shadow-inner-md mt-2 flex w-full items-center justify-between rounded-t-md border-b bg-gray-100 p-1 px-2 text-gray-400 focus-within:text-gray-900 hover:border-black"
style:box-shadow={isSearchActive ? "0 1px 6px rgba(32,33,36,.28)" : "none"}
>
<iconify-icon
@@ -101,7 +101,7 @@
/>
<input
autocomplete="off"
- class="w-full px-3 py-2 border-none bg-gray-100 text-base text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none"
+ class="w-full border-none bg-gray-100 px-3 py-2 text-base text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none"
id="search"
bind:value={searchInputValue}
placeholder="impôt sur le revenu, CSG, ..."
diff --git a/src/lib/components/search/WelcomeSearch.svelte b/src/lib/components/search/WelcomeSearch.svelte
index 339df1903..d96592f81 100644
--- a/src/lib/components/search/WelcomeSearch.svelte
+++ b/src/lib/components/search/WelcomeSearch.svelte
@@ -48,7 +48,7 @@
</script>
<div
- class="w-full flex items-center gap-1.5 overflow-hidden rounded-t-md bg-white border md:border-2 border-neutral-200 border-b-2 md:border-b-4 border-b-[#A6A00C] min-h-12"
+ class="flex min-h-12 w-full items-center gap-1.5 overflow-hidden rounded-t-md border border-b-2 border-neutral-200 border-b-[#A6A00C] bg-white md:border-2 md:border-b-4"
>
<iconify-icon
class="ml-4 self-center p-1 text-xl text-black"
@@ -56,14 +56,14 @@
/>
<input
autocomplete="off"
- class="w-full px-1 py-1.5 md:px-3 md:py-3 border-none bg-transparent text-base lg:text-lg text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
+ class="w-full border-none bg-transparent px-1 py-1.5 text-base text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none md:px-3 md:py-3 lg:text-lg 2xl:text-xl"
placeholder="impôt sur le revenu, CSG, ..."
type="search"
bind:value={query}
/>
{#if query.length > 0}
<button
- class="md:mr-2.5 p-2 rounded-full hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 transition-all duration-200 ease-out-back"
+ class="rounded-full p-2 transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 md:mr-2.5"
on:click={() => (query = "")}
>
<iconify-icon class="block text-xl" icon="ri-close-line" />
diff --git a/src/lib/components/test_cases/OilSpendingBill.svelte b/src/lib/components/test_cases/OilSpendingBill.svelte
index 7972549b3..623205621 100644
--- a/src/lib/components/test_cases/OilSpendingBill.svelte
+++ b/src/lib/components/test_cases/OilSpendingBill.svelte
@@ -156,7 +156,7 @@
class="mb-2 border-b border-black pb-2 text-center font-black uppercase"
>
<iconify-icon
- class="align-[-0.15rem] text-lg mr-1"
+ class="mr-1 align-[-0.15rem] text-lg"
icon="ri-money-euro-circle-fill"
/>{depenseTtcVariable.label ?? depenseTtcVariable.name}
</h3>
@@ -246,10 +246,10 @@
</table>
{#if carbonEmissions !== undefined}
<h3
- class="mb-2 border-b border-black pb-2 text-center font-black uppercase mt-6"
+ class="mb-2 mt-6 border-b border-black pb-2 text-center font-black uppercase"
>
<iconify-icon
- class="align-[-0.15rem] text-lg mr-2"
+ class="mr-2 align-[-0.15rem] text-lg"
icon="ri-cloud-windy-fill"
/>Émissions de CO<sub>2</sub>
</h3>
diff --git a/src/lib/components/test_cases/TestCaseCompareModal.svelte b/src/lib/components/test_cases/TestCaseCompareModal.svelte
index 5c3ddfd8e..39e15c6cc 100644
--- a/src/lib/components/test_cases/TestCaseCompareModal.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareModal.svelte
@@ -171,7 +171,7 @@
{/each}
</select>
<button
- class="mb-5 mt-2 inline-flex items-center rounded bg-gray-300 px-2 py-1 text-base uppercase enabled:text-black disabled:text-gray-500 enabled:shadow-lg enabled:hover:bg-gray-400"
+ class="mb-5 mt-2 inline-flex items-center rounded bg-gray-300 px-2 py-1 text-base uppercase enabled:text-black enabled:shadow-lg enabled:hover:bg-gray-400 disabled:text-gray-500"
disabled={selectedTestCaseIndex === undefined ||
selectedTestCaseIndex === $testCasesIndex[0]}
type="button"
diff --git a/src/lib/components/test_cases/TestCaseCompareView.svelte b/src/lib/components/test_cases/TestCaseCompareView.svelte
index 862d6fc35..d8d738893 100644
--- a/src/lib/components/test_cases/TestCaseCompareView.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareView.svelte
@@ -77,7 +77,7 @@
</script>
<div
- class="relative mx-0 rounded-lg border border-gray-200 shadow-md overflow-hidden bg-white md:mx-2 md:mb-5 lg:mx-5"
+ class="relative mx-0 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md md:mx-2 md:mb-5 lg:mx-5"
id="situation_{situationsToCompareIndex.join('_')}"
>
<div class="flex justify-end rounded-t-md bg-gray-100 px-6 py-1">
diff --git a/src/lib/components/test_cases/TestCaseEdit.svelte b/src/lib/components/test_cases/TestCaseEdit.svelte
index d84a35829..c698dc1f3 100644
--- a/src/lib/components/test_cases/TestCaseEdit.svelte
+++ b/src/lib/components/test_cases/TestCaseEdit.svelte
@@ -519,16 +519,16 @@
}
</script>
-<div class="relative h-full flex flex-col md:flex-row gap-3 px-3 md:px-5 pt-2">
- <section class="flex-[2] md:overflow-y-scroll flex flex-col gap-3 2xl:gap-12">
+<div class="relative flex h-full flex-col gap-3 px-3 pt-2 md:flex-row md:px-5">
+ <section class="flex flex-[2] flex-col gap-3 md:overflow-y-scroll 2xl:gap-12">
<span
- class="inline-block text-black text-base md:text-lg 2xl:text-xl leading-8"
+ class="inline-block text-base leading-8 text-black md:text-lg 2xl:text-xl"
>
Composition :
</span>
- <div class="w-full grid grid-cols-2 gap-x-4">
+ <div class="grid w-full grid-cols-2 gap-x-4">
<div
- class="flex flex-col justify-end items-center gap-1 px-4 py-2 bg-neutral-100 rounded-lg"
+ class="flex flex-col items-center justify-end gap-1 rounded-lg bg-neutral-100 px-4 py-2"
>
<PictoBigParent />
<span class="mx-2 text-center">Adultes</span>
@@ -543,7 +543,7 @@
<div class="flex gap-1">
<button
disabled={adultsId.length <= 1}
- class="flex items-center gap-1 p-1 enabled:hover:bg-gray-400 enabled:hover:bg-opacity-20 enabled:active:bg-gray-400 enabled:active:bg-opacity-40 rounded-lg disabled:text-neutral-400 enabled:text-neutral-600 enabled:hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1 rounded-lg p-1 text-sm uppercase tracking-wider transition-all duration-200 ease-out-back enabled:text-neutral-600 enabled:hover:bg-gray-400 enabled:hover:bg-opacity-20 enabled:hover:text-black enabled:active:bg-gray-400 enabled:active:bg-opacity-40 disabled:text-neutral-400"
on:click={() => {
if (adultsId.length > 1) {
changeAdultsCount(adultsId.length - 1)
@@ -565,7 +565,7 @@
value={adultsId.length}
/>
<button
- class="flex items-center gap-1 p-1 hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40 rounded-lg text-neutral-600 hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1 rounded-lg p-1 text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-gray-400 hover:bg-opacity-20 hover:text-black active:bg-gray-400 active:bg-opacity-40"
on:click={() => changeAdultsCount(adultsId.length + 1)}
title="Ajouter un adulte"
>
@@ -576,7 +576,7 @@
</button>
</div>
<div
- class="z-40 px-3 py-2 text-left text-gray-600 bg-white border-2 border-yellow-900 rounded-lg shadow-md"
+ class="z-40 rounded-lg border-2 border-yellow-900 bg-white px-3 py-2 text-left text-gray-600 shadow-md"
slot="toggletip"
>
<iconify-icon
@@ -607,7 +607,7 @@
</div>
<div
- class="relative flex flex-col justify-end items-center gap-1 px-4 py-2 bg-neutral-100 rounded-lg"
+ class="relative flex flex-col items-center justify-end gap-1 rounded-lg bg-neutral-100 px-4 py-2"
>
<PictoBigEnfant />
<abbr class="mx-2 text-center" title="Enfants ou personnes à charge">
@@ -616,7 +616,7 @@
<div class="flex gap-1">
<button
disabled={childrenId.length <= 0}
- class="flex items-center gap-1 p-1 enabled:hover:bg-gray-400 enabled:hover:bg-opacity-20 enabled:active:bg-gray-400 enabled:active:bg-opacity-40 rounded-lg disabled:text-neutral-400 enabled:text-neutral-600 enabled:hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1 rounded-lg p-1 text-sm uppercase tracking-wider transition-all duration-200 ease-out-back enabled:text-neutral-600 enabled:hover:bg-gray-400 enabled:hover:bg-opacity-20 enabled:hover:text-black enabled:active:bg-gray-400 enabled:active:bg-opacity-40 disabled:text-neutral-400"
on:click={() => {
if (childrenId.length > 0) {
changeChildrenCount(childrenId.length - 1)
@@ -638,7 +638,7 @@
value={childrenId.length}
/>
<button
- class="flex items-center gap-1 p-1 hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40 rounded-lg text-neutral-600 hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1 rounded-lg p-1 text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-gray-400 hover:bg-opacity-20 hover:text-black active:bg-gray-400 active:bg-opacity-40"
on:click={() => changeChildrenCount(childrenId.length + 1)}
title="Ajouter un enfant"
>
@@ -650,7 +650,7 @@
<div />
<div
- class="bg-le-gris-dispositif-light px-1 pt-2.5 pb-0.5 -mt-2 text-sm rounded-b-lg"
+ class="-mt-2 rounded-b-lg bg-le-gris-dispositif-light px-1 pb-0.5 pt-2.5 text-sm"
>
<span>
En 2020,
@@ -706,7 +706,7 @@
>
<div
slot="tooltip"
- class="overflow-hidden bg-le-gris-dispositif-light p-3 text-start text-sm font-normal rounded-lg shadow-md"
+ class="overflow-hidden rounded-lg bg-le-gris-dispositif-light p-3 text-start text-sm font-normal shadow-md"
>
<p class="font-serif text-base">
En 2020,
@@ -938,11 +938,11 @@
</div>
</section>
- <div class="hidden md:block my-9 self-stretch w-[1px] bg-neutral-300" />
+ <div class="my-9 hidden w-[1px] self-stretch bg-neutral-300 md:block" />
- <section class="flex-[4] md:overflow-y-scroll pb-20">
+ <section class="flex-[4] pb-20 md:overflow-y-scroll">
<span
- class="inline-block mb-1 md:mb-3 mt-3 md:mt-0 text-black text-base md:text-lg 2xl:text-xl leading-8"
+ class="mb-1 mt-3 inline-block text-base leading-8 text-black md:mb-3 md:mt-0 md:text-lg 2xl:text-xl"
>
Caractéristiques :
</span>
@@ -976,7 +976,7 @@
{year}
/>
- <div class="flex gap-9 mb-3 mt-4">
+ <div class="mb-3 mt-4 flex gap-9">
<hr class="mt-5 flex-1 border-dashed border-black" />
<span class="text-lg font-light xl:text-2xl 2xl:text-3xl">ou</span>
<hr class="mt-5 flex-1 border-dashed border-black" />
diff --git a/src/lib/components/test_cases/TestCaseEditVariablesSearch.svelte b/src/lib/components/test_cases/TestCaseEditVariablesSearch.svelte
index 6166c0351..6ba8f139a 100644
--- a/src/lib/components/test_cases/TestCaseEditVariablesSearch.svelte
+++ b/src/lib/components/test_cases/TestCaseEditVariablesSearch.svelte
@@ -58,22 +58,22 @@
</span>
<div
- class="flex items-center gap-1.5 my-2 overflow-hidden rounded-t-md bg-gray-100 border-b-2 md:border-b-4 border-b-[#A6A00C]"
+ class="my-2 flex items-center gap-1.5 overflow-hidden rounded-t-md border-b-2 border-b-[#A6A00C] bg-gray-100 md:border-b-4"
>
<iconify-icon
- class="ml-1 md:ml-3 self-center p-1 text-lg text-black"
+ class="ml-1 self-center p-1 text-lg text-black md:ml-3"
icon="ri-search-line"
/>
<input
autocomplete="off"
bind:value={query}
- class="w-full px-1 py-1.5 md:py-2.5 border-none bg-transparent text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
+ class="w-full border-none bg-transparent px-1 py-1.5 text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none md:py-2.5 2xl:text-xl"
placeholder="Rechercher des variables..."
type="search"
/>
{#if query.length > 0}
<button
- class="md:mr-1.5 p-2 rounded-full hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 transition-all duration-200 ease-out-back"
+ class="rounded-full p-2 transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 md:mr-1.5"
on:click={() => (query = "")}
>
<iconify-icon class="block text-xl" icon="ri-close-line" />
@@ -82,14 +82,14 @@
</div>
{#if query.trim().length > 0}
- <div class="flex flex-wrap gap-x-1.5 mt-2">
+ <div class="mt-2 flex flex-wrap gap-x-1.5">
{#if filteredInputVariables.length > 0}
<span>Résultats de votre recherche :</span>
{:else}
<span>Aucune variable trouvée pour :</span>
{/if}
{#each query.split(" ").filter((term) => term.length > 0) as term}
- <div class="px-1.5 rounded-full bg-white">{term}</div>
+ <div class="rounded-full bg-white px-1.5">{term}</div>
{/each}
</div>
{#if filteredInputVariables.length > 0}
@@ -115,7 +115,7 @@
{/if}
{#if query.trim().length > 0}
- <div class="flex items-center gap-2 mt-2">
+ <div class="mt-2 flex items-center gap-2">
<div class="flex-1 border-b border-b-gray-500" />
<span class="flex-shrink-0 text-sm text-gray-600"
>Fin des résultats de la recherche</span
diff --git a/src/lib/components/test_cases/TestCaseFilters.svelte b/src/lib/components/test_cases/TestCaseFilters.svelte
index 022211125..b5088d6ad 100644
--- a/src/lib/components/test_cases/TestCaseFilters.svelte
+++ b/src/lib/components/test_cases/TestCaseFilters.svelte
@@ -456,7 +456,7 @@
{#each filters as filter}
{#if filter.name !== "dispositif" || variableSummary !== undefined}
<button
- class="relative flex items-center gap-1 px-3 py-1 rounded-full overflow-hidden transition after:absolute after:inset-0 after:rounded-full after:transition hover:after:bg-black/5 active:after:bg-black/10"
+ class="relative flex items-center gap-1 overflow-hidden rounded-full px-3 py-1 transition after:absolute after:inset-0 after:rounded-full after:transition hover:after:bg-black/5 active:after:bg-black/10"
class:bg-gray-200={filter.value === false}
class:bg-le-vert-100={filter.value !== false}
on:click={() => (filter.value = !filter.value)}
@@ -478,13 +478,13 @@
{/each}
</div>
-<label class="mt-6 inline-flex items-center cursor-pointer">
- <input bind:checked={showOnlyDeciles} class="sr-only peer" type="checkbox" />
+<label class="mt-6 inline-flex cursor-pointer items-center">
+ <input bind:checked={showOnlyDeciles} class="peer sr-only" type="checkbox" />
<div
- class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-0 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-le-bleu shrink-0"
+ class="peer relative h-6 w-11 shrink-0 rounded-full bg-gray-400 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-400 after:bg-white after:transition-all after:content-[''] peer-checked:bg-le-bleu peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-0 rtl:peer-checked:after:-translate-x-full"
/>
<span
- class="inline-flex items-center gap-1.5 ms-3 text-sm font-medium text-gray-900"
+ class="ms-3 inline-flex items-center gap-1.5 text-sm font-medium text-gray-900"
>Afficher uniquement les cas types représentatifs d'un décile
</span>
</label>
@@ -511,14 +511,14 @@
>
<div
slot="tooltip"
- class="overflow-hidden bg-white text-sm font-light rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm font-light shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Qu'est-ce qu'un décile de niveau de vie ?
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
<p>
Chaque décile de niveau de vie représente 10% de la population
française agrégée par ménages classés par ordre croissant de niveau
@@ -545,14 +545,14 @@
>
<div
slot="tooltip"
- class="overflow-hidden bg-white text-sm font-light rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-sm font-light shadow-md"
>
- <div class="py-2 px-3 bg-gray-100 border-b border-gray-200">
+ <div class="border-b border-gray-200 bg-gray-100 px-3 py-2">
<h3 class="font-semibold text-gray-900">
Comment sont conçus ces cas types ?
</h3>
</div>
- <div class="py-2 px-3 font-normal text-black">
+ <div class="px-3 py-2 font-normal text-black">
<p>
LexImpact s'est appuyé sur la base POTE 2021 des déclarations
d'impôt sur le revenu des foyers fiscaux distribuée par la DGFIP. À
@@ -576,18 +576,18 @@
{/if}
{#if filteredTestCases.length}
- <span class="block mt-6 text-gray-600">
+ <span class="mt-6 block text-gray-600">
{filteredTestCases.length} / {testCases.length} cas types affichés
</span>
<div
- class="relative z-10 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 items-start gap-2 sm:gap-5 py-2"
+ class="relative z-10 grid grid-cols-1 items-start gap-2 py-2 sm:grid-cols-2 sm:gap-5 xl:grid-cols-3"
>
{#each filteredTestCases as [testCase, index]}
<div>
- <div class="relative lx-card-underline-le-vert">
+ <div class="lx-card-underline-le-vert relative">
<button
- class="group w-full flex flex-col items-stretch text-sm rounded-md overflow-hidden"
+ class="group flex w-full flex-col items-stretch overflow-hidden rounded-md text-sm"
on:click={() => dispatch("select", index)}
type="button"
>
@@ -625,22 +625,22 @@
</p>
{/if}
<iconify-icon
- class="block text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+ class="block self-end text-xl text-le-vert-400 group-hover:text-le-jaune-very-dark"
icon="ri-arrow-right-line"
/>
</div>
</button>
{#if testCase.dixieme !== undefined}
<div
- class="absolute -right-7 top-0 -translate-y-1/2 flex items-center"
+ class="absolute -right-7 top-0 flex -translate-y-1/2 items-center"
>
<div
- class="flex items-center text-sm bg-le-bleu-light pl-2 pr-4 rounded-l-full"
+ class="flex items-center rounded-l-full bg-le-bleu-light pl-2 pr-4 text-sm"
>
{@html formatLongOrdinalSup(testCase.dixieme)} décile
</div>
<svg
- class="w-7 h-7 -translate-x-1/2"
+ class="h-7 w-7 -translate-x-1/2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
@@ -663,14 +663,14 @@
on:click={() => (descriptionsOpen = !descriptionsOpen)}
>
<iconify-icon
- class="text-xl align-[-0.25rem] transition-transform duration-300"
+ class="align-[-0.25rem] text-xl transition-transform duration-300"
class:rotate-90={descriptionsOpen}
icon="ri-arrow-right-s-line"
/>
Représentativité du cas type
</button>
{#if descriptionsOpen}
- <span class="block mt-1 pl-5 pr-1 text-sm">
+ <span class="mt-1 block pl-5 pr-1 text-sm">
{testCase.description}
</span>
{/if}
@@ -680,12 +680,12 @@
</div>
{:else}
<div
- class="mt-6 flex flex-col items-center gap-4 py-36 bg-gray-100 rounded-lg px-5"
+ class="mt-6 flex flex-col items-center gap-4 rounded-lg bg-gray-100 px-5 py-36"
>
Aucun cas type ne correspond aux filtres sélectionnés.
<button
- class="mb-8 flex items-center gap-1.5 py-1.5 px-3 bg-white hover:bg-neutral-200 active:bg-neutral-300 rounded-lg font-semibold text-le-gris-dispositif-dark hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back s-y_bCXRrkrYfP"
+ class="s-y_bCXRrkrYfP mb-8 flex items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-sm font-semibold uppercase tracking-wider text-le-gris-dispositif-dark transition-all duration-200 ease-out-back hover:bg-neutral-200 hover:text-black active:bg-neutral-300"
on:click={() => {
filters.forEach((filter) => (filter.value = false))
filters = [...filters]
diff --git a/src/lib/components/test_cases/TestCaseGraph.svelte b/src/lib/components/test_cases/TestCaseGraph.svelte
index d8f25cc1f..689bd1835 100644
--- a/src/lib/components/test_cases/TestCaseGraph.svelte
+++ b/src/lib/components/test_cases/TestCaseGraph.svelte
@@ -886,18 +886,18 @@
{#if situation.slider !== undefined}
<div class="relative">
{#if isCalculationRunning}
- <div class="absolute inset-0 bg-white z-20" out:fade>
- <div class="flex flex-col gap-7 m-2 p-2 animate-pulse-2">
+ <div class="absolute inset-0 z-20 bg-white" out:fade>
+ <div class="m-2 flex animate-pulse-2 flex-col gap-7 p-2">
{#each [2, 3, 2] as row}
<div class="flex flex-col gap-2">
- <div class="bg-neutral-300 w-24 h-4" />
+ <div class="h-4 w-24 bg-neutral-300" />
<div class="flex gap-4">
{#each Array(row) as _}
<div
- class="h-9 flex items-center bg-white text-neutral-600 border rounded-full overflow-hidden"
+ class="flex h-9 items-center overflow-hidden rounded-full border bg-white text-neutral-600"
>
- <div class="bg-neutral-300 w-9 h-9" />
- <div class="bg-neutral-300 mx-2 w-28 h-4" />
+ <div class="h-9 w-9 bg-neutral-300" />
+ <div class="mx-2 h-4 w-28 bg-neutral-300" />
</div>
{/each}
</div>
@@ -908,25 +908,25 @@
style="grid-auto-columns: auto 1fr; grid-auto-rows: 1fr auto auto;"
>
<div class="flex flex-col justify-between">
- <div class="bg-neutral-300 w-32 h-9" />
- <div class="bg-neutral-300 w-32 h-9" />
+ <div class="h-9 w-32 bg-neutral-300" />
+ <div class="h-9 w-32 bg-neutral-300" />
</div>
- <div class="bg-neutral-300 w-full h-72" />
+ <div class="h-72 w-full bg-neutral-300" />
<div class="col-start-2 flex flex-col gap-8">
<div class="flex justify-between">
- <div class="bg-neutral-300 w-32 h-9" />
- <div class="bg-neutral-300 w-32 h-9" />
+ <div class="h-9 w-32 bg-neutral-300" />
+ <div class="h-9 w-32 bg-neutral-300" />
</div>
<div class="flex gap-2">
{#each Array(10) as _}
- <div class="bg-neutral-300 w-full h-1" />
+ <div class="h-1 w-full bg-neutral-300" />
{/each}
</div>
<div class="mt-10 flex flex-col items-end gap-3">
- <div class="bg-neutral-300 w-52 h-6" />
- <div class="bg-neutral-300 w-72 h-3" />
+ <div class="h-6 w-52 bg-neutral-300" />
+ <div class="h-3 w-72 bg-neutral-300" />
</div>
- <div class="bg-neutral-300 w-52 h-4" />
+ <div class="h-4 w-52 bg-neutral-300" />
</div>
</div>
</div>
@@ -938,12 +938,12 @@
class:opacity-100={!isCalculationRunning}
>
<div
- class="flex flex-col gap-5 rounded-lg m-2 pt-3 pb-2 px-2 transition-all duration-300"
+ class="m-2 flex flex-col gap-5 rounded-lg px-2 pb-2 pt-3 transition-all duration-300"
>
{#each variableGroups.filter((variableGroup) => variableGroup.variables.length > 0) as { label: groupLabel, name: groupName, hideOpen: groupHideOpen, variables: groupVariables }}
- <div class="w-full flex flex-col gap-1">
+ <div class="flex w-full flex-col gap-1">
{#if groupLabel !== undefined}
- <span class="uppercase text-neutral-600 text-sm">
+ <span class="text-sm uppercase text-neutral-600">
{groupLabel} :
</span>
{/if}
@@ -964,7 +964,7 @@
{@const isSelected = customizations.selected !== "false"}
<div class="relative">
<div
- class="h-9 flex items-center bg-white border rounded-full shadow-neutral-500 overflow-hidden transition-all"
+ class="flex h-9 items-center overflow-hidden rounded-full border bg-white shadow-neutral-500 transition-all"
class:border-black={isSelected &&
(row.calculationName === "law" ||
row.calculationName === "revaluation")}
@@ -983,7 +983,7 @@
>
<div
slot="activator"
- class="group w-9 h-9"
+ class="group h-9 w-9"
style={`background-color: ${
customizations.pattern.background ??
"transparent"
@@ -999,7 +999,7 @@
>
{#if isSelectable}
<iconify-icon
- class="w-full h-full flex justify-center items-center pl-1 bg-black bg-opacity-0 text-white opacity-0 group-hover:opacity-100 group-hover:bg-opacity-40 group-active:bg-opacity-50 transition-all duration-200"
+ class="flex h-full w-full items-center justify-center bg-black bg-opacity-0 pl-1 text-white opacity-0 transition-all duration-200 group-hover:bg-opacity-40 group-hover:opacity-100 group-active:bg-opacity-50"
icon="ri-pencil-fill"
/>
{/if}
@@ -1007,11 +1007,11 @@
<div
slot="content"
- class="flex gap-2 rounded-lg border bg-white shadow-lg px-3 py-2 my-2"
+ class="my-2 flex gap-2 rounded-lg border bg-white px-3 py-2 shadow-lg"
>
{#each getCustomizations(groupName, row.calculationName) as customization}
<button
- class="w-10 h-10 rounded border-2 border-neutral-300 hover:border-blue-500"
+ class="h-10 w-10 rounded border-2 border-neutral-300 hover:border-blue-500"
on:click={() => {
variableCustomizations[
getVariableCustomizationName(
@@ -1034,7 +1034,7 @@
</div>
</PersistentPopover>
{:else}
- <div class="flex items-center w-9 h-full pl-2">
+ <div class="flex h-full w-9 items-center pl-2">
<div
class="w-full rounded-full"
style:height="{customizations.stroke?.width ??
@@ -1054,7 +1054,7 @@
: ""}
</span>
{#if isSelectable}
- <div class="w-[1px] h-5 bg-neutral-200" />
+ <div class="h-5 w-[1px] bg-neutral-200" />
<Tooltip
arrowBorderWidth="0px"
arrowClass="bg-black"
@@ -1064,7 +1064,7 @@
initialPlacement="top"
>
<button
- class="h-full group pl-0.5 pr-1"
+ class="group h-full pl-0.5 pr-1"
on:click={() => {
variableCustomizations[
getVariableCustomizationName(
@@ -1075,7 +1075,7 @@
}}
>
<div
- class="relative p-1 rounded-full group-hover:bg-neutral-200 group-active:bg-neutral-300 transition-all duration-200"
+ class="relative rounded-full p-1 transition-all duration-200 group-hover:bg-neutral-200 group-active:bg-neutral-300"
>
<iconify-icon
class="block text-2xl transition-all duration-500"
@@ -1097,7 +1097,7 @@
</button>
<div
slot="tooltip"
- class="overflow-hidden bg-black rounded-lg text-sm text-white px-2 py-1"
+ class="overflow-hidden rounded-lg bg-black px-2 py-1 text-sm text-white"
title={isSelected ? "Cacher" : "Montrer"}
>
{isSelected ? "Cacher" : "Montrer"}
@@ -1119,12 +1119,12 @@
style="grid-auto-columns: auto 1fr; grid-auto-rows: 1fr auto auto;"
>
<div
- class="flex flex-col justify-between items-center"
+ class="flex flex-col items-center justify-between"
style:padding-bottom="{svgPadding.bottom}px"
>
- <div class="hidden relative md:inline-block">
+ <div class="relative hidden md:inline-block">
<input
- class="bg-neutral-200 w-24 md:w-28 rounded-t border-b-2 border-black px-3 outline-none"
+ class="w-24 rounded-t border-b-2 border-black bg-neutral-200 px-3 outline-none md:w-28"
min="0"
max={maxVariableValue}
on:change={(event) => updateDomain(event, "y", "max")}
@@ -1133,7 +1133,7 @@
value={domain.y?.max ?? maxVariableValue}
/>
<span
- class="absolute right-1 bg-neutral-200 px-2 pointer-events-none"
+ class="pointer-events-none absolute right-1 bg-neutral-200 px-2"
>
€
</span>
@@ -1141,7 +1141,7 @@
<div class="relative hidden md:inline-block">
<input
- class="bg-neutral-200 w-28 rounded-t border-b-2 border-black px-3 outline-none"
+ class="w-28 rounded-t border-b-2 border-black bg-neutral-200 px-3 outline-none"
min="0"
max={maxVariableValue}
on:change={(event) => updateDomain(event, "y", "min")}
@@ -1150,7 +1150,7 @@
value={situation.slider.yMin ?? domain.y?.min ?? 0}
/>
<span
- class="absolute right-1 bg-neutral-200 px-2 pointer-events-none"
+ class="pointer-events-none absolute right-1 bg-neutral-200 px-2"
>
€
</span>
@@ -1158,7 +1158,7 @@
</div>
<div
id="test_case_graph"
- class="w-full h-screen max-h-64 pb-10 pr-5 bg-white"
+ class="h-screen max-h-64 w-full bg-white pb-10 pr-5"
>
<PieceOfCake
let:modelGroups
@@ -1228,9 +1228,9 @@
>
<SharedTooltip let:index {modelGroups}>
<div
- class="w-[22rem] rounded-xl border bg-white shadow-lg overflow-hidden"
+ class="w-[22rem] overflow-hidden rounded-xl border bg-white shadow-lg"
>
- <div class="flex gap-3 p-3 bg-neutral-100">
+ <div class="flex gap-3 bg-neutral-100 p-3">
<div class="flex items-center">
{#each Object.keys(personSituation).sort( (populationId1, populationId2) => populationId1.localeCompare(populationId2), ) as populationId}
{@const activite = getVariableValue(
@@ -1323,7 +1323,7 @@
</span>
</div>
</div>
- <div class="px-5 py-3 flex flex-col gap-3">
+ <div class="flex flex-col gap-3 px-5 py-3">
{#each variableGroups.slice(1) as { css, label, variables }}
<div>
<span class={css ?? ""}>
@@ -1342,7 +1342,7 @@
)}</span
> /an
</span>
- <ul class="list-disc text-sm font-bold px-6">
+ <ul class="list-disc px-6 text-sm font-bold">
{#each variables as variable}
<li style:margin-left="{variable.depth * 20}px">
<div class="inline-flex">
@@ -1413,7 +1413,7 @@
>
{#if deciles !== undefined}
<span
- class="self-end mt-0.5 ml-1 text-nowrap text-sm text-gray-800 bg-gray-200 px-1.5 rounded-lg"
+ class="ml-1 mt-0.5 self-end text-nowrap rounded-lg bg-gray-200 px-1.5 text-sm text-gray-800"
>
{@html formatLongOrdinalSup(
(deciles.find(
@@ -1437,13 +1437,13 @@
</PieceOfCake>
</div>
<div
- class="col-start-2 w-full flex justify-between items-start"
+ class="col-start-2 flex w-full items-start justify-between"
style:padding-right="{svgPadding.right}px"
>
<div class="flex flex-col justify-center">
<div class="relative inline-block">
<input
- class="bg-neutral-200 w-24 md:w-28 rounded-t border-b-2 border-black px-3 outline-none"
+ class="w-24 rounded-t border-b-2 border-black bg-neutral-200 px-3 outline-none md:w-28"
min="0"
max="100000"
on:change={(event) => updateDomain(event, "x", "min")}
@@ -1452,7 +1452,7 @@
value={situation.slider.min}
/>
<span
- class="absolute right-1 bg-neutral-200 px-2 pointer-events-none"
+ class="pointer-events-none absolute right-1 bg-neutral-200 px-2"
>
€
</span>
@@ -1472,7 +1472,7 @@
{/if}
</div>
- <p class="text-sm text-center">
+ <p class="text-center text-sm">
<span class="uppercase"
>{#if firstPersonActivity === "actif"}
{#if firstPersonCategorieSalarie === "public_titulaire_etat" || firstPersonCategorieSalarie === "public_titulaire_hospitaliere" || firstPersonCategorieSalarie === "public_titulaire_territoriale" || firstPersonCategorieSalarie === "public_titulaire_militaire" || firstPersonCategorieSalarie === "public_titulaire_territoriale"}
@@ -1494,7 +1494,7 @@
<div class="flex flex-col justify-center">
<div class="relative inline-block">
<input
- class="bg-neutral-200 w-24 md:w-28 rounded-t border-b-2 border-black px-3 outline-none"
+ class="w-24 rounded-t border-b-2 border-black bg-neutral-200 px-3 outline-none md:w-28"
min="0"
max="100000"
on:change={(event) => updateDomain(event, "x", "max")}
@@ -1503,7 +1503,7 @@
value={situation.slider.max}
/>
<span
- class="absolute right-1 bg-neutral-200 px-2 pointer-events-none"
+ class="pointer-events-none absolute right-1 bg-neutral-200 px-2"
>
€
</span>
@@ -1524,31 +1524,31 @@
</div>
</div>
<div
- class="col-start-2 w-full flex"
+ class="col-start-2 flex w-full"
style:padding-left="{svgPadding.left}px"
style:padding-right="{svgPadding.right}px"
>
{#each deciles as [rate, end, widthPercentage, cutStart, cutEnd], index}
<div
- class="group shrink-0 flex flex-col text-center text-sm"
+ class="group flex shrink-0 flex-col text-center text-sm"
style:width="{widthPercentage}%"
class:pointer-events-none={index !== 0}
>
<div
- class="self-stretch relative h-0.5 bg-neutral-500 ml-1 group-first:ml-0"
+ class="relative ml-1 h-0.5 self-stretch bg-neutral-500 group-first:ml-0"
>
{#if !cutStart}
<div
- class="absolute left-0 top-1/2 -translate-y-1/2 border-y-4 border-y-transparent border-l-4 border-l-neutral-500"
+ class="absolute left-0 top-1/2 -translate-y-1/2 border-y-4 border-l-4 border-y-transparent border-l-neutral-500"
/>
{/if}
{#if !cutEnd}
<div
- class="absolute right-0 top-1/2 -translate-y-1/2 border-y-4 border-y-transparent border-r-4 border-r-neutral-500"
+ class="absolute right-0 top-1/2 -translate-y-1/2 border-y-4 border-r-4 border-y-transparent border-r-neutral-500"
/>
{/if}
</div>
- <span class="self-center text-neutral-500 cursor-default">
+ <span class="cursor-default self-center text-neutral-500">
{#if index === 0}
<Tooltip
arrowClass="bg-white"
@@ -1556,7 +1556,7 @@
initialPlacement="top"
>
<span
- class="text-nowrap font-normal hover:text-black cursor-pointer"
+ class="cursor-pointer text-nowrap font-normal hover:text-black"
>{@html formatLongOrdinalSup(rate)}
<span class="underline decoration-dotted">décile</span>
<iconify-icon
@@ -1567,17 +1567,17 @@
<div
slot="tooltip"
- class="overflow-hidden bg-white text-start text-sm font-light rounded-lg border border-gray-200 shadow-md"
+ class="overflow-hidden rounded-lg border border-gray-200 bg-white text-start text-sm font-light shadow-md"
>
<div
- class="py-2 px-3 bg-gray-100 border-b border-gray-200"
+ class="border-b border-gray-200 bg-gray-100 px-3 py-2"
>
<h3 class="font-semibold text-gray-900">
Indicateur du décile de niveau de vie
</h3>
</div>
- <div class="py-2 px-3">
- <span class="text-black font-normal">
+ <div class="px-3 py-2">
+ <span class="font-normal text-black">
Cette échelle indique à quel décile de niveau de vie
correspondent les salaires des 100 cas types fictifs
du graphique, dans le cadre du {#if $billActive}
@@ -1622,7 +1622,7 @@
{/each}
</div>
</div>
- <div class="flex flex-col mx-5 md:ml-32 mt-5 md:mr-10 gap-4">
+ <div class="mx-5 mt-5 flex flex-col gap-4 md:ml-32 md:mr-10">
<TestCaseGraphXlsxExport
{displayMode}
{domain}
@@ -1639,15 +1639,15 @@
on:click={() => (grapheExplanationOpen = !grapheExplanationOpen)}
>
<iconify-icon
- class="text-xl align-[-0.25rem] transition-transform duration-300"
+ class="align-[-0.25rem] text-xl transition-transform duration-300"
class:rotate-90={grapheExplanationOpen}
icon="ri-arrow-right-s-line"
/>
Que représente ce graphique ?
</button>
{#if grapheExplanationOpen}
- <span class="block mt-1 pl-5 pr-1 text-sm">
- <span class="text-black font-normal">
+ <span class="mt-1 block pl-5 pr-1 text-sm">
+ <span class="font-normal text-black">
Ce graphique permet de comprendre comment évolue le système
socio-fiscal d'un cas type selon {#if firstPersonActivity === "actif"}
{#if firstPersonCategorieSalarie === "public_titulaire_etat" || firstPersonCategorieSalarie === "public_titulaire_hospitaliere" || firstPersonCategorieSalarie === "public_titulaire_territoriale" || firstPersonCategorieSalarie === "public_titulaire_militaire" || firstPersonCategorieSalarie === "public_titulaire_territoriale"}
diff --git a/src/lib/components/test_cases/TestCaseGraphXlsxExport.svelte b/src/lib/components/test_cases/TestCaseGraphXlsxExport.svelte
index 8390bdfaa..512ca18c0 100644
--- a/src/lib/components/test_cases/TestCaseGraphXlsxExport.svelte
+++ b/src/lib/components/test_cases/TestCaseGraphXlsxExport.svelte
@@ -497,9 +497,9 @@
}
</script>
-<div class="flex-col flex justify-end gap-2">
+<div class="flex flex-col justify-end gap-2">
<button
- class="lx-link-simple hover:text-black text-gray-600 active:text-gray-700 text-right disabled:cursor-not-allowed disabled:opacity-50"
+ class="lx-link-simple text-right text-gray-600 hover:text-black active:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
on:click={xlsxExport}
>
<iconify-icon
@@ -507,7 +507,7 @@
icon="ri-file-download-line"
/>Exporter les données*
</button>
- <span class="text-gray-400 text-xs text-right"
+ <span class="text-right text-xs text-gray-400"
>*Données des 100 cas types du graphique | .xlsx - 50 Ko</span
>
</div>
diff --git a/src/lib/components/test_cases/TestCaseScreenshotLayout.svelte b/src/lib/components/test_cases/TestCaseScreenshotLayout.svelte
index 6a4d2bb25..c6d2497ef 100644
--- a/src/lib/components/test_cases/TestCaseScreenshotLayout.svelte
+++ b/src/lib/components/test_cases/TestCaseScreenshotLayout.svelte
@@ -34,11 +34,11 @@
<div
id="test_case_screenshot_layout"
- class="absolute -z-10 aspect-[40/21] flex justify-center items-center p-10 bg-white"
+ class="absolute -z-10 flex aspect-[40/21] items-center justify-center bg-white p-10"
>
- <div class="relative min-w-80 lx-card-underline-le-vert">
+ <div class="lx-card-underline-le-vert relative min-w-80">
<div
- class="group w-full flex flex-col items-stretch text-sm rounded-md overflow-hidden"
+ class="group flex w-full flex-col items-stretch overflow-hidden rounded-md text-sm"
>
<div class="bg-gray-100 p-4 pb-2 text-left">
<TestCaseSummary
@@ -75,20 +75,20 @@
</p>
{/if}
<iconify-icon
- class="block text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+ class="block self-end text-xl text-le-vert-400 group-hover:text-le-jaune-very-dark"
icon="ri-arrow-right-line"
/>
</div>
</div>
{#if testCase.dixieme !== undefined}
- <div class="absolute -right-7 top-0 -translate-y-1/2 flex items-center">
+ <div class="absolute -right-7 top-0 flex -translate-y-1/2 items-center">
<div
- class="flex items-center text-sm bg-le-bleu-light pl-2 pr-4 rounded-l-full"
+ class="flex items-center rounded-l-full bg-le-bleu-light pl-2 pr-4 text-sm"
>
{@html formatLongOrdinalSup(testCase.dixieme)} décile
</div>
<svg
- class="w-7 h-7 -translate-x-1/2"
+ class="h-7 w-7 -translate-x-1/2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
diff --git a/src/lib/components/test_cases/TestCaseSummary.svelte b/src/lib/components/test_cases/TestCaseSummary.svelte
index 976202099..94db3bbe2 100644
--- a/src/lib/components/test_cases/TestCaseSummary.svelte
+++ b/src/lib/components/test_cases/TestCaseSummary.svelte
@@ -314,7 +314,7 @@
!deepEqual(situation, testCasesCore[situationIndex])}
{@const isDuplicated = situationIndex >= testCasesCore.length}
<div
- class="h-12 flex justify-between items-center bg-gray-200 px-4 py-1 mb-3 -mx-4"
+ class="-mx-4 mb-3 flex h-12 items-center justify-between bg-gray-200 px-4 py-1"
class:h-16={mode === "compare"}
class:-mt-0={mode === "compare"}
class:-ml-6={mode === "compare"}
@@ -342,13 +342,13 @@
>
{situationDetails?.[0].description ?? situation.title}
{#if isModified}
- <span class="font-bold text-nowrap">
+ <span class="text-nowrap font-bold">
- Cas type modifié |
{#if isModified}
<button class="lx-link-simple" on:click={resetSituation}>
<iconify-icon
- class="align-[-0.23rem] text-base pr-1"
+ class="pr-1 align-[-0.23rem] text-base"
icon="ri:refresh-line"
/>Réinitialiser
</button>
@@ -363,7 +363,7 @@
{#if mode === "view"}
<div class="flex gap-1.5">
<a
- class="p-1.5 rounded-full hover:bg-gray-400/30 active:bg-gray-400/50 transition-all"
+ class="rounded-full p-1.5 transition-all hover:bg-gray-400/30 active:bg-gray-400/50"
href={newSimulationUrl({
...displayMode,
edit: undefined,
@@ -397,7 +397,7 @@
class="flex flex-col-reverse flex-wrap justify-between gap-6 md:flex-row md:items-start"
>
<!-- État des lieux de la famille -->
- <div class="flex items-center flex-wrap gap-1">
+ <div class="flex flex-wrap items-center gap-1">
<!-- Territoire -->
<!-- <div class="flex">
<PictoArbreMetropole />
@@ -557,9 +557,9 @@
: "grid grid-cols-2"}
>
<div
- class="ml-2 flex items-center rounded-md border-b border-gray-300 bg-white px-2 py-1 mb-0.5"
+ class="mb-0.5 ml-2 flex items-center rounded-md border-b border-gray-300 bg-white px-2 py-1"
>
- <div class="w-8 h-8 pr-2" class:hidden={mode === "select"}>
+ <div class="h-8 w-8 pr-2" class:hidden={mode === "select"}>
<PictoMaison />
</div>
<p
@@ -594,7 +594,7 @@
class="ml-2 flex items-center rounded-md border-b border-gray-300 bg-white px-2 py-1"
>
<iconify-icon
- class="text-lg align-[-0.2rem] text-red-800"
+ class="align-[-0.2rem] text-lg text-red-800"
icon="mdi:map-marker-radius"
/>
<p
@@ -664,7 +664,7 @@
plus_values_base_large -
rente_viagere_titre_onereux_net}
{#if revenus_nets_du_capital !== 0}
- <div class="px-1 flex items-center">
+ <div class="flex items-center px-1">
<div>
<PictoRevenusCapital />
</div>
@@ -920,7 +920,7 @@
<!--Revenu principal (salaire de base, retraite , etc)-->
<div class="flex flex-col flex-wrap md:flex-row md:items-center">
- <div class="mr-2 text-gray-800 text-lg 2xl:text-xl">
+ <div class="mr-2 text-lg text-gray-800 2xl:text-xl">
{#if allocation_retour_emploi || activite === "chomeur"}
<span>
{euroAmountFormatter(
@@ -938,7 +938,7 @@
d'allocation/an
</abbr>
<span
- class="text-nowrap text-base text-black py-0.5 px-2 rounded-full font-bold"
+ class="text-nowrap rounded-full px-2 py-0.5 text-base font-bold text-black"
class:text-sm={mode === "select"}
class:bg-gray-300={mode === "view" || mode === "compare"}
class:bg-gray-200={mode === "select"}
@@ -970,7 +970,7 @@
</span>
<span class="text-xs"> de retraite brute/an </span>
<span
- class="text-nowrap text-base text-black py-0.5 px-2 rounded-full font-bold"
+ class="text-nowrap rounded-full px-2 py-0.5 text-base font-bold text-black"
class:text-sm={mode === "select"}
class:bg-gray-300={mode === "view" || mode === "compare"}
class:bg-gray-200={mode === "select"}
@@ -1012,7 +1012,7 @@
</abbr>
</span>
<span
- class="text-nowrap text-base text-black py-0.5 px-2 rounded-full font-bold"
+ class="text-nowrap rounded-full px-2 py-0.5 text-base font-bold text-black"
class:text-sm={mode === "select"}
class:bg-gray-300={mode === "view" || mode === "compare"}
class:bg-gray-200={mode === "select"}
@@ -1051,7 +1051,7 @@
base/an
</abbr>
<span
- class="text-nowrap text-base text-blac py-0.5 px-2 rounded-full font-bold"
+ class="text-blac text-nowrap rounded-full px-2 py-0.5 text-base font-bold"
class:text-sm={mode === "select"}
class:bg-gray-300={mode === "view" || mode === "compare"}
class:bg-gray-200={mode === "select"}
@@ -1192,10 +1192,10 @@
{#if activite === "actif"}
{#if secteur_activite_employeur === "agricole"}
<div
- class="mb-1 mt-2 flex items-center gap-2 w-fit rounded-md border-b border-gray-300 bg-white px-2 py-1"
+ class="mb-1 mt-2 flex w-fit items-center gap-2 rounded-md border-b border-gray-300 bg-white px-2 py-1"
>
<iconify-icon
- class="ml-1 w-8 h-8"
+ class="ml-1 h-8 w-8"
icon="twemoji-tractor"
width="30"
height="30"
@@ -1211,7 +1211,7 @@
{:else if prime_partage_valeur_exceptionnelle !== 0 || prime_partage_valeur !== 0 || (primes_salaires !== 0 && mode === "compare") || displayMode.parametersVariableName === "allegement_general" || displayMode.parametersVariableName === "versement_transport"}
{#if categorie_salarie === "prive_non_cadre" || categorie_salarie === "prive_cadre"}
<div
- class="mb-1 mt-2 mx-1 flex items-center gap-2 w-fit rounded-md border-b border-gray-300 bg-white px-2 py-1"
+ class="mx-1 mb-1 mt-2 flex w-fit items-center gap-2 rounded-md border-b border-gray-300 bg-white px-2 py-1"
>
<PictoEntreprise />
<span class="text-xs">
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index 2eef3aab5..14dd814d6 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -331,15 +331,15 @@
class="mt-5 flex justify-start"
id="situation_{situationIndex}_waterfall_showall"
>
- <label class="inline-flex items-center cursor-pointer">
+ <label class="inline-flex cursor-pointer items-center">
<input
type="checkbox"
value=""
- class="sr-only peer"
+ class="peer sr-only"
bind:checked={$showNulls}
/>
<div
- class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-0 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-le-vert-500 shrink-0"
+ class="peer relative h-6 w-11 shrink-0 rounded-full bg-gray-400 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-le-vert-500 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-0"
></div>
<span class="ml-2"
>Montrer tous les dispositifs directs, y compris si le montant
@@ -368,7 +368,7 @@
$billName === undefined
? variableSummaryByName
: variableSummaryByNameByReformName[$billName]}
- <div class="w-full flex justify-between bg-gray-100">
+ <div class="flex w-full justify-between bg-gray-100">
<!--Impacts et waterfall-->
<div
class="relative w-10/12 bg-white py-4 md:w-11/12"
diff --git a/src/lib/components/transverse_pages/AnchorTitle.svelte b/src/lib/components/transverse_pages/AnchorTitle.svelte
index 30802d030..ea7477825 100644
--- a/src/lib/components/transverse_pages/AnchorTitle.svelte
+++ b/src/lib/components/transverse_pages/AnchorTitle.svelte
@@ -31,17 +31,17 @@
this={tag}
{...$$restProps}
{id}
- class="relative group {$$props.class ?? ''}"
+ class="group relative {$$props.class ?? ''}"
>
<button class="absolute -ml-8 mt-1 h-6" on:click={copyUrl}>
<iconify-icon
- class="group-hover:text-black text-neutral-400"
+ class="text-neutral-400 group-hover:text-black"
icon={!linkCopied ? "ri-links-line" : "ri-check-line"}
/>
{#if linkCopied}
<span
- class="absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full bg-le-vert-800 text-white px-2 py-1 text-sm text-nowrap rounded-md font-sans font-normal z-50"
+ class="absolute -top-2 left-1/2 z-50 -translate-x-1/2 -translate-y-full text-nowrap rounded-md bg-le-vert-800 px-2 py-1 font-sans text-sm font-normal text-white"
>Lien copié !</span
>
{/if}
diff --git a/src/lib/components/transverse_pages/Footer.svelte b/src/lib/components/transverse_pages/Footer.svelte
index 3476774b7..99c9e7193 100644
--- a/src/lib/components/transverse_pages/Footer.svelte
+++ b/src/lib/components/transverse_pages/Footer.svelte
@@ -3,17 +3,17 @@
</script>
<footer
- class="border-t-4 grid gap-10 border-le-vert-500 px-8 py-6 md:grid-cols-3 md:px-16 md:py-2 bg-neutral-50"
+ class="grid gap-10 border-t-4 border-le-vert-500 bg-neutral-50 px-8 py-6 md:grid-cols-3 md:px-16 md:py-2"
>
<div
- class="my-0 md:my-10 border-b-2 pb-10 md:border-b-0 md:border-r-2 md:pr-5 md:col-span-1 col-span-3 text-neutral-700"
+ class="col-span-3 my-0 border-b-2 pb-10 text-neutral-700 md:col-span-1 md:my-10 md:border-b-0 md:border-r-2 md:pr-5"
>
- <h2 class="text-2xl font-light mb-5">À propos de LexImpact</h2>
+ <h2 class="mb-5 text-2xl font-light">À propos de LexImpact</h2>
<p class="font-serif leading-relaxed tracking-wider">
LexImpact est une cellule de l'Assemblée nationale rattachée à la
direction du Contrôle et de l'évaluation. Elle propose différents outils
d'évaluation des politiques publiques passées ou imaginées. <a
- class="font-sans lx-link-text"
+ class="lx-link-text font-sans"
href="https://leximpact.an.fr/"
target="_blank"
>Accueil Leximpact <iconify-icon
@@ -37,23 +37,23 @@
</a>
</div>
</div>
- <div class="flex-col col-span-3 md:col-span-2 my-0 md:my-10">
+ <div class="col-span-3 my-0 flex-col md:col-span-2 md:my-10">
<div
- class="flex md:flex-row flex-col justify-between items-center gap-y-4 mb-10 md:mb-0"
+ class="mb-10 flex flex-col items-center justify-between gap-y-4 md:mb-0 md:flex-row"
>
- <h2 class="block text-2xl font-bold mb-5">
+ <h2 class="mb-5 block text-2xl font-bold">
À propos du simulateur socio-fiscal
</h2>
</div>
<p
- class="pb-3 text-lg leading-relaxed max-w-prose tracking-wider font-serif"
+ class="max-w-prose pb-3 font-serif text-lg leading-relaxed tracking-wider"
>
Le simulateur socio-fiscal LexImpact permet de mesurer les impacts du
droit en vigueur ou d’une réforme de la législation sociale et fiscale.
</p>
<button
- class="justify-self-end font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-jaune-dark hover:bg-le-vert-600 active:bg-le-vert-800 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="flex items-center gap-2 justify-self-end rounded-md bg-le-jaune-dark px-5 py-2 font-sans text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-le-vert-600 active:bg-le-vert-800"
title="Vers le simulateur budgétaire de l'impôt sur le revenu"
on:click={() => goto("/")}
>
@@ -63,7 +63,7 @@
/>
</button>
- <div class="md:flex-row flex-col flex md:items-end mt-6 gap-10">
+ <div class="mt-6 flex flex-col gap-10 md:flex-row md:items-end">
<div class="flex flex-col md:w-1/2">
<!-- <a
class="block pb-3 hover:text-le-bleu"
@@ -76,7 +76,7 @@
/>
</a> -->
<a
- class="block pb-3 lx-link-uppercase font-sans"
+ class="lx-link-uppercase block pb-3 font-sans"
href="/fonctionnement"
>
Fonctionnement du simulateur
@@ -88,7 +88,7 @@
<p class=" leading-relaxed">
Actualités sur
<a
- class="text-nowrap lx-link-text font-sans"
+ class="lx-link-text text-nowrap font-sans"
href="https://chat.whatsapp.com/JLqiO8nuitlHRqry4FK2Cm"
target="_blank"
>
@@ -99,7 +99,7 @@
</a>
et
<a
- class="text-nowrap lx-link-text font-sans"
+ class="lx-link-text text-nowrap font-sans"
href="https://t.me/joinchat/UI8LKl2iDlZhNDU8"
target="_blank"
>
@@ -110,7 +110,7 @@
>.
</p>
</div>
- <div class="flex flex-col md:w-1/2 md:text-right gap-y-3">
+ <div class="flex flex-col gap-y-3 md:w-1/2 md:text-right">
<a
class="lx-link-simple-no-underline"
href="https://leximpact.an.fr/cgu"
diff --git a/src/lib/components/variables/InflationLawButton.svelte b/src/lib/components/variables/InflationLawButton.svelte
index 20a9d0478..4dd4b4f62 100644
--- a/src/lib/components/variables/InflationLawButton.svelte
+++ b/src/lib/components/variables/InflationLawButton.svelte
@@ -49,7 +49,7 @@
</script>
<button
- class="w-full flex items-center px-2 py-1 pr-4 rounded-md bg-white text-sm text-le-gris-dispositif-dark shadow-md border-2 border-white hover:border-le-gris-dispositif hover:border-2 transition-all duration-500 ease-out-back"
+ class="flex w-full items-center rounded-md border-2 border-white bg-white px-2 py-1 pr-4 text-sm text-le-gris-dispositif-dark shadow-md transition-all duration-500 ease-out-back hover:border-2 hover:border-le-gris-dispositif"
on:click
>
<iconify-icon class="mr-2 align-[-0.2rem] text-2xl" icon="ri-question-line" />
@@ -57,7 +57,7 @@
<p class="text-left font-bold tracking-wider">
Droit attendu pour {$yearPLF}
<br />
- <span class="font-normal text-sm tracking-wide">
+ <span class="text-sm font-normal tracking-wide">
{#if parameterName?.startsWith("impot_revenu.bareme_ir_depuis_1945.bareme")}
Indexation d'usage du barème de l'IR par le PLF
{/if}
diff --git a/src/lib/components/variables/InflationLawDetails.svelte b/src/lib/components/variables/InflationLawDetails.svelte
index ae31dec44..1d3a102a9 100644
--- a/src/lib/components/variables/InflationLawDetails.svelte
+++ b/src/lib/components/variables/InflationLawDetails.svelte
@@ -144,22 +144,22 @@
billInflatorValueFormatted !== revaluationInflatorValueFormatted
</script>
-<div class="border-b pb-4 mb-4">
+<div class="mb-4 border-b pb-4">
{#if !parameterIsScale}
- <p class="text-le-gris-dispositif-dark text-lg normal-case font-light">
+ <p class="text-lg font-light normal-case text-le-gris-dispositif-dark">
Indexation du {billParameter.description?.toLowerCase()} :
</p>
- <p class="text-gray-600 mt-2">
- <span class="bg-gray-100 rounded-sm p-1 font-bold"
+ <p class="mt-2 text-gray-600">
+ <span class="rounded-sm bg-gray-100 p-1 font-bold"
>{lawValueFormatted} €
- <span class="font-normal text-xs">{$yearPLF - 1}</span>
+ <span class="text-xs font-normal">{$yearPLF - 1}</span>
{#if showBillInflator}
<span class="text-sm text-le-rouge-bill">
<iconify-icon
class="align-[-0.3rem] text-xl"
icon="mdi-arrow-right-bold"
/>Le PLF {$yearPLF} augmente ce montant de
- <span class="font-bold text-base">{billInflatorValueFormatted}</span
+ <span class="text-base font-bold">{billInflatorValueFormatted}</span
>.
</span>
{:else}
@@ -169,32 +169,32 @@
class="align-[-0.3rem] text-xl"
icon="mdi-arrow-right-bold"
/></span
- ><span class="text-black bg-gray-100 rounded-sm p-1 font-bold"
+ ><span class="rounded-sm bg-gray-100 p-1 font-bold text-black"
>{revaluationValueFormatted} €
- <span class="font-normal text-xs">{$yearPLF}</span></span
+ <span class="text-xs font-normal">{$yearPLF}</span></span
>
{/if}
</span>
</p>
{:else}
- <p class="text-le-gris-dispositif-dark text-lg normal-case font-light">
+ <p class="text-lg font-light normal-case text-le-gris-dispositif-dark">
Indexation du {billParameter.title?.toLowerCase()} :
</p>
{#if showBillInflator}
<p
- class="bg-gray-100 rounded-sm p-1 font-bold text-sm text-le-rouge-bill"
+ class="rounded-sm bg-gray-100 p-1 text-sm font-bold text-le-rouge-bill"
>
<iconify-icon
- class="align-[-0.3rem] text-xl rotate-90"
+ class="rotate-90 align-[-0.3rem] text-xl"
icon="mdi-arrow-up-bold"
/>Le PLF {$yearPLF} augmente les seuils de {billInflatorValueFormatted}.
</p>
{:else}
<p
- class="bg-gray-100 rounded-sm p-1 font-bold text-sm text-le-rouge-bill"
+ class="rounded-sm bg-gray-100 p-1 text-sm font-bold text-le-rouge-bill"
>
<iconify-icon
- class="align-[-0.3rem] text-xl rotate-90"
+ class="rotate-90 align-[-0.3rem] text-xl"
icon="mdi-arrow-up-bold"
/>En {$yearPLF}, les seuils augmentent de {revaluationInflatorValueFormatted}.
</p>
diff --git a/src/lib/components/variables/InflationLawInfoModal.svelte b/src/lib/components/variables/InflationLawInfoModal.svelte
index 79686e46a..e281638f6 100644
--- a/src/lib/components/variables/InflationLawInfoModal.svelte
+++ b/src/lib/components/variables/InflationLawInfoModal.svelte
@@ -155,9 +155,9 @@
</div>
</div>
- <div class="py-2 border-t">
+ <div class="border-t py-2">
<p class="text-base font-bold">Sources :</p>
- <ol class="text-base leading-6 list-decimal list-inside">
+ <ol class="list-inside list-decimal text-base leading-6">
{#each references as reference}
<li>
{#if reference.href !== undefined}
diff --git a/src/lib/components/variables/VariableDetail.svelte b/src/lib/components/variables/VariableDetail.svelte
index ea551dad9..bce96461e 100644
--- a/src/lib/components/variables/VariableDetail.svelte
+++ b/src/lib/components/variables/VariableDetail.svelte
@@ -170,12 +170,12 @@
<svelte:window bind:innerHeight />
<div
- class="z-20 fixed inset-0 bg-black/20"
+ class="fixed inset-0 z-20 bg-black/20"
transition:fade={{ duration: 500, easing: quartOut }}
/>
<aside
- class="z-20 fixed inset-x-0 lg:inset-x-20 xl:inset-x-36 top-32 md:top-20 bottom-0 lg:inset-y-0 flex flex-col p-4 lg:pt-20 lg:pb-10 lg:px-8 overflow-y-scroll bg-white rounded-t-2xl lg:rounded-t-none shadow-2xl"
+ class="fixed inset-x-0 bottom-0 top-32 z-20 flex flex-col overflow-y-scroll rounded-t-2xl bg-white p-4 shadow-2xl md:top-20 lg:inset-x-20 lg:inset-y-0 lg:rounded-t-none lg:px-8 lg:pb-10 lg:pt-20 xl:inset-x-36"
transition:fly={{
duration: 500,
y: innerHeight,
@@ -187,16 +187,16 @@
excluded: [document.querySelector("nav")],
}}
>
- <button class="self-end fixed z-20 p-1" on:click={() => dispatch("close")}>
+ <button class="fixed z-20 self-end p-1" on:click={() => dispatch("close")}>
<iconify-icon
- class="block p-1 text-2xl text-neutral-500 bg-neutral-200 rounded-full"
+ class="block rounded-full bg-neutral-200 p-1 text-2xl text-neutral-500"
icon="ri:close-fill"
/>
</button>
<div class="flex flex-col gap-10 lg:px-12">
- <div class="self-center flex flex-col items-center mt-12">
- <h4 class="font-serif font-bold text-2xl">
+ <div class="mt-12 flex flex-col items-center self-center">
+ <h4 class="font-serif text-2xl font-bold">
{label}
</h4>
@@ -214,7 +214,7 @@
<article>
{#if note !== undefined}
<span
- class="break-words font-serif leading-normal text-black text-bas xl:text-lg"
+ class="text-bas break-words font-serif leading-normal text-black xl:text-lg"
>
{@html note}
</span>
@@ -258,7 +258,7 @@
{#each Object.entries(referencesByInstant).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
<div class="rounded-sm bg-le-gris-dispositif-ultralight p-2">
{#each references as { href, note, title }}
- <ul class="md:text-base text-sm">
+ <ul class="text-sm md:text-base">
<li>
{#if href === undefined}
{#if title !== undefined}
@@ -286,7 +286,7 @@
{#if Object.hasOwn(memoUrlByName, name)}
<a
- class="mt-4 inline-flex items-center gap-1.5 py-1.5 px-2 bg-white hover:bg-neutral-100 active:bg-neutral-200 rounded-lg font-semibold text-le-gris-dispositif hover:text-le-gris-dispositif-dark text-sm xl:text-base tracking-wider uppercase transition-all duration-200 ease-out-back s-y_bCXRrkrYfP"
+ class="s-y_bCXRrkrYfP mt-4 inline-flex items-center gap-1.5 rounded-lg bg-white px-2 py-1.5 text-sm font-semibold uppercase tracking-wider text-le-gris-dispositif transition-all duration-200 ease-out-back hover:bg-neutral-100 hover:text-le-gris-dispositif-dark active:bg-neutral-200 xl:text-base"
href={memoUrlByName[name]}
rel="noreferrer"
target="_blank"
@@ -302,9 +302,9 @@
>
{#if budgetVariablesName.has(name)}
{#if budgetSimulationOutdated || $budgetSimulation === undefined}
- <div class="flex flex-col gap-2 animate-pulse-2">
- <div class="self-stretch h-6 mr-64 bg-neutral-300" />
- <div class="self-stretch h-6 mr-48 bg-neutral-300" />
+ <div class="flex animate-pulse-2 flex-col gap-2">
+ <div class="mr-64 h-6 self-stretch bg-neutral-300" />
+ <div class="mr-48 h-6 self-stretch bg-neutral-300" />
</div>
{:else if $budgetSimulation.errors != null && $budgetSimulation.errors.length > 0}
{#each $budgetSimulation.errors as error}
@@ -319,7 +319,7 @@
>
{/if}
<a
- class="w-fit mt-4 mx-auto flex items-center gap-2 py-1.5 px-4 shadow-lg bg-le-vert-400 hover:bg-le-vert-500 active:bg-le-vert-600 rounded-md text-white text-sm xl:text-base font-bold tracking-[0.085em] uppercase"
+ class="mx-auto mt-4 flex w-fit items-center gap-2 rounded-md bg-le-vert-400 px-4 py-1.5 text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-le-vert-500 active:bg-le-vert-600 xl:text-base"
href={newSimulationUrl({
budget: true,
parametersVariableName: name,
@@ -334,7 +334,7 @@
/>
</a>
{:else}
- <span class="text-base xl:text-lg italic">
+ <span class="text-base italic xl:text-lg">
Le calcul des impacts budgétaires du dispositif « {shortLabel} »
n'est pas encore disponible.
<span class="font-normal"
@@ -361,11 +361,11 @@
{/if}
</span>
<div
- class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-5 border-b border-dashed border-black pb-16"
+ class="mt-4 grid grid-cols-1 gap-2 border-b border-dashed border-black pb-16 sm:gap-5 md:grid-cols-3"
>
{#each filteredTestCases.length > 0 ? filteredTestCases : nonNullTestCases as { title, situations, indices }}
<a
- class="group flex flex-col gap-2 px-4 py-2 lx-card-bg-gray-underline-le-vert"
+ class="lx-card-bg-gray-underline-le-vert group flex flex-col gap-2 px-4 py-2"
href={newSimulationUrl({
parametersVariableName: name,
testCasesIndex: indices,
@@ -373,7 +373,7 @@
})}
>
<div
- class="flex-1 flex items-center gap-3"
+ class="flex flex-1 items-center gap-3"
class:flex-col={situations.length === 2}
>
{#if situations.length === 2}
@@ -391,7 +391,7 @@
>
</span>
{:else}
- <div class="shrink-0 grid grid-cols-6">
+ <div class="grid shrink-0 grid-cols-6">
<TestCasePictos
classes="[&>svg]:w-7 [&>svg]:h-7 col-span-3 last:odd:col-start-3 justify-center"
situation={situations[0]}
@@ -426,14 +426,14 @@
</span>
</span>
<iconify-icon
- class="text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+ class="self-end text-xl text-le-vert-400 group-hover:text-le-jaune-very-dark"
icon="ri-arrow-right-line"
/>
</a>
{/each}
</div>
{/if}
- <span class="inline-block mb-4 text-lg xl:text-xl mt-4">
+ <span class="mb-4 mt-4 inline-block text-lg xl:text-xl">
Voir l'impact du dispositif «<span class="font-serif italic"
> {shortLabel} </span
>» sur tous les cas types de la bibliothèque :
diff --git a/src/lib/components/variables/VariableHeader.svelte b/src/lib/components/variables/VariableHeader.svelte
index db94ac60f..2f4108f1d 100644
--- a/src/lib/components/variables/VariableHeader.svelte
+++ b/src/lib/components/variables/VariableHeader.svelte
@@ -35,7 +35,7 @@
</script>
<!-- For a variable, the header of the reform area. -->
-<div class="z-10 sticky top-0 rounded-r bg-white pb-2">
+<div class="sticky top-0 z-10 rounded-r bg-white pb-2">
<h1 class="flex font-serif text-xl font-light 2xl:text-2xl">
<span>{decomposition?.label ?? variable?.label ?? variableName}</span>
@@ -46,7 +46,7 @@
class="-ml-1"
>
<a
- class="h-full flex grow-0 items-center font-bold italic text-black hover:text-le-bleu"
+ class="flex h-full grow-0 items-center font-bold italic text-black hover:text-le-bleu"
href="/variables/{variableName}"
>
<iconify-icon
@@ -60,7 +60,7 @@
f
</a>
<div
- class="rounded-lg shadow-md z-40 w-60 bg-gray-100 px-3 py-1 text-left text-xs text-black"
+ class="z-40 w-60 rounded-lg bg-gray-100 px-3 py-1 text-left text-xs text-black shadow-md"
slot="tooltip"
>
<span class="font-bold"
@@ -84,7 +84,7 @@
class="-ml-1"
>
<a
- class="h-full flex items-center font-bold italic text-black hover:text-le-bleu"
+ class="flex h-full items-center font-bold italic text-black hover:text-le-bleu"
href="/variables/{variableName}"
>
<iconify-icon
@@ -96,7 +96,7 @@
f
</a>
<div
- class="rounded-lg shadow-md z-40 w-60 bg-gray-100 px-3 py-1 text-left text-xs text-black"
+ class="z-40 w-60 rounded-lg bg-gray-100 px-3 py-1 text-left text-xs text-black shadow-md"
slot="tooltip"
>
<span class="font-bold">Ce dispositif est à jour !</span>
@@ -159,7 +159,7 @@
</div>
<div class="flex flex-col items-end">
<button
- class="mb-8 flex items-center gap-1.5 py-1.5 px-3 bg-white hover:bg-neutral-100 active:bg-neutral-200 rounded-lg font-semibold text-le-gris-dispositif-dark hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back s-y_bCXRrkrYfP"
+ class="s-y_bCXRrkrYfP mb-8 flex items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-sm font-semibold uppercase tracking-wider text-le-gris-dispositif-dark transition-all duration-200 ease-out-back hover:bg-neutral-100 hover:text-black active:bg-neutral-200"
on:click={() => ($variableModalOpen = true)}
>
<iconify-icon class="text-lg" icon="ri-file-text-line" />
diff --git a/src/lib/components/variables/VariableInput.svelte b/src/lib/components/variables/VariableInput.svelte
index 1abcb93a2..2f251755c 100644
--- a/src/lib/components/variables/VariableInput.svelte
+++ b/src/lib/components/variables/VariableInput.svelte
@@ -339,7 +339,7 @@
<iconify-icon icon="ri:information-line" />
<div
slot="tooltip"
- class="rounded-lg shadow-md bg-white px-2 py-1 text-xs text-gray-600"
+ class="rounded-lg bg-white px-2 py-1 text-xs text-gray-600 shadow-md"
>
En savoir plus sur cette variable
</div>
@@ -353,8 +353,8 @@
-->
</div>
- <div class="flex flex-col md:flex-row gap-2">
- <div class="w-full flex flex-col flex-wrap gap-4 mt-2">
+ <div class="flex flex-col gap-2 md:flex-row">
+ <div class="mt-2 flex w-full flex-col flex-wrap gap-4">
{#each Object.entries(entitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
<div>
<p class="text-xs text-gray-600">
@@ -373,7 +373,7 @@
<!-- Input menu sélection -->
<select
- class="my-1 w-full rounded border-none bg-white shadow-sm p-1 pr-10 focus:border-le-bleu focus:text-le-bleu"
+ class="my-1 w-full rounded border-none bg-white p-1 pr-10 shadow-sm focus:border-le-bleu focus:text-le-bleu"
on:blur={(event) => changeValue(event, populationId)}
on:change={(event) => changeValue(event, populationId)}
value={getSituationVariableValue(
@@ -409,7 +409,7 @@
{:else if variable.value_type === "date"}
<!-- Input date-->
<input
- class="my-1 w-full rounded border-none bg-white shadow-sm p-1 focus:border-le-bleu focus:text-le-bleu"
+ class="my-1 w-full rounded border-none bg-white p-1 shadow-sm focus:border-le-bleu focus:text-le-bleu"
on:change={(event) => changeValue(event, populationId)}
type="date"
value={asString(
@@ -425,7 +425,7 @@
<!-- Input Montant -->
<div class="flex items-center">
<input
- class="my-1 w-full rounded border-none bg-white shadow-sm p-1"
+ class="my-1 w-full rounded border-none bg-white p-1 shadow-sm"
on:change={(event) => changeValue(event, populationId)}
type="number"
value={asNumber(
@@ -462,7 +462,7 @@
{/await}
{:else}
<input
- class="my-1 w-full rounded bg-white shadow-sm p-1 focus:border-le-bleu focus:text-le-bleu"
+ class="my-1 w-full rounded bg-white p-1 shadow-sm focus:border-le-bleu focus:text-le-bleu"
on:change={(event) => changeValue(event, populationId)}
type="text"
value={asString(
@@ -706,10 +706,10 @@
</div>
{#if showLogementAlert}
- <div class="bg-white text-sm text-yellow-900 p-2">
+ <div class="bg-white p-2 text-sm text-yellow-900">
<iconify-icon
icon="ri-information-fill"
- class="text-yellow-600 mr-1 align-[-0.2rem] text-base"
+ class="mr-1 align-[-0.2rem] text-base text-yellow-600"
/>
Veuillez vérifier la valeur du loyer ou le mettre à 0 ⬆️.
</div>
diff --git a/src/lib/components/variables/VariableReferredInputs.svelte b/src/lib/components/variables/VariableReferredInputs.svelte
index 0670463b4..52fe73af8 100644
--- a/src/lib/components/variables/VariableReferredInputs.svelte
+++ b/src/lib/components/variables/VariableReferredInputs.svelte
@@ -91,22 +91,22 @@
{#if openDirectInputs}
<div
- class="flex items-center gap-1.5 ml-4 mr-4 md:mr-0 overflow-hidden rounded-t-md bg-white border-b-2 md:border-b-4 border-b-[#A6A00C]"
+ class="ml-4 mr-4 flex items-center gap-1.5 overflow-hidden rounded-t-md border-b-2 border-b-[#A6A00C] bg-white md:mr-0 md:border-b-4"
>
<iconify-icon
- class="ml-1 md:ml-3 self-center p-1 text-lg text-black"
+ class="ml-1 self-center p-1 text-lg text-black md:ml-3"
icon="ri-search-line"
/>
<input
autocomplete="off"
bind:value={directInputsQuery}
- class="w-full px-1 py-1.5 md:py-2.5 border-none bg-transparent text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
+ class="w-full border-none bg-transparent px-1 py-1.5 text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none md:py-2.5 2xl:text-xl"
placeholder="Rechercher des caractéristiques écrites dans la formule du dispositif..."
type="search"
/>
{#if directInputsQuery.length > 0}
<button
- class="md:mr-1.5 p-2 rounded-full hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 transition-all duration-200 ease-out-back"
+ class="rounded-full p-2 transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 md:mr-1.5"
on:click={() => (directInputsQuery = "")}
>
<iconify-icon class="block text-xl" icon="ri-close-line" />
@@ -155,22 +155,22 @@
{#if openAllInputs}
<div
- class="flex items-center gap-1.5 overflow-hidden rounded-t-md bg-white border-b-2 md:border-b-4 border-b-[#A6A00C]"
+ class="flex items-center gap-1.5 overflow-hidden rounded-t-md border-b-2 border-b-[#A6A00C] bg-white md:border-b-4"
>
<iconify-icon
- class="ml-1 md:ml-3 self-center p-1 text-lg text-black"
+ class="ml-1 self-center p-1 text-lg text-black md:ml-3"
icon="ri-search-line"
/>
<input
autocomplete="off"
bind:value={allInputsQuery}
- class="w-full px-1 py-1.5 md:py-2.5 border-none bg-transparent text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
+ class="w-full border-none bg-transparent px-1 py-1.5 text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none md:py-2.5 2xl:text-xl"
placeholder="Rechercher des caractéristiques directement influentes..."
type="search"
/>
{#if allInputsQuery.length > 0}
<button
- class="md:mr-1.5 p-2 rounded-full hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 transition-all duration-200 ease-out-back"
+ class="rounded-full p-2 transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 md:mr-1.5"
on:click={() => (allInputsQuery = "")}
>
<iconify-icon class="block text-xl" icon="ri-close-line" />
diff --git a/src/lib/components/variables/VariableReferredParameterHeader.svelte b/src/lib/components/variables/VariableReferredParameterHeader.svelte
index f12bafcdc..b937362f6 100644
--- a/src/lib/components/variables/VariableReferredParameterHeader.svelte
+++ b/src/lib/components/variables/VariableReferredParameterHeader.svelte
@@ -63,13 +63,13 @@
disabled={isCopiedSuccessfully}
on:click={copyLink}
><iconify-icon
- class="group-hover:text-black text-neutral-400"
+ class="text-neutral-400 group-hover:text-black"
icon={!isCopiedSuccessfully ? "ri-links-line" : "ri-check-line"}
/>
{#if isCopiedSuccessfully}
<span
- class="absolute top-0 left-0 -translate-y-full bg-le-gris-dispositif-dark text-white px-2 py-1 text-sm text-nowrap rounded-md font-sans font-normal z-50"
+ class="absolute left-0 top-0 z-50 -translate-y-full text-nowrap rounded-md bg-le-gris-dispositif-dark px-2 py-1 font-sans text-sm font-normal text-white"
>Lien copié !</span
>
{/if}</button
diff --git a/src/lib/components/variables/VariableReferredParameters.svelte b/src/lib/components/variables/VariableReferredParameters.svelte
index 76419a736..e49ce9bee 100644
--- a/src/lib/components/variables/VariableReferredParameters.svelte
+++ b/src/lib/components/variables/VariableReferredParameters.svelte
@@ -157,8 +157,8 @@
<!--PLFSS 2025 - Affichage spécifique pour la réduction générale -->
{#if $billActive}
{#if billVariable.name === "allegement_general"}
- <div class="bg-red-100 rounded-sm p-1 text-sm mb-4 mx-4">
- <span class="text-le-rouge-bill font-bold"
+ <div class="mx-4 mb-4 rounded-sm bg-red-100 p-1 text-sm">
+ <span class="font-bold text-le-rouge-bill"
>PLFSS 2025 | Modification de l'assiette</span
><br />
<span class="text-xs"
@@ -173,8 +173,8 @@
</span>
</div>
{:else if billVariable.name === "contribution_differentielle_hauts_revenus"}
- <div class="bg-red-100 rounded-sm p-1 text-sm mb-4 mx-4">
- <span class="text-le-rouge-bill font-bold"
+ <div class="mx-4 mb-4 rounded-sm bg-red-100 p-1 text-sm">
+ <span class="font-bold text-le-rouge-bill"
>PLF 2025 | Première estimation des effets du dispositif</span
><br />
<span class="text-xs"
@@ -198,7 +198,7 @@
{@const decomposition = billDecompositionCoreByName[name]}
{#if !decomposition.hidden}
<a
- class="flex justify-between items-center px-4 py-2 tracking-wider hover:bg-neutral-100 active:bg-neutral-200 font-medium text-gray-700"
+ class="flex items-center justify-between px-4 py-2 font-medium tracking-wider text-gray-700 hover:bg-neutral-100 active:bg-neutral-200"
href={newSimulationUrl({
...displayMode,
parametersVariableName: name,
diff --git a/src/lib/components/variables/VariableReferredScaleAtInstant.svelte b/src/lib/components/variables/VariableReferredScaleAtInstant.svelte
index 1a341c8ce..87ba35abc 100644
--- a/src/lib/components/variables/VariableReferredScaleAtInstant.svelte
+++ b/src/lib/components/variables/VariableReferredScaleAtInstant.svelte
@@ -159,37 +159,37 @@
<tr>
{#if !showScaleAsValue}
<th
- class="flex justify-center border-b border-gray-300 bg-gray-100 text-center font-bold text-gray-600 px-1 py-2"
+ class="flex justify-center border-b border-gray-300 bg-gray-100 px-1 py-2 text-center font-bold text-gray-600"
>
{#if parameterName?.startsWith("impot_revenu.bareme_ir_depuis_1945.bareme")}
- <span class="leading-none text-sm max-w-56">
+ <span class="max-w-56 text-sm leading-none">
Seuil revenus annuels imposables <span class="text-xs"
>après abattement, par part</span
></span
>
{:else if parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.activite.deductible.taux") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.activite.imposable.taux")}
- <span class="leading-none text-sm max-w-48">
+ <span class="max-w-48 text-sm leading-none">
Seuil salaire mensuel <span class="text-xs"
>brut après abattement</span
></span
>
{:else if parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.pensions_retraite_invalidite.imposable.taux_reduit") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.pensions_retraite_invalidite.imposable.taux_median") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.pensions_retraite_invalidite.imposable.taux_plein") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.pensions_retraite_invalidite.deductible.taux_reduit") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.pensions_retraite_invalidite.deductible.taux_median") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.pensions_retraite_invalidite.deductible.taux_plein")}
- <span class="leading-none text-sm max-w-40">
+ <span class="max-w-40 text-sm leading-none">
Seuil retraite mensuelle <span class="text-xs">brute</span
></span
>
{:else if parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.allocations_chomage.imposable.taux_plein") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.allocations_chomage.imposable.taux_reduit") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.allocations_chomage.deductible.taux_plein") || parameterName?.startsWith("prelevements_sociaux.contributions_sociales.csg.remplacement.allocations_chomage.deductible.taux_reduit")}
- <span class="leading-none text-sm max-w-48">
+ <span class="max-w-48 text-sm leading-none">
Seuil chômage mensuel <span class="text-xs"
>brut après abattement</span
></span
>
{:else if parameterName?.startsWith("prelevements_sociaux.contributions_sociales.crds.taux")}
- <span class="leading-none text-sm max-w-36">
+ <span class="max-w-36 text-sm leading-none">
Seuil revenu mensuel <span class="text-xs">brut</span></span
>
{:else if parameterName?.startsWith("impot_revenu.contributions_exceptionnelles.contribution_exceptionnelle_hauts_revenus")}
- <span class="leading-none text-sm max-w-36">
+ <span class="max-w-36 text-sm leading-none">
Revenu fiscal de référence annuel <br /><span class="text-xs"
>divisé par le nombre d'adultes du foyer fiscal</span
></span
@@ -264,7 +264,7 @@
<span class="text-left text-xs text-red-700">
<iconify-icon
icon="ri-error-warning-line"
- class="align-[-0.2rem] text-sm mr-0.5"
+ class="mr-0.5 align-[-0.2rem] text-sm"
/>Valeur incorrecte
</span>
{/if}
@@ -328,7 +328,7 @@
<span class="text-left text-xs text-red-700">
<iconify-icon
icon="ri-error-warning-line"
- class="align-[-0.2rem] text-sm mr-0.5"
+ class="mr-0.5 align-[-0.2rem] text-sm"
/>Valeur incorrecte
</span>
{/if}
@@ -385,7 +385,7 @@
<span class="text-left text-xs text-red-700">
<iconify-icon
icon="ri-error-warning-line"
- class="align-[-0.2rem] text-sm mr-0.5"
+ class="mr-0.5 align-[-0.2rem] text-sm"
/>Valeur incorrecte
</span>
{/if}
@@ -449,7 +449,7 @@
<span class="text-left text-xs text-red-700">
<iconify-icon
icon="ri-error-warning-line"
- class="align-[-0.2rem] text-sm mr-0.5"
+ class="mr-0.5 align-[-0.2rem] text-sm"
/>Valeur incorrecte
</span>
{/if}
diff --git a/src/lib/components/variables/VariableReferredScaleParameter.svelte b/src/lib/components/variables/VariableReferredScaleParameter.svelte
index 4193de71f..df421b3fe 100644
--- a/src/lib/components/variables/VariableReferredScaleParameter.svelte
+++ b/src/lib/components/variables/VariableReferredScaleParameter.svelte
@@ -306,7 +306,7 @@
/>
{/if}
<a
- class="lx-link-simple ml-2 flex text-sm items-center text-gray-600"
+ class="lx-link-simple ml-2 flex items-center text-sm text-gray-600"
rel="noreferrer"
href="/parameters/{billParameter.name}"
on:click={() => {
diff --git a/src/lib/components/variables/VariableReferredValueParameter.svelte b/src/lib/components/variables/VariableReferredValueParameter.svelte
index 2623b18d9..e73dbfc4c 100644
--- a/src/lib/components/variables/VariableReferredValueParameter.svelte
+++ b/src/lib/components/variables/VariableReferredValueParameter.svelte
@@ -264,15 +264,15 @@
/>
{/if}
- <span class="mb-1.5 mx-1 text-base">
+ <span class="mx-1 mb-1.5 text-base">
{getUnitShortLabel(billParameter.unit, date)}
</span>
{#if valueError !== null}
- <span class="text-left text-xs text-red-700 self-center">
+ <span class="self-center text-left text-xs text-red-700">
<iconify-icon
icon="ri-error-warning-line"
- class="align-[-0.2rem] text-sm mr-0.5"
+ class="mr-0.5 align-[-0.2rem] text-sm"
/>Valeur incorrecte
</span>
{/if}
@@ -295,7 +295,7 @@
{#if isRevaluationActive || isBillActive || isParametricReformActive}
<div
- class="flex w-full items-end rounded-b rounded-t bg-gray-100 bg-opacity-95 pb-2.5 text-xs italic transition-all duration-200 opacity-0 group-hover/container:opacity-100 pointer-events-none"
+ class="pointer-events-none flex w-full items-end rounded-b rounded-t bg-gray-100 bg-opacity-95 pb-2.5 text-xs italic opacity-0 transition-all duration-200 group-hover/container:opacity-100"
>
<p class="w-20 text-center">
{#if isRevaluationActive}
@@ -344,9 +344,9 @@
</div>
<!--Spécial PLF 2025 : Alerte paramètre modifié par le PLF mais pas modifié par LexImpact -->
{#if $billActive && billParameter.name?.startsWith("prelevements_sociaux.reductions_cotisations_sociales.allegement_general.ensemble_des_entreprises.plafond")}
- <div class="bg-gray-100 flex px-3">
- <div class="bg-red-100 rounded-sm p-1 text-sm mb-1">
- <span class="text-le-rouge-bill font-bold"
+ <div class="flex bg-gray-100 px-3">
+ <div class="mb-1 rounded-sm bg-red-100 p-1 text-sm">
+ <span class="font-bold text-le-rouge-bill"
>PLFSS 2025 | En attente de la publication d'un décret</span
><br />
<span class="text-xs"
diff --git a/src/lib/components/variables/VariableReferredValueView.svelte b/src/lib/components/variables/VariableReferredValueView.svelte
index 04c5d9d36..456ae2b0b 100644
--- a/src/lib/components/variables/VariableReferredValueView.svelte
+++ b/src/lib/components/variables/VariableReferredValueView.svelte
@@ -89,7 +89,7 @@
<div
slot="tooltip"
- class="rounded-lg shadow-md bg-white px-2 py-1 text-center text-xs text-red-700"
+ class="rounded-lg bg-white px-2 py-1 text-center text-xs text-red-700 shadow-md"
>
<iconify-icon
icon="ri-error-warning-line"
diff --git a/src/lib/components/variables/VariableView.svelte b/src/lib/components/variables/VariableView.svelte
index 7669738b8..46eebfa75 100644
--- a/src/lib/components/variables/VariableView.svelte
+++ b/src/lib/components/variables/VariableView.svelte
@@ -45,7 +45,7 @@
<div class="flex-col items-start pb-4">
<div class="flex-col items-start pb-4">
- <div class="px-5 md:px-10 pt-10">
+ <div class="px-5 pt-10 md:px-10">
<!--Titre de la formule-->
<p class="mb-2 uppercase">Formule de calcul</p>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9b214fb86..911d95cfe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -985,20 +985,20 @@
<div bind:this={clipboardElement} />
<main
- class="relative flex-1 h-full flex bg-graph-paper overflow-x-clip md:overflow-hidden"
+ class="relative flex h-full flex-1 overflow-x-clip bg-graph-paper md:overflow-hidden"
class:overflow-hidden={$searchActive}
>
<div
- class="w-full flex flex-col {displayMode.edit !== undefined
+ class="flex w-full flex-col {displayMode.edit !== undefined
? 'md:-translate-x-1/3'
- : ''} overflow-x-clip md:overflow-hidden transition-transform duration-500 ease-out-quart"
+ : ''} overflow-x-clip transition-transform duration-500 ease-out-quart md:overflow-hidden"
>
- <nav class="min-h-10 sticky top-0 z-20 flex h-10 shadow-md md:hidden">
+ <nav class="sticky top-0 z-20 flex h-10 min-h-10 shadow-md md:hidden">
<!--Onglets - MOBILE-->
- <ul class="flex justify-between w-screen">
+ <ul class="flex w-screen justify-between">
<li class="w-1/2">
<a
- class="flex items-center justify-center text-base uppercase tracking-wider w-full h-10"
+ class="flex h-10 w-full items-center justify-center text-base uppercase tracking-wider"
class:font-bold={mobileLawTab}
class:text-white={mobileLawTab}
class:bg-le-jaune-dark={mobileLawTab}
@@ -1022,7 +1022,7 @@
</li>
<li class="w-1/2">
<a
- class="flex gap-2 items-center justify-center text-base uppercase tracking-wider w-full h-10"
+ class="flex h-10 w-full items-center justify-center gap-2 text-base uppercase tracking-wider"
class:font-bold={!mobileLawTab}
class:text-white={!mobileLawTab}
class:bg-le-jaune-dark={!mobileLawTab}
@@ -1071,7 +1071,7 @@
<div class="flex min-h-full w-full flex-col">
<!-- Header (fixed) -->
<header
- class="w-screen md:w-full flex items-center justify-between border-b border-black px-5 pb-2 pt-4 md:px-5 2xl:pb-3 2xl:pt-5"
+ class="flex w-screen items-center justify-between border-b border-black px-5 pb-2 pt-4 md:w-full md:px-5 2xl:pb-3 2xl:pt-5"
>
<!-- Titre -->
<h1 class="flex text-xl font-bold text-black 2xl:text-2xl">
@@ -1084,7 +1084,7 @@
<!-- Content -->
{#key displayMode.parametersVariableName === undefined}
<div
- class="w-screen md:w-full overflow-y-scroll bg-white px-2 py-5"
+ class="w-screen overflow-y-scroll bg-white px-2 py-5 md:w-full"
out:fade={{ duration: 100 }}
in:fade={{ delay: 150, duration: 150 }}
>
@@ -1092,7 +1092,7 @@
{#if displayMode.parametersVariableName === undefined}
<div class="px-6 py-3">
<h2
- class="relative z-10 inline-block font-light text-2xl text-black highlight-rotated-before highlight-rotated-after max-w-xs"
+ class="highlight-rotated-before highlight-rotated-after relative z-10 inline-block max-w-xs text-2xl font-light text-black"
>
Sélectionner un impôt, une cotisation ou une
prestation :
@@ -1120,7 +1120,7 @@
/>
{:else}
<div
- class="border rounded-lg shadow-lg overflow-hidden"
+ class="overflow-hidden rounded-lg border shadow-lg"
>
<div class="flex divide-x-2">
{#each waterfalls as waterfall}
@@ -1157,10 +1157,10 @@
{/each}
{/key}
<div
- class="absolute inset-0 flex flex-col justify-center items-center gap-1 px-4 py-3 bg-white/80 backdrop-blur"
+ class="absolute inset-0 flex flex-col items-center justify-center gap-1 bg-white/80 px-4 py-3 backdrop-blur"
>
<p
- class="text-start text-lg 2xl:text-xl font-bold"
+ class="text-start text-lg font-bold 2xl:text-xl"
>
Cliquer sur un des dispositifs ➡️
</p>
@@ -1173,12 +1173,12 @@
{/if}
</div>
{:else}
- <p class="hidden md:block mt-6">
+ <p class="mt-6 hidden md:block">
Le simulateur LexImpact permet l’évaluation d’impacts
budgétaires pour les dispositifs disponibles à droite
➡️
</p>
- <p class="md:hidden mt-6">
+ <p class="mt-6 md:hidden">
Le simulateur LexImpact permet l’évaluation d’impacts
budgétaires pour les dispositifs disponibles dans
<a
@@ -1195,10 +1195,10 @@
</div>
<!-- Vue modification de la loi -->
{:else}
- <div class="flex justify-between mb-4">
+ <div class="mb-4 flex justify-between">
{#if variablesHistory.length >= 1}
<button
- class="hover:text-black flex items-center gap-2 py-1.5 px-3 bg-white hover:bg-neutral-100 active:bg-neutral-200 rounded-lg text-neutral-600 text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-2 rounded-lg bg-white px-3 py-1.5 text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-neutral-100 hover:text-black active:bg-neutral-200"
on:click={() => {
variablesHistory.pop()
const previous = variablesHistory.pop()
@@ -1218,9 +1218,9 @@
</button>
{/if}
- <div class="flex-col flex justify-end">
+ <div class="flex flex-col justify-end">
<button
- class="hover:text-black flex items-center gap-2 py-1.5 px-3 bg-white hover:bg-neutral-100 active:bg-neutral-200 rounded-lg text-neutral-600 text-sm tracking-wider uppercase transition-all duration-200 ease-out-back text-right justify-end"
+ class="flex items-center justify-end gap-2 rounded-lg bg-white px-3 py-1.5 text-right text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-neutral-100 hover:text-black active:bg-neutral-200"
on:click={() => {
goto(
newSimulationUrl({
@@ -1237,7 +1237,7 @@
</button>
{#if ["af_base", "af_majoration", "af_allocation_forfaitaire", "af_complement_degressif", "af_allocation_forfaitaire_complement_degressif"].includes(displayMode.parametersVariableName)}
<a
- class="hover:text-black flex items-center gap-2 py-1.5 px-3 bg-white hover:bg-neutral-100 active:bg-neutral-200 rounded-lg text-neutral-600 text-sm tracking-wider uppercase transition-all duration-200 ease-out-back text-right justify-end"
+ class="flex items-center justify-end gap-2 rounded-lg bg-white px-3 py-1.5 text-right text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-neutral-100 hover:text-black active:bg-neutral-200"
href={newSimulationUrl({
...displayMode,
parametersVariableName: "af",
@@ -1281,7 +1281,7 @@
the height of the div enclosing the test cases below.
-->
<section
- class="flex-[1_0_100%] h-fit flex flex-col overflow-y-hidden transition-transform duration-500 ease-out-quart md:!h-full md:translate-x-0"
+ class="flex h-fit flex-[1_0_100%] flex-col overflow-y-hidden transition-transform duration-500 ease-out-quart md:!h-full md:translate-x-0"
class:-translate-x-full={!mobileLawTab}
class:!h-[calc(100vh-96px)]={mobileLawTab}
class:md:flex-[0_0_66.6%]={!displayMode.edit}
@@ -1291,7 +1291,7 @@
<!--en-tête-->
{#if !displayMode.edit}
<header
- class="relative w-screen md:w-full flex justify-center md:justify-normal px-5 xl:px-10 bg-yellow-50 border-b"
+ class="relative flex w-screen justify-center border-b bg-yellow-50 px-5 md:w-full md:justify-normal xl:px-10"
>
<!--
<select
@@ -1309,9 +1309,9 @@
<!--Affichage du titre "impacts" et onglets de choix cas types ou budget-->
<ul
- class="flex items-center justify-between md:justify-start w-screen md:w-full"
+ class="flex w-screen items-center justify-between md:w-full md:justify-start"
>
- <li class="w-1/2 md:w-auto flex justify-end">
+ <li class="flex w-1/2 justify-end md:w-auto">
<a
class:hover:bg-le-vert-50={displayMode.budget}
class:hover:text-le-bleu={displayMode.budget}
@@ -1322,7 +1322,7 @@
})}
>
<h2
- class="h-12 md:h-14 2xl:h-16 flex items-center border-b-[3px] border-transparent px-3 pt-2 pb-1 text-xl text-black 2xl:border-b-4 2xl:text-2xl justify-center tracking-wide"
+ class="flex h-12 items-center justify-center border-b-[3px] border-transparent px-3 pb-1 pt-2 text-xl tracking-wide text-black md:h-14 2xl:h-16 2xl:border-b-4 2xl:text-2xl"
class:!border-black={!displayMode.budget}
class:text-black={!displayMode.budget}
class:font-bold={!displayMode.budget}
@@ -1333,7 +1333,7 @@
</a>
</li>
<li
- class="w-1/2 flex md:w-auto justify-start"
+ class="flex w-1/2 justify-start md:w-auto"
id="situation_budget"
>
<a
@@ -1346,7 +1346,7 @@
})}
>
<h2
- class="h-12 md:h-14 2xl:h-16 flex items-center border-b-[3px] border-transparent px-3 pt-2 pb-1 text-xl 2xl:border-b-4 2xl:text-2xl justify-center tracking-wide"
+ class="flex h-12 items-center justify-center border-b-[3px] border-transparent px-3 pb-1 pt-2 text-xl tracking-wide md:h-14 2xl:h-16 2xl:border-b-4 2xl:text-2xl"
class:!border-black={displayMode.budget}
class:font-bold={displayMode.budget}
>
@@ -1358,7 +1358,7 @@
</ul>
{#if (displayMode.parametersVariableName !== undefined || displayMode.testCasesIndex.length > 0) && (mobileLawTab || !displayMode.budget) && !displayMode.edit}
<button
- class="z-30 absolute -bottom-4 right-2 lg:right-5 xl:right-10 flex items-center gap-2 py-2 px-5 shadow-lg bg-white hover:bg-gray-100 active:bg-gray-200 rounded border border-le-bleu text-le-bleu text-sm font-bold tracking-[0.085em] uppercase transition-all duration-200 ease-out-back disabled:opacity-0 disabled:scale-90"
+ class="absolute -bottom-4 right-2 z-30 flex items-center gap-2 rounded border border-le-bleu bg-white px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-le-bleu shadow-lg transition-all duration-200 ease-out-back hover:bg-gray-100 active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
on:click={shareTestCaseSimulationLink}
id="situation_savebutton"
>
@@ -1374,7 +1374,7 @@
{#if !showBudgetBlurred && displayMode.budget && !mobileLawTab && (user !== undefined || !showPublicSimulationPanel)}
<button
- class="z-30 absolute -bottom-4 right-2 lg:right-5 xl:right-10 flex items-center gap-2 py-2 px-5 shadow-lg bg-white hover:bg-gray-100 active:bg-gray-200 rounded border border-le-bleu text-le-bleu text-sm font-bold tracking-[0.085em] uppercase transition-all duration-200 ease-out-back disabled:opacity-0 disabled:scale-90"
+ class="absolute -bottom-4 right-2 z-30 flex items-center gap-2 rounded border border-le-bleu bg-white px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-le-bleu shadow-lg transition-all duration-200 ease-out-back hover:bg-gray-100 active:bg-gray-200 disabled:scale-90 disabled:opacity-0 lg:right-5 xl:right-10"
on:click={() => (isBudgetSharingModalOpen = true)}
disabled={displayMode.parametersVariableName === undefined ||
$budgetSimulation === undefined ||
@@ -1394,9 +1394,9 @@
</header>
{:else}
<header
- class="w-screen md:w-full px-5 py-3 2xl:py-4 bg-yellow-50 border-b"
+ class="w-screen border-b bg-yellow-50 px-5 py-3 md:w-full 2xl:py-4"
>
- <h2 class="text-black font-bold text-xl 2xl:text-2xl leading-8">
+ <h2 class="text-xl font-bold leading-8 text-black 2xl:text-2xl">
Impact du système socio-fiscal
</h2>
</header>
@@ -1416,7 +1416,7 @@
>
{#if displayMode.parametersVariableName !== undefined}
<div
- class="relative w-screen md:w-full flex flex-col px-2 xl:px-10 py-5"
+ class="relative flex w-screen flex-col px-2 py-5 md:w-full xl:px-10"
>
{#if !budgetVariablesName.has(displayMode.parametersVariableName) && !budgetVariablesNameRelated.has(displayMode.parametersVariableName)}
{@const variable =
@@ -1467,7 +1467,7 @@
<SkeletonLoaderBudget />
{:else if $budgetSimulation !== undefined && $budgetSimulation.errors != null && $budgetSimulation.errors.length > 0}
<div
- class="w-fit mx-auto md:mt-32 flex flex-col items-center gap-10 p-10 bg-white rounded-lg border border-gray-200 shadow-md"
+ class="mx-auto flex w-fit flex-col items-center gap-10 rounded-lg border border-gray-200 bg-white p-10 shadow-md md:mt-32"
>
<iconify-icon
class="text-6xl"
@@ -1487,11 +1487,11 @@
</div>
{:else}
<div
- class="w-screen md:w-full md:max-w-screen-md xl:max-w-screen-lg mx-auto columns-2 gap-8 px-5 xl:px-10 py-10 text-center md:text-left"
+ class="mx-auto w-screen columns-2 gap-8 px-5 py-10 text-center md:w-full md:max-w-screen-md md:text-left xl:max-w-screen-lg xl:px-10"
>
{#each dispositifsTypes as dispositifType}
<div
- class="mb-8 inline-flex flex-col w-full gap-5 px-4 py-2 rounded-lg border border-gray-200 bg-white shadow-md"
+ class="mb-8 inline-flex w-full flex-col gap-5 rounded-lg border border-gray-200 bg-white px-4 py-2 shadow-md"
>
<div class="flex items-center gap-5">
<img
@@ -1510,7 +1510,7 @@
<li>
{#each dispositifType.children as child}
<a
- class="m-2 flex items-center gap-5 px-4 py-2 bg-gray-100 lx-card-underline-le-vert justify-between"
+ class="lx-card-underline-le-vert m-2 flex items-center justify-between gap-5 bg-gray-100 px-4 py-2"
href={newSimulationUrl({
...displayMode,
budget: budgetVariablesName.has(
@@ -1522,7 +1522,7 @@
child.parametersVariableName,
})}
>{child.title}<iconify-icon
- class=" text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+ class=" self-end text-xl text-le-vert-400 group-hover:text-le-jaune-very-dark"
icon="ri-arrow-right-line"
/></a
>
@@ -1540,8 +1540,8 @@
{#key $testCasesIndex.length || displayMode.parametersVariableName}
<div
class={!displayMode.edit
- ? "px-3 md:px-5 xl:px-10 py-4 xl:py-8"
- : "pl-4 pr-5 py-2"}
+ ? "px-3 py-4 md:px-5 xl:px-10 xl:py-8"
+ : "py-2 pl-4 pr-5"}
out:fade={{ duration: 100 }}
in:fade={{ delay: 150, duration: 150 }}
>
@@ -1597,7 +1597,7 @@
<div class="flex flex-col items-start">
{#if displayMode.parametersVariableName === undefined}
<h2
- class="relative z-10 font-light text-2xl text-black before:pointer-events-none before:absolute before:-z-10 before:-left-1 before:-right-5 before:inset-y-0 before:bg-[rgba(197,195,156,0.9)] before:-rotate-1"
+ class="relative z-10 text-2xl font-light text-black before:pointer-events-none before:absolute before:inset-y-0 before:-left-1 before:-right-5 before:-z-10 before:-rotate-1 before:bg-[rgba(197,195,156,0.9)]"
>
Choisir un cas type :
</h2>
@@ -1694,7 +1694,7 @@
{#if filteredTestCases.length > 0 || nonNullTestCases.length > 0}
<h2
- class="relative z-10 font-light text-2xl text-black"
+ class="relative z-10 text-2xl font-light text-black"
>
{#if filteredTestCases.length > 0}
Situations types illustrant les mécanismes du
@@ -1710,17 +1710,17 @@
</h2>
<div
- class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5 mt-6"
+ class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3"
>
{#if filteredTestCases.length === 0}
{#each nonNullTestCases.slice(0, 6) as { title, situations, indices }}
{@const situation = situations[0]}
{@const index = indices[0]}
<div
- class="relative lx-card-underline-le-vert"
+ class="lx-card-underline-le-vert relative"
>
<a
- class="group w-full flex flex-col items-stretch text-sm rounded-md overflow-hidden"
+ class="group flex w-full flex-col items-stretch overflow-hidden rounded-md text-sm"
href={newSimulationUrl({
...displayMode,
testCasesIndex: indices,
@@ -1760,24 +1760,24 @@
/>
</p>
<iconify-icon
- class="block text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+ class="block self-end text-xl text-le-vert-400 group-hover:text-le-jaune-very-dark"
icon="ri-arrow-right-line"
/>
</div>
</a>
{#if situation.dixieme !== undefined}
<div
- class="absolute -right-7 top-0 -translate-y-1/2 flex items-center"
+ class="absolute -right-7 top-0 flex -translate-y-1/2 items-center"
>
<div
- class="flex items-center text-sm bg-le-bleu-light pl-2 pr-4 rounded-l-full"
+ class="flex items-center rounded-l-full bg-le-bleu-light pl-2 pr-4 text-sm"
>
{@html formatLongOrdinalSup(
situation.dixieme,
)} décile
</div>
<svg
- class="w-7 h-7 -translate-x-1/2"
+ class="h-7 w-7 -translate-x-1/2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
@@ -1798,14 +1798,14 @@
{:else}
{#each filteredTestCases as { title, situations, indices }}
<a
- class="group flex flex-col gap-2 px-4 py-2 lx-card-underline-le-vert"
+ class="lx-card-underline-le-vert group flex flex-col gap-2 px-4 py-2"
href={newSimulationUrl({
...displayMode,
testCasesIndex: indices,
})}
>
<div
- class="flex-1 flex items-center gap-5"
+ class="flex flex-1 items-center gap-5"
class:flex-col={situations.length === 2}
>
{#if situations.length === 2}
@@ -1824,7 +1824,7 @@
>
</span>
{:else}
- <div class="shrink-0 grid grid-cols-6">
+ <div class="grid shrink-0 grid-cols-6">
<TestCasePictos
classes="[&>svg]:w-7 [&>svg]:h-7 col-span-3 last:odd:col-start-3 justify-center"
situation={situations[0]}
@@ -1832,7 +1832,7 @@
/>
</div>
{/if}
- <span class="flex-1 text-start base">
+ <span class="base flex-1 text-start">
<span class="font-bold">{title[0]}</span
>
{#if title[1].length > 0}
@@ -1862,7 +1862,7 @@
</span>
</span>
<iconify-icon
- class="text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+ class="self-end text-xl text-le-vert-400 group-hover:text-le-jaune-very-dark"
icon="ri-arrow-right-line"
/>
</a>
@@ -1876,7 +1876,7 @@
{/if}
{#if !displayMode.edit}
<div
- class="flex-col flex items-stretch mt-10 justify-center gap-4"
+ class="mt-10 flex flex-col items-stretch justify-center gap-4"
class:md:flex-row={!displayMode.edit}
>
{#if displayMode.parametersVariableName !== undefined}
@@ -1904,7 +1904,7 @@
>
<div class="flex flex-col">
<span
- class="text-start text-lg 2xl:text-xl font-bold"
+ class="text-start text-lg font-bold 2xl:text-xl"
>
Autres cas types «<span
class="font-serif italic"
@@ -1919,12 +1919,12 @@
{/if}
{/if}
<button
- class="lx-card flex justify-between items-start gap-5 px-7 py-5"
+ class="lx-card flex items-start justify-between gap-5 px-7 py-5"
on:click={() => (isTestCaseSelectModalOpen = true)}
>
<div class="flex flex-col">
<span
- class="text-start text-lg 2xl:text-xl font-bold"
+ class="text-start text-lg font-bold 2xl:text-xl"
>
{#if displayMode.parametersVariableName === undefined}
Choisir un cas type
@@ -1952,7 +1952,7 @@
{#if displayMode.edit !== undefined}
<!-- Panneau de droite pour l'édition de cas types -->
<section
- class="absolute z-40 top-0 md:bottom-0 right-0 w-full md:w-2/3 md:overflow-y-scroll flex flex-col bg-gray-200 shadow-lg"
+ class="absolute right-0 top-0 z-40 flex w-full flex-col bg-gray-200 shadow-lg md:bottom-0 md:w-2/3 md:overflow-y-scroll"
transition:fly={{
duration: 520,
x:
@@ -1963,10 +1963,10 @@
}}
>
<div
- class="hidden md:flex justify-between items-center gap-2 md:gap-0 px-5 py-3 2xl:py-4 border-b border-gray-300"
+ class="hidden items-center justify-between gap-2 border-b border-gray-300 px-5 py-3 md:flex md:gap-0 2xl:py-4"
>
<h2
- class="text-lg font-bold text-black md:text-xl 2xl:text-2xl leading-8"
+ class="text-lg font-bold leading-8 text-black md:text-xl 2xl:text-2xl"
>
Modifier le cas type
</h2>
@@ -1976,7 +1976,7 @@
</span>
<button
on:click={() => changeTestCaseToEditIndex(undefined)}
- class="flex items-center gap-1 p-1 md:py-1.5 md:pl-2 md:pr-3 hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40 rounded-lg text-neutral-600 hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1 rounded-lg p-1 text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-gray-400 hover:bg-opacity-20 hover:text-black active:bg-gray-400 active:bg-opacity-40 md:py-1.5 md:pl-2 md:pr-3"
title="Valider le cas type et fermer l'édition"
>
<iconify-icon class="align-[-0.2rem] text-xl" icon="ri-close-line" />
@@ -1984,12 +1984,12 @@
</button>
</div>
<div
- class="flex md:hidden flex-col gap-1 px-3 py-2 2xl:py-4 border-b border-gray-300"
+ class="flex flex-col gap-1 border-b border-gray-300 px-3 py-2 md:hidden 2xl:py-4"
>
- <div class="flex md:hidden justify-start items-center gap-2 md:gap-0">
+ <div class="flex items-center justify-start gap-2 md:hidden md:gap-0">
<button
on:click={() => changeTestCaseToEditIndex(undefined)}
- class="flex items-center gap-1 p-1 md:py-1.5 md:pl-2 md:pr-3 hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40 rounded-lg text-neutral-600 hover:text-black text-sm tracking-wider uppercase transition-all duration-200 ease-out-back"
+ class="flex items-center gap-1 rounded-lg p-1 text-sm uppercase tracking-wider text-neutral-600 transition-all duration-200 ease-out-back hover:bg-gray-400 hover:bg-opacity-20 hover:text-black active:bg-gray-400 active:bg-opacity-40 md:py-1.5 md:pl-2 md:pr-3"
title="Valider le cas type et fermer l'édition"
>
<iconify-icon
@@ -1998,12 +1998,12 @@
/>
</button>
<h2
- class="text-lg font-bold text-black md:text-xl 2xl:text-2xl leading-8"
+ class="text-lg font-bold leading-8 text-black md:text-xl 2xl:text-2xl"
>
Modifier le cas type
</h2>
</div>
- <span class="text-xs text-gray-700 pl-1.5">
+ <span class="pl-1.5 text-xs text-gray-700">
📌 Par défaut, la situation du cas type est
considérée comme stable depuis 3 ans.
</span>
@@ -2060,15 +2060,15 @@
{#if showBudgetBlurred}
<!-- Modale flottante "calculer l'impact budgétaire" -->
<div
- class="fixed top-1/2 -translate-y-1/2 inset-x-4 md:left-1/2 md:right-auto md:-translate-x-1/2 z-40 flex flex-col items-center gap-4 md:gap-6 md:ml-[calc(100%/6)] mt-6 bg-le-jaune-light rounded-lg shadow-md px-3 md:px-7 py-6 md:py-6"
+ class="fixed inset-x-4 top-1/2 z-40 mt-6 flex -translate-y-1/2 flex-col items-center gap-4 rounded-lg bg-le-jaune-light px-3 py-6 shadow-md md:left-1/2 md:right-auto md:ml-[calc(100%/6)] md:-translate-x-1/2 md:gap-6 md:px-7 md:py-6"
>
<p class="text-lg md:text-xl">
Pour voir l'<strong>impact de votre réforme</strong> :
</p>
- <div class="w-full flex itemps-center justify-center">
+ <div class="itemps-center flex w-full justify-center">
<button
- class="flex items-center gap-2 py-2 px-5 shadow-lg bg-le-jaune hover:bg-le-jaune-dark active:bg-le-jaune-very-dark rounded-md text-sm md:text-base hover:text-white active:text-white font-bold tracking-[0.085em] uppercase"
+ class="flex items-center gap-2 rounded-md bg-le-jaune px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] shadow-lg hover:bg-le-jaune-dark hover:text-white active:bg-le-jaune-very-dark active:text-white md:text-base"
on:click={() => {
isBudgetConnexionModalOpen = true
trackBudgetCalculateButton()
@@ -2085,7 +2085,7 @@
<!--Bouton flottant "simulation publique" -->
{#if user === undefined}
<div
- class="flex flex-col gap-4 items-center fixed bottom-0 md:bottom-auto md:top-12 2xl:top-14 md:right-3 bg-le-jaune-light z-40 rounded-t-lg md:rounded-t-none md:rounded-b-lg shadow-md mx-5 md:mx-0 inset-x-0 md:inset-x-auto px-3 lg:px-5 pt-3 pb-6 md:pt-5 md:pb-3 lg:pt-6 transition-transform duration-[350ms] ease-out-back md:delay-0"
+ class="fixed inset-x-0 bottom-0 z-40 mx-5 flex flex-col items-center gap-4 rounded-t-lg bg-le-jaune-light px-3 pb-6 pt-3 shadow-md transition-transform duration-[350ms] ease-out-back md:inset-x-auto md:bottom-auto md:right-3 md:top-12 md:mx-0 md:rounded-b-lg md:rounded-t-none md:pb-3 md:pt-5 md:delay-0 lg:px-5 lg:pt-6 2xl:top-14"
class:translate-y-full={!showPublicSimulationPanel}
class:translate-y-3={showPublicSimulationPanel}
class:md:-translate-y-full={!showPublicSimulationPanel}
@@ -2097,7 +2097,7 @@
Vous êtes en train de visualiser<br />une simulation publique.
</p>
<button
- class="w-full flex justify-center items-center gap-2 py-2 px-5 shadow-lg bg-white hover:bg-gray-100 active:bg-gray-200 rounded border border-le-bleu text-le-bleu text-sm font-bold tracking-[0.085em] uppercase transition-all duration-200 ease-out-back disabled:opacity-0 disabled:scale-90"
+ class="flex w-full items-center justify-center gap-2 rounded border border-le-bleu bg-white px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-le-bleu shadow-lg transition-all duration-200 ease-out-back hover:bg-gray-100 active:bg-gray-200 disabled:scale-90 disabled:opacity-0"
on:click={() => {
isBudgetSharingModalOpen = true
}}
@@ -2111,7 +2111,7 @@
<!--Bouton flottant mobile pour fermer volet édition du cas type-->
<button
on:click={() => changeTestCaseToEditIndex(undefined)}
- class="fixed bottom-8 right-8 z-40 flex items-center h-12 md:h-[52px] translate-y-[calc(100%+4rem)] rounded-full bg-le-bleu px-4 py-3 text-xl uppercase text-white shadow-lg transition-transform duration-500 ease-out-quart hover:bg-blue-900"
+ class="fixed bottom-8 right-8 z-40 flex h-12 translate-y-[calc(100%+4rem)] items-center rounded-full bg-le-bleu px-4 py-3 text-xl uppercase text-white shadow-lg transition-transform duration-500 ease-out-quart hover:bg-blue-900 md:h-[52px]"
class:!translate-y-0={displayMode.edit !== undefined}
title="Valider le cas type et fermer l'édition"
>
@@ -2147,9 +2147,9 @@
<style lang="postcss">
.highlight-rotated-before {
- @apply before:pointer-events-none before:absolute before:-z-10 before:-left-1.5 before:-right-5 before:-top-1 before:bottom-1/2 before:bg-[rgba(197,195,156,0.9)] before:-rotate-1;
+ @apply before:pointer-events-none before:absolute before:-left-1.5 before:-right-5 before:-top-1 before:bottom-1/2 before:-z-10 before:-rotate-1 before:bg-[rgba(197,195,156,0.9)];
}
.highlight-rotated-after {
- @apply after:pointer-events-none after:absolute after:-z-10 after:-left-0.5 after:-right-5 after:top-1/2 after:-bottom-1 after:bg-[rgba(197,195,156,0.9)] after:rotate-1;
+ @apply after:pointer-events-none after:absolute after:-bottom-1 after:-left-0.5 after:-right-5 after:top-1/2 after:-z-10 after:rotate-1 after:bg-[rgba(197,195,156,0.9)];
}
</style>
diff --git a/src/routes/accueil/+page.svelte b/src/routes/accueil/+page.svelte
index 29dc5832e..fbf35b10d 100644
--- a/src/routes/accueil/+page.svelte
+++ b/src/routes/accueil/+page.svelte
@@ -221,15 +221,15 @@
<main class="h-full bg-yellow-50 pt-24 md:pt-12 2xl:pt-14">
<section
- class="relative before:absolute before:top-0 before:inset-x-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent fond"
+ class="fond relative before:absolute before:inset-x-0 before:top-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent"
class:h-full={$billActive}
class:h-[78vh]={!$billActive}
>
<div
- class="h-full relative z-10 flex flex-col justify-evenly items-center text-base md:text-lg 2xl:text-2xl"
+ class="relative z-10 flex h-full flex-col items-center justify-evenly text-base md:text-lg 2xl:text-2xl"
>
<h1
- class="font-serif text-2xl md:text-3xl 2xl:text-4xl text-center leading-snug my-10 md:my-0"
+ class="my-10 text-center font-serif text-2xl leading-snug md:my-0 md:text-3xl 2xl:text-4xl"
>
Mesurer les <span class="highlight highlight-yellow">impacts</span>
<br />
@@ -241,9 +241,9 @@
>
</h1>
- <div class="flex flex-col gap-4 mx-5">
+ <div class="mx-5 flex flex-col gap-4">
<div>
- <h2 class="font-bold text-xl xl:text-2xl 2xl:text-3xl">
+ <h2 class="text-xl font-bold xl:text-2xl 2xl:text-3xl">
Commencer avec un impôt, une cotisation ou une prestation :
</h2>
</div>
@@ -251,13 +251,13 @@
<div class="relative">
<WelcomeSearch let:query let:results>
<ul
- class="absolute inset-x-0 max-h-56 bg-white rounded-b-lg border-x border-b shadow-lg overflow-y-auto py-2"
+ class="absolute inset-x-0 max-h-56 overflow-y-auto rounded-b-lg border-x border-b bg-white py-2 shadow-lg"
>
{#if results.length > 0}
{#each results as variable, index (`found_variable_$${index}`)}
<li>
<a
- class="flex w-full flex-col px-8 py-3 2xl:py-4 hover:bg-[#EEEDE1] active:bg-[#E2E1CD]"
+ class="flex w-full flex-col px-8 py-3 hover:bg-[#EEEDE1] active:bg-[#E2E1CD] 2xl:py-4"
href={newSimulationUrl({
...displayMode,
tab: "dispositif",
@@ -291,10 +291,10 @@
</WelcomeSearch>
</div>
- <div class="flex-auto items-center text-sm md:text-base mt-5">
+ <div class="mt-5 flex-auto items-center text-sm md:text-base">
{#each suggestions.slice(0, 3) as suggestion}
<a
- class="mx-1 px-3 py-1 bg-[#E3DFA9] hover:bg-le-vert-200 active:bg-opacity-70 rounded-full"
+ class="mx-1 rounded-full bg-[#E3DFA9] px-3 py-1 hover:bg-le-vert-200 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -305,7 +305,7 @@
</a>
{/each}
<a
- class="lx-link-simple text-neutral-600 hover:text-black mt-2 mx-1"
+ class="lx-link-simple mx-1 mt-2 text-neutral-600 hover:text-black"
href="#dispositif-couverts"
>
Voir les {variablesCount} dispositifs couverts<iconify-icon
@@ -316,21 +316,21 @@
</div>
{#if $billActive}
<div>
- <h2 class="font-bold text-xl xl:text-2xl 2xl:text-3xl mt-10">
+ <h2 class="mt-10 text-xl font-bold xl:text-2xl 2xl:text-3xl">
Consulter les impacts du PLF / PLFSS 2025 :
</h2>
<PlfVariablesListIntro {displayMode} />
</div>
{/if}
- <div class="flex gap-9 mt-5 mb-3">
+ <div class="mb-3 mt-5 flex gap-9">
<hr class="mt-5 flex-1 border-dashed border-black" />
<span class="text-lg font-light xl:text-2xl 2xl:text-3xl">ou</span>
<hr class="mt-5 flex-1 border-dashed border-black" />
</div>
<button
- class="self-center inline-flex items-center text-sm md:text-base lx-link-uppercase"
+ class="lx-link-uppercase inline-flex items-center self-center text-sm md:text-base"
on:click={() => (testCaseSelectModalOpen = true)}
>
<PictoFemme />
@@ -338,7 +338,7 @@
<iconify-icon class="text-xl" icon="ri-arrow-right-line" />
</button>
<a
- class="self-center inline-flex items-center text-sm md:text-base lx-link-uppercase"
+ class="lx-link-uppercase inline-flex items-center self-center text-sm md:text-base"
href="https://dai.ly/x93iyle"
target="_blank"
>
@@ -350,11 +350,11 @@
</div>
</section>
<section
- class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6] font-serif text-base 2xl:text-lg"
+ class="grid grid-cols-4 gap-x-12 gap-y-12 bg-[#E3E4D6] px-10 pb-20 pt-10 font-serif text-base md:px-20 lg:px-40 2xl:text-lg"
>
<AnchorTitle
id="caracteristiques-simulateur"
- class="justify-self-center max-w-prose text-2xl font-light col-span-4 text-center font-sans"
+ class="col-span-4 max-w-prose justify-self-center text-center font-sans text-2xl font-light"
tag="h2"
>
Les caractéristiques du simulateur ⬇️
@@ -363,12 +363,12 @@
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
- class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+ class="rounded-md bg-gray-100 px-2 py-1 text-center font-sans text-lg font-light tracking-wider"
>
Actions possibles
</span>
<h3
- class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+ class="mb-6 mt-2 text-center font-sans text-xl font-bold 2xl:text-2xl"
>
<span> Consulter et modifier</span>
<span class="inline-flex gap-2">
@@ -392,12 +392,12 @@
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
- class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+ class="rounded-md bg-gray-100 px-2 py-1 text-center font-sans text-lg font-light tracking-wider"
>
Entités impactées
</span>
<h3
- class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+ class="mb-6 mt-2 text-center font-sans text-xl font-bold 2xl:text-2xl"
>
<span class="inline-flex gap-2">
Budget de l'État
@@ -451,12 +451,12 @@
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
- class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+ class="rounded-md bg-gray-100 px-2 py-1 text-center font-sans text-lg font-light tracking-wider"
>
Périmètre concerné
</span>
<h3
- class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+ class="mb-6 mt-2 text-center font-sans text-xl font-bold 2xl:text-2xl"
>
<span>Fiche de paie & prestations sociales</span>
</h3>
@@ -472,18 +472,18 @@
</ul>
</div>
- <img class="md:mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
+ <img class="ml-20 w-28 md:mt-6" src="/picto-affaires-sociales.svg" />
</div>
</div>
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
- class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+ class="rounded-md bg-gray-100 px-2 py-1 text-center font-sans text-lg font-light tracking-wider"
>
Période concernée
</span>
<h3
- class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+ class="mb-6 mt-2 text-center font-sans text-xl font-bold 2xl:text-2xl"
>
<span>Année en cours ou à venir</span>
</h3>
@@ -503,7 +503,7 @@
<div class="col-span-4 flex flex-col items-center gap-1 font-sans">
<a
- class="self-center inline-flex items-center lx-link-uppercase"
+ class="lx-link-uppercase inline-flex items-center self-center"
href="https://dai.ly/x93iyle"
target="_blank"
>
@@ -513,7 +513,7 @@
</a>
<button
- class="inline-flex items-center gap-2 lx-link-uppercase-le-bleu"
+ class="lx-link-uppercase-le-bleu inline-flex items-center gap-2"
on:click={() => (testCaseSelectModalOpen = true)}
>
Choisir un cas type
@@ -521,7 +521,7 @@
</button>
<a
- class="inline-flex items-center gap-2 lx-link-uppercase-le-bleu"
+ class="lx-link-uppercase-le-bleu inline-flex items-center gap-2"
href={newSimulationUrl({
...displayMode,
budget: true,
@@ -534,11 +534,11 @@
</section>
<section
id="dispositif-couverts"
- class="grid grid-cols-2 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white text-base 2xl:text-lg"
+ class="grid grid-cols-2 gap-x-12 gap-y-12 bg-white px-10 pb-20 pt-10 text-base md:px-20 lg:px-40 2xl:text-lg"
>
<AnchorTitle
id="dispositifs-couverts-simulateur"
- class="text-2xl font-light col-span-2 text-center justify-self-center font-sans"
+ class="col-span-2 justify-self-center text-center font-sans text-2xl font-light"
tag="h2"
>
Les {variablesCount} dispositifs couverts par le simulateur LexImpact socio-fiscal :
@@ -556,15 +556,15 @@
/>
</section>
<section
- class="fond grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
+ class="fond grid grid-cols-4 gap-x-12 gap-y-12 bg-white px-10 pb-20 pt-10 md:px-20 lg:px-40"
>
<AnchorTitle
id="impacts-budgetaires"
- class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
+ class="col-span-4 max-w-prose justify-self-center text-center text-2xl font-bold"
tag="h2"
>
<span
- class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
+ class="relative z-10 border-b-2 border-black pb-3 font-serif font-light italic"
>
<span class="highlight highlight-yellow">le budgétaire</span>
</span>
@@ -575,17 +575,17 @@
</AnchorTitle>
<div
- class="font-serif text-lg col-span-4 xl:col-span-2 justify-self-center lg:justify-self-end"
+ class="col-span-4 justify-self-center font-serif text-lg lg:justify-self-end xl:col-span-2"
>
<img
- class="max-h-[500px] shadow-2xl m-5 rounded-lg border bg-white p-4"
+ class="m-5 max-h-[500px] rounded-lg border bg-white p-4 shadow-2xl"
src="welcome-capture-ecran-impact-budget.png"
/>
</div>
- <div class="font-serif text-lg col-span-4 xl:col-span-2 py-5">
+ <div class="col-span-4 py-5 font-serif text-lg xl:col-span-2">
<h3 class="font-bold">Quels impacts budgétaires ?</h3>
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>
Total des recettes ou dépenses du dispositif pour l'État ou la
Sécurité sociale ;
@@ -597,11 +597,11 @@
décile.
</li>
</ul>
- <div class="flex flex-wrap gap-3 font-sans text-base items-center mt-4">
- <h3 class="font-bold text-nowrap">Les dispositifs concernés :</h3>
+ <div class="mt-4 flex flex-wrap items-center gap-3 font-sans text-base">
+ <h3 class="text-nowrap font-bold">Les dispositifs concernés :</h3>
{#each suggestions.filter((suggestion) => suggestion.budget) as suggestion}
<a
- class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-nowrap"
+ class="text-nowrap rounded-full bg-[#E3DFA9] px-3 py-1 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -613,9 +613,9 @@
</a>
{/each}
</div>
- <div class="flex lg:justify-start justify-center">
+ <div class="flex justify-center lg:justify-start">
<a
- class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="mt-5 flex items-center gap-2 rounded-md bg-le-bleu px-5 py-2 font-sans text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-blue-800 active:bg-blue-900"
href={newSimulationUrl({
...displayMode,
budget: true,
@@ -631,7 +631,7 @@
<a
href="https://dai.ly/kMjLxiwKpp4JkiButzY"
target="_blank"
- class="text-base font-sans inline-flex items-center gap-2 lx-link-uppercase mt-6"
+ class="lx-link-uppercase mt-6 inline-flex items-center gap-2 font-sans text-base"
><iconify-icon class="text-2xl" icon="twemoji:film-frames" />Le calcul
des impacts budgétaires expliqué en vidéo<iconify-icon
class="text-xl"
@@ -660,7 +660,7 @@
>.
</p>
<a
- class="inline-flex items-center gap-2 lx-link-uppercase mt-4"
+ class="lx-link-uppercase mt-4 inline-flex items-center gap-2"
href="/fonctionnement"
>
Fonctionnement du simulateur
@@ -669,15 +669,15 @@
</div>
</section>
<section
- class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6]"
+ class="grid grid-cols-4 gap-x-12 gap-y-12 bg-[#E3E4D6] px-10 pb-20 pt-10 md:px-20 lg:px-40"
>
<AnchorTitle
id="feuile-de-paie"
- class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
+ class="col-span-4 max-w-prose justify-self-center text-center text-2xl font-bold"
tag="h2"
>
<span
- class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
+ class="relative z-10 border-b-2 border-black pb-3 font-serif font-light italic"
>
<span class="highlight highlight-yellow">la feuille de paie</span>
</span>
@@ -688,16 +688,16 @@
</AnchorTitle>
<div
- class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
+ class="col-span-4 justify-self-center font-serif text-lg lg:col-span-2 lg:justify-self-end"
>
<img
- class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
+ class="m-5 max-h-[500px] rounded-lg border shadow-2xl"
src="welcome-capture-ecran-feuille-de-paie.png"
/>
</div>
- <div class="font-serif seriftext-lg col-span-4 lg:col-span-2 py-5">
+ <div class="seriftext-lg col-span-4 py-5 font-serif lg:col-span-2">
<p
- class="font-sans text-base border-l-4 pl-4 border-le-vert-200 text-le-vert-900"
+ class="border-l-4 border-le-vert-200 pl-4 font-sans text-base text-le-vert-900"
>
Un cas type représente la situation simplifiée d'un ménage, par exemple
: "un foyer composé de deux adultes et d'un enfant, gagnant un certain
@@ -722,7 +722,7 @@
</p>
<div class="flex justify-center lg:justify-start">
<button
- class="mt-5 font-sans flex grow-0 items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white font-bold tracking-[0.085em] uppercase"
+ class="mt-5 flex grow-0 items-center gap-2 rounded-md bg-le-bleu px-5 py-2 font-sans font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-blue-800 active:bg-blue-900"
on:click={() => (testCaseSelectModalOpen = true)}
title="Vers la bibliothèque de cas types"
>
@@ -735,7 +735,7 @@
<a
href="https://dai.ly/k7pPDs4uaxsCxbBehSc?start=108"
target="_blank"
- class="font-sans inline-flex items-center gap-2 lx-link-uppercase mt-6"
+ class="lx-link-uppercase mt-6 inline-flex items-center gap-2 font-sans"
><iconify-icon class="text-2xl" icon="twemoji:film-frames" />La feuille
de paie expliquée en vidéo<iconify-icon
class="text-xl"
@@ -745,15 +745,15 @@
</div>
</section>
<section
- class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#D7E2F4]"
+ class="grid grid-cols-4 gap-x-12 gap-y-12 bg-[#D7E2F4] px-10 pb-20 pt-10 md:px-20 lg:px-40"
>
<AnchorTitle
id="graphiques-cas-types"
- class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
+ class="col-span-4 max-w-prose justify-self-center text-center text-2xl font-bold"
tag="h2"
>
<span
- class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
+ class="relative z-10 border-b-2 border-black pb-3 font-serif font-light italic"
>
<span class="highlight highlight-yellow">les graphiques cas types</span>
</span>
@@ -764,21 +764,21 @@
</AnchorTitle>
<div
- class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
+ class="col-span-4 justify-self-center font-serif text-lg lg:col-span-2 lg:justify-self-end"
>
<img
- class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
+ class="m-5 max-h-[500px] rounded-lg border shadow-2xl"
src="welcome-capture-ecran-graphiques-cas-types.png"
/>
</div>
- <div class="font-serif text-lg col-span-4 lg:col-span-2 py-3.5">
+ <div class="col-span-4 py-3.5 font-serif text-lg lg:col-span-2">
<p>
Pour chaque cas type, LexImpact propose un graphique de l'évolution du
système socio-fiscal selon le revenu principal du ménage.
</p>
<br />
<p>Ce graphique permet d'identifier en un coup d'oeil :</p>
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>
la tendance générale du <abbr
title="Le revenu disponible correspond à ce qu'il reste au ménage une fois l'ensemble des impacts de la législation sociale et fiscale pris en compte."
@@ -786,15 +786,15 @@
> ; hausse, stagnation ou baisse ; avec ou sans
progressivité ;
</li>
- <ul class="list-disc list-inside">
+ <ul class="list-inside list-disc">
<li>les seuils d'entrée et de sortie des dispositifs ;</li>
<li>les effets de seuils ou autres phénomènes particuliers.</li>
</ul>
</ul>
<div
- class="font-sans text-base border-l-4 pl-4 border-le-vert-200 text-le-vert-900 mt-8"
+ class="mt-8 border-l-4 border-le-vert-200 pl-4 font-sans text-base text-le-vert-900"
>
- <h3 class="text-left font-bold max-w-prose">
+ <h3 class="max-w-prose text-left font-bold">
<iconify-icon
class="mr-1 align-[-0.2rem] text-xl"
icon="ri-file-download-line"
@@ -808,9 +808,9 @@
constitue.
</p>
</div>
- <div class="flex gap-4 justify-center lg:justify-start mt-10">
+ <div class="mt-10 flex justify-center gap-4 lg:justify-start">
<button
- class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="mt-5 flex items-center gap-2 rounded-md bg-le-bleu px-5 py-2 font-sans text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-blue-800 active:bg-blue-900"
on:click={() => (testCaseSelectModalOpen = true)}
>
Utiliser le graphique "cas types"<iconify-icon
@@ -822,7 +822,7 @@
<a
href="https://dai.ly/x954yfm?start=20"
target="_blank"
- class="text-base font-sans inline-flex items-center gap-2 lx-link-uppercase mt-6"
+ class="lx-link-uppercase mt-6 inline-flex items-center gap-2 font-sans text-base"
><iconify-icon class="text-2xl" icon="twemoji:film-frames" />Le
graphique expliqué en vidéo<iconify-icon
class="text-xl"
@@ -900,15 +900,15 @@
</div>
</section>
<section
- class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white fond"
+ class="fond grid grid-cols-4 gap-x-12 gap-y-12 bg-white px-10 pb-20 pt-10 md:px-20 lg:px-40"
>
<AnchorTitle
id="gagnants-perdants"
- class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
+ class="col-span-4 max-w-prose justify-self-center text-center text-2xl font-bold"
tag="h2"
>
<span
- class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
+ class="relative z-10 border-b-2 border-black pb-3 font-serif font-light italic"
>
<span class="highlight highlight-yellow">les gagnants / perdants</span>
</span>
@@ -918,14 +918,14 @@
</AnchorTitle>
<div
- class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
+ class="col-span-4 justify-self-center font-serif text-lg lg:col-span-2 lg:justify-self-end"
>
<img
- class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
+ class="m-5 max-h-[500px] rounded-lg border shadow-2xl"
src="welcome-capture-ecran-impact-gagnants-perdants.png"
/>
</div>
- <div class="font-serif text-lg col-span-4 lg:col-span-2 py-3.5">
+ <div class="col-span-4 py-3.5 font-serif text-lg lg:col-span-2">
<span>
Au delà de l'impact budgétaire, le simulateur socio-fiscal permet de
calculer le nombre de foyers concernés par une réforme. Cette
@@ -934,11 +934,11 @@
ménages ayant une hausse ou baisse de leur impôt sur le revenu, CSG ou
allocations familiales.</span
>
- <div class="flex flex-wrap gap-3 font-sans text-base items-center mt-4">
- <h3 class="font-bold text-nowrap">Les dispositifs concernés :</h3>
+ <div class="mt-4 flex flex-wrap items-center gap-3 font-sans text-base">
+ <h3 class="text-nowrap font-bold">Les dispositifs concernés :</h3>
{#each suggestions.filter((suggestion) => suggestion.budget) as suggestion}
<a
- class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-nowrap"
+ class="text-nowrap rounded-full bg-[#E3DFA9] px-3 py-1 hover:bg-opacity-80 active:bg-opacity-70"
data-sveltekit-noscroll
href={newSimulationUrl({
...displayMode,
@@ -950,9 +950,9 @@
</a>
{/each}
</div>
- <div class="flex lg:justify-start justify-center">
+ <div class="flex justify-center lg:justify-start">
<a
- class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+ class="mt-5 flex items-center gap-2 rounded-md bg-le-bleu px-5 py-2 font-sans text-sm font-bold uppercase tracking-[0.085em] text-white shadow-lg hover:bg-blue-800 active:bg-blue-900"
href={newSimulationUrl({
...displayMode,
budget: true,
@@ -968,7 +968,7 @@
<a
href="https://dai.ly/kMjLxiwKpp4JkiButzY?start=310"
target="_blank"
- class="text-base font-sans inline-flex items-center gap-2 lx-link-uppercase mt-6"
+ class="lx-link-uppercase mt-6 inline-flex items-center gap-2 font-sans text-base"
><iconify-icon class="text-2xl" icon="twemoji:film-frames" />Ce
composant expliqué en vidéo<iconify-icon
class="text-xl"
@@ -997,7 +997,7 @@
>.
</p>
<a
- class="inline-flex items-center gap-2 lx-link-uppercase mt-4"
+ class="lx-link-uppercase mt-4 inline-flex items-center gap-2"
href="/fonctionnement"
>
Fonctionnement du simulateur
@@ -1006,16 +1006,16 @@
</div>
</section>
<section
- class="flex flex-col justify-center px-10 md:px-20 lg:px-40 pb-20 pt-10 bg-[#240B36] text-white font-serif text-lg"
+ class="flex flex-col justify-center bg-[#240B36] px-10 pb-20 pt-10 font-serif text-lg text-white md:px-20 lg:px-40"
>
<AnchorTitle
id="graphiques-cas-types"
- class="text-2xl font-bold font-sans text-center mb-10"
+ class="mb-10 text-center font-sans text-2xl font-bold"
tag="h2"
>
Un simulateur qui s'appuie sur le moteur de calcul <PictoOpenFisca /> OpenFisca
</AnchorTitle>
- <div class="flex gap-12 flex-col md:flex-row justify-center items-start">
+ <div class="flex flex-col items-start justify-center gap-12 md:flex-row">
<div class="max-w-screen-lg">
<p>
Le simulateur socio-fiscal LexImpact de l'Assemblée nationale s'appuie
@@ -1034,7 +1034,7 @@
</p>
<a
- class="font-sans flex-grow-0 items-center gap-2 py-3 px-5 shadow-lg bg-white hover:bg-[#c42323] hover:text-white rounded-md text-[#240B36] text-sm font-bold tracking-[0.085em] uppercase"
+ class="flex-grow-0 items-center gap-2 rounded-md bg-white px-5 py-3 font-sans text-sm font-bold uppercase tracking-[0.085em] text-[#240B36] shadow-lg hover:bg-[#c42323] hover:text-white"
title="Vers le site OpenFisca"
href="https://openfisca.org/fr/"
target="_blank"
@@ -1046,7 +1046,7 @@
/>
</a>
<a
- class="mt-10 mx-4 inline-flex items-center uppercase hover:underline decoration-2 underline-offset-4 mb-4 font-sans text-neutral-300 hover:text-white tracking-wider"
+ class="mx-4 mb-4 mt-10 inline-flex items-center font-sans uppercase tracking-wider text-neutral-300 decoration-2 underline-offset-4 hover:text-white hover:underline"
href="/fonctionnement"
>
Comprendre le fonctionnement du simulateur
@@ -1059,7 +1059,7 @@
</div>
<a
- class="min-w-[200px] flex justify-center flex-col"
+ class="flex min-w-[200px] flex-col justify-center"
href="https://joinup.ec.europa.eu/collection/sharing-and-reuse-it-solutions/sharing-reuse-awards-2019-results#oss-inno"
target="_blank"
>
@@ -1068,7 +1068,7 @@
src="welcome-logo-europe-openfisca.png"
/>
<p
- class="font-sans text-base text-neutral-300 leading-tight max-w-[180px] mt-4"
+ class="mt-4 max-w-[180px] font-sans text-base leading-tight text-neutral-300"
>
Désigné « Logiciel open-source le plus innovant » en 2019
</p></a
@@ -1102,7 +1102,7 @@
<style lang="postcss">
.highlight {
- @apply relative inline-flex before:absolute before:-z-10 before:top-1 before:bottom-0 before:-left-1 before:-right-4;
+ @apply relative inline-flex before:absolute before:-left-1 before:-right-4 before:bottom-0 before:top-1 before:-z-10;
}
.highlight-yellow {
diff --git a/src/routes/budgets/simulations/+page.svelte b/src/routes/budgets/simulations/+page.svelte
index 42bebd555..aa604e8b3 100644
--- a/src/routes/budgets/simulations/+page.svelte
+++ b/src/routes/budgets/simulations/+page.svelte
@@ -28,10 +28,10 @@
})
</script>
-<main class="bg-graph-paper h-full flex items-center justify-center">
- <div class="w-full h-full max-w-screen-md bg-white p-10">
+<main class="flex h-full items-center justify-center bg-graph-paper">
+ <div class="h-full w-full max-w-screen-md bg-white p-10">
<button
- class="inline-flex items-center gap-2 py-2 px-5 bg-white hover:bg-gray-100 active:bg-gray-200 rounded-md border border-gray-700 text-gray-700 text-sm font-bold tracking-[0.085em] uppercase"
+ class="inline-flex items-center gap-2 rounded-md border border-gray-700 bg-white px-5 py-2 text-sm font-bold uppercase tracking-[0.085em] text-gray-700 hover:bg-gray-100 active:bg-gray-200"
title="Retour au simulateur"
on:click={() =>
goto($displayMode === undefined ? "/" : newSimulationUrl($displayMode))}
@@ -47,17 +47,17 @@
Simulations budgétaires déjà disponibles :
</h2>
- <table class="relative w-full text-sm mt-5">
+ <table class="relative mt-5 w-full text-sm">
{#each cachedSimulations as cachedSimulation}
- <tr class="even:bg-white even:bg-opacity-30 odd:bg-gray-200">
- <td class="pl-3 pr-10 py-2 text-start">{cachedSimulation.date}</td>
- <td class="py-2 text-start font-bold font-serif">
+ <tr class="odd:bg-gray-200 even:bg-white even:bg-opacity-30">
+ <td class="py-2 pl-3 pr-10 text-start">{cachedSimulation.date}</td>
+ <td class="py-2 text-start font-serif font-bold">
{cachedSimulation.title}
</td>
- <td class="pl-10 pr-3 py-2 text-end">
+ <td class="py-2 pl-10 pr-3 text-end">
<a
href="/budgets/simulations/{cachedSimulation.hash}"
- class="underline text-gray-600"
+ class="text-gray-600 underline"
>
Voir cette simulation
</a>
@@ -69,20 +69,20 @@
class="absolute inset-0 bg-white"
out:fade={{ duration: 500, delay: 500 }}
>
- <table class="w-full text-sm animate-pulse-2">
+ <table class="w-full animate-pulse-2 text-sm">
{#each Array(7) as _}
- <tr class="even:bg-white even:bg-opacity-30 odd:bg-gray-200">
- <td class="pl-3 pr-10 py-2 text-start">
- <div class="w-20 h-4 my-0.5 bg-neutral-400" />
+ <tr class="odd:bg-gray-200 even:bg-white even:bg-opacity-30">
+ <td class="py-2 pl-3 pr-10 text-start">
+ <div class="my-0.5 h-4 w-20 bg-neutral-400" />
</td>
- <td class="py-2 text-start font-bold font-serif">
+ <td class="py-2 text-start font-serif font-bold">
<div
- class="h-4 my-0.5 bg-neutral-400"
+ class="my-0.5 h-4 bg-neutral-400"
style:width="{Math.random() * (160 - 240) + 240}px"
/>
</td>
- <td class="pl-10 pr-3 py-2">
- <div class="w-32 h-4 my-0.5 bg-neutral-400 ml-auto" />
+ <td class="py-2 pl-10 pr-3">
+ <div class="my-0.5 ml-auto h-4 w-32 bg-neutral-400" />
</td>
</tr>
{/each}
diff --git a/src/routes/contribuer/+page.svelte b/src/routes/contribuer/+page.svelte
index de811ca28..b4dce33e0 100644
--- a/src/routes/contribuer/+page.svelte
+++ b/src/routes/contribuer/+page.svelte
@@ -10,7 +10,7 @@
<title>Contribuer| {data.title}</title>
</svelte:head>
-<main class="bg-graph-paper flex items-center justify-center">
+<main class="flex items-center justify-center bg-graph-paper">
<div class="bg-white p-10">
<div class="mb-16 max-w-screen-md">
<h1 class="pb-3 pt-7 font-serif text-3xl font-bold text-gray-700">
diff --git a/src/routes/fonctionnement/+page.svelte b/src/routes/fonctionnement/+page.svelte
index 8725e7131..acb166562 100644
--- a/src/routes/fonctionnement/+page.svelte
+++ b/src/routes/fonctionnement/+page.svelte
@@ -33,12 +33,12 @@
/>
<main
- class="pt-24 md:pt-12 2xl:pt-14 flex flex-col items-center justify-center font-serif bg-neutral-100 text-base"
+ class="flex flex-col items-center justify-center bg-neutral-100 pt-24 font-serif text-base md:pt-12 2xl:pt-14"
>
- <section class="w-full bg-white max-w-screen-lg pt-8 px-20">
- <div class="flex justify-between mb-5">
+ <section class="w-full max-w-screen-lg bg-white px-20 pt-8">
+ <div class="mb-5 flex justify-between">
<a
- class="lx-link-uppercase text-neutral-500 font-sans text-sm"
+ class="lx-link-uppercase font-sans text-sm text-neutral-500"
href="/accueil"
>
<iconify-icon
@@ -48,15 +48,15 @@
</a>
</div>
<h1
- class="text-2xl lg:text-3xl font-sans font-bold text-black text-center tracking-wider"
+ class="text-center font-sans text-2xl font-bold tracking-wider text-black lg:text-3xl"
>
Fonctionnement<br /><span class="font-light"
>du simulateur socio-fiscal</span
>
</h1>
- <div class="font-sans mt-20 bg-le-vert-50 flex flex-col p-5 tracking-wider">
- <p class="font-bold my-2 uppercase">Sommaire :</p>
- <ul class="list-decimal list-inside">
+ <div class="mt-20 flex flex-col bg-le-vert-50 p-5 font-sans tracking-wider">
+ <p class="my-2 font-bold uppercase">Sommaire :</p>
+ <ul class="list-inside list-decimal">
<li>
<a href="#a-quoi-sert-le-simulateur" class="lx-link-text"
>À quoi sert le simulateur ?</a
@@ -66,7 +66,7 @@
<a href="#mecanique-du-simulateur" class="lx-link-text"
>Mécanique du simulateur</a
>
- <ul class="list-disc mx-10 text-sm">
+ <ul class="mx-10 list-disc text-sm">
<li>
<a href="#ecosysteme" class="lx-link-text"
>Écosystème des acteurs</a
@@ -88,7 +88,7 @@
<a href="#fiabilite-des-resultats" class="lx-link-text"
>Fiabilité des résultats</a
>
- <ul class="list-disc mx-10 text-sm">
+ <ul class="mx-10 list-disc text-sm">
<li>
<a href="#methodologie-verification" class="lx-link-text"
>Méthodologie de vérification</a
@@ -104,7 +104,7 @@
</ul>
</div>
</section>
- <section class="bg-white max-w-screen-lg py-10 px-20">
+ <section class="max-w-screen-lg bg-white px-20 py-10">
<AnchorTitle
id="a-quoi-sert-le-simulateur"
class="lx-titreh2 mb-10"
@@ -125,7 +125,7 @@
> à destination des ménages.
</p>
<p>Cet outil permet aux utilisateurs :</p>
- <ul class="list-outside list-disc mx-10">
+ <ul class="mx-10 list-outside list-disc">
<li>
d'estimer, en moins d'une minute, l'impact financier sur des ménages
types configurables ;
@@ -152,7 +152,7 @@
Le simulateur permet de visualiser l'impact du système socio-fiscal français,
c'est-à-dire les cotisations, les impôts et les aides qui concernent ces ménages
types.<a
- class="lx-link-text text-neutral-600 font-sans mt-2 mx-1"
+ class="lx-link-text mx-1 mt-2 font-sans text-neutral-600"
href="/accueil#dispositif-couverts"
>
Voir les {withLinkedVariableNames.length} dispositifs disponibles<iconify-icon
@@ -172,7 +172,7 @@
données disponibles. En revanche, du fait de leur caractère simplifié,
elles sont à mettre en perspective avec la réalité du terrain :
</p>
- <ul class="list-outside mx-10 list-disc">
+ <ul class="mx-10 list-outside list-disc">
<li class="pb-2 text-justify leading-normal">
Premièrement, en regard de leur proportion dans la population réelle
difficile à évaluer : Par exemple,
@@ -189,12 +189,12 @@
type.
<br />
<p
- class="font-sans border-l-4 pl-4 my-3 text-neutral-600 text-sm border-le-vert-300"
+ class="my-3 border-l-4 border-le-vert-300 pl-4 font-sans text-sm text-neutral-600"
>
Depuis 2024, LexImpact propose une bibliothèque de cas types
préconfigurés classés par décile de niveau de vie, permettant de
mieux appréhender la réalité de la population française. <button
- class="lx-link-text text-neutral-600 font-sans mt-2 mx-1"
+ class="lx-link-text mx-1 mt-2 font-sans text-neutral-600"
on:click={() => (testCaseSelectModalOpen = true)}
>
Voir les cas types<iconify-icon
@@ -226,7 +226,7 @@
>
</p>
- <ul class="list-outside mx-10 list-disc mb-5">
+ <ul class="mx-10 mb-5 list-outside list-disc">
<li class="pb-2 leading-normal">
Enquête Revenus Fiscaux et Sociaux (<a
href="https://www.insee.fr/fr/metadonnees/source/serie/s1231/documentation-methodologique"
@@ -245,7 +245,7 @@
</li>
</ul>
<a
- class="lx-link-text text-neutral-600 font-sans"
+ class="lx-link-text font-sans text-neutral-600"
href="#traitement-des-donnees"
>
En savoir plus sur le traitement des données<iconify-icon
@@ -253,7 +253,7 @@
icon="ri-arrow-down-line"
/></a
>
- <p class="pt-10 pb-3 text-justify leading-normal">
+ <p class="pb-3 pt-10 text-justify leading-normal">
Le simulateur calcule les impacts globaux, toute chose égale par ailleurs.
C'est-à-dire que le simulateur ne prend pas en compte les réactions des
agents économiques à la réforme. Par exemple, si une réforme fiscale
@@ -263,7 +263,7 @@
hausse d'impôt.
</p>
</section>
- <section class="bg-white max-w-screen-lg py-10 px-20 w-full">
+ <section class="w-full max-w-screen-lg bg-white px-20 py-10">
<AnchorTitle id="mecanique-du-simulateur" class="lx-titreh2 mb-10" tag="h2">
2. Mécanique du simulateur
</AnchorTitle>
@@ -271,7 +271,7 @@
Pour que le simulateur puisse proposer es estimation sur cas types et
budgétaires, différentes briques techniques sont nécessaires :
</p>
- <ul class="list-decimal list-outside mx-10">
+ <ul class="mx-10 list-outside list-decimal">
<li>
<a href="#traitement-des-donnees" class="lx-link-text"
>Les données représentatives de la population française et leur
@@ -284,7 +284,7 @@
<li>L'interface utilisateur</li>
</ul>
</section>
- <section class="max-w-screen-xl my-10">
+ <section class="my-10 max-w-screen-xl">
<img
class="object-center"
src="/schema-explicatif-fonctionnement-simulateurs.png"
@@ -301,7 +301,7 @@
</p>
</section>
- <section class="bg-white max-w-screen-lg py-10 px-20">
+ <section class="max-w-screen-lg bg-white px-20 py-10">
<AnchorTitle id="ecosysteme" class="lx-titreh3 mb-10" tag="h3">
Un fonctionnement possible grâce à plusieurs acteurs
</AnchorTitle>
@@ -353,7 +353,7 @@
</li>
</ul>
</section>
- <section class="bg-white max-w-screen-lg pb-10 px-20">
+ <section class="max-w-screen-lg bg-white px-20 pb-10">
<AnchorTitle id="traitement-des-donnees" class="lx-titreh3 mb-10" tag="h3">
Le traitement des données
</AnchorTitle>
@@ -399,7 +399,7 @@
/></a
>.
<p
- class="font-sans border-l-4 pl-4 my-3 text-neutral-600 text-sm border-le-vert-300 mx-10"
+ class="mx-10 my-3 border-l-4 border-le-vert-300 pl-4 font-sans text-sm text-neutral-600"
>
Par exemple, pour la CSG sur les revenus du capital, le simulateur a
besoin, pour chaque foyer fiscal, des valeurs entrant dans le calcul
@@ -448,7 +448,7 @@
l'obtention de résultats pertinents pour tous les types de calculs.
</li>
</ul>
- <p class="font-sans my-10 font-bold text-center">
+ <p class="my-10 text-center font-sans font-bold">
L'ensemble de ces étapes est détaillé dans notre documentation
technique :<br /><br />
<a
@@ -463,7 +463,7 @@
</a>
</p>
</section>
- <section class="bg-white max-w-screen-lg pb-10 px-20">
+ <section class="max-w-screen-lg bg-white px-20 pb-10">
<AnchorTitle id="moteur-de-calcul" class="lx-titreh3 mb-10" tag="h3">
Le moteur de calcul
</AnchorTitle>
@@ -495,7 +495,7 @@
</p>
</section>
- <section class="bg-white max-w-screen-lg pb-10 px-20">
+ <section class="max-w-screen-lg bg-white px-20 pb-10">
<AnchorTitle id="fiabilite-des-resultats" class="lx-titreh2 mb-10" tag="h2">
3. Fiabilité des résultats
</AnchorTitle>
@@ -539,7 +539,7 @@
ERFS-FPR de l'Insee disponible concernait 2018, mais l'Insee publie également
le montant global des
<a
- class="font-bold lx-link-text"
+ class="lx-link-text font-bold"
href="https://www.insee.fr/fr/statistiques/2381416#tableau-figure1"
>
recettes de l'impôt en 2020</a
@@ -663,7 +663,7 @@
d'erreur raisonnable, mais qu'il faut garder à l'esprit.
</p>
- <p class="pb-10 pt-5 text-lg leading-normal text-center font-bold">
+ <p class="pb-10 pt-5 text-center text-lg font-bold leading-normal">
Aidez à améliorer LexImpact, n'hésitez pas à <a
class="lx-link-text"
href="https://socio-fiscal.leximpact.an.fr/contribuer"
diff --git a/src/routes/parameters/[parameter]/edit/+page.svelte b/src/routes/parameters/[parameter]/edit/+page.svelte
index b7619c37a..831d739ad 100644
--- a/src/routes/parameters/[parameter]/edit/+page.svelte
+++ b/src/routes/parameters/[parameter]/edit/+page.svelte
@@ -127,7 +127,7 @@
<pre>{JSON.stringify(errors, null, 2)}</pre>
{/if}
-<main class="bg-polka-dots flex items-center justify-center">
+<main class="flex items-center justify-center bg-polka-dots">
<div class="max-w-screen-md bg-white">
<form class="flex-col items-start pb-4" on:submit|preventDefault={save}>
<button
diff --git a/src/routes/variables/[variable]/+page.svelte b/src/routes/variables/[variable]/+page.svelte
index 03240f4e3..452633855 100644
--- a/src/routes/variables/[variable]/+page.svelte
+++ b/src/routes/variables/[variable]/+page.svelte
@@ -102,10 +102,10 @@
<title>{variable.name} | Variables | {data.title}</title>
</svelte:head>
-<main class="bg-polka-dots flex items-center justify-center">
+<main class="flex items-center justify-center bg-polka-dots">
<div class="max-w-screen-md bg-white">
<button
- class="ml-5 md:ml-10 mt-5 inline-flex cursor-pointer items-center rounded bg-gray-200 p-2 pr-3 text-sm text-black shadow-md hover:bg-gray-300 active:bg-gray-400"
+ class="ml-5 mt-5 inline-flex cursor-pointer items-center rounded bg-gray-200 p-2 pr-3 text-sm text-black shadow-md hover:bg-gray-300 active:bg-gray-400 md:ml-10"
on:click={() =>
goto($displayMode === undefined ? "/" : newSimulationUrl($displayMode))}
>
--
GitLab