studio/integration
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gaufre: improve styling when gaufre is manually used in a popup

Browse Source 
this is basically for tchap as of now, they are the only ones using this
This commit is contained in:
Emmanuel Pelletier
2025-02-27 17:50:34 +01:00
parent ba17049528
commit 3f678131a8
3 changed files with 71 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/integration/src/dev/StylesGaufre.tsx
View File

@@ -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")
}
}, [])

51
packages/integration/src/dev/dev.tsx
View File

@@ -217,6 +217,57 @@ const routes = [
</StylesGaufre>
</DarkTheme>
),
},{
path: "/gaufre-borderless",
label: "Gaufre (mode sans bordure)",
component: (
<StylesGaufre mode="borderless">
<div
style={{
margin: "2rem auto",
width: 800,
border: "1px solid #999",
padding: "2rem",
borderRadius: "0.5rem",
}}
>
<div style={{ display: "flex" }}>
<h1>Sans bordure (pour intégrations customisées)</h1>
<Gaufre />
</div>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
</StylesGaufre>
),
},
]

28
website/src/components/GaufrePage.astro
View File

@@ -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;
}