Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | // |
| 2 | // Navs |
||
| 3 | // -------------------------------------------------- |
||
| 4 | |||
| 5 | |||
| 6 | // Base class |
||
| 7 | // -------------------------------------------------- |
||
| 8 | |||
| 9 | .nav { |
||
| 10 | margin-bottom: 0; |
||
| 11 | padding-left: 0; // Override default ul/ol |
||
| 12 | list-style: none; |
||
| 13 | @include clearfix; |
||
| 14 | |||
| 15 | > li { |
||
| 16 | position: relative; |
||
| 17 | display: block; |
||
| 18 | |||
| 19 | > a { |
||
| 20 | position: relative; |
||
| 21 | display: block; |
||
| 22 | padding: $nav-link-padding; |
||
| 23 | &:hover, |
||
| 24 | &:focus { |
||
| 25 | text-decoration: none; |
||
| 26 | background-color: $nav-link-hover-bg; |
||
| 27 | } |
||
| 28 | } |
||
| 29 | |||
| 30 | // Disabled state sets text to gray and nukes hover/tab effects |
||
| 31 | &.disabled > a { |
||
| 32 | color: $nav-disabled-link-color; |
||
| 33 | |||
| 34 | &:hover, |
||
| 35 | &:focus { |
||
| 36 | color: $nav-disabled-link-hover-color; |
||
| 37 | text-decoration: none; |
||
| 38 | background-color: transparent; |
||
| 39 | cursor: $cursor-disabled; |
||
| 40 | } |
||
| 41 | } |
||
| 42 | } |
||
| 43 | |||
| 44 | // Open dropdowns |
||
| 45 | .open > a { |
||
| 46 | &, |
||
| 47 | &:hover, |
||
| 48 | &:focus { |
||
| 49 | background-color: $nav-link-hover-bg; |
||
| 50 | border-color: $link-color; |
||
| 51 | } |
||
| 52 | } |
||
| 53 | |||
| 54 | // Nav dividers (deprecated with v3.0.1) |
||
| 55 | // |
||
| 56 | // This should have been removed in v3 with the dropping of `.nav-list`, but |
||
| 57 | // we missed it. We don't currently support this anywhere, but in the interest |
||
| 58 | // of maintaining backward compatibility in case you use it, it's deprecated. |
||
| 59 | .nav-divider { |
||
| 60 | @include nav-divider; |
||
| 61 | } |
||
| 62 | |||
| 63 | // Prevent IE8 from misplacing imgs |
||
| 64 | // |
||
| 65 | // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 |
||
| 66 | > li > a > img { |
||
| 67 | max-width: none; |
||
| 68 | } |
||
| 69 | } |
||
| 70 | |||
| 71 | |||
| 72 | // Tabs |
||
| 73 | // ------------------------- |
||
| 74 | |||
| 75 | // Give the tabs something to sit on |
||
| 76 | .nav-tabs { |
||
| 77 | border-bottom: 1px solid $nav-tabs-border-color; |
||
| 78 | > li { |
||
| 79 | float: left; |
||
| 80 | // Make the list-items overlay the bottom border |
||
| 81 | margin-bottom: -1px; |
||
| 82 | |||
| 83 | // Actual tabs (as links) |
||
| 84 | > a { |
||
| 85 | margin-right: 2px; |
||
| 86 | line-height: $line-height-base; |
||
| 87 | border: 1px solid transparent; |
||
| 88 | border-radius: $border-radius-base $border-radius-base 0 0; |
||
| 89 | &:hover { |
||
| 90 | border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; |
||
| 91 | } |
||
| 92 | } |
||
| 93 | |||
| 94 | // Active state, and its :hover to override normal :hover |
||
| 95 | &.active > a { |
||
| 96 | &, |
||
| 97 | &:hover, |
||
| 98 | &:focus { |
||
| 99 | color: $nav-tabs-active-link-hover-color; |
||
| 100 | background-color: $nav-tabs-active-link-hover-bg; |
||
| 101 | border: 1px solid $nav-tabs-active-link-hover-border-color; |
||
| 102 | border-bottom-color: transparent; |
||
| 103 | cursor: default; |
||
| 104 | } |
||
| 105 | } |
||
| 106 | } |
||
| 107 | // pulling this in mainly for less shorthand |
||
| 108 | &.nav-justified { |
||
| 109 | @extend .nav-justified; |
||
| 110 | @extend .nav-tabs-justified; |
||
| 111 | } |
||
| 112 | } |
||
| 113 | |||
| 114 | |||
| 115 | // Pills |
||
| 116 | // ------------------------- |
||
| 117 | .nav-pills { |
||
| 118 | > li { |
||
| 119 | float: left; |
||
| 120 | |||
| 121 | // Links rendered as pills |
||
| 122 | > a { |
||
| 123 | border-radius: $nav-pills-border-radius; |
||
| 124 | } |
||
| 125 | + li { |
||
| 126 | margin-left: 2px; |
||
| 127 | } |
||
| 128 | |||
| 129 | // Active state |
||
| 130 | &.active > a { |
||
| 131 | &, |
||
| 132 | &:hover, |
||
| 133 | &:focus { |
||
| 134 | color: $nav-pills-active-link-hover-color; |
||
| 135 | background-color: $nav-pills-active-link-hover-bg; |
||
| 136 | } |
||
| 137 | } |
||
| 138 | } |
||
| 139 | } |
||
| 140 | |||
| 141 | |||
| 142 | // Stacked pills |
||
| 143 | .nav-stacked { |
||
| 144 | > li { |
||
| 145 | float: none; |
||
| 146 | + li { |
||
| 147 | margin-top: 2px; |
||
| 148 | margin-left: 0; // no need for this gap between nav items |
||
| 149 | } |
||
| 150 | } |
||
| 151 | } |
||
| 152 | |||
| 153 | |||
| 154 | // Nav variations |
||
| 155 | // -------------------------------------------------- |
||
| 156 | |||
| 157 | // Justified nav links |
||
| 158 | // ------------------------- |
||
| 159 | |||
| 160 | .nav-justified { |
||
| 161 | width: 100%; |
||
| 162 | |||
| 163 | > li { |
||
| 164 | float: none; |
||
| 165 | > a { |
||
| 166 | text-align: center; |
||
| 167 | margin-bottom: 5px; |
||
| 168 | } |
||
| 169 | } |
||
| 170 | |||
| 171 | > .dropdown .dropdown-menu { |
||
| 172 | top: auto; |
||
| 173 | left: auto; |
||
| 174 | } |
||
| 175 | |||
| 176 | @media (min-width: $screen-sm-min) { |
||
| 177 | > li { |
||
| 178 | display: table-cell; |
||
| 179 | width: 1%; |
||
| 180 | > a { |
||
| 181 | margin-bottom: 0; |
||
| 182 | } |
||
| 183 | } |
||
| 184 | } |
||
| 185 | } |
||
| 186 | |||
| 187 | // Move borders to anchors instead of bottom of list |
||
| 188 | // |
||
| 189 | // Mixin for adding on top the shared `.nav-justified` styles for our tabs |
||
| 190 | .nav-tabs-justified { |
||
| 191 | border-bottom: 0; |
||
| 192 | |||
| 193 | > li > a { |
||
| 194 | // Override margin from .nav-tabs |
||
| 195 | margin-right: 0; |
||
| 196 | border-radius: $border-radius-base; |
||
| 197 | } |
||
| 198 | |||
| 199 | > .active > a, |
||
| 200 | > .active > a:hover, |
||
| 201 | > .active > a:focus { |
||
| 202 | border: 1px solid $nav-tabs-justified-link-border-color; |
||
| 203 | } |
||
| 204 | |||
| 205 | @media (min-width: $screen-sm-min) { |
||
| 206 | > li > a { |
||
| 207 | border-bottom: 1px solid $nav-tabs-justified-link-border-color; |
||
| 208 | border-radius: $border-radius-base $border-radius-base 0 0; |
||
| 209 | } |
||
| 210 | > .active > a, |
||
| 211 | > .active > a:hover, |
||
| 212 | > .active > a:focus { |
||
| 213 | border-bottom-color: $nav-tabs-justified-active-link-border-color; |
||
| 214 | } |
||
| 215 | } |
||
| 216 | } |
||
| 217 | |||
| 218 | |||
| 219 | // Tabbable tabs |
||
| 220 | // ------------------------- |
||
| 221 | |||
| 222 | // Hide tabbable panes to start, show them when `.active` |
||
| 223 | .tab-content { |
||
| 224 | > .tab-pane { |
||
| 225 | display: none; |
||
| 226 | } |
||
| 227 | > .active { |
||
| 228 | display: block; |
||
| 229 | } |
||
| 230 | } |
||
| 231 | |||
| 232 | |||
| 233 | // Dropdowns |
||
| 234 | // ------------------------- |
||
| 235 | |||
| 236 | // Specific dropdowns |
||
| 237 | .nav-tabs .dropdown-menu { |
||
| 238 | // make dropdown border overlap tab border |
||
| 239 | margin-top: -1px; |
||
| 240 | // Remove the top rounded corners here since there is a hard edge above the menu |
||
| 241 | @include border-top-radius(0); |
||
| 242 | } |