fix(anchor): add custom properties and make sure color works properly

references #14850
ionic-team · Aug 8, 2018 · 8fef263 · 8fef263
1 parent 288eeb5
commit 8fef263
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 3 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Anchor - 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 padding>
+  <h1>Default</h1>
+  <ion-anchor href="#">Anchor</ion-anchor>
+
+  <h1>Colors</h1>
+  <ion-anchor href="#" color="primary">Primary Anchor</ion-anchor>
+  <ion-anchor href="#" color="secondary">Secondary Anchor</ion-anchor>
+  <ion-anchor href="#" color="tertiary">Tertiary Anchor</ion-anchor>
+  <ion-anchor href="#" color="success">Success Anchor</ion-anchor>
+  <ion-anchor href="#" color="warning">Warning Anchor</ion-anchor>
+  <ion-anchor href="#" color="danger">Danger Anchor</ion-anchor>
+  <ion-anchor href="#" color="light">Light Anchor</ion-anchor>
+  <ion-anchor href="#" color="medium">Medium Anchor</ion-anchor>
+  <ion-anchor href="#" color="dark">Dark Anchor</ion-anchor>
+
+  <h1>Custom</h1>
+  <ion-anchor href="#" style="text-decoration: underline">Underline Anchor</ion-anchor>
+  <ion-anchor href="#" class="cursive">Cursive Anchor</ion-anchor>
+  <ion-anchor href="#" class="custom">Custom Anchor</ion-anchor>
+  <ion-anchor href="#" color="secondary" class="custom">Custom Secondary Anchor</ion-anchor>
+
+  <style>
+    ion-anchor {
+      display: block;
+      --color: blue;
+    }
+
+    .cursive {
+      font-family: cursive;
+      font-size: 24px;
+      font-weight: bold;
+      letter-spacing: 5px;
+      text-decoration: dotted underline;
+      text-transform: uppercase;
+      color: magenta;
+    }
+
+    .custom {
+      --background: blue;
+      --color: white;
+    }
+  </style>
+</body>
+
+</html>