mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +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,22 +1,11 @@
|
||||
@import "./note.ios.vars";
|
||||
@import "./note";
|
||||
|
||||
// iOS Note
|
||||
// --------------------------------------------------
|
||||
|
||||
.note-ios {
|
||||
:host {
|
||||
font-family: $note-ios-font-family;
|
||||
|
||||
color: $note-ios-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Note Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
.note-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
--ion-color-base: #{$note-ios-color};
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the note
|
||||
$note-ios-font-family: $font-family-ios-base !default;
|
||||
$note-ios-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Text color of the note
|
||||
$note-ios-color: $text-ios-color-step-650 !default;
|
||||
$note-ios-color: $text-color-step-650 !default;
|
||||
|
||||
@ -1,22 +1,11 @@
|
||||
@import "./note.md.vars";
|
||||
@import "./note";
|
||||
|
||||
// Material Design Note
|
||||
// --------------------------------------------------
|
||||
|
||||
.note-md {
|
||||
:host {
|
||||
font-family: $note-md-font-family;
|
||||
|
||||
color: $note-md-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Note Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.note-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
--ion-color-base: #{$note-md-color};
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the note
|
||||
$note-md-font-family: $font-family-md-base !default;
|
||||
$note-md-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Text color of the note
|
||||
$note-md-color: $text-md-color-step-800 !default;
|
||||
$note-md-color: $text-color-step-800 !default;
|
||||
|
||||
8
core/src/components/note/note.scss
Normal file
8
core/src/components/note/note.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./note.ios.vars";
|
||||
|
||||
// iOS Note
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
import { Color, Mode } from '../../interface';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-note',
|
||||
@ -7,9 +8,7 @@ import { Color, Mode } from '../../interface';
|
||||
ios: 'note.ios.scss',
|
||||
md: 'note.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'note'
|
||||
}
|
||||
shadow: true
|
||||
})
|
||||
export class Note {
|
||||
/**
|
||||
@ -23,4 +22,17 @@ export class Note {
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
...createColorClasses(this.color)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -6,129 +6,130 @@
|
||||
<title>Note - 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>Note - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Note - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="end" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="end" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="end" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="end" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="end" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="end" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="end" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="end" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
|
||||
<ion-label>Dynamic Note Color (toggle)</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
|
||||
<ion-label>Dynamic Note Color (toggle)</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="start" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="start" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="start" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="start" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="start" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="start" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="start" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="start" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
@ -143,4 +144,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,129 +6,130 @@
|
||||
<title>Note</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>Note</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Note</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="end" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="end" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="end" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="end" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="end" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="end" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="end" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="end" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
|
||||
<ion-label>Dynamic Note Color (toggle)</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
|
||||
<ion-label>Dynamic Note Color (toggle)</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="start" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="start" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="start" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="start" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="start" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="start" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="start" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="start" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
@ -143,4 +144,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Note - 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