_tabs.scss in locomotivecms_wagon-1.5.2

- old
+ new

@@ -2,23 +2,22 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
 @import "global";
 @import "grid";
-@import "type";
 
 //
 // @variables
 //
 
 $include-html-tabs-classes: $include-html-classes !default;
 
 $tabs-navigation-padding: rem-calc(16) !default;
-$tabs-navigation-bg-color: #efefef !default;
-$tabs-navigation-active-bg-color: #fff !default;
+$tabs-navigation-bg-color: $silver !default;
+$tabs-navigation-active-bg-color: $white !default;
 $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
-$tabs-navigation-font-color: #222 !default;
+$tabs-navigation-font-color: $jet !default;
 $tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
 $tabs-navigation-font-size: rem-calc(16) !default;
 $tabs-navigation-font-family: $body-font-family !default;
 
 $tabs-content-margin-bottom: rem-calc(24) !default;
@@ -36,19 +35,31 @@
         position: relative;
         margin-bottom: 0 !important;
         list-style: none;
         float: $default-float;
         > a {
+          outline: none;
           display: block;
-          background: $tabs-navigation-bg-color;
+          background: {
+            color: $tabs-navigation-bg-color;
+          }
           color: $tabs-navigation-font-color;
           padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
           font-family: $tabs-navigation-font-family;
           font-size: $tabs-navigation-font-size;
-          &:hover { background: $tabs-navigation-hover-bg-color; }
+          &:hover {
+            background: {
+              color: $tabs-navigation-hover-bg-color;
+            }
+          }
         }
-        &.active a { background: $tabs-navigation-active-bg-color; color:$tabs-navigation-active-font-color; }
+        &.active a {
+          background: {
+            color: $tabs-navigation-active-bg-color;
+          }
+          color:$tabs-navigation-active-font-color;
+          }
       }
       &.radius {
         dd:first-child, .tab:first-child {
           a { @include side-radius($default-float, $global-radius); }
         }
@@ -85,18 +96,21 @@
     }
     @media #{$medium-up} {
       .tabs {
         &.vertical {
           width: 20%;
+          max-width: 20%;
           float: $default-float;
-          margin-bottom: $tabs-vertical-navigation-margin-bottom;
+          margin: 0 0 $tabs-vertical-navigation-margin-bottom;
         }
       }
       .tabs-content {
         &.vertical {
           width: 80%;
+          max-width: 80%;
           float: $default-float;
           margin-#{$default-float}: -1px;
+          padding-#{$default-float}: 1rem;
         }
       }
     }
     .no-js {
       .tabs-content > .content {