Update JSON API

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

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