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

chore(): sync with main

Browse Source
This commit is contained in:
Liam DeBeasi
2023-03-08 09:35:37 -05:00
parent c791a78aa2 e846e0d0af
commit 77b9e11c2b
45 changed files with 497 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,6 +72,7 @@
:host(.button-clear) {
--background-activated: transparent;
--background-activated-opacity: 0;
--background-focused: #{ion-color(primary, base)};
--background-hover: transparent;
--background-focused-opacity: .1;
@ -129,25 +130,6 @@
}
// iOS Button Activated
// --------------------------------------------------
:host(.button-clear.ion-activated) {
opacity: #{$button-ios-clear-opacity-activated};
}
:host(.button-outline.ion-activated.ion-color) .button-native {
color: current-color(contrast);
&::after {
background: current-color(base);
}
}
:host(.button-solid.ion-color.ion-activated) .button-native::after {
background: #{current-color(shade)};
}
// iOS Button Focused
// --------------------------------------------------
@ -164,14 +146,16 @@
background: #{current-color(shade)};
}
// iOS Button Hover
// --------------------------------------------------
@media (any-hover: hover) {
// Clear and outline buttons use opacity so set
// background to transparent
:host(.button-clear:hover),
:host(.button-outline:hover) {
// background to transparent, but this shouldn't
// apply on top of activated
:host(.button-clear:not(.ion-activated):hover),
:host(.button-outline:not(.ion-activated):hover) {
opacity: #{$button-ios-clear-opacity-hover};
}
@ -190,10 +174,31 @@
}
// 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 so use white to tint it, but this should not apply
// when activated
:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after {
background: #fff;
opacity: 0.10;
}
}
// iOS Button Activated
// --------------------------------------------------
:host(.button-clear.ion-activated) {
opacity: #{$button-ios-clear-opacity-activated};
}
:host(.button-outline.ion-activated.ion-color) .button-native {
color: current-color(contrast);
&::after {
background: current-color(base);
}
}
:host(.button-solid.ion-color.ion-activated) .button-native::after {
background: #{current-color(shade)};
}