From 3f678131a83c2dbec6927c142cd8f1366431fa0d Mon Sep 17 00:00:00 2001 From: Emmanuel Pelletier Date: Thu, 27 Feb 2025 17:50:34 +0100 Subject: [PATCH] gaufre: improve styling when gaufre is manually used in a popup this is basically for tchap as of now, they are the only ones using this --- packages/integration/src/dev/StylesGaufre.tsx | 6 ++- packages/integration/src/dev/dev.tsx | 51 +++++++++++++++++++ website/src/components/GaufrePage.astro | 28 +++++----- 3 files changed, 71 insertions(+), 14 deletions(-) diff --git a/packages/integration/src/dev/StylesGaufre.tsx b/packages/integration/src/dev/StylesGaufre.tsx index 5b8432e..dcc2814 100644 --- a/packages/integration/src/dev/StylesGaufre.tsx +++ b/packages/integration/src/dev/StylesGaufre.tsx @@ -7,7 +7,7 @@ import devStyles from "./dev.css?inline" * * this helps testing the html when we include the gaufre css */ -export const StylesGaufre = ({ children }: { children: ReactNode }) => { +export const StylesGaufre = ({ children, mode }: { children: ReactNode, mode?: "borderless" }) => { useEffect(() => { if (document.querySelector("#styles-gaufre")) { return @@ -16,8 +16,12 @@ export const StylesGaufre = ({ children }: { children: ReactNode }) => { style.id = "styles-gaufre" style.innerHTML = gaufreStyles + devStyles document.head.appendChild(style) + if (mode === "borderless") { + document.body.classList.add("lasuite--gaufre-borderless") + } return () => { document.querySelector("#styles-gaufre")?.remove() + document.body.classList.remove("lasuite--gaufre-borderless") } }, []) diff --git a/packages/integration/src/dev/dev.tsx b/packages/integration/src/dev/dev.tsx index 518fa47..ee487de 100644 --- a/packages/integration/src/dev/dev.tsx +++ b/packages/integration/src/dev/dev.tsx @@ -217,6 +217,57 @@ const routes = [ ), + },{ + path: "/gaufre-borderless", + label: "Gaufre (mode sans bordure)", + component: ( + +
+
+

Sans bordure (pour intégrations customisées)

+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero + posuere ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac + tempus dui. Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia + elit et massa faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida + consequat. Donec ac odio finibus, lobortis purus vel, consequat purus. Maecenas + convallis vel enim eu malesuada. Vestibulum elementum maximus massa, a porta erat + congue quis. Nunc neque quam, euismod et malesuada in, bibendum ac ex. Phasellus felis + elit, egestas a convallis nec, malesuada a est. Donec ac urna venenatis lorem aliquet + rhoncus in accumsan ipsum. +

+

+ Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue + elementum, tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend, + sapien ligula egestas quam, quis aliquam ex turpis ut augue. Nullam a neque + consectetur, feugiat eros a, lacinia tortor. Proin imperdiet vehicula justo, eget + bibendum tortor gravida a. Pellentesque sit amet fermentum urna. Ut rutrum eros a + ligula dapibus pharetra. In porttitor arcu in euismod dictum. Aenean vestibulum mi et + dignissim rutrum. Phasellus ultrices ex justo, eu tincidunt metus efficitur non. + Curabitur ac lorem ornare, aliquet neque et, tristique elit. Donec quis turpis + sodales, interdum massa fermentum, dictum magna. +

+

+ Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget + tellus ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et + pharetra aliquet. Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus + ornare. Donec venenatis, lectus id faucibus tempus, sapien urna molestie augue, at + egestas enim lectus quis nisi. +

+
+ + ), }, ] diff --git a/website/src/components/GaufrePage.astro b/website/src/components/GaufrePage.astro index 5f0ebf0..3149243 100644 --- a/website/src/components/GaufrePage.astro +++ b/website/src/components/GaufrePage.astro @@ -151,8 +151,16 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0 display: flex !important; align-items: center !important; padding: 16px 32px !important; + --gaufre-x-border-width: 0 !important; border-top: 1px solid transparent !important; border-bottom: 1px solid transparent !important; + border-left: var(--gaufre-x-border-width) solid transparent !important; + border-right: var(--gaufre-x-border-width) solid transparent !important; + } + + .lasuite--gaufre-borderless .lagaufre-service { + --gaufre-x-border-width: 1px !important; + border-radius: 8px !important; } .lagaufre-service a { @@ -179,20 +187,17 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0 .lagaufre-service:hover { background-color: #f0f0fa !important; - border-top: 1px solid #8989cd !important; - border-bottom: 1px solid #8989cd !important; + border-color: #8989cd !important; } .lagaufre-service:has(:focus-visible) { /* this is like a "has-focus-within" selector */ background-color: #f0f0fa !important; - border-top: 1px solid #8989cd !important; - border-bottom: 1px solid #8989cd !important; + border-color: #8989cd !important; } /* fallback for browsers that don't support :has */ @supports not selector(:has(+ *)) { .lagaufre-service:focus-within { background-color: #f0f0fa !important; - border-top: 1px solid #8989cd !important; - border-bottom: 1px solid #8989cd !important; + border-color: #8989cd !important; } } .lagaufre-service:active { @@ -201,19 +206,16 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0 [data-fr-scheme="dark"] .lagaufre-service:hover { background-color: #2d2d2d !important; - border-top-color: #8989cd !important; - border-bottom-color: #8989cd !important; + border-color: #8989cd !important; } [data-fr-scheme="dark"] .lagaufre-service:has(:focus-visible) { background-color: #2d2d2d !important; - border-top-color: #8989cd !important; - border-bottom-color: #8989cd !important; + border-color: #8989cd !important; } @supports not selector(:has(+ *)) { [data-fr-scheme="dark"] .lagaufre-service:focus-within { background-color: #2d2d2d !important; - border-top-color: #8989cd !important; - border-bottom-color: #8989cd !important; + border-color: #8989cd !important; } } @@ -241,7 +243,7 @@ const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0 padding: 2px 6px !important; border-radius: 99px !important; position: absolute !important; - bottom: -2ch !important; + bottom: -1.75ch !important; right: -2.5ch !important; line-height: 1.5 !important; }