keeweb/app/styles/areas/_app.scss

.app {
  @include size(100%);
  @include display(flex);
  @include align-items(stretch);
  @include flex-direction(column);
  @include justify-content(flex-start);

  &__body {
    @include flex(1);
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(row);
    @include justify-content(flex-start);
    overflow: hidden;
  }

  &__menu {
    @include flex(0 0 auto);
    @include display(flex);
    width: 150px;
    @include mobile {
      &:not(.menu-visible) {
        display: none;
      }
    }
    &.macos {
      padding-top: 40px;
    }
  }

  &__list-wrap {
    @include flex(1);
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(row);
    @include justify-content(flex-start);
    overflow: hidden;
    &.app__list-wrap--table {
      @include flex-direction(column);
    }
  }

  &__menu-drag, &__list-drag {
    @include drag-handle;
    @include flex(0 0 auto);
    width: 1px;
    cursor: col-resize;
    @include mobile { display: none; }
  }

  &__list-drag {
    .app__list-wrap--table & {
      width: auto;
      height: 1px;
      cursor: row-resize;
    }
  }

  .menu-visible + &__menu-drag {
    display: block;
  }

  &__list {
    @include flex(0 0 250px);
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(column);
    overflow-y: auto;
    @include mobile {
      @include flex(1 1);
      .app--details-visible & {
        display: none;
      }
    }
  }

  &__details {
    @include flex(1);
    @include display(flex);
    overflow: hidden;
    padding: $base-spacing;
    position: relative;
    @include mobile {
      width: 100vw;
      padding: $base-padding;
      display: none;
      .app--details-visible & {
        @include display(flex);
      }
    }
  }

  &__panel {
    @include flex(1);
    @include display(flex);
    overflow: hidden;
    padding: $base-spacing;
    position: relative;
    @include mobile {
      padding: $base-padding;
    }
  }

  &__footer {
    @include flex(0 0 auto);
    @include th { border-top: light-border(); }
  }

  &__beta {
    padding: $base-padding;
    text-align: center;
    @include th {
      background-color: error-color();
      color: text-contrast-color(error-color());
    }
  }
}