1 files changed, 85 insertions, 56 deletions
diff --git a/app/assets/sass/_buttons.scss b/app/assets/sass/_buttons.scss
index 747b1f7..2d0bb6d 100644
--- a/app/assets/sass/_buttons.scss
+++ b/app/assets/sass/_buttons.scss
@@ -1,68 +1,97 @@
 .btn {
-  border-radius: $border-radius-base;
-  padding: $padding-base $padding-lg;
-  font-size: $font-size-base;
-  line-height: 1.2;
-  text-decoration: none;
-  text-transform: uppercase;
-  cursor: pointer;
-  margin-left: $padding-base;
+   border-radius: $border-radius-base;
+   padding: $padding-base $padding-lg;
+   font-size: $font-size-base;
+   line-height: 1.2;
+   text-decoration: none;
+   text-transform: uppercase;
+   cursor: pointer;
+   margin-left: $padding-base;
 
-  &-default {
-    border: 1px solid $blue;
-    color: $blue;
-    background-color: #fff;
+   &-default {
+   border: 1px solid $blue;
+   color: $blue;
+   background-color: #fff;
 
-    &:hover {
-      background-color: $light-blue;
-      color: #fff;
-    }
-  }
+      &:hover {
+         background-color: $light-blue;
+         color: #fff;
+      }
+   }
 
-  &-lg {
-    padding: $padding-base $padding-lg*2;
-    font-size: round($font-size-base * 1.2);
-  }
+   &-lg {
+      padding: $padding-base $padding-lg*2;
+      font-size: round($font-size-base * 1.2);
+   }
 
-  &-sm {
-     padding: $padding-base $padding-base;
-    font-size: round($font-size-base * 0.9);
- }
+   &-sm {
+      padding: $padding-base $padding-base;
+      font-size: round($font-size-base * 0.9);
+   }
 
- &-slim {
-    .fa { margin: 0};
-}
+   &-slim {
+      .fa { margin: 0};
+   }
+
+   &-link {
+      border: 0;
+      background-color: transparent;
+      color: $link-color;
+      padding: 0;
+   }
+
+   &-danger {
+      border: 1px solid $red;
+      color: $red;
+      text-transform: uppercase;
+      background-color: #fff;
+
+      &:hover {
+         background-color: $light-red;
+      }
+   }
 
-  &-danger {
-    border: 1px solid $red;
-    color: $red;
-    text-transform: uppercase;
-    background-color: #fff;
+   &-primary {
+      border: 0;
+      background: $blue;
+      box-shadow: 1px 1px 1px $gray;
+      color: #ffffff;
 
-    &:hover {
-      background-color: $light-red;
-    }
-  }
+      &:hover {
+         background: $dark-blue;
+      }
+   }
 
-  &-primary {
-    border: 0;
-    background: $blue;
-   //  background-image: linear-gradient(to bottom, $blue, $dark-blue);
-    box-shadow: 1px 1px 1px $gray;
-    color: #ffffff;
+   &-close {
+      @extend .btn-slim;
+         border-radius: 50%;
+         box-shadow: 0;
+         line-height: 1.5;
+         border: 1px solid $line-color;
+         background-color: #fff;
+      }
+   }
 
-    &:hover {
-      background: $dark-blue;
-      // background-image: linear-gradient(to bottom, $dark-blue, $blue);
-    }
-  }
+.button-group {
+   button {
+      margin: 0;
+      background-color: $gray-lightest;
+      border-radius: 0;
+      float: left;
+      border: 1px solid $line-color;
+      cursor: pointer;
 
-  &-close {
-     @extend .btn-slim;
-     border-radius: 50%;
-     box-shadow: 0;
-     line-height: 1.5;
-     border: 1px solid $line-color;
-     background-color: #fff;
- }
+      &:first-of-type {
+         border-top-left-radius: $border-radius-lg;
+         border-bottom-left-radius: $border-radius-lg;
+      }
+      &:last-of-type {
+         border-top-right-radius: $border-radius-lg;
+         border-bottom-right-radius: $border-radius-lg;
+      }
+   }
+   
+   .selected {
+      background-color: $gray-light;
+   }
 }