1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/navs.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,242 @@
1.4 +//
1.5 +// Navs
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Base class
1.10 +// --------------------------------------------------
1.11 +
1.12 +.nav {
1.13 + margin-bottom: 0;
1.14 + padding-left: 0; // Override default ul/ol
1.15 + list-style: none;
1.16 + .clearfix();
1.17 +
1.18 + > li {
1.19 + position: relative;
1.20 + display: block;
1.21 +
1.22 + > a {
1.23 + position: relative;
1.24 + display: block;
1.25 + padding: @nav-link-padding;
1.26 + &:hover,
1.27 + &:focus {
1.28 + text-decoration: none;
1.29 + background-color: @nav-link-hover-bg;
1.30 + }
1.31 + }
1.32 +
1.33 + // Disabled state sets text to gray and nukes hover/tab effects
1.34 + &.disabled > a {
1.35 + color: @nav-disabled-link-color;
1.36 +
1.37 + &:hover,
1.38 + &:focus {
1.39 + color: @nav-disabled-link-hover-color;
1.40 + text-decoration: none;
1.41 + background-color: transparent;
1.42 + cursor: not-allowed;
1.43 + }
1.44 + }
1.45 + }
1.46 +
1.47 + // Open dropdowns
1.48 + .open > a {
1.49 + &,
1.50 + &:hover,
1.51 + &:focus {
1.52 + background-color: @nav-link-hover-bg;
1.53 + border-color: @link-color;
1.54 + }
1.55 + }
1.56 +
1.57 + // Nav dividers (deprecated with v3.0.1)
1.58 + //
1.59 + // This should have been removed in v3 with the dropping of `.nav-list`, but
1.60 + // we missed it. We don't currently support this anywhere, but in the interest
1.61 + // of maintaining backward compatibility in case you use it, it's deprecated.
1.62 + .nav-divider {
1.63 + .nav-divider();
1.64 + }
1.65 +
1.66 + // Prevent IE8 from misplacing imgs
1.67 + //
1.68 + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
1.69 + > li > a > img {
1.70 + max-width: none;
1.71 + }
1.72 +}
1.73 +
1.74 +
1.75 +// Tabs
1.76 +// -------------------------
1.77 +
1.78 +// Give the tabs something to sit on
1.79 +.nav-tabs {
1.80 + border-bottom: 1px solid @nav-tabs-border-color;
1.81 + > li {
1.82 + float: left;
1.83 + // Make the list-items overlay the bottom border
1.84 + margin-bottom: -1px;
1.85 +
1.86 + // Actual tabs (as links)
1.87 + > a {
1.88 + margin-right: 2px;
1.89 + line-height: @line-height-base;
1.90 + border: 1px solid transparent;
1.91 + border-radius: @border-radius-base @border-radius-base 0 0;
1.92 + &:hover {
1.93 + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
1.94 + }
1.95 + }
1.96 +
1.97 + // Active state, and it's :hover to override normal :hover
1.98 + &.active > a {
1.99 + &,
1.100 + &:hover,
1.101 + &:focus {
1.102 + color: @nav-tabs-active-link-hover-color;
1.103 + background-color: @nav-tabs-active-link-hover-bg;
1.104 + border: 1px solid @nav-tabs-active-link-hover-border-color;
1.105 + border-bottom-color: transparent;
1.106 + cursor: default;
1.107 + }
1.108 + }
1.109 + }
1.110 + // pulling this in mainly for less shorthand
1.111 + &.nav-justified {
1.112 + .nav-justified();
1.113 + .nav-tabs-justified();
1.114 + }
1.115 +}
1.116 +
1.117 +
1.118 +// Pills
1.119 +// -------------------------
1.120 +.nav-pills {
1.121 + > li {
1.122 + float: left;
1.123 +
1.124 + // Links rendered as pills
1.125 + > a {
1.126 + border-radius: @nav-pills-border-radius;
1.127 + }
1.128 + + li {
1.129 + margin-left: 2px;
1.130 + }
1.131 +
1.132 + // Active state
1.133 + &.active > a {
1.134 + &,
1.135 + &:hover,
1.136 + &:focus {
1.137 + color: @nav-pills-active-link-hover-color;
1.138 + background-color: @nav-pills-active-link-hover-bg;
1.139 + }
1.140 + }
1.141 + }
1.142 +}
1.143 +
1.144 +
1.145 +// Stacked pills
1.146 +.nav-stacked {
1.147 + > li {
1.148 + float: none;
1.149 + + li {
1.150 + margin-top: 2px;
1.151 + margin-left: 0; // no need for this gap between nav items
1.152 + }
1.153 + }
1.154 +}
1.155 +
1.156 +
1.157 +// Nav variations
1.158 +// --------------------------------------------------
1.159 +
1.160 +// Justified nav links
1.161 +// -------------------------
1.162 +
1.163 +.nav-justified {
1.164 + width: 100%;
1.165 +
1.166 + > li {
1.167 + float: none;
1.168 + > a {
1.169 + text-align: center;
1.170 + margin-bottom: 5px;
1.171 + }
1.172 + }
1.173 +
1.174 + > .dropdown .dropdown-menu {
1.175 + top: auto;
1.176 + left: auto;
1.177 + }
1.178 +
1.179 + @media (min-width: @screen-sm-min) {
1.180 + > li {
1.181 + display: table-cell;
1.182 + width: 1%;
1.183 + > a {
1.184 + margin-bottom: 0;
1.185 + }
1.186 + }
1.187 + }
1.188 +}
1.189 +
1.190 +// Move borders to anchors instead of bottom of list
1.191 +//
1.192 +// Mixin for adding on top the shared `.nav-justified` styles for our tabs
1.193 +.nav-tabs-justified {
1.194 + border-bottom: 0;
1.195 +
1.196 + > li > a {
1.197 + // Override margin from .nav-tabs
1.198 + margin-right: 0;
1.199 + border-radius: @border-radius-base;
1.200 + }
1.201 +
1.202 + > .active > a,
1.203 + > .active > a:hover,
1.204 + > .active > a:focus {
1.205 + border: 1px solid @nav-tabs-justified-link-border-color;
1.206 + }
1.207 +
1.208 + @media (min-width: @screen-sm-min) {
1.209 + > li > a {
1.210 + border-bottom: 1px solid @nav-tabs-justified-link-border-color;
1.211 + border-radius: @border-radius-base @border-radius-base 0 0;
1.212 + }
1.213 + > .active > a,
1.214 + > .active > a:hover,
1.215 + > .active > a:focus {
1.216 + border-bottom-color: @nav-tabs-justified-active-link-border-color;
1.217 + }
1.218 + }
1.219 +}
1.220 +
1.221 +
1.222 +// Tabbable tabs
1.223 +// -------------------------
1.224 +
1.225 +// Hide tabbable panes to start, show them when `.active`
1.226 +.tab-content {
1.227 + > .tab-pane {
1.228 + display: none;
1.229 + }
1.230 + > .active {
1.231 + display: block;
1.232 + }
1.233 +}
1.234 +
1.235 +
1.236 +// Dropdowns
1.237 +// -------------------------
1.238 +
1.239 +// Specific dropdowns
1.240 +.nav-tabs .dropdown-menu {
1.241 + // make dropdown border overlap tab border
1.242 + margin-top: -1px;
1.243 + // Remove the top rounded corners here since there is a hard edge above the menu
1.244 + .border-top-radius(0);
1.245 +}