diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-11 02:17:40 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-11 11:15:06 -0300 |
commit | 4d66f774c3ad4040f522d2ec52b5b4c2edd2b478 (patch) | |
tree | b73ce595926f6db58a206968666e7d3a0978feaf /packages/taler-wallet-webextension/src/mui/Grid.tsx | |
parent | 2150f3d96b25772dd608e245cd3508f857478c5b (diff) | |
download | wallet-core-4d66f774c3ad4040f522d2ec52b5b4c2edd2b478.tar.xz |
pending operations
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Grid.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Grid.tsx | 110 |
1 files changed, 100 insertions, 10 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx index ccabed060..345305fe1 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -90,6 +90,20 @@ const columnGapVariant = css` padding-left: var(--space-col-md); } } + ${theme.breakpoints.up("lg")} { + width: calc(100% + var(--space-col-lg)); + margin-left: calc(-1 * var(--space-col-lg)); + & > div { + padding-left: var(--space-col-lg); + } + } + ${theme.breakpoints.up("xl")} { + width: calc(100% + var(--space-col-xl)); + margin-left: calc(-1 * var(--space-col-xl)); + & > div { + padding-left: var(--space-col-xl); + } + } `; const rowGapVariant = css` ${theme.breakpoints.up("xs")} { @@ -110,31 +124,77 @@ const rowGapVariant = css` padding-top: var(--space-row-md); } } + ${theme.breakpoints.up("lg")} { + margin-top: calc(-1 * var(--space-row-lg)); + & > div { + padding-top: var(--space-row-lg); + } + } + ${theme.breakpoints.up("xl")} { + margin-top: calc(-1 * var(--space-row-xl)); + & > div { + padding-top: var(--space-row-xl); + } + } `; -const sizeVariant = css` +const sizeVariantXS = css` ${theme.breakpoints.up("xs")} { flex-basis: var(--relation-col-vs-xs); flex-grow: 0; max-width: var(--relation-col-vs-xs); } +`; +const sizeVariantSM = css` ${theme.breakpoints.up("sm")} { flex-basis: var(--relation-col-vs-sm); flex-grow: 0; max-width: var(--relation-col-vs-sm); } +`; +const sizeVariantMD = css` ${theme.breakpoints.up("md")} { flex-basis: var(--relation-col-vs-md); flex-grow: 0; max-width: var(--relation-col-vs-md); } `; +const sizeVariantLG = css` + ${theme.breakpoints.up("lg")} { + flex-basis: var(--relation-col-vs-lg); + flex-grow: 0; + max-width: var(--relation-col-vs-lg); + } +`; +const sizeVariantXL = css` + ${theme.breakpoints.up("xl")} { + flex-basis: var(--relation-col-vs-xl); + flex-grow: 0; + max-width: var(--relation-col-vs-xl); + } +`; + +const sizeVariantExpand = css` + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +`; + +const sizeVariantAuto = css` + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + max-width: none; + width: auto; +`; -const GridContext = createContext<ResponsiveSize>(toResponsive(12)); +const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12)); -function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize { +function toResponsive( + v: number | Partial<ResponsiveSize>, +): Partial<ResponsiveSize> { const p = typeof v === "number" ? { xs: v } : v; - const xs = p.xs || 12; + const xs = p.xs; const sm = p.sm || xs; const md = p.md || sm; const lg = p.lg || md; @@ -174,6 +234,7 @@ export function Grid({ const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing); const ssize = toResponsive({ xs, md, lg, xl, sm } as any); + console.log(ssize); if (container) { console.log(rowSpacing); @@ -197,23 +258,51 @@ export function Grid({ const relationStyles = !item ? {} : { + "--relation-col-vs-xs": relation(columns, ssize, "xs"), "--relation-col-vs-sm": relation(columns, ssize, "sm"), + "--relation-col-vs-md": relation(columns, ssize, "md"), "--relation-col-vs-lg": relation(columns, ssize, "lg"), - "--relation-col-vs-xs": relation(columns, ssize, "xs"), "--relation-col-vs-xl": relation(columns, ssize, "xl"), - "--relation-col-vs-md": relation(columns, ssize, "md"), }; return ( <GridContext.Provider value={columns}> <div - id={container ? "container" : "item"} class={[ root, container && containerStyle, item && itemStyle, zeroMinWidth && zeroMinWidthStyle, - sizeVariant, + xs && + (xs === "auto" + ? sizeVariantAuto + : xs === "true" + ? sizeVariantExpand + : sizeVariantXS), + sm && + (sm === "auto" + ? sizeVariantAuto + : sm === "true" + ? sizeVariantExpand + : sizeVariantSM), + md && + (md === "auto" + ? sizeVariantAuto + : md === "true" + ? sizeVariantExpand + : sizeVariantMD), + lg && + (lg === "auto" + ? sizeVariantAuto + : lg === "true" + ? sizeVariantExpand + : sizeVariantLG), + xl && + (xl === "auto" + ? sizeVariantAuto + : xl === "true" + ? sizeVariantExpand + : sizeVariantXL), container && columnGapVariant, container && rowGapVariant, ].join(" ")} @@ -222,6 +311,7 @@ export function Grid({ ...spacingStyles, justifyContent, alignItems, + flexWrap: wrap, }} > {children} @@ -230,8 +320,8 @@ export function Grid({ ); } function relation( - cols: ResponsiveSize, - values: ResponsiveSize, + cols: Partial<ResponsiveSize>, + values: Partial<ResponsiveSize>, size: ResponsiveKeys, ) { const colsNum = typeof cols === "number" ? cols : cols[size] || 12; |