javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16: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 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/avatar/avatar.ios.scss
View File

@ -5,15 +5,15 @@
// iOS Avatar
// --------------------------------------------------
.avatar-ios {
:host {
@include border-radius($avatar-ios-border-radius);
width: $avatar-ios-width;
height: $avatar-ios-height;
}
.avatar-ios ion-img,
.avatar-ios img {
::slotted(ion-img),
::slotted(img) {
@include border-radius($avatar-ios-border-radius);
overflow: hidden;

6
core/src/components/avatar/avatar.md.scss
View File

@ -5,15 +5,15 @@
// Material Design Avatar
// --------------------------------------------------
.avatar-md {
:host {
@include border-radius($avatar-md-border-radius);
width: $avatar-md-width;
height: $avatar-md-height;
}
.avatar-md ion-img,
.avatar-md img {
::slotted(ion-img),
::slotted(img) {
@include border-radius($avatar-md-border-radius);
overflow: hidden;

5
core/src/components/avatar/avatar.scss
View File

@ -4,11 +4,12 @@
// Avatar
// --------------------------------------------------
ion-avatar {
:host {
display: block;
}
ion-avatar img {
::slotted(ion-img),
::slotted(img) {
width: 100%;
height: 100%;

12
core/src/components/avatar/avatar.tsx
View File

@ -7,8 +7,12 @@ import { Component } from '@stencil/core';
ios: 'avatar.ios.scss',
md: 'avatar.md.scss'
},
host: {
theme: 'avatar'
}
shadow: true
})
export class Avatar {}
export class Avatar {
render() {
return <slot></slot>;
}
}

53
core/src/components/avatar/test/basic/index.html
View File

@ -6,43 +6,44 @@
<title>Avatar - 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>Avatar - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Avatar - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="end">
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
</ion-avatar>
<ion-label>Wide Avatar</ion-label>
</ion-item>
</ion-content>
<ion-item>
<ion-avatar slot="end">
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
</ion-avatar>
<ion-label>Wide Avatar</ion-label>
</ion-item>
</ion-content>
</ion-app>
</body>

41
core/src/components/avatar/test/preview/index.html
View File

@ -6,36 +6,37 @@
<title>Avatar</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>Avatar</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Avatar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
</ion-content>
<ion-item>
<ion-avatar slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Item Avatar</ion-label>
</ion-item>
</ion-content>
</ion-app>
</body>

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

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