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

fix(buttons): use proper button colors based on CSS variables when inside of a toolbar (#20633)

Browse Source
This commit is contained in:
Brandy Carney
2020-02-27 16:22:39 -05:00
committed by GitHub
parent 0e0e401d86
commit c1d7bf229d
11 changed files with 360 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/button/button.ios.scss
View File

@ -175,4 +175,12 @@
:host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(tint)};
}
// Solid buttons inside of a toolbar should use a tint of the current
// background so use white to tint it
:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
background: #fff;
opacity: 0.10;
}
}

16
core/src/components/button/button.scss
View File

@ -305,3 +305,19 @@ ion-ripple-effect {
background: transparent;
color: current-color(base);
}
// Button in Toolbar
// --------------------------------------------------
:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
color: #{var(--ion-toolbar-color, var(--color))};
}
:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
border-color: #{var(--ion-toolbar-color, var(--color, var(--border-color)))};
}
:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
background: #{var(--ion-toolbar-color, var(--background))};
color: #{var(--ion-toolbar-background, var(--color))};
}

5
core/src/components/button/button.tsx
View File

@ -4,7 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Color, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -208,7 +208,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
[`${buttonType}-${shape}`]: shape !== undefined,
[`${buttonType}-${fill}`]: true,
[`${buttonType}-strong`]: strong,
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
'button-has-icon-only': hasIconOnly,
'button-disabled': disabled,
'ion-activatable': true,