From c8f99115810cecebe9a562eb23405b9f372e185e Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 10 Jun 2023 18:41:11 +0200 Subject: [PATCH 01/22] fix: change casing for props and components --- content/2.styled-system/1.style-props.md | 480 +++++++++++------------ 1 file changed, 240 insertions(+), 240 deletions(-) diff --git a/content/2.styled-system/1.style-props.md b/content/2.styled-system/1.style-props.md index 6f0d5ab..3cd2416 100644 --- a/content/2.styled-system/1.style-props.md +++ b/content/2.styled-system/1.style-props.md @@ -22,36 +22,36 @@ each group. ```html ``` | Prop | CSS Property | Theme Key | | --------------------- | --------------------------------------------- | --------- | | `m`, `margin` | `margin` | `space` | -| `mt`, `marginTop` | `margin-top` | `space` | -| `mr`, `marginRight` | `margin-right` | `space` | -| `me`, `marginEnd` | `margin-inline-end` | `space` | -| `mb`, `marginBottom` | `margin-bottom` | `space` | -| `ml`, `marginLeft` | `margin-left` | `space` | -| `ms`, `marginStart` | `margin-inline-start` | `space` | -| `mx`, `marginX` | `margin-inline-start` + `margin-inline-end` | `space` | -| `my`, `marginY` | `margin-top` + `margin-bottom` | `space` | +| `mt`, `margin-top` | `margin-top` | `space` | +| `mr`, `margin-right` | `margin-right` | `space` | +| `me`, `margin-end` | `margin-inline-end` | `space` | +| `mb`, `margin-bottom` | `margin-bottom` | `space` | +| `ml`, `margin-left` | `margin-left` | `space` | +| `ms`, `margin-start` | `margin-inline-start` | `space` | +| `mx`, `margin-x` | `margin-inline-start` + `margin-inline-end` | `space` | +| `my`, `margin-y` | `margin-top` + `margin-bottom` | `space` | | `p`, `padding` | `padding` | `space` | -| `pt`, `paddingTop` | `padding-top` | `space` | -| `pr`, `paddingRight` | `padding-right` | `space` | -| `pe`, `paddingEnd` | `padding-inline-end` | `space` | -| `pb`, `paddingBottom` | `padding-bottom` | `space` | -| `pl`, `paddingLeft` | `padding-left` | `space` | -| `ps`, `paddingStart` | `padding-inline-start` | `space` | -| `px`, `paddingX` | `padding-inline-start` + `padding-inline-end` | `space` | -| `py`, `paddingY` | `padding-top` + `padding-bottom` | `space` | +| `pt`, `padding-top` | `padding-top` | `space` | +| `pr`, `padding-right` | `padding-right` | `space` | +| `pe`, `padding-end` | `padding-inline-end` | `space` | +| `pb`, `padding-bottom` | `padding-bottom` | `space` | +| `pl`, `padding-left` | `padding-left` | `space` | +| `ps`, `padding-start` | `padding-inline-start` | `space` | +| `px`, `padding-x` | `padding-inline-start` + `padding-inline-end` | `space` | +| `py`, `padding-y` | `padding-top` + `padding-bottom` | `space` | > For `mx` and `px` props, we use `margin-inline-start` and `margin-inline-end` > to ensure the generated styles are RTL-friendly @@ -61,13 +61,13 @@ each group. ```html ``` @@ -75,7 +75,7 @@ each group. | ------------------ | ------------------ | --------- | | `color` | `color` | `colors` | | `bg`, `background` | `background` | `colors` | -| `bgColor` | `background-color` | `colors` | +| `bg-color` | `background-color` | `colors` | | `opacity` | `opacity` | none | ### Gradient @@ -83,73 +83,73 @@ each group. ```html ``` | Prop | CSS Property | Theme Key | | -------------------------- | ------------------ | --------- | -| `bgGradient` | `background-image` | none | -| `bgClip`, `backgroundClip` | `background-clip` | none | +| `bg-gradient` | `background-image` | none | +| `bg-clip`, `background-clip` | `background-clip` | none | ### Typography ```html ``` | Prop | CSS Property | Theme Key | | ---------------- | ----------------- | ---------------- | -| `fontFamily` | `font-family` | `fonts` | -| `fontSize` | `font-size` | `fontSizes` | -| `fontWeight` | `font-weight` | `fontWeights` | -| `lineHeight` | `line-height` | `lineHeights` | -| `letterSpacing` | `letter-spacing` | `letterSpacings` | -| `textAlign` | `text-align` | none | -| `fontStyle` | `font-style` | none | -| `textTransform` | `text-transform` | none | -| `textDecoration` | `text-decoration` | none | +| `font-family` | `font-family` | `fonts` | +| `font-size` | `font-size` | `fontSizes` | +| `font-weight` | `font-weight` | `fontWeights` | +| `line-height` | `line-height` | `lineHeights` | +| `letter-spacing` | `letter-spacing` | `letterSpacings` | +| `text-align` | `text-align` | none | +| `font-style` | `font-style` | none | +| `text-transform` | `text-transform` | none | +| `text-decoration` | `text-decoration` | none | ### Layout, width and height ```html ``` @@ -157,56 +157,56 @@ each group. | ------------------- | ----------------- | --------- | | `w`, `width` | `width` | `sizes` | | `h`, `height` | `height` | `sizes` | -| `minW`, `minWidth` | `min-width` | `sizes` | -| `maxW`, `maxWidth` | `max-width` | `sizes` | -| `minH`, `minHeight` | `min-height` | `sizes` | -| `maxH`, `maxHeight` | `max-height` | `sizes` | -| `boxSize` | `width`, `height` | `sizes` | -| `verticalAlign` | `vertical-align` | none | +| `min-w`, `min-width` | `min-width` | `sizes` | +| `max-x`, `max-width` | `max-width` | `sizes` | +| `minH`, `min-height` | `min-height` | `sizes` | +| `maxH`, `max-height` | `max-height` | `sizes` | +| `box-size` | `width`, `height` | `sizes` | +| `vertical-align` | `vertical-align` | none | | `overflow` | `overflow` | none | -| `overflowX` | `overflow-x` | none | -| `overflowY` | `overflow-y` | none | +| `overflow-x` | `overflow-x` | none | +| `overflow-y` | `overflow-y` | none | ### Display ```html ``` | Prop | CSS Property | Theme Key | | ----------- | ------------------------- | ------------- | | `display` | `display` | none | -| `hideFrom` | `display` (at breakpoint) | `breakpoints` | -| `hideBelow` | `display` (at breakpoint) | `breakpoints` | +| `hide-from` | `display` (at breakpoint) | `breakpoints` | +| `hide-below` | `display` (at breakpoint) | `breakpoints` | ### Flexbox ```html ``` @@ -215,20 +215,20 @@ each group. | Prop | CSS Property | Theme Key | | ----------------------------------------- | ----------------- | --------- | | `gap` | `gap` | `space` | -| `rowGap` | `row-gap` | `space` | -| `columnGap` | `column-gap` | `space` | -| `alignItems`, \*`align` | `align-items` | none | -| `alignContent` | `align-content` | none | -| `justifyItems` | `justify-items` | none | -| `justifyContent`, \*`justify` | `justify-content` | none | -| `flexWrap`, \*`wrap` | `flex-wrap` | none | -| `flexDirection`, `flexDir`, \*`direction` | `flex-direction` | none | +| `row-gap` | `row-gap` | `space` | +| `column-gap` | `column-gap` | `space` | +| `align-items`, \*`align` | `align-items` | none | +| `align-content` | `align-content` | none | +| `justify-items` | `justify-items` | none | +| `justify-content`, \*`justify` | `justify-content` | none | +| `flex-wrap`, \*`wrap` | `flex-wrap` | none | +| `flex-direction`, `flex-dir`, \*`direction` | `flex-direction` | none | | `flex` | `flex` | none | -| `flexGrow` | `flex-grow` | none | -| `flexShrink` | `flex-shrink` | none | -| `flexBasis` | `flex-basis` | none | -| `justifySelf` | `justify-self` | none | -| `alignSelf` | `align-self` | none | +| `flex-grow` | `flex-grow` | none | +| `flex-shrink` | `flex-shrink` | none | +| `flex-basis` | `flex-basis` | none | +| `justify-self` | `justify-self` | none | +| `align-self` | `align-self` | none | | `order` | `order` | none | ### Grid Layout @@ -236,14 +236,14 @@ each group. ```html ``` @@ -251,144 +251,144 @@ each group. | Prop | CSS Property | Theme Key | | ------------------------------------------ | ----------------------- | --------- | -| `gridGap`, \*`gap` | `grid-gap` | `space` | -| `gridRowGap`, \*`rowGap` | `grid-row-gap` | `space` | -| `gridColumnGap`, \*`columnGap` | `grid-column-gap` | `space` | -| `gridColumn`, \*`column` | `grid-column` | none | -| `gridRow`, \*`row` | `grid-row` | none | -| `gridArea`, \*`area` | `grid-area` | none | -| `gridAutoFlow`, \*`autoFlow` | `grid-auto-flow` | none | -| `gridAutoRows`, \*`autoRows` | `grid-auto-rows` | none | -| `gridAutoColumns`, \*`autoColumns` | `grid-auto-columns` | none | -| `gridTemplateRows`, \*`templateRows` | `grid-template-rows` | none | -| `gridTemplateColumns`, \*`templateColumns` | `grid-template-columns` | none | -| `gridTemplateAreas`, \*`templateAreas` | `grid-template-areas` | none | +| `grid-gap`, \*`gap` | `grid-gap` | `space` | +| `grid-row-cap`, \*`row-gap` | `grid-row-gap` | `space` | +| `grid-column-gap`, \*`column-gap` | `grid-column-gap` | `space` | +| `grid-column`, \*`column` | `grid-column` | none | +| `grid-row`, \*`row` | `grid-row` | none | +| `grid-area`, \*`area` | `grid-area` | none | +| `grid-auto-flow`, \*`auto-flow` | `grid-auto-flow` | none | +| `grid-auto-rows`, \*`auto-rows` | `grid-auto-rows` | none | +| `grid-auto-columns`, \*`auto-columns` | `grid-auto-columns` | none | +| `grid-template-rows`, \*`template-rows` | `grid-template-rows` | none | +| `grid-template-columns`, \*`template-columns` | `grid-template-columns` | none | +| `grid-template-areas`, \*`template-areas` | `grid-template-areas` | none | ### Background ```html ``` | Prop | CSS Property | Theme Key | | ------------------------------------- | ----------------------- | --------- | | `bg`, `background` | `background` | none | -| `bgImage`, `backgroundImage` | `background-image` | none | -| `bgSize`, `backgroundSize` | `background-size` | none | -| `bgPosition`,`backgroundPosition` | `background-position` | none | -| `bgRepeat`,`backgroundRepeat` | `background-repeat` | none | -| `bgAttachment`,`backgroundAttachment` | `background-attachment` | none | +| `bg-image`, `background-image` | `background-image` | none | +| `bg-size`, `background-size` | `background-size` | none | +| `bg-position`,`background-position` | `background-position` | none | +| `bg-repeat`,`background-repeat` | `background-repeat` | none | +| `bg-attachment`,`background-attachment` | `background-attachment` | none | ### Borders ```html ``` | Prop | CSS Property | Theme Field | | ------------------- | ------------------------------ | -------------- | | `border` | `border` | `borders` | -| `borderWidth` | `border-width` | `borderWidths` | -| `borderStyle` | `border-style` | `borderStyles` | -| `borderColor` | `border-color` | `colors` | -| `borderTop` | `border-top` | `borders` | -| `borderTopWidth` | `border-top-width` | `borderWidths` | -| `borderTopStyle` | `border-top-style` | `borderStyles` | -| `borderTopColor` | `border-top-color` | `colors` | -| `borderRight` | `border-right` | `borders` | -| `borderEnd` | `border-inline-end` | `borders` | -| `borderRightWidth` | `border-right-width` | `borderWidths` | -| `borderEndWidth` | `border-inline-end-width` | `borderWidths` | -| `borderRightStyle` | `border-right-style` | `borderStyles` | -| `borderEndStyle` | `border-inline-end-style` | `borderStyles` | -| `borderRightColor` | `border-right-color` | `colors` | -| `borderEndColor` | `border-inline-end-color` | `colors` | -| `borderBottom` | `border-bottom` | `borders` | -| `borderBottomWidth` | `border-bottom-width` | `borderWidths` | -| `borderBottomStyle` | `border-bottom-style` | `borderStyles` | -| `borderBottomColor` | `border-bottom-color` | `colors` | -| `borderLeft` | `border-left` | `borders` | -| `borderStart` | `border-inline-start` | `borders` | -| `borderLeftWidth` | `border-left-width` | `borderWidths` | -| `borderStartWidth` | `border-inline-start-width` | `borderWidths` | -| `borderLeftStyle` | `border-left-style` | `borderStyles` | -| `borderStartStyle` | `border-inline-start-style` | `borderStyles` | -| `borderLeftColor` | `border-left-color` | `colors` | -| `borderStartColor` | `border-inline-start-color` | `colors` | -| `borderX` | `border-left` , `border-right` | `borders` | -| `borderY` | `border-top` , `border-bottom` | `borders` | +| `border-width` | `border-width` | `borderWidths` | +| `border-style` | `border-style` | `borderStyles` | +| `border-color` | `border-color` | `colors` | +| `border-top` | `border-top` | `borders` | +| `border-top-width` | `border-top-width` | `borderWidths` | +| `border-top-style` | `border-top-style` | `borderStyles` | +| `border-top-color` | `border-top-color` | `colors` | +| `border-right` | `border-right` | `borders` | +| `border-end` | `border-inline-end` | `borders` | +| `border-right-width` | `border-right-width` | `borderWidths` | +| `border-end-width` | `border-inline-end-width` | `borderWidths` | +| `border-right-style` | `border-right-style` | `borderStyles` | +| `border-end-style` | `border-inline-end-style` | `borderStyles` | +| `border-right-color` | `border-right-color` | `colors` | +| `border-end-color` | `border-inline-end-color` | `colors` | +| `border-bottom` | `border-bottom` | `borders` | +| `border-bottom-width` | `border-bottom-width` | `borderWidths` | +| `border-bottom-style` | `border-bottom-style` | `borderStyles` | +| `border-bottom-color` | `border-bottom-color` | `colors` | +| `border-left` | `border-left` | `borders` | +| `border-start` | `border-inline-start` | `borders` | +| `border-left-width` | `border-left-width` | `borderWidths` | +| `border-start-width` | `border-inline-start-width` | `borderWidths` | +| `border-left-style` | `border-left-style` | `borderStyles` | +| `border-start-style` | `border-inline-start-style` | `borderStyles` | +| `border-left-color` | `border-left-color` | `colors` | +| `border-start-color` | `border-inline-start-color` | `colors` | +| `border-x` | `border-left` , `border-right` | `borders` | +| `border-y` | `border-top` , `border-bottom` | `borders` | ### Border Radius ```html ``` | Prop | CSS Property | Theme Field | | ------------------------- | ---------------------------------------------------------------------------- | ----------- | -| `borderRadius` | `border-radius` | `radii` | -| `borderTopLeftRadius` | `border-top-left-radius` | `radii` | -| `borderTopStartRadius` | `border-top-left-radius` in LTR,
`border-top-right-radius` in RTL | `radii` | -| `borderTopRightRadius` | `border-top-right-radius` | `radii` | -| `borderTopEndRadius` | `border-top-right-radius` in LTR,
`border-top-left-radius` in RTL | `radii` | -| `borderBottomRightRadius` | `border-bottom-right-radius` | `radii` | -| `borderBottomEndRadius` | `border-bottom-right-radius` in LTR,
`border-bottom-left-radius` in RTL | `radii` | -| `borderBottomLeftRadius` | `border-bottom-left-radius` | `radii` | -| `borderBottomStartRadius` | `border-bottom-left-radius` in LTR,
`border-bottom-left-radius` in RTL | `radii` | -| `borderTopRadius` | `border-top-left-radius` + `border-top-right-radius` | `radii` | -| `borderRightRadius` | `border-top-right-radius` + `border-bottom-right-radius` | `radii` | -| `borderEndRadius` | `border-top-right-radius` + `border-bottom-right-radius` | `radii` | -| `borderBottomRadius` | `border-bottom-left-radius` + `border-bottom-right-radius` | `radii` | -| `borderLeftRadius` | `border-top-left-radius` + `border-bottom-left-radius` | `radii` | -| `borderStartRadius` | `border-top-left-radius` + `border-bottom-left-radius` | `radii` | +| `border-radius` | `border-radius` | `radii` | +| `border-top-left-radius` | `border-top-left-radius` | `radii` | +| `border-top-start-radius` | `border-top-left-radius` in LTR,
`border-top-right-radius` in RTL | `radii` | +| `border-top-right-radius` | `border-top-right-radius` | `radii` | +| `border-top-end-radius` | `border-top-right-radius` in LTR,
`border-top-left-radius` in RTL | `radii` | +| `border-bottom-right-radius` | `border-bottom-right-radius` | `radii` | +| `border-bottom-end-radius` | `border-bottom-right-radius` in LTR,
`border-bottom-left-radius` in RTL | `radii` | +| `border-bottom-left-radius` | `border-bottom-left-radius` | `radii` | +| `border-bottom-start-radius` | `border-bottom-left-radius` in LTR,
`border-bottom-left-radius` in RTL | `radii` | +| `border-top-radius` | `border-top-left-radius` + `border-top-right-radius` | `radii` | +| `border-right-radius` | `border-top-right-radius` + `border-bottom-right-radius` | `radii` | +| `border-end-radius` | `border-top-right-radius` + `border-bottom-right-radius` | `radii` | +| `border-bottom-radius` | `border-bottom-left-radius` + `border-bottom-right-radius` | `radii` | +| `border-left-radius` | `border-top-left-radius` + `border-bottom-left-radius` | `radii` | +| `border-start-radius` | `border-top-left-radius` + `border-bottom-left-radius` | `radii` | ### Position ```html ``` | Prop | CSS Property | Theme Field | | ---------------- | ------------ | ----------- | | `pos`,`position` | `position` | none | -| `zIndex` | `z-index` | `zIndices` | +| `z-index` | `z-index` | `zIndices` | | `top` | `top` | `space` | | `right` | `right` | `space` | | `bottom` | `bottom` | `space` | @@ -401,19 +401,19 @@ each group. - + - + Text with shadows - + ``` | Prop | CSS Property | Theme Field | | --------------------- | ------------- | ----------- | -| `textShadow` | `text-shadow` | `shadows` | -| `shadow`, `boxShadow` | `box-shadow` | `shadows` | +| `text-shadow` | `text-shadow` | `shadows` | +| `shadow`, `box-shadow` | `box-shadow` | `shadows` | ### Filter @@ -436,18 +436,18 @@ const basicBoxStyles = { ``` @@ -477,28 +477,28 @@ const innerBoxStyles = { ``` @@ -516,24 +516,24 @@ const innerBoxStyles = { | `blur` | `filter` | `blur` | | `brightness` | `filter` | none | | `contrast` | `filter` | none | -| `hueRotate` | `filter` | none | +| `hue-rotate` | `filter` | none | | `invert` | `filter` | none | | `saturate` | `filter` | none | -| `dropShadow` | `filter` | `shadows` | -| `backdropFilter` | `backdrop-filter` | none | -| `backdropBlur` | `backdrop-filter` | `blur` | -| `backdropBrightness` | `backdrop-filter` | none | -| `backdropContrast` | `backdrop-filter` | none | -| `backdropHueRotate` | `backdrop-filter` | none | -| `backdropInvert` | `backdrop-filter` | none | -| `backdropSaturate` | `backdrop-filter` | none | +| `drop-shadow` | `filter` | `shadows` | +| `backdrop-filter` | `backdrop-filter` | none | +| `backdrop-blur` | `backdrop-filter` | `blur` | +| `backdrop-brightness` | `backdrop-filter` | none | +| `backdrop-contrast` | `backdrop-filter` | none | +| `backdrop-hue-rotate` | `backdrop-filter` | none | +| `backdrop-invert` | `backdrop-filter` | none | +| `backdrop-saturate` | `backdrop-filter` | none | ### Pseudo ```html ``` @@ -573,8 +573,8 @@ const innerBoxStyles = { | `_active` | `&:active`
`&[data-active]` | none | | `_focus` | `&:focus`
`&[data-focus]` | none | | `_highlighted` | `&[data-highlighted]` | none | -| `_focusWithin` | `&:focus-within` | none | -| `_focusVisible` | `&:focus-visible` | none | +| `_focus-within` | `&:focus-within` | none | +| `_focus-visible` | `&:focus-visible` | none | | `_disabled` | `&[disabled]`
`&[aria-disabled=true]`
`&[data-disabled]` | none | | `_readOnly` | `&[aria-readonly=true]`
`&[readonly]`
`&[data-readonly]` | none | | `_before` | `&::before` | none | @@ -597,34 +597,34 @@ const innerBoxStyles = { | `_notFirst` | `&:not(:first-of-type)` | none | | `_notLast` | `&:not(:last-of-type)` | none | | `_visited` | `&:visited` | none | -| `_activeLink` | `&[aria-current=page]` | none | -| `_activeStep` | `&[aria-current=step]` | none | +| `_active-link` | `&[aria-current=page]` | none | +| `_active-step` | `&[aria-current=step]` | none | | `_indeterminate` | `&:indeterminate`
`&[aria-checked=mixed]`
`&[data-indeterminate]` | none | -| `_groupHover` | `[role=group]:hover &`
`[role=group][data-hover] &`
`[data-group]:hover &`
`[data-group][data-hover] &`
`.group:hover &`
`.group[data-hover] &` | none | -| `_peerHover` | `[data-peer]:hover ~ &`
`[data-peer][data-hover] ~ &`
`.peer:hover ~ &`
`.peer[data-hover] ~ &` | none | -| `_groupFocus` | `[role=group]:focus &`
`[role=group][data-focus] &`
`[data-group]:focus &`
`[data-group][data-focus] &`
`.group:focus &`
`.group[data-focus] &` | none | -| `_peerFocus` | `[data-peer]:focus ~ &`
`[data-peer][data-focus] ~ &`
`.peer:focus ~ &`
`.peer[data-focus] ~ &` | none | -| `_groupFocusVisible` | `[role=group]:focus-visible &`
`[data-group]:focus-visible &`
`.group:focus-visible &` | none | -| `_peerFocusVisible` | `[data-peer]:focus-visible ~ &`
`.peer:focus-visible ~ &` | none | -| `_groupActive` | `[role=group]:active &`
`[role=group][data-active] &`
`[data-group]:active &`
`[data-group][data-active] &`
`.group:active &`
`.group[data-active] &` | none | -| `_peerActive` | `[data-peer]:active ~ &`
`[data-peer][data-active] ~ &`
`.peer:active ~ &`
`.peer[data-active] ~ &` | none | -| `_groupDisabled` | `[role=group]:disabled &`
`[role=group][data-disabled] &`
`[data-group]:disabled &`
`[data-group][data-disabled] &`
`.group:disabled &`
`.group[data-disabled] &` | none | -| `_peerDisabled` | `[data-peer]:disabled ~ &`
`[data-peer][data-disabled] ~ &`
`.peer:disabled ~ &`
`.peer[data-disabled] ~ &` | none | -| `_groupInvalid` | `[role=group]:invalid &`
`[role=group][data-invalid] &`
`[data-group]:invalid &`
`[data-group][data-invalid] &`
`.group:invalid &`
`.group[data-invalid] &` | none | -| `_peerInvalid` | `[data-peer]:invalid ~ &`
`[data-peer][data-invalid] ~ &`
`.peer:invalid ~ &`
`.peer[data-invalid] ~ &` | none | -| `_groupChecked` | `[role=group]:checked &`
`[role=group][data-checked] &`
`[data-group]:checked &`
`[data-group][data-checked] &`
`.group:checked &`
`.group[data-checked] &` | none | -| `_peerChecked` | `[data-peer]:checked ~ &`
`[data-peer][data-checked] ~ &`
`.peer:checked ~ &`
`.peer[data-checked] ~ &` | none | -| `_groupFocusWithin` | `[role=group]:focus-within &`
`[data-group]:focus-within &`
`.group:focus-within &` | none | -| `_peerFocusWithin` | `[data-peer]:focus-within ~ &`
`.peer:focus-within ~ &` | none | -| `_peerPlaceholderShown` | `[data-peer]:placeholder-shown ~ &`
`.peer:placeholder-shown ~ &` | none | +| `_group-hover` | `[role=group]:hover &`
`[role=group][data-hover] &`
`[data-group]:hover &`
`[data-group][data-hover] &`
`.group:hover &`
`.group[data-hover] &` | none | +| `_peer-hover` | `[data-peer]:hover ~ &`
`[data-peer][data-hover] ~ &`
`.peer:hover ~ &`
`.peer[data-hover] ~ &` | none | +| `_group-focus` | `[role=group]:focus &`
`[role=group][data-focus] &`
`[data-group]:focus &`
`[data-group][data-focus] &`
`.group:focus &`
`.group[data-focus] &` | none | +| `_peer-focus` | `[data-peer]:focus ~ &`
`[data-peer][data-focus] ~ &`
`.peer:focus ~ &`
`.peer[data-focus] ~ &` | none | +| `_group-focus-visible` | `[role=group]:focus-visible &`
`[data-group]:focus-visible &`
`.group:focus-visible &` | none | +| `_peer-focus-visible` | `[data-peer]:focus-visible ~ &`
`.peer:focus-visible ~ &` | none | +| `_group-active` | `[role=group]:active &`
`[role=group][data-active] &`
`[data-group]:active &`
`[data-group][data-active] &`
`.group:active &`
`.group[data-active] &` | none | +| `_peer-active` | `[data-peer]:active ~ &`
`[data-peer][data-active] ~ &`
`.peer:active ~ &`
`.peer[data-active] ~ &` | none | +| `_group-disabled` | `[role=group]:disabled &`
`[role=group][data-disabled] &`
`[data-group]:disabled &`
`[data-group][data-disabled] &`
`.group:disabled &`
`.group[data-disabled] &` | none | +| `_peer-disabled` | `[data-peer]:disabled ~ &`
`[data-peer][data-disabled] ~ &`
`.peer:disabled ~ &`
`.peer[data-disabled] ~ &` | none | +| `_group-invalid` | `[role=group]:invalid &`
`[role=group][data-invalid] &`
`[data-group]:invalid &`
`[data-group][data-invalid] &`
`.group:invalid &`
`.group[data-invalid] &` | none | +| `_peer-invalid` | `[data-peer]:invalid ~ &`
`[data-peer][data-invalid] ~ &`
`.peer:invalid ~ &`
`.peer[data-invalid] ~ &` | none | +| `_group-checked` | `[role=group]:checked &`
`[role=group][data-checked] &`
`[data-group]:checked &`
`[data-group][data-checked] &`
`.group:checked &`
`.group[data-checked] &` | none | +| `_peer-checked` | `[data-peer]:checked ~ &`
`[data-peer][data-checked] ~ &`
`.peer:checked ~ &`
`.peer[data-checked] ~ &` | none | +| `_group-focus-within` | `[role=group]:focus-within &`
`[data-group]:focus-within &`
`.group:focus-within &` | none | +| `_peer-focus-within` | `[data-peer]:focus-within ~ &`
`.peer:focus-within ~ &` | none | +| `_peer-placeholder-shown` | `[data-peer]:placeholder-shown ~ &`
`.peer:placeholder-shown ~ &` | none | | `_placeholder` | `&::placeholder` | none | -| `_placeholderShown` | `&:placeholder-shown` | none | -| `_fullScreen` | `&:fullscreen` | none | +| `_placeholder-shown` | `&:placeholder-shown` | none | +| `_full-screen` | `&:fullscreen` | none | | `_selection` | `&::selection` | none | | `_rtl` | `[dir=rtl] &`
`&[dir=rtl]` | none | | `_ltr` | `[dir=ltr] &`
`&[dir=ltr]` | none | -| `_mediaDark` | `@media (prefers-color-scheme: dark)` | none | -| `_mediaReduceMotion` | `@media (prefers-reduced-motion: reduce)` | none | +| `_media-dark` | `@media (prefers-color-scheme: dark)` | none | +| `_media-reduce-motion` | `@media (prefers-reduced-motion: reduce)` | none | | `_dark` | `.chakra-ui-dark &`
`[data-theme=dark] &`
`&[data-theme=dark]` | none | | `_light` | `.chakra-ui-light &`
`[data-theme=light] &`
`&[data-theme=light]` | none | @@ -639,20 +639,20 @@ following props: | `appearance` | `appearance` | none | | `content` | `content` | none | | `transform` | `transform` | none | -| `transformOrigin` | `transform-origin` | none | +| `transform-origin` | `transform-origin` | none | | `visibility` | `visibility` | none | -| `whiteSpace` | `white-space` | none | -| `userSelect` | `user-select` | none | -| `pointerEvents` | `pointer-events` | none | -| `wordBreak` | `word-break` | none | -| `overflowWrap` | `overflow-wrap` | none | -| `textOverflow` | `text-overflow` | none | -| `boxSizing` | `box-sizing` | none | +| `white-space` | `white-space` | none | +| `user-select` | `user-select` | none | +| `pointer-events` | `pointer-events` | none | +| `word-break` | `word-break` | none | +| `overflow-wrap` | `overflow-wrap` | none | +| `text-overflow` | `text-overflow` | none | +| `box-sizing` | `box-sizing` | none | | `cursor` | `cursor` | none | | `resize` | `resize` | none | | `transition` | `transition` | none | -| `objectFit` | `object-fit` | none | -| `objectPosition` | `object-position` | none | +| `object-fit` | `object-fit` | none | +| `object-position` | `object-position` | none | | `float` | `float` | none | | `fill` | `fill` | `colors` | | `stroke` | `stroke` | `colors` | @@ -668,7 +668,7 @@ link instead. You can compose `a` and `Button` like this: ```html ``` From c683f9faddefaed196ce9706a9e0256aeef016de Mon Sep 17 00:00:00 2001 From: carwack Date: Sun, 11 Jun 2023 14:20:44 +0200 Subject: [PATCH 02/22] refactor: change name casing responsive styles --- .../2.styled-system/2.responsive-styles.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/content/2.styled-system/2.responsive-styles.md b/content/2.styled-system/2.responsive-styles.md index 2ee6332..e6cf102 100644 --- a/content/2.styled-system/2.responsive-styles.md +++ b/content/2.styled-system/2.responsive-styles.md @@ -36,14 +36,14 @@ is the recommended method. Let's say you have a `CBox` with the following properties: ```html - This is a box + This is a box ``` To make the `width` or `w` responsive using the array syntax, here's what you need to do: ```html - This is a box + This is a box ``` To interpret array responsive values, Chakra UI Vue converts the values defined in @@ -81,16 +81,16 @@ undefined alias key will define the base, non-responsive value. Let's say you have a `CText` that looks like this: ```html -This is a text +This is a text ``` -To make the `fontSize` responsive using the object syntax, here's what you need +To make the `font-size` responsive using the object syntax, here's what you need to do: ```html - + This is responsive text - + ``` > **Remember, Chakra UI Vue uses the min-width media query for responsive design**. @@ -109,7 +109,7 @@ change the style of most properties at a given breakpoint. ```html
- {/* responsive font size */} - Font Size + Font Size {/* responsive margin */} - + {/* responsive padding */} - Padding + Padding
``` @@ -138,7 +138,7 @@ This shortcut is an alternative to writing media queries out by hand. Given the following: ```html - + ``` It'll generate a CSS that looks like this @@ -181,7 +181,7 @@ md: '768px', lg: '960px', xl: '1200px', '2xl': '1536px', } // 3. Extend the theme const theme = extendTheme({ breakpoints }) // 4. Now you can use the custom breakpoints ``` @@ -196,39 +196,39 @@ on small screens, and a side-by-side layout on larger screens **(resize your browser to see it in action)**: ```html - - - + + - - - + + Marketing - - + Finding customers for your new business - - + + Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers. - - - + + + ``` From 66065e3b01608a35835e9dc58841bb2dd4d2dfe2 Mon Sep 17 00:00:00 2001 From: carwack Date: Sun, 11 Jun 2023 14:20:56 +0200 Subject: [PATCH 03/22] refactor: change name casing accordion --- content/4.components/accordion.md | 102 +++++++++++++++--------------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/content/4.components/accordion.md b/content/4.components/accordion.md index 67db1d4..276f0ee 100644 --- a/content/4.components/accordion.md +++ b/content/4.components/accordion.md @@ -40,26 +40,26 @@ By default, only one item may be expanded and it can only be collapsed again by :: ```html - - - + + + Watercraft - - Sample accordion content - - - + + Sample accordion content + + + Automobiles - - Sample accordion content - - - + + Sample accordion content + + + Aircrafts - - Sample accordion content - - + + Sample accordion content + + ``` ## Expand multiple items at once @@ -74,26 +74,26 @@ If you set `allow-multiple` to `true` then the accordion will permit multiple it :: ```html - - - + + + Watercraft - - Sample accordion content - - - + + Sample accordion content + + + Automobiles - - Sample accordion content - - - + + Sample accordion content + + + Aircrafts - - Sample accordion content - - + + Sample accordion content + + ``` ## Toggle each accordion item @@ -108,26 +108,26 @@ If you set `allow-toggle` to `true`, any expanded item may be collapsed again. :: ```html - - - + + + Watercraft - - Sample accordion content - - - + + Sample accordion content + + + Automobiles - - Sample accordion content - - - + + Sample accordion content + + + Aircrafts - - Sample accordion content - - + + Sample accordion content + + ``` ## Styling the expanded state From 5839c4e7c61f36922fb755d69b9019f9da402d76 Mon Sep 17 00:00:00 2001 From: carwack Date: Sun, 11 Jun 2023 14:24:46 +0200 Subject: [PATCH 04/22] refactor: change name casing alert --- content/4.components/alert.md | 166 +++++++++++++++++----------------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/content/4.components/alert.md b/content/4.components/alert.md index 1f6b5af..bf5a634 100644 --- a/content/4.components/alert.md +++ b/content/4.components/alert.md @@ -38,10 +38,10 @@ You can use the `CAlertTitle` and `CAlertDescription` component to display an al :: ```html - - Updated Successfully - Click to view your profile - + + Updated Successfully + Click to view your profile + ``` ### With Icon @@ -54,27 +54,27 @@ Icons are defined based on the `status` props passed in the `CAlert` component. :: ```html - - - Please,updat your KYC. - - - - - Incorrect Password - - - - - - Congratulations!. You scored above 75% - - - - - - Access revoked! - + + + Please,update your KYC. + + + + + Incorrect Password + + + + + + Congratulations! You scored above 75% + + + + + + Access revoked! + ``` ### With Status @@ -87,19 +87,19 @@ This alert offers the `status` prop to define severity or success based by color :: ```html - Please update your KYC. - - Your Info has been saved successfully. - - Unable to process request - - Password is Incorrect!. - + + Please update your KYC. + + + + Your info has been saved successfully. + + Unable to process request + + Password is Incorrect!. + ``` ### With Accent @@ -112,25 +112,25 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va :: ```html - - - Submitted Successfully! - - - - - Submitted Successfully! - - - - - Submitted Successfully! - - - - - Submitted Successfully! - + + + Submitted Successfully! + + + + + Submitted Successfully! + + + + + Submitted Successfully! + + + + + Submitted Successfully! + ``` ## Composition @@ -143,7 +143,7 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va :: ```html - - - Application Submitted! - + + Application Submitted! + + Our team will review your application. If you are found a fit for this role, someone will be in touch with you. Please do well to stay in touch - with our Jobs page - + with our Jobs page + + ``` `CAlert` can as well be used with other Chakra-Vue components, let's for example use the `CButton` alongside the `CAlert`. @@ -174,7 +174,7 @@ You can use the`variant` props on the `CAlert` to create variant styles. The `va ```javascript @@ -173,12 +173,12 @@ You can change the border color that shows when the input receives focus (`focus :: ```html - - - - - - + + + + + + ``` @@ -193,10 +193,10 @@ The placeholder of an input can be styled by using the `_placeholder` prop. Per ```html - - - - + + + + ``` @@ -213,7 +213,7 @@ Date and Time Picker :: ```html - + ``` Check for different input types available : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types From 7b63b0e6806d41aef6e18bd2f5a0f88dec10a317 Mon Sep 17 00:00:00 2001 From: carwack Date: Sun, 11 Jun 2023 14:36:53 +0200 Subject: [PATCH 11/22] refactor: change name casing tag --- content/4.components/tag.md | 78 ++++++++++++++++++------------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/content/4.components/tag.md b/content/4.components/tag.md index 4f1e31d..55faa1b 100644 --- a/content/4.components/tag.md +++ b/content/4.components/tag.md @@ -29,7 +29,7 @@ This package exports the following components : :: ```html -Sample Tag +Sample Tag ``` ### With custom attributes : @@ -41,7 +41,7 @@ This package exports the following components : :: ```html -Sample Tag +Sample Tag ``` ## With different sizes : @@ -61,9 +61,9 @@ This package exports the following components : :: ```html -Sample Tag -Sample Tag -Sample Tag +Sample Tag +Sample Tag +Sample Tag ``` ### With left icon @@ -92,18 +92,18 @@ This package exports the following components : :: ```html - - - Sample Tag - - - - Sample Tag - - - - Sample Tag - + + + Sample Tag + + + + Sample Tag + + + + Sample Tag + ``` ### With right icon @@ -132,10 +132,10 @@ This package exports the following components : :: ```html - - Sample Tag - - + + Sample Tag + + ``` ### With close button @@ -164,20 +164,20 @@ This package exports the following components : :: ```html - - Sample Tag - - - - - Sample Tag - - - - - Sample Tag - - + + Sample Tag + + + + + Sample Tag + + + + + Sample Tag + + ``` ### With custom element @@ -192,14 +192,14 @@ This package exports the following components : :: ```html - - + - Sample Tag - + Sample Tag + ``` \ No newline at end of file From 83622f6c9945d31aafeafb41856fcb4ec8e52f24 Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 00:15:04 +0200 Subject: [PATCH 12/22] fix: fix Cbox typo --- content/2.styled-system/2.responsive-styles.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/2.styled-system/2.responsive-styles.md b/content/2.styled-system/2.responsive-styles.md index e6cf102..3409936 100644 --- a/content/2.styled-system/2.responsive-styles.md +++ b/content/2.styled-system/2.responsive-styles.md @@ -36,14 +36,14 @@ is the recommended method. Let's say you have a `CBox` with the following properties: ```html - This is a box + This is a box ``` To make the `width` or `w` responsive using the array syntax, here's what you need to do: ```html - This is a box + This is a box ``` To interpret array responsive values, Chakra UI Vue converts the values defined in From 4116af81dd1dc1450da2cf668be04f2ec90cb323 Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 00:24:44 +0200 Subject: [PATCH 13/22] refactor: change name casing accordion examples --- .../examples/accordion/ExpandedStyle.vue | 22 ++++---- .../examples/accordion/SimpleAccordion.vue | 54 ++++++++++--------- 2 files changed, 40 insertions(+), 36 deletions(-) diff --git a/components/content/examples/accordion/ExpandedStyle.vue b/components/content/examples/accordion/ExpandedStyle.vue index 256051a..a318f02 100644 --- a/components/content/examples/accordion/ExpandedStyle.vue +++ b/components/content/examples/accordion/ExpandedStyle.vue @@ -1,22 +1,24 @@ diff --git a/components/content/examples/accordion/SimpleAccordion.vue b/components/content/examples/accordion/SimpleAccordion.vue index f3ec2bb..79c7477 100644 --- a/components/content/examples/accordion/SimpleAccordion.vue +++ b/components/content/examples/accordion/SimpleAccordion.vue @@ -1,40 +1,42 @@ From abc348cb8e83fe6e11c1421038d40813aedd6bac Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:24:36 +0200 Subject: [PATCH 14/22] refactor: change name casing examples alert --- .../content/examples/alert/AccentAlert.vue | 34 +++++++++---------- components/content/examples/alert/Alert.vue | 10 +++--- .../content/examples/alert/BaseAlert.vue | 13 +++---- .../content/examples/alert/Composition.vue | 14 ++++---- .../examples/alert/CompositionExample2.vue | 30 ++++++++-------- .../content/examples/alert/IconAlert.vue | 34 +++++++++---------- .../content/examples/alert/StatusAlert.vue | 28 ++++++++------- 7 files changed, 84 insertions(+), 79 deletions(-) diff --git a/components/content/examples/alert/AccentAlert.vue b/components/content/examples/alert/AccentAlert.vue index e9837b5..667c8f0 100644 --- a/components/content/examples/alert/AccentAlert.vue +++ b/components/content/examples/alert/AccentAlert.vue @@ -1,24 +1,24 @@ diff --git a/components/content/examples/alert/Alert.vue b/components/content/examples/alert/Alert.vue index fac9532..c1feba7 100644 --- a/components/content/examples/alert/Alert.vue +++ b/components/content/examples/alert/Alert.vue @@ -1,9 +1,9 @@ diff --git a/components/content/examples/alert/Composition.vue b/components/content/examples/alert/Composition.vue index 89ac908..7fc1251 100644 --- a/components/content/examples/alert/Composition.vue +++ b/components/content/examples/alert/Composition.vue @@ -1,5 +1,5 @@ From db79841563d12171e6f59b0b61d6f173e350061a Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:25:45 +0200 Subject: [PATCH 15/22] refactor: change name casing avatar examples --- components/content/examples/avatar/Avatar.vue | 4 ++-- components/content/examples/avatar/AvatarBadge.vue | 4 ++-- components/content/examples/avatar/AvatarGroup.vue | 14 +++++++------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/components/content/examples/avatar/Avatar.vue b/components/content/examples/avatar/Avatar.vue index ff3b967..a4d72cc 100644 --- a/components/content/examples/avatar/Avatar.vue +++ b/components/content/examples/avatar/Avatar.vue @@ -1,7 +1,7 @@ From 8adf3bf23bd1f0a284e4e21d09d223e86e33a9a1 Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:28:47 +0200 Subject: [PATCH 16/22] refactor: change name casing breadcrumb examples --- .../breadcrumb/BreadcrumbComposition.vue | 23 +++++++++-------- .../examples/breadcrumb/DefaultSeparator.vue | 23 +++++++++-------- .../breadcrumb/FunctionalSeparator.vue | 25 +++++++++---------- .../examples/breadcrumb/SimpleBreadcrumb.vue | 22 ++++++++-------- .../examples/breadcrumb/SlotSeparator.vue | 24 +++++++++--------- .../examples/breadcrumb/StringSeparator.vue | 23 +++++++++-------- 6 files changed, 71 insertions(+), 69 deletions(-) diff --git a/components/content/examples/breadcrumb/BreadcrumbComposition.vue b/components/content/examples/breadcrumb/BreadcrumbComposition.vue index e7238a2..6851fca 100644 --- a/components/content/examples/breadcrumb/BreadcrumbComposition.vue +++ b/components/content/examples/breadcrumb/BreadcrumbComposition.vue @@ -1,16 +1,17 @@ + diff --git a/components/content/examples/button/ButtonComposition.vue b/components/content/examples/button/ButtonComposition.vue index ebde8be..310e6ef 100644 --- a/components/content/examples/button/ButtonComposition.vue +++ b/components/content/examples/button/ButtonComposition.vue @@ -1,5 +1,5 @@ + diff --git a/components/content/examples/button/ButtonGroup.vue b/components/content/examples/button/ButtonGroup.vue index c688664..9626f26 100644 --- a/components/content/examples/button/ButtonGroup.vue +++ b/components/content/examples/button/ButtonGroup.vue @@ -1,9 +1,10 @@ + diff --git a/components/content/examples/button/CustomButton.vue b/components/content/examples/button/CustomButton.vue index eff7e59..d8c6ba2 100644 --- a/components/content/examples/button/CustomButton.vue +++ b/components/content/examples/button/CustomButton.vue @@ -1,5 +1,5 @@ + diff --git a/components/content/examples/button/IconButton.vue b/components/content/examples/button/IconButton.vue index 35589f8..609686e 100644 --- a/components/content/examples/button/IconButton.vue +++ b/components/content/examples/button/IconButton.vue @@ -1,5 +1,5 @@ + + \ No newline at end of file diff --git a/components/content/examples/button/LoadingButton.vue b/components/content/examples/button/LoadingButton.vue index fdd473d..eac7d8d 100644 --- a/components/content/examples/button/LoadingButton.vue +++ b/components/content/examples/button/LoadingButton.vue @@ -1,6 +1,6 @@ + diff --git a/components/content/examples/button/VariantButton.vue b/components/content/examples/button/VariantButton.vue index 4e07e0b..ce0d1a7 100644 --- a/components/content/examples/button/VariantButton.vue +++ b/components/content/examples/button/VariantButton.vue @@ -1,10 +1,11 @@ + From 3272aab41d83c2eebf9473820c9399409aeeed1a Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:33:52 +0200 Subject: [PATCH 18/22] refactor: change name casing checkbox examples --- .../content/examples/checkbox/Checkbox.vue | 2 +- .../examples/checkbox/CheckboxGroup.vue | 16 +++--- .../examples/checkbox/ColorsCheckbox.vue | 14 ++--- .../examples/checkbox/DisabledCheckbox.vue | 10 ++-- .../examples/checkbox/Indeterminate.vue | 54 +++++++++---------- .../examples/checkbox/SizesCheckbox.vue | 18 +++---- 6 files changed, 57 insertions(+), 57 deletions(-) diff --git a/components/content/examples/checkbox/Checkbox.vue b/components/content/examples/checkbox/Checkbox.vue index 0778a5b..8586721 100644 --- a/components/content/examples/checkbox/Checkbox.vue +++ b/components/content/examples/checkbox/Checkbox.vue @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/components/content/examples/checkbox/ColorsCheckbox.vue b/components/content/examples/checkbox/ColorsCheckbox.vue index 4f7c41d..5e12def 100644 --- a/components/content/examples/checkbox/ColorsCheckbox.vue +++ b/components/content/examples/checkbox/ColorsCheckbox.vue @@ -1,14 +1,14 @@ \ No newline at end of file diff --git a/components/content/examples/checkbox/DisabledCheckbox.vue b/components/content/examples/checkbox/DisabledCheckbox.vue index e369b82..c4da737 100644 --- a/components/content/examples/checkbox/DisabledCheckbox.vue +++ b/components/content/examples/checkbox/DisabledCheckbox.vue @@ -1,10 +1,10 @@ \ No newline at end of file diff --git a/components/content/examples/checkbox/Indeterminate.vue b/components/content/examples/checkbox/Indeterminate.vue index 90c9ffe..ab82e2f 100644 --- a/components/content/examples/checkbox/Indeterminate.vue +++ b/components/content/examples/checkbox/Indeterminate.vue @@ -1,6 +1,22 @@ + + - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/components/content/examples/checkbox/SizesCheckbox.vue b/components/content/examples/checkbox/SizesCheckbox.vue index 01dd036..b7a1b70 100644 --- a/components/content/examples/checkbox/SizesCheckbox.vue +++ b/components/content/examples/checkbox/SizesCheckbox.vue @@ -1,17 +1,17 @@ \ No newline at end of file From aa91d4e1960b8fe121e585d94544b9383f7621b2 Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:34:59 +0200 Subject: [PATCH 19/22] refactor: change name casing close button examples --- .../content/examples/closebutton/CloseButton.vue | 9 ++++++--- .../content/examples/closebutton/CloseButtonSizes.vue | 11 ++++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/components/content/examples/closebutton/CloseButton.vue b/components/content/examples/closebutton/CloseButton.vue index 7188dd0..6d4266c 100644 --- a/components/content/examples/closebutton/CloseButton.vue +++ b/components/content/examples/closebutton/CloseButton.vue @@ -1,6 +1,9 @@ - + + + + diff --git a/components/content/examples/closebutton/CloseButtonSizes.vue b/components/content/examples/closebutton/CloseButtonSizes.vue index 5d4fb17..57056eb 100644 --- a/components/content/examples/closebutton/CloseButtonSizes.vue +++ b/components/content/examples/closebutton/CloseButtonSizes.vue @@ -1,8 +1,9 @@ - + + From da40d6df18dbb0b5adc744cca60c94c933e6f55f Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:35:17 +0200 Subject: [PATCH 20/22] refactor: change name casing icon examples --- components/content/examples/icons/Icon.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/content/examples/icons/Icon.vue b/components/content/examples/icons/Icon.vue index 22c7434..8e28c36 100644 --- a/components/content/examples/icons/Icon.vue +++ b/components/content/examples/icons/Icon.vue @@ -1,6 +1,7 @@ + \ No newline at end of file From 1fcec235dff60c828dfddfbd58073843bae05446 Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:40:42 +0200 Subject: [PATCH 21/22] refactor: change name casing input examples --- .../content/examples/input/BasicInput.vue | 10 +++--- .../content/examples/input/InputAddon.vue | 31 ++++++++++--------- .../examples/input/InputAppearance.vue | 20 ++++++------ .../content/examples/input/InputDate.vue | 14 ++++----- .../content/examples/input/InputElements.vue | 30 +++++++++--------- .../content/examples/input/InputFocus.vue | 20 ++++++------ .../content/examples/input/InputHtmlSize.vue | 10 +++--- .../content/examples/input/InputPassword.vue | 26 ++++++++-------- .../examples/input/InputPlaceholderStyle.vue | 20 ++++++------ .../content/examples/input/SizeInput.vue | 20 ++++++------ 10 files changed, 101 insertions(+), 100 deletions(-) diff --git a/components/content/examples/input/BasicInput.vue b/components/content/examples/input/BasicInput.vue index 1b72748..bc8aa71 100644 --- a/components/content/examples/input/BasicInput.vue +++ b/components/content/examples/input/BasicInput.vue @@ -1,7 +1,7 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/components/content/examples/input/InputAddon.vue b/components/content/examples/input/InputAddon.vue index 0aa4d34..3463b90 100644 --- a/components/content/examples/input/InputAddon.vue +++ b/components/content/examples/input/InputAddon.vue @@ -1,19 +1,20 @@ + + + - - \ No newline at end of file diff --git a/components/content/examples/input/InputAppearance.vue b/components/content/examples/input/InputAppearance.vue index 2d90b0c..cbd9823 100644 --- a/components/content/examples/input/InputAppearance.vue +++ b/components/content/examples/input/InputAppearance.vue @@ -1,12 +1,12 @@ - - \ No newline at end of file + + + diff --git a/components/content/examples/input/InputDate.vue b/components/content/examples/input/InputDate.vue index 81a6fa3..5778b67 100644 --- a/components/content/examples/input/InputDate.vue +++ b/components/content/examples/input/InputDate.vue @@ -1,9 +1,9 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/components/content/examples/input/InputElements.vue b/components/content/examples/input/InputElements.vue index 38de4d8..53e45cc 100644 --- a/components/content/examples/input/InputElements.vue +++ b/components/content/examples/input/InputElements.vue @@ -1,18 +1,18 @@ + + - - \ No newline at end of file diff --git a/components/content/examples/input/InputFocus.vue b/components/content/examples/input/InputFocus.vue index 81b72b3..5936ec1 100644 --- a/components/content/examples/input/InputFocus.vue +++ b/components/content/examples/input/InputFocus.vue @@ -1,12 +1,12 @@ - - \ No newline at end of file + + + diff --git a/components/content/examples/input/InputHtmlSize.vue b/components/content/examples/input/InputHtmlSize.vue index 6e74bcf..a2b6280 100644 --- a/components/content/examples/input/InputHtmlSize.vue +++ b/components/content/examples/input/InputHtmlSize.vue @@ -1,7 +1,7 @@ - - \ No newline at end of file + + + diff --git a/components/content/examples/input/InputPassword.vue b/components/content/examples/input/InputPassword.vue index 42df7fc..7af3b94 100644 --- a/components/content/examples/input/InputPassword.vue +++ b/components/content/examples/input/InputPassword.vue @@ -1,16 +1,16 @@ - - \ No newline at end of file + + + diff --git a/components/content/examples/input/InputPlaceholderStyle.vue b/components/content/examples/input/InputPlaceholderStyle.vue index a2d8cb5..2178e9a 100644 --- a/components/content/examples/input/InputPlaceholderStyle.vue +++ b/components/content/examples/input/InputPlaceholderStyle.vue @@ -1,12 +1,12 @@ - - \ No newline at end of file + + + diff --git a/components/content/examples/input/SizeInput.vue b/components/content/examples/input/SizeInput.vue index ec16c6a..d17d42f 100644 --- a/components/content/examples/input/SizeInput.vue +++ b/components/content/examples/input/SizeInput.vue @@ -1,12 +1,12 @@ - - \ No newline at end of file + + + From 969b341b2f6773d4ca5e519aaff1f5c56dba48d5 Mon Sep 17 00:00:00 2001 From: carwack Date: Sat, 8 Jul 2023 15:48:04 +0200 Subject: [PATCH 22/22] refactor: change script position to above template --- .../examples/accordion/ExpandedStyle.vue | 22 +++++----- .../examples/accordion/SimpleAccordion.vue | 22 +++++----- .../content/examples/alert/AccentAlert.vue | 7 ++-- components/content/examples/alert/Alert.vue | 15 +++---- .../content/examples/alert/BaseAlert.vue | 9 ++-- .../content/examples/alert/Composition.vue | 31 +++++++------- .../examples/alert/CompositionExample2.vue | 28 ++++++------- .../content/examples/alert/IconAlert.vue | 7 ++-- .../content/examples/alert/StatusAlert.vue | 10 +++-- components/content/examples/avatar/Avatar.vue | 8 ++-- .../content/examples/avatar/AvatarBadge.vue | 8 ++-- .../content/examples/avatar/AvatarGroup.vue | 8 ++-- .../breadcrumb/BreadcrumbComposition.vue | 16 ++++---- .../examples/breadcrumb/DefaultSeparator.vue | 16 ++++---- .../breadcrumb/FunctionalSeparator.vue | 28 ++++++------- .../examples/breadcrumb/SimpleBreadcrumb.vue | 15 +++---- .../examples/breadcrumb/SlotSeparator.vue | 17 ++++---- .../examples/breadcrumb/StringSeparator.vue | 16 ++++---- .../content/examples/button/BaseButton.vue | 8 ++-- .../examples/button/ButtonComposition.vue | 8 ++-- .../content/examples/button/ButtonGroup.vue | 8 ++-- .../content/examples/button/CustomButton.vue | 8 ++-- .../content/examples/button/IconButton.vue | 8 ++-- .../content/examples/button/LoadingButton.vue | 41 ++++++++----------- .../content/examples/button/SizesButton.vue | 8 ++-- .../content/examples/button/VariantButton.vue | 8 ++-- .../content/examples/checkbox/Checkbox.vue | 8 ++-- .../examples/checkbox/Indeterminate.vue | 1 - 28 files changed, 197 insertions(+), 192 deletions(-) diff --git a/components/content/examples/accordion/ExpandedStyle.vue b/components/content/examples/accordion/ExpandedStyle.vue index a318f02..f8a756b 100644 --- a/components/content/examples/accordion/ExpandedStyle.vue +++ b/components/content/examples/accordion/ExpandedStyle.vue @@ -1,3 +1,15 @@ + + + - diff --git a/components/content/examples/accordion/SimpleAccordion.vue b/components/content/examples/accordion/SimpleAccordion.vue index 79c7477..fd516d3 100644 --- a/components/content/examples/accordion/SimpleAccordion.vue +++ b/components/content/examples/accordion/SimpleAccordion.vue @@ -1,3 +1,14 @@ + + - - diff --git a/components/content/examples/alert/AccentAlert.vue b/components/content/examples/alert/AccentAlert.vue index 667c8f0..e487604 100644 --- a/components/content/examples/alert/AccentAlert.vue +++ b/components/content/examples/alert/AccentAlert.vue @@ -1,3 +1,7 @@ + + - diff --git a/components/content/examples/alert/Alert.vue b/components/content/examples/alert/Alert.vue index c1feba7..032da08 100644 --- a/components/content/examples/alert/Alert.vue +++ b/components/content/examples/alert/Alert.vue @@ -1,10 +1,3 @@ - + + diff --git a/components/content/examples/alert/BaseAlert.vue b/components/content/examples/alert/BaseAlert.vue index 6fd5657..6c0c1d3 100644 --- a/components/content/examples/alert/BaseAlert.vue +++ b/components/content/examples/alert/BaseAlert.vue @@ -1,3 +1,8 @@ + + + - - diff --git a/components/content/examples/alert/Composition.vue b/components/content/examples/alert/Composition.vue index 7fc1251..4e741b0 100644 --- a/components/content/examples/alert/Composition.vue +++ b/components/content/examples/alert/Composition.vue @@ -1,3 +1,12 @@ + + - diff --git a/components/content/examples/alert/CompositionExample2.vue b/components/content/examples/alert/CompositionExample2.vue index 025e66c..71f0189 100644 --- a/components/content/examples/alert/CompositionExample2.vue +++ b/components/content/examples/alert/CompositionExample2.vue @@ -1,3 +1,17 @@ + + - - diff --git a/components/content/examples/alert/IconAlert.vue b/components/content/examples/alert/IconAlert.vue index 49d4fe3..c020650 100644 --- a/components/content/examples/alert/IconAlert.vue +++ b/components/content/examples/alert/IconAlert.vue @@ -1,3 +1,7 @@ + + - diff --git a/components/content/examples/alert/StatusAlert.vue b/components/content/examples/alert/StatusAlert.vue index 05b0171..e83f5c0 100644 --- a/components/content/examples/alert/StatusAlert.vue +++ b/components/content/examples/alert/StatusAlert.vue @@ -1,3 +1,9 @@ + + + + - - diff --git a/components/content/examples/avatar/Avatar.vue b/components/content/examples/avatar/Avatar.vue index a4d72cc..56ec007 100644 --- a/components/content/examples/avatar/Avatar.vue +++ b/components/content/examples/avatar/Avatar.vue @@ -1,9 +1,9 @@ + + - - diff --git a/components/content/examples/avatar/AvatarBadge.vue b/components/content/examples/avatar/AvatarBadge.vue index f31b8f1..7d5c472 100644 --- a/components/content/examples/avatar/AvatarBadge.vue +++ b/components/content/examples/avatar/AvatarBadge.vue @@ -1,9 +1,9 @@ + + - - diff --git a/components/content/examples/avatar/AvatarGroup.vue b/components/content/examples/avatar/AvatarGroup.vue index 8866fa0..cd8a8a8 100644 --- a/components/content/examples/avatar/AvatarGroup.vue +++ b/components/content/examples/avatar/AvatarGroup.vue @@ -1,3 +1,7 @@ + + - - diff --git a/components/content/examples/breadcrumb/BreadcrumbComposition.vue b/components/content/examples/breadcrumb/BreadcrumbComposition.vue index 6851fca..9d8b78e 100644 --- a/components/content/examples/breadcrumb/BreadcrumbComposition.vue +++ b/components/content/examples/breadcrumb/BreadcrumbComposition.vue @@ -1,3 +1,11 @@ + + - - diff --git a/components/content/examples/breadcrumb/DefaultSeparator.vue b/components/content/examples/breadcrumb/DefaultSeparator.vue index d10a8f4..6963a63 100644 --- a/components/content/examples/breadcrumb/DefaultSeparator.vue +++ b/components/content/examples/breadcrumb/DefaultSeparator.vue @@ -1,3 +1,11 @@ + + - - diff --git a/components/content/examples/breadcrumb/FunctionalSeparator.vue b/components/content/examples/breadcrumb/FunctionalSeparator.vue index 214a9c8..cdbf5f8 100644 --- a/components/content/examples/breadcrumb/FunctionalSeparator.vue +++ b/components/content/examples/breadcrumb/FunctionalSeparator.vue @@ -1,17 +1,3 @@ - - + + diff --git a/components/content/examples/breadcrumb/SimpleBreadcrumb.vue b/components/content/examples/breadcrumb/SimpleBreadcrumb.vue index ba80f65..6963a63 100644 --- a/components/content/examples/breadcrumb/SimpleBreadcrumb.vue +++ b/components/content/examples/breadcrumb/SimpleBreadcrumb.vue @@ -1,3 +1,11 @@ + + - diff --git a/components/content/examples/breadcrumb/SlotSeparator.vue b/components/content/examples/breadcrumb/SlotSeparator.vue index ffec97e..9da6eb0 100644 --- a/components/content/examples/breadcrumb/SlotSeparator.vue +++ b/components/content/examples/breadcrumb/SlotSeparator.vue @@ -1,3 +1,12 @@ + +