1/* Tabs */
2
3.tabs {
4	display: block;
5}
6
7.tab-nav {
8  margin: 0;
9  padding: 0;
10  border-bottom: 1px solid darken($default-color, 5%);
11  > li {
12    display: inline-block;
13    width: auto;
14    padding: 0;
15    margin: 0 $gutter 0 0;
16    cursor: default;
17    top: 1px;
18    @include box-shadow(0 1px 0 $white);
19    > li {
20      display: inline-block;
21      width: auto;
22      padding: 0;
23      margin: 0 $gutter 0 0;
24      cursor: default;
25      top: 1px;
26      @include box-shadow(0 1px 0 $white);
27      > a {
28        display: block;
29        width: auto;
30        padding: 0 $norm;
31        margin: 0;
32        color: $body-font-color;
33        font-family: $font-family;
34        font-weight: $tabs-font-weight;
35        border: 1px solid darken($default-color, 5%);
36        border-width: 1px 1px 0 1px;
37        text-shadow: 0 1px 1px lighten($default-color, 5%);
38        background: $default-color;
39        cursor: pointer;
40        @include border-radius($button-radius $button-radius 0 0);
41        @include line-and-height($tab-height);
42        &:hover {
43          text-decoration: none;
44          background: lighten($default-color, 1%);
45        }
46        &:active {
47          background: darken($default-color, 2%);
48        }
49      }
50      &.active > a {
51        @include line-and-height($tab-height + 1);
52        background: $white;
53        cursor: default;
54      }
55      &:last-child {
56        margin-right: 0;
57      }
58    }
59  }
60}
61
62.tab-nav > li:last-child {
63  margin-right: 0;
64}
65
66.tab-nav > li > a {
67  display: block;
68  width: auto;
69  padding: 0 $norm;
70  margin: 0;
71  color: $body-font-color;
72  font-family: $font-family;
73  font-weight: $tabs-font-weight;
74  border: 1px solid darken($default-color, 5%);
75  border-width: 1px 1px 0 1px;
76  text-shadow: 0 1px 1px lighten($default-color, 5%);
77  background: $default-color;
78  cursor: pointer;
79  @include border-radius($button-radius $button-radius 0 0);
80  @include line-and-height($tab-height);
81  &:hover {
82    text-decoration: none;
83    background: lighten($default-color, 1%);
84  }
85  &:active {
86    background: darken($default-color, 2%);
87  }
88}
89
90.tab-nav > li.active > a {
91  @include line-and-height($tab-height + 1);
92  background: $white;
93}
94
95.tabs.pill .tab-nav {
96  width: 100%; /* remove if you dont want the tabs to span the full container width */
97  display: table;
98  overflow: hidden;
99  border: 1px solid darken($default-color, 5%);
100  @include border-radius($button-radius);
101  > li {
102    display: table-cell;
103    margin: 0;
104    margin-left: -4px;
105    text-align: center;
106    top: 0;
107    &:first-child {
108      margin-left: 0;
109    }
110    > a {
111      border: none;
112      border-right: 1px solid darken($default-color, 5%);
113      @include border-radius(0);
114      @include line-and-height($tab-height);
115    }
116    &:last-child > a {
117      border-right:none;
118    }
119  }
120}
121
122.tab-content {
123  display: none;
124  padding: 20px 10px;
125  &.active {
126    display: block;
127  }
128}
129
130.tabs.vertical {
131  .tab-nav {
132    border: none;
133    > li {
134      display: block;
135      margin: 0;
136      margin-bottom: 5px;
137      &.active {
138        position: relative;
139        z-index: 99;
140        > a {
141          border-right: 1px solid $global-bg-color;
142        }
143      }
144      > a {
145        border: 1px solid darken($default-color, 5%);
146        @include border-radius($button-radius 0 0 $button-radius);
147      }
148    }
149  }
150  .tab-content {
151    padding: 10px 0 30px 20px;
152    margin-left: -1px;
153    border-left: 1px solid darken($default-color, 5%);
154  }
155}
156
157