diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index cf627110f1..6eb41fd99c 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -8,7 +8,7 @@ --background: #{$action-sheet-ios-background-color}; --backdrop-opacity: var(--ion-backdrop-opacity, 0.4); --button-background: #{$action-sheet-ios-button-background}; - --button-background-activated: #{$text-color}; + --button-background-activated: #{$action-sheet-ios-button-background-activated}; --button-background-activated-opacity: .08; --button-background-hover: currentColor; --button-background-hover-opacity: .04; diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index ab81b8f009..c7307e0178 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -105,21 +105,9 @@ $action-sheet-ios-button-icon-font-size: 28px !default; /// @prop - Padding right of the action sheet button icon $action-sheet-ios-button-icon-padding-right: .1em !default; -/// @prop - Height of the action sheet button icon -$action-sheet-ios-button-icon-height: .7em !default; - -/// @prop - Margin top of the action sheet button icon -$action-sheet-ios-button-icon-margin-top: -10px !default; - /// @prop - Font size of the action sheet button $action-sheet-ios-button-font-size: 20px !default; -/// @prop - Border width of the action sheet button -$action-sheet-ios-button-border-width: $hairlines-width !default; - -/// @prop - Border style of the action sheet button -$action-sheet-ios-button-border-style: solid !default; - /// @prop - Border color alpha of the action sheet button $action-sheet-ios-button-border-color-alpha: .08 !default; @@ -129,11 +117,8 @@ $action-sheet-ios-button-border-color: rgba($text-col /// @prop - Background color of the action sheet button $action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default; -/// @prop - Background color alpha of the activated action sheet button -$action-sheet-ios-button-background-alpha-activated: .08 !default; - /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: rgba($text-color-rgb, $action-sheet-ios-button-background-alpha-activated) !default; +$action-sheet-ios-button-background-activated: $text-color !default; /// @prop - Background color of the selected action sheet button $action-sheet-ios-button-background-selected: $background-color !default; diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss index b077be46c6..910bb7eabb 100644 --- a/core/src/components/action-sheet/action-sheet.md.scss +++ b/core/src/components/action-sheet/action-sheet.md.scss @@ -16,8 +16,8 @@ --button-background-hover-opacity: .04; --button-background-focused: currentColor; --button-background-focused-opacity: .12; - --button-color: #{var(--color, $action-sheet-md-button-text-color)}; - --color: #{$action-sheet-md-button-text-color}; + --button-color: #{$action-sheet-md-button-text-color}; + --color: #{$action-sheet-md-title-color}; } .action-sheet-title { @@ -73,7 +73,7 @@ @include padding(null, null, 4px, null); @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start); - color: #{$action-sheet-md-icon-color}; + color: var(--color); font-size: $action-sheet-md-icon-font-size; } diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index 4a1ca0a211..f01520a164 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -129,16 +129,13 @@ // Material Design Button: Hover // -------------------------------------------------- -:host(.button-solid.ion-color.ion-activated) .button-native::after, :host(.button-solid.ion-color.ion-focused) .button-native::after { background: #{current-color(contrast)}; opacity: .24; } -:host(.button-clear.ion-color.ion-activated) .button-native::after, :host(.button-clear.ion-color.ion-focused) .button-native::after, -:host(.button-outline.ion-color.ion-activated) .button-native::after, :host(.button-outline.ion-color.ion-focused) .button-native::after { background: #{current-color(base)}; diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 3a6aae4350..b3a3ffd54a 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -358,6 +358,8 @@ button, a { position: absolute; background: var(--highlight-background); + + z-index: 1; } .item-highlight { diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss index ce4088b023..f8fa1e2a51 100644 --- a/core/src/components/segment-button/segment-button.md.scss +++ b/core/src/components/segment-button/segment-button.md.scss @@ -193,11 +193,11 @@ // Segment button indicator color should use the background checked variable with // a fallback to the default value of --indicator-color -:host(.in-toolbar) .segment-button-indicator-background { +:host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background { background: #{var(--ion-toolbar-segment-indicator-color, var(--indicator-color))}; } // Do not use the global or local CSS variable if the toolbar has a color -:host(.in-toolbar-color) .segment-button-indicator-background { +:host(.in-toolbar-color:not(.in-segment-color)) .segment-button-indicator-background { background: #{current-color(contrast)}; }