javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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};
--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;

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

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

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

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

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

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

@ -358,6 +358,8 @@ button, a {
position: absolute;
background: var(--highlight-background);
z-index: 1;
}
.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
// 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)};
}