acklen-keystone/admin/public/styles/isomorphic/mailbox/mail-drawer.less

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

.ReactDrawer__overlay___2QFmC{
  z-index: 1;
}

.react-drawer-drawer{
  z-index: 1;
  height: calc(~"100% - 70px");
  top: 70px;
  width: 250px;

  @media only screen and (min-width: 767px) and (max-width: 1099px){
    width: 60%;
  };

  .isoLeftWrapper{
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    background-color: #ffffff;
    width: 100%;
    height: 100%;

    .isoMailOptions{
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
    }

    /* * * * * * * *
    COMPOSE BTN
    * * * * * * * */
    .isoComposeBtnWrapper{
      width: 100%;
      padding: 0px 30px;
      height: 80px;
      display: flex;
      text-align: center;
      align-items: center;
      flex-shrink: 0;
      background-color: @isoColor--DarkerWhite;
      border-bottom: 1px solid rgba(228, 228, 228, 0.65);

      button{
        font-size: @isoFontSize;
        font-weight: 400;
        color: #ffffff;
        background-color: @primary-color;
        width: 100%;
        height: 40px;
        display: block;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        text-align: center;
        border: 0;
        outline: 0;
        cursor: pointer;
        .isoBorderRadius(3px);
        .isoTransition;

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

    /* * * * * * * * * * *
    Mail Options
    * * * * * * * * * * */
    .isoBucketList{
      padding: 35px 0 0;

      .isoSingleBucket{
        width: 100%;
        display: flex;
        padding: 0 30px;
        margin-bottom: 15px;
        align-items: center;
        justify-content: space-between;

        span{
          font-size: @isoFontSize;
          font-weight: 400;
          color: @isoColor--LightBlue;
          cursor: pointer;
          text-transform: capitalize;
          line-height: 1.1;
          .isoTransition;
        }

        .isoMailBadge{
          font-size: @isoFontSize - 2;
          font-weight: 500;
          color: @isoColor--LightBlue;
          line-height: normal;
          margin-left: auto;
          display: -webkit-inline-flex;
          display: -ms-inline-flex;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-align: center;
        }

        &.active{
          span:not(.isoMailBadge){
            font-weight: 500;
            color: @primary-color;
          }
        }

        span:not(.isoMailBadge){
          &:hover{
            color: @primary-color;
          }
        }
      }
    }

    /* * * * * * * * * * * * *
    MAIL TAGS
    * * * * * * * * * * * * */
    .isoMailTagList{
      padding: 30px 0;
      text-align: left;

      .isoSectionLabel{
        font-size: @isoFontSize + 2;
        font-weight: 500;
        color: @isoColor--LightBlue;
        line-height: 1.1;
        margin-bottom: 20px;
        padding: 15px 30px;
        background-color: @isoColor--DarkerWhite;
      }

      .isoMailTag{
        width: 100%;
        display: flex;
        margin-bottom: 15px;
        padding: 0 30px;
        align-items: center;
        cursor: pointer;

        .isoLabelIndicatorColor{
          width: 10px;
          height: 10px;
          display: flex;
          margin-left: 5px;
          .isoBorderRadius(50%);
        }

        span{
          font-size: @isoFontSize;
          font-weight: 400;
          color: @isoColor--LightBlue;
          cursor: pointer;
          line-height: 1.1;
          margin-left: 20px;
          .isoTransition;
        }

        &.active{
          span{
            font-weight: 500;
            color: @primary-color;
          }
        }

        &:hover{
          span{
            color: @primary-color;
          }
        }
      }
    }

  }
}