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 |
44 lines
1.6 KiB
SCSS
44 lines
1.6 KiB
SCSS
@import "../../themes/ionic.globals.md";
|
|
|
|
// Material Design Loading Indicator
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Font size of the loading wrapper
|
|
$loading-md-font-size: 14px !default;
|
|
|
|
/// @prop - Padding top of the loading wrapper
|
|
$loading-md-padding-top: 24px !default;
|
|
|
|
/// @prop - Padding end of the loading wrapper
|
|
$loading-md-padding-end: $loading-md-padding-top !default;
|
|
|
|
/// @prop - Padding bottom of the loading wrapper
|
|
$loading-md-padding-bottom: $loading-md-padding-top !default;
|
|
|
|
/// @prop - Padding start of the loading wrapper
|
|
$loading-md-padding-start: $loading-md-padding-end !default;
|
|
|
|
/// @prop - Max width of the loading wrapper
|
|
$loading-md-max-width: 280px !default;
|
|
|
|
/// @prop - Maximum height of the loading wrapper
|
|
$loading-md-max-height: 90% !default;
|
|
|
|
/// @prop - Border radius of the loading wrapper
|
|
$loading-md-border-radius: 2px !default;
|
|
|
|
/// @prop - Text color of the loading wrapper
|
|
$loading-md-text-color: $text-color-step-150 !default;
|
|
|
|
/// @prop - Background of the loading wrapper
|
|
$loading-md-background: $background-color-step-50 !default;
|
|
|
|
/// @prop - Box shadow color of the loading wrapper
|
|
$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
|
|
|
/// @prop - Box shadow of the loading wrapper
|
|
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
|
|
|
|
/// @prop - Color of the loading spinner
|
|
$loading-md-spinner-color: ion-color(primary, base) !default;
|