-
Notifications
You must be signed in to change notification settings - Fork 186
Open
Description
My solution.
Added () to math ops
dropdowns-enhancement-mixins.less
.dropdown-menu-caret(@size; @offset; @border: @dropdown-border; @fallback-border: @dropdown-fallback-border; @bg: @dropdown-bg) {
margin-top: (@size + 1);
.defaults() {
width: 0;
height: 0;
content: '';
display: inline-block;
position: absolute;
border-color: transparent;
border-style: solid;
-webkit-transform:rotate(360deg); // for a better anti-aliasing in webkit browser
}
&:before {
.defaults();
border-width: 0 @size @size;
border-bottom-color: @fallback-border;
border-bottom-color: @border;
top: -@size;
left: @offset;
}
&:after {
.defaults();
border-width: 0 (@size - 1) (@size - 1);
border-bottom-color: @bg;
top: -(@size - 1);
left: @offset + 1;
}
}dropdowns-enhancement.less
@import "mixins/dropdowns-enhancement-mixins.less";
.dropdown-menu {
// Style for <label>
> li > label:extend(.dropdown-menu > li > a all) {
margin-bottom: 0;
cursor: pointer;
}
> li > input {
&[type="radio"],
&[type="checkbox"] {
display: none;
position: absolute;
top: -9999em;
left: -9999em;
}
}
> li > label:focus,
> li > input:focus ~ label {
.tab-focus();
}
> li > input:checked ~ label:extend(.dropdown-menu > .active > a all),
> .active > label:extend(.dropdown-menu > .active > a all) {
}
> li > input[disabled] ~ label:extend(.dropdown-menu > .disabled > a all),
> .disabled > label:extend(.dropdown-menu > .disabled > a all) {
}
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Show the dropdown menu above
&.pull-top {
bottom: 100%;
top: auto;
margin: 0 0 2px;
.box-shadow(0 -6px 12px rgba(0,0,0,.175)); // copied from bootstrap/dropdown.less
}
&.pull-center {
right: 50%;
// dropdown.js is used to center menu
left: auto;
}
&.pull-middle {
right: 100%;
// dropdown.js is used to center menu
margin: 0 2px 0 0;
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
left: auto;
&.pull-right {
right: auto;
left: 100%;
margin: 0 0 0 2px;
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
}
&.pull-center {
right: 50%;
margin: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
}
&.bullet {
@size: 7px;
@offset: 9px;
.dropdown-menu-caret(@size; @offset);
&.pull-right {
&:before {
left: auto;
right: @offset;
}
&:after {
left: auto;
right: (@offset + 1);
}
}
&.pull-top {
margin-top: 0;
margin-bottom: (@size + 1);
&:before {
top: auto;
bottom: -@size;
border-bottom-width: 0;
border-top-width: @size;
border-top-color: @dropdown-fallback-border;
border-top-color: @dropdown-border;
}
&:after {
top: auto;
bottom: (-@size - 1);
border-bottom: none;
border-top-width: (@size - 1);
border-top-color: @dropdown-bg;
}
}
&.pull-center {
&:before {
left: auto;
right: 50%;
margin-right: (@size * -1);
}
&:after {
left: auto;
right: 50%;
margin-right: ((@size - 1) * -1);
}
}
&.pull-middle {
margin-right: (@size + 1);
&:before {
top: 50%;
left: 100%;
right: auto;
margin-top: (@size * -1);
border-right-width: 0;
border-bottom-color: transparent;
border-top-width: @size;
border-left-color: @dropdown-fallback-border;
border-left-color: @dropdown-border;
}
&:after {
top: 50%;
left: 100%;
right: auto;
margin-top: ((@size - 1) * -1);
border-right-width: 0;
border-bottom-color: transparent;
border-top-width: (@size - 1);
border-left-color: @dropdown-bg;
}
&.pull-right {
margin-right: 0;
margin-left: (@size + 1);
&:before {
left: -@size;
border-left-width: 0;
border-right-width: @size;
border-right-color: @dropdown-fallback-border;
border-right-color: @dropdown-border;
}
&:after {
left: (-@size - 1);
border-left-width: 0;
border-right-width: (@size - 1);
border-right-color: @dropdown-bg;
}
}
&.pull-center {
margin-left: 0;
margin-right: 0;
&:before {
border: none;
display: none
}
&:after {
border: none;
display: none
}
}
}
}
}
//
// Dropdown menus enhancement
// --------------------------------------------------
// Submenus
.dropdown-submenu {
position: relative;
> .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-top-left-radius: 0;
}
> a:before {
display: block;
float: right;
width: 0;
height: 0;
content: "";
margin-top: (@line-height-computed / 2 - @caret-width-base);
margin-right: (-@caret-width-base * 2);
border-width: @caret-width-base 0 @caret-width-base @caret-width-base;
border-style: solid;
border-left-style: dashed;
border-top-color: transparent;
border-bottom-color: transparent;
}
}
.make-nested-list(@n, @i: 0) when (@i < @n) {
> .dropdown-menu {
> li {
> a {
padding-left: (35px + (10 * @i));
}
.make-nested-list(@n, (@i + 1));
}
}
}
.navbar-nav {
@media (max-width: @grid-float-breakpoint-max) {
.dropdown-submenu {
> a:before {
margin-top: ((@line-height-computed / 2) - (@caret-width-base / 2));
border-color: inherit;
border-style: solid;
border-width: @caret-width-base @caret-width-base 0;
border-left-color: transparent;
border-right-color: transparent;
}
> a {
padding-left: 40px;
}
}
> .open > .dropdown-menu > .dropdown-submenu {
.make-nested-list(5);
}
}
}
// Default navbar
.navbar-default {
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
.open > .dropdown-menu > .dropdown-submenu.open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
}
@media (max-width: @grid-float-breakpoint-max) {
&:before {
border-top-color: @navbar-default-link-active-color;
}
}
}
}
}
// Inverse navbar
.navbar-inverse {
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
.open > .dropdown-menu > .dropdown-submenu.open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
@media (max-width: @grid-float-breakpoint-max) {
&:before {
border-top-color: @navbar-inverse-link-active-color;
}
}
}
}
}Metadata
Metadata
Assignees
Labels
No labels