mailspring-mirror/app/static/style/components/menu.less

@import 'ui-variables';

.menu {
  flex: 1;
  display: flex;
  flex-direction: column;

  .header-container {
    flex-shrink: 0; // Don't squish the header! There may be a search box here
    background-color: @background-secondary;
    border-bottom: 1px solid @border-color-secondary;
    padding: 3px;
    position: relative;
  }

  .footer-container {
    position: relative;
  }

  .content-container {
    background: @background-secondary;
    width: 100%;
    margin-top: -1px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: fade(@text-color, 20%);
      border-radius: 4px;
      border: 2px solid transparent;
      background-clip: padding-box;
      &:hover {
        background: fade(@text-color, 35%);
        background-clip: padding-box;
      }
    }
  }

  .item {
    display: block;
    padding-left: @padding-base-horizontal;
    padding-top: @padding-base-vertical;
    padding-bottom: @padding-base-vertical;
    cursor: default;
    color: @text-color;
    width: 100%;
    overflow: hidden;

    .primary {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .secondary {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left: 5px;
      color: @text-color-very-subtle;
    }
  }

  .item.divider {
    font-weight: @font-weight-semi-bold;
    color: @border-color-divider;
    font-size: @font-size-small;
    text-transform: uppercase;
    margin-top: 10px;
    pointer-events: none;
  }

  .item.checked {
    background-image: url(./images/menu/checked@2x.png);
    background-size: 16px;
    background-position: right;
    background-repeat: no-repeat;
    background-position-x: 97%;
    margin-right: 20px;
    padding-right: 10%;
  }

  .item.selected,
  .item:active {
    text-decoration: none;
    background-color: @accent-primary;
    color: @text-color-inverse;
    .primary {
      color: @text-color-inverse;
    }
    .secondary {
      color: @text-color-inverse-very-subtle;
    }
  }

  .item:not(.active):not(.selected):hover {
    text-decoration: none;
    background-color: fade(@text-color, 5%);
  }
}
body.platform-win32 {
  .menu {
    .header-container {
      input.search {
        box-shadow: none;
      }
    }
  }
}

.dropdown-menu {
  .menu {
    background: @background-secondary;
    width: 250px;
    max-height: 400px;
    box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
      0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 4px 7px @standard-shadow-color;

    .header-container {
      border-bottom: 0;
    }
  }
}