mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
4053f386fd
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 |
91 lines
2.0 KiB
SCSS
91 lines
2.0 KiB
SCSS
@import "./buttons.md.vars";
|
|
@import "./buttons";
|
|
|
|
// Material Design Toolbar Default Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) ion-button {
|
|
--padding-top: 0;
|
|
--padding-bottom: 0;
|
|
--padding-start: 8px;
|
|
--padding-end: 8px;
|
|
--box-shadow: none;
|
|
|
|
height: 32px;
|
|
|
|
font-size: #{$toolbar-md-button-font-size};
|
|
font-weight: 500;
|
|
}
|
|
|
|
::slotted(*) ion-button:not(.button-round) {
|
|
--border-radius: #{$toolbar-md-button-border-radius};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar w/ Color Default Button
|
|
// --------------------------------------------------
|
|
|
|
:host-context(.ion-color)::slotted(*) .button {
|
|
--color: initial;
|
|
--color-activated: initial;
|
|
--color-focused: initial;
|
|
--background-focused: #{ion-color(primary, contrast, 0.1)};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Solid Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-solid {
|
|
--color: #{$toolbar-md-background};
|
|
--color-activated: #{$toolbar-md-background};
|
|
--background: #{$toolbar-md-color};
|
|
--background-activated: #{$toolbar-md-color};
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Outline Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-outline {
|
|
--color: initial;
|
|
--color-activated: currentColor;
|
|
--background: transparent;
|
|
--background-activated: transparent;
|
|
--border-color: currentColor;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Clear Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(*) .button-clear {
|
|
--color: initial;
|
|
--color-activated: currentColor;
|
|
--background: transparent;
|
|
}
|
|
|
|
|
|
// Material Design Toolbar Button Icon
|
|
// --------------------------------------------------
|
|
::slotted(*) ion-icon[slot="start"] {
|
|
@include margin(0);
|
|
@include margin-horizontal(null, .3em);
|
|
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
::slotted(*) ion-icon[slot="end"] {
|
|
@include margin(0);
|
|
@include margin-horizontal(.4em, null);
|
|
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
::slotted(*) ion-icon[slot="icon-only"] {
|
|
@include padding(0);
|
|
@include margin(0);
|
|
|
|
font-size: 1.8em;
|
|
}
|