A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

switch bug

+9 -12
+4 -5
apps/docs/src/components/switch/index.tsx
··· 35 35 ":is([data-selected=true] *)": primaryColor.solid1, 36 36 }, 37 37 boxShadow: "inset 0 0 6px 1px rgba(0, 0, 0, 0.13)", 38 + containerType: "inline-size", 38 39 flexShrink: 0, 39 40 opacity: { 40 41 default: 1, ··· 58 59 position: "absolute", 59 60 transform: { 60 61 default: "translateY(-50%)", 61 - ":is([data-selected=true] *)": "translate(100%, -50%)", 62 + ":is([data-selected=true] *)": `translate(calc(100cqw - (${horizontalSpace["xs"]} * 2) - ${sizeSpace.md}), -50%)`, 62 63 }, 63 64 transitionDuration: animationDuration.fast, 64 65 transitionProperty: { ··· 66 67 [mediaQueries.reducedMotion]: "none", 67 68 }, 68 69 transitionTimingFunction: "ease-in-out", 69 - height: sizeSpace["md"], 70 - left: 0, 70 + height: sizeSpace.md, 71 71 marginLeft: horizontalSpace["xs"], 72 - marginRight: horizontalSpace["xs"], 73 72 top: "50%", 74 - width: sizeSpace["md"], 73 + width: sizeSpace.md, 75 74 }, 76 75 }); 77 76
+1 -2
apps/docs/vite.config.ts
··· 314 314 prerender: { 315 315 enabled: true, 316 316 crawlLinks: true, 317 - filter: ({ path: p }) => 318 - !p.includes("/doc-examples/") && p !== "/" && p !== "/docs", 317 + filter: ({ path: p }) => !p.includes("/doc-examples/") && p !== "/docs", 319 318 }, 320 319 pages: [ 321 320 {
+4 -5
packages/hip-ui/src/components/switch/index.tsx
··· 35 35 ":is([data-selected=true] *)": primaryColor.solid1, 36 36 }, 37 37 boxShadow: "inset 0 0 6px 1px rgba(0, 0, 0, 0.13)", 38 + containerType: "inline-size", 38 39 flexShrink: 0, 39 40 opacity: { 40 41 default: 1, ··· 58 59 position: "absolute", 59 60 transform: { 60 61 default: "translateY(-50%)", 61 - ":is([data-selected=true] *)": "translate(100%, -50%)", 62 + ":is([data-selected=true] *)": `translate(calc(100cqw - (${horizontalSpace["xs"]} * 2) - ${sizeSpace.md}), -50%)`, 62 63 }, 63 64 transitionDuration: animationDuration.fast, 64 65 transitionProperty: { ··· 66 67 [mediaQueries.reducedMotion]: "none", 67 68 }, 68 69 transitionTimingFunction: "ease-in-out", 69 - height: sizeSpace["md"], 70 - left: 0, 70 + height: sizeSpace.md, 71 71 marginLeft: horizontalSpace["xs"], 72 - marginRight: horizontalSpace["xs"], 73 72 top: "50%", 74 - width: sizeSpace["md"], 73 + width: sizeSpace.md, 75 74 }, 76 75 }); 77 76