Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from Jan 27, 2020
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
10895e2
fix(action-sheet): update colors for title and button
Jan 23, 2020
a365c1c
fix(button): don't set activated on md buttons
Jan 23, 2020
9132273
fix(segment): don't update indicator color in a toolbar if segment ha…
Jan 23, 2020
133418a
fix(segment): override indicator color when in a toolbar with color
Jan 24, 2020
1cc3594
fi(item): show highlight above background
Jan 24, 2020
8c1a3cd
fix(action-sheet): cover bottom border when state exists
Jan 24, 2020
0261243
fix(action-sheet): use app background color as selected / cancel back…
Jan 24, 2020
f2b4d0e
fix(action-sheet): revert changes for border, use currentColor
Jan 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions core/src/components/action-sheet/action-sheet.ios.scss
View file
Open in desktop
Expand Up @@ -8,13 +8,13 @@
--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-opacity: .08;
--button-background-hover: currentColor;
--button-background-hover-opacity: .04;
--button-background-focused: currentColor;
--button-background-focused-opacity: .12;
--button-background-activated: #{$action-sheet-ios-button-background-activated};
--button-background-focused: #{$background-color-step-200};
--button-background-hover: #{$background-color-step-100};
--button-background-selected: #{$action-sheet-ios-button-background-selected};
--button-background-activated-opacity: 1;
--button-background-focused-opacity: 1;
--button-background-hover-opacity: 1;
--button-background-selected-opacity: 1;
--button-color: #{$action-sheet-ios-button-text-color};
--color: #{$action-sheet-ios-title-color};
Expand Down
17 changes: 1 addition & 16 deletions core/src/components/action-sheet/action-sheet.ios.vars.scss
View file
Open in desktop
Expand Up @@ -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;

Expand All @@ -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: $background-color-step-150 !default;

/// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: $background-color !default;
Expand Down
6 changes: 3 additions & 3 deletions core/src/components/action-sheet/action-sheet.md.scss
View file
Open in desktop
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
3 changes: 0 additions & 3 deletions core/src/components/button/button.md.scss
View file
Open in desktop
Expand Up @@ -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)};

Expand Down
2 changes: 2 additions & 0 deletions core/src/components/item/item.scss
View file
Open in desktop
Expand Up @@ -358,6 +358,8 @@ button, a {
position: absolute;

background: var(--highlight-background);

z-index: 1;
}

.item-highlight {
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/segment-button/segment-button.md.scss
View file
Open in desktop
Expand Up @@ -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)};
}