Merge afb-client

[src/app-framework-demo.git] / afb-client / bower_components / foundation-apps / scss / components / _tabs.scss

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
new file mode 100644 (file)
index 0000000..7e4293e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
@@ -0,0 +1,100 @@
+/*
+  TABS
+  ----
+*/
+
+/// @Foundation.settings
+// Tabs
+$tabstrip-background: transparent !default;
+
+$tab-title-background: $gray-light !default;
+$tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
+$tab-title-background-active: smartscale($tab-title-background, 3%) !default;
+$tab-title-color: isitlight($tab-title-background) !default;
+$tab-title-color-active: $tab-title-color !default;
+
+$tab-title-padding: $global-padding !default;
+$tab-content-padding: $global-padding !default;
+///
+
+@mixin tabstrip(
+       $orientation: horizontal,
+       $background: $tabstrip-background
+) {
+       /*
+               Container styles
+       */
+       display: flex;
+       background: $background;
+
+       @if $orientation == vertical {
+         flex-flow: column nowrap;
+       }
+       @else {
+               flex-flow: row wrap;
+       }
+}
+
+@mixin tabstrip-item(
+       $background: $tab-title-background,
+       $background-hover: $tab-title-background-hover,
+       $background-active: $tab-title-background-active,
+       $color: $tab-title-color,
+       $color-active: $tab-title-color-active,
+       $padding: $tab-title-padding
+) {
+  background: $background;
+  padding: $padding;
+  line-height: 1;
+  margin: 0;
+  flex: 0 1 auto;
+  cursor: pointer;
+  color: $color;
+
+  &.is-active {
+    background: $background-active;
+    color: $color-active;
+
+    &:hover {
+      background: $background-hover;
+    }
+  }
+  &:hover {
+    background: $background-hover;
+  }
+}
+
+@mixin tab-content(
+       $padding: $tab-content-padding
+) {
+  padding: $padding;
+}
+
+@mixin tab-content-item {
+  display: none;
+  &.is-active {
+    display: block;
+  }
+}
+
+@include exports(tabs) {
+  .tabs {
+    @include tabstrip(horizontal);
+
+    &.vertical {
+      @include tabstrip(vertical);
+    }
+
+    .tab-item {
+      @include tabstrip-item;
+    }
+  }
+
+  .tab-contents {
+    @include tab-content;
+
+    .tab-content {
+      @include tab-content-item;
+    }
+  }
+}