mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
feat(components): improve button states and add new css properties (#19440)
Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. - changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button - greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec - updates the MD dark theme per their spec - adds a component guide for internal use changing Ionic components references #18279 fixes #20213 fixes #19965 BREAKING CHANGE: *Activated Class* The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS. *CSS Variables* The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following: ``` --background-hover: rgba(44, 44, 44, 0.08); ``` You will likely not see a hover state anymore. It should be updated to only set the desired color: ``` --background-hover: rgba(44, 44, 44); ``` If the opacity desired is something other than what the spec asks for, use: ``` --background-hover: rgba(44, 44, 44); --background-hover-opacity: 1; ```
This commit is contained in:
Brandy Carney
@ -7,7 +7,11 @@
|
||||
:host {
|
||||
--background: #{$fab-ios-background-color};
|
||||
--background-activated: #{$fab-ios-background-color-activated};
|
||||
--background-focused: var(--background-activated);
|
||||
--background-focused: #{ion-color(primary, shade)};
|
||||
--background-hover: #{ion-color(primary, tint)};
|
||||
--background-activated-opacity: 1;
|
||||
--background-focused-opacity: 1;
|
||||
--background-hover-opacity: 1;
|
||||
--color: #{$fab-ios-text-color};
|
||||
--color-activated: #{$fab-ios-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
@ -15,7 +19,7 @@
|
||||
--transition: #{$fab-ios-transition};
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
--box-shadow: #{$fab-ios-box-shadow-activated};
|
||||
--transform: #{$fab-ios-transform};
|
||||
--transition: #{$fab-ios-transition-activated};
|
||||
@ -46,6 +50,34 @@
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// Focused/Activated Button with Color
|
||||
:host(.ion-color.ion-focused) .button-native,
|
||||
:host(.ion-color.ion-activated) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(tint)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Translucent FAB buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -79,7 +111,7 @@
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
|
||||
:host(.ion-color.activated.fab-button-translucent) .button-native {
|
||||
:host(.ion-color.ion-activated.fab-button-translucent) .button-native {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,12 @@
|
||||
|
||||
:host {
|
||||
--background: #{$fab-md-background-color};
|
||||
--background-activated: var(--background);
|
||||
--background-focused: var(--background-activated);
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .24;
|
||||
--background-hover-opacity: .08;
|
||||
--color: #{$fab-md-text-color};
|
||||
--color-activated: #{$fab-md-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
@ -21,7 +25,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
--box-shadow: #{$fab-md-box-shadow-activated};
|
||||
}
|
||||
|
||||
@ -39,11 +43,41 @@
|
||||
--color-activated: #{$fab-md-list-button-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
--background: #{$fab-md-list-button-background-color};
|
||||
--background-activated: #{$fab-md-list-button-background-color-activated};
|
||||
--background-focused: var(--background-activated);
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{$fab-md-list-button-background-color-activated};
|
||||
--background-hover: #{$fab-md-list-button-background-color-hover};
|
||||
}
|
||||
|
||||
:host(.fab-button-in-list) ::slotted(ion-icon) {
|
||||
font-size: $fab-md-list-button-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Focused Button with Color
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
:host(.ion-color.ion-activated) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,7 @@ $fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .
|
||||
$fab-md-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-md-background-color-activated: ion-color(primary, shade) !default;
|
||||
$fab-md-background-color-activated: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-md-text-color: ion-color(primary, contrast) !default;
|
||||
|
||||
@ -6,9 +6,12 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-activated: Background of the button when pressed
|
||||
* @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
|
||||
* @prop --background-activated-opacity: Opacity of the button background when pressed
|
||||
* @prop --background-focused: Background of the button when focused with the tab key
|
||||
* @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
|
||||
* @prop --background-hover: Background of the button on hover
|
||||
* @prop --background-hover-opacity: Opacity of the button background on hover
|
||||
*
|
||||
* @prop --color: Text color of the button
|
||||
* @prop --color-activated: Text color of the button when pressed
|
||||
@ -32,7 +35,8 @@
|
||||
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
|
||||
*/
|
||||
--color-hover: #{var(--color)};
|
||||
--background-hover: #{ion-color(primary, tint)};
|
||||
--background-hover: #{ion-color(primary, contrast)};
|
||||
--background-hover-opacity: .08;
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
@ -101,6 +105,10 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
@include position(0, 0, null, 0);
|
||||
|
||||
@ -116,15 +124,8 @@
|
||||
|
||||
transition: all ease-in-out 300ms;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color) .button-native {
|
||||
background: #{current-color(base)};
|
||||
color: #{current-color(contrast)};
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -132,13 +133,8 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.fab-button-disabled) {
|
||||
opacity: .5;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(.fab-button-disabled) .button-native {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -148,41 +144,42 @@
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
}
|
||||
|
||||
:host(.ion-color:hover) .button-native {
|
||||
background: #{current-color(tint)};
|
||||
color: #{current-color(contrast)};
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// FAB Button: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.activated) .button-native {
|
||||
background: var(--background-activated);
|
||||
:host(.ion-activated) .button-native {
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
// Focused/Activated Button with Color
|
||||
:host(.ion-color.ion-focused) .button-native,
|
||||
:host(.ion-color.activated) .button-native {
|
||||
background: #{current-color(shade)};
|
||||
color: #{current-color(contrast)};
|
||||
&::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -252,4 +249,13 @@ ion-ripple-effect {
|
||||
:host(.fab-button-translucent) .button-native {
|
||||
backdrop-filter: var(--backdrop-filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color) .button-native {
|
||||
background: #{current-color(base)};
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
@ -125,27 +125,30 @@ export const FabButtonExample: React.FC = () => (
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------ | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| Name | Description |
|
||||
| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
|
||||
| `--background-activated-opacity` | Opacity of the button background when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the button background when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the button background on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button size="small" class="fab-button-in-list ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
@ -38,15 +38,15 @@
|
||||
<ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-fab-button color="primary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="tertiary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="success" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="warning" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="danger" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="light" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="medium" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="dark" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="primary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="tertiary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="success" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="warning" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="danger" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="light" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="medium" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="dark" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
@ -56,20 +56,20 @@
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="custom ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
|
||||
<!-- Custom Colors Fab In List -->
|
||||
<ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white activated">White</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white ion-activated">White</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-blue ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border activated">Border</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border ion-activated">Border</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
|
||||
<style>
|
||||
ion-fab-button {
|
||||
|
||||
Reference in New Issue
Block a user