diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss index 10122ea7bc..071f8e1c24 100644 --- a/core/src/components/item-option/item-option.ios.scss +++ b/core/src/components/item-option/item-option.ios.scss @@ -8,6 +8,14 @@ font-size: $item-option-button-ios-font-size; } +:host(.activated) { + background: ion-color(primary, shade); +} + +:host(.ion-color.activated) { + background: current-color(shade); +} + :host(.in-list.item-options-end:last-child) { @include safe-area-padding-horizontal(null, .7em); } diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index 701d20b5db..4a7f6e3ec0 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -4,15 +4,24 @@ // -------------------------------------------------- :host { - --ion-color-base: #{ion-color(primary, base)}; - --ion-color-contrast: #{ion-color(primary, contrast)}; + /** + * @prop --background: Background of the item option + * @prop --color: Color of the item option + */ + --background: #{ion-color(primary, base)}; + --color: #{ion-color(primary, contrast)}; - background: #{current-color(base)}; - color: #{current-color(contrast)}; + background: var(--background); + color: var(--color); font-family: $font-family-base; } +:host(.ion-color) { + background: current-color(base); + color: current-color(contrast); +} + .item-option-native { @include text-inherit(); @include padding(0, .7em); diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md index 9b06642608..7852f6208a 100644 --- a/core/src/components/item-option/readme.md +++ b/core/src/components/item-option/readme.md @@ -18,6 +18,14 @@ action for the item. | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +## CSS Custom Properties + +| Name | Description | +| -------------- | ----------------------------- | +| `--background` | Background of the item option | +| `--color` | Color of the item option | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)*