summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components/_tabs.scss')
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_tabs.scss100
1 files changed, 100 insertions, 0 deletions
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;
+ }
+ }
+}