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

feat(button): add variables for customizing hover state (#18499)

Browse Source 
resolves #17974
This commit is contained in:
Brandy Carney
2019-06-10 13:38:50 -04:00
committed by GitHub
parent 7610787e09
commit 5c5934bc24
11 changed files with 118 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,10 +8,12 @@
* @prop --background: Background of the button
* @prop --background-activated: Background of the button when activated
* @prop --background-focused: Background of the button when focused
* @prop --background-hover: Background of the button on hover
*
* @prop --color: Text color of the button
* @prop --color-activated: Text color of the button when activated
* @prop --color-focused: Text color of the button when focused
* @prop --color-hover: Text color of the button when hover
*
* @prop --transition: Transition of the button
*
@ -35,6 +37,7 @@
--border-width: initial;
--border-color: initial;
--border-style: initial;
--color-hover: initial;
--box-shadow: none;
display: inline-block;
@ -76,6 +79,7 @@
:host(.button-solid) {
--background: #{ion-color(primary, base)};
--background-focused: #{ion-color(primary, shade)};
--background-hover: #{ion-color(primary, base, 0.92)};
--color: #{ion-color(primary, contrast)};
--color-activated: #{ion-color(primary, contrast)};
--color-focused: #{ion-color(primary, contrast)};
@ -234,16 +238,6 @@
border: 0;
}
:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}
:host(.activated) .button-native {
background: var(--background-activated);
color: var(--color-activated);
}
// .button > .button-container:hover {
// opacity: var(--opacity-hover);
@ -289,3 +283,23 @@
ion-ripple-effect {
color: var(--ripple-color);
}
// Button: Hover
// --------------------------------------------------
:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}
:host(.activated) .button-native {
background: var(--background-activated);
color: var(--color-activated);
}
@media (any-hover: hover) {
:host(:hover) .button-native {
background: var(--background-hover);
color: var(--color-hover);
}
}