_navs.scss (5192B)
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 }