Add direction
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -17,6 +17,12 @@
|
||||
import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
|
||||
|
||||
const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
|
||||
const directionValues = [
|
||||
'row',
|
||||
'column',
|
||||
'row-reverse',
|
||||
'column-reverse',
|
||||
] as const;
|
||||
|
||||
/** @public */
|
||||
const stackPropDefs = {
|
||||
@@ -25,10 +31,16 @@ const stackPropDefs = {
|
||||
className: 'cu-align',
|
||||
values: alignValues,
|
||||
responsive: true,
|
||||
default: 'stretch',
|
||||
},
|
||||
direction: {
|
||||
type: 'enum',
|
||||
className: 'cu-fd',
|
||||
values: directionValues,
|
||||
responsive: true,
|
||||
},
|
||||
} satisfies {
|
||||
align: PropDef<(typeof alignValues)[number]>;
|
||||
direction: PropDef<(typeof directionValues)[number]>;
|
||||
};
|
||||
|
||||
/** @public */
|
||||
|
||||
@@ -65,6 +65,20 @@ export const Default: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const ColumnDirection: Story = {
|
||||
args: {
|
||||
direction: 'column',
|
||||
children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
|
||||
},
|
||||
};
|
||||
|
||||
export const RowDirection: Story = {
|
||||
args: {
|
||||
direction: 'row',
|
||||
children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
|
||||
},
|
||||
};
|
||||
|
||||
export const AlignLeft: Story = {
|
||||
render: () => (
|
||||
<Stack align="start">
|
||||
|
||||
@@ -16,5 +16,4 @@
|
||||
|
||||
.canon-Stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ export interface StackProps extends SpaceProps {
|
||||
children: React.ReactNode;
|
||||
gap?: GapProps['gap'];
|
||||
align?: StackOwnProps['align'];
|
||||
direction?: StackOwnProps['direction'];
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
@import '../components/Box/styles.css';
|
||||
@import '../components/Button/styles.css';
|
||||
@import '../components/Stack/styles.css';
|
||||
@import '../components/Inline/styles.css';
|
||||
@import '../components/Grid/styles.css';
|
||||
@import '../components/Container/styles.css';
|
||||
@import '../components/Icon/styles.css';
|
||||
|
||||
@@ -14,24 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Default utilities */
|
||||
@import './utilities/xs.css';
|
||||
|
||||
/* Min 640px */
|
||||
@import './utilities/sm.css';
|
||||
|
||||
/* Min 768px */
|
||||
@import './utilities/md.css';
|
||||
|
||||
/* Min 1024px */
|
||||
@import './utilities/lg.css';
|
||||
|
||||
/* Min 1280px */
|
||||
@import './utilities/xl.css';
|
||||
|
||||
/* Min 1536px */
|
||||
@import './utilities/2xl.css';
|
||||
|
||||
/* Padding */
|
||||
@import './utilities/p.css';
|
||||
@import './utilities/pl.css';
|
||||
|
||||
@@ -1,164 +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.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 1536px) {
|
||||
.cu-2xl-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-2xl-border-base {
|
||||
border-color: var(--canon-border);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-border-error {
|
||||
border-color: var(--canon-border-danger);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-border-selected {
|
||||
border-color: var(--canon-border-focus);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-2xl-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-2xl-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-2xl-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-2xl-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-2xl-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-2xl-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-2xl-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-2xl-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-2xl-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-2xl-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-2xs {
|
||||
border-radius: var(--canon-radius-1);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-lg {
|
||||
border-radius: var(--canon-radius-5);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-md {
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-sm {
|
||||
border-radius: var(--canon-radius-3);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-xl {
|
||||
border-radius: var(--canon-radius-6);
|
||||
}
|
||||
|
||||
.cu-2xl-rounded-xs {
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-2xl-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,26 @@
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.cu-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-fd-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-fd-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-fd-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.cu-fd-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
/* Breakpoint xs */
|
||||
@media (min-width: 640px) {
|
||||
.xs\:cu-align-start {
|
||||
@@ -23,6 +43,26 @@
|
||||
.xs\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.xs\:cu-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.xs\:cu-fd-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.xs\:cu-fd-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.xs\:cu-fd-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.xs\:cu-fd-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint sm */
|
||||
@@ -38,6 +78,26 @@
|
||||
.sm\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.sm\:cu-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sm\:cu-fd-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sm\:cu-fd-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sm\:cu-fd-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.sm\:cu-fd-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint md */
|
||||
@@ -53,6 +113,26 @@
|
||||
.md\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.md\:cu-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.md\:cu-fd-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:cu-fd-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.md\:cu-fd-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.md\:cu-fd-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint lg */
|
||||
@@ -68,6 +148,26 @@
|
||||
.lg\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.lg\:cu-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.lg\:cu-fd-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.lg\:cu-fd-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lg\:cu-fd-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.lg\:cu-fd-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint xl */
|
||||
@@ -83,4 +183,24 @@
|
||||
.xl\:cu-align-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.xl\:cu-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.xl\:cu-fd-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.xl\:cu-fd-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.xl\:cu-fd-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.xl\:cu-fd-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,164 +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.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 1024px) {
|
||||
.cu-lg-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-lg-border-base {
|
||||
border-color: var(--canon-border);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-border-error {
|
||||
border-color: var(--canon-border-danger);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-lg-border-selected {
|
||||
border-color: var(--canon-border-focus);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-lg-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-lg-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-lg-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-lg-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-lg-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-lg-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-lg-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-lg-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-lg-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-lg-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-lg-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-lg-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-lg-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-lg-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-lg-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-lg-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-lg-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-lg-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-lg-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-lg-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-2xs {
|
||||
border-radius: var(--canon-radius-1);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-lg {
|
||||
border-radius: var(--canon-radius-5);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-md {
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-lg-rounded-sm {
|
||||
border-radius: var(--canon-radius-3);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-xl {
|
||||
border-radius: var(--canon-radius-6);
|
||||
}
|
||||
|
||||
.cu-lg-rounded-xs {
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-lg-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,164 +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.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 768px) {
|
||||
.cu-md-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-md-border-base {
|
||||
border-color: var(--canon-border);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-border-error {
|
||||
border-color: var(--canon-border-danger);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-md-border-selected {
|
||||
border-color: var(--canon-border-focus);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-md-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-md-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-md-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-md-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-md-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-md-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-md-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-md-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-md-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-md-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-md-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-md-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-md-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-md-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-md-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-md-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-md-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-md-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-md-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-md-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
|
||||
.cu-md-rounded-2xs {
|
||||
border-radius: var(--canon-radius-1);
|
||||
}
|
||||
|
||||
.cu-md-rounded-lg {
|
||||
border-radius: var(--canon-radius-5);
|
||||
}
|
||||
|
||||
.cu-md-rounded-md {
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.cu-md-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-md-rounded-sm {
|
||||
border-radius: var(--canon-radius-3);
|
||||
}
|
||||
|
||||
.cu-md-rounded-xl {
|
||||
border-radius: var(--canon-radius-6);
|
||||
}
|
||||
|
||||
.cu-md-rounded-xs {
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-md-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,164 +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.
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
@media (min-width: 1280px) {
|
||||
.cu-xl-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cu-xl-border-base {
|
||||
border-color: var(--canon-border);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-border-error {
|
||||
border-color: var(--canon-border-danger);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-border-none {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cu-xl-border-selected {
|
||||
border-color: var(--canon-border-focus);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-border-warning {
|
||||
border-color: var(--canon-border-warning);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.cu-xl-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cu-xl-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cu-xl-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cu-xl-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cu-xl-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cu-xl-flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.cu-xl-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-xl-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cu-xl-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-xl-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cu-xl-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cu-xl-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cu-xl-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cu-xl-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cu-xl-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cu-xl-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cu-xl-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cu-xl-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cu-xl-justify-stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cu-xl-rounded-2xl {
|
||||
border-radius: var(--canon-radius-full);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-2xs {
|
||||
border-radius: var(--canon-radius-1);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-lg {
|
||||
border-radius: var(--canon-radius-5);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-md {
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cu-xl-rounded-sm {
|
||||
border-radius: var(--canon-radius-3);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-xl {
|
||||
border-radius: var(--canon-radius-6);
|
||||
}
|
||||
|
||||
.cu-xl-rounded-xs {
|
||||
border-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.cu-xl-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,6 @@ export * from './contexts/canon';
|
||||
export * from './components/Box';
|
||||
export * from './components/Grid';
|
||||
export * from './components/Stack';
|
||||
export * from './components/Inline';
|
||||
export * from './components/Container';
|
||||
export * from './components/Text';
|
||||
export * from './components/Heading';
|
||||
|
||||
Reference in New Issue
Block a user