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

feat(back-button): add variables and support for focused and hover states (#18451)

Browse Source 
- updates MD spacing for back button text
- also adds e2e tests and adds them to screenshot

references #18279 references #17624 fixes #18465
This commit is contained in:
Brandy Carney
2019-06-10 15:23:42 -04:00
committed by GitHub
parent 5c5934bc24
commit 58672fb221
18 changed files with 619 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/buttons/buttons.ios.scss
View File

@ -29,7 +29,8 @@
:host-context(.ion-color)::slotted(*) .button {
--color: initial;
--border-color: initial;
--color-activated: initial;
--background-focused: #{current-color(contrast, .1)};
}
:host-context(.ion-color)::slotted(*) .button-solid {

23
core/src/components/buttons/buttons.md.scss
View File

@ -29,8 +29,8 @@
:host-context(.ion-color)::slotted(*) .button {
--color: initial;
--color-activated: initial;
--color-focused: initial;
--color-focused: #{current-color(contrast)};
--color-hover: #{current-color(contrast)};
--background-hover: #{current-color(contrast, .08)};
--background-focused: #{current-color(contrast, .24)};
}
@ -39,8 +39,10 @@
--background: #{current-color(contrast)};
--background-activated: #{current-color(contrast)};
--background-focused: #{current-color(contrast, .9)};
--background-hover: #{current-color(contrast, .92)};
--color: #{current-color(base)};
--color-focused: #{current-color(base)};
--color-hover: #{current-color(base)};
}
:host-context(.ion-color)::slotted(*) .button-outline {
@ -48,15 +50,6 @@
}
// Material Design Toolbar Default Button
// --------------------------------------------------
::slotted(*) .button {
--color-focused: #{$toolbar-md-color};
--background-focused: rgba(66, 66, 66, 0.1);
}
// Material Design Toolbar Icon Only Clear Button
// --------------------------------------------------
@ -74,16 +67,20 @@
}
::slotted(*) .button {
--background-hover: rgba(66, 66, 66, 0.08);
}
// Material Design Toolbar Solid Button
// --------------------------------------------------
::slotted(*) .button-solid {
--color: #{$toolbar-md-background};
--color-activated: #{$toolbar-md-background};
--color-focused: #{$toolbar-md-background};
--background: #{$toolbar-md-color};
--background-activated: #{$toolbar-md-color};
--background-focused: #{$toolbar-md-color-activated};
--background-hover: rgba(66, 66, 66, 0.92);
}
@ -106,8 +103,10 @@
::slotted(*) .button-clear {
--color: initial;
--color-focused: #{$toolbar-md-color};
--color-activated: currentColor;
--background: transparent;
--background-focused: rgba(66, 66, 66, 0.1);
}