icingaweb2/public/css/icinga/mobileconfigmenu.less

#mobile-searchbar {
  flex: 1 1 auto;
  margin-right: 1em;

  input.search {
    @height: 2.5em;

    width: 100%;
    background: @low-sat-blue-dark url(../img/icons/search.png) no-repeat .5em center;
    padding-left: 2em;
    background-size: 1em;
    border: none;
    height: @height;
    border-radius: @height/2;

    &:focus {
      outline: 3px solid rgba(0, 195, 237, 0.5);

      &::placeholder {
        color: @gray;
      }
    }
  }

  .search-reset {
    right: .5em;
  }

  .search-control {
    width: 100%;
  }
}

#mobile-config-menu {
  position: relative;

  button {
    .appearance(none);
    background: none;
    border: none;
    .rounded-corners();
    padding: .25em;
    margin-right: -.25em;

    > .user-ball {
      .ball-size-l();
    }
  }

  > li {
    margin-right: .75em;
  }

  .state-badge {
    font-size: .857em;
    line-height: 1.5;
  }

  button ~ .state-badge {
    position: absolute;
    top: .25em;
    left: -.5em;
  }

  .user-ball {
    .ball();
    .ball-solid(@icinga-blue);

    // icingadb-web/public/css/common.less: .user-ball
    font-weight: bold;
    text-transform: uppercase;

    // compensate border
    margin: -1px;
    border: 1px solid @text-color-inverted;
    font-style: normal;
    vertical-align: baseline;

    font-size: 1.75em;
  }

  .nav-level-1 {
    right: 1em;
    left: 1em;
    top: 4em;
  }

  > li.active button {
    background: @icinga-blue
  }

  .nav-level-1 li.active.selected {
    background: @menu-2ndlvl-active-bg-color
  }
}

#layout.minimal-layout #mobile-config-menu {
  .nav-level-1 {
    position: fixed;

    &:before {
      transform: rotate(225deg);
      height: 1.1em;
      width: 1.1em;
      top: -.6em;
      right: .6em;
    }
  }

  li.has-icon .user-ball {
    font-size: 1em;
    height: 1.5em;
    width: 1.5em;
    margin-right: .2em;
  }
}

#layout:not(.minimal-layout) {
  #mobile-config-menu,
  #mobile-searchbar {
    display: none;
  }
}

#layout.mobile-config-flyout-open #mobile-config-menu {
  button ~ .state-badge {
    display: none;
  }

  .nav-level-1 {
    display: block;
  }

  button {
    background: rgba(0, 0, 0, 0.25);
  }
}