You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							161 lines
						
					
					
						
							3.7 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							161 lines
						
					
					
						
							3.7 KiB
						
					
					
				| // The dropdown wrapper (`<div>`) | |
| .dropup, | |
| .dropdown { | |
|   position: relative; | |
| } | |
| 
 | |
| .dropdown-toggle { | |
|   // Generate the caret automatically | |
|   &::after { | |
|     display: inline-block; | |
|     width: 0; | |
|     height: 0; | |
|     margin-left: $caret-width; | |
|     vertical-align: middle; | |
|     content: ""; | |
|     border-top: $caret-width solid; | |
|     border-right: $caret-width solid transparent; | |
|     border-left: $caret-width solid transparent; | |
|   } | |
| 
 | |
|   // Prevent the focus on the dropdown toggle when closing dropdowns | |
|   &:focus { | |
|     outline: 0; | |
|   } | |
| } | |
| 
 | |
| .dropup { | |
|   .dropdown-toggle { | |
|     &::after { | |
|       border-top: 0; | |
|       border-bottom: $caret-width solid; | |
|     } | |
|   } | |
| } | |
| 
 | |
| // The dropdown menu | |
| .dropdown-menu { | |
|   position: absolute; | |
|   top: 100%; | |
|   left: 0; | |
|   z-index: $zindex-dropdown; | |
|   display: none; // none by default, but block on "open" of the menu | |
|   float: left; | |
|   min-width: $dropdown-min-width; | |
|   padding: $dropdown-padding-y 0; | |
|   margin: $dropdown-margin-top 0 0; // override default ul | |
|   font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues | |
|   color: $body-color; | |
|   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) | |
|   list-style: none; | |
|   background-color: $dropdown-bg; | |
|   background-clip: padding-box; | |
|   border: $dropdown-border-width solid $dropdown-border-color; | |
|   @include border-radius($border-radius); | |
|   @include box-shadow($dropdown-box-shadow); | |
| } | |
| 
 | |
| // Dividers (basically an `<hr>`) within the dropdown | |
| .dropdown-divider { | |
|   @include nav-divider($dropdown-divider-bg); | |
| } | |
| 
 | |
| // Links, buttons, and more within the dropdown menu | |
| // | |
| // `<button>`-specific styles are denoted with `// For <button>s` | |
| .dropdown-item { | |
|   display: block; | |
|   width: 100%; // For `<button>`s | |
|   padding: 3px $dropdown-item-padding-x; | |
|   clear: both; | |
|   font-weight: $font-weight-normal; | |
|   color: $dropdown-link-color; | |
|   text-align: inherit; // For `<button>`s | |
|   white-space: nowrap; // prevent links from randomly breaking onto new lines | |
|   background: none; // For `<button>`s | |
|   border: 0; // For `<button>`s | |
|  | |
|   @include hover-focus { | |
|     color: $dropdown-link-hover-color; | |
|     text-decoration: none; | |
|     background-color: $dropdown-link-hover-bg; | |
|   } | |
| 
 | |
|   &.active, | |
|   &:active { | |
|     color: $dropdown-link-active-color; | |
|     text-decoration: none; | |
|     background-color: $dropdown-link-active-bg; | |
|   } | |
| 
 | |
|   &.disabled, | |
|   &:disabled { | |
|     color: $dropdown-link-disabled-color; | |
|     cursor: $cursor-disabled; | |
|     background-color: transparent; | |
|     // Remove CSS gradients if they're enabled | |
|     @if $enable-gradients { | |
|       background-image: none; | |
|     } | |
|   } | |
| } | |
| 
 | |
| // Open state for the dropdown | |
| .show { | |
|   // Show the menu | |
|   > .dropdown-menu { | |
|     display: block; | |
|   } | |
| 
 | |
|   // Remove the outline when :focus is triggered | |
|   > a { | |
|     outline: 0; | |
|   } | |
| } | |
| 
 | |
| // Menu positioning | |
| // | |
| // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown | |
| // menu with the parent. | |
| .dropdown-menu-right { | |
|   right: 0; | |
|   left: auto; // Reset the default from `.dropdown-menu` | |
| } | |
| 
 | |
| .dropdown-menu-left { | |
|   right: auto; | |
|   left: 0; | |
| } | |
| 
 | |
| // Dropdown section headers | |
| .dropdown-header { | |
|   display: block; | |
|   padding: $dropdown-padding-y $dropdown-item-padding-x; | |
|   margin-bottom: 0; // for use with heading elements | |
|   font-size: $font-size-sm; | |
|   color: $dropdown-header-color; | |
|   white-space: nowrap; // as with > li > a | |
| } | |
| 
 | |
| // Backdrop to catch body clicks on mobile, etc. | |
| .dropdown-backdrop { | |
|   position: fixed; | |
|   top: 0; | |
|   right: 0; | |
|   bottom: 0; | |
|   left: 0; | |
|   z-index: $zindex-dropdown-backdrop; | |
| } | |
| 
 | |
| // Allow for dropdowns to go bottom up (aka, dropup-menu) | |
| // | |
| // Just add .dropup after the standard .dropdown class and you're set. | |
|  | |
| .dropup { | |
|   // Different positioning for bottom up menu | |
|   .dropdown-menu { | |
|     top: auto; | |
|     bottom: 100%; | |
|     margin-bottom: $dropdown-margin-top; | |
|   } | |
| }
 |