diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 7fb8cc7739..a397227271 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -18,7 +18,7 @@ --background-activated: #{$item-ios-background-color-active}; --border-color: #{$item-ios-border-bottom-color}; --color: #{$item-ios-text-color}; - --detail-push-color: #{$item-ios-border-bottom-color}; + --detail-icon-color: #{$item-ios-border-bottom-color}; } :host(.activated) { @@ -116,7 +116,7 @@ // -------------------------------------------------- .item-detail-icon { - color: var(--detail-push-color); + color: var(--detail-icon-color); font-size: 20px; } diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index f1444f4fb0..e5ca3bd280 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -37,7 +37,7 @@ $item-ios-thumbnail-width: 56px !default; $item-ios-thumbnail-height: $item-ios-thumbnail-width !default; /// @prop - Color of the detail arrow icon -$item-ios-detail-push-color: $item-ios-border-color !default; +$item-ios-detail-icon-color: $item-ios-border-color !default; /// @prop - Padding top for the item content $item-ios-padding-top: 10px !default; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 55dff27cc6..8366812741 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -22,7 +22,7 @@ --background-activated: #{$item-md-background-color-active}; --border-color: #{$item-md-border-bottom-color}; --color: #{$item-md-text-color}; - --detail-push-color: #{$item-md-border-bottom-color}; + --detail-icon-color: #{$item-md-border-bottom-color}; } @@ -61,7 +61,7 @@ // -------------------------------------------------- .item-detail-icon { - color: var(--detail-push-color); + color: var(--detail-icon-color); font-size: 20px; } diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 7841efcc84..2c70677182 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -22,7 +22,7 @@ $item-md-thumbnail-width: 80px !default; $item-md-thumbnail-height: $item-md-thumbnail-width !default; /// @prop - Color of the detail arrow icon -$item-md-detail-push-color: $item-md-border-color !default; +$item-md-detail-icon-color: $item-md-border-color !default; /// @prop - Padding top for the item content $item-md-padding-top: 11px !default; diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 0c7ac545e7..e6b714b850 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -4,11 +4,34 @@ // -------------------------------------------------- :host { + /** + * @prop --background: Background of the item + * @prop --background-activated: Background of the activated item + * @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 --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 --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-top: Top padding of the item + * @prop --transition: Transition of the item + */ --min-height: #{$item-min-height}; --background: #{current-color(base)}; --background-activated: #{current-color(tint)}; --color: #{current-color(contrast)}; - --detail-push-color: #{current-color(shade)}; + --detail-icon-color: #{current-color(shade)}; --border-radius: 0; --border-width: 0; --border-style: solid; diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 29a9e60d5f..82e103e16f 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -60,6 +60,33 @@ Items left align text and add an ellipsis when the text is wider than the item. | `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"submit"`, `"reset"`, `"button"` | +## 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 | +| `--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 | +| `--transition` | Transition of the item | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)*