feat: add link colors to css vars, add uiButton link demo

ngx-kit · Oct 13, 2018 · 9fcf063 · 9fcf063
1 parent 660d3a1
commit 9fcf063
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/projects/ui/src/lib/ui-button/demo/ui-button-demo.component.html b/projects/ui/src/lib/ui-button/demo/ui-button-demo.component.html
@@ -11,6 +11,7 @@ <h3>Default state</h3>
   <button uiButton color="success">Success color</button>
   <button uiButton color="warning">Warning color</button>
   <button uiButton color="info">Info color</button>
+  <button uiButton [link]="true">Link</button>
   <h3>Disabled state</h3>
   <button uiButton disabled>Default button</button>
   <button uiButton color="primary" disabled>Primary color</button>

diff --git a/projects/ui/src/lib/ui-button/ui-button/ui-button.component.scss b/projects/ui/src/lib/ui-button/ui-button/ui-button.component.scss
@@ -106,21 +106,21 @@
 
   &.link {
     background: none;
-    color: var(--primaryColor);
+    color: var(--linkColor);
     border: none;
     &:hover {
       background: none;
       box-shadow: none;
       border: none;
-      color: var(--primaryHoverColor);
+      color: var(--linkHoverColor);
       text-decoration: underline;
       transform: none;
     }
     &:active, &.checked {
       background: none;
       box-shadow: none;
       border: none;
-      color: var(--primaryActiveColor);
+      color: var(--linkActiveColor);
       transform: none;
     }
     &:disabled {

diff --git a/projects/ui/src/themes/main.css b/projects/ui/src/themes/main.css
@@ -17,6 +17,11 @@
   --mainHoverBgColor: #f0f0f0;
   --mainHoverTextColor: #24252f;
 
+  /* Link colors */
+  --linkColor: #7288d8;
+  --linkHoverColor: #6275b9;
+  --linkActiveColor: #4f5d93;
+
   /* Trans colors */
   --toBackgroundColor1: rgba(230, 230, 230, .1);
   --toBackgroundColor2: rgba(230, 230, 230, .2);