talos

1
// Base class
2
//
3
// Kickstart any navigation component with a set of style resets. Works with
4
// `<nav>`s, `<ul>`s or `<ol>`s.
5

6
.nav {
7
  display: flex;
8
  flex-wrap: wrap;
9
  padding-left: 0;
10
  margin-bottom: 0;
11
  list-style: none;
12
}
13

14
.nav-link {
15
  display: block;
16
  padding: $nav-link-padding-y $nav-link-padding-x;
17
  text-decoration: if($link-decoration == none, null, none);
18

19
  @include hover-focus() {
20
    text-decoration: none;
21
  }
22

23
  // Disabled state lightens text
24
  &.disabled {
25
    color: $nav-link-disabled-color;
26
    pointer-events: none;
27
    cursor: default;
28
  }
29
}
30

31
//
32
// Tabs
33
//
34

35
.nav-tabs {
36
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
37

38
  .nav-link {
39
    margin-bottom: -$nav-tabs-border-width;
40
    border: $nav-tabs-border-width solid transparent;
41
    @include border-top-radius($nav-tabs-border-radius);
42

43
    @include hover-focus() {
44
      border-color: $nav-tabs-link-hover-border-color;
45
    }
46

47
    &.disabled {
48
      color: $nav-link-disabled-color;
49
      background-color: transparent;
50
      border-color: transparent;
51
    }
52
  }
53

54
  .nav-link.active,
55
  .nav-item.show .nav-link {
56
    color: $nav-tabs-link-active-color;
57
    background-color: $nav-tabs-link-active-bg;
58
    border-color: $nav-tabs-link-active-border-color;
59
  }
60

61
  .dropdown-menu {
62
    // Make dropdown border overlap tab border
63
    margin-top: -$nav-tabs-border-width;
64
    // Remove the top rounded corners here since there is a hard edge above the menu
65
    @include border-top-radius(0);
66
  }
67
}
68

69

70
//
71
// Pills
72
//
73

74
.nav-pills {
75
  .nav-link {
76
    @include border-radius($nav-pills-border-radius);
77
  }
78

79
  .nav-link.active,
80
  .show > .nav-link {
81
    color: $nav-pills-link-active-color;
82
    background-color: $nav-pills-link-active-bg;
83
  }
84
}
85

86

87
//
88
// Justified variants
89
//
90

91
.nav-fill {
92
  > .nav-link,
93
  .nav-item {
94
    flex: 1 1 auto;
95
    text-align: center;
96
  }
97
}
98

99
.nav-justified {
100
  > .nav-link,
101
  .nav-item {
102
    flex-basis: 0;
103
    flex-grow: 1;
104
    text-align: center;
105
  }
106
}
107

108

109
// Tabbable tabs
110
//
111
// Hide tabbable panes to start, show them when `.active`
112

113
.tab-content {
114
  > .tab-pane {
115
    display: none;
116
  }
117
  > .active {
118
    display: block;
119
  }
120
}
121