mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
refactor(components): consistent css variables for size (#16600)
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need. - fixes a bug where the spinner color wasn't being set properly in loading - adds css variables for customizing background, color, some borders in overlays - fixes a bug where prefix, suffix are taking up too much width in picker closes #16097 references ionic-team/ionic-docs#228 BREAKING CHANGES ## Core Components Removes the `--width` and `--height` variables from the following components, in favor of CSS: - Button - FAB Button - Checkbox - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable - Radio - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size. ## Overlay Components The following components have all be converted to shadow (or scoped) and have CSS variables for width/height: - Action Sheet _(scoped)_ - Alert _(scoped)_ - Loading _(scoped)_ - Menu _(shadow)_ - Modal _(scoped)_ - Picker _(scoped)_ - Popover _(scoped)_ - Toast _(shadow)_ The above components will now have the following CSS variables for consistency among overlays: | Name | | ----------------- | | `--height` | | `--max-height` | | `--max-width` | | `--min-height` | | `--min-width` | | `--width` | If the component does not set the value, it will default to `auto`. ## Removed CSS Variables The following CSS properties have been removed: | Component | Property | Reason | | ---------------| --------------------| --------------------------------| | **Button** | `--height` | Use CSS instead | | **Button** | `--margin-bottom` | Use CSS instead | | **Button** | `--margin-end` | Use CSS instead | | **Button** | `--margin-start` | Use CSS instead | | **Button** | `--margin-top` | Use CSS instead | | **Button** | `--width` | Use CSS instead | | **Checkbox** | `--height` | Use CSS or `--size` | | **Checkbox** | `--width` | Use CSS or `--size` | | **FAB Button** | `--width` | Use CSS instead | | **FAB Button** | `--height` | Use CSS instead | | **FAB Button** | `--margin-bottom` | Use CSS instead | | **FAB Button** | `--margin-end` | Use CSS instead | | **FAB Button** | `--margin-start` | Use CSS instead | | **FAB Button** | `--margin-top | Use CSS instead | | **Menu** | `--width-small` | Use a media query and `--width` | | **Radio** | `--width` | Use CSS instead | | **Radio** | `--height` | Use CSS instead | | **Radio** | `--inner-height` | Calculated based on parent | | **Radio** | `--inner-width` | Calculated based on parent |
This commit is contained in:
Brandy Carney
@ -4,6 +4,12 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
--border-width: 0;
|
||||
--border-style: none;
|
||||
--border-color: initial;
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-activated: Background of the button when activated
|
||||
@ -13,9 +19,6 @@
|
||||
* @prop --color-activated: Text color of the button when activated
|
||||
* @prop --color-focused: Text color of the button when focused
|
||||
*
|
||||
* @prop --width: Width of the button
|
||||
* @prop --height: Height of the button
|
||||
*
|
||||
* @prop --transition: Transition of the button
|
||||
*
|
||||
* @prop --border-radius: Border radius of the button
|
||||
@ -27,30 +30,17 @@
|
||||
*
|
||||
* @prop --box-shadow: Box shadow of the button
|
||||
*
|
||||
* @prop --margin-top: Margin top of the button
|
||||
* @prop --margin-end: Margin end of the button
|
||||
* @prop --margin-bottom: Margin bottom of the button
|
||||
* @prop --margin-start: Margin start of the button
|
||||
*
|
||||
* @prop --padding-top: Padding top of the button
|
||||
* @prop --padding-end: Padding end of the button
|
||||
* @prop --padding-bottom: Padding bottom of the button
|
||||
* @prop --padding-start: Padding start of the button
|
||||
*/
|
||||
--width: #{$fab-size};
|
||||
--height: var(--width);
|
||||
--margin-start: calc((#{$fab-size} - var(--width)) / 2);
|
||||
--margin-end: calc((#{$fab-size} - var(--width)) / 2);
|
||||
--margin-top: calc((#{$fab-size} - var(--height)) / 2);
|
||||
--margin-bottom: calc((#{$fab-size} - var(--height)) / 2);
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
--border-width: 0;
|
||||
--border-style: none;
|
||||
--border-color: initial;
|
||||
@include margin(0);
|
||||
display: block;
|
||||
|
||||
width: #{$fab-size};
|
||||
height: #{$fab-size};
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
text-align: center;
|
||||
@ -81,14 +71,13 @@
|
||||
.button-native {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
|
||||
@include text-inherit();
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transform: var(--transform);
|
||||
|
||||
@ -105,8 +94,6 @@
|
||||
background-clip: padding-box;
|
||||
color: var(--color);
|
||||
|
||||
line-height: var(--height);
|
||||
|
||||
box-shadow: var(--box-shadow);
|
||||
contain: strict;
|
||||
cursor: pointer;
|
||||
@ -181,7 +168,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host([mini]) {
|
||||
--width: #{$fab-mini-size};
|
||||
@include margin(($fab-size - $fab-mini-size) / 2);
|
||||
|
||||
width: #{$fab-mini-size};
|
||||
height: #{$fab-mini-size};
|
||||
}
|
||||
|
||||
// FAB Close Icon
|
||||
|
||||
@ -75,18 +75,12 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when activated |
|
||||
| `--color-focused` | Text color of the button when focused |
|
||||
| `--height` | Height of the button |
|
||||
| `--margin-bottom` | Margin bottom of the button |
|
||||
| `--margin-end` | Margin end of the button |
|
||||
| `--margin-start` | Margin start of the button |
|
||||
| `--margin-top` | Margin top of the button |
|
||||
| `--padding-bottom` | Padding bottom of the button |
|
||||
| `--padding-end` | Padding end of the button |
|
||||
| `--padding-start` | Padding start of the button |
|
||||
| `--padding-top` | Padding top of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| `--width` | Width of the button |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user