responsivewebframework/src/less/drop-down-list.less

Jalasoft Foundation Front End Framework ========================================

//
// Dropdown menus
// --------------------------------------------------
//dropdown wraper (div)

.dropdown-list {
  font-size: @font-size-base-component;
  font-family: @font-family-base-component;
  position: relative;
  clear: both;
  margin: 0px;
  padding: 0px;
  border-width: 0px;
  display: inline-block;
  &:before {
    content: "";
    clear: both;
  }
  &:after {
    content: "";
    clear: both;
    width: 100%;
    background-color: red;

  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  &.open .dropdown-menu {
    left: 0;
    z-index: 1000;
  }
  //head dropdown (button)
  button.dropdown-list-toggle {
    text-align: left;
    background-color: transparent;
    font-size: @font-size-base-component;
    font-family: @font-family-base-component;
    border: solid @placeholder-color 1px;
    display: inline-block;
    padding: 0px 0px 0px @padding-left-head-menu;
    height: @height-component;
    float: left;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;

    //alignment center vertical
    line-height: @height-component;

    -webkit-border-radius: @border-radius-component;
    -moz-border-radius: @border-radius-component;
    border-radius: @border-radius-component;

    &:hover {
      cursor: pointer;
    }
  }
  //head dropdown icon down
  span.icon-deploy {
    border: 0px;
    padding: 0px;
    width: @icon-size-menu;
    height: @icon-size-menu;
    margin: @icon-padding-top-bottom-menu @icon-padding-left-right-menu;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
  }
  //head dropdown icon up
  span.icon-deploy.up:before {
    content: @content-icon-deployup;
  }

  //body dropdown (ul)

  ul.dropdown-menu {
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: white;
    font-size: @font-size-base-component;
    font-family: @font-family-base-component;
    max-height: @height-menu;
    border: solid @lines-color 1px;
    margin: 0px;
    list-style: none;
    position: absolute;
    top: 31px;
    left: -9999px;
    padding: 0px;
    height: 104px;

    -webkit-border-radius: @border-radius-component;
    -moz-border-radius: @border-radius-component;
    border-radius: @border-radius-component;
    .shadow_level(Level2);

    //item menu dropdown

    .vertical {
      z-index: 200;
    }

    li {
      display: list-item;
      text-align: left;
      padding-left: @icon-padding-left-right-menu;
      padding-right: @icon-padding-left-right-menu;
      height: @height-component;
      margin: 0px;

      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      //alignment center vertical
      line-height: 32px;
      //item menu dropdown hover
      &:hover {
        background-color: @dividers-color;
        width: 166px;
      }

      //margin first item menu
      &:nth-child(1) {
        margin-top: 4px;
      }
      //margin last item menu
      &:nth-last-child(1) {
        margin-bottom: 4px;
      }
    }
  }
}

.overview li {
  width: 104px;
}
select[class="drop-down-list"] {
  display: none;
}