javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): document what start and end mean for CSS variables (#18538)

Browse Source
This commit is contained in:
Brandy Carney
2019-06-21 15:11:07 -04:00
committed by GitHub
parent 26ecf2b10f
commit 73599c22aa
34 changed files with 380 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/action-sheet/action-sheet.scss
View File

@ -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

4
core/src/components/action-sheet/readme.md
View File

@ -321,9 +321,9 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| ------------------------ | ----------------------------------------------- |
| ------------------------ | -------------------------------------------------- |
| `--background` | Background of the action sheet group |
| `--background-activated` | Background of the activated action sheet button |
| `--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 |

36
core/src/components/back-button/back-button.scss
View File

@ -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

38
core/src/components/back-button/readme.md
View File

@ -246,35 +246,35 @@ export const BackButtonExample: React.FunctionComponent = () => (
## CSS Custom Properties
| Name | Description |
| ----------------------- | ------------------------------------- |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the button |
| `--background-focused` | Background of the button when focused |
| `--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 |
| `--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` | 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 |
| `--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` | 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 |
| `--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 |

8
core/src/components/badge/badge.scss
View File

@ -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)};

10
core/src/components/badge/readme.md
View File

@ -107,13 +107,13 @@ 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 |
| `--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 |
----------------------------------------------

16
core/src/components/button/button.scss
View File

@ -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;

18
core/src/components/button/readme.md
View File

@ -253,10 +253,10 @@ 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-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 |
@ -264,14 +264,14 @@ export const ButtonExample: React.FunctionComponent = () => (
| `--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-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` | 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 |
| `--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 |

22
core/src/components/content/content.scss
View File

@ -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};

26
core/src/components/content/readme.md
View File

@ -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).
<!-- Auto Generated Below -->
@ -158,16 +160,16 @@ Type: `Promise<void>`
## 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 |
| ------------------- | ---------------------------------------------------------------------------------------------------------- |
| `--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 |
----------------------------------------------

8
core/src/components/datetime/datetime.scss
View File

@ -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
*/

10
core/src/components/datetime/readme.md
View File

@ -695,11 +695,11 @@ Type: `Promise<void>`
## 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 |
| --------------------- | ----------------------------------------------------------------------------------------------------------- |
| `--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 |

16
core/src/components/fab-button/fab-button.scss
View File

@ -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;

18
core/src/components/fab-button/readme.md
View File

@ -126,22 +126,22 @@ 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 |
| `--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 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 |
| `--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 |

7
core/src/components/input/input.scss
View File

@ -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

6
core/src/components/input/readme.md
View File

@ -278,12 +278,12 @@ Type: `Promise<void>`
## 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-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 |

4
core/src/components/item-divider/item-divider.scss
View File

@ -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

6
core/src/components/item-divider/readme.md
View File

@ -170,7 +170,7 @@ 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 |
@ -178,8 +178,8 @@ export const ItemDividerExample: React.FunctionComponent = () => (
| `--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-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 |

18
core/src/components/item/item.scss
View File

@ -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

12
core/src/components/item/readme.md
View File

@ -1393,9 +1393,9 @@ Item Inputs
## CSS Custom Properties
| Name | Description |
| --------------------------- | --------------------------------------------------- |
| --------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the item |
| `--background-activated` | Background of the activated 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 |
@ -1412,13 +1412,13 @@ Item Inputs
| `--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-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` | End padding of the item |
| `--padding-start` | Start 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 |

12
core/src/components/menu-button/menu-button.scss
View File

@ -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);

14
core/src/components/menu-button/readme.md
View File

@ -20,18 +20,18 @@ 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-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 |
| `--color-focused` | Color of the menu button when focused with the tab key |
| `--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 |
| `--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

14
core/src/components/segment-button/readme.md
View File

@ -640,9 +640,9 @@ 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-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 |
@ -650,19 +650,19 @@ export const SegmentButtonExample: React.FunctionComponent = () => (
| `--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-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` | End margin of the segment button |
| `--margin-start` | Start 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` | End padding of the segment button |
| `--padding-start` | Start 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 |

12
core/src/components/segment-button/segment-button.scss
View File

@ -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
*

6
core/src/components/select/readme.md
View File

@ -791,10 +791,10 @@ Type: `Promise<any>`
## 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-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 |

4
core/src/components/select/select.scss
View File

@ -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));

8
core/src/components/tab-button/readme.md
View File

@ -176,14 +176,14 @@ export const TabButtonExample: React.FunctionComponent = () => (
## CSS Custom Properties
| Name | Description |
| ---------------------- | ------------------------------------ |
| ---------------------- | ------------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the tab button |
| `--background-focused` | Background of the focused 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` | End padding of the tab button |
| `--padding-start` | Start 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 |

6
core/src/components/tab-button/tab-button.scss
View File

@ -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
*/

6
core/src/components/textarea/readme.md
View File

@ -249,13 +249,13 @@ Type: `Promise<void>`
## 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-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 |

8
core/src/components/textarea/textarea.scss
View File

@ -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;

6
core/src/components/toast/readme.md
View File

@ -245,7 +245,7 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| ----------------- | --------------------------- |
| ----------------- | ------------------------------------------------------------------------------------------------------ |
| `--background` | Background of the toast |
| `--border-color` | Border color of the toast |
| `--border-radius` | Border radius of the toast |
@ -254,13 +254,13 @@ Type: `Promise<void>`
| `--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 |
| `--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 start |
| `--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 |

4
core/src/components/toast/toast.scss
View File

@ -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;

6
core/src/components/toolbar/readme.md
View File

@ -696,7 +696,7 @@ 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 |
@ -705,8 +705,8 @@ export const ToolbarExample: React.FunctionComponent = () => (
| `--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-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 |

11
core/src/components/toolbar/toolbar.scss
View File

@ -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;