From 49a1306f57b037896eb1a6fa77130542bd9d175a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 19 Dec 2024 11:43:36 +0000 Subject: [PATCH] Improve Grid Item Signed-off-by: Charles de Dreuille --- .../src/components/Grid/sprinkles.css.ts | 130 ------- packages/canon/src/css/utilities/2xl.css | 320 +++++++++++++++--- packages/canon/src/css/utilities/lg.css | 320 +++++++++++++++--- packages/canon/src/css/utilities/md.css | 320 +++++++++++++++--- packages/canon/src/css/utilities/sm.css | 320 +++++++++++++++--- packages/canon/src/css/utilities/xl.css | 320 +++++++++++++++--- packages/canon/src/css/utilities/xs.css | 320 +++++++++++++++--- packages/canon/src/types.ts | 8 +- packages/canon/src/utils/getClassNames.ts | 1 + 9 files changed, 1613 insertions(+), 446 deletions(-) delete mode 100644 packages/canon/src/components/Grid/sprinkles.css.ts diff --git a/packages/canon/src/components/Grid/sprinkles.css.ts b/packages/canon/src/components/Grid/sprinkles.css.ts deleted file mode 100644 index aff5a340ed..0000000000 --- a/packages/canon/src/components/Grid/sprinkles.css.ts +++ /dev/null @@ -1,130 +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 { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'; -import { breakpoints } from '../../layout/properties'; -import { colorProperties, spacingProperties } from '../../layout/sprinkles.css'; - -const gridProperties = defineProperties({ - conditions: breakpoints, - defaultCondition: 'xs', - properties: { - gridTemplateColumns: { - 1: 'repeat(1, minmax(0, 1fr))', - 2: 'repeat(2, minmax(0, 1fr))', - 3: 'repeat(3, minmax(0, 1fr))', - 4: 'repeat(4, minmax(0, 1fr))', - 5: 'repeat(5, minmax(0, 1fr))', - 6: 'repeat(6, minmax(0, 1fr))', - 7: 'repeat(7, minmax(0, 1fr))', - 8: 'repeat(8, minmax(0, 1fr))', - 9: 'repeat(9, minmax(0, 1fr))', - 10: 'repeat(10, minmax(0, 1fr))', - 11: 'repeat(11, minmax(0, 1fr))', - 12: 'repeat(12, minmax(0, 1fr))', - auto: 'repeat(auto-fit, minmax(0, 1fr))', - }, - }, - shorthands: { - columns: ['gridTemplateColumns'], - }, -}); - -export const gridSprinkles = createSprinkles( - spacingProperties, - colorProperties, - gridProperties, -); - -const gridItemProperties = defineProperties({ - conditions: breakpoints, - defaultCondition: 'xs', - properties: { - gridColumn: { - 1: 'span 1 / span 1', - 2: 'span 2 / span 2', - 3: 'span 3 / span 3', - 4: 'span 4 / span 4', - 5: 'span 5 / span 5', - 6: 'span 6 / span 6', - 7: 'span 7 / span 7', - 8: 'span 8 / span 8', - 9: 'span 9 / span 9', - 10: 'span 10 / span 10', - 11: 'span 11 / span 11', - 12: 'span 12 / span 12', - full: '1 / -1', - }, - gridRow: { - 1: 'span 1 / span 1', - 2: 'span 2 / span 2', - 3: 'span 3 / span 3', - 4: 'span 4 / span 4', - 5: 'span 5 / span 5', - 6: 'span 6 / span 6', - 7: 'span 7 / span 7', - 8: 'span 8 / span 8', - 9: 'span 9 / span 9', - 10: 'span 10 / span 10', - 11: 'span 11 / span 11', - 12: 'span 12 / span 12', - full: '1 / -1', - }, - gridColumnStart: { - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', - auto: 'auto', - }, - gridColumnEnd: { - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', - auto: 'auto', - }, - }, - shorthands: { - colSpan: ['gridColumn'], - rowSpan: ['gridRow'], - start: ['gridColumnStart'], - end: ['gridColumnEnd'], - }, -}); - -export const gridItemSprinkles = createSprinkles( - colorProperties, - gridItemProperties, -); diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 9ee818e052..8938d0dbc5 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -49,6 +49,170 @@ border-style: solid; } + .cu-2xl-col-end-1 { + grid-column-end: 1; + } + + .cu-2xl-col-end-10 { + grid-column-end: 10; + } + + .cu-2xl-col-end-11 { + grid-column-end: 11; + } + + .cu-2xl-col-end-12 { + grid-column-end: 12; + } + + .cu-2xl-col-end-13 { + grid-column-end: 13; + } + + .cu-2xl-col-end-2 { + grid-column-end: 2; + } + + .cu-2xl-col-end-3 { + grid-column-end: 3; + } + + .cu-2xl-col-end-4 { + grid-column-end: 4; + } + + .cu-2xl-col-end-5 { + grid-column-end: 5; + } + + .cu-2xl-col-end-6 { + grid-column-end: 6; + } + + .cu-2xl-col-end-7 { + grid-column-end: 7; + } + + .cu-2xl-col-end-8 { + grid-column-end: 8; + } + + .cu-2xl-col-end-9 { + grid-column-end: 9; + } + + .cu-2xl-col-end-auto { + grid-column-end: auto; + } + + .cu-2xl-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-2xl-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-2xl-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-2xl-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-2xl-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-2xl-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-2xl-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-2xl-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-2xl-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-2xl-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-2xl-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-2xl-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-2xl-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-2xl-col-start-1 { + grid-column-start: 1; + } + + .cu-2xl-col-start-10 { + grid-column-start: 10; + } + + .cu-2xl-col-start-11 { + grid-column-start: 11; + } + + .cu-2xl-col-start-12 { + grid-column-start: 12; + } + + .cu-2xl-col-start-13 { + grid-column-start: 13; + } + + .cu-2xl-col-start-2 { + grid-column-start: 2; + } + + .cu-2xl-col-start-3 { + grid-column-start: 3; + } + + .cu-2xl-col-start-4 { + grid-column-start: 4; + } + + .cu-2xl-col-start-5 { + grid-column-start: 5; + } + + .cu-2xl-col-start-6 { + grid-column-start: 6; + } + + .cu-2xl-col-start-7 { + grid-column-start: 7; + } + + .cu-2xl-col-start-8 { + grid-column-start: 8; + } + + .cu-2xl-col-start-9 { + grid-column-start: 9; + } + + .cu-2xl-col-start-auto { + grid-column-start: auto; + } + .cu-2xl-flex { display: flex; } @@ -105,6 +269,58 @@ display: grid; } + .cu-2xl-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .cu-2xl-hidden { display: none; } @@ -609,60 +825,60 @@ border-radius: var(--canon-border-radius-xs); } + .cu-2xl-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-2xl-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-2xl-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-2xl-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-2xl-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-2xl-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-2xl-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-2xl-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-2xl-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-2xl-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-2xl-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-2xl-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-2xl-row-span-auto { + grid-row: span auto / span auto; + } + .cu-2xl-wrap-reverse { flex-wrap: wrap-reverse; } - - .cu-2xl-grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .cu-2xl-grid-cols-auto { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } } } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index 0bedcdddd2..3053a0dde3 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -49,6 +49,170 @@ border-style: solid; } + .cu-lg-col-end-1 { + grid-column-end: 1; + } + + .cu-lg-col-end-10 { + grid-column-end: 10; + } + + .cu-lg-col-end-11 { + grid-column-end: 11; + } + + .cu-lg-col-end-12 { + grid-column-end: 12; + } + + .cu-lg-col-end-13 { + grid-column-end: 13; + } + + .cu-lg-col-end-2 { + grid-column-end: 2; + } + + .cu-lg-col-end-3 { + grid-column-end: 3; + } + + .cu-lg-col-end-4 { + grid-column-end: 4; + } + + .cu-lg-col-end-5 { + grid-column-end: 5; + } + + .cu-lg-col-end-6 { + grid-column-end: 6; + } + + .cu-lg-col-end-7 { + grid-column-end: 7; + } + + .cu-lg-col-end-8 { + grid-column-end: 8; + } + + .cu-lg-col-end-9 { + grid-column-end: 9; + } + + .cu-lg-col-end-auto { + grid-column-end: auto; + } + + .cu-lg-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-lg-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-lg-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-lg-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-lg-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-lg-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-lg-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-lg-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-lg-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-lg-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-lg-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-lg-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-lg-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-lg-col-start-1 { + grid-column-start: 1; + } + + .cu-lg-col-start-10 { + grid-column-start: 10; + } + + .cu-lg-col-start-11 { + grid-column-start: 11; + } + + .cu-lg-col-start-12 { + grid-column-start: 12; + } + + .cu-lg-col-start-13 { + grid-column-start: 13; + } + + .cu-lg-col-start-2 { + grid-column-start: 2; + } + + .cu-lg-col-start-3 { + grid-column-start: 3; + } + + .cu-lg-col-start-4 { + grid-column-start: 4; + } + + .cu-lg-col-start-5 { + grid-column-start: 5; + } + + .cu-lg-col-start-6 { + grid-column-start: 6; + } + + .cu-lg-col-start-7 { + grid-column-start: 7; + } + + .cu-lg-col-start-8 { + grid-column-start: 8; + } + + .cu-lg-col-start-9 { + grid-column-start: 9; + } + + .cu-lg-col-start-auto { + grid-column-start: auto; + } + .cu-lg-flex { display: flex; } @@ -105,6 +269,58 @@ display: grid; } + .cu-lg-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .cu-lg-hidden { display: none; } @@ -609,60 +825,60 @@ border-radius: var(--canon-border-radius-xs); } + .cu-lg-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-lg-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-lg-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-lg-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-lg-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-lg-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-lg-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-lg-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-lg-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-lg-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-lg-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-lg-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-lg-row-span-auto { + grid-row: span auto / span auto; + } + .cu-lg-wrap-reverse { flex-wrap: wrap-reverse; } - - .cu-lg-grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .cu-lg-grid-cols-auto { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } } } diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index ae163d9275..62491f047a 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -49,6 +49,170 @@ border-style: solid; } + .cu-md-col-end-1 { + grid-column-end: 1; + } + + .cu-md-col-end-10 { + grid-column-end: 10; + } + + .cu-md-col-end-11 { + grid-column-end: 11; + } + + .cu-md-col-end-12 { + grid-column-end: 12; + } + + .cu-md-col-end-13 { + grid-column-end: 13; + } + + .cu-md-col-end-2 { + grid-column-end: 2; + } + + .cu-md-col-end-3 { + grid-column-end: 3; + } + + .cu-md-col-end-4 { + grid-column-end: 4; + } + + .cu-md-col-end-5 { + grid-column-end: 5; + } + + .cu-md-col-end-6 { + grid-column-end: 6; + } + + .cu-md-col-end-7 { + grid-column-end: 7; + } + + .cu-md-col-end-8 { + grid-column-end: 8; + } + + .cu-md-col-end-9 { + grid-column-end: 9; + } + + .cu-md-col-end-auto { + grid-column-end: auto; + } + + .cu-md-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-md-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-md-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-md-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-md-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-md-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-md-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-md-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-md-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-md-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-md-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-md-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-md-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-md-col-start-1 { + grid-column-start: 1; + } + + .cu-md-col-start-10 { + grid-column-start: 10; + } + + .cu-md-col-start-11 { + grid-column-start: 11; + } + + .cu-md-col-start-12 { + grid-column-start: 12; + } + + .cu-md-col-start-13 { + grid-column-start: 13; + } + + .cu-md-col-start-2 { + grid-column-start: 2; + } + + .cu-md-col-start-3 { + grid-column-start: 3; + } + + .cu-md-col-start-4 { + grid-column-start: 4; + } + + .cu-md-col-start-5 { + grid-column-start: 5; + } + + .cu-md-col-start-6 { + grid-column-start: 6; + } + + .cu-md-col-start-7 { + grid-column-start: 7; + } + + .cu-md-col-start-8 { + grid-column-start: 8; + } + + .cu-md-col-start-9 { + grid-column-start: 9; + } + + .cu-md-col-start-auto { + grid-column-start: auto; + } + .cu-md-flex { display: flex; } @@ -105,6 +269,58 @@ display: grid; } + .cu-md-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-md-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-md-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-md-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-md-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-md-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-md-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-md-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-md-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-md-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-md-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-md-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-md-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .cu-md-hidden { display: none; } @@ -609,60 +825,60 @@ border-radius: var(--canon-border-radius-xs); } + .cu-md-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-md-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-md-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-md-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-md-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-md-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-md-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-md-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-md-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-md-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-md-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-md-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-md-row-span-auto { + grid-row: span auto / span auto; + } + .cu-md-wrap-reverse { flex-wrap: wrap-reverse; } - - .cu-md-grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .cu-md-grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .cu-md-grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .cu-md-grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .cu-md-grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .cu-md-grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .cu-md-grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .cu-md-grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .cu-md-grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } - - .cu-md-grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .cu-md-grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .cu-md-grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .cu-md-grid-cols-auto { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } } } diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 4ddb1b9452..60ddf67de5 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -49,6 +49,170 @@ border-style: solid; } + .cu-sm-col-end-1 { + grid-column-end: 1; + } + + .cu-sm-col-end-10 { + grid-column-end: 10; + } + + .cu-sm-col-end-11 { + grid-column-end: 11; + } + + .cu-sm-col-end-12 { + grid-column-end: 12; + } + + .cu-sm-col-end-13 { + grid-column-end: 13; + } + + .cu-sm-col-end-2 { + grid-column-end: 2; + } + + .cu-sm-col-end-3 { + grid-column-end: 3; + } + + .cu-sm-col-end-4 { + grid-column-end: 4; + } + + .cu-sm-col-end-5 { + grid-column-end: 5; + } + + .cu-sm-col-end-6 { + grid-column-end: 6; + } + + .cu-sm-col-end-7 { + grid-column-end: 7; + } + + .cu-sm-col-end-8 { + grid-column-end: 8; + } + + .cu-sm-col-end-9 { + grid-column-end: 9; + } + + .cu-sm-col-end-auto { + grid-column-end: auto; + } + + .cu-sm-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-sm-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-sm-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-sm-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-sm-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-sm-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-sm-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-sm-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-sm-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-sm-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-sm-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-sm-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-sm-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-sm-col-start-1 { + grid-column-start: 1; + } + + .cu-sm-col-start-10 { + grid-column-start: 10; + } + + .cu-sm-col-start-11 { + grid-column-start: 11; + } + + .cu-sm-col-start-12 { + grid-column-start: 12; + } + + .cu-sm-col-start-13 { + grid-column-start: 13; + } + + .cu-sm-col-start-2 { + grid-column-start: 2; + } + + .cu-sm-col-start-3 { + grid-column-start: 3; + } + + .cu-sm-col-start-4 { + grid-column-start: 4; + } + + .cu-sm-col-start-5 { + grid-column-start: 5; + } + + .cu-sm-col-start-6 { + grid-column-start: 6; + } + + .cu-sm-col-start-7 { + grid-column-start: 7; + } + + .cu-sm-col-start-8 { + grid-column-start: 8; + } + + .cu-sm-col-start-9 { + grid-column-start: 9; + } + + .cu-sm-col-start-auto { + grid-column-start: auto; + } + .cu-sm-flex { display: flex; } @@ -105,6 +269,58 @@ display: grid; } + .cu-sm-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .cu-sm-hidden { display: none; } @@ -609,60 +825,60 @@ border-radius: var(--canon-border-radius-xs); } + .cu-sm-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-sm-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-sm-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-sm-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-sm-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-sm-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-sm-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-sm-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-sm-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-sm-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-sm-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-sm-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-sm-row-span-auto { + grid-row: span auto / span auto; + } + .cu-sm-wrap-reverse { flex-wrap: wrap-reverse; } - - .cu-sm-grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .cu-sm-grid-cols-auto { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } } } diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 8a7130e1a1..0a999756ae 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -49,6 +49,170 @@ border-style: solid; } + .cu-xl-col-end-1 { + grid-column-end: 1; + } + + .cu-xl-col-end-10 { + grid-column-end: 10; + } + + .cu-xl-col-end-11 { + grid-column-end: 11; + } + + .cu-xl-col-end-12 { + grid-column-end: 12; + } + + .cu-xl-col-end-13 { + grid-column-end: 13; + } + + .cu-xl-col-end-2 { + grid-column-end: 2; + } + + .cu-xl-col-end-3 { + grid-column-end: 3; + } + + .cu-xl-col-end-4 { + grid-column-end: 4; + } + + .cu-xl-col-end-5 { + grid-column-end: 5; + } + + .cu-xl-col-end-6 { + grid-column-end: 6; + } + + .cu-xl-col-end-7 { + grid-column-end: 7; + } + + .cu-xl-col-end-8 { + grid-column-end: 8; + } + + .cu-xl-col-end-9 { + grid-column-end: 9; + } + + .cu-xl-col-end-auto { + grid-column-end: auto; + } + + .cu-xl-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-xl-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-xl-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-xl-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-xl-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-xl-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-xl-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-xl-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-xl-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-xl-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-xl-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-xl-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-xl-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-xl-col-start-1 { + grid-column-start: 1; + } + + .cu-xl-col-start-10 { + grid-column-start: 10; + } + + .cu-xl-col-start-11 { + grid-column-start: 11; + } + + .cu-xl-col-start-12 { + grid-column-start: 12; + } + + .cu-xl-col-start-13 { + grid-column-start: 13; + } + + .cu-xl-col-start-2 { + grid-column-start: 2; + } + + .cu-xl-col-start-3 { + grid-column-start: 3; + } + + .cu-xl-col-start-4 { + grid-column-start: 4; + } + + .cu-xl-col-start-5 { + grid-column-start: 5; + } + + .cu-xl-col-start-6 { + grid-column-start: 6; + } + + .cu-xl-col-start-7 { + grid-column-start: 7; + } + + .cu-xl-col-start-8 { + grid-column-start: 8; + } + + .cu-xl-col-start-9 { + grid-column-start: 9; + } + + .cu-xl-col-start-auto { + grid-column-start: auto; + } + .cu-xl-flex { display: flex; } @@ -105,6 +269,58 @@ display: grid; } + .cu-xl-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .cu-xl-hidden { display: none; } @@ -609,60 +825,60 @@ border-radius: var(--canon-border-radius-xs); } + .cu-xl-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-xl-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-xl-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-xl-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-xl-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-xl-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-xl-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-xl-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-xl-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-xl-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-xl-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-xl-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-xl-row-span-auto { + grid-row: span auto / span auto; + } + .cu-xl-wrap-reverse { flex-wrap: wrap-reverse; } - - .cu-xl-grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .cu-xl-grid-cols-auto { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } } } diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index f278d96a7c..28ec25c817 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -48,6 +48,170 @@ border-style: solid; } + .cu-col-end-1 { + grid-column-end: 1; + } + + .cu-col-end-10 { + grid-column-end: 10; + } + + .cu-col-end-11 { + grid-column-end: 11; + } + + .cu-col-end-12 { + grid-column-end: 12; + } + + .cu-col-end-13 { + grid-column-end: 13; + } + + .cu-col-end-2 { + grid-column-end: 2; + } + + .cu-col-end-3 { + grid-column-end: 3; + } + + .cu-col-end-4 { + grid-column-end: 4; + } + + .cu-col-end-5 { + grid-column-end: 5; + } + + .cu-col-end-6 { + grid-column-end: 6; + } + + .cu-col-end-7 { + grid-column-end: 7; + } + + .cu-col-end-8 { + grid-column-end: 8; + } + + .cu-col-end-9 { + grid-column-end: 9; + } + + .cu-col-end-auto { + grid-column-end: auto; + } + + .cu-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-col-start-1 { + grid-column-start: 1; + } + + .cu-col-start-10 { + grid-column-start: 10; + } + + .cu-col-start-11 { + grid-column-start: 11; + } + + .cu-col-start-12 { + grid-column-start: 12; + } + + .cu-col-start-13 { + grid-column-start: 13; + } + + .cu-col-start-2 { + grid-column-start: 2; + } + + .cu-col-start-3 { + grid-column-start: 3; + } + + .cu-col-start-4 { + grid-column-start: 4; + } + + .cu-col-start-5 { + grid-column-start: 5; + } + + .cu-col-start-6 { + grid-column-start: 6; + } + + .cu-col-start-7 { + grid-column-start: 7; + } + + .cu-col-start-8 { + grid-column-start: 8; + } + + .cu-col-start-9 { + grid-column-start: 9; + } + + .cu-col-start-auto { + grid-column-start: auto; + } + .cu-flex { display: flex; } @@ -104,6 +268,58 @@ display: grid; } + .cu-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .cu-hidden { display: none; } @@ -608,59 +824,59 @@ border-radius: var(--canon-border-radius-xs); } + .cu-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-row-span-auto { + grid-row: span auto / span auto; + } + .cu-wrap-reverse { flex-wrap: wrap-reverse; } - - .cu-grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .cu-grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .cu-grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .cu-grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .cu-grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .cu-grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .cu-grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .cu-grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .cu-grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } - - .cu-grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .cu-grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .cu-grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .cu-grid-cols-auto { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } } diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts index fbb3c40864..08c3d481da 100644 --- a/packages/canon/src/types.ts +++ b/packages/canon/src/types.ts @@ -81,14 +81,14 @@ export interface UtilityProps extends SpaceProps { alignItems?: AlignItems | Partial>; border?: Border | Partial>; borderRadius?: BorderRadius | Partial>; + colEnd?: Columns | 'auto' | Partial>; + colSpan?: Columns | 'full' | Partial>; + colStart?: Columns | 'auto' | Partial>; + columns?: Columns | Partial>; display?: Display | Partial>; flexDirection?: FlexDirection | Partial>; flexWrap?: FlexWrap | Partial>; gap?: Space | Partial>; justifyContent?: JustifyContent | Partial>; - columns?: Columns | Partial>; rowSpan?: Columns | 'full' | Partial>; - colSpan?: Columns | 'full' | Partial>; - colStart?: Columns | 'auto' | Partial>; - colEnd?: Columns | 'auto' | Partial>; } diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts index 47584f35ec..684e633027 100644 --- a/packages/canon/src/utils/getClassNames.ts +++ b/packages/canon/src/utils/getClassNames.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import type { Breakpoint, UtilityProps } from '../types'; const spaceMap = (type: string) => ({