From 73599c22aa2e6fd1fc9c4fe56015d5e66845df86 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Jun 2019 15:11:07 -0400 Subject: [PATCH] docs(components): document what start and end mean for CSS variables (#18538) --- .../components/action-sheet/action-sheet.scss | 3 +- core/src/components/action-sheet/readme.md | 24 +++---- .../components/back-button/back-button.scss | 36 +++++------ core/src/components/back-button/readme.md | 64 +++++++++---------- core/src/components/badge/badge.scss | 8 +-- core/src/components/badge/readme.md | 16 ++--- core/src/components/button/button.scss | 16 ++--- core/src/components/button/readme.md | 44 ++++++------- core/src/components/content/content.scss | 22 ++++--- core/src/components/content/readme.md | 28 ++++---- core/src/components/datetime/datetime.scss | 8 +-- core/src/components/datetime/readme.md | 14 ++-- .../src/components/fab-button/fab-button.scss | 18 +++--- core/src/components/fab-button/readme.md | 38 +++++------ core/src/components/input/input.scss | 7 +- core/src/components/input/readme.md | 24 +++---- .../components/item-divider/item-divider.scss | 4 +- core/src/components/item-divider/readme.md | 24 +++---- core/src/components/item/item.scss | 18 ++++-- core/src/components/item/readme.md | 60 ++++++++--------- .../components/menu-button/menu-button.scss | 12 ++-- core/src/components/menu-button/readme.md | 26 ++++---- core/src/components/segment-button/readme.md | 52 +++++++-------- .../segment-button/segment-button.scss | 12 ++-- core/src/components/select/readme.md | 12 ++-- core/src/components/select/select.scss | 4 +- core/src/components/tab-button/readme.md | 22 +++---- .../src/components/tab-button/tab-button.scss | 8 +-- core/src/components/textarea/readme.md | 26 ++++---- core/src/components/textarea/textarea.scss | 8 ++- core/src/components/toast/readme.md | 36 +++++------ core/src/components/toast/toast.scss | 4 +- core/src/components/toolbar/readme.md | 26 ++++---- core/src/components/toolbar/toolbar.scss | 11 +++- 34 files changed, 380 insertions(+), 355 deletions(-) diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index cf96f828ef..c9c5b92636 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -6,8 +6,9 @@ :host { /** * @prop --background: Background of the action sheet group - * @prop --background-activated: Background of the activated action sheet button + * @prop --background-activated: Background of the action sheet button when pressed * @prop --background-selected: Background of the selected action sheet button + * * @prop --color: Color of the action sheet text * * @prop --min-width: Minimum width of the action sheet diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index e9cf03d347..2e1b06eb88 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -320,18 +320,18 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ------------------------ | ----------------------------------------------- | -| `--background` | Background of the action sheet group | -| `--background-activated` | Background of the activated action sheet button | -| `--background-selected` | Background of the selected action sheet button | -| `--color` | Color of the action sheet text | -| `--height` | height of the action sheet | -| `--max-height` | Maximum height of the action sheet | -| `--max-width` | Maximum width of the action sheet | -| `--min-height` | Minimum height of the action sheet | -| `--min-width` | Minimum width of the action sheet | -| `--width` | Width of the action sheet | +| Name | Description | +| ------------------------ | -------------------------------------------------- | +| `--background` | Background of the action sheet group | +| `--background-activated` | Background of the action sheet button when pressed | +| `--background-selected` | Background of the selected action sheet button | +| `--color` | Color of the action sheet text | +| `--height` | height of the action sheet | +| `--max-height` | Maximum height of the action sheet | +| `--max-width` | Maximum width of the action sheet | +| `--min-height` | Minimum height of the action sheet | +| `--min-width` | Minimum width of the action sheet | +| `--width` | Width of the action sheet | ## Dependencies diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index 4e4da235a4..f240d51ead 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -6,11 +6,11 @@ :host { /** * @prop --background: Background of the button - * @prop --background-focused: Background of the button when focused + * @prop --background-focused: Background of the button when focused with the tab key * @prop --background-hover: Background of the button when hover * * @prop --color: Text color of the button - * @prop --color-focused: Text color of the button when focused + * @prop --color-focused: Text color of the button when focused with the tab key * @prop --color-hover: Text color of the button when hover * * @prop --min-width: Minimum width of the button @@ -24,25 +24,25 @@ * * @prop --opacity: Opacity of the button * - * @prop --margin-top: Margin top of the button - * @prop --margin-end: Margin end of the button - * @prop --margin-bottom: Margin bottom of the button - * @prop --margin-start: Margin start of the button + * @prop --margin-top: Top margin of the button + * @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button + * @prop --margin-bottom: Bottom margin of the button + * @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button * - * @prop --padding-top: Padding top of the button - * @prop --padding-end: Padding end of the button - * @prop --padding-bottom: Padding bottom of the button - * @prop --padding-start: Padding start of the button + * @prop --padding-top: Top padding of the button + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button + * @prop --padding-bottom: Bottom padding of the button + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button * - * @prop --icon-margin-top: Margin top of the button icon - * @prop --icon-margin-end: Margin end of the button icon - * @prop --icon-margin-bottom: Margin bottom of the button icon - * @prop --icon-margin-start: Margin start of the button icon + * @prop --icon-margin-top: Top margin of the button icon + * @prop --icon-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon + * @prop --icon-margin-bottom: Bottom margin of the button icon + * @prop --icon-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon * - * @prop --icon-padding-top: Padding top of the button icon - * @prop --icon-padding-end: Padding end of the button icon - * @prop --icon-padding-bottom: Padding bottom of the button icon - * @prop --icon-padding-start: Padding start of the button icon + * @prop --icon-padding-top: Top padding of the button icon + * @prop --icon-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon + * @prop --icon-padding-bottom: Bottom padding of the button icon + * @prop --icon-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon * * @prop --icon-font-size: Font size of the button icon * @prop --icon-font-weight: Font weight of the button icon diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md index 8e1d20c350..c8d8b203c6 100644 --- a/core/src/components/back-button/readme.md +++ b/core/src/components/back-button/readme.md @@ -245,38 +245,38 @@ export const BackButtonExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ----------------------- | ------------------------------------- | -| `--background` | Background of the button | -| `--background-focused` | Background of the button when focused | -| `--background-hover` | Background of the button when hover | -| `--border-radius` | Border radius of the button | -| `--color` | Text color of the button | -| `--color-focused` | Text color of the button when focused | -| `--color-hover` | Text color of the button when hover | -| `--icon-font-size` | Font size of the button icon | -| `--icon-font-weight` | Font weight of the button icon | -| `--icon-margin-bottom` | Margin bottom of the button icon | -| `--icon-margin-end` | Margin end of the button icon | -| `--icon-margin-start` | Margin start of the button icon | -| `--icon-margin-top` | Margin top of the button icon | -| `--icon-padding-bottom` | Padding bottom of the button icon | -| `--icon-padding-end` | Padding end of the button icon | -| `--icon-padding-start` | Padding start of the button icon | -| `--icon-padding-top` | Padding top of the button icon | -| `--margin-bottom` | Margin bottom of the button | -| `--margin-end` | Margin end of the button | -| `--margin-start` | Margin start of the button | -| `--margin-top` | Margin top of the button | -| `--min-height` | Minimum height of the button | -| `--min-width` | Minimum width of the button | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Padding bottom of the button | -| `--padding-end` | Padding end of the button | -| `--padding-start` | Padding start of the button | -| `--padding-top` | Padding top of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | +| Name | Description | +| ----------------------- | -------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the button | +| `--background-focused` | Background of the button when focused with the tab key | +| `--background-hover` | Background of the button when hover | +| `--border-radius` | Border radius of the button | +| `--color` | Text color of the button | +| `--color-focused` | Text color of the button when focused with the tab key | +| `--color-hover` | Text color of the button when hover | +| `--icon-font-size` | Font size of the button icon | +| `--icon-font-weight` | Font weight of the button icon | +| `--icon-margin-bottom` | Bottom margin of the button icon | +| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon | +| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon | +| `--icon-margin-top` | Top margin of the button icon | +| `--icon-padding-bottom` | Bottom padding of the button icon | +| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon | +| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon | +| `--icon-padding-top` | Top padding of the button icon | +| `--margin-bottom` | Bottom margin of the button | +| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button | +| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button | +| `--margin-top` | Top margin of the button | +| `--min-height` | Minimum height of the button | +| `--min-width` | Minimum width of the button | +| `--opacity` | Opacity of the button | +| `--padding-bottom` | Bottom padding of the button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | +| `--padding-top` | Top padding of the button | +| `--ripple-color` | Color of the button ripple effect | +| `--transition` | Transition of the button | ## Dependencies diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss index cb816ea9ce..22252d5523 100644 --- a/core/src/components/badge/badge.scss +++ b/core/src/components/badge/badge.scss @@ -8,10 +8,10 @@ * @prop --background: Background of the badge * @prop --color: Text color of the badge * - * @prop --padding-top: Padding top of the badge - * @prop --padding-end: Padding end of the badge - * @prop --padding-bottom: Padding bottom of the badge - * @prop --padding-start: Padding start of the badge + * @prop --padding-top: Top padding of the badge + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge + * @prop --padding-bottom: Bottom padding of the badge + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge */ --background: #{ion-color(primary, base)}; --color: #{ion-color(primary, contrast)}; diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md index 2ba0d10ca7..be13fccda3 100644 --- a/core/src/components/badge/readme.md +++ b/core/src/components/badge/readme.md @@ -106,14 +106,14 @@ export const BadgeExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ------------------ | --------------------------- | -| `--background` | Background of the badge | -| `--color` | Text color of the badge | -| `--padding-bottom` | Padding bottom of the badge | -| `--padding-end` | Padding end of the badge | -| `--padding-start` | Padding start of the badge | -| `--padding-top` | Padding top of the badge | +| Name | Description | +| ------------------ | -------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the badge | +| `--color` | Text color of the badge | +| `--padding-bottom` | Bottom padding of the badge | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge | +| `--padding-top` | Top padding of the badge | ---------------------------------------------- diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index db831697aa..00084382b6 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -6,13 +6,13 @@ :host { /** * @prop --background: Background of the button - * @prop --background-activated: Background of the button when activated - * @prop --background-focused: Background of the button when focused + * @prop --background-activated: Background of the button when pressed + * @prop --background-focused: Background of the button when focused with the tab key * @prop --background-hover: Background of the button on hover * * @prop --color: Text color of the button - * @prop --color-activated: Text color of the button when activated - * @prop --color-focused: Text color of the button when focused + * @prop --color-activated: Text color of the button when pressed + * @prop --color-focused: Text color of the button when focused with the tab key * @prop --color-hover: Text color of the button when hover * * @prop --transition: Transition of the button @@ -27,10 +27,10 @@ * @prop --box-shadow: Box shadow of the button * @prop --opacity: Opacity of the button * - * @prop --padding-top: Padding top of the button - * @prop --padding-end: Padding end of the button - * @prop --padding-bottom: Padding bottom of the button - * @prop --padding-start: Padding start of the button + * @prop --padding-top: Top padding of the button + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button + * @prop --padding-bottom: Bottom padding of the button + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button */ --overflow: hidden; --ripple-color: currentColor; diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md index 5cc989de93..6cf7963286 100644 --- a/core/src/components/button/readme.md +++ b/core/src/components/button/readme.md @@ -252,28 +252,28 @@ export const ButtonExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ------------------------ | --------------------------------------- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when activated | -| `--background-focused` | Background of the button when focused | -| `--background-hover` | Background of the button on hover | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when activated | -| `--color-focused` | Text color of the button when focused | -| `--color-hover` | Text color of the button when hover | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Padding bottom of the button | -| `--padding-end` | Padding end of the button | -| `--padding-start` | Padding start of the button | -| `--padding-top` | Padding top of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | +| Name | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the button | +| `--background-activated` | Background of the button when pressed | +| `--background-focused` | Background of the button when focused with the tab key | +| `--background-hover` | Background of the button on hover | +| `--border-color` | Border color of the button | +| `--border-radius` | Border radius of the button | +| `--border-style` | Border style of the button | +| `--border-width` | Border width of the button | +| `--box-shadow` | Box shadow of the button | +| `--color` | Text color of the button | +| `--color-activated` | Text color of the button when pressed | +| `--color-focused` | Text color of the button when focused with the tab key | +| `--color-hover` | Text color of the button when hover | +| `--opacity` | Opacity of the button | +| `--padding-bottom` | Bottom padding of the button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | +| `--padding-top` | Top padding of the button | +| `--ripple-color` | Color of the button ripple effect | +| `--transition` | Transition of the button | ## Dependencies diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index c2d52c6c02..822f50df5f 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -5,15 +5,19 @@ :host { /** - * @prop --background: Background of the Content - * @prop --color: Color of the Content - * @prop --padding-top: Padding top of the Content - * @prop --padding-bottom: Padding bottom of the Content - * @prop --padding-start: Padding start of the Content - * @prop --padding-end: Padding end of the Content - * @prop --keyboard-offset: Keyboard offset of the Content - * @prop --offset-top: Offset top of the Content - * @prop --offset-bottom: Offset bottom of the Content + * @prop --background: Background of the content + * + * @prop --color: Color of the content + * + * @prop --padding-top: Top padding of the content + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content + * @prop --padding-bottom: Bottom padding of the content + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content + * + * @prop --keyboard-offset: Keyboard offset of the content + * + * @prop --offset-top: Offset top of the content + * @prop --offset-bottom: Offset bottom of the content */ --background: #{$background-color}; --color: #{$text-color}; diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index e67e7f2781..eac498e519 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -1,8 +1,10 @@ # ion-content -Content component provides an easy to use content area with some useful methods +The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single -view component. +view. + +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). @@ -157,17 +159,17 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ------------------- | ------------------------------ | -| `--background` | Background of the Content | -| `--color` | Color of the Content | -| `--keyboard-offset` | Keyboard offset of the Content | -| `--offset-bottom` | Offset bottom of the Content | -| `--offset-top` | Offset top of the Content | -| `--padding-bottom` | Padding bottom of the Content | -| `--padding-end` | Padding end of the Content | -| `--padding-start` | Padding start of the Content | -| `--padding-top` | Padding top of the Content | +| Name | Description | +| ------------------- | ---------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the content | +| `--color` | Color of the content | +| `--keyboard-offset` | Keyboard offset of the content | +| `--offset-bottom` | Offset bottom of the content | +| `--offset-top` | Offset top of the content | +| `--padding-bottom` | Bottom padding of the content | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content | +| `--padding-top` | Top padding of the content | ---------------------------------------------- diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 980738ae6c..5e0e855e21 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -5,10 +5,10 @@ :host { /** - * @prop --padding-top: Padding top of the datetime - * @prop --padding-end: Padding end of the datetime - * @prop --padding-bottom: Padding bottom of the datetime - * @prop --padding-start: Padding start of the datetime + * @prop --padding-top: Top padding of the datetime + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime + * @prop --padding-bottom: Bottom padding of the datetime + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime * * @prop --placeholder-color: Color of the datetime placeholder */ diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index d2b2786ab8..efcc25a37e 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -694,13 +694,13 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| --------------------- | --------------------------------- | -| `--padding-bottom` | Padding bottom of the datetime | -| `--padding-end` | Padding end of the datetime | -| `--padding-start` | Padding start of the datetime | -| `--padding-top` | Padding top of the datetime | -| `--placeholder-color` | Color of the datetime placeholder | +| Name | Description | +| --------------------- | ----------------------------------------------------------------------------------------------------------- | +| `--padding-bottom` | Bottom padding of the datetime | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime | +| `--padding-top` | Top padding of the datetime | +| `--placeholder-color` | Color of the datetime placeholder | ---------------------------------------------- diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index e4f49a24c2..197a260531 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -6,12 +6,12 @@ :host { /** * @prop --background: Background of the button - * @prop --background-activated: Background of the button when activated - * @prop --background-focused: Background of the button when focused + * @prop --background-activated: Background of the button when pressed + * @prop --background-focused: Background of the button when focused with the tab key * * @prop --color: Text color of the button - * @prop --color-activated: Text color of the button when activated - * @prop --color-focused: Text color of the button when focused + * @prop --color-activated: Text color of the button when pressed + * @prop --color-focused: Text color of the button when focused with the tab key * * @prop --transition: Transition of the button * @@ -24,10 +24,10 @@ * * @prop --box-shadow: Box shadow of the button * - * @prop --padding-top: Padding top of the button - * @prop --padding-end: Padding end of the button - * @prop --padding-bottom: Padding bottom of the button - * @prop --padding-start: Padding start of the button + * @prop --padding-top: Top padding of the button + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button + * @prop --padding-bottom: Bottom padding of the button + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button */ --transition: background-color, opacity 100ms linear; --ripple-color: currentColor; @@ -39,7 +39,7 @@ --padding-end: 0; --padding-bottom: 0; --padding-start: 0; - + @include margin(0); display: block; diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index 42928ad754..22229899ed 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -125,25 +125,25 @@ export const FabButtonExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ------------------------ | --------------------------------------- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when activated | -| `--background-focused` | Background of the button when focused | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when activated | -| `--color-focused` | Text color of the button when focused | -| `--padding-bottom` | Padding bottom of the button | -| `--padding-end` | Padding end of the button | -| `--padding-start` | Padding start of the button | -| `--padding-top` | Padding top of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | +| Name | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the button | +| `--background-activated` | Background of the button when pressed | +| `--background-focused` | Background of the button when focused with the tab key | +| `--border-color` | Border color of the button | +| `--border-radius` | Border radius of the button | +| `--border-style` | Border style of the button | +| `--border-width` | Border width of the button | +| `--box-shadow` | Box shadow of the button | +| `--color` | Text color of the button | +| `--color-activated` | Text color of the button when pressed | +| `--color-focused` | Text color of the button when focused with the tab key | +| `--padding-bottom` | Bottom padding of the button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | +| `--padding-top` | Top padding of the button | +| `--ripple-color` | Color of the button ripple effect | +| `--transition` | Transition of the button | ## Dependencies diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 27c4327e0b..029797f098 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -6,11 +6,14 @@ :host { /** * @prop --background: Background of the input + * * @prop --color: Color of the input text + * * @prop --padding-top: Top padding of the input - * @prop --padding-end: End padding of the input + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input * @prop --padding-bottom: Bottom padding of the input - * @prop --padding-start: Start padding of the input + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input + * * @prop --placeholder-color: Color of the input placeholder text * @prop --placeholder-font-style: Font style of the input placeholder text * @prop --placeholder-font-weight: Font weight of the input placeholder text diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index cf1a9286f5..5886475fa1 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -277,18 +277,18 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| --------------------------- | ----------------------------------------- | -| `--background` | Background of the input | -| `--color` | Color of the input text | -| `--padding-bottom` | Bottom padding of the input | -| `--padding-end` | End padding of the input | -| `--padding-start` | Start padding of the input | -| `--padding-top` | Top padding of the input | -| `--placeholder-color` | Color of the input placeholder text | -| `--placeholder-font-style` | Font style of the input placeholder text | -| `--placeholder-font-weight` | Font weight of the input placeholder text | -| `--placeholder-opacity` | Opacity of the input placeholder text | +| Name | Description | +| --------------------------- | -------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the input | +| `--color` | Color of the input text | +| `--padding-bottom` | Bottom padding of the input | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input | +| `--padding-top` | Top padding of the input | +| `--placeholder-color` | Color of the input placeholder text | +| `--placeholder-font-style` | Font style of the input placeholder text | +| `--placeholder-font-weight` | Font weight of the input placeholder text | +| `--placeholder-opacity` | Opacity of the input placeholder text | ---------------------------------------------- diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index d6ac5037db..dfeeac13ac 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -11,9 +11,9 @@ * @prop --color: Color of the item divider * * @prop --padding-top: Top padding of the item divider - * @prop --padding-end: End padding of the item divider + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider * @prop --padding-bottom: Bottom padding of the item divider - * @prop --padding-start: Start padding of the item divider + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider * * @prop --inner-padding-top: Top inner padding of the item divider * @prop --inner-padding-end: End inner padding of the item divider diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md index f7fe68c1ef..230fbdb8ad 100644 --- a/core/src/components/item-divider/readme.md +++ b/core/src/components/item-divider/readme.md @@ -169,18 +169,18 @@ export const ItemDividerExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ------------------------ | ---------------------------------------- | -| `--background` | Background of the item divider | -| `--color` | Color of the item divider | -| `--inner-padding-bottom` | Bottom inner padding of the item divider | -| `--inner-padding-end` | End inner padding of the item divider | -| `--inner-padding-start` | Start inner padding of the item divider | -| `--inner-padding-top` | Top inner padding of the item divider | -| `--padding-bottom` | Bottom padding of the item divider | -| `--padding-end` | End padding of the item divider | -| `--padding-start` | Start padding of the item divider | -| `--padding-top` | Top padding of the item divider | +| Name | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the item divider | +| `--color` | Color of the item divider | +| `--inner-padding-bottom` | Bottom inner padding of the item divider | +| `--inner-padding-end` | End inner padding of the item divider | +| `--inner-padding-start` | Start inner padding of the item divider | +| `--inner-padding-top` | Top inner padding of the item divider | +| `--padding-bottom` | Bottom padding of the item divider | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider | +| `--padding-top` | Top padding of the item divider | ---------------------------------------------- diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 7cc2ea5fca..290a6ea965 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -6,29 +6,35 @@ :host { /** * @prop --background: Background of the item - * @prop --background-activated: Background of the activated item + * @prop --background-activated: Background of the item when pressed + * * @prop --border-color: Color of the item border * @prop --border-radius: Radius of the item border * @prop --border-style: Style of the item border * @prop --border-width: Width of the item border + * * @prop --box-shadow: Box shadow of the item + * * @prop --color: Color of the item * * @prop --detail-icon-color: Color of the item detail icon * @prop --detail-icon-opacity: Opacity of the item detail icon * @prop --detail-icon-font-size: Font size of the item detail icon * @prop --inner-border-width: Width of the item inner border + * * @prop --inner-box-shadow: Box shadow of the item inner - * @prop --inner-padding-bottom: Bottom padding of the item inner - * @prop --inner-padding-end: End padding of the item inner - * @prop --inner-padding-start: Start padding of the item inner * @prop --inner-padding-top: Top padding of the item inner + * @prop --inner-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner + * @prop --inner-padding-bottom: Bottom padding of the item inner + * @prop --inner-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner * * @prop --min-height: Minimum height of the item + * * @prop --padding-bottom: Bottom padding of the item - * @prop --padding-end: End padding of the item - * @prop --padding-start: Start padding of the item + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item * @prop --padding-top: Top padding of the item + * * @prop --transition: Transition of the item * * @prop --ripple-color: Color of the item ripple effect diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 2a710688e0..85a69b919f 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -1392,36 +1392,36 @@ Item Inputs ## CSS Custom Properties -| Name | Description | -| --------------------------- | --------------------------------------------------- | -| `--background` | Background of the item | -| `--background-activated` | Background of the activated item | -| `--border-color` | Color of the item border | -| `--border-radius` | Radius of the item border | -| `--border-style` | Style of the item border | -| `--border-width` | Width of the item border | -| `--box-shadow` | Box shadow of the item | -| `--color` | Color of the item | -| `--detail-icon-color` | Color of the item detail icon | -| `--detail-icon-font-size` | Font size of the item detail icon | -| `--detail-icon-opacity` | Opacity of the item detail icon | -| `--highlight-color-focused` | The color of the highlight on the item when focused | -| `--highlight-color-invalid` | The color of the highlight on the item when invalid | -| `--highlight-color-valid` | The color of the highlight on the item when valid | -| `--highlight-height` | The height of the highlight on the item | -| `--inner-border-width` | Width of the item inner border | -| `--inner-box-shadow` | Box shadow of the item inner | -| `--inner-padding-bottom` | Bottom padding of the item inner | -| `--inner-padding-end` | End padding of the item inner | -| `--inner-padding-start` | Start padding of the item inner | -| `--inner-padding-top` | Top padding of the item inner | -| `--min-height` | Minimum height of the item | -| `--padding-bottom` | Bottom padding of the item | -| `--padding-end` | End padding of the item | -| `--padding-start` | Start padding of the item | -| `--padding-top` | Top padding of the item | -| `--ripple-color` | Color of the item ripple effect | -| `--transition` | Transition of the item | +| Name | Description | +| --------------------------- | ------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the item | +| `--background-activated` | Background of the item when pressed | +| `--border-color` | Color of the item border | +| `--border-radius` | Radius of the item border | +| `--border-style` | Style of the item border | +| `--border-width` | Width of the item border | +| `--box-shadow` | Box shadow of the item | +| `--color` | Color of the item | +| `--detail-icon-color` | Color of the item detail icon | +| `--detail-icon-font-size` | Font size of the item detail icon | +| `--detail-icon-opacity` | Opacity of the item detail icon | +| `--highlight-color-focused` | The color of the highlight on the item when focused | +| `--highlight-color-invalid` | The color of the highlight on the item when invalid | +| `--highlight-color-valid` | The color of the highlight on the item when valid | +| `--highlight-height` | The height of the highlight on the item | +| `--inner-border-width` | Width of the item inner border | +| `--inner-box-shadow` | Box shadow of the item inner | +| `--inner-padding-bottom` | Bottom padding of the item inner | +| `--inner-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner | +| `--inner-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner | +| `--inner-padding-top` | Top padding of the item inner | +| `--min-height` | Minimum height of the item | +| `--padding-bottom` | Bottom padding of the item | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item | +| `--padding-top` | Top padding of the item | +| `--ripple-color` | Color of the item ripple effect | +| `--transition` | Transition of the item | ## Dependencies diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index c7437b6b6a..ba1fe5a65e 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -9,16 +9,16 @@ * * @prop --background: Background of the menu button * @prop --background-hover: Background of the menu button on hover - * @prop --background-focused: Background of the menu button when focused + * @prop --background-focused: Background of the menu button when focused with the tab key * * @prop --color: Color of the menu button * @prop --color-hover: Color of the menu button on hover - * @prop --color-focused: Color of the menu button when focused + * @prop --color-focused: Color of the menu button when focused with the tab key * - * @prop --padding-top: Padding top of the button - * @prop --padding-end: Padding end of the button - * @prop --padding-bottom: Padding bottom of the button - * @prop --padding-start: Padding start of the button + * @prop --padding-top: Top padding of the button + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button + * @prop --padding-bottom: Bottom padding of the button + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button */ --background: transparent; --color-focused: var(--color); diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md index 14a40d2753..7e90145e65 100644 --- a/core/src/components/menu-button/readme.md +++ b/core/src/components/menu-button/readme.md @@ -19,19 +19,19 @@ Menu Button is component that automatically creates the icon and functionality t ## CSS Custom Properties -| Name | Description | -| ---------------------- | ------------------------------------------ | -| `--background` | Background of the menu button | -| `--background-focused` | Background of the menu button when focused | -| `--background-hover` | Background of the menu button on hover | -| `--border-radius` | Border radius of the menu button | -| `--color` | Color of the menu button | -| `--color-focused` | Color of the menu button when focused | -| `--color-hover` | Color of the menu button on hover | -| `--padding-bottom` | Padding bottom of the button | -| `--padding-end` | Padding end of the button | -| `--padding-start` | Padding start of the button | -| `--padding-top` | Padding top of the button | +| Name | Description | +| ---------------------- | --------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the menu button | +| `--background-focused` | Background of the menu button when focused with the tab key | +| `--background-hover` | Background of the menu button on hover | +| `--border-radius` | Border radius of the menu button | +| `--color` | Color of the menu button | +| `--color-focused` | Color of the menu button when focused with the tab key | +| `--color-hover` | Color of the menu button on hover | +| `--padding-bottom` | Bottom padding of the button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | +| `--padding-top` | Top padding of the button | ## Dependencies diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index 2ae043534c..f1f0d30f9b 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -639,32 +639,32 @@ export const SegmentButtonExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| --------------------------- | ------------------------------------------------------------------- | -| `--background` | Background of the segment button | -| `--background-activated` | Background of the activated (pressed) segment button | -| `--background-checked` | Background of the checked segment button | -| `--background-hover` | Background of the segment button on hover | -| `--border-color` | Color of the segment button border | -| `--border-radius` | Radius of the segment button border | -| `--border-style` | Style of the segment button border | -| `--border-width` | Width of the segment button border | -| `--color` | Color of the segment button | -| `--color-activated` | Color of the activated segment button | -| `--color-checked` | Color of the checked segment button | -| `--color-checked-disabled` | Color of the checked & disabled segment button | -| `--color-disabled` | Color of the disabled segment button | -| `--indicator-color` | Color of the indicator (highlight) under the segment button | -| `--indicator-color-checked` | Color of the indicator (highlight) under the checked segment button | -| `--margin-bottom` | Bottom margin of the segment button | -| `--margin-end` | End margin of the segment button | -| `--margin-start` | Start margin of the segment button | -| `--margin-top` | Top margin of the segment button | -| `--padding-bottom` | Bottom padding of the segment button | -| `--padding-end` | End padding of the segment button | -| `--padding-start` | Start padding of the segment button | -| `--padding-top` | Top padding of the segment button | -| `--transition` | Transition of the segment button | +| Name | Description | +| --------------------------- | ----------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the segment button | +| `--background-activated` | Background of the segment button when pressed | +| `--background-checked` | Background of the checked segment button | +| `--background-hover` | Background of the segment button on hover | +| `--border-color` | Color of the segment button border | +| `--border-radius` | Radius of the segment button border | +| `--border-style` | Style of the segment button border | +| `--border-width` | Width of the segment button border | +| `--color` | Color of the segment button | +| `--color-activated` | Color of the segment button when pressed | +| `--color-checked` | Color of the checked segment button | +| `--color-checked-disabled` | Color of the checked & disabled segment button | +| `--color-disabled` | Color of the disabled segment button | +| `--indicator-color` | Color of the indicator (highlight) under the segment button | +| `--indicator-color-checked` | Color of the indicator (highlight) under the checked segment button | +| `--margin-bottom` | Bottom margin of the segment button | +| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button | +| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button | +| `--margin-top` | Top margin of the segment button | +| `--padding-bottom` | Bottom padding of the segment button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button | +| `--padding-top` | Top padding of the segment button | +| `--transition` | Transition of the segment button | ## Dependencies diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss index bc57bf9840..f14359a6f4 100644 --- a/core/src/components/segment-button/segment-button.scss +++ b/core/src/components/segment-button/segment-button.scss @@ -7,11 +7,11 @@ /** * @prop --background: Background of the segment button * @prop --background-hover: Background of the segment button on hover - * @prop --background-activated: Background of the activated (pressed) segment button + * @prop --background-activated: Background of the segment button when pressed * @prop --background-checked: Background of the checked segment button * * @prop --color: Color of the segment button - * @prop --color-activated: Color of the activated segment button + * @prop --color-activated: Color of the segment button when pressed * @prop --color-checked: Color of the checked segment button * @prop --color-disabled: Color of the disabled segment button * @prop --color-checked-disabled: Color of the checked & disabled segment button @@ -22,14 +22,14 @@ * @prop --border-width: Width of the segment button border * * @prop --margin-top: Top margin of the segment button - * @prop --margin-end: End margin of the segment button + * @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button * @prop --margin-bottom: Bottom margin of the segment button - * @prop --margin-start: Start margin of the segment button + * @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button * * @prop --padding-top: Top padding of the segment button - * @prop --padding-end: End padding of the segment button + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button * @prop --padding-bottom: Bottom padding of the segment button - * @prop --padding-start: Start padding of the segment button + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button * * @prop --transition: Transition of the segment button * diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index da47e467ba..d8642eee95 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -790,12 +790,12 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ------------------ | ---------------------------- | -| `--padding-bottom` | Bottom padding of the select | -| `--padding-end` | End padding of the select | -| `--padding-start` | Start padding of the select | -| `--padding-top` | Top padding of the select | +| Name | Description | +| ------------------ | --------------------------------------------------------------------------------------------------------- | +| `--padding-bottom` | Bottom padding of the select | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select | +| `--padding-top` | Top padding of the select | ---------------------------------------------- diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 166515a28b..6b0cc94cfd 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -6,9 +6,9 @@ :host { /** * @prop --padding-top: Top padding of the select - * @prop --padding-end: End padding of the select + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select * @prop --padding-bottom: Bottom padding of the select - * @prop --padding-start: Start padding of the select + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select */ @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md index fd1d4531c1..65a429a069 100644 --- a/core/src/components/tab-button/readme.md +++ b/core/src/components/tab-button/readme.md @@ -175,17 +175,17 @@ export const TabButtonExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ---------------------- | ------------------------------------ | -| `--background` | Background of the tab button | -| `--background-focused` | Background of the focused tab button | -| `--color` | Color of the tab button | -| `--color-selected` | Color of the selected tab button | -| `--padding-bottom` | Bottom padding of the tab button | -| `--padding-end` | End padding of the tab button | -| `--padding-start` | Start padding of the tab button | -| `--padding-top` | Top padding of the tab button | -| `--ripple-color` | Color of the button ripple effect | +| Name | Description | +| ---------------------- | ------------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the tab button | +| `--background-focused` | Background of the tab button when focused with the tab key | +| `--color` | Color of the tab button | +| `--color-selected` | Color of the selected tab button | +| `--padding-bottom` | Bottom padding of the tab button | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button | +| `--padding-top` | Top padding of the tab button | +| `--ripple-color` | Color of the button ripple effect | ## Dependencies diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss index 2b4fd2936b..7e81262993 100644 --- a/core/src/components/tab-button/tab-button.scss +++ b/core/src/components/tab-button/tab-button.scss @@ -3,15 +3,15 @@ :host { /** * @prop --background: Background of the tab button - * @prop --background-focused: Background of the focused tab button + * @prop --background-focused: Background of the tab button when focused with the tab key * * @prop --color: Color of the tab button * @prop --color-selected: Color of the selected tab button * * @prop --padding-top: Top padding of the tab button - * @prop --padding-end: End padding of the tab button + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button * @prop --padding-bottom: Bottom padding of the tab button - * @prop --padding-start: Start padding of the tab button + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button * * @prop --ripple-color: Color of the button ripple effect */ @@ -24,7 +24,7 @@ justify-content: center; height: 100%; - + outline: none; background: var(--background); diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index d137dc5dbc..63839801fe 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -248,19 +248,19 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| --------------------------- | ------------------------------- | -| `--background` | Background of the textarea | -| `--border-radius` | Border radius of the textarea | -| `--color` | Color of the text | -| `--padding-bottom` | Bottom padding of the textarea | -| `--padding-end` | End padding of the textarea | -| `--padding-start` | Start padding of the textarea | -| `--padding-top` | Top padding of the textarea | -| `--placeholder-color` | Color of the placeholder text | -| `--placeholder-font-style` | Style of the placeholder text | -| `--placeholder-font-weight` | Weight of the placeholder text | -| `--placeholder-opacity` | Opacity of the placeholder text | +| Name | Description | +| --------------------------- | ----------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the textarea | +| `--border-radius` | Border radius of the textarea | +| `--color` | Color of the text | +| `--padding-bottom` | Bottom padding of the textarea | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea | +| `--padding-top` | Top padding of the textarea | +| `--placeholder-color` | Color of the placeholder text | +| `--placeholder-font-style` | Style of the placeholder text | +| `--placeholder-font-weight` | Weight of the placeholder text | +| `--placeholder-opacity` | Opacity of the placeholder text | ---------------------------------------------- diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 718b69474f..d14144a0cf 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -6,16 +6,20 @@ :host { /** * @prop --background: Background of the textarea + * * @prop --border-radius: Border radius of the textarea + * * @prop --color: Color of the text + * * @prop --placeholder-color: Color of the placeholder text * @prop --placeholder-font-style: Style of the placeholder text * @prop --placeholder-font-weight: Weight of the placeholder text * @prop --placeholder-opacity: Opacity of the placeholder text + * * @prop --padding-top: Top padding of the textarea - * @prop --padding-end: End padding of the textarea + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea * @prop --padding-bottom: Bottom padding of the textarea - * @prop --padding-start: Start padding of the textarea + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea */ --background: initial; --color: initial; diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 03275a1936..b3427e58f5 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -244,24 +244,24 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ----------------- | --------------------------- | -| `--background` | Background of the toast | -| `--border-color` | Border color of the toast | -| `--border-radius` | Border radius of the toast | -| `--border-style` | Border style of the toast | -| `--border-width` | Border width of the toast | -| `--box-shadow` | Box shadow of the toast | -| `--button-color` | Color of the button text | -| `--color` | Color of the toast text | -| `--end` | Position from the end | -| `--height` | Height of the toast | -| `--max-height` | Maximum height of the toast | -| `--max-width` | Maximum width of the toast | -| `--min-height` | Minimum height of the toast | -| `--min-width` | Minimum width of the toast | -| `--start` | Position from the start | -| `--width` | Width of the toast | +| Name | Description | +| ----------------- | ------------------------------------------------------------------------------------------------------ | +| `--background` | Background of the toast | +| `--border-color` | Border color of the toast | +| `--border-radius` | Border radius of the toast | +| `--border-style` | Border style of the toast | +| `--border-width` | Border width of the toast | +| `--box-shadow` | Box shadow of the toast | +| `--button-color` | Color of the button text | +| `--color` | Color of the toast text | +| `--end` | Position from the right if direction is left-to-right, and from the left if direction is right-to-left | +| `--height` | Height of the toast | +| `--max-height` | Maximum height of the toast | +| `--max-width` | Maximum width of the toast | +| `--min-height` | Minimum height of the toast | +| `--min-width` | Minimum width of the toast | +| `--start` | Position from the left if direction is left-to-right, and from the right if direction is right-to-left | +| `--width` | Width of the toast | ## Dependencies diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index e947f0cb5b..daa6ee675d 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -25,8 +25,8 @@ * * @prop --button-color: Color of the button text * - * @prop --start: Position from the start - * @prop --end: Position from the end + * @prop --start: Position from the left if direction is left-to-right, and from the right if direction is right-to-left + * @prop --end: Position from the right if direction is left-to-right, and from the left if direction is right-to-left */ --border-width: 0; --border-style: none; diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md index 42aa02cd40..0ba492659a 100644 --- a/core/src/components/toolbar/readme.md +++ b/core/src/components/toolbar/readme.md @@ -695,19 +695,19 @@ export const ToolbarExample: React.FunctionComponent = () => ( ## CSS Custom Properties -| Name | Description | -| ------------------ | --------------------------------- | -| `--background` | Background of the toolbar | -| `--border-color` | Color of the toolbar border | -| `--border-style` | Style of the toolbar border | -| `--border-width` | Width of the toolbar border | -| `--color` | Color of the toolbar text | -| `--min-height` | Minimum height of the toolbar | -| `--opacity` | Opacity of the toolbar background | -| `--padding-bottom` | Bottom padding of the toolbar | -| `--padding-end` | End padding of the toolbar | -| `--padding-start` | Start padding of the toolbar | -| `--padding-top` | Top padding of the toolbar | +| Name | Description | +| ------------------ | ---------------------------------------------------------------------------------------------------------- | +| `--background` | Background of the toolbar | +| `--border-color` | Color of the toolbar border | +| `--border-style` | Style of the toolbar border | +| `--border-width` | Width of the toolbar border | +| `--color` | Color of the toolbar text | +| `--min-height` | Minimum height of the toolbar | +| `--opacity` | Opacity of the toolbar background | +| `--padding-bottom` | Bottom padding of the toolbar | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar | +| `--padding-top` | Top padding of the toolbar | ---------------------------------------------- diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index 2d304d9081..ddbbaa740d 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -6,16 +6,21 @@ :host { /** * @prop --background: Background of the toolbar + * * @prop --border-color: Color of the toolbar border * @prop --border-style: Style of the toolbar border * @prop --border-width: Width of the toolbar border + * * @prop --color: Color of the toolbar text + * * @prop --min-height: Minimum height of the toolbar + * * @prop --opacity: Opacity of the toolbar background - * @prop --padding-bottom: Bottom padding of the toolbar - * @prop --padding-end: End padding of the toolbar - * @prop --padding-start: Start padding of the toolbar + * * @prop --padding-top: Top padding of the toolbar + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar + * @prop --padding-bottom: Bottom padding of the toolbar + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar */ --border-width: 0; --border-style: solid;