_tab.scss
1.46 KB
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
.tab-nav {
border-bottom: 1px solid $black-hint;
margin-top: $line-height;
margin-bottom: $line-height;
position: relative;
.nav {
margin-top: 0;
margin-bottom: -1px;
> li {
vertical-align: bottom;
> a {
color: $black-text;
padding-right: ($grid-gutter / 2);
padding-left: ($grid-gutter / 2);
text-transform: uppercase;
@include transition(border-bottom 0s, padding-bottom 0s);
&:focus,
&:hover {
color: $link-color;
}
}
&.active > a {
border-bottom: 3px solid $link-color;
color: $link-color;
padding-bottom: ($line-height / 2 - 3);
@include transition(border-bottom 0s 0.45s, padding-bottom 0s 0.45s);
}
}
}
}
.tab-nav-indicator {
background-color: $link-color;
height: 3px;
position: absolute;
bottom: -1px;
@include transition(left 0.3s $timing 0.15s, right 0.3s $timing);
&.reverse {
@include transition(left 0.3s $timing, right 0.3s $timing 0.15s);
}
}
// colour
@each $color in $palette-list {
$i: index($palette-list, $color);
.tab-nav-#{$color} {
.nav {
> li {
> a {
&:focus,
&:hover {
color: nth($palette-color, $i);
}
}
&.active > a {
border-bottom-color: nth($palette-color, $i);
color: nth($palette-color, $i);
}
}
}
.tab-nav-indicator {
background-color: nth($palette-color, $i);
}
}
}
.tab-pane {
display: none;
visibility: hidden;
&.active {
display: block;
visibility: visible;
}
}