fix(links): change hover state

- Give default/lowlight-alt/inverse links underlines on hover - Darken default/lowlight/lowlight-alt links [Finishes #82570730] Signed-off-by: Geoff Pleiss <gpleiss@pivotallabs.com>
pivotal-cf · Nov 12, 2014 · baf77c4 · baf77c4
1 parent 90cb645
commit baf77c4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/pivotal-ui/components/links.scss b/src/pivotal-ui/components/links.scss
@@ -20,13 +20,15 @@ Link
 <a href="http://google.com">default link</a>                                                    |                          | This is what buttons look like, this is the go to button style.
 <a class="link-lowlight" href="http://google.com">lowlight link</a>                             | `link-lowlight`          | I'm afraid I can't let you do that, yet.
 <a class="link-lowlight-alt" href="http://google.com">lowlight link alternate</a>   | `link-lowlight-alt`  | Less important links
-<a class="link-lowlight-alt bg-dark-1" href="http://google.com">lowlight link alternate</a>   | `link-lowlight-alt`  | Less important links on a dark background.
 <a class="link-inverse bg-dark-1" href="http://google.com">inverse link</a>                     | `link-inverse`           | I go on a non-white background
 
 */
 
+a{
+  @include transition-pui();
+}
+
 a:hover {
-  text-decoration: none;
   cursor: pointer;
 }
 
@@ -37,13 +39,14 @@ a:hover {
   color: $link-lowlight-color;
   &:hover {
     color: $link-lowlight-hover-color;
+    text-decoration: none;
   }
 }
 
 .link-lowlight-alt {
-  color: $link-lowlight-inverse-color;
+  color: $link-lowlight-alt-color;
   &:hover {
-    color: $link-lowlight-inverse-hover-color;
+    color: $link-lowlight-alt-hover-color;
   }
 }
 

diff --git a/src/pivotal-ui/components/variables.scss b/src/pivotal-ui/components/variables.scss
@@ -216,16 +216,16 @@ $text-color:            $gray-3 !default;
 // -------------------------
 
 $link-color:                              $blue-2;
-$link-hover-color:                        $blue-3;
+$link-hover-color:                        $blue-1;
 
 $link-lowlight-color:                     $blue-4;
 $link-lowlight-hover-color:               $blue-2;
 
 $link-inverse-color:                      $blue-3;
 $link-inverse-hover-color:                $blue-4;
 
-$link-lowlight-inverse-color:             $gray-4;
-$link-lowlight-inverse-hover-color:       $gray-6;
+$link-lowlight-alt-color:             $gray-4;
+$link-lowlight-alt-hover-color:       $blue-1;
 
 // Typography
 // -------------------------