popup-menu.less

/*
 * LMS version 1.11-git
 *
 *  (C) Copyright 2001-2020 LMS Developers
 *
 *  Please, see the doc/AUTHORS for more information about authors!
 *
 *  This program is free software; you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License Version 2 as
 *  published by the Free Software Foundation.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program; if not, write to the Free Software
 *  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307,
 *  USA.
 *
 *  $Id$
 */

#lms-ui-popup-menu {
  display: none;
  &.open {
    display: flex;
  }
  z-index: 80;
  flex-direction: column;
  position: absolute;
  max-width: 25em;
  max-height: 50vh;
  background-color: @light;
  @media screen and (min-width: @mobile-max-width + 1px) {
    border: @frame;
  }
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 1em;
  font-weight: bold;

  #lms-ui-popup-menu-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: @dotted-line;
    i {
      margin-left: 1.5em;
      cursor: pointer;
    }
  }

  #lms-ui-popup-menu-content {
    overflow-y: auto;
    max-height: calc(100% - 2.2em);
  }

  ul {
    list-style-type: none;
    display: inline-block;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    width: 100%;
    li {
      padding-top: 0.25em;
      padding-bottom: 0.25em;
      padding-left: 2.5em;
      padding-right: 0.5em;
      text-indent: -1.7em;

      @media screen and (max-width: @mobile-max-width) {
        &:not(:last-child) {
          border-bottom: @dotted-line;
        }
      }

      i {
        //padding-right: 0.5em;
      }
      &:hover {
        background-color: @highlight;
        cursor: pointer;
      }
    }
  }

  @media screen and (max-width: @mobile-max-width) {
    max-width: unset;
    max-height: unset;
    position: fixed;
    left: 0;
    top: 2em;
    right: 0;
    bottom: 0;
    font-size: 200%;
  }
}