From 6738ab7d87ccddb90ac87e63dd5f5f79cfc2527b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 8 Aug 2018 15:55:44 -0400 Subject: [PATCH] fix(avatar): document and add custom properties references #14850 --- core/src/components/avatar/avatar.ios.scss | 9 +-------- core/src/components/avatar/avatar.md.scss | 9 +-------- core/src/components/avatar/avatar.scss | 9 +++++++++ core/src/components/avatar/readme.md | 6 ++++++ .../src/components/avatar/test/standalone/index.html | 12 +++++++++++- 5 files changed, 28 insertions(+), 17 deletions(-) diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss index 5cb0d8ce8d..774c972f07 100644 --- a/core/src/components/avatar/avatar.ios.scss +++ b/core/src/components/avatar/avatar.ios.scss @@ -6,15 +6,8 @@ // -------------------------------------------------- :host { - @include border-radius($avatar-ios-border-radius); + --border-radius: #{$avatar-ios-border-radius}; width: $avatar-ios-width; height: $avatar-ios-height; } - -::slotted(ion-img), -::slotted(img) { - @include border-radius($avatar-ios-border-radius); - - overflow: hidden; -} diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss index e6338e4cfa..66492c7fbd 100644 --- a/core/src/components/avatar/avatar.md.scss +++ b/core/src/components/avatar/avatar.md.scss @@ -6,15 +6,8 @@ // -------------------------------------------------- :host { - @include border-radius($avatar-md-border-radius); + --border-radius: #{$avatar-md-border-radius}; width: $avatar-md-width; height: $avatar-md-height; } - -::slotted(ion-img), -::slotted(img) { - @include border-radius($avatar-md-border-radius); - - overflow: hidden; -} diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.scss index 4df2a0af20..ef0413c5ba 100644 --- a/core/src/components/avatar/avatar.scss +++ b/core/src/components/avatar/avatar.scss @@ -5,13 +5,22 @@ // -------------------------------------------------- :host { + /** + * @prop --border-radius: Border radius of the avatar and inner image + */ + @include border-radius(var(--border-radius)); + display: block; } ::slotted(ion-img), ::slotted(img) { + @include border-radius(var(--border-radius)); + width: 100%; height: 100%; object-fit: cover; + + overflow: hidden; } diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md index 6a474715ff..6708e9ec0f 100644 --- a/core/src/components/avatar/readme.md +++ b/core/src/components/avatar/readme.md @@ -8,6 +8,12 @@ Avatars can be used by themselves or inside of any element. If placed inside of +## CSS Custom Properties + +| Name | Description | +| ----------------- | ------------------------------------------- | +| `--border-radius` | Border radius of the avatar and inner image | + ---------------------------------------------- diff --git a/core/src/components/avatar/test/standalone/index.html b/core/src/components/avatar/test/standalone/index.html index 629ed3e808..1ee274f0f1 100644 --- a/core/src/components/avatar/test/standalone/index.html +++ b/core/src/components/avatar/test/standalone/index.html @@ -9,9 +9,19 @@ - + +

Default

+ +

Custom

+ + + + + + +