Merge pull request #28630 from backstage/canon-props-restructure
Canon - Update props structure
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/canon': minor
|
||||
---
|
||||
|
||||
**BREAKING**: Fixing css structure and making sure that props are applying the correct styles for all responsive values.
|
||||
+540
-53
@@ -17,6 +17,13 @@ import { RefAttributes } from 'react';
|
||||
// @public (undocumented)
|
||||
export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
|
||||
|
||||
// @public (undocumented)
|
||||
export type ArbitraryStylingPropDef = {
|
||||
className: string;
|
||||
customProperties: `--${string}`[];
|
||||
parseValue?: (value: string) => string | undefined;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type AsProps =
|
||||
| 'div'
|
||||
@@ -36,6 +43,14 @@ export type AsProps =
|
||||
| 'dl'
|
||||
| 'dt';
|
||||
|
||||
// @public (undocumented)
|
||||
export type BooleanPropDef = {
|
||||
type: 'boolean';
|
||||
default?: boolean;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
|
||||
|
||||
@@ -56,20 +71,51 @@ export const Box: ForwardRefExoticComponent<
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export interface BoxProps extends UtilityProps {
|
||||
export type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const boxPropDefs: {
|
||||
as: {
|
||||
type: 'enum';
|
||||
values: readonly ['div', 'span'];
|
||||
default: 'div';
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export interface BoxProps extends SpaceProps {
|
||||
// (undocumented)
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
as?: BoxOwnProps['as'];
|
||||
// (undocumented)
|
||||
children?: React.ReactNode;
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
display?: DisplayProps['display'];
|
||||
// (undocumented)
|
||||
height?: HeightProps['height'];
|
||||
// (undocumented)
|
||||
maxHeight?: HeightProps['maxHeight'];
|
||||
// (undocumented)
|
||||
maxWidth?: WidthProps['maxWidth'];
|
||||
// (undocumented)
|
||||
minHeight?: HeightProps['minHeight'];
|
||||
// (undocumented)
|
||||
minWidth?: WidthProps['minWidth'];
|
||||
// (undocumented)
|
||||
position?: PositionProps['position'];
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
// (undocumented)
|
||||
width?: WidthProps['width'];
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
// @public (undocumented)
|
||||
export const breakpoints: Breakpoint[];
|
||||
|
||||
// @public (undocumented)
|
||||
export const Button: React_2.ForwardRefExoticComponent<
|
||||
ButtonProps & React_2.RefAttributes<HTMLButtonElement>
|
||||
@@ -149,8 +195,8 @@ export interface CheckboxProps {
|
||||
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
|
||||
|
||||
// @public (undocumented)
|
||||
export const Container: React_2.ForwardRefExoticComponent<
|
||||
ContainerProps & React_2.RefAttributes<HTMLDivElement>
|
||||
export const Container: ForwardRefExoticComponent<
|
||||
ContainerProps & RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
@@ -160,17 +206,17 @@ export interface ContainerProps {
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
marginBottom?: SpaceProps['marginBottom'];
|
||||
mb?: SpaceProps['mb'];
|
||||
// (undocumented)
|
||||
marginTop?: SpaceProps['marginTop'];
|
||||
mt?: SpaceProps['mt'];
|
||||
// (undocumented)
|
||||
marginY?: SpaceProps['marginY'];
|
||||
my?: SpaceProps['my'];
|
||||
// (undocumented)
|
||||
paddingBottom?: SpaceProps['paddingBottom'];
|
||||
pb?: SpaceProps['pb'];
|
||||
// (undocumented)
|
||||
paddingTop?: SpaceProps['paddingTop'];
|
||||
pt?: SpaceProps['pt'];
|
||||
// (undocumented)
|
||||
paddingY?: SpaceProps['paddingY'];
|
||||
py?: SpaceProps['py'];
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
@@ -178,6 +224,35 @@ export interface ContainerProps {
|
||||
// @public (undocumented)
|
||||
export type Display = 'none' | 'flex' | 'block' | 'inline';
|
||||
|
||||
// @public (undocumented)
|
||||
export const displayPropDefs: {
|
||||
display: {
|
||||
type: 'enum';
|
||||
className: string;
|
||||
values: readonly ['none', 'inline', 'inline-block', 'block'];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type DisplayProps = GetPropDefTypes<typeof displayPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type EnumOrStringPropDef<T> = {
|
||||
type: 'enum | string';
|
||||
values: readonly T[];
|
||||
default?: T | string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type EnumPropDef<T> = {
|
||||
type: 'enum';
|
||||
values: readonly T[];
|
||||
default?: T;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export const Field: {
|
||||
Root: React_2.ForwardRefExoticComponent<
|
||||
@@ -214,6 +289,49 @@ export type FlexDirection = 'row' | 'column';
|
||||
// @public (undocumented)
|
||||
export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
|
||||
|
||||
// @public (undocumented)
|
||||
export const gapPropDefs: {
|
||||
gap: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--gap'[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
default: string;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type GapProps = GetPropDefTypes<typeof gapPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type GetPropDefType<Def> = Def extends BooleanPropDef
|
||||
? Def extends ResponsivePropDef
|
||||
? Responsive<boolean>
|
||||
: boolean
|
||||
: Def extends StringPropDef
|
||||
? Def extends ResponsivePropDef
|
||||
? Responsive<string>
|
||||
: string
|
||||
: Def extends ReactNodePropDef
|
||||
? Def extends ResponsivePropDef
|
||||
? Responsive<React_2.ReactNode>
|
||||
: React_2.ReactNode
|
||||
: Def extends EnumOrStringPropDef<infer Type>
|
||||
? Def extends ResponsivePropDef<infer Type extends string>
|
||||
? Responsive<string | Type>
|
||||
: string | Type
|
||||
: Def extends EnumPropDef<infer Type>
|
||||
? Def extends ResponsivePropDef<infer Type>
|
||||
? Responsive<Type>
|
||||
: Type
|
||||
: never;
|
||||
|
||||
// @public (undocumented)
|
||||
export type GetPropDefTypes<P> = {
|
||||
[K in keyof P]?: GetPropDefType<P[K]>;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export const Grid: ForwardRefExoticComponent<
|
||||
GridProps & RefAttributes<HTMLDivElement>
|
||||
@@ -223,24 +341,144 @@ export const Grid: ForwardRefExoticComponent<
|
||||
>;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const gridItemPropDefs: {
|
||||
colSpan: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--col-span'[];
|
||||
values: readonly [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'auto',
|
||||
];
|
||||
responsive: true;
|
||||
};
|
||||
colEnd: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--col-end'[];
|
||||
values: readonly [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'auto',
|
||||
];
|
||||
responsive: true;
|
||||
};
|
||||
colStart: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--col-start'[];
|
||||
values: readonly [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'auto',
|
||||
];
|
||||
responsive: true;
|
||||
};
|
||||
rowSpan: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--row-span'[];
|
||||
values: readonly [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'auto',
|
||||
];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export interface GridItemProps {
|
||||
// (undocumented)
|
||||
children: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
colEnd?: UtilityProps['colEnd'];
|
||||
colEnd?: GridItemOwnProps['colEnd'];
|
||||
// (undocumented)
|
||||
colSpan?: UtilityProps['colSpan'];
|
||||
colSpan?: GridItemOwnProps['colSpan'];
|
||||
// (undocumented)
|
||||
colStart?: UtilityProps['colStart'];
|
||||
colStart?: GridItemOwnProps['colStart'];
|
||||
// (undocumented)
|
||||
rowSpan?: UtilityProps['rowSpan'];
|
||||
rowSpan?: GridItemOwnProps['rowSpan'];
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const gridPropDefs: {
|
||||
columns: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--columns'[];
|
||||
values: readonly [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'auto',
|
||||
];
|
||||
responsive: true;
|
||||
default: string;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export interface GridProps extends SpaceProps {
|
||||
// (undocumented)
|
||||
@@ -248,9 +486,9 @@ export interface GridProps extends SpaceProps {
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
columns?: UtilityProps['columns'];
|
||||
columns?: GridOwnProps['columns'];
|
||||
// (undocumented)
|
||||
gap?: UtilityProps['gap'];
|
||||
gap?: GapProps['gap'];
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
@@ -286,6 +524,31 @@ export interface HeadingProps {
|
||||
>;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export const heightPropDefs: {
|
||||
height: {
|
||||
type: 'string';
|
||||
className: string;
|
||||
customProperties: '--height'[];
|
||||
responsive: true;
|
||||
};
|
||||
minHeight: {
|
||||
type: 'string';
|
||||
className: string;
|
||||
customProperties: '--min-height'[];
|
||||
responsive: true;
|
||||
};
|
||||
maxHeight: {
|
||||
type: 'string';
|
||||
className: string;
|
||||
customProperties: '--max-height'[];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const Icon: (props: IconProps) => React_2.JSX.Element;
|
||||
|
||||
@@ -378,38 +641,216 @@ export type JustifyContent =
|
||||
| 'between';
|
||||
|
||||
// @public (undocumented)
|
||||
export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
export const marginPropDefs: (spacingValues: string[]) => {
|
||||
m: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: '--m'[];
|
||||
responsive: true;
|
||||
};
|
||||
mx: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: ('--ml' | '--mr')[];
|
||||
responsive: true;
|
||||
};
|
||||
my: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: ('--mt' | '--mb')[];
|
||||
responsive: true;
|
||||
};
|
||||
mt: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: '--mt'[];
|
||||
responsive: true;
|
||||
};
|
||||
mr: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: '--mr'[];
|
||||
responsive: true;
|
||||
};
|
||||
mb: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: '--mb'[];
|
||||
responsive: true;
|
||||
};
|
||||
ml: {
|
||||
type: 'enum | string';
|
||||
values: string[];
|
||||
className: string;
|
||||
customProperties: '--ml'[];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type NonStylingPropDef = {
|
||||
className?: never;
|
||||
customProperties?: never;
|
||||
parseValue?: never;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export const paddingPropDefs: (spacingValues: string[]) => {
|
||||
p: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--p'[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
px: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: ('--pl' | '--pr')[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
py: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: ('--pt' | '--pb')[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
pt: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--pt'[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
pr: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--pr'[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
pb: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--pb'[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
pl: {
|
||||
type: 'enum | string';
|
||||
className: string;
|
||||
customProperties: '--pl'[];
|
||||
values: string[];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const positionPropDefs: {
|
||||
position: {
|
||||
type: 'enum';
|
||||
className: string;
|
||||
values: readonly ['static', 'relative', 'absolute', 'fixed', 'sticky'];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type ReactNodePropDef = {
|
||||
type: 'ReactNode';
|
||||
default?: React_2.ReactNode;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type RegularPropDef<T> =
|
||||
| ReactNodePropDef
|
||||
| BooleanPropDef
|
||||
| (StringPropDef & ArbitraryStylingPropDef)
|
||||
| (StringPropDef & NonStylingPropDef)
|
||||
| (EnumPropDef<T> & StylingPropDef)
|
||||
| (EnumPropDef<T> & NonStylingPropDef)
|
||||
| (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
|
||||
| (EnumOrStringPropDef<T> & NonStylingPropDef);
|
||||
|
||||
// @public (undocumented)
|
||||
export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type ResponsivePropDef<T = any> = RegularPropDef<T> & {
|
||||
responsive: true;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type Space =
|
||||
| '0.5'
|
||||
| '1'
|
||||
| '1.5'
|
||||
| '2'
|
||||
| '3'
|
||||
| '4'
|
||||
| '5'
|
||||
| '6'
|
||||
| '7'
|
||||
| '8'
|
||||
| '9'
|
||||
| '10'
|
||||
| '11'
|
||||
| '12'
|
||||
| '13'
|
||||
| '14'
|
||||
| string;
|
||||
|
||||
// @public (undocumented)
|
||||
export interface SpaceProps {
|
||||
// (undocumented)
|
||||
margin?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
m?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
mb?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
ml?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
marginRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
mr?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
marginTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
mt?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
marginX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
mx?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
marginY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
my?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
padding?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
p?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
pb?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
pl?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
pr?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
pt?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
px?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
py?: Responsive<Space>;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
@@ -417,26 +858,47 @@ export const Stack: ForwardRefExoticComponent<
|
||||
StackProps & RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const stackPropDefs: {
|
||||
align: {
|
||||
type: 'enum';
|
||||
className: string;
|
||||
values: readonly ['start', 'center', 'end', 'baseline', 'stretch'];
|
||||
responsive: true;
|
||||
default: 'stretch';
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export interface StackProps extends SpaceProps {
|
||||
// (undocumented)
|
||||
align?:
|
||||
| 'left'
|
||||
| 'center'
|
||||
| 'right'
|
||||
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
|
||||
// (undocumented)
|
||||
as?: AsProps;
|
||||
align?: StackOwnProps['align'];
|
||||
// (undocumented)
|
||||
children: React.ReactNode;
|
||||
// (undocumented)
|
||||
className?: string;
|
||||
// (undocumented)
|
||||
gap?: UtilityProps['gap'];
|
||||
gap?: GapProps['gap'];
|
||||
// (undocumented)
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type StringPropDef = {
|
||||
type: 'string';
|
||||
default?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type StylingPropDef = {
|
||||
className: string;
|
||||
parseValue?: (value: string) => string | undefined;
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export const Table: React_3.ForwardRefExoticComponent<
|
||||
React_3.HTMLAttributes<HTMLTableElement> &
|
||||
@@ -510,30 +972,55 @@ export const useCanon: () => CanonContextProps;
|
||||
// @public (undocumented)
|
||||
export interface UtilityProps extends SpaceProps {
|
||||
// (undocumented)
|
||||
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
|
||||
alignItems?: Responsive<AlignItems>;
|
||||
// (undocumented)
|
||||
border?: Border | Partial<Record<Breakpoint, Border>>;
|
||||
border?: Responsive<Border>;
|
||||
// (undocumented)
|
||||
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
|
||||
borderRadius?: Responsive<BorderRadius>;
|
||||
// (undocumented)
|
||||
colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
|
||||
colEnd?: Responsive<Columns | 'auto'>;
|
||||
// (undocumented)
|
||||
colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
|
||||
colSpan?: Responsive<Columns | 'full'>;
|
||||
// (undocumented)
|
||||
colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
|
||||
colStart?: Responsive<Columns | 'auto'>;
|
||||
// (undocumented)
|
||||
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
|
||||
columns?: Responsive<Columns>;
|
||||
// (undocumented)
|
||||
display?: Display | Partial<Record<Breakpoint, Display>>;
|
||||
display?: Responsive<Display>;
|
||||
// (undocumented)
|
||||
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
|
||||
flexDirection?: Responsive<FlexDirection>;
|
||||
// (undocumented)
|
||||
flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
|
||||
flexWrap?: Responsive<FlexWrap>;
|
||||
// (undocumented)
|
||||
gap?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
gap?: Responsive<Space>;
|
||||
// (undocumented)
|
||||
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
|
||||
justifyContent?: Responsive<JustifyContent>;
|
||||
// (undocumented)
|
||||
rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
|
||||
rowSpan?: Responsive<Columns | 'full'>;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export const widthPropDefs: {
|
||||
width: {
|
||||
type: 'string';
|
||||
className: string;
|
||||
customProperties: '--width'[];
|
||||
responsive: true;
|
||||
};
|
||||
minWidth: {
|
||||
type: 'string';
|
||||
className: string;
|
||||
customProperties: '--min-width'[];
|
||||
responsive: true;
|
||||
};
|
||||
maxWidth: {
|
||||
type: 'string';
|
||||
className: string;
|
||||
customProperties: '--max-width'[];
|
||||
responsive: true;
|
||||
};
|
||||
};
|
||||
|
||||
// @public (undocumented)
|
||||
export type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
|
||||
```
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/*
|
||||
* 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 as = ['div', 'span'] as const;
|
||||
|
||||
/** @public */
|
||||
const boxPropDefs = {
|
||||
as: { type: 'enum', values: as, default: 'div' },
|
||||
} satisfies {
|
||||
as: PropDef<(typeof as)[number]>;
|
||||
};
|
||||
|
||||
// Use all of the imported prop defs to ensure that JSDoc works
|
||||
/** @public */
|
||||
type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
|
||||
|
||||
export { boxPropDefs };
|
||||
export type { BoxOwnProps };
|
||||
@@ -23,9 +23,6 @@ import { Inline } from '../Inline';
|
||||
const meta = {
|
||||
title: 'Components/Box',
|
||||
component: Box,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
as: {
|
||||
control: { type: 'select' },
|
||||
@@ -40,159 +37,64 @@ const meta = {
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const Card = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
background: '#eaf2fd',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #2563eb',
|
||||
color: '#2563eb',
|
||||
backgroundImage:
|
||||
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
style: {
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
background: '#eaf2fd',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #2563eb',
|
||||
color: '#2563eb',
|
||||
backgroundImage:
|
||||
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
|
||||
},
|
||||
children: <Card />,
|
||||
display: 'inline',
|
||||
},
|
||||
};
|
||||
|
||||
const CardDisplay = ({ children }: { children?: React.ReactNode }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
background: '#eaf2fd',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #2563eb',
|
||||
color: '#2563eb',
|
||||
backgroundImage:
|
||||
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Display: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Default.args?.style,
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
padding: '8px',
|
||||
},
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center">
|
||||
<Inline>
|
||||
<Box display="block" {...args}>
|
||||
Block
|
||||
</Box>
|
||||
<Box display="flex" {...args}>
|
||||
Flex
|
||||
<CardDisplay>Block</CardDisplay>
|
||||
</Box>
|
||||
<Box display="inline" {...args}>
|
||||
Inline
|
||||
<CardDisplay>Inline</CardDisplay>
|
||||
</Box>
|
||||
<Box display="none" {...args}>
|
||||
None
|
||||
<CardDisplay>None</CardDisplay>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Box display={{ xs: 'block', sm: 'flex', md: 'inline' }} {...args}>
|
||||
Responsive
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const FlexDirection: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Default.args?.style,
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
padding: '8px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center">
|
||||
<Box flexDirection="row" {...args}>
|
||||
<span>Row</span>
|
||||
<span>Row</span>
|
||||
</Box>
|
||||
<Box flexDirection="column" {...args}>
|
||||
<span>Column</span>
|
||||
<span>Column</span>
|
||||
</Box>
|
||||
<Box flexDirection={{ xs: 'column', sm: 'row' }} {...args}>
|
||||
<span>Responsive</span>
|
||||
<span>Flex Direction</span>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const JustifyContent: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Default.args?.style,
|
||||
width: '200px',
|
||||
height: 'auto',
|
||||
padding: '8px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack>
|
||||
<Box justifyContent="start" {...args}>
|
||||
<span>Flex Start</span>
|
||||
</Box>
|
||||
<Box justifyContent="center" {...args}>
|
||||
<span>Center</span>
|
||||
</Box>
|
||||
<Box justifyContent="end" {...args}>
|
||||
<span>Flex End</span>
|
||||
</Box>
|
||||
<Box justifyContent="around" {...args}>
|
||||
<span>Space</span>
|
||||
<span>Around</span>
|
||||
</Box>
|
||||
<Box justifyContent="between" {...args}>
|
||||
<span>Space</span>
|
||||
<span>Between</span>
|
||||
</Box>
|
||||
<Box
|
||||
justifyContent={{
|
||||
xs: 'between',
|
||||
sm: 'around',
|
||||
md: 'start',
|
||||
}}
|
||||
{...args}
|
||||
>
|
||||
<span>Responsive</span>
|
||||
<span>Spacing</span>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const AlignItems: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Default.args?.style,
|
||||
width: '200px',
|
||||
height: '100px',
|
||||
padding: '8px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack>
|
||||
<Box alignItems="start" {...args}>
|
||||
<span>Flex Start</span>
|
||||
</Box>
|
||||
<Box alignItems="center" {...args}>
|
||||
<span>Center</span>
|
||||
</Box>
|
||||
<Box alignItems="end" {...args}>
|
||||
<span>Flex End</span>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems={{
|
||||
xs: 'start',
|
||||
sm: 'center',
|
||||
md: 'end',
|
||||
}}
|
||||
{...args}
|
||||
>
|
||||
<span>Responsive</span>
|
||||
<span>Spacing</span>
|
||||
<Box display={{ initial: 'block', md: 'inline' }} {...args}>
|
||||
<CardDisplay>Responsive</CardDisplay>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
@@ -216,27 +118,27 @@ export const Padding: Story = {
|
||||
render: args => (
|
||||
<Stack align="center" gap="md">
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box padding="md" style={styleInsideBox}>
|
||||
<Box p="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding</Box>
|
||||
</Box>
|
||||
<Box paddingX="md" style={styleInsideBox}>
|
||||
<Box px="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding X</Box>
|
||||
</Box>
|
||||
<Box paddingY="md" style={styleInsideBox}>
|
||||
<Box py="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Y</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box paddingTop="md" style={styleInsideBox}>
|
||||
<Box pt="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Top</Box>
|
||||
</Box>
|
||||
<Box paddingRight="md" style={styleInsideBox}>
|
||||
<Box pr="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Right</Box>
|
||||
</Box>
|
||||
<Box paddingBottom="md" style={styleInsideBox}>
|
||||
<Box pb="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Bottom</Box>
|
||||
</Box>
|
||||
<Box paddingLeft="md" style={styleInsideBox}>
|
||||
<Box pl="3" style={styleInsideBox}>
|
||||
<Box {...args}>Padding Left</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
@@ -257,39 +159,39 @@ export const Margin: Story = {
|
||||
<Stack align="center" gap="md">
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box style={styleInsideBox}>
|
||||
<Box margin="md" {...args}>
|
||||
<Box m="3" {...args}>
|
||||
Margin
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginX="md" {...args}>
|
||||
<Box mx="3" {...args}>
|
||||
Margin X
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginY="md" {...args}>
|
||||
<Box my="3" {...args}>
|
||||
Margin Y
|
||||
</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginTop="md" {...args}>
|
||||
<Box mt="3" {...args}>
|
||||
Margin Top
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginRight="md" {...args}>
|
||||
<Box mr="3" {...args}>
|
||||
Margin Right
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginBottom="md" {...args}>
|
||||
<Box mb="3" {...args}>
|
||||
Margin Bottom
|
||||
</Box>
|
||||
</Box>
|
||||
<Box style={styleInsideBox}>
|
||||
<Box marginLeft="md" {...args}>
|
||||
<Box ml="3" {...args}>
|
||||
Margin Left
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -297,119 +199,3 @@ export const Margin: Story = {
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const FlexWrap: Story = {
|
||||
args: {
|
||||
style: {
|
||||
...Default.args?.style,
|
||||
width: '200px',
|
||||
height: 'auto',
|
||||
padding: '8px',
|
||||
},
|
||||
display: 'flex',
|
||||
gap: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center">
|
||||
<Box flexWrap="wrap" {...args}>
|
||||
<span>One</span>
|
||||
<span>Two</span>
|
||||
<span>Three</span>
|
||||
<span>Four</span>
|
||||
<span>Five</span>
|
||||
<span>Six</span>
|
||||
</Box>
|
||||
<Box flexWrap="nowrap" {...args}>
|
||||
<span>One</span>
|
||||
<span>Two</span>
|
||||
<span>Three</span>
|
||||
<span>Four</span>
|
||||
<span>Five</span>
|
||||
<span>Six</span>
|
||||
</Box>
|
||||
<Box flexWrap="wrap-reverse" {...args}>
|
||||
<span>One</span>
|
||||
<span>Two</span>
|
||||
<span>Three</span>
|
||||
<span>Four</span>
|
||||
<span>Five</span>
|
||||
<span>Six</span>
|
||||
</Box>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
export const BorderRadius: Story = {
|
||||
args: {
|
||||
style: {
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
background: '#eaf2fd',
|
||||
border: '1px solid #2563eb',
|
||||
color: '#2563eb',
|
||||
backgroundImage:
|
||||
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
|
||||
padding: '4px 8px',
|
||||
},
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
render: args => (
|
||||
<Inline align="center">
|
||||
<Box borderRadius="2xs" {...args}>
|
||||
<span>2xs</span>
|
||||
</Box>
|
||||
<Box borderRadius="xs" {...args}>
|
||||
<span>xs</span>
|
||||
</Box>
|
||||
<Box borderRadius="sm" {...args}>
|
||||
<span>sm</span>
|
||||
</Box>
|
||||
<Box borderRadius="md" {...args}>
|
||||
<span>md</span>
|
||||
</Box>
|
||||
<Box borderRadius="xl" {...args}>
|
||||
<span>xl</span>
|
||||
</Box>
|
||||
<Box borderRadius="2xl" {...args}>
|
||||
<span>2xl</span>
|
||||
</Box>
|
||||
</Inline>
|
||||
),
|
||||
};
|
||||
|
||||
export const Border: Story = {
|
||||
args: {
|
||||
style: {
|
||||
background: 'var(--canon-bg-elevated)',
|
||||
color: 'var(--canon-fg-text-primary)',
|
||||
padding: '4px 8px',
|
||||
width: '80px',
|
||||
height: '32px',
|
||||
},
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 'xs',
|
||||
},
|
||||
render: args => (
|
||||
<Inline align="center">
|
||||
<Box border="base" {...args}>
|
||||
Base
|
||||
</Box>
|
||||
<Box border="error" {...args}>
|
||||
Error
|
||||
</Box>
|
||||
<Box border="warning" {...args}>
|
||||
Warning
|
||||
</Box>
|
||||
<Box border="selected" {...args}>
|
||||
Selected
|
||||
</Box>
|
||||
<Box border="none" {...args}>
|
||||
None
|
||||
</Box>
|
||||
</Inline>
|
||||
),
|
||||
};
|
||||
|
||||
@@ -16,23 +16,35 @@
|
||||
|
||||
import { createElement, forwardRef } from 'react';
|
||||
import { BoxProps } from './types';
|
||||
import { getClassNames } from '../../utils/getClassNames';
|
||||
import clsx from 'clsx';
|
||||
import { extractProps } from '../../utils/extractProps';
|
||||
import { spacingPropDefs } from '../../props/spacing.props';
|
||||
import { boxPropDefs } from './Box.props';
|
||||
import { widthPropDefs } from '../../props/width.props';
|
||||
import { heightPropDefs } from '../../props/height.props';
|
||||
import { positionPropDefs } from '../../props/position.props';
|
||||
import { displayPropDefs } from '../../props/display.props';
|
||||
|
||||
/** @public */
|
||||
export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
|
||||
const { as = 'div', className, style, children, ...restProps } = props;
|
||||
const { as = 'div', children } = props;
|
||||
|
||||
// Generate utility class names
|
||||
const utilityClassNames = getClassNames(restProps);
|
||||
|
||||
// Combine the base class name, the sprinkles class name, and any additional class names
|
||||
const classNames = clsx('canon-Box', utilityClassNames, className);
|
||||
const propDefs = {
|
||||
...spacingPropDefs,
|
||||
...widthPropDefs,
|
||||
...heightPropDefs,
|
||||
...positionPropDefs,
|
||||
...displayPropDefs,
|
||||
...boxPropDefs,
|
||||
};
|
||||
const { className, style } = extractProps(props, propDefs);
|
||||
|
||||
return createElement(as, {
|
||||
ref,
|
||||
className: classNames,
|
||||
className: clsx('canon-Box', className),
|
||||
style,
|
||||
children,
|
||||
});
|
||||
});
|
||||
|
||||
Box.displayName = 'Box';
|
||||
|
||||
@@ -15,3 +15,5 @@
|
||||
*/
|
||||
export { Box } from './Box';
|
||||
export type * from './types';
|
||||
export type { BoxOwnProps } from './Box.props';
|
||||
export { boxPropDefs } from './Box.props';
|
||||
|
||||
@@ -14,11 +14,24 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { UtilityProps } from '../../types';
|
||||
import type { HeightProps } from '../../props/height.props';
|
||||
import type { WidthProps } from '../../props/width.props';
|
||||
import type { PositionProps } from '../../props/position.props';
|
||||
import type { DisplayProps } from '../../props/display.props';
|
||||
import type { SpaceProps } from '../../types';
|
||||
import type { BoxOwnProps } from './Box.props';
|
||||
|
||||
/** @public */
|
||||
export interface BoxProps extends UtilityProps {
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
export interface BoxProps extends SpaceProps {
|
||||
display?: DisplayProps['display'];
|
||||
as?: BoxOwnProps['as'];
|
||||
width?: WidthProps['width'];
|
||||
minWidth?: WidthProps['minWidth'];
|
||||
maxWidth?: WidthProps['maxWidth'];
|
||||
height?: HeightProps['height'];
|
||||
minHeight?: HeightProps['minHeight'];
|
||||
maxHeight?: HeightProps['maxHeight'];
|
||||
position?: PositionProps['position'];
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
|
||||
@@ -37,7 +37,6 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
const DecorativeBox = () => (
|
||||
<Box
|
||||
borderRadius="xs"
|
||||
style={{
|
||||
height: '64px',
|
||||
background: '#eaf2fd',
|
||||
|
||||
@@ -13,27 +13,28 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React, { forwardRef } from 'react';
|
||||
|
||||
import { createElement, forwardRef } from 'react';
|
||||
import { ContainerProps } from './types';
|
||||
import { getClassNames } from '../../utils/getClassNames';
|
||||
import clsx from 'clsx';
|
||||
import { displayPropDefs } from '../../props/display.props';
|
||||
import { extractProps } from '../../utils/extractProps';
|
||||
|
||||
/** @public */
|
||||
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
|
||||
(props, ref) => {
|
||||
const { children, className, style, ...restProps } = props;
|
||||
const { children } = props;
|
||||
|
||||
// Generate utility class names
|
||||
const utilityClassNames = getClassNames(restProps);
|
||||
const propDefs = {
|
||||
...displayPropDefs,
|
||||
};
|
||||
const { className, style } = extractProps(props, propDefs);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={clsx('canon-Container', utilityClassNames, className)}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return createElement('div', {
|
||||
ref,
|
||||
className: clsx('canon-Container', className),
|
||||
style,
|
||||
children,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
@@ -19,11 +19,11 @@ import { SpaceProps } from '../../types';
|
||||
export interface ContainerProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
marginY?: SpaceProps['marginY'];
|
||||
marginBottom?: SpaceProps['marginBottom'];
|
||||
marginTop?: SpaceProps['marginTop'];
|
||||
paddingY?: SpaceProps['paddingY'];
|
||||
paddingBottom?: SpaceProps['paddingBottom'];
|
||||
paddingTop?: SpaceProps['paddingTop'];
|
||||
my?: SpaceProps['my'];
|
||||
mb?: SpaceProps['mb'];
|
||||
mt?: SpaceProps['mt'];
|
||||
py?: SpaceProps['py'];
|
||||
pb?: SpaceProps['pb'];
|
||||
pt?: SpaceProps['pt'];
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
@@ -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>;
|
||||
|
||||
@@ -42,7 +42,6 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
const FakeBox = () => (
|
||||
<Box
|
||||
borderRadius="xs"
|
||||
style={{
|
||||
background: '#eaf2fd',
|
||||
borderRadius: '4px',
|
||||
@@ -67,7 +66,7 @@ export const Default: Story = {
|
||||
|
||||
export const LargeGap: Story = {
|
||||
args: {
|
||||
gap: 'lg',
|
||||
gap: '64px',
|
||||
},
|
||||
render: args => (
|
||||
<Grid {...args}>
|
||||
@@ -80,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>
|
||||
@@ -101,15 +99,13 @@ 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
|
||||
borderRadius="xs"
|
||||
style={{
|
||||
height: '100%',
|
||||
background: '#eaf2fd',
|
||||
@@ -120,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,4 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
export { Grid } from './Grid';
|
||||
export { gridPropDefs, gridItemPropDefs } from './Grid.props';
|
||||
export type { GridProps, GridItemProps } from './types';
|
||||
export type { GridOwnProps, GridItemOwnProps } from './Grid.props';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@ const FakeBox = ({
|
||||
height?: number;
|
||||
}) => (
|
||||
<Box
|
||||
borderRadius="xs"
|
||||
style={{
|
||||
background: '#eaf2fd',
|
||||
borderRadius: '4px',
|
||||
|
||||
@@ -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 type { PropDef, GetPropDefTypes } from '../../props/prop-def';
|
||||
|
||||
const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
|
||||
|
||||
/** @public */
|
||||
const stackPropDefs = {
|
||||
align: {
|
||||
type: 'enum',
|
||||
className: 'cu-align',
|
||||
values: alignValues,
|
||||
responsive: true,
|
||||
default: 'stretch',
|
||||
},
|
||||
} satisfies {
|
||||
align: PropDef<(typeof alignValues)[number]>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
|
||||
|
||||
export { stackPropDefs };
|
||||
export type { StackOwnProps };
|
||||
@@ -29,16 +29,13 @@ const meta = {
|
||||
children: {
|
||||
control: false,
|
||||
},
|
||||
as: {
|
||||
control: false,
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
align: 'left',
|
||||
gap: 'xs',
|
||||
align: 'stretch',
|
||||
gap: '4',
|
||||
children: 'hello world',
|
||||
},
|
||||
} satisfies Meta<typeof Stack>;
|
||||
@@ -63,20 +60,14 @@ const DecorativeBox = () => {
|
||||
};
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<div style={{ width: '320px' }}>
|
||||
<Stack>
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
</Stack>
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
|
||||
},
|
||||
};
|
||||
|
||||
export const AlignLeft: Story = {
|
||||
render: () => (
|
||||
<Stack align="left">
|
||||
<Stack align="start">
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
@@ -96,7 +87,7 @@ export const AlignCenter: Story = {
|
||||
|
||||
export const AlignRight: Story = {
|
||||
render: () => (
|
||||
<Stack align="right">
|
||||
<Stack align="end">
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
@@ -106,7 +97,7 @@ export const AlignRight: Story = {
|
||||
|
||||
export const ResponsiveAlign: Story = {
|
||||
render: () => (
|
||||
<Stack align={{ xs: 'left', md: 'center', lg: 'right' }}>
|
||||
<Stack align={{ xs: 'start', md: 'center', lg: 'end' }}>
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
@@ -116,7 +107,7 @@ export const ResponsiveAlign: Story = {
|
||||
|
||||
export const ResponsiveGap: Story = {
|
||||
render: () => (
|
||||
<Stack gap={{ xs: 'xs', md: 'md', lg: '2xl' }}>
|
||||
<Stack gap={{ xs: '4', md: '8', lg: '12' }}>
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
@@ -126,7 +117,7 @@ export const ResponsiveGap: Story = {
|
||||
|
||||
export const LargeGap: Story = {
|
||||
render: () => (
|
||||
<Stack gap="xl">
|
||||
<Stack gap="8">
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
<DecorativeBox />
|
||||
|
||||
@@ -16,51 +16,24 @@
|
||||
|
||||
import { createElement, forwardRef } from 'react';
|
||||
import { StackProps } from './types';
|
||||
import { getClassNames } from '../../utils/getClassNames';
|
||||
import type { AlignItems, Breakpoint } from '../../types';
|
||||
import clsx from 'clsx';
|
||||
|
||||
// Function to map align values
|
||||
const mapAlignValue = (value?: StackProps['align']) => {
|
||||
if (typeof value === 'string') {
|
||||
let returnedValue: AlignItems = 'stretch';
|
||||
if (value === 'left') returnedValue = 'stretch';
|
||||
if (value === 'center') returnedValue = 'center';
|
||||
if (value === 'right') returnedValue = 'end';
|
||||
return returnedValue;
|
||||
} else if (typeof value === 'object') {
|
||||
const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
|
||||
for (const [key, val] of Object.entries(value)) {
|
||||
returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
|
||||
}
|
||||
return returnedValue;
|
||||
}
|
||||
return 'stretch';
|
||||
};
|
||||
import { stackPropDefs } from './Stack.props';
|
||||
import { extractProps } from '../../utils/extractProps';
|
||||
import { gapPropDefs } from '../../props/gap-props';
|
||||
|
||||
/** @public */
|
||||
export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
|
||||
const {
|
||||
as = 'div',
|
||||
children,
|
||||
align = 'left',
|
||||
gap = 'xs',
|
||||
className,
|
||||
style,
|
||||
...restProps
|
||||
} = props;
|
||||
const propDefs = {
|
||||
...gapPropDefs,
|
||||
...stackPropDefs,
|
||||
};
|
||||
|
||||
// Generate utility class names
|
||||
const utilityClassNames = getClassNames({
|
||||
gap,
|
||||
alignItems: mapAlignValue(align),
|
||||
...restProps,
|
||||
});
|
||||
const { className, style } = extractProps(props, propDefs);
|
||||
|
||||
return createElement(as, {
|
||||
return createElement('div', {
|
||||
ref,
|
||||
className: clsx('canon-Stack', utilityClassNames, className),
|
||||
className: clsx('canon-Stack', className),
|
||||
style,
|
||||
children,
|
||||
children: props.children,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,4 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
export { Stack } from './Stack';
|
||||
export { stackPropDefs } from './Stack.props';
|
||||
export type { StackProps } from './types';
|
||||
export type { StackOwnProps } from './Stack.props';
|
||||
|
||||
@@ -14,23 +14,15 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type {
|
||||
SpaceProps,
|
||||
UtilityProps,
|
||||
AsProps,
|
||||
Breakpoint,
|
||||
} from '../../types';
|
||||
import type { SpaceProps } from '../../types';
|
||||
import { StackOwnProps } from './Stack.props';
|
||||
import type { GapProps } from '../../props/gap-props';
|
||||
|
||||
/** @public */
|
||||
export interface StackProps extends SpaceProps {
|
||||
children: React.ReactNode;
|
||||
as?: AsProps;
|
||||
gap?: UtilityProps['gap'];
|
||||
align?:
|
||||
| 'left'
|
||||
| 'center'
|
||||
| 'right'
|
||||
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
|
||||
gap?: GapProps['gap'];
|
||||
align?: StackOwnProps['align'];
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
@@ -31,3 +31,42 @@
|
||||
|
||||
/* Min 1536px */
|
||||
@import './utilities/2xl.css';
|
||||
|
||||
/* Padding */
|
||||
@import './utilities/p.css';
|
||||
@import './utilities/pl.css';
|
||||
@import './utilities/pr.css';
|
||||
@import './utilities/pt.css';
|
||||
@import './utilities/pb.css';
|
||||
@import './utilities/py.css';
|
||||
@import './utilities/px.css';
|
||||
|
||||
/* Margin */
|
||||
@import './utilities/m.css';
|
||||
@import './utilities/ml.css';
|
||||
@import './utilities/mr.css';
|
||||
@import './utilities/mt.css';
|
||||
@import './utilities/mb.css';
|
||||
@import './utilities/my.css';
|
||||
@import './utilities/mx.css';
|
||||
|
||||
/* Display */
|
||||
@import './utilities/display.css';
|
||||
|
||||
/* Width */
|
||||
@import './utilities/width.css';
|
||||
|
||||
/* Height */
|
||||
@import './utilities/height.css';
|
||||
|
||||
/* Position */
|
||||
@import './utilities/position.css';
|
||||
|
||||
/* Grid */
|
||||
@import './utilities/grid.css';
|
||||
|
||||
/* Gap */
|
||||
@import './utilities/gap.css';
|
||||
|
||||
/* Flex */
|
||||
@import './utilities/flex.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;
|
||||
}
|
||||
@@ -373,486 +125,6 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-2xl-m-2xl {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-m-2xs {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-m-lg {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-m-md {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-m-sm {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-m-xl {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-m-xs {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-2xl {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-2xs {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-lg {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-md {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mb-sm {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-xl {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-xs {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-ml-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-2xl {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-2xs {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-lg {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-md {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mr-sm {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-xl {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-xs {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mt-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mx-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-my-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-my-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-my-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-my-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-my-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-my-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-my-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-p-2xl {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-p-2xs {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-p-lg {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-p-md {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-p-sm {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-p-xl {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-p-xs {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-2xl {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-2xs {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-lg {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-md {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pb-sm {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-xl {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-xs {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pl-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-2xl {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-2xs {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-lg {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-md {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pr-sm {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-xl {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-xs {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pt-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-px-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-px-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-px-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-px-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-px-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-px-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-px-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-py-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-2xl-py-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-2xl-py-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-2xl-py-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-2xl-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-py-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-2xl-py-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-2xl-py-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
@@ -885,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,110 @@
|
||||
.cu-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xs\:cu-display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.xs\:cu-display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.xs\:cu-display-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm\:cu-display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sm\:cu-display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sm\:cu-display-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:cu-display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.md\:cu-display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.md\:cu-display-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg\:cu-display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.lg\:cu-display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lg\:cu-display-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xl\:cu-display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.xl\:cu-display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.xl\:cu-display-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.cu-align-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.cu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-align-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.xs\:cu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xs\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-align-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.sm\:cu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sm\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-align-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.md\:cu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.md\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-align-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.lg\:cu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lg\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-align-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.xl\:cu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xl\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
@@ -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
@@ -0,0 +1,86 @@
|
||||
.cu-h {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.cu-min-h {
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
.cu-max-h {
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-h {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.xs\:cu-min-h {
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
.xs\:cu-max-h {
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-h {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.sm\:cu-min-h {
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
.sm\:cu-max-h {
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-h {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.md\:cu-min-h {
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
.md\:cu-max-h {
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-h {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.lg\:cu-min-h {
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
.lg\:cu-max-h {
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-h {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
.xl\:cu-min-h {
|
||||
min-height: var(--min-height);
|
||||
}
|
||||
|
||||
.xl\:cu-max-h {
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -373,486 +125,6 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-lg-m-2xl {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-m-2xs {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-m-lg {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-m-md {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-lg-m-sm {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-m-xl {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-m-xs {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-mb-2xl {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-mb-2xs {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-mb-lg {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-mb-md {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mb-sm {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-mb-xl {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-mb-xs {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-ml-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-ml-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-ml-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-ml-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-lg-ml-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-ml-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-ml-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-mr-2xl {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-mr-2xs {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-mr-lg {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-mr-md {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mr-sm {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-mr-xl {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-mr-xs {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-mt-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-mt-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-mt-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-mt-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mt-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-mt-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-mt-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-mx-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-mx-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-mx-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-mx-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mx-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-mx-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-mx-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-my-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-my-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-my-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-my-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-my-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-my-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-my-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-p-2xl {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-p-2xs {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-p-lg {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-p-md {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-lg-p-sm {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-p-xl {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-p-xs {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-pb-2xl {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-pb-2xs {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-pb-lg {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-pb-md {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pb-sm {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-pb-xl {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-pb-xs {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-pl-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-pl-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-pl-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-pl-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pl-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-pl-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-pl-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-pr-2xl {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-pr-2xs {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-pr-lg {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-pr-md {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pr-sm {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-pr-xl {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-pr-xs {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-pt-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-pt-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-pt-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-pt-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pt-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-pt-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-pt-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-px-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-px-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-px-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-px-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-lg-px-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-px-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-px-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-py-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-lg-py-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-lg-py-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-lg-py-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-lg-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-py-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-lg-py-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-lg-py-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
@@ -885,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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-m {
|
||||
margin: var(--p);
|
||||
}
|
||||
|
||||
.cu-m-0\.5 {
|
||||
margin: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-m-1 {
|
||||
margin: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-m-1\.5 {
|
||||
margin: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-m-2 {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-m-3 {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-m-4 {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-m-5 {
|
||||
margin: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-m-6 {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-m-7 {
|
||||
margin: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-m-8 {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-m-9 {
|
||||
margin: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-m-10 {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-m-11 {
|
||||
margin: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-m-12 {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-m-13 {
|
||||
margin: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-m-14 {
|
||||
margin: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-m {
|
||||
margin: var(--p-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-m-0\.5 {
|
||||
margin: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-m-1 {
|
||||
margin: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-m-1\.5 {
|
||||
margin: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-m-2 {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-m-3 {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-m-4 {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-m-5 {
|
||||
margin: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-m-6 {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-m-7 {
|
||||
margin: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-m-8 {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-m-9 {
|
||||
margin: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-m-10 {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-m-11 {
|
||||
margin: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-m-12 {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-m-13 {
|
||||
margin: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-m-14 {
|
||||
margin: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-m {
|
||||
margin: var(--p-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-m-0\.5 {
|
||||
margin: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-m-1 {
|
||||
margin: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-m-1\.5 {
|
||||
margin: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-m-2 {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-m-3 {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-m-4 {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-m-5 {
|
||||
margin: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-m-6 {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-m-7 {
|
||||
margin: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-m-8 {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-m-9 {
|
||||
margin: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-m-10 {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-m-11 {
|
||||
margin: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-m-12 {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-m-13 {
|
||||
margin: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-m-14 {
|
||||
margin: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-m {
|
||||
margin: var(--p-md);
|
||||
}
|
||||
|
||||
.md\:cu-m-0\.5 {
|
||||
margin: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-m-1 {
|
||||
margin: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-m-1\.5 {
|
||||
margin: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-m-2 {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-m-3 {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-m-4 {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-m-5 {
|
||||
margin: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-m-6 {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-m-7 {
|
||||
margin: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-m-8 {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-m-9 {
|
||||
margin: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-m-10 {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-m-11 {
|
||||
margin: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-m-12 {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-m-13 {
|
||||
margin: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-m-14 {
|
||||
margin: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-m {
|
||||
margin: var(--p-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-m-0\.5 {
|
||||
margin: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-m-1 {
|
||||
margin: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-m-1\.5 {
|
||||
margin: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-m-2 {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-m-3 {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-m-4 {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-m-5 {
|
||||
margin: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-m-6 {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-m-7 {
|
||||
margin: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-m-8 {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-m-9 {
|
||||
margin: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-m-10 {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-m-11 {
|
||||
margin: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-m-12 {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-m-13 {
|
||||
margin: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-m-14 {
|
||||
margin: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-m {
|
||||
margin: var(--p-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-m-0\.5 {
|
||||
margin: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-m-1 {
|
||||
margin: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-m-1\.5 {
|
||||
margin: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-m-2 {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-m-3 {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-m-4 {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-m-5 {
|
||||
margin: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-m-6 {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-m-7 {
|
||||
margin: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-m-8 {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-m-9 {
|
||||
margin: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-m-10 {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-m-11 {
|
||||
margin: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-m-12 {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-m-13 {
|
||||
margin: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-m-14 {
|
||||
margin: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-mb {
|
||||
margin-bottom: var(--pb);
|
||||
}
|
||||
|
||||
.cu-mb-0\.5 {
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-mb-1 {
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-mb-1\.5 {
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-mb-2 {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mb-3 {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mb-4 {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mb-5 {
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-mb-6 {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mb-7 {
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-mb-8 {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mb-9 {
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-mb-10 {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mb-11 {
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-mb-12 {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mb-13 {
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-mb-14 {
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-mb {
|
||||
margin-bottom: var(--pb-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-0\.5 {
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-1 {
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-1\.5 {
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-2 {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-3 {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-4 {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-5 {
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-6 {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-7 {
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-8 {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-9 {
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-10 {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-11 {
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-12 {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-13 {
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-mb-14 {
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-mb {
|
||||
margin-bottom: var(--pb-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-0\.5 {
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-1 {
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-1\.5 {
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-2 {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-3 {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-4 {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-5 {
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-6 {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-7 {
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-8 {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-9 {
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-10 {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-11 {
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-12 {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-13 {
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-mb-14 {
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-mb {
|
||||
margin-bottom: var(--pb-md);
|
||||
}
|
||||
|
||||
.md\:cu-mb-0\.5 {
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-mb-1 {
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-mb-1\.5 {
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-mb-2 {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-mb-3 {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-mb-4 {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-mb-5 {
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-mb-6 {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-mb-7 {
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-mb-8 {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-mb-9 {
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-mb-10 {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-mb-11 {
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-mb-12 {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-mb-13 {
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-mb-14 {
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-mb {
|
||||
margin-bottom: var(--pb-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-0\.5 {
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-1 {
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-1\.5 {
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-2 {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-3 {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-4 {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-5 {
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-6 {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-7 {
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-8 {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-9 {
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-10 {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-11 {
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-12 {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-13 {
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-mb-14 {
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-mb {
|
||||
margin-bottom: var(--pb-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-0\.5 {
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-1 {
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-1\.5 {
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-2 {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-3 {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-4 {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-5 {
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-6 {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-7 {
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-8 {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-9 {
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-10 {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-11 {
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-12 {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-13 {
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-mb-14 {
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -373,486 +125,6 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-md-m-2xl {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-m-2xs {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-m-lg {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-m-md {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-md-m-sm {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-m-xl {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-m-xs {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-mb-2xl {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-mb-2xs {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-mb-lg {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-mb-md {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-mb-sm {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-mb-xl {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-mb-xs {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-ml-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-ml-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-ml-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-ml-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-md-ml-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-ml-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-ml-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-mr-2xl {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-mr-2xs {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-mr-lg {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-mr-md {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-mr-sm {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-mr-xl {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-mr-xs {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-mt-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-mt-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-mt-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-mt-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-md-mt-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-mt-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-mt-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-mx-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-mx-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-mx-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-mx-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-mx-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-mx-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-mx-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-my-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-my-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-my-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-my-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-my-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-my-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-my-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-p-2xl {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-p-2xs {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-p-lg {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-p-md {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-md-p-sm {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-p-xl {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-p-xs {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-pb-2xl {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-pb-2xs {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-pb-lg {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-pb-md {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-pb-sm {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-pb-xl {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-pb-xs {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-pl-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-pl-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-pl-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-pl-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-md-pl-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-pl-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-pl-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-pr-2xl {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-pr-2xs {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-pr-lg {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-pr-md {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-pr-sm {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-pr-xl {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-pr-xs {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-pt-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-pt-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-pt-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-pt-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-md-pt-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-pt-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-pt-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-px-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-px-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-px-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-px-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-md-px-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-px-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-px-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-py-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-md-py-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-md-py-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-md-py-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-md-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-py-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-md-py-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-md-py-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-md-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
@@ -885,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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-ml {
|
||||
margin-left: var(--pl);
|
||||
}
|
||||
|
||||
.cu-ml-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-ml-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-ml-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-ml-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-ml-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-ml-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-ml-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-ml-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-ml-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-ml-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-ml-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-ml-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-ml-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-ml-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-ml-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-ml-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-ml {
|
||||
margin-left: var(--pl-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-ml-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-ml {
|
||||
margin-left: var(--pl-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-ml-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-ml {
|
||||
margin-left: var(--pl-md);
|
||||
}
|
||||
|
||||
.md\:cu-ml-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-ml-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-ml-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-ml-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-ml-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-ml-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-ml-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-ml-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-ml-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-ml-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-ml-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-ml-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-ml-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-ml-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-ml-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-ml-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-ml {
|
||||
margin-left: var(--pl-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-ml-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-ml {
|
||||
margin-left: var(--pl-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-ml-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-mr {
|
||||
margin-right: var(--pr);
|
||||
}
|
||||
|
||||
.cu-mr-0\.5 {
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-mr-1 {
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-mr-1\.5 {
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-mr-2 {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mr-3 {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mr-4 {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mr-5 {
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-mr-6 {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mr-7 {
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-mr-8 {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mr-9 {
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-mr-10 {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mr-11 {
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-mr-12 {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mr-13 {
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-mr-14 {
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-mr {
|
||||
margin-right: var(--pr-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-0\.5 {
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-1 {
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-1\.5 {
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-2 {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-3 {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-4 {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-5 {
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-6 {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-7 {
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-8 {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-9 {
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-10 {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-11 {
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-12 {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-13 {
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-mr-14 {
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-mr {
|
||||
margin-right: var(--pr-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-0\.5 {
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-1 {
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-1\.5 {
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-2 {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-3 {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-4 {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-5 {
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-6 {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-7 {
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-8 {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-9 {
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-10 {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-11 {
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-12 {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-13 {
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-mr-14 {
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-mr {
|
||||
margin-right: var(--pr-md);
|
||||
}
|
||||
|
||||
.md\:cu-mr-0\.5 {
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-mr-1 {
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-mr-1\.5 {
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-mr-2 {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-mr-3 {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-mr-4 {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-mr-5 {
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-mr-6 {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-mr-7 {
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-mr-8 {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-mr-9 {
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-mr-10 {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-mr-11 {
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-mr-12 {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-mr-13 {
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-mr-14 {
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-mr {
|
||||
margin-right: var(--pr-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-0\.5 {
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-1 {
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-1\.5 {
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-2 {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-3 {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-4 {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-5 {
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-6 {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-7 {
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-8 {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-9 {
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-10 {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-11 {
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-12 {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-13 {
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-mr-14 {
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-mr {
|
||||
margin-right: var(--pr-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-0\.5 {
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-1 {
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-1\.5 {
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-2 {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-3 {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-4 {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-5 {
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-6 {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-7 {
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-8 {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-9 {
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-10 {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-11 {
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-12 {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-13 {
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-mr-14 {
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-mt {
|
||||
margin-top: var(--pt);
|
||||
}
|
||||
|
||||
.cu-mt-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-mt-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-mt-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-mt-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mt-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mt-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mt-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-mt-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mt-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-mt-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mt-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-mt-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mt-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-mt-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mt-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-mt-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-mt {
|
||||
margin-top: var(--pt-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-mt-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-mt {
|
||||
margin-top: var(--pt-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-mt-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-mt {
|
||||
margin-top: var(--pt-md);
|
||||
}
|
||||
|
||||
.md\:cu-mt-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-mt-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-mt-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-mt-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-mt-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-mt-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-mt-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-mt-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-mt-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-mt-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-mt-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-mt-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-mt-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-mt-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-mt-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-mt-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-mt {
|
||||
margin-top: var(--pt-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-mt-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-mt {
|
||||
margin-top: var(--pt-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-mt-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,524 @@
|
||||
.cu-mx {
|
||||
margin-left: var(--px);
|
||||
margin-right: var(--px);
|
||||
}
|
||||
|
||||
.cu-mx-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-mx-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-mx-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-mx-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mx-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mx-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mx-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-mx-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mx-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-mx-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mx-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-mx-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mx-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-mx-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mx-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-mx-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-mx {
|
||||
margin-left: var(--px-xs);
|
||||
margin-right: var(--px-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-mx-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-mx {
|
||||
margin-left: var(--px-sm);
|
||||
margin-right: var(--px-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-mx-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-mx {
|
||||
margin-left: var(--px-md);
|
||||
margin-right: var(--px-md);
|
||||
}
|
||||
|
||||
.md\:cu-mx-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-mx-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-mx-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-mx-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-mx-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-mx-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-mx-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-mx-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-mx-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-mx-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-mx-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-mx-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-mx-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-mx-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-mx-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-mx-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-mx {
|
||||
margin-left: var(--px-lg);
|
||||
margin-right: var(--px-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-mx-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-mx {
|
||||
margin-left: var(--px-xl);
|
||||
margin-right: var(--px-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-0\.5 {
|
||||
margin-left: var(--canon-space-0_5);
|
||||
margin-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-1 {
|
||||
margin-left: var(--canon-space-1);
|
||||
margin-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-1\.5 {
|
||||
margin-left: var(--canon-space-1_5);
|
||||
margin-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-2 {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-3 {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-4 {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-5 {
|
||||
margin-left: var(--canon-space-5);
|
||||
margin-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-6 {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-7 {
|
||||
margin-left: var(--canon-space-7);
|
||||
margin-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-8 {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-9 {
|
||||
margin-left: var(--canon-space-9);
|
||||
margin-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-10 {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-11 {
|
||||
margin-left: var(--canon-space-11);
|
||||
margin-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-12 {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-13 {
|
||||
margin-left: var(--canon-space-13);
|
||||
margin-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-mx-14 {
|
||||
margin-left: var(--canon-space-14);
|
||||
margin-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,524 @@
|
||||
.cu-my {
|
||||
margin-top: var(--py);
|
||||
margin-bottom: var(--py);
|
||||
}
|
||||
|
||||
.cu-my-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-my-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-my-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-my-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-my-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-my-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-my-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-my-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-my-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-my-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-my-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-my-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-my-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-my-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-my-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-my-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-my {
|
||||
margin-top: var(--py-xs);
|
||||
margin-bottom: var(--py-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-my-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-my-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-my-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-my-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-my-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-my-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-my-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-my-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-my-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-my-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-my-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-my-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-my-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-my-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-my-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-my-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-my {
|
||||
margin-top: var(--py-sm);
|
||||
margin-bottom: var(--py-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-my-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-my-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-my-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-my-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-my-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-my-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-my-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-my-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-my-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-my-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-my-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-my-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-my-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-my-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-my-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-my-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-my {
|
||||
margin-top: var(--py-md);
|
||||
margin-bottom: var(--py-md);
|
||||
}
|
||||
|
||||
.md\:cu-my-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-my-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-my-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-my-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-my-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-my-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-my-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-my-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-my-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-my-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-my-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-my-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-my-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-my-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-my-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-my-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-my {
|
||||
margin-top: var(--py-lg);
|
||||
margin-bottom: var(--py-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-my-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-my-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-my-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-my-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-my-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-my-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-my-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-my-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-my-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-my-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-my-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-my-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-my-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-my-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-my-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-my-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-my {
|
||||
margin-top: var(--py-xl);
|
||||
margin-bottom: var(--py-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-my-0\.5 {
|
||||
margin-top: var(--canon-space-0_5);
|
||||
margin-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-my-1 {
|
||||
margin-top: var(--canon-space-1);
|
||||
margin-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-my-1\.5 {
|
||||
margin-top: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-my-2 {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-my-3 {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-my-4 {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-my-5 {
|
||||
margin-top: var(--canon-space-5);
|
||||
margin-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-my-6 {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-my-7 {
|
||||
margin-top: var(--canon-space-7);
|
||||
margin-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-my-8 {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-my-9 {
|
||||
margin-top: var(--canon-space-9);
|
||||
margin-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-my-10 {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-my-11 {
|
||||
margin-top: var(--canon-space-11);
|
||||
margin-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-my-12 {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-my-13 {
|
||||
margin-top: var(--canon-space-13);
|
||||
margin-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-my-14 {
|
||||
margin-top: var(--canon-space-14);
|
||||
margin-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-p {
|
||||
padding: var(--p);
|
||||
}
|
||||
|
||||
.cu-p-0\.5 {
|
||||
padding: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-p-1 {
|
||||
padding: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-p-1\.5 {
|
||||
padding: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-p-2 {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-p-3 {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-p-4 {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-p-5 {
|
||||
padding: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-p-6 {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-p-7 {
|
||||
padding: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-p-8 {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-p-9 {
|
||||
padding: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-p-10 {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-p-11 {
|
||||
padding: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-p-12 {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-p-13 {
|
||||
padding: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-p-14 {
|
||||
padding: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-p {
|
||||
padding: var(--p-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-p-0\.5 {
|
||||
padding: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-p-1 {
|
||||
padding: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-p-1\.5 {
|
||||
padding: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-p-2 {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-p-3 {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-p-4 {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-p-5 {
|
||||
padding: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-p-6 {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-p-7 {
|
||||
padding: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-p-8 {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-p-9 {
|
||||
padding: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-p-10 {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-p-11 {
|
||||
padding: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-p-12 {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-p-13 {
|
||||
padding: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-p-14 {
|
||||
padding: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-p {
|
||||
padding: var(--p-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-p-0\.5 {
|
||||
padding: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-p-1 {
|
||||
padding: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-p-1\.5 {
|
||||
padding: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-p-2 {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-p-3 {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-p-4 {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-p-5 {
|
||||
padding: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-p-6 {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-p-7 {
|
||||
padding: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-p-8 {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-p-9 {
|
||||
padding: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-p-10 {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-p-11 {
|
||||
padding: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-p-12 {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-p-13 {
|
||||
padding: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-p-14 {
|
||||
padding: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-p {
|
||||
padding: var(--p-md);
|
||||
}
|
||||
|
||||
.md\:cu-p-0\.5 {
|
||||
padding: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-p-1 {
|
||||
padding: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-p-1\.5 {
|
||||
padding: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-p-2 {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-p-3 {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-p-4 {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-p-5 {
|
||||
padding: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-p-6 {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-p-7 {
|
||||
padding: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-p-8 {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-p-9 {
|
||||
padding: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-p-10 {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-p-11 {
|
||||
padding: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-p-12 {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-p-13 {
|
||||
padding: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-p-14 {
|
||||
padding: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-p {
|
||||
padding: var(--p-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-p-0\.5 {
|
||||
padding: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-p-1 {
|
||||
padding: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-p-1\.5 {
|
||||
padding: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-p-2 {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-p-3 {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-p-4 {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-p-5 {
|
||||
padding: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-p-6 {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-p-7 {
|
||||
padding: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-p-8 {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-p-9 {
|
||||
padding: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-p-10 {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-p-11 {
|
||||
padding: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-p-12 {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-p-13 {
|
||||
padding: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-p-14 {
|
||||
padding: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-p {
|
||||
padding: var(--p-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-p-0\.5 {
|
||||
padding: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-p-1 {
|
||||
padding: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-p-1\.5 {
|
||||
padding: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-p-2 {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-p-3 {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-p-4 {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-p-5 {
|
||||
padding: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-p-6 {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-p-7 {
|
||||
padding: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-p-8 {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-p-9 {
|
||||
padding: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-p-10 {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-p-11 {
|
||||
padding: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-p-12 {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-p-13 {
|
||||
padding: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-p-14 {
|
||||
padding: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-pb {
|
||||
padding-bottom: var(--pb);
|
||||
}
|
||||
|
||||
.cu-pb-0\.5 {
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-pb-1 {
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-pb-1\.5 {
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-pb-2 {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pb-3 {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pb-4 {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pb-5 {
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-pb-6 {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pb-7 {
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-pb-8 {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pb-9 {
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-pb-10 {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pb-11 {
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-pb-12 {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pb-13 {
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-pb-14 {
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-pb {
|
||||
padding-bottom: var(--pb-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-0\.5 {
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-1 {
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-1\.5 {
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-2 {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-3 {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-4 {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-5 {
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-6 {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-7 {
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-8 {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-9 {
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-10 {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-11 {
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-12 {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-13 {
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-pb-14 {
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-pb {
|
||||
padding-bottom: var(--pb-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-0\.5 {
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-1 {
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-1\.5 {
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-2 {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-3 {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-4 {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-5 {
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-6 {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-7 {
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-8 {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-9 {
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-10 {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-11 {
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-12 {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-13 {
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-pb-14 {
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-pb {
|
||||
padding-bottom: var(--pb-md);
|
||||
}
|
||||
|
||||
.md\:cu-pb-0\.5 {
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-pb-1 {
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-pb-1\.5 {
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-pb-2 {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-pb-3 {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-pb-4 {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-pb-5 {
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-pb-6 {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-pb-7 {
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-pb-8 {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-pb-9 {
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-pb-10 {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-pb-11 {
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-pb-12 {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-pb-13 {
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-pb-14 {
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-pb {
|
||||
padding-bottom: var(--pb-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-0\.5 {
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-1 {
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-1\.5 {
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-2 {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-3 {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-4 {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-5 {
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-6 {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-7 {
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-8 {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-9 {
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-10 {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-11 {
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-12 {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-13 {
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-pb-14 {
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-pb {
|
||||
padding-bottom: var(--pb-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-0\.5 {
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-1 {
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-1\.5 {
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-2 {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-3 {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-4 {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-5 {
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-6 {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-7 {
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-8 {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-9 {
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-10 {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-11 {
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-12 {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-13 {
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-pb-14 {
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-pl {
|
||||
padding-left: var(--pl);
|
||||
}
|
||||
|
||||
.cu-pl-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-pl-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-pl-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-pl-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pl-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pl-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pl-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-pl-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pl-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-pl-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pl-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-pl-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pl-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-pl-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pl-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-pl-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-pl {
|
||||
padding-left: var(--pl-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-pl-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-pl {
|
||||
padding-left: var(--pl-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-pl-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-pl {
|
||||
padding-left: var(--pl-md);
|
||||
}
|
||||
|
||||
.md\:cu-pl-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-pl-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-pl-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-pl-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-pl-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-pl-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-pl-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-pl-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-pl-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-pl-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-pl-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-pl-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-pl-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-pl-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-pl-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-pl-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-pl {
|
||||
padding-left: var(--pl-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-pl-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-pl {
|
||||
padding-left: var(--pl-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-pl-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
.cu-position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cu-position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cu-position-sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.cu-position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cu-position-static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.xs\:cu-position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.xs\:cu-position-sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.xs\:cu-position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xs\:cu-position-static {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sm\:cu-position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sm\:cu-position-sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.sm\:cu-position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sm\:cu-position-static {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.md\:cu-position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.md\:cu-position-sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.md\:cu-position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.md\:cu-position-static {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lg\:cu-position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.lg\:cu-position-sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.lg\:cu-position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lg\:cu-position-static {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.xl\:cu-position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.xl\:cu-position-sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.xl\:cu-position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xl\:cu-position-static {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-pr {
|
||||
padding-right: var(--pr);
|
||||
}
|
||||
|
||||
.cu-pr-0\.5 {
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-pr-1 {
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-pr-1\.5 {
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-pr-2 {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pr-3 {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pr-4 {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pr-5 {
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-pr-6 {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pr-7 {
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-pr-8 {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pr-9 {
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-pr-10 {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pr-11 {
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-pr-12 {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pr-13 {
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-pr-14 {
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-pr {
|
||||
padding-right: var(--pr-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-0\.5 {
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-1 {
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-1\.5 {
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-2 {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-3 {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-4 {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-5 {
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-6 {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-7 {
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-8 {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-9 {
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-10 {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-11 {
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-12 {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-13 {
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-pr-14 {
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-pr {
|
||||
padding-right: var(--pr-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-0\.5 {
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-1 {
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-1\.5 {
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-2 {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-3 {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-4 {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-5 {
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-6 {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-7 {
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-8 {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-9 {
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-10 {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-11 {
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-12 {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-13 {
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-pr-14 {
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-pr {
|
||||
padding-right: var(--pr-md);
|
||||
}
|
||||
|
||||
.md\:cu-pr-0\.5 {
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-pr-1 {
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-pr-1\.5 {
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-pr-2 {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-pr-3 {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-pr-4 {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-pr-5 {
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-pr-6 {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-pr-7 {
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-pr-8 {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-pr-9 {
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-pr-10 {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-pr-11 {
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-pr-12 {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-pr-13 {
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-pr-14 {
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-pr {
|
||||
padding-right: var(--pr-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-0\.5 {
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-1 {
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-1\.5 {
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-2 {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-3 {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-4 {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-5 {
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-6 {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-7 {
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-8 {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-9 {
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-10 {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-11 {
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-12 {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-13 {
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-pr-14 {
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-pr {
|
||||
padding-right: var(--pr-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-0\.5 {
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-1 {
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-1\.5 {
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-2 {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-3 {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-4 {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-5 {
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-6 {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-7 {
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-8 {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-9 {
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-10 {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-11 {
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-12 {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-13 {
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-pr-14 {
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.cu-pt {
|
||||
padding-top: var(--pt);
|
||||
}
|
||||
|
||||
.cu-pt-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-pt-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-pt-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-pt-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pt-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pt-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pt-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-pt-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pt-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-pt-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pt-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-pt-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pt-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-pt-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pt-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-pt-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-pt {
|
||||
padding-top: var(--pt-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-pt-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-pt {
|
||||
padding-top: var(--pt-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-pt-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-pt {
|
||||
padding-top: var(--pt-md);
|
||||
}
|
||||
|
||||
.md\:cu-pt-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-pt-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-pt-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-pt-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-pt-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-pt-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-pt-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-pt-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-pt-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-pt-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-pt-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-pt-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-pt-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-pt-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-pt-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-pt-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-pt {
|
||||
padding-top: var(--pt-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-pt-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-pt {
|
||||
padding-top: var(--pt-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-pt-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,524 @@
|
||||
.cu-px {
|
||||
padding-left: var(--px);
|
||||
padding-right: var(--px);
|
||||
}
|
||||
|
||||
.cu-px-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-px-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-px-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-px-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-px-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-px-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-px-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-px-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-px-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-px-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-px-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-px-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-px-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-px-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-px-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-px-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-px {
|
||||
padding-left: var(--px-xs);
|
||||
padding-right: var(--px-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-px-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-px-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-px-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-px-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-px-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-px-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-px-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-px-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-px-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-px-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-px-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-px-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-px-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-px-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-px-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-px-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-px {
|
||||
padding-left: var(--px-sm);
|
||||
padding-right: var(--px-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-px-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-px-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-px-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-px-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-px-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-px-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-px-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-px-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-px-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-px-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-px-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-px-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-px-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-px-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-px-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-px-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-px {
|
||||
padding-left: var(--px-md);
|
||||
padding-right: var(--px-md);
|
||||
}
|
||||
|
||||
.md\:cu-px-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-px-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-px-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-px-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-px-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-px-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-px-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-px-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-px-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-px-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-px-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-px-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-px-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-px-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-px-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-px-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-px {
|
||||
padding-left: var(--px-lg);
|
||||
padding-right: var(--px-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-px-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-px-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-px-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-px-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-px-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-px-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-px-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-px-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-px-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-px-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-px-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-px-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-px-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-px-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-px-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-px-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-px {
|
||||
padding-left: var(--px-xl);
|
||||
padding-right: var(--px-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-px-0\.5 {
|
||||
padding-left: var(--canon-space-0_5);
|
||||
padding-right: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-px-1 {
|
||||
padding-left: var(--canon-space-1);
|
||||
padding-right: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-px-1\.5 {
|
||||
padding-left: var(--canon-space-1_5);
|
||||
padding-right: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-px-2 {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-px-3 {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-px-4 {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-px-5 {
|
||||
padding-left: var(--canon-space-5);
|
||||
padding-right: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-px-6 {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-px-7 {
|
||||
padding-left: var(--canon-space-7);
|
||||
padding-right: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-px-8 {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-px-9 {
|
||||
padding-left: var(--canon-space-9);
|
||||
padding-right: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-px-10 {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-px-11 {
|
||||
padding-left: var(--canon-space-11);
|
||||
padding-right: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-px-12 {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-px-13 {
|
||||
padding-left: var(--canon-space-13);
|
||||
padding-right: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-px-14 {
|
||||
padding-left: var(--canon-space-14);
|
||||
padding-right: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,524 @@
|
||||
.cu-py {
|
||||
padding-top: var(--py);
|
||||
padding-bottom: var(--py);
|
||||
}
|
||||
|
||||
.cu-py-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.cu-py-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.cu-py-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.cu-py-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-py-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-py-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-py-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.cu-py-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-py-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.cu-py-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-py-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.cu-py-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-py-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.cu-py-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-py-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.cu-py-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-py {
|
||||
padding-top: var(--py-xs);
|
||||
padding-bottom: var(--py-xs);
|
||||
}
|
||||
|
||||
.xs\:cu-py-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xs\:cu-py-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xs\:cu-py-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xs\:cu-py-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xs\:cu-py-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xs\:cu-py-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xs\:cu-py-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xs\:cu-py-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xs\:cu-py-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xs\:cu-py-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xs\:cu-py-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xs\:cu-py-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xs\:cu-py-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xs\:cu-py-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xs\:cu-py-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xs\:cu-py-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-py {
|
||||
padding-top: var(--py-sm);
|
||||
padding-bottom: var(--py-sm);
|
||||
}
|
||||
|
||||
.sm\:cu-py-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.sm\:cu-py-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.sm\:cu-py-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.sm\:cu-py-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.sm\:cu-py-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.sm\:cu-py-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.sm\:cu-py-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.sm\:cu-py-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.sm\:cu-py-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.sm\:cu-py-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.sm\:cu-py-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.sm\:cu-py-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.sm\:cu-py-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.sm\:cu-py-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.sm\:cu-py-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.sm\:cu-py-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-py {
|
||||
padding-top: var(--py-md);
|
||||
padding-bottom: var(--py-md);
|
||||
}
|
||||
|
||||
.md\:cu-py-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.md\:cu-py-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.md\:cu-py-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.md\:cu-py-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.md\:cu-py-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.md\:cu-py-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.md\:cu-py-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.md\:cu-py-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.md\:cu-py-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.md\:cu-py-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.md\:cu-py-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.md\:cu-py-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.md\:cu-py-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.md\:cu-py-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.md\:cu-py-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.md\:cu-py-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-py {
|
||||
padding-top: var(--py-lg);
|
||||
padding-bottom: var(--py-lg);
|
||||
}
|
||||
|
||||
.lg\:cu-py-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.lg\:cu-py-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.lg\:cu-py-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.lg\:cu-py-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.lg\:cu-py-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.lg\:cu-py-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.lg\:cu-py-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.lg\:cu-py-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.lg\:cu-py-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.lg\:cu-py-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.lg\:cu-py-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.lg\:cu-py-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.lg\:cu-py-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.lg\:cu-py-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.lg\:cu-py-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.lg\:cu-py-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-py {
|
||||
padding-top: var(--py-xl);
|
||||
padding-bottom: var(--py-xl);
|
||||
}
|
||||
|
||||
.xl\:cu-py-0\.5 {
|
||||
padding-top: var(--canon-space-0_5);
|
||||
padding-bottom: var(--canon-space-0_5);
|
||||
}
|
||||
|
||||
.xl\:cu-py-1 {
|
||||
padding-top: var(--canon-space-1);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.xl\:cu-py-1\.5 {
|
||||
padding-top: var(--canon-space-1_5);
|
||||
padding-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.xl\:cu-py-2 {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.xl\:cu-py-3 {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.xl\:cu-py-4 {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.xl\:cu-py-5 {
|
||||
padding-top: var(--canon-space-5);
|
||||
padding-bottom: var(--canon-space-5);
|
||||
}
|
||||
|
||||
.xl\:cu-py-6 {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.xl\:cu-py-7 {
|
||||
padding-top: var(--canon-space-7);
|
||||
padding-bottom: var(--canon-space-7);
|
||||
}
|
||||
|
||||
.xl\:cu-py-8 {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.xl\:cu-py-9 {
|
||||
padding-top: var(--canon-space-9);
|
||||
padding-bottom: var(--canon-space-9);
|
||||
}
|
||||
|
||||
.xl\:cu-py-10 {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.xl\:cu-py-11 {
|
||||
padding-top: var(--canon-space-11);
|
||||
padding-bottom: var(--canon-space-11);
|
||||
}
|
||||
|
||||
.xl\:cu-py-12 {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.xl\:cu-py-13 {
|
||||
padding-top: var(--canon-space-13);
|
||||
padding-bottom: var(--canon-space-13);
|
||||
}
|
||||
|
||||
.xl\:cu-py-14 {
|
||||
padding-top: var(--canon-space-14);
|
||||
padding-bottom: var(--canon-space-14);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -373,486 +153,6 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-sm-m-2xl {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-m-2xs {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-m-lg {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-m-md {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-sm-m-sm {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-m-xl {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-m-xs {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-mb-2xl {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-mb-2xs {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-mb-lg {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-mb-md {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mb-sm {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-mb-xl {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-mb-xs {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-ml-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-ml-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-ml-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-ml-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-sm-ml-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-ml-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-ml-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-mr-2xl {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-mr-2xs {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-mr-lg {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-mr-md {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mr-sm {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-mr-xl {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-mr-xs {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-mt-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-mt-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-mt-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-mt-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mt-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-mt-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-mt-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-mx-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-mx-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-mx-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-mx-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mx-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-mx-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-mx-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-my-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-my-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-my-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-my-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-my-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-my-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-my-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-p-2xl {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-p-2xs {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-p-lg {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-p-md {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-sm-p-sm {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-p-xl {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-p-xs {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-pb-2xl {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-pb-2xs {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-pb-lg {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-pb-md {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pb-sm {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-pb-xl {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-pb-xs {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-pl-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-pl-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-pl-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-pl-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pl-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-pl-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-pl-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-pr-2xl {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-pr-2xs {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-pr-lg {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-pr-md {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pr-sm {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-pr-xl {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-pr-xs {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-pt-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-pt-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-pt-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-pt-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pt-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-pt-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-pt-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-px-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-px-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-px-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-px-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-sm-px-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-px-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-px-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-py-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-sm-py-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-sm-py-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-sm-py-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-sm-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-py-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-sm-py-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-sm-py-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-sm-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
@@ -885,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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
.cu-w {
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.cu-min-w {
|
||||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.cu-max-w {
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-w {
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.xs\:cu-min-w {
|
||||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.xs\:cu-max-w {
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@media (min-width: 768px) {
|
||||
.sm\:cu-w {
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.sm\:cu-min-w {
|
||||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.sm\:cu-max-w {
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@media (min-width: 1024px) {
|
||||
.md\:cu-w {
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.md\:cu-min-w {
|
||||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.md\:cu-max-w {
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:cu-w {
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.lg\:cu-min-w {
|
||||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.lg\:cu-max-w {
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@media (min-width: 1536px) {
|
||||
.xl\:cu-w {
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.xl\:cu-min-w {
|
||||
min-width: var(--min-width);
|
||||
}
|
||||
|
||||
.xl\:cu-max-w {
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -373,486 +125,6 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-xl-m-2xl {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-m-2xs {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-m-lg {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-m-md {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-xl-m-sm {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-m-xl {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-m-xs {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-mb-2xl {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-mb-2xs {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-mb-lg {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-mb-md {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mb-sm {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-mb-xl {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-mb-xs {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-ml-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-ml-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-ml-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-ml-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-xl-ml-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-ml-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-ml-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-mr-2xl {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-mr-2xs {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-mr-lg {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-mr-md {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mr-sm {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-mr-xl {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-mr-xs {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-mt-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-mt-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-mt-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-mt-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mt-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-mt-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-mt-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-mx-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-mx-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-mx-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-mx-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mx-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-mx-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-mx-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-my-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-my-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-my-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-my-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-my-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-my-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-my-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-p-2xl {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-p-2xs {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-p-lg {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-p-md {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-xl-p-sm {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-p-xl {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-p-xs {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-pb-2xl {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-pb-2xs {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-pb-lg {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-pb-md {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pb-sm {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-pb-xl {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-pb-xs {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-pl-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-pl-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-pl-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-pl-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pl-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-pl-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-pl-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-pr-2xl {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-pr-2xs {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-pr-lg {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-pr-md {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pr-sm {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-pr-xl {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-pr-xs {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-pt-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-pt-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-pt-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-pt-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pt-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-pt-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-pt-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-px-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-px-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-px-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-px-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-xl-px-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-px-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-px-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-py-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-xl-py-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-xl-py-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-xl-py-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-xl-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-py-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-xl-py-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-xl-py-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
@@ -885,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;
|
||||
}
|
||||
@@ -372,486 +124,6 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-m-2xl {
|
||||
margin: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-m-2xs {
|
||||
margin: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-m-lg {
|
||||
margin: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-m-md {
|
||||
margin: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-m-none {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cu-m-sm {
|
||||
margin: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-m-xl {
|
||||
margin: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-m-xs {
|
||||
margin: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mb-2xl {
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mb-2xs {
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mb-lg {
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mb-md {
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-mb-sm {
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mb-xl {
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mb-xs {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-ml-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-ml-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-ml-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-ml-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-ml-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cu-ml-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-ml-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-ml-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mr-2xl {
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mr-2xs {
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mr-lg {
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mr-md {
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mr-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-mr-sm {
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mr-xl {
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mr-xs {
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mt-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mt-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mt-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mt-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-mt-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mt-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mt-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-mx-2xl {
|
||||
margin-left: var(--canon-space-12);
|
||||
margin-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-mx-2xs {
|
||||
margin-left: var(--canon-space-2);
|
||||
margin-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-mx-lg {
|
||||
margin-left: var(--canon-space-8);
|
||||
margin-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-mx-md {
|
||||
margin-left: var(--canon-space-6);
|
||||
margin-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-mx-none {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cu-mx-sm {
|
||||
margin-left: var(--canon-space-4);
|
||||
margin-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-mx-xl {
|
||||
margin-left: var(--canon-space-10);
|
||||
margin-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-mx-xs {
|
||||
margin-left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-my-2xl {
|
||||
margin-top: var(--canon-space-12);
|
||||
margin-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-my-2xs {
|
||||
margin-top: var(--canon-space-2);
|
||||
margin-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-my-lg {
|
||||
margin-top: var(--canon-space-8);
|
||||
margin-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-my-md {
|
||||
margin-top: var(--canon-space-6);
|
||||
margin-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-my-none {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-my-sm {
|
||||
margin-top: var(--canon-space-4);
|
||||
margin-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-my-xl {
|
||||
margin-top: var(--canon-space-10);
|
||||
margin-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-my-xs {
|
||||
margin-top: var(--canon-space-3);
|
||||
margin-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-p-2xl {
|
||||
padding: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-p-2xs {
|
||||
padding: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-p-lg {
|
||||
padding: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-p-md {
|
||||
padding: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cu-p-sm {
|
||||
padding: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-p-xl {
|
||||
padding: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-p-xs {
|
||||
padding: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pb-2xl {
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pb-2xs {
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pb-lg {
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pb-md {
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-pb-sm {
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pb-xl {
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pb-xs {
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pl-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pl-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pl-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pl-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cu-pl-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pl-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pl-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pr-2xl {
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pr-2xs {
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pr-lg {
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pr-md {
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pr-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-pr-sm {
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pr-xl {
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pr-xs {
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-pt-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-pt-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-pt-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-pt-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-pt-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-pt-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-pt-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-px-2xl {
|
||||
padding-left: var(--canon-space-12);
|
||||
padding-right: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-px-2xs {
|
||||
padding-left: var(--canon-space-2);
|
||||
padding-right: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-px-lg {
|
||||
padding-left: var(--canon-space-8);
|
||||
padding-right: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-px-md {
|
||||
padding-left: var(--canon-space-6);
|
||||
padding-right: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-px-none {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cu-px-sm {
|
||||
padding-left: var(--canon-space-4);
|
||||
padding-right: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-px-xl {
|
||||
padding-left: var(--canon-space-10);
|
||||
padding-right: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-px-xs {
|
||||
padding-left: var(--canon-space-3);
|
||||
padding-right: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-py-2xl {
|
||||
padding-top: var(--canon-space-12);
|
||||
padding-bottom: var(--canon-space-12);
|
||||
}
|
||||
|
||||
.cu-py-2xs {
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-2);
|
||||
}
|
||||
|
||||
.cu-py-lg {
|
||||
padding-top: var(--canon-space-8);
|
||||
padding-bottom: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.cu-py-md {
|
||||
padding-top: var(--canon-space-6);
|
||||
padding-bottom: var(--canon-space-6);
|
||||
}
|
||||
|
||||
.cu-py-none {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-py-sm {
|
||||
padding-top: var(--canon-space-4);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
}
|
||||
|
||||
.cu-py-xl {
|
||||
padding-top: var(--canon-space-10);
|
||||
padding-bottom: var(--canon-space-10);
|
||||
}
|
||||
|
||||
.cu-py-xs {
|
||||
padding-top: var(--canon-space-3);
|
||||
padding-bottom: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.cu-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
@@ -884,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;
|
||||
}
|
||||
|
||||
@@ -39,5 +39,7 @@ export * from './components/Checkbox';
|
||||
export * from './components/Table';
|
||||
export * from './components/Input';
|
||||
export * from './components/Field';
|
||||
|
||||
// Types
|
||||
export * from './types';
|
||||
export * from './props';
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
/*
|
||||
* 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 './prop-def';
|
||||
|
||||
const displayValues = ['none', 'inline', 'inline-block', 'block'] as const;
|
||||
|
||||
/** @public */
|
||||
const displayPropDefs = {
|
||||
display: {
|
||||
type: 'enum',
|
||||
className: 'cu-display',
|
||||
values: displayValues,
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
display: PropDef<(typeof displayValues)[number]>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type DisplayProps = GetPropDefTypes<typeof displayPropDefs>;
|
||||
|
||||
export { displayPropDefs };
|
||||
export type { DisplayProps };
|
||||
@@ -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 };
|
||||
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
* 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 './prop-def';
|
||||
|
||||
/** @public */
|
||||
const heightPropDefs = {
|
||||
height: {
|
||||
type: 'string',
|
||||
className: 'cu-h',
|
||||
customProperties: ['--height'],
|
||||
responsive: true,
|
||||
},
|
||||
minHeight: {
|
||||
type: 'string',
|
||||
className: 'cu-min-h',
|
||||
customProperties: ['--min-height'],
|
||||
responsive: true,
|
||||
},
|
||||
maxHeight: {
|
||||
type: 'string',
|
||||
className: 'cu-max-h',
|
||||
customProperties: ['--max-height'],
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
height: PropDef<string>;
|
||||
minHeight: PropDef<string>;
|
||||
maxHeight: PropDef<string>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
|
||||
|
||||
export { heightPropDefs };
|
||||
export type { HeightProps };
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
export type { DisplayProps, displayPropDefs } from './display.props';
|
||||
export type { HeightProps, heightPropDefs } from './height.props';
|
||||
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';
|
||||
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
* 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 './prop-def';
|
||||
|
||||
/** @public */
|
||||
const marginPropDefs = (spacingValues: string[]) =>
|
||||
({
|
||||
m: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-m',
|
||||
customProperties: ['--m'],
|
||||
responsive: true,
|
||||
},
|
||||
mx: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mx',
|
||||
customProperties: ['--ml', '--mr'],
|
||||
responsive: true,
|
||||
},
|
||||
my: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-my',
|
||||
customProperties: ['--mt', '--mb'],
|
||||
responsive: true,
|
||||
},
|
||||
mt: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mt',
|
||||
customProperties: ['--mt'],
|
||||
responsive: true,
|
||||
},
|
||||
mr: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mr',
|
||||
customProperties: ['--mr'],
|
||||
responsive: true,
|
||||
},
|
||||
mb: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mb',
|
||||
customProperties: ['--mb'],
|
||||
responsive: true,
|
||||
},
|
||||
ml: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-ml',
|
||||
customProperties: ['--ml'],
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
m: PropDef<(typeof spacingValues)[number]>;
|
||||
mx: PropDef<(typeof spacingValues)[number]>;
|
||||
my: PropDef<(typeof spacingValues)[number]>;
|
||||
mt: PropDef<(typeof spacingValues)[number]>;
|
||||
mr: PropDef<(typeof spacingValues)[number]>;
|
||||
mb: PropDef<(typeof spacingValues)[number]>;
|
||||
ml: PropDef<(typeof spacingValues)[number]>;
|
||||
});
|
||||
|
||||
/** @public */
|
||||
type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
|
||||
|
||||
export { marginPropDefs };
|
||||
export type { MarginProps };
|
||||
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
* 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';
|
||||
|
||||
/** @public */
|
||||
const paddingPropDefs = (spacingValues: string[]) =>
|
||||
({
|
||||
p: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-p',
|
||||
customProperties: ['--p'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
px: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-px',
|
||||
customProperties: ['--pl', '--pr'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
py: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-py',
|
||||
customProperties: ['--pt', '--pb'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
pt: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pt',
|
||||
customProperties: ['--pt'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
pr: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pr',
|
||||
customProperties: ['--pr'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
pb: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pb',
|
||||
customProperties: ['--pb'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
pl: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pl',
|
||||
customProperties: ['--pl'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
p: PropDef<(typeof spacingValues)[number]>;
|
||||
px: PropDef<(typeof spacingValues)[number]>;
|
||||
py: PropDef<(typeof spacingValues)[number]>;
|
||||
pt: PropDef<(typeof spacingValues)[number]>;
|
||||
pr: PropDef<(typeof spacingValues)[number]>;
|
||||
pb: PropDef<(typeof spacingValues)[number]>;
|
||||
pl: PropDef<(typeof spacingValues)[number]>;
|
||||
});
|
||||
|
||||
/** @public */
|
||||
type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
|
||||
|
||||
export { paddingPropDefs };
|
||||
export type { PaddingProps };
|
||||
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
* 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 './prop-def';
|
||||
|
||||
/** @public */
|
||||
const positionValues = [
|
||||
'static',
|
||||
'relative',
|
||||
'absolute',
|
||||
'fixed',
|
||||
'sticky',
|
||||
] as const;
|
||||
|
||||
/** @public */
|
||||
const positionPropDefs = {
|
||||
position: {
|
||||
type: 'enum',
|
||||
className: 'cu-position',
|
||||
values: positionValues,
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
position: PropDef<(typeof positionValues)[number]>;
|
||||
};
|
||||
|
||||
// Use all of the imported prop defs to ensure that JSDoc works
|
||||
/** @public */
|
||||
type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
|
||||
|
||||
export { positionPropDefs };
|
||||
export type { PositionProps };
|
||||
@@ -0,0 +1,134 @@
|
||||
/*
|
||||
* 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 React from 'react';
|
||||
import type { Breakpoint, Responsive } from '../types';
|
||||
|
||||
/** @public */
|
||||
const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[];
|
||||
|
||||
/** @public */
|
||||
export type BooleanPropDef = {
|
||||
type: 'boolean';
|
||||
default?: boolean;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type StringPropDef = {
|
||||
type: 'string';
|
||||
default?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type ReactNodePropDef = {
|
||||
type: 'ReactNode';
|
||||
default?: React.ReactNode;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type EnumPropDef<T> = {
|
||||
type: 'enum';
|
||||
values: readonly T[];
|
||||
default?: T;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type EnumOrStringPropDef<T> = {
|
||||
type: 'enum | string';
|
||||
values: readonly T[];
|
||||
default?: T | string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type NonStylingPropDef = {
|
||||
className?: never;
|
||||
customProperties?: never;
|
||||
parseValue?: never;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type StylingPropDef = {
|
||||
className: string;
|
||||
parseValue?: (value: string) => string | undefined;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type ArbitraryStylingPropDef = {
|
||||
className: string;
|
||||
customProperties: `--${string}`[];
|
||||
parseValue?: (value: string) => string | undefined;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
export type RegularPropDef<T> =
|
||||
| ReactNodePropDef
|
||||
| BooleanPropDef
|
||||
| (StringPropDef & ArbitraryStylingPropDef)
|
||||
| (StringPropDef & NonStylingPropDef)
|
||||
| (EnumPropDef<T> & StylingPropDef)
|
||||
| (EnumPropDef<T> & NonStylingPropDef)
|
||||
| (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
|
||||
| (EnumOrStringPropDef<T> & NonStylingPropDef);
|
||||
|
||||
/** @public */
|
||||
type ResponsivePropDef<T = any> = RegularPropDef<T> & {
|
||||
responsive: true;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
|
||||
|
||||
/** @public */
|
||||
export type GetPropDefType<Def> = Def extends BooleanPropDef
|
||||
? Def extends ResponsivePropDef
|
||||
? Responsive<boolean>
|
||||
: boolean
|
||||
: Def extends StringPropDef
|
||||
? Def extends ResponsivePropDef
|
||||
? Responsive<string>
|
||||
: string
|
||||
: Def extends ReactNodePropDef
|
||||
? Def extends ResponsivePropDef
|
||||
? Responsive<React.ReactNode>
|
||||
: React.ReactNode
|
||||
: Def extends EnumOrStringPropDef<infer Type>
|
||||
? Def extends ResponsivePropDef<infer Type extends string>
|
||||
? Responsive<string | Type>
|
||||
: string | Type
|
||||
: Def extends EnumPropDef<infer Type>
|
||||
? Def extends ResponsivePropDef<infer Type>
|
||||
? Responsive<Type>
|
||||
: Type
|
||||
: never;
|
||||
|
||||
/** @public */
|
||||
type GetPropDefTypes<P> = {
|
||||
[K in keyof P]?: GetPropDefType<P[K]>;
|
||||
};
|
||||
|
||||
export { breakpoints };
|
||||
export type {
|
||||
PropDef,
|
||||
GetPropDefTypes,
|
||||
ResponsivePropDef,
|
||||
Breakpoint,
|
||||
Responsive,
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
* 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 { paddingPropDefs } from './padding.props';
|
||||
import { marginPropDefs } from './margin.props';
|
||||
|
||||
export const spacingValues = [
|
||||
'0.5',
|
||||
'1',
|
||||
'1.5',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'13',
|
||||
'14',
|
||||
];
|
||||
|
||||
export const spacingPropDefs = {
|
||||
...paddingPropDefs(spacingValues),
|
||||
...marginPropDefs(spacingValues),
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
* 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 { GetPropDefTypes, PropDef } from './prop-def';
|
||||
|
||||
/** @public */
|
||||
const widthPropDefs = {
|
||||
width: {
|
||||
type: 'string',
|
||||
className: 'cu-w',
|
||||
customProperties: ['--width'],
|
||||
responsive: true,
|
||||
},
|
||||
minWidth: {
|
||||
type: 'string',
|
||||
className: 'cu-min-w',
|
||||
customProperties: ['--min-width'],
|
||||
responsive: true,
|
||||
},
|
||||
maxWidth: {
|
||||
type: 'string',
|
||||
className: 'cu-max-w',
|
||||
customProperties: ['--max-width'],
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
width: PropDef<string>;
|
||||
minWidth: PropDef<string>;
|
||||
maxWidth: PropDef<string>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
|
||||
|
||||
export { widthPropDefs };
|
||||
export type { WidthProps };
|
||||
+48
-28
@@ -37,7 +37,27 @@ export type AsProps =
|
||||
export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
/** @public */
|
||||
export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
|
||||
|
||||
/** @public */
|
||||
export type Space =
|
||||
| '0.5'
|
||||
| '1'
|
||||
| '1.5'
|
||||
| '2'
|
||||
| '3'
|
||||
| '4'
|
||||
| '5'
|
||||
| '6'
|
||||
| '7'
|
||||
| '8'
|
||||
| '9'
|
||||
| '10'
|
||||
| '11'
|
||||
| '12'
|
||||
| '13'
|
||||
| '14'
|
||||
| string;
|
||||
|
||||
/** @public */
|
||||
export type Display = 'none' | 'flex' | 'block' | 'inline';
|
||||
@@ -79,35 +99,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
|
||||
|
||||
/** @public */
|
||||
export interface SpaceProps {
|
||||
margin?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
marginY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
padding?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
m?: Responsive<Space>;
|
||||
mb?: Responsive<Space>;
|
||||
ml?: Responsive<Space>;
|
||||
mr?: Responsive<Space>;
|
||||
mt?: Responsive<Space>;
|
||||
mx?: Responsive<Space>;
|
||||
my?: Responsive<Space>;
|
||||
p?: Responsive<Space>;
|
||||
pb?: Responsive<Space>;
|
||||
pl?: Responsive<Space>;
|
||||
pr?: Responsive<Space>;
|
||||
pt?: Responsive<Space>;
|
||||
px?: Responsive<Space>;
|
||||
py?: Responsive<Space>;
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export interface UtilityProps extends SpaceProps {
|
||||
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
|
||||
border?: Border | Partial<Record<Breakpoint, Border>>;
|
||||
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
|
||||
colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
|
||||
colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
|
||||
colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
|
||||
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
|
||||
display?: Display | Partial<Record<Breakpoint, Display>>;
|
||||
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
|
||||
flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
|
||||
gap?: Space | Partial<Record<Breakpoint, Space>>;
|
||||
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
|
||||
rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
|
||||
alignItems?: Responsive<AlignItems>;
|
||||
border?: Responsive<Border>;
|
||||
borderRadius?: Responsive<BorderRadius>;
|
||||
colEnd?: Responsive<Columns | 'auto'>;
|
||||
colSpan?: Responsive<Columns | 'full'>;
|
||||
colStart?: Responsive<Columns | 'auto'>;
|
||||
columns?: Responsive<Columns>;
|
||||
display?: Responsive<Display>;
|
||||
flexDirection?: Responsive<FlexDirection>;
|
||||
flexWrap?: Responsive<FlexWrap>;
|
||||
gap?: Responsive<Space>;
|
||||
justifyContent?: Responsive<JustifyContent>;
|
||||
rowSpan?: Responsive<Columns | 'full'>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
export function extractProps(
|
||||
props: {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
as?: keyof JSX.IntrinsicElements;
|
||||
[key: string]: any;
|
||||
},
|
||||
propDefs: { [key: string]: any },
|
||||
) {
|
||||
let className: string = props.className || '';
|
||||
let style: React.CSSProperties = props.style || {};
|
||||
|
||||
for (const key in propDefs) {
|
||||
// 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 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;
|
||||
|
||||
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}`;
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure keys from props that are defined in propDefs are removed
|
||||
const cleanedProps = Object.keys(props).reduce((acc, key) => {
|
||||
if (!propDefs.hasOwnProperty(key)) {
|
||||
acc[key] = props[key];
|
||||
}
|
||||
return acc;
|
||||
}, {} as { [key: string]: any });
|
||||
|
||||
return { ...cleanedProps, className, style };
|
||||
}
|
||||
Reference in New Issue
Block a user