243 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
		
		
			
		
	
	
			243 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
|  | // | ||
|  | // Navs | ||
|  | // -------------------------------------------------- | ||
|  | 
 | ||
|  | 
 | ||
|  | // Base class | ||
|  | // -------------------------------------------------- | ||
|  | 
 | ||
|  | .nav { | ||
|  |   margin-bottom: 0; | ||
|  |   padding-left: 0; // Override default ul/ol | ||
|  |   list-style: none; | ||
|  |   &:extend(.clearfix all); | ||
|  | 
 | ||
|  |   > li { | ||
|  |     position: relative; | ||
|  |     display: block; | ||
|  | 
 | ||
|  |     > a { | ||
|  |       position: relative; | ||
|  |       display: block; | ||
|  |       padding: @nav-link-padding; | ||
|  |       &:hover, | ||
|  |       &:focus { | ||
|  |         text-decoration: none; | ||
|  |         background-color: @nav-link-hover-bg; | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     // Disabled state sets text to gray and nukes hover/tab effects | ||
|  |     &.disabled > a { | ||
|  |       color: @nav-disabled-link-color; | ||
|  | 
 | ||
|  |       &:hover, | ||
|  |       &:focus { | ||
|  |         color: @nav-disabled-link-hover-color; | ||
|  |         text-decoration: none; | ||
|  |         background-color: transparent; | ||
|  |         cursor: not-allowed; | ||
|  |       } | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   // Open dropdowns | ||
|  |   .open > a { | ||
|  |     &, | ||
|  |     &:hover, | ||
|  |     &:focus { | ||
|  |       background-color: @nav-link-hover-bg; | ||
|  |       border-color: @link-color; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   // Nav dividers (deprecated with v3.0.1) | ||
|  |   // | ||
|  |   // This should have been removed in v3 with the dropping of `.nav-list`, but | ||
|  |   // we missed it. We don't currently support this anywhere, but in the interest | ||
|  |   // of maintaining backward compatibility in case you use it, it's deprecated. | ||
|  |   .nav-divider { | ||
|  |     .nav-divider(); | ||
|  |   } | ||
|  | 
 | ||
|  |   // Prevent IE8 from misplacing imgs | ||
|  |   // | ||
|  |   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 | ||
|  |   > li > a > img { | ||
|  |     max-width: none; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // Tabs | ||
|  | // ------------------------- | ||
|  | 
 | ||
|  | // Give the tabs something to sit on | ||
|  | .nav-tabs { | ||
|  |   border-bottom: 1px solid @nav-tabs-border-color; | ||
|  |   > li { | ||
|  |     float: left; | ||
|  |     // Make the list-items overlay the bottom border | ||
|  |     margin-bottom: -1px; | ||
|  | 
 | ||
|  |     // Actual tabs (as links) | ||
|  |     > a { | ||
|  |       margin-right: 2px; | ||
|  |       line-height: @line-height-base; | ||
|  |       border: 1px solid transparent; | ||
|  |       border-radius: @border-radius-base @border-radius-base 0 0; | ||
|  |       &:hover { | ||
|  |         border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     // Active state, and its :hover to override normal :hover | ||
|  |     &.active > a { | ||
|  |       &, | ||
|  |       &:hover, | ||
|  |       &:focus { | ||
|  |         color: @nav-tabs-active-link-hover-color; | ||
|  |         background-color: @nav-tabs-active-link-hover-bg; | ||
|  |         border: 1px solid @nav-tabs-active-link-hover-border-color; | ||
|  |         border-bottom-color: transparent; | ||
|  |         cursor: default; | ||
|  |       } | ||
|  |     } | ||
|  |   } | ||
|  |   // pulling this in mainly for less shorthand | ||
|  |   &.nav-justified { | ||
|  |     .nav-justified(); | ||
|  |     .nav-tabs-justified(); | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // Pills | ||
|  | // ------------------------- | ||
|  | .nav-pills { | ||
|  |   > li { | ||
|  |     float: left; | ||
|  | 
 | ||
|  |     // Links rendered as pills | ||
|  |     > a { | ||
|  |       border-radius: @nav-pills-border-radius; | ||
|  |     } | ||
|  |     + li { | ||
|  |       margin-left: 2px; | ||
|  |     } | ||
|  | 
 | ||
|  |     // Active state | ||
|  |     &.active > a { | ||
|  |       &, | ||
|  |       &:hover, | ||
|  |       &:focus { | ||
|  |         color: @nav-pills-active-link-hover-color; | ||
|  |         background-color: @nav-pills-active-link-hover-bg; | ||
|  |       } | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // Stacked pills | ||
|  | .nav-stacked { | ||
|  |   > li { | ||
|  |     float: none; | ||
|  |     + li { | ||
|  |       margin-top: 2px; | ||
|  |       margin-left: 0; // no need for this gap between nav items | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // Nav variations | ||
|  | // -------------------------------------------------- | ||
|  | 
 | ||
|  | // Justified nav links | ||
|  | // ------------------------- | ||
|  | 
 | ||
|  | .nav-justified { | ||
|  |   width: 100%; | ||
|  | 
 | ||
|  |   > li { | ||
|  |     float: none; | ||
|  |     > a { | ||
|  |       text-align: center; | ||
|  |       margin-bottom: 5px; | ||
|  |     } | ||
|  |   } | ||
|  | 
 | ||
|  |   > .dropdown .dropdown-menu { | ||
|  |     top: auto; | ||
|  |     left: auto; | ||
|  |   } | ||
|  | 
 | ||
|  |   @media (min-width: @screen-sm-min) { | ||
|  |     > li { | ||
|  |       display: table-cell; | ||
|  |       width: 1%; | ||
|  |       > a { | ||
|  |         margin-bottom: 0; | ||
|  |       } | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | // Move borders to anchors instead of bottom of list | ||
|  | // | ||
|  | // Mixin for adding on top the shared `.nav-justified` styles for our tabs | ||
|  | .nav-tabs-justified { | ||
|  |   border-bottom: 0; | ||
|  | 
 | ||
|  |   > li > a { | ||
|  |     // Override margin from .nav-tabs | ||
|  |     margin-right: 0; | ||
|  |     border-radius: @border-radius-base; | ||
|  |   } | ||
|  | 
 | ||
|  |   > .active > a, | ||
|  |   > .active > a:hover, | ||
|  |   > .active > a:focus { | ||
|  |     border: 1px solid @nav-tabs-justified-link-border-color; | ||
|  |   } | ||
|  | 
 | ||
|  |   @media (min-width: @screen-sm-min) { | ||
|  |     > li > a { | ||
|  |       border-bottom: 1px solid @nav-tabs-justified-link-border-color; | ||
|  |       border-radius: @border-radius-base @border-radius-base 0 0; | ||
|  |     } | ||
|  |     > .active > a, | ||
|  |     > .active > a:hover, | ||
|  |     > .active > a:focus { | ||
|  |       border-bottom-color: @nav-tabs-justified-active-link-border-color; | ||
|  |     } | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // Tabbable tabs | ||
|  | // ------------------------- | ||
|  | 
 | ||
|  | // Hide tabbable panes to start, show them when `.active` | ||
|  | .tab-content { | ||
|  |   > .tab-pane { | ||
|  |     display: none; | ||
|  |   } | ||
|  |   > .active { | ||
|  |     display: block; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | 
 | ||
|  | // Dropdowns | ||
|  | // ------------------------- | ||
|  | 
 | ||
|  | // Specific dropdowns | ||
|  | .nav-tabs .dropdown-menu { | ||
|  |   // make dropdown border overlap tab border | ||
|  |   margin-top: -1px; | ||
|  |   // Remove the top rounded corners here since there is a hard edge above the menu | ||
|  |   .border-top-radius(0); | ||
|  | } |