From 8fef263b713e2aeaf7b5192c00a492baca4f8755 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 8 Aug 2018 10:51:29 -0400 Subject: [PATCH] fix(anchor): add custom properties and make sure color works properly references #14850 --- core/src/components/anchor/anchor.scss | 9 ++- core/src/components/anchor/readme.md | 7 +++ .../anchor/test/standalone/index.html | 56 +++++++++++++++++++ 3 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 core/src/components/anchor/test/standalone/index.html diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss index e150c03b42..9776cb6da8 100644 --- a/core/src/components/anchor/anchor.scss +++ b/core/src/components/anchor/anchor.scss @@ -4,16 +4,19 @@ // -------------------------------------------------- :host { - // default background / color - --color: #{ion-color(primary, base)}; + /** + * @prop --background: Background of the badge + * @prop --color: Text color of the badge + */ --background: transparent; + --color: #{ion-color(primary, base)}; background: var(--background); color: var(--color); } :host(.ion-color) { - --color: #{current-color(base)}; + color: current-color(base); } a { diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md index 76246e40bc..b5afbb267c 100644 --- a/core/src/components/anchor/readme.md +++ b/core/src/components/anchor/readme.md @@ -60,6 +60,13 @@ When using a router, it specifies the transition direction when navigating to another page using `href`. +## CSS Custom Properties + +| Name | Description | +| -------------- | ----------------------- | +| `--background` | Background of the badge | +| `--color` | Text color of the badge | + ---------------------------------------------- diff --git a/core/src/components/anchor/test/standalone/index.html b/core/src/components/anchor/test/standalone/index.html new file mode 100644 index 0000000000..ca2e94be46 --- /dev/null +++ b/core/src/components/anchor/test/standalone/index.html @@ -0,0 +1,56 @@ + + + + + + Anchor - Standalone + + + + + + +

Default

+ Anchor + +

Colors

+ Primary Anchor + Secondary Anchor + Tertiary Anchor + Success Anchor + Warning Anchor + Danger Anchor + Light Anchor + Medium Anchor + Dark Anchor + +

Custom

+ Underline Anchor + Cursive Anchor + Custom Anchor + Custom Secondary Anchor + + + + +