acklen-keystone/admin/public/styles/isomorphic/notes/note.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

/* * * * * * * * * * * * * * *
NOTES
* * * * * * * * * * * * * * */
.isomorphicNoteComponent {
  padding: 50px 35px;
  display: flex;
  height: 100%;
  background: none;
  // background: @isoColor--LightBluish;

  @media only screen and (max-width: 767px) {
    padding: 40px 20px;
    height: auto;

    &.ant-layout.ant-layout-has-sider {
      flex-direction: column;
    }
  }

  @media only screen and (min-width: 767px) and (max-width: 990px) {
    padding: 50px 20px;
  }

  .isoNoteListSidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    background: #ffffff;
    border-right: 1px solid @isoColor--Border;

    @media only screen and (min-width: 767px) and (max-width: 990px) {
      width: 260px !important;
      flex: 0 0 260px !important;
    }
  }

  .isoNotepadWrapper {
    background: #ffffff;

    .isoHeader {
      height: auto;
      line-height: inherit;
      padding: 20px 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      flex-direction: row;
      background-color: #ffffff;
      border-bottom: 1px solid @isoColor--Border;

      @media only screen and (max-width: 480px) {
        padding: 20px;
      }

      @media only screen and (max-width: 400px) {
        flex-direction: column;
        justify-content: center;
      }

      .isoColorChooseWrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;

        span {
          font-size: @isoFontSize - 1;
          color: @isoColor--GreyShade;
        }

        .isoColorChooser {
          width: 20px;
          height: 20px;
          cursor: pointer;
          border: 0;
          margin-right: 15px;
          padding: 0;
          .isoBorderRadius(3px);
        }
      }

      .isoAddNoteBtn {
        background-color: @primary-color;
        border: 0;
        padding: 5px 15px;
        margin-left: auto;
        .isoBorderRadius(3px);
        .isoTransition;

        @media only screen and (max-width: 400px) {
          margin-left: 0;
          margin-top: 15px;
        }

        span {
          font-size: @isoFontSize - 2;
          font-weight: 400;
          padding: 0;
          text-transform: uppercase;
          color: #ffffff;
        }

        &:hover {
          background-color: darken(@primary-color, 4%);
        }
      }
    }

    .isoNoteEditingArea {
      height: 100%;

      @media (max-width: 800px) {
        height: 300px;
      }

      .isoNoteTextbox {
        font-size: @isoFontSize;
        color: @isoColor--Text;
        line-height: 24px;
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
        padding: 20px 30px;
        resize: none;

        @media only screen and (max-width: 480px) {
          padding: 20px;
        }
      }
    }
  }

  @import './noteList.less';
}