exadel-inc/esl

// TODO: review after base styles creation
// TODO: share with core ?
@import (reference) './variables.less';
 
.esl-example-menu {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  border: 1px solid @secondary-blue;
  border-radius: 8px;
 
  .menu-item {
    position: relative;
    display: block;
    list-style: none;
 
    &:not(:first-child) {
      border-left: 1px solid @secondary-blue;
    }
  }
 
  .menu-item-btn {
    display: inline-block;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
 
    background-color: transparent;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
 
    transition:
      color 0.15s ease-in-out,
      background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
  }
 
  .menu-item-arrow::after {
    display: inline-block;
    content: '';
    margin: 2px 7px 4px;
    height: 6px;
    width: 10px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' xml:space='preserve'%3E%3Cpolyline points='0,0 8,8 16,0' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
  }
 
  .menu-container {
    position: absolute;
    top: 100%;
    left: 0;
 
    margin: 0;
    min-width: 200px;
    z-index: 99;
 
    color: black;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transform: translate3d(0, 0, 0);
 
    transition:
      max-height 0.3s ease-in-out,
      visibility 0s linear 0.3s;
    &.open {
      transition:
        max-height 0.3s ease-in-out,
        visibility 0s linear;
    }
 
    &.animate.open {
      z-index: 100;
    }
  }
}
 
.esl-example-menu-400 {
  width: 300px;
  padding: 5px 10px;
}
 
.esl-example-sub-menu {
  min-width: 180px;
  padding: 0;
 
  li {
    list-style-type: none;
    padding: 12px 10px;
    cursor: pointer;
  }
  li:hover {
    color: @primary-blue;
    background: fade(@primary-blue, 15%);
  }
  li:not(:first-of-type) {
    border-top: 1px solid rgb(202, 201, 201);
  }
}
 
.esl-popup-menu {
  min-width: 200px;
 
  color: black;
  border-radius: 8px;
}