mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +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
@ -1,61 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Text - 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>Text - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Text - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding>
|
||||
<ion-text color="secondary">
|
||||
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
||||
</ion-text>
|
||||
<ion-content id="content" padding>
|
||||
<ion-text color="secondary">
|
||||
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="primary">
|
||||
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
||||
</ion-text>
|
||||
<ion-text color="primary">
|
||||
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="light">
|
||||
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
||||
</ion-text>
|
||||
<ion-text color="light">
|
||||
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="danger">
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="dark">
|
||||
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
||||
</ion-text>
|
||||
|
||||
<ion-text id="dynamicColor">
|
||||
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
||||
</ion-text>
|
||||
|
||||
<p>
|
||||
I saw a werewolf with a Chinese menu in his hand. Walking through the
|
||||
<ion-text color="danger">
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
<sub>streets</sub>
|
||||
</ion-text> of Soho in the rain. He
|
||||
<ion-text color="primary">
|
||||
<i>was</i>
|
||||
</ion-text> looking for a place called Lee Ho Fook's. Gonna get a
|
||||
<ion-text color="secondary">
|
||||
<a>big dish of beef chow mein.</a>
|
||||
</ion-text>
|
||||
<a class="color-purple">My purple class link.</a>
|
||||
</p>
|
||||
|
||||
<ion-text color="dark">
|
||||
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
||||
<p>
|
||||
He's the hairy-handed gent who ran amuck in Kent. Lately he's
|
||||
<ion-text color="primary">
|
||||
<sup>been</sup>
|
||||
</ion-text> overheard in Mayfair. Better stay away from him. He'll rip your lungs out, Jim. I'd like to meet his tailor.
|
||||
<ion-text color="danger">
|
||||
<ion-icon name="cut"></ion-icon>
|
||||
</ion-text>
|
||||
|
||||
<ion-text id="dynamicColor">
|
||||
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
||||
</ion-text>
|
||||
|
||||
<p>
|
||||
I saw a werewolf with a Chinese menu in his hand.
|
||||
Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
|
||||
He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
|
||||
Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
|
||||
<a class="color-purple">My purple class link.</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
He's the hairy-handed gent who ran amuck in Kent.
|
||||
Lately he's <ion-text color="primary"><sup>been</sup></ion-text> overheard in Mayfair.
|
||||
Better stay away from him.
|
||||
He'll rip your lungs out, Jim.
|
||||
I'd like to meet his tailor.
|
||||
<ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
|
||||
</ion-app>
|
||||
@ -64,6 +74,7 @@
|
||||
.color-purple {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -72,7 +83,5 @@
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,61 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Text</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>Text</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Text</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding>
|
||||
<ion-text color="secondary">
|
||||
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
||||
</ion-text>
|
||||
<ion-content id="content" padding>
|
||||
<ion-text color="secondary">
|
||||
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="primary">
|
||||
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
||||
</ion-text>
|
||||
<ion-text color="primary">
|
||||
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="light">
|
||||
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
||||
</ion-text>
|
||||
<ion-text color="light">
|
||||
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="danger">
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="dark">
|
||||
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
||||
</ion-text>
|
||||
|
||||
<ion-text id="dynamicColor">
|
||||
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
||||
</ion-text>
|
||||
|
||||
<p>
|
||||
I saw a werewolf with a Chinese menu in his hand. Walking through the
|
||||
<ion-text color="danger">
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
<sub>streets</sub>
|
||||
</ion-text> of Soho in the rain. He
|
||||
<ion-text color="primary">
|
||||
<i>was</i>
|
||||
</ion-text> looking for a place called Lee Ho Fook's. Gonna get a
|
||||
<ion-text color="secondary">
|
||||
<a>big dish of beef chow mein.</a>
|
||||
</ion-text>
|
||||
<a class="color-purple">My purple class link.</a>
|
||||
</p>
|
||||
|
||||
<ion-text color="dark">
|
||||
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
||||
<p>
|
||||
He's the hairy-handed gent who ran amuck in Kent. Lately he's
|
||||
<ion-text color="primary">
|
||||
<sup>been</sup>
|
||||
</ion-text> overheard in Mayfair. Better stay away from him. He'll rip your lungs out, Jim. I'd like to meet his tailor.
|
||||
<ion-text color="danger">
|
||||
<ion-icon name="cut"></ion-icon>
|
||||
</ion-text>
|
||||
|
||||
<ion-text id="dynamicColor">
|
||||
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
||||
</ion-text>
|
||||
|
||||
<p>
|
||||
I saw a werewolf with a Chinese menu in his hand.
|
||||
Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
|
||||
He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
|
||||
Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
|
||||
<a class="color-purple">My purple class link.</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
He's the hairy-handed gent who ran amuck in Kent.
|
||||
Lately he's <ion-text color="primary"><sup>been</sup></ion-text> overheard in Mayfair.
|
||||
Better stay away from him.
|
||||
He'll rip your lungs out, Jim.
|
||||
I'd like to meet his tailor.
|
||||
<ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
|
||||
</ion-app>
|
||||
@ -64,6 +74,7 @@
|
||||
.color-purple {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -72,7 +83,5 @@
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
@import "./text.ios.vars";
|
||||
|
||||
// iOS Text
|
||||
// --------------------------------------------------
|
||||
|
||||
// Generate iOS Text Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$base-color: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
.text-ios-#{$color-name},
|
||||
.text-ios-#{$color-name} a,
|
||||
.text-ios-#{$color-name} p {
|
||||
// scss-lint:disable ImportantRule
|
||||
color: $base-color !important;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Text
|
||||
// --------------------------------------------------
|
||||
@ -1,19 +0,0 @@
|
||||
@import "./text.md.vars";
|
||||
|
||||
// Material Design Text
|
||||
// --------------------------------------------------
|
||||
|
||||
// Generate Material Design Text Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$base-color: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.text-md-#{$color-name},
|
||||
.text-md-#{$color-name} a,
|
||||
.text-md-#{$color-name} p {
|
||||
// scss-lint:disable ImportantRule
|
||||
color: $base-color !important;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Text
|
||||
// --------------------------------------------------
|
||||
10
core/src/components/text/text.scss
Normal file
10
core/src/components/text/text.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Text
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
color: #{current-color(base)};
|
||||
|
||||
--ion-color-base: currentColor;
|
||||
}
|
||||
@ -1,16 +1,12 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
import { Color, Mode } from '../../interface';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-text',
|
||||
styleUrls: {
|
||||
ios: 'text.ios.scss',
|
||||
md: 'text.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'text'
|
||||
}
|
||||
styleUrl: 'text.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class Text {
|
||||
|
||||
@ -26,4 +22,13 @@ export class Text {
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: createColorClasses(this.color)
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user