behigh / bootstrap_dropdowns_enhancement Goto Github PK

.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;
  }
}

@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;
        }
      }
    }

  }
}