octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

fix(buttons): use proper button colors based on CSS variables when inside of a toolbar (#20633)

Browse Source
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Brandy Carney
2020-02-27 16:22:39 -05:00
committed by GitHub
gitea-unlock(16/)
parent 0e0e401d86
commit c1d7bf229d
octicon-diff(16/tw-mr-1) 11 changed files with 360 additions and 59 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,12 +17,11 @@
font-weight: 400;
}
::slotted(*) ion-button:not(.button-round) {
--border-radius: #{$toolbar-ios-button-border-radius};
}
// iOS Toolbar with Color: Default Buttons
// --------------------------------------------------
@@ -38,6 +37,8 @@
--background-focused-opacity: .12;
--background-activated: #000;
--background-activated-opacity: .12;
--background-hover: #{current-color(base)};
--background-hover-opacity: 0.45;
--color: #{current-color(base)};
--color-focused: #{current-color(base)};
}
@@ -53,38 +54,21 @@
}
// iOS Toolbar Button Clear
// iOS Toolbar Button Clear / Outline
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
}
// iOS Toolbar Button Outline
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
--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-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
::slotted(*) .button-clear,
::slotted(*) .button-outline {
--background-activated: transparent;
--background-focused: currentColor;
--background-hover: transparent;
}
// iOS Toolbar Button Solid
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
--color: #{$toolbar-ios-background};
--color-activated: #{$toolbar-ios-background};
--color-focused: #{$toolbar-ios-background};
--background: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
--background-hover-opacity: 0.1;
::slotted(*) .button-solid:not(.ion-color) {
--background-focused: #000;
--background-focused-opacity: .12;
--background-activated: #000;
@@ -121,25 +105,3 @@
line-height: .67;
}
// iOS Toolbar Menu Toggle
// --------------------------------------------------
// .button-menutoggle-ios {
// order: map-get($toolbar-order-ios, menu-toggle-start);
// min-width: 36px;
// --padding-top: 0;
// --padding-bottom: 0;
// --padding-start: 0;
// --padding-end: 0;
// ion-icon {
// @include padding(0, 6px);
// font-size: 28px;
// }
// }