mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +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,26 +4,27 @@
|
||||
// iOS Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
.loading-ios {
|
||||
:host {
|
||||
--background: #{$loading-ios-background-color};
|
||||
--max-width: #{$loading-ios-max-width};
|
||||
--max-height: #{$loading-ios-max-height};
|
||||
--spinner-color: #{$loading-ios-spinner-color};
|
||||
|
||||
color: $loading-ios-text-color;
|
||||
|
||||
font-size: $loading-ios-font-size;
|
||||
}
|
||||
|
||||
.loading-ios .loading-wrapper {
|
||||
.loading-wrapper {
|
||||
@include border-radius($loading-ios-border-radius);
|
||||
@include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
|
||||
|
||||
max-width: $loading-ios-max-width;
|
||||
max-height: $loading-ios-max-height;
|
||||
|
||||
background-color: $loading-ios-background-color;
|
||||
color: $loading-ios-text-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Translucent Loading
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-translucent-ios .loading-wrapper {
|
||||
:host(.loading-translucent) .loading-wrapper {
|
||||
background-color: $loading-ios-translucent-background-color;
|
||||
backdrop-filter: $loading-ios-translucent-filter;
|
||||
}
|
||||
@ -32,35 +33,10 @@
|
||||
// iOS Loading Content
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .loading-content {
|
||||
.loading-content {
|
||||
font-weight: $loading-ios-content-font-weight;
|
||||
}
|
||||
|
||||
.loading-ios .loading-spinner + .loading-content {
|
||||
.loading-spinner + .loading-content {
|
||||
@include margin-horizontal(16px, null);
|
||||
}
|
||||
|
||||
|
||||
// iOS Loading Spinner fill colors
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .spinner-lines-ios line,
|
||||
.loading-ios .spinner-lines-small-ios line {
|
||||
stroke: $loading-ios-spinner-lines-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-bubbles circle {
|
||||
fill: $loading-ios-spinner-bubbles-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-circles circle {
|
||||
fill: $loading-ios-spinner-circles-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-crescent circle {
|
||||
stroke: $loading-ios-spinner-crescent-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-dots circle {
|
||||
fill: $loading-ios-spinner-dots-color;
|
||||
}
|
||||
|
||||
@ -45,20 +45,5 @@ $loading-ios-content-font-weight: bold !default;
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-ios-spinner-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the ios loading spinner
|
||||
$loading-ios-spinner-lines-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the bubbles loading spinner
|
||||
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the circles loading spinner
|
||||
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the crescent loading spinner
|
||||
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the dots loading spinner
|
||||
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Filter of the translucent loading
|
||||
$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
@ -4,20 +4,21 @@
|
||||
// Material Design Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
.loading-md {
|
||||
:host {
|
||||
--background: #{$loading-md-background};
|
||||
--max-width: #{$loading-md-max-width};
|
||||
--max-height: #{$loading-md-max-height};
|
||||
--spinner-color: #{$loading-md-spinner-color};
|
||||
|
||||
color: $loading-md-text-color;
|
||||
|
||||
font-size: $loading-md-font-size;
|
||||
}
|
||||
|
||||
.loading-md .loading-wrapper {
|
||||
.loading-wrapper {
|
||||
@include border-radius($loading-md-border-radius);
|
||||
@include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
|
||||
|
||||
max-width: $loading-md-max-width;
|
||||
max-height: $loading-md-max-height;
|
||||
|
||||
background: $loading-md-background;
|
||||
color: $loading-md-text-color;
|
||||
|
||||
box-shadow: $loading-md-box-shadow;
|
||||
}
|
||||
|
||||
@ -25,31 +26,6 @@
|
||||
// Material Design Loading Content
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .loading-spinner + .loading-content {
|
||||
.loading-spinner + .loading-content {
|
||||
@include margin-horizontal(16px, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Loading Spinner fill colors
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .spinner-lines-md line,
|
||||
.loading-md .spinner-lines-small-md line {
|
||||
stroke: $loading-md-spinner-lines-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-bubbles circle {
|
||||
fill: $loading-md-spinner-bubbles-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-circles circle {
|
||||
fill: $loading-md-spinner-circles-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-crescent circle {
|
||||
stroke: $loading-md-spinner-crescent-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-dots circle {
|
||||
fill: $loading-md-spinner-dots-color;
|
||||
}
|
||||
|
||||
@ -41,18 +41,3 @@ $loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-md-spinner-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Color of the lines loading spinner
|
||||
$loading-md-spinner-lines-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the bubbles loading spinner
|
||||
$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the circles loading spinner
|
||||
$loading-md-spinner-circles-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the crescent loading spinner
|
||||
$loading-md-spinner-crescent-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the dots loading spinner
|
||||
$loading-md-spinner-dots-color: $loading-md-spinner-color !default;
|
||||
|
||||
@ -3,7 +3,25 @@
|
||||
// Loading
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-loading {
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the loading dialog
|
||||
*
|
||||
* @prop --min-width: Minimum width of the loading dialog
|
||||
* @prop --width: Width of the loading dialog
|
||||
* @prop --max-width: Maximum width of the loading dialog
|
||||
*
|
||||
* @prop --min-height: Minimum height of the loading dialog
|
||||
* @prop --height: Height of the loading dialog
|
||||
* @prop --max-height: Maximum height of the loading dialog
|
||||
*
|
||||
* @prop --spinner-color: Color of the loading spinner
|
||||
*/
|
||||
--min-width: auto;
|
||||
--width: auto;
|
||||
--min-height: auto;
|
||||
--height: auto;
|
||||
|
||||
@include font-smoothing();
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
@ -21,15 +39,31 @@ ion-loading {
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
ion-loading-controller {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
align-items: inherit;
|
||||
justify-content: inherit;
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
opacity: 0;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
}
|
||||
|
||||
.spinner-lines,
|
||||
.spinner-lines-small,
|
||||
.spinner-bubbles,
|
||||
.spinner-circles,
|
||||
.spinner-crescent,
|
||||
.spinner-dots {
|
||||
color: var(--spinner-color);
|
||||
}
|
||||
@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
|
||||
|
||||
import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
|
||||
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
import { getClassMap } from '../../utils/theme';
|
||||
|
||||
import { iosEnterAnimation } from './animations/ios.enter';
|
||||
import { iosLeaveAnimation } from './animations/ios.leave';
|
||||
@ -14,7 +14,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
styleUrls: {
|
||||
ios: 'loading.ios.scss',
|
||||
md: 'loading.md.scss'
|
||||
}
|
||||
},
|
||||
scoped: true
|
||||
})
|
||||
export class Loading implements ComponentInterface, OverlayInterface {
|
||||
private durationTimeout: any;
|
||||
@ -183,18 +184,13 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent
|
||||
? createThemedClasses(this.mode, 'loading-translucent')
|
||||
: {};
|
||||
|
||||
return {
|
||||
style: {
|
||||
zIndex: 40000 + this.overlayIndex
|
||||
},
|
||||
class: {
|
||||
...createThemedClasses(this.mode, 'loading'),
|
||||
...themedClasses,
|
||||
...getClassMap(this.cssClass)
|
||||
...getClassMap(this.cssClass),
|
||||
'loading-translucent': this.translucent
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -165,6 +165,20 @@ Type: `Promise<void>`
|
||||
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------- | ------------------------------------ |
|
||||
| `--background` | Background of the loading dialog |
|
||||
| `--height` | Height of the loading dialog |
|
||||
| `--max-height` | Maximum height of the loading dialog |
|
||||
| `--max-width` | Maximum width of the loading dialog |
|
||||
| `--min-height` | Minimum height of the loading dialog |
|
||||
| `--min-width` | Minimum width of the loading dialog |
|
||||
| `--spinner-color` | Color of the loading spinner |
|
||||
| `--width` | Width of the loading dialog |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@ -13,52 +13,52 @@
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
|
||||
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
|
||||
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
<script>
|
||||
@ -81,8 +81,16 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-loading .loading-wrapper {
|
||||
background: rgb(155, 221, 226);
|
||||
.custom-loading {
|
||||
--background: rgba(37, 210, 223, 0.8);
|
||||
--spinner-color: white;
|
||||
|
||||
--height: 100%;
|
||||
--max-height: auto;
|
||||
--width: 100%;
|
||||
--max-width: auto;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
f {
|
||||
|
||||
Reference in New Issue
Block a user