Misago/misago/emberapp/app/styles/_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;

  max-height: 310px;

  &: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 {
    /* Links */
    a {
      padding: @padding-base-vertical @padding-large-horizontal;
    }

    /* Buttons */
    button {
      background: none;
      border: none;
      border-radius: 0px;
      padding: @padding-base-vertical @padding-large-horizontal;
      width: 100%;

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

    /* Colors */
    a, button {
      &:hover {
        background-color: @dropdown-link-hover-bg;
        transition-timing-function: ease;
        transition-duration: 0.15s;

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

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

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

    /* Icons */
    a, button {
      .glyphicon, .fa {
        display: inline-block;
        margin-right: 4px;
        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 {
    &.width-medium {
      max-width: 200px;
    }

    &.width-large {
      max-width: 300px;
    }

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

      color: @dropdown-title-color;
      font-weight: bold;

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

    .dropdown-footer {
      background-color: @dropdown-title-bg;
      border-top: 1px solid @dropdown-title-border;
      .box-shadow(0px -3px 3px -1px darken(@dropdown-title-bg, 5%));
      border-radius: 0px 0px @border-radius-base @border-radius-base;
      margin-bottom: -5px;
      padding: @padding-base-vertical @padding-base-horizontal;

      color: @dropdown-title-color;
      font-weight: bold;
    }

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

      button {
        background: none;
        border: none;
        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;
        }
      }
    }
  }
}


// Dropup tweak
.dropup {
  .dropdown-menu {
    margin-top: 0px;
    margin-bottom: 8px;
  }
}


// Utility class for js scroll handling
.scrollable {
  overflow-y: auto;
}