Add missing padding and margin utility classes
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -205,66 +205,49 @@ export const AlignItems: Story = {
|
||||
),
|
||||
};
|
||||
|
||||
export const Nested: Story = {
|
||||
render: () => (
|
||||
<Box padding="lg" background="background">
|
||||
<Box padding="md" background="background">
|
||||
Header
|
||||
</Box>
|
||||
<Box
|
||||
display="flex"
|
||||
padding="md"
|
||||
background="background"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Box padding="xs" background="background">
|
||||
Sidebar
|
||||
</Box>
|
||||
<Box padding="xs" background="background">
|
||||
Main Content
|
||||
</Box>
|
||||
</Box>
|
||||
<Box padding="md" background="background">
|
||||
Footer
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
const stylePaddingBox = {
|
||||
background: 'rgb(196, 202, 251)',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
};
|
||||
|
||||
export const Alignment: Story = {
|
||||
render: () => (
|
||||
<Box
|
||||
display="flex"
|
||||
padding="lg"
|
||||
background="background"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
style={{ height: '200px' }}
|
||||
>
|
||||
<Box padding="md" background="background">
|
||||
Centered Content
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
};
|
||||
|
||||
// Example showing different spacing combinations
|
||||
export const Spacing: Story = {
|
||||
render: () => (
|
||||
<Box display="flex" flexDirection="column" gap="md">
|
||||
<Box padding="xs" background="background">
|
||||
Small Padding
|
||||
</Box>
|
||||
<Box padding="md" background="background">
|
||||
Medium Padding
|
||||
</Box>
|
||||
<Box padding="lg" background="background">
|
||||
Large Padding
|
||||
</Box>
|
||||
<Box paddingX="lg" paddingY="xs" background="background">
|
||||
Mixed Padding
|
||||
</Box>
|
||||
</Box>
|
||||
export const Padding: Story = {
|
||||
args: {
|
||||
style: {
|
||||
background: '#1f47ff',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
padding: '12px 12px',
|
||||
},
|
||||
},
|
||||
render: args => (
|
||||
<Stack align="center" gap="md">
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box padding="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding</Box>
|
||||
</Box>
|
||||
<Box paddingX="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding X</Box>
|
||||
</Box>
|
||||
<Box paddingY="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding Y</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline alignY="center" gap="md">
|
||||
<Box paddingTop="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding Top</Box>
|
||||
</Box>
|
||||
<Box paddingRight="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding Right</Box>
|
||||
</Box>
|
||||
<Box paddingBottom="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding Bottom</Box>
|
||||
</Box>
|
||||
<Box paddingLeft="md" style={stylePaddingBox}>
|
||||
<Box {...args}>Padding Left</Box>
|
||||
</Box>
|
||||
</Inline>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Meta, Unstyled, Source } from '@storybook/blocks';
|
||||
import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
|
||||
import * as BoxStories from './Box.stories';
|
||||
import { Title, Text } from '../../../docs/components';
|
||||
import { Padding } from './docs/padding';
|
||||
import { PropsTable, getProps } from '../../../docs/components';
|
||||
import { boxProperties } from './sprinkles.css';
|
||||
import { spacingProperties } from '../../layout/sprinkles.css';
|
||||
@@ -54,7 +53,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
|
||||
avoid collapsing margins but both are available.
|
||||
</Text>
|
||||
|
||||
<Padding />
|
||||
<Canvas of={BoxStories.Padding} />
|
||||
|
||||
<PropsTable data={getProps(spacingProperties.styles)} />
|
||||
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
/*
|
||||
* Copyright 2024 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 React from 'react';
|
||||
import { Inline } from '../../Inline';
|
||||
import { Box } from '../Box';
|
||||
|
||||
const FakeBox = ({ children }: { children: string }) => (
|
||||
<Box
|
||||
paddingX="md"
|
||||
paddingY="sm"
|
||||
borderRadius="small"
|
||||
style={{ background: '#1f47ff', color: 'white' }}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Padding = () => {
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
marginBottom="md"
|
||||
gap="xl"
|
||||
paddingY="xl"
|
||||
style={{ border: '1px solid #e7e7e7' }}
|
||||
>
|
||||
<Inline align="center" alignY="center" gap="xl">
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
padding="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>padding</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingX="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingX</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingY="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingY</FakeBox>
|
||||
</Box>
|
||||
</Inline>
|
||||
<Inline align="center" alignY="center" gap="xl">
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingTop="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingTop</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingBottom="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingBottom</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingLeft="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingLeft</FakeBox>
|
||||
</Box>
|
||||
<Box
|
||||
alignItems="center"
|
||||
borderRadius="small"
|
||||
paddingRight="md"
|
||||
style={{ background: '#c4cafb', color: 'white' }}
|
||||
>
|
||||
<FakeBox>paddingRight</FakeBox>
|
||||
</Box>
|
||||
</Inline>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -32,7 +32,7 @@ export const boxProperties = defineProperties({
|
||||
// 'space-around',
|
||||
// 'space-between',
|
||||
// ],
|
||||
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
|
||||
// alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
|
||||
borderRadius: {
|
||||
none: 0,
|
||||
small: '4px',
|
||||
@@ -49,7 +49,7 @@ export const boxProperties = defineProperties({
|
||||
thin: '1px solid var(--canon-outline)',
|
||||
error: '1px solid var(--canon-error)',
|
||||
},
|
||||
display: ['none', 'flex', 'block', 'inline'],
|
||||
// display: ['none', 'flex', 'block', 'inline'],
|
||||
flexWrap: ['wrap', 'nowrap'],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -471,5 +471,133 @@
|
||||
.cu-2xl-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -471,5 +471,133 @@
|
||||
.cu-lg-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-lg-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-lg-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-lg-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-lg-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-lg-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-lg-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -471,5 +471,133 @@
|
||||
.cu-md-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-md-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-md-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-md-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-md-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-md-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-md-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-md-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-md-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -471,5 +471,133 @@
|
||||
.cu-sm-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-sm-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-sm-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-sm-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-sm-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-sm-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-sm-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -471,5 +471,133 @@
|
||||
.cu-xl-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-xl-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-xl-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-xl-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-xl-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-xl-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-xl-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -470,4 +470,132 @@
|
||||
.cu-gap-2xl {
|
||||
gap: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pt-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cu-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-pt-xs {
|
||||
padding-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-pt-sm {
|
||||
padding-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-pt-md {
|
||||
padding-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-pt-xl {
|
||||
padding-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-pt-2xl {
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pb-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-pb-xs {
|
||||
padding-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-pb-sm {
|
||||
padding-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-pb-md {
|
||||
padding-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-pb-xl {
|
||||
padding-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-pb-2xl {
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mt-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cu-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-mt-xs {
|
||||
margin-top: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-mt-sm {
|
||||
margin-top: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-mt-md {
|
||||
margin-top: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-mt-xl {
|
||||
margin-top: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-mt-2xl {
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mb-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cu-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-mb-xs {
|
||||
margin-bottom: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.cu-mb-sm {
|
||||
margin-bottom: var(--canon-spacing-sm);
|
||||
}
|
||||
|
||||
.cu-mb-md {
|
||||
margin-bottom: var(--canon-spacing-md);
|
||||
}
|
||||
|
||||
.cu-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
|
||||
.cu-mb-xl {
|
||||
margin-bottom: var(--canon-spacing-xl);
|
||||
}
|
||||
|
||||
.cu-mb-2xl {
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user