` add in more properties such as a `button` attribute in order to check if it should render a button.
+
+## Converting Scoped to Shadow
+
+### CSS
+
+There will be some CSS issues when converting to shadow. Below are some of the differences.
+
+**Targeting host + slotted child**
+
+```css
+/* IN SCOPED */
+:host(.ion-color)::slotted(ion-segment-button)
+
+/* IN SHADOW*/
+:host(.ion-color) ::slotted(ion-segment-button)
+```
+
+**Targeting host-context + host (with a :not)**
+
+```css
+/* IN SCOPED */
+:host-context(ion-toolbar.ion-color):not(.ion-color) {
+
+/* IN SHADOW */
+:host-context(ion-toolbar.ion-color):host(:not(.ion-color)) {
+```
+
+**Targeting host-context + host (with a :not) > slotted child**
+
+```css
+/* IN SCOPED */
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
+
+/* IN SHADOW*/
+:host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
+```
diff --git a/BREAKING.md b/BREAKING.md
index 6592ab43ab..d85d57e4d1 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -14,16 +14,21 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [CSS](#css)
* [CSS Utilities](#css-utilities)
* [Display Classes](#display-classes)
- * [Activated, Focused, Hover States](#activated--focused--hover-states)
+ * [Activated, Focused, Hover States](#activated-focused-hover-states)
* [Distributed Sass](#distributed-sass)
- [Components](#components)
+ * [Action Sheet](#action-sheet)
* [Anchor](#anchor)
* [Back Button](#back-button)
+ * [Button](#button)
* [Card](#card)
* [Controllers](#controllers)
+ * [FAB Button](#fab-button)
+ * [Item](#item)
* [Header / Footer](#header---footer)
* [List Header](#list-header)
* [Menu](#menu)
+ * [Menu Button](#menu-button)
* [Nav Link](#nav-link)
* [Radio](#radio)
* [Searchbar](#searchbar)
@@ -33,6 +38,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
* [Skeleton Text](#skeleton-text)
* [Split Pane](#split-pane)
* [Toast](#toast)
+ * [Tabs](#tabs)
- [Colors](#colors)
- [Events](#events)
- [Mode](#mode)
@@ -43,7 +49,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
#### CSS Utilities
-We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes & user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
+We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
@@ -98,9 +104,101 @@ See the [CSS Utilities responsive display documentation](https://ionicframework.
#### Activated, Focused, Hover States
-The `.activated` class that gets added has been renamed to `.ion-activated` for consistency with how we add focused to elements and to avoid conflicts in users' CSS.
+The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
+
+The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
+
+- Action Sheet
+- Back Button
+- Button
+- FAB Button
+- Item
+- Menu Button
+- Segment Button
+
+Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
+
+```css
+--background-hover: rgba(255, 255, 255, 0.08);
+```
+
+If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
+
+```css
+--background-hover: rgba(0, 0, 0, 0.08);
+```
+
+The new way adds the following variables:
+
+```css
+--background-activated-opacity
+--background-focused-opacity
+--background-hover-opacity
+```
+
+It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the variable names.
+
+This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
+
+As a result of these changes, the following global CSS variables will not change the opacity and as such should be treated the same as the `--background-{STATE}` variables:
+
+```css
+--ion-item-background-activated
+--ion-item-background-focused
+--ion-item-background-hover
+```
+
+##### Examples
+
+```css
+/* Setting the button background to solid red */
+ion-button {
+ --background-hover: red;
+ --background-hover-opacity: 1;
+}
+
+/* Setting the action sheet button background on hover to an opaque green */
+ion-action-sheet {
+ --button-background-hover: green;
+ --button-background-hover-opacity: 0.5;
+}
+
+/* Setting the fab button background to use the text color with the default opacity on md */
+.md ion-fab-button {
+ --color: #222;
+ --background-hover: #222;
+}
+
+/* Setting the theme background for items to use #000 (black) with the default theme opacity */
+:root {
+ /* is used in item as rgba(0, 0, 0, var(--background-activated-opacity)); */
+ --ion-item-background-activated: #000;
+
+ /* is used in item as rgba(0, 0, 0, var(--background-focused-opacity)); */
+ --ion-item-background-focused: #000;
+
+ /* is used in item as rgba(0, 0, 0, var(--background-hover-opacity)); */
+ --ion-item-background-hover: #000;
+}
+```
+
+##### Global CSS Properties
+
+Some variables were renamed, removed or added. See the chart below for the changes.
+
+| Old variable | Status | New variable |
+| ----------------------------------------| --------|-------------------------------------------|
+| `--ion-toolbar-color-unchecked` | renamed | `--ion-toolbar-segment-color` |
+| `--ion-toolbar-color-checked` | renamed | `--ion-toolbar-segment-color-checked` |
+| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background` |
+| `--ion-toolbar-background-checked` | renamed | `--ion-toolbar-segment-background-checked`|
+| `--ion-tab-bar-color-activated` | renamed | `--ion-tab-bar-color-selected` |
+| | added | `--ion-toolbar-segment-indicator-color` |
+| `--ion-toolbar-color-activated` | removed | |
+| `--ion-item-background-activated` | removed | |
+| `--ion-item-background-focused` | removed | |
+| `--ion-item-background-hover` | removed | |
-
#### Distributed Sass
@@ -109,20 +207,50 @@ The `scss` files have been removed from `dist/`. CSS variables should be used to
### Components
+#### Action Sheet
+
+The following CSS variables have been renamed or added:
+
+| Old | New |
+|--------------------------| -------------------------------------------|
+| | `--button-background` |
+| `--background-activated` | `--button-background-activated` |
+| | `--button-background-activated-opacity` |
+| `--background-selected` | `--button-background-selected` |
+| | `--button-background-focused` |
+| | `--button-background-focused-opacity` |
+| | `--button-background-hover` |
+| | `--button-background-hover-opacity` |
+| | `--button-background-selected` |
+| | `--button-background-selected-opacity` |
+| | `--button-color` |
+| | `--button-color-activated` |
+| | `--button-color-focused` |
+| | `--button-color-hover` |
+| | `--button-color-selected` |
+
+See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
+
+
#### Anchor
The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `
` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
#### Back Button
-Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
#### Card
Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-### Controllers
+#### Controllers
The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
@@ -163,6 +291,15 @@ becomes
```
+#### FAB Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
+#### Item
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
#### Header / Footer
@@ -192,6 +329,12 @@ The list header has been redesigned to match the latest iOS spec. This may break
```
- The presentation type in `ios` now defaults to `"overlay"`.
+
+#### Menu Button
+
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
#### Nav Link
The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
@@ -254,7 +397,78 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
#### Segment
-
+Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
+
+##### Button States
+
+- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
+ ```
+ --color-activated
+ --background-activated
+ ```
+- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
+
+##### Indicator Color
+
+- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
+- `--indicator-color-checked` has been removed
+- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
+- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
+ ```css
+ .md ion-segment::after {
+ position: absolute;
+ bottom: 0;
+ height: 2px;
+ width: 100%;
+ content: '';
+ background: rgba(0,0,0,0.5);
+ z-index: -1;
+ }
+ ```
+
+##### Background & Color
+
+A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
+
+```
+--background: Background of the segment button
+--background-checked: Background of the checked segment button
+--background-disabled: Background of the disabled segment button
+--background-hover: Background of the segment button on hover
+```
+
+> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
+
+The above variables *will not* be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
+
+```
+--color: Color of the segment button
+--color-checked: Color of the checked segment button
+--color-disabled: Color of the disabled segment button
+--color-hover: Color of the segment button on hover
+```
+
+###### Removed variables
+
+The following variables were removed due to the current spec no longer using them.
+
+- `--color-checked-disabled`
+- `--background-disabled`
+- `--color-disabled`
+- `--background-activated`
+- `--color-activated`
+
+##### Global CSS Properties
+
+Some variables were renamed or added. See the chart below for the new names.
+
+| Old variable | Status | New variable |
+| ----------------------------------------| --------|-------------------------------------------|
+| `--ion-toolbar-color-unchecked` | renamed | `--ion-toolbar-segment-color` |
+| `--ion-toolbar-color-checked` | renamed | `--ion-toolbar-segment-color-checked` |
+| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background` |
+| `--ion-toolbar-background-checked` | renamed | `--ion-toolbar-segment-background-checked`|
+| | added | `--ion-toolbar-segment-indicator-color` |
#### Segment Button
@@ -329,6 +543,10 @@ The `width` property has been removed in favor of using CSS styling.
```
+#### Tabs
+
+- [Focused State](#activated-focused-hover-states) have been updated.
+
#### Toast
The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
@@ -382,7 +600,7 @@ dark: #222428
`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
-This will only be a breaking change in your app if you are not using one of our starters & not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
+This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
### Events
diff --git a/core/api.txt b/core/api.txt
index 2ddead4c86..6469dd119b 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -21,8 +21,20 @@ ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
ion-action-sheet,event,ionActionSheetWillPresent,void,true
ion-action-sheet,css-prop,--backdrop-opacity
ion-action-sheet,css-prop,--background
-ion-action-sheet,css-prop,--background-activated
-ion-action-sheet,css-prop,--background-selected
+ion-action-sheet,css-prop,--button-background
+ion-action-sheet,css-prop,--button-background-activated
+ion-action-sheet,css-prop,--button-background-activated-opacity
+ion-action-sheet,css-prop,--button-background-focused
+ion-action-sheet,css-prop,--button-background-focused-opacity
+ion-action-sheet,css-prop,--button-background-hover
+ion-action-sheet,css-prop,--button-background-hover-opacity
+ion-action-sheet,css-prop,--button-background-selected
+ion-action-sheet,css-prop,--button-background-selected-opacity
+ion-action-sheet,css-prop,--button-color
+ion-action-sheet,css-prop,--button-color-activated
+ion-action-sheet,css-prop,--button-color-focused
+ion-action-sheet,css-prop,--button-color-hover
+ion-action-sheet,css-prop,--button-color-selected
ion-action-sheet,css-prop,--color
ion-action-sheet,css-prop,--height
ion-action-sheet,css-prop,--max-height
@@ -77,7 +89,9 @@ ion-back-button,prop,text,null | string | undefined,undefined,false,false
ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-back-button,css-prop,--background
ion-back-button,css-prop,--background-focused
+ion-back-button,css-prop,--background-focused-opacity
ion-back-button,css-prop,--background-hover
+ion-back-button,css-prop,--background-hover-opacity
ion-back-button,css-prop,--border-radius
ion-back-button,css-prop,--color
ion-back-button,css-prop,--color-focused
@@ -142,8 +156,11 @@ ion-button,event,ionBlur,void,true
ion-button,event,ionFocus,void,true
ion-button,css-prop,--background
ion-button,css-prop,--background-activated
+ion-button,css-prop,--background-activated-opacity
ion-button,css-prop,--background-focused
+ion-button,css-prop,--background-focused-opacity
ion-button,css-prop,--background-hover
+ion-button,css-prop,--background-hover-opacity
ion-button,css-prop,--border-color
ion-button,css-prop,--border-radius
ion-button,css-prop,--border-style
@@ -344,8 +361,11 @@ ion-fab-button,event,ionBlur,void,true
ion-fab-button,event,ionFocus,void,true
ion-fab-button,css-prop,--background
ion-fab-button,css-prop,--background-activated
+ion-fab-button,css-prop,--background-activated-opacity
ion-fab-button,css-prop,--background-focused
+ion-fab-button,css-prop,--background-focused-opacity
ion-fab-button,css-prop,--background-hover
+ion-fab-button,css-prop,--background-hover-opacity
ion-fab-button,css-prop,--border-color
ion-fab-button,css-prop,--border-radius
ion-fab-button,css-prop,--border-style
@@ -469,8 +489,11 @@ ion-item,prop,target,string | undefined,undefined,false,false
ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
ion-item,css-prop,--background
ion-item,css-prop,--background-activated
+ion-item,css-prop,--background-activated-opacity
ion-item,css-prop,--background-focused
+ion-item,css-prop,--background-focused-opacity
ion-item,css-prop,--background-hover
+ion-item,css-prop,--background-hover-opacity
ion-item,css-prop,--border-color
ion-item,css-prop,--border-radius
ion-item,css-prop,--border-style
@@ -632,7 +655,9 @@ ion-menu-button,prop,menu,string | undefined,undefined,false,false
ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-menu-button,css-prop,--background
ion-menu-button,css-prop,--background-focused
+ion-menu-button,css-prop,--background-focused-opacity
ion-menu-button,css-prop,--background-hover
+ion-menu-button,css-prop,--background-hover-opacity
ion-menu-button,css-prop,--border-radius
ion-menu-button,css-prop,--color
ion-menu-button,css-prop,--color-focused
@@ -957,15 +982,17 @@ ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
ion-segment-button,css-prop,--background
ion-segment-button,css-prop,--background-checked
-ion-segment-button,css-prop,--background-disabled
+ion-segment-button,css-prop,--background-focused
+ion-segment-button,css-prop,--background-focused-opacity
ion-segment-button,css-prop,--background-hover
+ion-segment-button,css-prop,--background-hover-opacity
ion-segment-button,css-prop,--border-color
ion-segment-button,css-prop,--border-radius
ion-segment-button,css-prop,--border-style
ion-segment-button,css-prop,--border-width
ion-segment-button,css-prop,--color
ion-segment-button,css-prop,--color-checked
-ion-segment-button,css-prop,--color-disabled
+ion-segment-button,css-prop,--color-focused
ion-segment-button,css-prop,--color-hover
ion-segment-button,css-prop,--indicator-box-shadow
ion-segment-button,css-prop,--indicator-color
@@ -1106,7 +1133,9 @@ ion-tab-button,prop,tab,string | undefined,undefined,false,false
ion-tab-button,prop,target,string | undefined,undefined,false,false
ion-tab-button,css-prop,--background
ion-tab-button,css-prop,--background-focused
+ion-tab-button,css-prop,--background-focused-opacity
ion-tab-button,css-prop,--color
+ion-tab-button,css-prop,--color-focused
ion-tab-button,css-prop,--color-selected
ion-tab-button,css-prop,--padding-bottom
ion-tab-button,css-prop,--padding-end
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 0d6d04f41a..cf627110f1 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -6,9 +6,18 @@
:host {
--background: #{$action-sheet-ios-background-color};
- --background-selected: #{$action-sheet-ios-button-background-selected};
- --background-activated: #{$action-sheet-ios-button-background-activated};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
+ --button-background: #{$action-sheet-ios-button-background};
+ --button-background-activated: #{$text-color};
+ --button-background-activated-opacity: .08;
+ --button-background-hover: currentColor;
+ --button-background-hover-opacity: .04;
+ --button-background-focused: currentColor;
+ --button-background-focused-opacity: .12;
+ --button-background-selected: #{$action-sheet-ios-button-background-selected};
+ --button-background-selected-opacity: 1;
+ --button-color: #{$action-sheet-ios-button-text-color};
+ --color: #{$action-sheet-ios-title-color};
text-align: $action-sheet-ios-text-align;
}
@@ -67,13 +76,13 @@
backdrop-filter: $action-sheet-ios-button-translucent-filter;
}
- :host(.action-sheet-translucent) .action-sheet-button.activated {
+ :host(.action-sheet-translucent) .action-sheet-button.ion-activated {
background-color: $action-sheet-ios-translucent-background-color-activated;
background-image: none;
}
:host(.action-sheet-translucent) .action-sheet-cancel {
- background: var(--background-selected);
+ background: var(--button-background-selected);
}
}
@@ -82,16 +91,8 @@
// Border is made with a linear gradient in order
// to get the proper color and iOS blur effect
-.action-sheet-title,
-.action-sheet-button {
- background-color: transparent;
- background-image: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%);
- background-repeat: no-repeat;
-
- /* stylelint-disable-next-line all */
- background-position: bottom;
-
- background-size: 100% 1px;
+.action-sheet-title {
+ background: $action-sheet-ios-button-background;
}
@@ -124,8 +125,6 @@
height: $action-sheet-ios-button-height;
- color: var(--color, $action-sheet-ios-button-text-color);
-
font-size: $action-sheet-ios-button-font-size;
contain: strict;
@@ -142,17 +141,30 @@
}
.action-sheet-selected {
- background: var(--background-selected);
-
font-weight: bold;
}
-.action-sheet-destructive {
+.action-sheet-cancel {
+ font-weight: $action-sheet-ios-button-cancel-font-weight;
+
+ &::after {
+ background: var(--button-background-selected);
+
+ opacity: var(--button-background-selected-opacity);
+ }
+}
+
+// iOS Action Sheet Button: Destructive
+// ---------------------------------------------------
+
+.action-sheet-destructive,
+.action-sheet-destructive.ion-activated,
+.action-sheet-destructive.ion-focused {
color: $action-sheet-ios-button-destructive-text-color;
}
-.action-sheet-cancel {
- background: var(--background-selected);
-
- font-weight: $action-sheet-ios-button-cancel-font-weight;
+@media (any-hover: hover) {
+ .action-sheet-destructive:hover {
+ color: $action-sheet-ios-button-destructive-text-color;
+ }
}
diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss
index 6c5a13182c..ab81b8f009 100644
--- a/core/src/components/action-sheet/action-sheet.ios.vars.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss
@@ -127,7 +127,7 @@ $action-sheet-ios-button-border-color-alpha: .08 !default;
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
/// @prop - Background color of the action sheet button
-$action-sheet-ios-button-background: transparent !default;
+$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
/// @prop - Background color alpha of the activated action sheet button
$action-sheet-ios-button-background-alpha-activated: .08 !default;
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index f080453ea9..b077be46c6 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -6,9 +6,18 @@
:host {
--background: #{$action-sheet-md-background-color};
- --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
- --background-activated: var(--background);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+ --button-background: transparent;
+ --button-background-selected: currentColor;
+ --button-background-selected-opacity: 0;
+ --button-background-activated: transparent;
+ --button-background-activated-opacity: 0;
+ --button-background-hover: currentColor;
+ --button-background-hover-opacity: .04;
+ --button-background-focused: currentColor;
+ --button-background-focused-opacity: .12;
+ --button-color: #{var(--color, $action-sheet-md-button-text-color)};
+ --color: #{$action-sheet-md-button-text-color};
}
.action-sheet-title {
@@ -52,9 +61,6 @@
height: $action-sheet-md-button-height;
- background: transparent;
- color: var(--color, $action-sheet-md-button-text-color);
-
font-size: $action-sheet-md-button-font-size;
text-align: $action-sheet-md-text-align;
@@ -67,7 +73,7 @@
@include padding(null, null, 4px, null);
@include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
- color: var(--color, $action-sheet-md-icon-color);
+ color: #{$action-sheet-md-icon-color};
font-size: $action-sheet-md-icon-font-size;
}
diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss
index 43e3b257be..0dc27f6e77 100644
--- a/core/src/components/action-sheet/action-sheet.md.vars.scss
+++ b/core/src/components/action-sheet/action-sheet.md.vars.scss
@@ -87,13 +87,6 @@ $action-sheet-md-button-padding-start: $action-sheet-md-button-
/// @prop - Background color of the action sheet button
$action-sheet-md-button-background: transparent !default;
-/// @prop - Background color of the action sheet activated button
-$action-sheet-md-button-background-activated: $background-color-step-50 !default;
-
-/// @prop - Background color of the selected action sheet button
-$action-sheet-md-button-background-selected: null !default;
-
-
// Action Sheet Icon
// --------------------------------------------------
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index c1f2d8faf0..227a182c92 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -6,9 +6,6 @@
:host {
/**
* @prop --background: Background of the action sheet group
- * @prop --background-activated: Background of the action sheet button when pressed
- * @prop --background-selected: Background of the selected action sheet button
- *
* @prop --color: Color of the action sheet text
*
* @prop --min-width: Minimum width of the action sheet
@@ -20,8 +17,28 @@
* @prop --max-height: Maximum height of the action sheet
*
* @prop --backdrop-opacity: Opacity of the backdrop
+ *
+ * @prop --button-background: Background of the action sheet button
+ * @prop --button-background-activated: Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
+ * @prop --button-background-activated-opacity: Opacity of the action sheet button background when pressed
+ * @prop --button-background-hover: Background of the action sheet button on hover
+ * @prop --button-background-hover-opacity: Opacity of the action sheet button background on hover
+ * @prop --button-background-focused: Background of the action sheet button when tabbed to
+ * @prop --button-background-focused-opacity: Opacity of the action sheet button background when tabbed to
+ * @prop --button-background-selected: Background of the selected action sheet button
+ * @prop --button-background-selected-opacity: Opacity of the selected action sheet button background
+ *
+ * @prop --button-color: Color of the action sheet button
+ * @prop --button-color-activated: Color of the action sheet button when pressed
+ * @prop --button-color-hover: Color of the action sheet button on hover
+ * @prop --button-color-focused: Color of the action sheet button when tabbed to
+ * @prop --button-color-selected: Color of the selected action sheet button
*/
--color: initial;
+ --button-color-activated: var(--button-color);
+ --button-color-focused: var(--button-color);
+ --button-color-hover: var(--button-color);
+ --button-color-selected: var(--button-color);
--min-width: auto;
--width: #{$action-sheet-width};
--max-width: #{$action-sheet-max-width};
@@ -68,6 +85,7 @@
.action-sheet-button {
display: block;
+ position: relative;
width: 100%;
@@ -75,16 +93,19 @@
outline: none;
- font-family: inherit;
-}
+ background: var(--button-background);
+ color: var(--button-color);
-.action-sheet-button.activated {
- background: var(--background-activated);
+ font-family: inherit;
+
+ overflow: hidden;
}
.action-sheet-button-inner {
display: flex;
+ position: relative;
+
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
@@ -92,6 +113,8 @@
width: 100%;
height: 100%;
+
+ z-index: 1;
}
.action-sheet-container {
@@ -124,6 +147,67 @@
overflow: hidden;
}
+
+// Action Sheet: States
+// --------------------------------------------------
+
+.action-sheet-button::after {
+ @include button-state();
+}
+
+
+// Action Sheet: Selected
+// --------------------------------------------------
+
.action-sheet-selected {
- background: var(--background-selected);
+ color: var(--button-color-selected);
+
+ &::after {
+ background: var(--button-background-selected);
+
+ opacity: var(--button-background-selected-opacity);
+ }
+}
+
+
+// Action Sheet: Activated
+// --------------------------------------------------
+
+.action-sheet-button.ion-activated {
+ color: var(--button-color-activated);
+
+ &::after {
+ background: var(--button-background-activated);
+
+ opacity: var(--button-background-activated-opacity);
+ }
+}
+
+
+// Action Sheet: Focused
+// --------------------------------------------------
+
+.action-sheet-button.ion-focused {
+ color: var(--button-color-focused);
+
+ &::after {
+ background: var(--button-background-focused);
+
+ opacity: var(--button-background-focused-opacity);
+ }
+}
+
+// Action Sheet: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+ .action-sheet-button:hover {
+ color: var(--button-color-hover);
+
+ &::after {
+ background: var(--button-background-hover);
+
+ opacity: var(--button-background-hover-opacity);
+ }
+ }
}
\ No newline at end of file
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index d2365739e7..8e9fbc8ac4 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -226,7 +226,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}
{buttons.map(b =>
-