diff --git a/.github/COMPONENT-GUIDE.md b/.github/COMPONENT-GUIDE.md
index bc76084634..2212d55949 100644
--- a/.github/COMPONENT-GUIDE.md
+++ b/.github/COMPONENT-GUIDE.md
@@ -141,7 +141,7 @@ Style the `ion-activated` class based on the spec for that element:
}
```
-> Order is important! Activated should be before the focused & hover states.
+> Order is important! Activated should be after the focused & hover states.
#### User Customization
@@ -307,7 +307,7 @@ Style the `:hover` based on the spec for that element:
}
```
-> Order is important! Hover should be after the activated and focused states.
+> Order is important! Hover should be before the activated state.
#### User Customization
@@ -729,7 +729,7 @@ For example, if you wanted `transform-origin` to be RTL-aware, you would use the
@include transform-origin(start, center);
```
-This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode.
+This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode.
These mixins depend on the `:host-context` pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
@@ -753,4 +753,4 @@ class={{
:host(.my-cmp-rtl) {
transform-origin: right center;
}
-```
\ No newline at end of file
+```
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 68e52e1332..9af8a43a34 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -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;
@@ -131,25 +132,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
// --------------------------------------------------
@@ -166,14 +148,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};
}
@@ -192,10 +176,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)};
+}
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index 00eebd84a8..f75b76a683 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -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))};
+}
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png
index 64eb40e474..0268cbd7da 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
index 72ef0a5cbc..340456619f 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png
index af7a35f82b..f504eda8b1 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png
index 1974a57a55..42d32a1534 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
index 10c6db5d7c..c99bbac820 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png
index 057317cace..d2fb171939 100644
Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index c9868f959e..49126cdadc 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -48,6 +48,7 @@
:host-context(.ion-color)::slotted(*) .button-outline {
--color-activated: #{current-color(base)};
--color-focused: #{current-color(contrast)};
+ --background-activated: #{current-color(contrast)};
}
diff --git a/core/src/components/toolbar/test/basic/index.html b/core/src/components/toolbar/test/basic/index.html
index b49d0155ad..e3a2945610 100644
--- a/core/src/components/toolbar/test/basic/index.html
+++ b/core/src/components/toolbar/test/basic/index.html
@@ -18,7 +18,11 @@
- Toolbar
+ Toolbar
+
+
+
+ This is the title that never ends. It just goes on and on my friend.
@@ -35,11 +39,7 @@
- Subheader
-
-
-
- This is the title that never ends. It just goes on and on my friend.
+ Toolbar
@@ -56,11 +56,135 @@
- This is a long title with buttons. It just goes on and on my friend.
+ This is a long title with buttons. It just goes on and on my friend.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Defaults
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Defaults.activated
+
+
+
+
+
+
+
+
+
+ Solid
+
+
+ Solid
+
+
+ Help
+
+
+
+
+
+
+
+
+
+
+
+
+ Solid
+
+
+ Solid Activated
+
+
+ Help
+
+
+
+
+
+
+
+
+
+
+
+
+ Star
+
+
+
+
+ Info
+
+
+
+ Outline
+
+
+
+
+
+
+
+
+
+ Star
+
+
+
+
+ Info
+
+
+
+ Outline.activated
+
+
+
+
+ Go Back
+
+
+ Edit
+
+ Text Only
- Content
+
+
Content
+
+
Here's a small text description for the content. Nothing more, nothing less.