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

fix(components): fix issues with button states (#20278)

Browse Source 
- Update action sheet colors to match spec (md)
- Remove activated background on buttons (md - uses ripple)
- Update Segment Button to use proper indicator color when inside of a toolbar
- Add back input highlight on focus

fixes #20276
This commit is contained in:
Brandy Carney
2020-01-27 16:47:02 -05:00
committed by GitHub
parent 23ce7c787c
commit 628db18a97
6 changed files with 9 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -8,7 +8,7 @@
--background: #{$action-sheet-ios-background-color}; --background: #{$action-sheet-ios-background-color};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4); --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
--button-background: #{$action-sheet-ios-button-background}; --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-activated-opacity: .08;
--button-background-hover: currentColor; --button-background-hover: currentColor;
--button-background-hover-opacity: .04; --button-background-hover-opacity: .04;

17
core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@ -105,21 +105,9 @@ $action-sheet-ios-button-icon-font-size: 28px !default;
/// @prop - Padding right of the action sheet button icon /// @prop - Padding right of the action sheet button icon
$action-sheet-ios-button-icon-padding-right: .1em !default; $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 /// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 20px !default; $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 /// @prop - Border color alpha of the action sheet button
$action-sheet-ios-button-border-color-alpha: .08 !default; $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 /// @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; $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 /// @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 /// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: $background-color !default; $action-sheet-ios-button-background-selected: $background-color !default;

6
core/src/components/action-sheet/action-sheet.md.scss
View File

@ -16,8 +16,8 @@
--button-background-hover-opacity: .04; --button-background-hover-opacity: .04;
--button-background-focused: currentColor; --button-background-focused: currentColor;
--button-background-focused-opacity: .12; --button-background-focused-opacity: .12;
--button-color: #{var(--color, $action-sheet-md-button-text-color)}; --button-color: #{$action-sheet-md-button-text-color};
--color: #{$action-sheet-md-button-text-color}; --color: #{$action-sheet-md-title-color};
} }
.action-sheet-title { .action-sheet-title {
@ -73,7 +73,7 @@
@include padding(null, null, 4px, null); @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); @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; font-size: $action-sheet-md-icon-font-size;
} }

3
core/src/components/button/button.md.scss
View File

@ -129,16 +129,13 @@
// Material Design Button: Hover // Material Design Button: Hover
// -------------------------------------------------- // --------------------------------------------------
:host(.button-solid.ion-color.ion-activated) .button-native::after,
:host(.button-solid.ion-color.ion-focused) .button-native::after { :host(.button-solid.ion-color.ion-focused) .button-native::after {
background: #{current-color(contrast)}; background: #{current-color(contrast)};
opacity: .24; opacity: .24;
} }
:host(.button-clear.ion-color.ion-activated) .button-native::after,
:host(.button-clear.ion-color.ion-focused) .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 { :host(.button-outline.ion-color.ion-focused) .button-native::after {
background: #{current-color(base)}; background: #{current-color(base)};

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

@ -358,6 +358,8 @@ button, a {
position: absolute; position: absolute;
background: var(--highlight-background); background: var(--highlight-background);
z-index: 1;
} }
.item-highlight { .item-highlight {

4
core/src/components/segment-button/segment-button.md.scss
View File

@ -193,11 +193,11 @@
// Segment button indicator color should use the background checked variable with // Segment button indicator color should use the background checked variable with
// a fallback to the default value of --indicator-color // 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))}; 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 // 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)}; background: #{current-color(contrast)};
} }