catscope 0.1.0 → 0.1.1

data/assets/bower_components/foundation/scss/foundation/components/_accordion.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -14,6 +14,7 @@ $accordion-navigation-padding: rem-calc(16) !default;
 $accordion-navigation-bg-color: $silver !default;
 $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
 $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
+$accordion-navigation-active-font-color: $jet !default;
 $accordion-navigation-font-color: $jet !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
@@ -32,7 +33,7 @@ $accordion-content-active-bg-color: $white !default;
   margin-bottom: 0;
 }
 
-//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family){
+//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family) {
 //    @params $bg-color: [ color or string ]: Specify the background color for the navigation element
 //    @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
 //    @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
@@ -40,8 +41,9 @@ $accordion-content-active-bg-color: $white !default;
 //    @params $font-color [ color or string ]: Color of the font for accordion
 //    @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
 //    @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
+//    @params $active-font [ color or string ]: Specify the font color for the navigation element when active.
 
-@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
+@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family, $active-font: $accordion-navigation-active-font-color ) {
   display: block;
   margin-bottom: 0 !important;
   @if type-of($active_class) != "string" {
@@ -50,6 +52,7 @@ $accordion-content-active-bg-color: $white !default;
   @else {
     &.#{ $active_class } > a {
       background: $active-bg;
+      color: $active-font;
     }
   }
   > a {
@@ -98,7 +101,7 @@ $accordion-content-active-bg-color: $white !default;
 //    @params $bg [ color  ]: Background color for the content when it's visible
 //    @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
 
-@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
+@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
   display: none;
   @if type-of($padding) != "number" {
     @warn "#{$padding} was read as a #{type-of($padding)}";
@@ -118,8 +121,8 @@ $accordion-content-active-bg-color: $white !default;
   }
   @else {
     &.#{$active_class} {
-      display: block;
       background: $bg;
+      display: block;
     }
   }
 }
@@ -129,17 +132,18 @@ $accordion-content-active-bg-color: $white !default;
     .accordion {
       @include clearfix;
       margin-bottom: 0;
+      margin-left: 0;
       .accordion-navigation, dd {
         display: block;
         margin-bottom: 0 !important;
-        &.active > a { background: $accordion-navigation-active-bg-color; }
+        &.active > a { background: $accordion-navigation-active-bg-color; color: $accordion-navigation-active-font-color; }
         > a {
           background: $accordion-navigation-bg-color;
           color: $accordion-navigation-font-color;
-          padding: $accordion-navigation-padding;
           display: block;
           font-family: $accordion-navigation-font-family;
           font-size: $accordion-navigation-font-size;
+          padding: $accordion-navigation-padding;
           &:hover { background: $accordion-navigation-hover-bg-color; }
         }
 
@@ -147,8 +151,8 @@ $accordion-content-active-bg-color: $white !default;
           display: none;
           padding: $accordion-content-padding;
           &.active {
-            display: block;
             background: $accordion-content-active-bg-color;
+            display: block;
           }
         }
       }

data/assets/bower_components/foundation/scss/foundation/components/_alert-boxes.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // Alert Box Variables
@@ -35,9 +35,9 @@ $alert-close-color: $oil !default;
 $alert-close-top: 50% !default;
 $alert-close-position: rem-calc(4) !default;
 $alert-close-font-size: rem-calc(22) !default;
-$alert-close-opacity: 0.3 !default;
-$alert-close-opacity-hover: 0.5 !default;
-$alert-close-padding: 9px 6px 4px !default;
+$alert-close-opacity: .3 !default;
+$alert-close-opacity-hover: .5 !default;
+$alert-close-padding: 0 6px 4px !default;
 $alert-close-background: inherit !default;
 
 // We use this to control border radius
@@ -55,11 +55,11 @@ $alert-transition-ease: ease-out !default;
   border-style: $alert-border-style;
   border-width: $alert-border-width;
   display: block;
+  font-size: $alert-font-size;
   font-weight: $alert-font-weight;
   margin-bottom: $alert-bottom-margin;
-  position: relative;
   padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
-  font-size: $alert-font-size;
+  position: relative;
   @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
 }
 
@@ -83,16 +83,16 @@ $alert-transition-ease: ease-out !default;
 
 // We use this to create the close button.
 @mixin alert-close {
+  #{$opposite-direction}: $alert-close-position;
+  background: $alert-close-background;
+  color: $alert-close-color;
   font-size: $alert-close-font-size;
+  line-height: .9;
+  margin-top: -($alert-close-font-size / 2);
+  opacity: $alert-close-opacity;
   padding: $alert-close-padding;
-  line-height: 0;
   position: absolute;
   top: $alert-close-top;
-  margin-top: -($alert-close-font-size / 2);
-  #{$opposite-direction}: $alert-close-position;
-  color: $alert-close-color;
-  opacity: $alert-close-opacity;
-  background: $alert-close-background;
   &:hover,
   &:focus { opacity: $alert-close-opacity-hover; }
 }

data/assets/bower_components/foundation/scss/foundation/components/_block-grid.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // Block Grid Variables
@@ -30,6 +30,7 @@ $block-grid-media-queries: true !default;
 //
 // $per-row - # of items to display per row. Default: false.
 // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
+// $include-spacing - Adds padding to our list item. Default: true.
 // $base-style - Apply a base style to block grid. Default: true.
 @mixin block-grid(
   $per-row:false,
@@ -47,10 +48,10 @@ $block-grid-media-queries: true !default;
     }
     @include clearfix;
 
-    &>li {
+    > li {
       display: block;
-      height: auto;
       float: $default-float;
+      height: auto;
       @if $include-spacing {
         padding: 0 ($spacing/2) $spacing;
       }
@@ -58,12 +59,12 @@ $block-grid-media-queries: true !default;
   }
 
   @if $per-row {
-    &>li {
-      width: 100%/$per-row;
+    > li {
+      list-style: none;
       @if $include-spacing {
         padding: 0 ($spacing/2) $spacing;
       }
-      list-style: none;
+      width: 100%/$per-row;
 
       &:nth-of-type(1n) { clear: none; }
       &:nth-of-type(#{$per-row}n+1) { clear: both; }
@@ -92,10 +93,10 @@ $block-grid-media-queries: true !default;
 // Generate presentational markup for block grid.
 //
 // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
-@mixin block-grid-html-classes($size,$include-spacing) {
+@mixin block-grid-html-classes($size, $include-spacing) {
   @for $i from 1 through $block-grid-elements {
     .#{$size}-block-grid-#{($i)} {
-      @include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
+      @include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
     }
   }
 }
@@ -107,24 +108,24 @@ $block-grid-media-queries: true !default;
 
     @if $block-grid-media-queries {
       @media #{$small-up} {
-        @include block-grid-html-classes($size:small,$include-spacing:false);
+        @include block-grid-html-classes($size:small, $include-spacing:false);
       }
 
       @media #{$medium-up} {
-        @include block-grid-html-classes($size:medium,$include-spacing:false);
+        @include block-grid-html-classes($size:medium, $include-spacing:false);
       }
 
       @media #{$large-up} {
-        @include block-grid-html-classes($size:large,$include-spacing:false);
+        @include block-grid-html-classes($size:large, $include-spacing:false);
       }
 
       @if $include-xl-html-block-grid-classes {
         @media #{$xlarge-up} {
-          @include block-grid-html-classes($size:xlarge,$include-spacing:false);
+          @include block-grid-html-classes($size:xlarge, $include-spacing:false);
         }
 
         @media #{$xxlarge-up} {
-          @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
+          @include block-grid-html-classes($size:xxlarge, $include-spacing:false);
         }
       }
     }

data/assets/bower_components/foundation/scss/foundation/components/_breadcrumbs.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // Breadcrumb Variables
@@ -34,6 +34,7 @@ $crumb-link-decor: underline !default;
 // We use these to control the slash between breadcrumbs
 $crumb-slash-color: $base !default;
 $crumb-slash: "/" !default;
+$crumb-slash-position: 1px !default;
 
 //
 // Breadcrumb Mixins
@@ -41,13 +42,13 @@ $crumb-slash: "/" !default;
 
 // We use this mixin to create a container around our breadcrumbs
 @mixin crumb-container {
-  display: block;
-  padding: $crumb-padding;
-  overflow: hidden;
-  margin-#{$default-float}: 0;
-  list-style: none;
   border-style: $crumb-border-style;
   border-width: $crumb-border-size;
+  display: block;
+  list-style: none;
+  margin-#{$default-float}: 0;
+  overflow: hidden;
+  padding: $crumb-padding;
 
   // We control which background color and border come through.
   background-color: $crumb-bg;
@@ -58,12 +59,12 @@ $crumb-slash: "/" !default;
 @mixin crumbs {
 
   // A normal state will make the links look and act like clickable breadcrumbs.
-  margin: 0;
+  color: $crumb-font-color;
   float: $default-float;
   font-size: $crumb-font-size;
   line-height: $crumb-font-size;
+  margin: 0;
   text-transform: $crumb-font-transform;
-  color: $crumb-font-color;
 
   &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
 
@@ -73,11 +74,11 @@ $crumb-slash: "/" !default;
 
   // Current is for the link of the current page
   &.current {
-    cursor: $cursor-default-value;
     color: $crumb-font-color-current;
+    cursor: $cursor-default-value;
     a {
-      cursor: $cursor-default-value;
       color: $crumb-font-color-current;
+      cursor: $cursor-default-value;
     }
 
     &:hover, &:hover a,
@@ -93,18 +94,18 @@ $crumb-slash: "/" !default;
     &:hover a,
     &:focus,
     a:focus {
-      text-decoration: none;
       color: $crumb-font-color-unavailable;
       cursor: $cursor-disabled-value;
+      text-decoration: none;
     }
   }
 
   &:before {
-    content: "#{$crumb-slash}";
     color: $crumb-slash-color;
+    content: "#{$crumb-slash}";
     margin: 0 $crumb-side-padding;
     position: relative;
-    top: 1px;
+    top: $crumb-slash-position;
   }
 
   &:first-child:before {
@@ -119,14 +120,13 @@ $crumb-slash: "/" !default;
       @include crumb-container;
       @include radius($crumb-radius);
 
-      &>* {
+      > * {
         @include crumbs;
       }
     }
+    /* Accessibility - hides the forward slash */
+    [aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+      content: "/";
+    }
   }
 }
-
-/* Accessibility - hides the forward slash */
-[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
-  content: "/";
-  }

data/assets/bower_components/foundation/scss/foundation/components/_button-groups.scss

@@ -2,8 +2,8 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "buttons";
+@import 'global';
+@import 'buttons';
 
 //
 // Button Group Variables
@@ -38,7 +38,7 @@ $button-group-border-width: 1px !default;
 
   > button, .button {
     border-#{$default-float}: $button-group-border-width solid;
-    border-color: rgba(255, 255, 255, 0.5);
+    border-color: rgba(255, 255, 255, .5);
   }
 
   &:first-child {
@@ -47,28 +47,31 @@ $button-group-border-width: 1px !default;
     }
   }
 
+  $button-group-display: list-item;
+  $button-group-margin: 0;
+
   // We use this to control the flow, or remove those styles completely.
   @if $float {
-    margin: 0;
+    $button-group-display: list-item;
+    $button-group-margin: 0;
     float: $float;
-    display: list-item;
     // Make sure the first child doesn't get the negative margin.
     &:first-child { margin-#{$default-float}: 0; }
   }
   @else {
-    margin: 0 -2px;
-    display: inline-block;
+    $button-group-display: inline-block;
+    $button-group-margin: 0 -2px;
   }
 
   @if $orientation == vertical {
-    display:block;
-    margin:0;
+    $button-group-display: block;
+    $button-group-margin: 0;
     > button, .button {
-      border-top: $button-group-border-width solid;
-      border-color: rgba(255, 255, 255, 0.5);
+      border-color: rgba(255, 255, 255, .5);
       border-left-width: 0;
-      margin:0;
+      border-top: $button-group-border-width solid;
       display: block;
+      margin:0;
     }
     > button {
         width: 100%;
@@ -81,12 +84,16 @@ $button-group-border-width: 1px !default;
     }
   }
 
+  display: $button-group-display;
+  margin: $button-group-margin;
+
+
   // We use these to control left and right radius on first/last buttons in the group.
   @if $radius == true {
     &,
-    & > a,
-    & > button,
-    & > .button { @include radius(0); }
+    > a,
+    > button,
+    > .button { @include radius(0); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
@@ -112,9 +119,9 @@ $button-group-border-width: 1px !default;
   }
   @else if $radius {
     &,
-    & > a,
-    & > button,
-    & > .button { @include radius(0); }
+    > a,
+    > button,
+    > .button { @include radius(0); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
@@ -150,17 +157,22 @@ $button-group-border-width: 1px !default;
   @if $include-html-button-classes {
     .button-group { @include button-group-container;
 
-      & > li { @include button-group-style(); }
+      @for $i from 2 through 8 {
+        &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
+      }
+
+      > li { @include button-group-style(); }
 
       &.stack {
-        & > li { @include button-group-style($orientation:vertical); float: none; }
+        > li { @include button-group-style($orientation:vertical); float: none; }
       }
 
       &.stack-for-small {
-        & > li {
+        > li {
           @include button-group-style($orientation:horizontal);
           @media #{$small-only} {
             @include button-group-style($orientation:vertical);
+            width: 100%;
           }
         }
       }
@@ -186,10 +198,6 @@ $button-group-border-width: 1px !default;
           @include button-group-style($radius:$button-med, $orientation:vertical);
         }
       }
-
-      @for $i from 2 through 8 {
-        &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
-      }
     }
 
     .button-bar {

data/assets/bower_components/foundation/scss/foundation/components/_buttons.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -39,14 +39,19 @@ $button-border-style: solid !default;
 $button-bg-color: $primary-color !default;
 $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
 $button-border-color: $button-bg-hover !default;
+$secondary-button-bg-color: $secondary-color !default;
 $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
 $secondary-button-border-color: $secondary-button-bg-hover !default;
+$success-button-bg-color: $success-color !default;
 $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
 $success-button-border-color: $success-button-bg-hover !default;
+$alert-button-bg-color: $alert-color !default;
 $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
 $alert-button-border-color: $alert-button-bg-hover !default;
+$warning-button-bg-color: $warning-color !default;
 $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default;
 $warning-button-border-color: $warning-button-bg-hover !default;
+$info-button-bg-color: $info-color !default;
 $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
 $info-button-border-color: $info-button-bg-hover !default;
 
@@ -55,7 +60,7 @@ $button-radius: $global-radius !default;
 $button-round: $global-rounded !default;
 
 // We use this to set default opacity and cursor for disabled buttons.
-$button-disabled-opacity: 0.7 !default;
+$button-disabled-opacity: .7 !default;
 $button-disabled-cursor: $cursor-default-value !default;
 
 
@@ -69,6 +74,9 @@ $button-disabled-cursor: $cursor-default-value !default;
 
 @mixin button-base($style:true, $display:$button-display) {
   @if $style {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius:0;
     border-style: $button-border-style;
     border-width: $button-border-width;
     cursor: $cursor-pointer-value;
@@ -77,10 +85,8 @@ $button-disabled-cursor: $cursor-default-value !default;
     line-height: normal;
     margin: 0 0 $button-margin-bottom;
     position: relative;
-    text-decoration: none;
     text-align: $button-font-align;
-    -webkit-appearance: none;
-    border-radius:0;
+    text-decoration: none;
   }
   @if $display { display: $display; }
 }
@@ -97,11 +103,7 @@ $button-disabled-cursor: $cursor-default-value !default;
   // We control which padding styles come through,
   // these can be turned off by setting $padding:false
   @if $padding {
-    padding-top: $padding;
-    padding-#{$opposite-direction}: $padding * 2;
-    padding-bottom: $padding + rem-calc(1);
-    padding-#{$default-float}: $padding * 2;
-
+    padding: $padding ($padding * 2) ($padding + rem-calc(1)) ($padding * 2);
     // We control the font-size based on mixin input.
     @if      $padding == $button-med { font-size: $button-font-med; }
     @else if $padding == $button-tny { font-size: $button-font-tny; }
@@ -113,14 +115,14 @@ $button-disabled-cursor: $cursor-default-value !default;
   @if $full-width {
     // We still need to check if $padding is set.
     @if $padding {
-    padding-top: $padding;
-    padding-bottom: $padding + rem-calc(1);
+      padding-bottom: $padding + rem-calc(1);
+      padding-top: $padding;
     } @else if $padding == false {
-      padding-top:0;
       padding-bottom:0;
+      padding-top:0;
     }
-    padding-right: 0;
-    padding-left: 0;
+    padding-left: $button-med;
+    padding-right: $button-med;
     width: 100%;
   }
 }
@@ -134,7 +136,7 @@ $button-disabled-cursor: $cursor-default-value !default;
 // We use this mixin to add button color styles
 //
 // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
-// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
+// $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
 // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
 // $border-color - Button Border Color. Default: $button-border-color
@@ -172,9 +174,9 @@ $button-disabled-cursor: $cursor-default-value !default;
 
   // We can set $disabled:true to create a disabled transparent button.
   @if $disabled {
+    box-shadow: none;
     cursor: $button-disabled-cursor;
     opacity: $button-disabled-opacity;
-    box-shadow: none;
     &:hover,
     &:focus { background-color: $bg; }
   }
@@ -220,16 +222,16 @@ $button-disabled-cursor: $cursor-default-value !default;
 
       @include single-transition(background-color);
 
-      &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
-      &.success   { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
-      &.alert     { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
-      &.warning   { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
-      &.info      { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
+      &.secondary { @include button-style($bg:$secondary-button-bg-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
+      &.success   { @include button-style($bg:$success-button-bg-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
+      &.alert     { @include button-style($bg:$alert-button-bg-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
+      &.warning   { @include button-style($bg:$warning-button-bg-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
+      &.info      { @include button-style($bg:$info-button-bg-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
 
       &.large  { @include button-size($padding:$button-lrg); }
       &.small  { @include button-size($padding:$button-sml); }
       &.tiny   { @include button-size($padding:$button-tny); }
-      &.expand { @include button-size($padding:null,$full-width:true); }
+      &.expand { @include button-size($full-width:true); }
 
       &.left-align  { text-align: left; text-indent: rem-calc(12); }
       &.right-align { text-align: right; padding-right: rem-calc(12); }
@@ -238,11 +240,11 @@ $button-disabled-cursor: $cursor-default-value !default;
       &.round  { @include button-style($bg:false, $radius:$button-round); }
 
       &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
-        &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
-        &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
-        &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
-        &.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
-        &.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
+        &.secondary { @include button-style($bg:$secondary-button-bg-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
+        &.success { @include button-style($bg:$success-button-bg-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
+        &.alert { @include button-style($bg:$alert-button-bg-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
+        &.warning { @include button-style($bg:$warning-button-bg-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
+        &.info { @include button-style($bg:$info-button-bg-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
       }
     }