Fix spacing props
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -160,17 +160,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;
|
||||
}
|
||||
@@ -378,38 +378,58 @@ export type JustifyContent =
|
||||
| 'between';
|
||||
|
||||
// @public (undocumented)
|
||||
export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
|
||||
|
||||
// @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)
|
||||
@@ -510,30 +530,30 @@ 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'>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -23,9 +23,6 @@ import { Inline } from '../Inline';
|
||||
const meta = {
|
||||
title: 'Components/Box',
|
||||
component: Box,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
as: {
|
||||
control: { type: 'select' },
|
||||
@@ -216,27 +213,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 +254,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>
|
||||
|
||||
@@ -16,23 +16,24 @@
|
||||
|
||||
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';
|
||||
|
||||
/** @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);
|
||||
// Extract utility class names and styles
|
||||
const propDefs = { ...spacingPropDefs };
|
||||
const { className, style } = extractProps(props, propDefs);
|
||||
|
||||
return createElement(as, {
|
||||
ref,
|
||||
className: classNames,
|
||||
className: clsx('canon-Box', className),
|
||||
style,
|
||||
children,
|
||||
});
|
||||
});
|
||||
|
||||
Box.displayName = 'Box';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -31,3 +31,21 @@
|
||||
|
||||
/* 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';
|
||||
|
||||
@@ -373,486 +373,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);
|
||||
}
|
||||
|
||||
@@ -373,486 +373,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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -373,486 +373,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);
|
||||
}
|
||||
|
||||
@@ -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,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);
|
||||
}
|
||||
}
|
||||
@@ -373,486 +373,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);
|
||||
}
|
||||
|
||||
@@ -373,486 +373,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);
|
||||
}
|
||||
|
||||
@@ -372,486 +372,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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
/*
|
||||
* 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.js';
|
||||
|
||||
const marginPropDefs = (spacingValues: string[]) =>
|
||||
({
|
||||
/**
|
||||
* Sets the CSS **margin** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* m="4"
|
||||
* m="100px"
|
||||
* m={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin
|
||||
*/
|
||||
m: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-m',
|
||||
customProperties: ['--m'],
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **margin-left** and **margin-right** properties.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* mx="4"
|
||||
* mx="100px"
|
||||
* mx={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
|
||||
*/
|
||||
mx: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mx',
|
||||
customProperties: ['--ml', '--mr'],
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **margin-top** and **margin-bottom** properties.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* my="4"
|
||||
* my="100px"
|
||||
* my={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
|
||||
*/
|
||||
my: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-my',
|
||||
customProperties: ['--mt', '--mb'],
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **margin-top** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* mt="4"
|
||||
* mt="100px"
|
||||
* mt={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
|
||||
*/
|
||||
mt: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mt',
|
||||
customProperties: ['--mt'],
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **margin-right** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* mr="4"
|
||||
* mr="100px"
|
||||
* mr={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
|
||||
*/
|
||||
mr: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mr',
|
||||
customProperties: ['--mr'],
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **margin-bottom** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* mb="4"
|
||||
* mb="100px"
|
||||
* mb={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
|
||||
*/
|
||||
mb: {
|
||||
type: 'enum | string',
|
||||
values: spacingValues,
|
||||
className: 'cu-mb',
|
||||
customProperties: ['--mb'],
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **margin-left** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* ml="4"
|
||||
* ml="100px"
|
||||
* ml={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
|
||||
*/
|
||||
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]>;
|
||||
});
|
||||
|
||||
type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
|
||||
|
||||
export { marginPropDefs };
|
||||
export type { MarginProps };
|
||||
@@ -0,0 +1,169 @@
|
||||
/*
|
||||
* 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';
|
||||
|
||||
const paddingPropDefs = (spacingValues: string[]) =>
|
||||
({
|
||||
/**
|
||||
* Sets the CSS **padding** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* p="4"
|
||||
* p="100px"
|
||||
* p={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding
|
||||
*/
|
||||
p: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-p',
|
||||
customProperties: ['--p'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **padding-left** and **padding-right** properties.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* px="4"
|
||||
* px="100px"
|
||||
* px={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
|
||||
*/
|
||||
px: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-px',
|
||||
customProperties: ['--pl', '--pr'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **padding-top** and **padding-bottom** properties.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* py="4"
|
||||
* py="100px"
|
||||
* py={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
|
||||
*/
|
||||
py: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-py',
|
||||
customProperties: ['--pt', '--pb'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **padding-top** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* pt="4"
|
||||
* pt="100px"
|
||||
* pt={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
|
||||
*/
|
||||
pt: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pt',
|
||||
customProperties: ['--pt'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **padding-right** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* pr="4"
|
||||
* pr="100px"
|
||||
* pr={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
|
||||
*/
|
||||
pr: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pr',
|
||||
customProperties: ['--pr'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **padding-bottom** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* pb="4"
|
||||
* pb="100px"
|
||||
* pb={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
|
||||
*/
|
||||
pb: {
|
||||
type: 'enum | string',
|
||||
className: 'cu-pb',
|
||||
customProperties: ['--pb'],
|
||||
values: spacingValues,
|
||||
responsive: true,
|
||||
},
|
||||
/**
|
||||
* Sets the CSS **padding-left** property.
|
||||
* Supports space scale values, CSS strings, and responsive objects.
|
||||
*
|
||||
* @example
|
||||
* pl="4"
|
||||
* pl="100px"
|
||||
* pl={{ sm: '6', lg: '9' }}
|
||||
*
|
||||
* @link
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
|
||||
*/
|
||||
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]>;
|
||||
});
|
||||
|
||||
type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
|
||||
|
||||
export { paddingPropDefs };
|
||||
export type { PaddingProps };
|
||||
@@ -0,0 +1,107 @@
|
||||
/*
|
||||
* 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';
|
||||
|
||||
// Creates a union type of string literals with strings, but retains intellisense for the literals.
|
||||
// Union<string, 'foo' | 'bar'> => string | Omit<string, 'foo' | 'bar'>
|
||||
type Union<S = string, T extends string | number = string> = T | Omit<S, T>;
|
||||
|
||||
const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
|
||||
type Breakpoint = (typeof breakpoints)[number];
|
||||
type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
|
||||
|
||||
type BooleanPropDef = {
|
||||
type: 'boolean';
|
||||
default?: boolean;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
type StringPropDef = {
|
||||
type: 'string';
|
||||
default?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
type ReactNodePropDef = {
|
||||
type: 'ReactNode';
|
||||
default?: React.ReactNode;
|
||||
required?: boolean;
|
||||
};
|
||||
type EnumPropDef<T> = {
|
||||
type: 'enum';
|
||||
values: readonly T[];
|
||||
default?: T;
|
||||
required?: boolean;
|
||||
};
|
||||
type EnumOrStringPropDef<T> = {
|
||||
type: 'enum | string';
|
||||
values: readonly T[];
|
||||
default?: T | string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
type NonStylingPropDef = {
|
||||
className?: never;
|
||||
customProperties?: never;
|
||||
parseValue?: never;
|
||||
};
|
||||
|
||||
type StylingPropDef = {
|
||||
className: string;
|
||||
parseValue?: (value: string) => string | undefined;
|
||||
};
|
||||
|
||||
type ArbitraryStylingPropDef = {
|
||||
className: string;
|
||||
customProperties: `--${string}`[];
|
||||
parseValue?: (value: string) => string | undefined;
|
||||
};
|
||||
|
||||
type RegularPropDef<T> =
|
||||
| ReactNodePropDef
|
||||
| BooleanPropDef
|
||||
| (StringPropDef & ArbitraryStylingPropDef)
|
||||
| (StringPropDef & NonStylingPropDef)
|
||||
| (EnumPropDef<T> & StylingPropDef)
|
||||
| (EnumPropDef<T> & NonStylingPropDef)
|
||||
| (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
|
||||
| (EnumOrStringPropDef<T> & NonStylingPropDef);
|
||||
type ResponsivePropDef<T = any> = RegularPropDef<T> & { responsive: true };
|
||||
type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
|
||||
|
||||
// prettier-ignore
|
||||
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<Union<string, Type>> : Type
|
||||
: Def extends EnumPropDef<infer Type> ? (Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type)
|
||||
: never;
|
||||
|
||||
type GetPropDefTypes<P> = {
|
||||
[K in keyof P]?: GetPropDefType<P[K]>;
|
||||
};
|
||||
|
||||
export { breakpoints };
|
||||
export type {
|
||||
PropDef,
|
||||
GetPropDefTypes,
|
||||
ResponsivePropDef,
|
||||
//
|
||||
Breakpoint,
|
||||
Responsive,
|
||||
Union,
|
||||
};
|
||||
@@ -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';
|
||||
import { marginPropDefs } from './margin';
|
||||
|
||||
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),
|
||||
};
|
||||
+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,71 @@
|
||||
/*
|
||||
* 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) {
|
||||
if (props.hasOwnProperty(key)) {
|
||||
const value = props[key];
|
||||
const propDefsValues = propDefs[key].values;
|
||||
const propDefsCustomProperties = propDefs[key].customProperties;
|
||||
const propDefsClassName = propDefs[key].className;
|
||||
const isResponsive = propDefs[key].responsive;
|
||||
|
||||
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