mirror of
https://github.com/paradoxxxzero/butterfly.git
synced 2026-05-27 23:49:40 +00:00
166 lines
3.8 KiB
Sass
166 lines
3.8 KiB
Sass
//
|
|
// Dropdown menus
|
|
// --------------------------------------------------
|
|
|
|
// Dropdown arrow/caret
|
|
.caret
|
|
display: inline-block
|
|
width: 0
|
|
height: 0
|
|
margin-left: 2px
|
|
vertical-align: middle
|
|
border-top: $caret-width-base solid $dropdown-caret-color
|
|
border-right: $caret-width-base solid transparent
|
|
border-left: $caret-width-base solid transparent
|
|
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
|
|
// we can just straight up remove this.
|
|
border-bottom: 0 dotted
|
|
|
|
// The dropdown wrapper (div)
|
|
.dropdown
|
|
position: relative
|
|
|
|
// Prevent the focus on the dropdown toggle when closing dropdowns
|
|
.dropdown-toggle:focus
|
|
outline: 0
|
|
|
|
// The dropdown menu (ul)
|
|
.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: 160px
|
|
padding: 5px 0
|
|
margin: 2px 0 0
|
|
// override default ul
|
|
list-style: none
|
|
font-size: $font-size-base
|
|
background-color: $dropdown-bg
|
|
border: 1px solid $dropdown-fallback-border
|
|
// IE8 fallback
|
|
border: 1px solid $dropdown-border
|
|
border-radius: $border-radius-base
|
|
+box-shadow(0 6px 12px rgba(0, 0, 0, 0.175))
|
|
background-clip: padding-box
|
|
// Aligns the dropdown menu to right
|
|
&.pull-right
|
|
right: 0
|
|
left: auto
|
|
// Dividers (basically an hr) within the dropdown
|
|
.divider
|
|
+nav-divider($dropdown-divider-bg)
|
|
// Links within the dropdown menu
|
|
> li > a
|
|
display: block
|
|
padding: 3px 20px
|
|
clear: both
|
|
font-weight: normal
|
|
line-height: $line-height-base
|
|
color: $dropdown-link-color
|
|
white-space: nowrap
|
|
// prevent links from randomly breaking onto new lines
|
|
|
|
// Hover/Focus state
|
|
.dropdown-menu > li > a
|
|
&:hover,
|
|
&:focus
|
|
text-decoration: none
|
|
color: $dropdown-link-hover-color
|
|
background-color: $dropdown-link-hover-bg
|
|
|
|
// Active state
|
|
.dropdown-menu > .active > a
|
|
&,
|
|
&:hover,
|
|
&:focus
|
|
color: $dropdown-link-active-color
|
|
text-decoration: none
|
|
outline: 0
|
|
background-color: $dropdown-link-active-bg
|
|
|
|
// Disabled state
|
|
//
|
|
// Gray out text and ensure the hover/focus state remains gray
|
|
|
|
.dropdown-menu > .disabled > a
|
|
&,
|
|
&:hover,
|
|
&:focus
|
|
color: $dropdown-link-disabled-color
|
|
|
|
// Nuke hover/focus effects
|
|
.dropdown-menu > .disabled > a
|
|
&:hover,
|
|
&:focus
|
|
text-decoration: none
|
|
background-color: transparent
|
|
background-image: none
|
|
// Remove CSS gradient
|
|
+reset-filter
|
|
cursor: not-allowed
|
|
|
|
// Open state for the dropdown
|
|
.open
|
|
// Show the menu
|
|
> .dropdown-menu
|
|
display: block
|
|
// Remove the outline when :focus is triggered
|
|
> a
|
|
outline: 0
|
|
|
|
// Dropdown section headers
|
|
.dropdown-header
|
|
display: block
|
|
padding: 3px 20px
|
|
font-size: $font-size-small
|
|
line-height: $line-height-base
|
|
color: $dropdown-header-color
|
|
|
|
// Backdrop to catch body clicks on mobile, etc.
|
|
.dropdown-backdrop
|
|
position: fixed
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
top: 0
|
|
z-index: $zindex-dropdown - 10
|
|
|
|
// Right aligned dropdowns
|
|
.pull-right > .dropdown-menu
|
|
right: 0
|
|
left: auto
|
|
|
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
//
|
|
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
|
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
|
|
|
.dropup,
|
|
.navbar-fixed-bottom .dropdown
|
|
// Reverse the caret
|
|
.caret
|
|
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
|
|
// gets fixed, restore `border-top: 0;`.
|
|
border-top: 0 dotted
|
|
border-bottom: $caret-width-base solid $dropdown-caret-color
|
|
content: ""
|
|
// Different positioning for bottom up menu
|
|
.dropdown-menu
|
|
top: auto
|
|
bottom: 100%
|
|
margin-bottom: 1px
|
|
|
|
// Component alignment
|
|
//
|
|
// Reiterate per navbar.less and the modified component alignment there.
|
|
|
|
@media (min-width: $grid-float-breakpoint)
|
|
.navbar-right
|
|
.dropdown-menu
|
|
right: 0
|
|
left: auto
|