blob: 8676e0c47af6d6c88f2bc45a80d49184b06e1b84 (
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
@import "grid";
@import "type";
//
// @variables
//
$include-html-tabs-classes: $include-html-classes !default;
$tabs-navigation-padding: rem-calc(16) !default;
$tabs-navigation-bg-color: $silver !default;
$tabs-navigation-active-bg-color: $white !default;
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
$tabs-navigation-font-color: $jet !default;
$tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
$tabs-navigation-font-size: rem-calc(16) !default;
$tabs-navigation-font-family: $body-font-family !default;
$tabs-content-margin-bottom: rem-calc(24) !default;
$tabs-content-padding: $column-gutter/2 !default;
$tabs-vertical-navigation-margin-bottom: 1.25rem !default;
@include exports("tab") {
@if $include-html-tabs-classes {
.tabs {
@include clearfix;
margin-bottom: 0 !important;
margin-left: 0;
dd, .tab-title {
position: relative;
margin-bottom: 0 !important;
list-style: none;
float: $default-float;
> a {
display: block;
background: {
color: $tabs-navigation-bg-color;
}
color: $tabs-navigation-font-color;
padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
font-family: $tabs-navigation-font-family;
font-size: $tabs-navigation-font-size;
&:hover {
background: {
color: $tabs-navigation-hover-bg-color;
}
}
}
&.active a {
background: {
color: $tabs-navigation-active-bg-color;
}
color:$tabs-navigation-active-font-color;
}
}
&.radius {
dd:first-child, .tab:first-child {
a { @include side-radius($default-float, $global-radius); }
}
dd:last-child, .tab:last-child {
a { @include side-radius($opposite-direction, $global-radius); }
}
}
&.vertical {
dd, .tab-title {
position: inherit;
float: none;
display: block;
top: auto;
}
}
}
.tabs-content {
@include clearfix;
margin-bottom: $tabs-content-margin-bottom;
width: 100%;
> .content {
display: none;
float: $default-float;
padding: $tabs-content-padding 0;
width: 100%;
&.active { display: block; float: none; }
&.contained { padding: $tabs-content-padding; }
}
&.vertical {
display: block;
> .content { padding: 0 $tabs-content-padding; }
}
}
@media #{$medium-up} {
.tabs {
&.vertical {
width: 20%;
max-width: 20%;
float: $default-float;
margin: 0 0 $tabs-vertical-navigation-margin-bottom;
}
}
.tabs-content {
&.vertical {
width: 80%;
max-width: 80%;
float: $default-float;
margin-#{$default-float}: -1px;
padding-#{$default-float}: 1rem;
}
}
}
.no-js {
.tabs-content > .content {
display: block;
float: none;
}
}
}
}
|
