src/style/dropdown.less
.@{prefix-cls}-dropdown-con{
position: relative;
display: inline-block;
vertical-align: middle;
.@{prefix-cls}-dropdown-menu{
display: block;
}
}
.@{prefix-cls}-dropdown {
position: relative;
}
.@{prefix-cls}-dropdown-toggle:focus {
outline: 0;
}
.@{prefix-cls}-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: @dropdownMinWidth;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: @whiteColor;
background-clip: padding-box;
border: @dropBorder;
border-radius: 4px;
box-shadow: @dropShadow;
overflow: auto;
&.pull-right {
right: 0;
left: auto;
}
> li > a {
display: block;
padding: @dropdownLiPadding;
clear: both;
font-weight: normal;
line-height: @dropdownLineHeight;
color: @fontColor;
font-size: 13px;
cursor: pointer;
transition: all .3s ease;
}
> li > a:hover,
> li > a:focus {
background-color: @hoverColor;
color: @fontColor;
text-decoration: none;
}
> .@{prefix-cls}-dropdown-active > a,
> .@{prefix-cls}-dropdown-active > a:hover,
> .@{prefix-cls}-dropdown-active > a:focus {
color: @whiteColor;
text-decoration: none;
background-color: @primaryColor;
outline: 0;
}
> .@{prefix-cls}-dropdown-disabled > a,
> .@{prefix-cls}-dropdown-disabled > a:hover,
> .@{prefix-cls}-dropdown-disabled > a:focus {
color: @weightGrayColor;
}
> .@{prefix-cls}-dropdown-disabled > a:hover,
> .@{prefix-cls}-dropdown-disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
}
.@{prefix-cls}-btn.@{prefix-cls}-dropdown-toggle,
.@{prefix-cls}-btn-group.@{prefix-cls}-open .@{prefix-cls}-dropdown-toggle {
box-shadow: none;
}
.@{prefix-cls}-open > .@{prefix-cls}-dropdown-menu {
display: block;
}
.@{prefix-cls}-open > a {
outline: 0;
}
.pull-right > .@{prefix-cls}-dropdown-menu {
right: 0;
left: auto;
}
.@{prefix-cls}-navbar-fixed-bottom .@{prefix-cls}-dropdown .@{prefix-cls}-dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
@media (min-width: 768px) {
.@{prefix-cls}-navbar-right .@{prefix-cls}-dropdown-menu {
right: 0;
left: auto;
}
.@{prefix-cls}-navbar-right .@{prefix-cls}-dropdown-menu-left {
right: auto;
left: 0;
}
}