Updates for button variants (#345)

* Updates for button variants

sky-btn-link, sky-btn-default, sky-ban-link-inline

* Add !default to variable entry

src/modules/action-button/action-button.component.html

@@ -1,5 +1,5 @@
 <div
-  class="sky-action-button"
+  class="sky-action-button sky-btn-default"
   role="button"
   (click)="buttonClicked()"
   (keyup)="enterPress($event)"

src/modules/action-button/action-button.component.scss

@@ -1,7 +1,6 @@
 @import '../../scss/mixins';
 
 .sky-action-button {
-  @include sky-button-variant($sky-text-color, $sky-color-white, $sky-color-gray-lighter);
   @include sky-border(dark, top, bottom, left, right);
   max-width: 236px;
   border-radius: 3px;

src/modules/search/search.component.html

@@ -6,7 +6,7 @@
         type="button"
         [ngClass]="{'sky-search-btn-open-applied': clearButtonShown}"
         [hidden]="!searchButtonShown"
-        class="sky-btn sky-btn-secondary sky-search-btn-open"
+        class="sky-btn sky-btn-default sky-search-btn-open"
         [attr.title]="'search_open' | skyResources"
         (click)="toggleSearchInput(true)">
         <i class="fa fa-search fa-lg"></i>

src/modules/search/search.component.scss

@@ -78,6 +78,11 @@
     padding-left: 6px;
 }
 
+.sky-search-btn-apply:hover, .sky-search-btn-apply:focus,
+.sky-search-btn-clear:hover, .sky-search-btn-clear:focus {
+  background-color: $sky-color-white;
+}
+
 
 .sky-search-dismiss-absolute {
     position: absolute;

src/scss/_buttons.scss

@@ -28,11 +28,35 @@
 }
 
 .sky-btn-default {
-  background-color: #fff;
+  @include sky-button-variant($sky-text-color, $sky-color-white, $sky-color-gray-lighter, $sky-color-gray-10);
 }
 
 .sky-btn-primary {
-  @include sky-button-variant(#fff, $sky-color-blue, $sky-color-blue);
+  @include sky-button-variant($sky-color-white, $sky-color-blue, $sky-color-blue);
+}
+
+.sky-btn-link {
+  color: $sky-link-color;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.sky-btn-link:hover, .sky-btn-link:focus {
+  color: $sky-link-hover-color;
+  background-color: transparent;
+  border-color: transparent;
+  text-decoration: underline;
+  outline: none;
+}
+
+.sky-btn-link-inline {
+  @extend .sky-btn-link;
+  font-size: inherit;
+  line-height: inherit;
+  display: inline;
+  padding: 0;
+  border: none;
+  vertical-align: top;
 }
 
 .sky-btn-tab {

src/scss/_mixins.scss

@@ -112,7 +112,7 @@
   );
 }
 
-@mixin sky-button-variant($color, $background, $border) {
+@mixin sky-button-variant($color, $background, $border, $hoverbackground:darken($background, 10%)) {
   color: $color;
   background-color: $background;
   border-color: $border;
@@ -123,7 +123,7 @@
   &:active,
   &.active {
     color: $color;
-    background-color: darken($background, 10%);
+    background-color: $hoverbackground;
         border-color: darken($border, 12%);
   }
   &:active,

src/scss/_variables.scss

@@ -13,6 +13,12 @@ $sky-margin-double: $sky-margin * 2 !default;
 $sky-margin-plus-half: $sky-margin + $sky-margin-half !default;
 $sky-margin-triple: $sky-margin * 3 !default;
 
+// start of new colors
+$sky-color-gray-05: #eeeeef !default;
+$sky-color-gray-10: #e2e3e4 !default;
+
+// end of new colors
+
 $sky-color-green: #1ab394 !default;
 $sky-color-blue: #1c84c6 !default;
 $sky-color-aqua: #23c6c8 !default;
@@ -27,6 +33,7 @@ $sky-color-gray-light: lighten(#000, 60%) !default; // #999
 $sky-color-gray-lighter: lighten(#000, 80%) !default; // #ccc
 $sky-color-gray-lightest: lighten(#000, 90%) !default; // #e6e6e6
 
+
 $sky-nav-background-color: #2f4050 !default;
 $sky-nav-color: #a7b1c2 !default;
 $sky-nav-selected-color: $sky-color-white !default;
@@ -37,7 +44,7 @@ $sky-nav-selected-border-width: 4px !default;
 $sky-border-color: #e7eaec !default;
 
 $sky-body-background-color: #f3f3f4 !default;
-$sky-background-color-neutral-light: #eeeeef !default;
+$sky-background-color-neutral-light: $sky-color-gray-05 !default;
 
 $sky-line-height-base: 1.428571429 !default;
 
@@ -60,6 +67,7 @@ $sky-text-color: $sky-color-black !default;
 $sky-selected-color: #eeeffb !default;
 $sky-text-deemphasized-color: #707374 !default;
 $sky-link-color: $sky-color-blue !default;
+$sky-link-hover-color: #135783;
 
 // begin transitions
 $sky-transition-time-short: 150ms !default;