javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- 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
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 21327 additions and 21181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
core/src/components/spinner/spinner.ios.scss
View File

@ -4,46 +4,22 @@
// iOS Spinner
// --------------------------------------------------
.spinner-lines-ios line,
.spinner-lines-small-ios line {
stroke: $spinner-ios-lines-color;
:host(.spinner-lines) {
--ion-color-base: #{$spinner-ios-lines-color};
}
.spinner-bubbles-ios circle {
fill: $spinner-ios-bubbles-color;
:host(.spinner-bubbles) {
--ion-color-base: #{$spinner-ios-bubbles-color};
}
.spinner-circles-ios circle {
fill: $spinner-ios-circles-color;
:host(.spinner-circles) {
--ion-color-base: #{$spinner-ios-circles-color};
}
.spinner-crescent-ios circle {
stroke: $spinner-ios-crescent-color;
:host(.spinner-crescent) {
--ion-color-base: #{$spinner-ios-crescent-color};
}
.spinner-dots-ios circle {
fill: $spinner-ios-dots-color;
}
// Generate iOS Spinner Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.spinner-ios-#{$color-name} {
&.spinner-lines line,
&.spinner-lines-small line,
&.spinner-crescent circle {
stroke: $color-base;
}
&.spinner-bubbles circle,
&.spinner-circles circle,
&.spinner-dots circle {
fill: $color-base;
}
}
:host(.spinner-dots) {
--ion-color-base: #{$spinner-ios-dots-color};
}

10
core/src/components/spinner/spinner.ios.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Color of the lines spinner
$spinner-ios-lines-color: $text-ios-color-step-400 !default;
$spinner-ios-lines-color: $text-color-step-400 !default;
/// @prop - Color of the bubbles spinner
$spinner-ios-bubbles-color: $text-ios-color !default;
$spinner-ios-bubbles-color: $text-color !default;
/// @prop - Color of the circles spinner
$spinner-ios-circles-color: $text-ios-color-step-400 !default;
$spinner-ios-circles-color: $text-color-step-400 !default;
/// @prop - Color of the crescent spinner
$spinner-ios-crescent-color: $text-ios-color !default;
$spinner-ios-crescent-color: $text-color !default;
/// @prop - Color of the dots spinner
$spinner-ios-dots-color: $text-ios-color-step-300 !default;
$spinner-ios-dots-color: $text-color-step-300 !default;

44
core/src/components/spinner/spinner.md.scss
View File

@ -4,46 +4,22 @@
// Material Design Spinner
// --------------------------------------------------
.spinner-lines-md line,
.spinner-lines-small-md line {
stroke: $spinner-md-lines-color;
:host(.spinner-lines-md) {
--ion-color-base: #{$spinner-md-lines-color};
}
.spinner-bubbles-md circle {
fill: $spinner-md-bubbles-color;
:host(.spinner-bubbles) {
--ion-color-base: #{$spinner-md-bubbles-color};
}
.spinner-circles-md circle {
fill: $spinner-md-circles-color;
:host(.spinner-circles) {
--ion-color-base: #{$spinner-md-circles-color};
}
.spinner-crescent-md circle {
stroke: $spinner-md-crescent-color;
:host(.spinner-crescent) {
--ion-color-base: #{$spinner-md-crescent-color};
}
.spinner-dots-md circle {
fill: $spinner-md-dots-color;
}
// Generate Material Design Spinner Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.spinner-md-#{$color-name} {
&.spinner-lines line,
&.spinner-lines-small line,
&.spinner-crescent circle {
stroke: $color-base;
}
&.spinner-bubbles circle,
&.spinner-circles circle,
&.spinner-dots circle {
fill: $color-base;
}
}
:host(.spinner-dots) {
--ion-color-base: #{$spinner-md-dots-color};
}

10
core/src/components/spinner/spinner.md.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Color of the lines spinner
$spinner-md-lines-color: $text-md-color-step-400 !default;
$spinner-md-lines-color: $text-color-step-400 !default;
/// @prop - Color of the bubbles spinner
$spinner-md-bubbles-color: $text-md-color !default;
$spinner-md-bubbles-color: $text-color !default;
/// @prop - Color of the circles spinner
$spinner-md-circles-color: $text-md-color-step-400 !default;
$spinner-md-circles-color: $text-color-step-400 !default;
/// @prop - Color of the crescent spinner
$spinner-md-crescent-color: $text-md-color !default;
$spinner-md-crescent-color: $text-color !default;
/// @prop - Color of the dots spinner
$spinner-md-dots-color: $text-md-color-step-300 !default;
$spinner-md-dots-color: $text-color-step-300 !default;

36
core/src/components/spinner/spinner.scss
View File

@ -3,15 +3,19 @@
// Spinners
// --------------------------------------------------
ion-spinner {
:host {
position: relative;
display: inline-block;
width: 28px;
height: 28px;
color: #{current-color(base)};
--ion-color-base: currentColor;
}
ion-spinner svg {
svg {
@include position(0, null, null, 0);
position: absolute;
@ -22,7 +26,7 @@ ion-spinner svg {
transform: translateZ(0);
}
ion-spinner.spinner-paused svg {
:host(.spinner-paused) svg {
animation-play-state: paused;
}
@ -30,14 +34,15 @@ ion-spinner.spinner-paused svg {
// Spinner: lines / lines-small
// --------------------------------------------------
.spinner-lines line,
.spinner-lines-small line {
:host(.spinner-lines) line,
:host(.spinner-lines-small) line {
stroke-width: 4px;
stroke-linecap: round;
stroke: currentColor;
}
.spinner-lines svg,
.spinner-lines-small svg {
:host(.spinner-lines) svg,
:host(.spinner-lines-small) svg {
animation: spinner-fade-out 1s linear infinite;
}
@ -45,30 +50,34 @@ ion-spinner.spinner-paused svg {
// Spinner: bubbles
// --------------------------------------------------
.spinner-bubbles svg {
:host(.spinner-bubbles) svg {
animation: spinner-scale-out 1s linear infinite;
fill: currentColor;
}
// Spinner: circles
// --------------------------------------------------
.spinner-circles svg {
:host(.spinner-circles) svg {
animation: spinner-fade-out 1s linear infinite;
fill: currentColor;
}
// Spinner: crescent
// --------------------------------------------------
.spinner-crescent circle {
:host(.spinner-crescent) circle {
fill: transparent;
stroke-width: 4px;
stroke-dasharray: 128px;
stroke-dashoffset: 82px;
stroke: currentColor;
}
.spinner-crescent svg {
:host(.spinner-crescent) svg {
animation: spinner-rotate 1s linear infinite;
}
@ -76,11 +85,12 @@ ion-spinner.spinner-paused svg {
// Spinner: dots
// --------------------------------------------------
.spinner-dots circle {
:host(.spinner-dots) circle {
stroke-width: 0;
fill: currentColor;
}
.spinner-dots svg {
:host(.spinner-dots) svg {
@include transform-origin(center);
animation: spinner-dots 1s linear infinite;

22
core/src/components/spinner/spinner.tsx
View File

@ -1,6 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Color, Config, Mode } from '../../interface';
import { createThemedClasses } from '../../utils/theme';
import { createColorClasses } from '../../utils/theme';
import { SPINNERS, SpinnerConfig } from './spinner-configs';
@ -10,9 +10,7 @@ import { SPINNERS, SpinnerConfig } from './spinner-configs';
ios: 'spinner.ios.scss',
md: 'spinner.md.scss'
},
host: {
theme: 'spinner'
}
shadow: true
})
export class Spinner {
@Prop({ context: 'config' }) config!: Config;
@ -70,15 +68,13 @@ export class Spinner {
}
hostData() {
const themedClasses = createThemedClasses(this.mode, this.color, `spinner spinner-${this.getName()}`);
const spinnerClasses = {
...themedClasses,
'spinner-paused': this.paused
};
return {
class: spinnerClasses
class: {
...createColorClasses(this.color),
[`spinner-${this.getName()}`]: true,
'spinner-paused': this.paused
}
};
}
@ -86,9 +82,7 @@ export class Spinner {
const name = this.getName();
const spinner = SPINNERS[name] || SPINNERS['lines'];
const duration = (typeof this.duration === 'number' && this.duration > 10 ? this.duration : spinner.dur);
const svgs: any[] = [];
if (spinner.circles) {

92
core/src/components/spinner/test/basic/index.html
View File

@ -1,60 +1,64 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Spinner - 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>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Spinner - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Spinner - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
</ion-item>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
</ion-item>
</ion-list>
</ion-content>
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
</ion-item>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>

92
core/src/components/spinner/test/color/index.html
View File

@ -1,60 +1,64 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Spinner - Color</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>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Spinner - Color</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Spinner - Color</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner color="primary" slot="start" name="lines"></ion-spinner>
Show Lines (Primary)
</ion-item>
<ion-item>
<ion-spinner color="secondary" slot="start" name="ios-small"></ion-spinner>
Show Lines Small (Secondary)
</ion-item>
<ion-item>
<ion-spinner color="danger" slot="start" name="dots"></ion-spinner>
Show Dots (Danger)
</ion-item>
<ion-item>
<ion-spinner color="light" slot="start" name="bubbles"></ion-spinner>
Show Bubbles (Light)
</ion-item>
<ion-item>
<ion-spinner color="dark" slot="start" name="circles"></ion-spinner>
Show Circles (Dark)
</ion-item>
<ion-item>
<ion-spinner color="primary" slot="start" name="crescent"></ion-spinner>
Show Crescent (Primary)
</ion-item>
<ion-item>
<ion-spinner color="secondary" slot="start" paused></ion-spinner>
Show Paused Default Spinner (Secondary)
</ion-item>
</ion-list>
</ion-content>
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner color="primary" slot="start" name="lines"></ion-spinner>
Show Lines (Primary)
</ion-item>
<ion-item>
<ion-spinner color="secondary" slot="start" name="ios-small"></ion-spinner>
Show Lines Small (Secondary)
</ion-item>
<ion-item>
<ion-spinner color="danger" slot="start" name="dots"></ion-spinner>
Show Dots (Danger)
</ion-item>
<ion-item>
<ion-spinner color="light" slot="start" name="bubbles"></ion-spinner>
Show Bubbles (Light)
</ion-item>
<ion-item>
<ion-spinner color="dark" slot="start" name="circles"></ion-spinner>
Show Circles (Dark)
</ion-item>
<ion-item>
<ion-spinner color="primary" slot="start" name="crescent"></ion-spinner>
Show Crescent (Primary)
</ion-item>
<ion-item>
<ion-spinner color="secondary" slot="start" paused></ion-spinner>
Show Paused Default Spinner (Secondary)
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>

92
core/src/components/spinner/test/preview/index.html
View File

@ -1,60 +1,64 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Spinner</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>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Spinner</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Spinner</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
</ion-item>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
</ion-item>
</ion-list>
</ion-content>
<ion-content id="content">
<ion-list>
<ion-list-header>
Spinner Loading Indicators
</ion-list-header>
<ion-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
</ion-item>
<ion-item>
<ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>

1
core/src/components/spinner/test/standalone/index.html
View File

@ -6,6 +6,7 @@
<title>Spinner - 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>