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

fix(button): buttons using fill and color properties now account for hover and focused opacity variables (#23442)

Browse Source 
resolves #23441
This commit is contained in:
Liam DeBeasi
2021-06-21 13:00:50 -04:00
committed by GitHub
parent 87b4a42c96
commit 68c0e7136d
3 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,30 +129,29 @@
// Material Design Button: Hover // Material Design Button: Hover
// -------------------------------------------------- // --------------------------------------------------
/**
* Only allow overriding of opacity here
* as developers should not be overriding
* colors when using the color prop.
*/
: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;
} }
: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-focused) .button-native::after { :host(.button-outline.ion-color.ion-focused) .button-native::after {
background: #{current-color(base)}; background: #{current-color(base)};
opacity: .12;
} }
@media (any-hover: hover) { @media (any-hover: hover) {
:host(.button-solid.ion-color:hover) .button-native::after { :host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(contrast)}; background: #{current-color(contrast)};
opacity: .08;
} }
:host(.button-clear.ion-color:hover) .button-native::after, :host(.button-clear.ion-color:hover) .button-native::after,
:host(.button-outline.ion-color:hover) .button-native::after { :host(.button-outline.ion-color:hover) .button-native::after {
background: #{current-color(base)}; background: #{current-color(base)};
opacity: .04;
} }
} }

1
core/src/components/button/test/outline/index.html
View File

@ -90,6 +90,7 @@
<ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button> <ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button> <ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
</p> </p>
<p> <p>
<ion-button fill="outline" disabled>Disabled</ion-button> <ion-button fill="outline" disabled>Disabled</ion-button>
<ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button> <ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>

36
core/src/components/button/test/states/index.html
View File

@ -89,6 +89,31 @@
<ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button> <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button> <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
</p> </p>
<div class="custom-variables">
<ion-button>Button</ion-button>
<ion-button fill="clear">Button</ion-button>
<ion-button fill="outline">Button</ion-button>
<br>
<ion-button class="ion-focused">Button</ion-button>
<ion-button class="ion-focused" fill="clear">Button</ion-button>
<ion-button class="ion-focused" fill="outline">Button</ion-button>
<br>
<ion-button color="tertiary">Button</ion-button>
<ion-button color="tertiary" fill="clear">Button</ion-button>
<ion-button color="tertiary" fill="outline">Button</ion-button>
<br>
<ion-button color="tertiary" class="ion-focused">Button</ion-button>
<ion-button color="tertiary" class="ion-focused" fill="clear">Button</ion-button>
<ion-button color="tertiary" class="ion-focused" fill="outline">Button</ion-button>
</div>
</ion-content> </ion-content>
</ion-app> </ion-app>
@ -110,6 +135,17 @@
.custom { .custom {
--color: red; --color: red;
} }
.custom-variables ion-button {
--color: black;
--background: pink;
--background-focused: red;
--background-hover: green;
--background-focused-opacity: .5;
--background-hover-opacity: .5;
}
</style> </style>
</body> </body>
</html> </html>