mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
@ -4,10 +4,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the loading wrapper
|
||||
$loading-ios-font-family: $font-family-ios-base !default;
|
||||
$loading-ios-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Font size of the loading wrapper
|
||||
$loading-ios-font-size: $font-size-ios-base !default;
|
||||
$loading-ios-font-size: 14px !default;
|
||||
|
||||
/// @prop - Padding top of the loading wrapper
|
||||
$loading-ios-padding-top: 24px !default;
|
||||
@ -31,22 +31,22 @@ $loading-ios-max-height: 90% !default;
|
||||
$loading-ios-border-radius: 8px !default;
|
||||
|
||||
/// @prop - Text color of the loading wrapper
|
||||
$loading-ios-text-color: $text-ios-color !default;
|
||||
$loading-ios-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-ios-background-color: $background-ios-color-step-50 !default;
|
||||
$loading-ios-background-color: $background-color-step-50 !default;
|
||||
|
||||
/// @prop - Background color alpha of the translucent loading wrapper
|
||||
$loading-ios-translucent-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Background color of the translucent loading wrapper
|
||||
$loading-ios-translucent-background-color: css-var($background-ios-color-value, background-ios-color, $loading-ios-translucent-background-color-alpha) !default;
|
||||
$loading-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $loading-ios-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Font weight of the loading content
|
||||
$loading-ios-content-font-weight: bold !default;
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-ios-spinner-color: $text-ios-color-step-400 !default;
|
||||
$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;
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the loading wrapper
|
||||
$loading-md-font-family: $font-family-md-base !default;
|
||||
$loading-md-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Font size of the loading wrapper
|
||||
$loading-md-font-size: $font-size-md-base !default;
|
||||
$loading-md-font-size: 14px !default;
|
||||
|
||||
/// @prop - Padding top of the loading wrapper
|
||||
$loading-md-padding-top: 24px !default;
|
||||
@ -31,10 +31,10 @@ $loading-md-max-height: 90% !default;
|
||||
$loading-md-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Text color of the loading wrapper
|
||||
$loading-md-text-color: $text-md-color-step-150 !default;
|
||||
$loading-md-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-md-background: $background-md-color-step-50 !default;
|
||||
$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;
|
||||
@ -43,7 +43,7 @@ $loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
||||
$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($colors-md, primary, base, md) !default;
|
||||
$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;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface';
|
||||
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
|
||||
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
|
||||
import { iosEnterAnimation } from './animations/ios.enter';
|
||||
@ -14,9 +14,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
styleUrls: {
|
||||
ios: 'loading.ios.scss',
|
||||
md: 'loading.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'loading'
|
||||
}
|
||||
})
|
||||
export class Loading implements OverlayInterface {
|
||||
@ -81,7 +78,7 @@ export class Loading implements OverlayInterface {
|
||||
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
|
||||
* `"bubbles"`, `"circles"`, `"crescent"`.
|
||||
*/
|
||||
@Prop() spinner?: string;
|
||||
@Prop({mutable: true}) spinner?: string;
|
||||
|
||||
/**
|
||||
* If true, the loading indicator will be translucent. Defaults to `false`.
|
||||
@ -188,7 +185,7 @@ export class Loading implements OverlayInterface {
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent
|
||||
? createThemedClasses(this.mode, this.color, 'loading-translucent')
|
||||
? createThemedClasses(this.mode, 'loading-translucent')
|
||||
: {};
|
||||
|
||||
return {
|
||||
@ -196,6 +193,7 @@ export class Loading implements OverlayInterface {
|
||||
zIndex: 20000 + this.overlayId
|
||||
},
|
||||
class: {
|
||||
...createThemedClasses(this.mode, 'loading'),
|
||||
...themedClasses,
|
||||
...getClassMap(this.cssClass)
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Loading - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Loading</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Loading - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user