Misago/uiframework/misago/css/misago/dropdowns.less

//
// Dropdown menus
// --------------------------------------------------


/* All Displays */
.dropdown-menu {
  border: none;
  border-radius: @border-radius-base !important;
  box-shadow: 0px 0px 0px 6px @dropdown-shadow;
  margin-top: 12px;

  &:after {
    border: solid transparent;
    border-bottom-color: @dropdown-bg;
    border-width: 6px;
    content: "";
    height: 0;
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: -11px;
    width: 0;
  }

  li {
    /* Buttons */
    button {
      background: none;
      border: none;
      padding: 3px 20px;
      width: 100%;

      color: @dropdown-link-color;
      text-align: left;
      white-space: nowrap;
    }

    /* Colors */
    a, button {
      &:hover {
        background-color: @dropdown-link-hover-bg;

        color: @dropdown-link-hover-color;
      }

      &:active, &:focus {
        background-color: @dropdown-link-active-bg;
        outline: none;

        color: @dropdown-link-active-color;
      }
    }

    /* Icons */
    a, button {
      .glyphicon, .fa {
        display: inline-block;
        width: 16px;

        text-align: center;
      }
    }

    /* Badges */
    a {
      .badge {
        border-radius: @border-radius-small;
        position: relative;
        top: 1px;
      }

      &:link, &:visited {
        .badge {
          background-color: @brand-danger;

          color: @dropdown-bg;
        }
      }

      &:hover {
        .badge {
          background-color: @dropdown-bg;

          color: @dropdown-link-hover-bg;
        }
      }

      &:active {
        .badge {
          background-color: @dropdown-bg;

          color: @dropdown-link-active-bg;
        }
      }
    }
  }
}

/* Move arrow to right on pull-right dropdowns */
.pull-right {
  .dropdown-menu:after {
    left: auto;
    right: 12px;
  }
}


/* Big displays */
@media (min-width: @screen-sm-min) {
  .dropdown-menu {
    min-width: 300px;

    .dropdown-title {
      background-color: #ecf0f1;
      border-radius: @border-radius-base @border-radius-base 0px 0px;
      margin-top: -5px;
      margin-bottom: 5px;
      padding: @padding-base-vertical @padding-base-horizontal;

      .badge {
        background-color: darken(@brand-danger, 10%);
        border-radius: @border-radius-small;
      }
    }

    &>li {
      .badge {
        margin-left: @line-height-computed / 2;
      }

      button {
        background: none;
        border: none;
        padding: 3px 20px;
        width: 100%;

        color: @dropdown-link-color;
        text-align: left;

        &:hover {
          background-color: @dropdown-link-hover-bg;

          color: @dropdown-link-hover-color;
        }

        &:active, &:focus {
          background-color: @dropdown-link-active-bg;

          color: @dropdown-link-active-color;
        }
      }
    }
  }
}