javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +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 507 additions and 378 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)};
}

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

@ -246,17 +246,6 @@ ion-ripple-effect {
@include button-state();
}
// Button Activated
:host(.ion-activated) {
color: var(--color-activated);
}
:host(.ion-activated) .button-native::after {
background: var(--background-activated);
opacity: var(--background-activated-opacity);
}
// Button Focused
:host(.ion-focused) {
color: var(--color-focused);
@ -281,6 +270,17 @@ ion-ripple-effect {
}
}
// Button Activated
:host(.ion-activated) {
color: var(--color-activated);
}
:host(.ion-activated) .button-native::after {
background: var(--background-activated);
opacity: var(--background-activated-opacity);
}
// Button Colors
// --------------------------------------------------
@ -305,6 +305,7 @@ ion-ripple-effect {
color: current-color(base);
}
// Button in Toolbar
// --------------------------------------------------
@ -320,3 +321,11 @@ ion-ripple-effect {
background: #{var(--ion-toolbar-color, var(--background))};
color: #{var(--ion-toolbar-background, var(--color))};
}
// Activated Button in Toolbar
// --------------------------------------------------
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
background: var(--ion-toolbar-color, var(--color));
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
}