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