summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/foundation-apps/scss/components/_tabs.scss
blob: 8d61927bd94f7e16176ec88da85bb9f1ec6a1c28 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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;
    }
  }
}