From cc63f4569738f0d41a040f6fa3ba01aa03b8d1ac Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Thu, 27 Oct 2022 15:12:22 +0200 Subject: [PATCH] =?UTF-8?q?Mise=20en=20conformit=C3=A9=20RGAA=20:=20=C3=A9?= =?UTF-8?q?l=C3=A9ments=20obligatoires=20(#2353)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: CSS * feat: Retire
présentationnel * feat: Ajoute attribut changement de langue * refix --- site/source/components/PaySlip.css | 2 +- site/source/components/SchemeComparaison.tsx | 360 +++++++++--------- .../components/layout/Footer/Footer.tsx | 6 +- site/source/template.html | 1 - 4 files changed, 186 insertions(+), 183 deletions(-) diff --git a/site/source/components/PaySlip.css b/site/source/components/PaySlip.css index dce23f439..0be13795b 100644 --- a/site/source/components/PaySlip.css +++ b/site/source/components/PaySlip.css @@ -20,7 +20,7 @@ .payslip__container h4 { border-bottom: 1px solid rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85); - color-adjust: exact !important; + print-color-adjust: exact !important; margin: 0; margin-top: 1.5rem; margin-bottom: 0.5rem; diff --git a/site/source/components/SchemeComparaison.tsx b/site/source/components/SchemeComparaison.tsx index b91e69bf7..a85dcab6b 100644 --- a/site/source/components/SchemeComparaison.tsx +++ b/site/source/components/SchemeComparaison.tsx @@ -510,201 +510,201 @@ const StyledGrid = styled.div` : 'minmax(20%, 20rem)'} [end]; `} -& > * { - width: 100%; - border-bottom: 1px solid ${({ theme }) => theme.colors.bases.primary[100]}; - padding: 0.6rem 1.2rem; - border-right: 1px solid ${({ theme }) => theme.colors.bases.primary[100]}; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - text-align: center; - flex-wrap: wrap; -} - -& > h2 { - margin: 0; - border: none; - align-self: stretch; -} - -& > h2 img { - height: 1.6rem !important; - width: 1.6rem !important; -} -& > .legend { - align-items: flex-end; - grid-column: row-legend; - text-align: right; -} - -& > .AS-et-indep { - grid-column: assimilé-salarié / auto-entrepreneur; -} -& > .AS { - ${(props) => - props.hideAssimiléSalarié && - css` - display: none; - `} - grid-column: assimilé-salarié; - min-width: 11rem; -} -& > .indep { - grid-column: indépendant; -} -& > .auto { - grid-column: auto-entrepreneur; - ${(props) => - props.hideAutoEntrepreneur && - css` - display: none; - `} - border-right: none; - min-width: 14rem; -} -& > .all { - border-right: none; - border-bottom: none; - grid-column: row-legend / end; -} -& > .all.colored { - background-color: ${({ theme }) => theme.colors.bases.primary[100]}; -} - -& > .indep-et-auto { - grid-column: indépendant / end; - border-right: none; -} -& > .AS-indep-et-auto { - grid-column: assimilé-salarié / end; - border-right: none; -} - -&.hideAutoEntrepreneur > .auto { - display: none; -} -&.hideAutoEntrepreneur > .indep-et-auto { - border-right: 1px solid ${({ theme }) => theme.colors.bases.primary[100]}; -} - -&.hideAssimiléSalarié > .AS { - display: none; -} - -& > .green { - font-weight: bold; - color: limegreen; -} - -& > .red { - font-weight: bold; - color: red; -} - -& > .no-border { - border: none; -} -& .button { - align-self: stretch; -} - -@media (max-width: 800px) { & > * { - padding: 0.6rem; - } -} -@media (max-width: 600px) { - & { - display: block; - padding: 0 0.6rem; - } - - & h2 { + width: 100%; + border-bottom: 1px solid ${({ theme }) => theme.colors.bases.primary[100]}; + padding: 0.6rem 1.2rem; + border-right: 1px solid ${({ theme }) => theme.colors.bases.primary[100]}; + display: flex; flex-direction: column; - } - & small { - margin-left: 0.2rem; + align-items: center; + justify-content: space-evenly; + text-align: center; + flex-wrap: wrap; } - & > *::before { - flex: 1; - text-align: left; - flex-shrink: 0; - white-space: nowrap; - user-select: text; - font-weight: normal; - } - & > :not(.button)::before { - color: ${({ theme }) => theme.colors.bases.primary[700]}; !important; - opacity: 0.6; - } - & > .AS::before { - content: 'Assimilé-salarié :'; - } - & > .indep::before, - &.hideAutoEntrepreneur > .indep-et-auto::before { - content: 'Indépendant :'; + & > h2 { + margin: 0; + border: none; + align-self: stretch; } - &.hideAssimiléSalarié > .AS-et-indep::before, - &.hideAssimiléSalarié > .indep::before { - content: 'Entreprise individuelle :'; - } - - & > .auto::before { - content: 'Auto-entrepreneur :'; - } - & > .indep-et-auto::before { - content: 'Indépendant / auto-entrepreneur :'; - } - & > .AS-et-indep::before { - content: 'Assimilé salarié / indépendant '; - } - & > h2::before { - display: none; - } - & > h2.AS::after, - &:not(.hideAutoEntrepreneur) > h2.indep::after { - display: block; - font-size: 1rem; - margin-top: 1rem; - content: 'vs'; + & > h2 img { + height: 1.6rem !important; + width: 1.6rem !important; } & > .legend { - justify-content: flex-start; - align-items: baseline; - text-align: left; - } - & > * { - border: none; - flex-direction: row; + align-items: flex-end; + grid-column: row-legend; text-align: right; - justify-content: right; } - & > :not(.all):not(.button) { - padding-left: 0; + + & > .AS-et-indep { + grid-column: assimilé-salarié / auto-entrepreneur; + } + & > .AS { + ${(props) => + props.hideAssimiléSalarié && + css` + display: none; + `} + grid-column: assimilé-salarié; + min-width: 11rem; + } + & > .indep { + grid-column: indépendant; + } + & > .auto { + grid-column: auto-entrepreneur; + ${(props) => + props.hideAutoEntrepreneur && + css` + display: none; + `} + border-right: none; + min-width: 14rem; } & > .all { - margin: 0 -0.6rem; - text-align: center; - justify-content: center; - margin-top: 2rem; + border-right: none; + border-bottom: none; + grid-column: row-legend / end; } - & > .no-border > .button { - flex: 1; + & > .all.colored { + background-color: ${({ theme }) => theme.colors.bases.primary[100]}; } - & > .no-border::before { + + & > .indep-et-auto { + grid-column: indépendant / end; + border-right: none; + } + & > .AS-indep-et-auto { + grid-column: assimilé-salarié / end; + border-right: none; + } + + &.hideAutoEntrepreneur > .auto { display: none; } -} -@media (min-width: 600px) { - & > h3 { - margin: 0; - font-weight: normal; - - font-size: 1rem; + &.hideAutoEntrepreneur > .indep-et-auto { + border-right: 1px solid ${({ theme }) => theme.colors.bases.primary[100]}; + } + + &.hideAssimiléSalarié > .AS { + display: none; + } + + & > .green { + font-weight: bold; + color: limegreen; + } + + & > .red { + font-weight: bold; + color: red; + } + + & > .no-border { + border: none; + } + & .button { + align-self: stretch; + } + + @media (max-width: 800px) { + & > * { + padding: 0.6rem; + } + } + @media (max-width: 600px) { + & { + display: block; + padding: 0 0.6rem; + } + + & h2 { + flex-direction: column; + } + & small { + margin-left: 0.2rem; + } + + & > *::before { + flex: 1; + text-align: left; + flex-shrink: 0; + white-space: nowrap; + user-select: text; + font-weight: normal; + } + & > :not(.button)::before { + color: ${({ theme }) => theme.colors.bases.primary[700]} !important; + opacity: 0.6; + } + & > .AS::before { + content: 'Assimilé-salarié :'; + } + & > .indep::before, + &.hideAutoEntrepreneur > .indep-et-auto::before { + content: 'Indépendant :'; + } + + &.hideAssimiléSalarié > .AS-et-indep::before, + &.hideAssimiléSalarié > .indep::before { + content: 'Entreprise individuelle :'; + } + + & > .auto::before { + content: 'Auto-entrepreneur :'; + } + & > .indep-et-auto::before { + content: 'Indépendant / auto-entrepreneur :'; + } + & > .AS-et-indep::before { + content: 'Assimilé salarié / indépendant '; + } + & > h2::before { + display: none; + } + & > h2.AS::after, + &:not(.hideAutoEntrepreneur) > h2.indep::after { + display: block; + font-size: 1rem; + margin-top: 1rem; + content: 'vs'; + } + & > .legend { + justify-content: flex-start; + align-items: baseline; + text-align: left; + } + & > * { + border: none; + flex-direction: row; + text-align: right; + justify-content: right; + } + & > :not(.all):not(.button) { + padding-left: 0; + } + & > .all { + margin: 0 -0.6rem; + text-align: center; + justify-content: center; + margin-top: 2rem; + } + & > .no-border > .button { + flex: 1; + } + & > .no-border::before { + display: none; + } + } + @media (min-width: 600px) { + & > h3 { + margin: 0; + font-weight: normal; + + font-size: 1rem; + } } -} ` diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx index 41a12d44a..46e2fd4f6 100644 --- a/site/source/components/layout/Footer/Footer.tsx +++ b/site/source/components/layout/Footer/Footer.tsx @@ -107,7 +107,11 @@ export default function Footer() { )} {hrefLink && (
  • - + {hrefLink.hrefLang === 'fr' ? ( <> Passer en français diff --git a/site/source/template.html b/site/source/template.html index bf9324502..aaab49baa 100644 --- a/site/source/template.html +++ b/site/source/template.html @@ -261,7 +261,6 @@ récent.
    -

    Si besoin, vous pouvez en installer un nouveau depuis