Clean grip props
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,93 @@
|
||||
/*
|
||||
* Copyright 2025 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
|
||||
|
||||
const columnsValues = [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'auto',
|
||||
] as const;
|
||||
|
||||
/** @public */
|
||||
const gridPropDefs = {
|
||||
columns: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-columns',
|
||||
customProperties: ['--columns'],
|
||||
values: columnsValues,
|
||||
responsive: true,
|
||||
default: 'auto',
|
||||
},
|
||||
} satisfies {
|
||||
columns: PropDef<(typeof columnsValues)[number]>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
const gridItemPropDefs = {
|
||||
colSpan: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-col-span',
|
||||
customProperties: ['--col-span'],
|
||||
values: columnsValues,
|
||||
responsive: true,
|
||||
},
|
||||
colEnd: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-col-end',
|
||||
customProperties: ['--col-end'],
|
||||
values: columnsValues,
|
||||
responsive: true,
|
||||
},
|
||||
colStart: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-col-start',
|
||||
customProperties: ['--col-start'],
|
||||
values: columnsValues,
|
||||
responsive: true,
|
||||
},
|
||||
rowSpan: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-row-span',
|
||||
customProperties: ['--row-span'],
|
||||
values: columnsValues,
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
colSpan: PropDef<(typeof columnsValues)[number]>;
|
||||
colEnd: PropDef<(typeof columnsValues)[number]>;
|
||||
colStart: PropDef<(typeof columnsValues)[number]>;
|
||||
rowSpan: PropDef<(typeof columnsValues)[number]>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
|
||||
|
||||
/** @public */
|
||||
type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
|
||||
|
||||
export { gridPropDefs, gridItemPropDefs };
|
||||
export type { GridOwnProps, GridItemOwnProps };
|
||||
@@ -33,7 +33,7 @@ const meta = {
|
||||
},
|
||||
},
|
||||
args: {
|
||||
gap: 'xs',
|
||||
gap: '4',
|
||||
},
|
||||
} satisfies Meta<typeof Grid>;
|
||||
|
||||
@@ -66,7 +66,7 @@ export const Default: Story = {
|
||||
|
||||
export const LargeGap: Story = {
|
||||
args: {
|
||||
gap: 'lg',
|
||||
gap: '64px',
|
||||
},
|
||||
render: args => (
|
||||
<Grid {...args}>
|
||||
@@ -79,17 +79,16 @@ export const LargeGap: Story = {
|
||||
|
||||
export const ColumnSizes: Story = {
|
||||
args: {
|
||||
columns: 12,
|
||||
gap: 'md',
|
||||
columns: '12',
|
||||
},
|
||||
render: args => (
|
||||
<Stack gap="md">
|
||||
<Stack gap="4">
|
||||
{Array.from({ length: 11 }, (_, i) => (
|
||||
<Grid {...args} key={i}>
|
||||
<Grid.Item colSpan={(i + 1) as GridItemProps['colSpan']}>
|
||||
<Grid.Item colSpan={String(i + 1) as GridItemProps['colSpan']}>
|
||||
<FakeBox />
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={(11 - i) as GridItemProps['colSpan']}>
|
||||
<Grid.Item colSpan={String(11 - i) as GridItemProps['colSpan']}>
|
||||
<FakeBox />
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
@@ -100,13 +99,12 @@ export const ColumnSizes: Story = {
|
||||
|
||||
export const RowAndColumns: Story = {
|
||||
args: {
|
||||
columns: 12,
|
||||
gap: 'md',
|
||||
columns: '12',
|
||||
},
|
||||
render: args => (
|
||||
<Stack gap="md">
|
||||
<Grid {...args} columns={3}>
|
||||
<Grid.Item colSpan={1} rowSpan={2}>
|
||||
<Grid {...args} columns="3">
|
||||
<Grid.Item colSpan="1" rowSpan="2">
|
||||
<Box
|
||||
style={{
|
||||
height: '100%',
|
||||
@@ -118,10 +116,10 @@ export const RowAndColumns: Story = {
|
||||
}}
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={2}>
|
||||
<Grid.Item colSpan="2">
|
||||
<FakeBox />
|
||||
</Grid.Item>
|
||||
<Grid.Item colSpan={2}>
|
||||
<Grid.Item colSpan="2">
|
||||
<FakeBox />
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
|
||||
@@ -15,40 +15,40 @@
|
||||
*/
|
||||
|
||||
import { createElement, forwardRef } from 'react';
|
||||
import { GridItemProps, GridProps } from './types';
|
||||
import { getClassNames } from '../../utils/getClassNames';
|
||||
import { gapPropDefs } from '../../props/gap-props';
|
||||
import { extractProps } from '../../utils/extractProps';
|
||||
import { gridItemPropDefs, gridPropDefs } from './Grid.props';
|
||||
import clsx from 'clsx';
|
||||
import type { GridItemProps, GridProps } from './types';
|
||||
|
||||
const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
|
||||
const {
|
||||
children,
|
||||
gap = 'xs',
|
||||
columns = 'auto',
|
||||
className,
|
||||
style,
|
||||
...restProps
|
||||
} = props;
|
||||
const propDefs = {
|
||||
...gapPropDefs,
|
||||
...gridPropDefs,
|
||||
};
|
||||
|
||||
const utilityClassNames = getClassNames({ gap, columns, ...restProps });
|
||||
const { className, style } = extractProps(props, propDefs);
|
||||
|
||||
return createElement('div', {
|
||||
ref,
|
||||
className: clsx('canon-Grid', utilityClassNames, className),
|
||||
className: clsx('canon-Grid', className),
|
||||
style,
|
||||
children,
|
||||
children: props.children,
|
||||
});
|
||||
});
|
||||
|
||||
const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
|
||||
const { children, className, style, ...restProps } = props;
|
||||
const propDefs = {
|
||||
...gridItemPropDefs,
|
||||
};
|
||||
|
||||
const utilityClassNames = getClassNames(restProps);
|
||||
const { className, style } = extractProps(props, propDefs);
|
||||
|
||||
return createElement('div', {
|
||||
ref,
|
||||
className: clsx('canon-GridItem', utilityClassNames, className),
|
||||
className: clsx('canon-GridItem', className),
|
||||
style,
|
||||
children,
|
||||
children: props.children,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -14,24 +14,26 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { UtilityProps, SpaceProps } from '../../types';
|
||||
import type { GapProps } from '../../props/gap-props';
|
||||
import type { SpaceProps } from '../../types';
|
||||
import type { GridItemOwnProps, GridOwnProps } from './Grid.props';
|
||||
|
||||
/** @public */
|
||||
export interface GridProps extends SpaceProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
columns?: UtilityProps['columns'];
|
||||
gap?: UtilityProps['gap'];
|
||||
columns?: GridOwnProps['columns'];
|
||||
gap?: GapProps['gap'];
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export interface GridItemProps {
|
||||
children: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
colSpan?: UtilityProps['colSpan'];
|
||||
colEnd?: UtilityProps['colEnd'];
|
||||
colStart?: UtilityProps['colStart'];
|
||||
rowSpan?: UtilityProps['rowSpan'];
|
||||
colSpan?: GridItemOwnProps['colSpan'];
|
||||
colEnd?: GridItemOwnProps['colEnd'];
|
||||
colStart?: GridItemOwnProps['colStart'];
|
||||
rowSpan?: GridItemOwnProps['rowSpan'];
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
@@ -61,3 +61,9 @@
|
||||
|
||||
/* Position */
|
||||
@import './utilities/position.css';
|
||||
|
||||
/* Grid */
|
||||
@import './utilities/grid.css';
|
||||
|
||||
/* Gap */
|
||||
@import './utilities/gap.css';
|
||||
|
||||
@@ -49,170 +49,6 @@
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-1 {
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-10 {
|
||||
grid-column-end: 10;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-11 {
|
||||
grid-column-end: 11;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-12 {
|
||||
grid-column-end: 12;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-13 {
|
||||
grid-column-end: 13;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-7 {
|
||||
grid-column-end: 7;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-8 {
|
||||
grid-column-end: 8;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-9 {
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
.cu-2xl-col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-11 {
|
||||
grid-column: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-12 {
|
||||
grid-column: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-2xl-col-span-auto {
|
||||
grid-column: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-10 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-11 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-12 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-13 {
|
||||
grid-column-start: 13;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-7 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-8 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-9 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.cu-2xl-col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.cu-2xl-flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -237,90 +73,6 @@
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-2xl-gap-2xl {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-lg {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-md {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-gap-sm {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-xl {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-gap-xs {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-10 {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-11 {
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-12 {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-grid-cols-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-2xl-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -405,58 +157,6 @@
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-1 {
|
||||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-11 {
|
||||
grid-row: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-12 {
|
||||
grid-row: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-2xl-row-span-auto {
|
||||
grid-row: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-2xl-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-gap {
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
.cu-gap-0\.5 {
|
||||
gap: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-gap-1 {
|
||||
gap: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-gap-1\.5 {
|
||||
gap: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-gap-2 {
|
||||
gap: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-gap-3 {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-gap-4 {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-gap-5 {
|
||||
gap: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-gap-6 {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-gap-7 {
|
||||
gap: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-gap-8 {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-gap-9 {
|
||||
gap: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-gap-10 {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-gap-11 {
|
||||
gap: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-gap-12 {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-gap-13 {
|
||||
gap: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-gap-14 {
|
||||
gap: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-gap {
|
||||
gap: var(--gap-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-0\.5 {
|
||||
gap: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-1 {
|
||||
gap: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-1\.5 {
|
||||
gap: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-2 {
|
||||
gap: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-3 {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-4 {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-5 {
|
||||
gap: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-6 {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-7 {
|
||||
gap: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-8 {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-9 {
|
||||
gap: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-10 {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-11 {
|
||||
gap: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-12 {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-13 {
|
||||
gap: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-gap-14 {
|
||||
gap: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-gap {
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-0\.5 {
|
||||
gap: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-1 {
|
||||
gap: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-1\.5 {
|
||||
gap: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-2 {
|
||||
gap: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-3 {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-4 {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-5 {
|
||||
gap: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-6 {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-7 {
|
||||
gap: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-8 {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-9 {
|
||||
gap: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-10 {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-11 {
|
||||
gap: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-12 {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-13 {
|
||||
gap: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-gap-14 {
|
||||
gap: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-gap {
|
||||
gap: var(--gap-md);
|
||||
}
|
||||
|
||||
.md\:cu-gap-0\.5 {
|
||||
gap: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-gap-1 {
|
||||
gap: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-gap-1\.5 {
|
||||
gap: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-gap-2 {
|
||||
gap: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-gap-3 {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-gap-4 {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-gap-5 {
|
||||
gap: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-gap-6 {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-gap-7 {
|
||||
gap: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-gap-8 {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-gap-9 {
|
||||
gap: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-gap-10 {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-gap-11 {
|
||||
gap: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-gap-12 {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-gap-13 {
|
||||
gap: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-gap-14 {
|
||||
gap: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-gap {
|
||||
gap: var(--gap-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-0\.5 {
|
||||
gap: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-1 {
|
||||
gap: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-1\.5 {
|
||||
gap: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-2 {
|
||||
gap: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-3 {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-4 {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-5 {
|
||||
gap: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-6 {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-7 {
|
||||
gap: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-8 {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-9 {
|
||||
gap: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-10 {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-11 {
|
||||
gap: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-12 {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-13 {
|
||||
gap: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-gap-14 {
|
||||
gap: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-gap {
|
||||
gap: var(--gap-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-0\.5 {
|
||||
gap: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-1 {
|
||||
gap: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-1\.5 {
|
||||
gap: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-2 {
|
||||
gap: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-3 {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-4 {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-5 {
|
||||
gap: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-6 {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-7 {
|
||||
gap: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-8 {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-9 {
|
||||
gap: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-10 {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-11 {
|
||||
gap: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-12 {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-13 {
|
||||
gap: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-gap-14 {
|
||||
gap: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -49,170 +49,6 @@
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-1 {
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-10 {
|
||||
grid-column-end: 10;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-11 {
|
||||
grid-column-end: 11;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-12 {
|
||||
grid-column-end: 12;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-13 {
|
||||
grid-column-end: 13;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-7 {
|
||||
grid-column-end: 7;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-8 {
|
||||
grid-column-end: 8;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-9 {
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
.cu-lg-col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-11 {
|
||||
grid-column: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-12 {
|
||||
grid-column: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-lg-col-span-auto {
|
||||
grid-column: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-10 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-11 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-12 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-13 {
|
||||
grid-column-start: 13;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-7 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-8 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-9 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.cu-lg-col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.cu-lg-flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -237,90 +73,6 @@
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-lg-gap-2xl {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-gap-lg {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-gap-md {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-lg-gap-sm {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-gap-xl {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-gap-xs {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-10 {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-11 {
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-12 {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-grid-cols-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-lg-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -405,58 +157,6 @@
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-lg-row-span-1 {
|
||||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-11 {
|
||||
grid-row: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-12 {
|
||||
grid-row: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-lg-row-span-auto {
|
||||
grid-row: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-lg-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
@@ -49,170 +49,6 @@
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-col-end-1 {
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.cu-md-col-end-10 {
|
||||
grid-column-end: 10;
|
||||
}
|
||||
|
||||
.cu-md-col-end-11 {
|
||||
grid-column-end: 11;
|
||||
}
|
||||
|
||||
.cu-md-col-end-12 {
|
||||
grid-column-end: 12;
|
||||
}
|
||||
|
||||
.cu-md-col-end-13 {
|
||||
grid-column-end: 13;
|
||||
}
|
||||
|
||||
.cu-md-col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.cu-md-col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.cu-md-col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.cu-md-col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.cu-md-col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.cu-md-col-end-7 {
|
||||
grid-column-end: 7;
|
||||
}
|
||||
|
||||
.cu-md-col-end-8 {
|
||||
grid-column-end: 8;
|
||||
}
|
||||
|
||||
.cu-md-col-end-9 {
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
.cu-md-col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.cu-md-col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-md-col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-md-col-span-11 {
|
||||
grid-column: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-md-col-span-12 {
|
||||
grid-column: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-md-col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-md-col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-md-col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-md-col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-md-col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-md-col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-md-col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-md-col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-md-col-span-auto {
|
||||
grid-column: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-md-col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.cu-md-col-start-10 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.cu-md-col-start-11 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.cu-md-col-start-12 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
.cu-md-col-start-13 {
|
||||
grid-column-start: 13;
|
||||
}
|
||||
|
||||
.cu-md-col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.cu-md-col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.cu-md-col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.cu-md-col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.cu-md-col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.cu-md-col-start-7 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.cu-md-col-start-8 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.cu-md-col-start-9 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.cu-md-col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.cu-md-flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -237,90 +73,6 @@
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-md-gap-2xl {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-gap-lg {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-gap-md {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-md-gap-sm {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-gap-xl {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-gap-xs {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-10 {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-11 {
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-12 {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-grid-cols-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-md-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -405,58 +157,6 @@
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-md-row-span-1 {
|
||||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-md-row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-md-row-span-11 {
|
||||
grid-row: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-md-row-span-12 {
|
||||
grid-row: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-md-row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-md-row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-md-row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-md-row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-md-row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-md-row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-md-row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-md-row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-md-row-span-auto {
|
||||
grid-row: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-md-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
@@ -49,170 +49,6 @@
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-1 {
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-10 {
|
||||
grid-column-end: 10;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-11 {
|
||||
grid-column-end: 11;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-12 {
|
||||
grid-column-end: 12;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-13 {
|
||||
grid-column-end: 13;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-7 {
|
||||
grid-column-end: 7;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-8 {
|
||||
grid-column-end: 8;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-9 {
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
.cu-sm-col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-11 {
|
||||
grid-column: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-12 {
|
||||
grid-column: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-sm-col-span-auto {
|
||||
grid-column: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-10 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-11 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-12 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-13 {
|
||||
grid-column-start: 13;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-7 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-8 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-9 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.cu-sm-col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.cu-sm-flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -265,62 +101,6 @@
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-10 {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-11 {
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-12 {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-grid-cols-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-sm-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -405,58 +185,6 @@
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-sm-row-span-1 {
|
||||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-11 {
|
||||
grid-row: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-12 {
|
||||
grid-row: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-sm-row-span-auto {
|
||||
grid-row: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-sm-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
@@ -49,170 +49,6 @@
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-1 {
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-10 {
|
||||
grid-column-end: 10;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-11 {
|
||||
grid-column-end: 11;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-12 {
|
||||
grid-column-end: 12;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-13 {
|
||||
grid-column-end: 13;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-7 {
|
||||
grid-column-end: 7;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-8 {
|
||||
grid-column-end: 8;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-9 {
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
.cu-xl-col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-11 {
|
||||
grid-column: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-12 {
|
||||
grid-column: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-xl-col-span-auto {
|
||||
grid-column: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-10 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-11 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-12 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-13 {
|
||||
grid-column-start: 13;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-7 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-8 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-9 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.cu-xl-col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.cu-xl-flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -237,90 +73,6 @@
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-xl-gap-2xl {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-gap-lg {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-gap-md {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-xl-gap-sm {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-gap-xl {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-gap-xs {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-10 {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-11 {
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-12 {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-grid-cols-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-xl-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -405,58 +157,6 @@
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-xl-row-span-1 {
|
||||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-11 {
|
||||
grid-row: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-12 {
|
||||
grid-row: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-xl-row-span-auto {
|
||||
grid-row: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-xl-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
@@ -48,170 +48,6 @@
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-col-end-1 {
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.cu-col-end-10 {
|
||||
grid-column-end: 10;
|
||||
}
|
||||
|
||||
.cu-col-end-11 {
|
||||
grid-column-end: 11;
|
||||
}
|
||||
|
||||
.cu-col-end-12 {
|
||||
grid-column-end: 12;
|
||||
}
|
||||
|
||||
.cu-col-end-13 {
|
||||
grid-column-end: 13;
|
||||
}
|
||||
|
||||
.cu-col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.cu-col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.cu-col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.cu-col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.cu-col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.cu-col-end-7 {
|
||||
grid-column-end: 7;
|
||||
}
|
||||
|
||||
.cu-col-end-8 {
|
||||
grid-column-end: 8;
|
||||
}
|
||||
|
||||
.cu-col-end-9 {
|
||||
grid-column-end: 9;
|
||||
}
|
||||
|
||||
.cu-col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.cu-col-span-1 {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-col-span-11 {
|
||||
grid-column: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-col-span-12 {
|
||||
grid-column: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-col-span-auto {
|
||||
grid-column: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.cu-col-start-10 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.cu-col-start-11 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.cu-col-start-12 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
.cu-col-start-13 {
|
||||
grid-column-start: 13;
|
||||
}
|
||||
|
||||
.cu-col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.cu-col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.cu-col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.cu-col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.cu-col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.cu-col-start-7 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.cu-col-start-8 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.cu-col-start-9 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.cu-col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.cu-flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -236,90 +72,6 @@
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-gap-2xl {
|
||||
gap: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-gap-lg {
|
||||
gap: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-gap-md {
|
||||
gap: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-gap-none {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cu-gap-sm {
|
||||
gap: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-gap-xl {
|
||||
gap: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-gap-xs {
|
||||
gap: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cu-grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-10 {
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-11 {
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-12 {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-grid-cols-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.cu-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -404,58 +156,6 @@
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-row-span-1 {
|
||||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.cu-row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.cu-row-span-11 {
|
||||
grid-row: span 11 / span 11;
|
||||
}
|
||||
|
||||
.cu-row-span-12 {
|
||||
grid-row: span 12 / span 12;
|
||||
}
|
||||
|
||||
.cu-row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.cu-row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.cu-row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.cu-row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.cu-row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
.cu-row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
|
||||
.cu-row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
|
||||
.cu-row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
|
||||
.cu-row-span-auto {
|
||||
grid-row: span auto / span auto;
|
||||
}
|
||||
|
||||
.cu-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
* Copyright 2025 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { PropDef } from './prop-def';
|
||||
import { GetPropDefTypes } from './prop-def';
|
||||
import { spacingValues } from './spacing.props';
|
||||
|
||||
/** @public */
|
||||
const gapPropDefs = {
|
||||
gap: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-gap',
|
||||
customProperties: ['--gap'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
default: '4',
|
||||
},
|
||||
} satisfies {
|
||||
gap: PropDef<(typeof spacingValues)[number]>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type GapProps = GetPropDefTypes<typeof gapPropDefs>;
|
||||
|
||||
export { gapPropDefs };
|
||||
export type { GapProps };
|
||||
@@ -19,4 +19,5 @@ export type { MarginProps, marginPropDefs } from './margin.props';
|
||||
export type { PaddingProps, paddingPropDefs } from './padding.props';
|
||||
export type { PositionProps, positionPropDefs } from './position.props';
|
||||
export type { WidthProps, widthPropDefs } from './width.props';
|
||||
export type { GapProps, gapPropDefs } from './gap-props';
|
||||
export * from './prop-def';
|
||||
|
||||
@@ -27,35 +27,50 @@ export function extractProps(
|
||||
let style: React.CSSProperties = props.style || {};
|
||||
|
||||
for (const key in propDefs) {
|
||||
if (props.hasOwnProperty(key)) {
|
||||
const value = props[key];
|
||||
const propDefsValues = propDefs[key].values;
|
||||
const propDefsCustomProperties = propDefs[key].customProperties;
|
||||
const propDefsClassName = propDefs[key].className;
|
||||
const isResponsive = propDefs[key].responsive;
|
||||
if (key === 'gap') {
|
||||
console.log(key, propDefs[key]);
|
||||
}
|
||||
// Check if the prop is present or has a default value
|
||||
if (
|
||||
!props.hasOwnProperty(key) &&
|
||||
!propDefs[key].hasOwnProperty('default')
|
||||
) {
|
||||
continue; // Skip processing if neither is present
|
||||
}
|
||||
|
||||
const handleValue = (val: any, prefix: string = '') => {
|
||||
if (propDefsValues.includes(val)) {
|
||||
className += ` ${prefix}${propDefsClassName}-${val}`;
|
||||
} else {
|
||||
const customPropertyKey =
|
||||
isResponsive && prefix
|
||||
? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
|
||||
: propDefsCustomProperties;
|
||||
(style as any)[customPropertyKey] = val;
|
||||
className += ` ${prefix}${propDefsClassName}`;
|
||||
}
|
||||
};
|
||||
const value = props.hasOwnProperty(key)
|
||||
? props[key]
|
||||
: propDefs[key].default;
|
||||
const propDefsValues = propDefs[key].values;
|
||||
const propDefsCustomProperties = propDefs[key].customProperties;
|
||||
const propDefsClassName = propDefs[key].className;
|
||||
const isResponsive = propDefs[key].responsive;
|
||||
|
||||
if (isResponsive && typeof value === 'object') {
|
||||
// Handle responsive object values
|
||||
for (const breakpoint in value) {
|
||||
const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
|
||||
handleValue(value[breakpoint], prefix);
|
||||
}
|
||||
if (key === 'gap') {
|
||||
console.log('coco', key, propDefs[key], value);
|
||||
}
|
||||
|
||||
const handleValue = (val: any, prefix: string = '') => {
|
||||
if (propDefsValues.includes(val)) {
|
||||
className += ` ${prefix}${propDefsClassName}-${val}`;
|
||||
} else {
|
||||
handleValue(value);
|
||||
const customPropertyKey =
|
||||
isResponsive && prefix
|
||||
? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
|
||||
: propDefsCustomProperties;
|
||||
(style as any)[customPropertyKey] = val;
|
||||
className += ` ${prefix}${propDefsClassName}`;
|
||||
}
|
||||
};
|
||||
|
||||
if (isResponsive && typeof value === 'object') {
|
||||
// Handle responsive object values
|
||||
for (const breakpoint in value) {
|
||||
const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
|
||||
handleValue(value[breakpoint], prefix);
|
||||
}
|
||||
} else {
|
||||
handleValue(value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user