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

fix(buttons): use theme/color toolbar colors for buttons (#18191)

Browse Source 
- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840
This commit is contained in:
Brandy Carney
2019-05-14 18:02:30 -04:00
committed by GitHub
parent 578108d586
commit 051198928e
9 changed files with 106 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,27 +21,75 @@
--border-radius: #{$toolbar-ios-button-border-radius};
}
// iOS Toolbar with Color Default Button
// iOS Toolbar with Color: Default Buttons
// --------------------------------------------------
:host-context(.ion-color)::slotted(*) .button {
--color: initial;
--border-color: initial;
--color-activated: initial;
}
:host-context(.ion-color)::slotted(*) .button-solid {
--background: #{current-color(contrast)};
--background-activated: #{current-color(contrast, .8)};
--background-focused: #{current-color(contrast, .6)};
--color: #{current-color(base)};
--color-focused: #{current-color(base)};
}
:host-context(.ion-color)::slotted(*) .button-clear {
--background-focused: #{current-color(contrast, .1)};
--color-activated: #{current-color(contrast)};
--color-focused: #{current-color(contrast)};
}
:host-context(.ion-color)::slotted(*) .button-outline {
--background-activated: #{current-color(contrast)};
--background-focused: #{current-color(contrast, .1)};
--color-activated: #{current-color(base)};
--color-focused: #{current-color(contrast)};
}
// iOS Toolbar Button Clear
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--color-activated: #{$toolbar-ios-color-activated};
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
}
// iOS Toolbar Button Outline
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
--border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
}
// iOS Toolbar Button Solid
// --------------------------------------------------
@media (any-hover: hover) {
::slotted(*) .button-solid-ios:hover {
opacity: .4;
}
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
--color: #{$toolbar-ios-background};
--color-activated: #{$toolbar-ios-background};
--color-focused: #{$toolbar-ios-background};
--background: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
--background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
}
// iOS Toolbar Button Icon
// --------------------------------------------------
::slotted(*) ion-icon[slot="start"] {
@include margin(0);
@include margin-horizontal(null, .3em);

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

@ -22,14 +22,35 @@
}
// Material Design Toolbar w/ Color Default Button
// Material Design Toolbar w/ Color: Default Buttons
// --------------------------------------------------
:host-context(.ion-color)::slotted(*) .button {
--color: initial;
--color-activated: initial;
--color-focused: initial;
--background-focused: #{ion-color(primary, contrast, 0.1)};
--background-focused: #{current-color(contrast, .1)};
}
:host-context(.ion-color)::slotted(*) .button-solid {
--background: #{current-color(contrast)};
--background-activated: #{current-color(contrast)};
--background-focused: #{current-color(contrast, .9)};
--color: #{current-color(base)};
--color-focused: #{current-color(base)};
}
:host-context(.ion-color)::slotted(*) .button-outline {
--border-color: #{current-color(contrast)};
}
// Material Design Toolbar Default Button
// --------------------------------------------------
::slotted(*) .button {
--color-focused: #{$toolbar-md-color};
--background-focused: rgba(66, 66, 66, 0.1);
}
@ -39,8 +60,10 @@
::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};
}
@ -50,9 +73,11 @@
::slotted(*) .button-outline {
--color: initial;
--color-activated: currentColor;
--color-focused: #{$toolbar-md-color};
--background: transparent;
--background-activated: transparent;
--border-color: currentColor;
--border-color: #{$toolbar-md-color};
--background-focused: rgba(66, 66, 66, 0.1);
}