Now with sass-support

2015-02-19 22:34:33 +01:00 · 2015-02-19 22:34:33 +01:00 · 87ca494ca0
commit 87ca494ca0
parent e8835b4899
62 changed files with 12427 additions and 269 deletions
--- a/_sass/foundation-components/_tabs.scss
+++ b/_sass/foundation-components/_tabs.scss
@ -0,0 +1,123 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+@import "grid";
+
+//
+// @variables
+//
+
+$include-html-tabs-classes: $include-html-classes !default;
+
+$tabs-navigation-padding: rem-calc(16) !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: $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;
+$tabs-content-padding: ($column-gutter/2) !default;
+
+$tabs-vertical-navigation-margin-bottom: 1.25rem !default;
+
+@include exports("tab") {
+  @if $include-html-tabs-classes {
+    .tabs {
+      @include clearfix;
+      margin-bottom: 0 !important;
+      margin-left: 0;
+      dd, .tab-title {
+        position: relative;
+        margin-bottom: 0 !important;
+        list-style: none;
+        float: $default-float;
+        > a {
+          outline: none;
+          display: block;
+          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: {
+              color: $tabs-navigation-hover-bg-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); }
+        }
+        dd:last-child, .tab:last-child {
+          a { @include side-radius($opposite-direction, $global-radius); }
+        }
+      }
+      &.vertical {
+        dd, .tab-title {
+          position: inherit;
+          float: none;
+          display: block;
+          top: auto;
+        }
+      }
+    }
+
+    .tabs-content {
+      @include clearfix;
+      margin-bottom: $tabs-content-margin-bottom;
+      width: 100%;
+      > .content {
+        display: none;
+        float: $default-float;
+        padding: $tabs-content-padding 0;
+        width: 100%;
+        &.active { display: block; float: none; }
+        &.contained { padding: $tabs-content-padding; }
+      }
+      &.vertical {
+        display: block;
+        > .content { padding: 0 $tabs-content-padding; }
+      }
+    }
+    @media #{$medium-up} {
+      .tabs {
+        &.vertical {
+          width: 20%;
+          max-width: 20%;
+          float: $default-float;
+          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 {
+        display: block;
+        float: none;
+      }
+    }
+  }
+}