X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_tabs.scss;fp=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_tabs.scss;h=7e4293ef45f5ccc7af5d8b0cca86783f45b5f9a7;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0

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
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;
+    }
+  }
+}