locomotivecms_wagon 1.5.1 → 1.5.2

data/generators/foundation5/public/stylesheets/foundation/components/_accordion.scss

@@ -11,21 +11,125 @@
 $include-html-accordion-classes: $include-html-classes !default;
 
 $accordion-navigation-padding: rem-calc(16) !default;
-$accordion-navigation-bg-color: #efefef !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-font-color: #222 !default;
+$accordion-navigation-font-color: $jet !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
 
 $accordion-content-padding: $column-gutter/2 !default;
-$accordion-content-active-bg-color: #fff !default;
+$accordion-content-active-bg-color: $white !default;
+
+
+//  Mixin: accordion-container()
+//  Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
+//  Explicit Dependencies: a clearfix mixin *is* defined.
+//  Implicit Dependencies: None
+
+@mixin accordion-container() {
+  @include clearfix;
+  margin-bottom: 0;
+}
+
+//  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.
+//    @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
+//    @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
+
+@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 ){
+  display: block;
+  margin-bottom: 0 !important;
+  @if type-of($active_class) != "string" {
+    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
+  }
+  @else {
+    &.#{ $active_class } > a {
+      background: $active-bg;
+    }
+  }
+  > a {
+    background: $bg;
+    color: $font-color;
+    @if type-of($padding) != number {
+      @warn "`#{$padding}` was read as #{type-of($padding)}";
+      @if $accordion-navigation-padding != null {
+        @warn "#{$padding} was read as a #{type-of($padding)}";
+        @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
+        padding: $accordion-navigation-padding;
+      }
+      @else {
+        @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
+        padding: null;
+      }
+    }
+    @else {
+      padding: $padding;
+    }
+    display: block;
+    font-family: $font-family;
+    @if type-of($font-size) != number {
+      @warn "`#{$font-size}` was read as a #{type-of($font-size)}";
+      @if $accordion-navigation-font-size != null {
+        @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
+        font-size: $accordion-navigation-font-size;
+      }
+      @else{
+        @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
+        font-size: null;
+
+      }
+    }
+    @else {
+      font-size: $font-size;
+    }
+    &:hover {
+      background: $hover-bg;
+    }
+  }
+}
+
+//  Mixin: accordion-content($bg, $padding, $active-class)
+//    @params $padding [ number ]: Padding for the content of the container
+//    @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'){
+  display: none;
+  @if type-of($padding) != "number" {
+    @warn "#{$padding} was read as a #{type-of($padding)}";
+    @if $accordion-content-padding != null {
+      @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
+      padding: $accordion-content-padding;
+    } @else {
+      @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
+      padding: null;
+    }
+  } @else {
+    padding: $padding;
+  }
+
+  @if type-of($active_class) != "string" {
+    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
+  }
+  @else {
+    &.#{$active_class} {
+      display: block;
+      background: $bg;
+    }
+  }
+}
 
 @include exports("accordion") {
   @if $include-html-accordion-classes {
     .accordion {
-      @include clearfix; margin-bottom: 0;
-      dd {
+      @include clearfix;
+      margin-bottom: 0;
+      .accordion-navigation, dd {
         display: block;
         margin-bottom: 0 !important;
         &.active > a { background: $accordion-navigation-active-bg-color; }
@@ -38,7 +142,7 @@ $accordion-content-active-bg-color: #fff !default;
           font-size: $accordion-navigation-font-size;
           &:hover { background: $accordion-navigation-hover-bg-color; }
         }
-        
+
         > .content {
           display: none;
           padding: $accordion-content-padding;

data/generators/foundation5/public/stylesheets/foundation/components/_alert-boxes.scss

@@ -18,7 +18,7 @@ $alert-padding-bottom: $alert-padding-top !default;
 // We use these to control text style.
 $alert-font-weight: $font-weight-normal !default;
 $alert-font-size: rem-calc(13) !default;
-$alert-font-color: #fff !default;
+$alert-font-color: $white !default;
 $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
 
 // We use this for close hover effect.
@@ -31,13 +31,14 @@ $alert-border-color: scale-color($primary-color, $lightness: $alert-function-fac
 $alert-bottom-margin: rem-calc(20) !default;
 
 // We use these to style the close buttons
-$alert-close-color: #333 !default;
+$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-background: inherit !default;
 
 // We use this to control border radius
 $alert-radius: $global-radius !default;
@@ -91,6 +92,7 @@ $alert-transition-ease: ease-out !default;
   #{$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/generators/foundation5/public/stylesheets/foundation/components/_block-grid.scss

@@ -7,7 +7,7 @@
 //
 // Block Grid Variables
 //
-$include-html-grid-classes: $include-html-classes !default;
+$include-html-block-grid-classes: $include-html-classes !default;
 $include-xl-html-block-grid-classes: false !default;
 
 // We use this to control the maximum number of block grid elements per row
@@ -101,7 +101,7 @@ $block-grid-media-queries: true !default;
 }
 
 @include exports("block-grid") {
-  @if $include-html-grid-classes {
+  @if $include-html-block-grid-classes {
 
     [class*="block-grid-"] { @include block-grid; }
 

data/generators/foundation5/public/stylesheets/foundation/components/_breadcrumbs.scss

@@ -26,13 +26,13 @@ $crumb-radius: $global-radius !default;
 // We use these to set various text styles for breadcrumbs.
 $crumb-font-size: rem-calc(11) !default;
 $crumb-font-color: $primary-color !default;
-$crumb-font-color-current: #333 !default;
-$crumb-font-color-unavailable: #999 !default;
+$crumb-font-color-current: $oil !default;
+$crumb-font-color-unavailable: $aluminum !default;
 $crumb-font-transform: uppercase !default;
 $crumb-link-decor: underline !default;
 
 // We use these to control the slash between breadcrumbs
-$crumb-slash-color: #aaa !default;
+$crumb-slash-color: $base !default;
 $crumb-slash: "/" !default;
 
 //
@@ -125,3 +125,8 @@ $crumb-slash: "/" !default;
     }
   }
 }
+
+/* Accessibility - hides the forward slash */
+[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+  content: "/";
+  }

data/generators/foundation5/public/stylesheets/foundation/components/_button-groups.scss

@@ -5,7 +5,6 @@
 @import "global";
 @import "buttons";
 
-
 //
 // Button Group Variables
 //
@@ -35,7 +34,7 @@ $button-group-border-width: 1px !default;
 }
 
 // We use this to control styles for button groups
-@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
+@mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
 
   > button, .button {
     border-#{$default-float}: $button-group-border-width solid;
@@ -52,30 +51,89 @@ $button-group-border-width: 1px !default;
   @if $float {
     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;
+  }
+
+  @if $orientation == vertical {
+    display:block;
+    margin:0;
+    > button, .button {
+      border-top: $button-group-border-width solid;
+      border-color: rgba(255, 255, 255, 0.5);
+      border-left-width: 0px;
+      margin:0;
+      display: block;
+    }
+
+    &:first-child {
+      button, .button {
+        border-top: 0;
+      }
+    }
+  }
 
   // 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); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
-    &:first-child > .button { @include side-radius($default-float, $button-radius); }
+    &:first-child > .button {
+      @if $orientation == vertical {
+        @include side-radius(top, $button-radius);
+      }
+      @else {
+        @include side-radius($default-float, $button-radius);
+      }
+    }
     &:last-child,
     &:last-child > a,
     &:last-child > button,
-    &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
+    &:last-child > .button {
+      @if $orientation == vertical {
+        @include side-radius(bottom, $button-radius);
+      }
+      @else {
+        @include side-radius($opposite-direction, $button-radius);
+      }
+    }
   }
   @else if $radius {
+    &,
+    & > a,
+    & > button,
+    & > .button { @include radius(0); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
-    &:first-child > .button { @include side-radius($default-float, $radius); }
+    &:first-child > .button {
+      @if $orientation == vertical {
+        @include side-radius(top, $radius);
+      }
+      @else {
+        @include side-radius($default-float, $radius);
+      }
+    }
     &:last-child,
     &:last-child > a,
     &:last-child > button,
-    &:last-child > .button { @include side-radius($opposite-direction, $radius); }
+    &:last-child > .button {
+      @if $orientation == vertical {
+        @include side-radius(bottom, $radius);
+      }
+      @else {
+        @include side-radius($opposite-direction, $radius);
+      }
+    }
   }
 
   // We use this to make the buttons even width across their container
@@ -83,7 +141,6 @@ $button-group-border-width: 1px !default;
     width: percentage((100/$even) / 100);
     button, .button { width: 100%; }
   }
-
 }
 
 @include exports("button-group") {
@@ -92,8 +149,40 @@ $button-group-border-width: 1px !default;
 
       & > li { @include button-group-style(); }
 
+      &.stack {
+        & > li { @include button-group-style($orientation:vertical); float: none; }
+      }
+
+      &.stack-for-small {
+        & > li {
+          @include button-group-style($orientation:horizontal);
+          @media #{$small-only} {
+            @include button-group-style($orientation:vertical);
+          }
+        }
+      }
+
       &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
+      &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
+      &.radius.stack-for-small > * {
+        @media #{$medium-up} {
+          @include button-group-style($radius:$button-radius, $orientation:horizontal);
+        }
+        @media #{$small-only} {
+          @include button-group-style($radius:$button-radius, $orientation:vertical);
+        }
+      }
+
       &.round > * { @include button-group-style($radius:$button-round, $float:null); }
+      &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
+      &.round.stack-for-small > * {
+        @media #{$medium-up} {
+          @include button-group-style($radius:$button-round, $orientation:horizontal);
+        }
+        @media #{$small-only} {
+          @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); }
@@ -102,7 +191,7 @@ $button-group-border-width: 1px !default;
 
     .button-bar {
       @include clearfix;
-      .button-group { @include button-group-container($styles:false,$float:true); }
+      .button-group { @include button-group-container($styles:false, $float:true); }
     }
   }
-}
+}

data/generators/foundation5/public/stylesheets/foundation/components/_buttons.scss

@@ -21,8 +21,8 @@ $button-margin-bottom: rem-calc(20) !default;
 
 // We use these to control button text styles.
 $button-font-family: $body-font-family !default;
-$button-font-color: #fff !default;
-$button-font-color-alt: #333 !default;
+$button-font-color: $white !default;
+$button-font-color-alt: $oil !default;
 $button-font-tny: rem-calc(11) !default;
 $button-font-sml: rem-calc(13) !default;
 $button-font-med: rem-calc(16) !default;
@@ -36,15 +36,27 @@ $button-function-factor: -20% !default;
 // We use these to control button border styles.
 $button-border-width: 0px !default;
 $button-border-style: solid !default;
-$button-bg: $primary-color !default;
-$button-border-color: scale-color($button-bg, $lightness: $button-function-factor) !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-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
+$secondary-button-border-color: $secondary-button-bg-hover !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-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
+$alert-button-border-color: $alert-button-bg-hover !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-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
+$info-button-border-color: $info-button-bg-hover !default;
 
 // We use this to set the default radius used throughout the core.
 $button-radius: $global-radius !default;
 $button-round: $global-rounded !default;
 
-// We use this to set default opacity for disabled buttons.
+// We use this to set default opacity and cursor for disabled buttons.
 $button-disabled-opacity: 0.7 !default;
+$button-disabled-cursor: $cursor-default-value !default;
 
 
 //
@@ -113,6 +125,10 @@ $button-disabled-opacity: 0.7 !default;
   }
 }
 
+// @MIXIN
+//
+// we use this mixin to create the button hover and border colors
+
 // @MIXIN
 //
 // We use this mixin to add button color styles
@@ -120,42 +136,50 @@ $button-disabled-opacity: 0.7 !default;
 // $bg - Primary color set in settings file. Default: $button-bg.
 // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
-@mixin button-style($bg:$button-bg, $radius:true, $disabled:false) {
+// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
+// $border-color - Button Border Color. Default: $button-border-color
+@mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {
 
   // We control which background styles are used,
   // these can be removed by setting $bg:false
   @if $bg {
+
+    @if $bg-hover == null {
+      $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
+    }
+
+    @if $border-color == null {
+      $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
+    }
+
     // This find the lightness percentage of the background color.
     $bg-lightness: lightness($bg);
+    $bg-hover-lightness: lightness($bg-hover);
 
     background-color: $bg;
-    border-color: scale-color($bg, $lightness: $button-function-factor);
+    border-color: $border-color;
     &:hover,
-    &:focus { background-color: scale-color($bg, $lightness: $button-function-factor); }
+    &:focus { background-color: $bg-hover; }
 
     // We control the text color for you based on the background color.
-    @if $bg-lightness > 70% {
-      color: $button-font-color-alt;
-      &:hover,
-      &:focus { color: $button-font-color-alt; }
-    }
-    @else {
-      color: $button-font-color;
-      &:hover,
-      &:focus { color: $button-font-color; }
+    color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);
+
+    &:hover,
+    &:focus {
+      color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
     }
   }
 
   // We can set $disabled:true to create a disabled transparent button.
   @if $disabled {
-    cursor: $cursor-default-value;
+    cursor: $button-disabled-cursor;
     opacity: $button-disabled-opacity;
     box-shadow: none;
     &:hover,
     &:focus { background-color: $bg; }
   }
 
-  // We can control how much button radius us used.
+  // We can control how much button radius is used.
   @if $radius == true { @include radius($button-radius); }
   @else if $radius { @include radius($radius); }
 
@@ -170,12 +194,18 @@ $button-disabled-opacity: 0.7 !default;
 // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
 // $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
-// $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false.
 // $is-prefix - Not used? Default:false.
-@mixin button($padding:$button-med, $bg:$button-bg, $radius:false, $full-width:false, $disabled:false, $is-prefix:false) {
+// $bg-hover - Button Hover Color - Default null - see button-style mixin
+// $border-color - Button Border Color - Default null - see button-style mixin
+// $transition - We can control whether or not to include the background-color transition property - Default:true.
+@mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
   @include button-base;
   @include button-size($padding, $full-width);
-  @include button-style($bg, $radius, $disabled);
+  @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);
+
+  @if $transition {
+    @include single-transition(background-color);
+  }
 }
 
 
@@ -190,9 +220,11 @@ $button-disabled-opacity: 0.7 !default;
 
       @include single-transition(background-color);
 
-      &.secondary { @include button-style($bg:$secondary-color); }
-      &.success   { @include button-style($bg:$success-color); }
-      &.alert     { @include button-style($bg:$alert-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); }
 
       &.large  { @include button-size($padding:$button-lrg); }
       &.small  { @include button-size($padding:$button-sml); }
@@ -205,13 +237,18 @@ $button-disabled-opacity: 0.7 !default;
       &.radius { @include button-style($bg:false, $radius:true); }
       &.round  { @include button-style($bg:false, $radius:$button-round); }
 
-      &.disabled, &[disabled] { @include button-style($bg:$button-bg, $disabled:true);
-        &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
-        &.success { @include button-style($bg:$success-color, $disabled:true); }
-        &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+      &.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); }
       }
     }
 
+    //firefox 2px fix
+    button::-moz-focus-inner {border:0; padding:0;}
+
     @media #{$medium-up} {
       button, .button {
         @include button-base($style:false, $display:inline-block);

data/generators/foundation5/public/stylesheets/foundation/components/_clearing.scss

@@ -10,13 +10,13 @@
 $include-html-clearing-classes: $include-html-classes !default;
 
 // We use these to set the background colors for parts of Clearing.
-$clearing-bg: #333 !default;
+$clearing-bg: $oil !default;
 $clearing-caption-bg: $clearing-bg !default;
 $clearing-carousel-bg: rgba(51,51,51,0.8) !default;
 $clearing-img-bg: $clearing-bg !default;
 
 // We use these to style the close button
-$clearing-close-color: #ccc !default;
+$clearing-close-color: $iron !default;
 $clearing-close-size: 30px !default;
 
 // We use these to style the arrows
@@ -24,7 +24,7 @@ $clearing-arrow-size: 12px !default;
 $clearing-arrow-color: $clearing-close-color !default;
 
 // We use these to style captions
-$clearing-caption-font-color: #ccc !default;
+$clearing-caption-font-color: $iron !default;
 $clearing-caption-font-size: 0.875em !default;
 $clearing-caption-padding: 10px 30px 20px !default;
 
@@ -81,7 +81,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
       position: absolute;
       top: 50%;
       left: 50%;
-      color: #aaa;
+      color: $base;
       font-size: 0.6em;
     }
 
@@ -123,7 +123,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
       display: none;
 
       &:hover,
-      &:focus { color: #ccc; }
+      &:focus { color: $iron; }
     }
 
     .clearing-assembled .clearing-container { height: 100%;