memos/web/src/less/memo.less

@import "./mixin.less";
@import "./memo-content.less";

.memo-wrapper {
  @apply flex flex-col justify-start items-start w-full max-w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;

  &.archived-memo {
    @apply border-gray-200;
  }

  &.pinned {
    @apply border-gray-200 border-2;
  }

  > .memo-top-wrapper {
    @apply flex flex-row justify-between items-center w-full h-6 mb-1;

    > .status-text-container {
      @apply flex flex-row justify-start items-center;

      > .time-text {
        @apply text-xs text-gray-400 cursor-pointer;
        font-size: 13px;
      }

      > .status-text {
        @apply text-xs cursor-pointer ml-2 rounded border border-green-600 px-1 text-green-600;
      }
    }

    > .time-text {
      @apply text-xs text-gray-400 cursor-pointer;
    }

    > .btns-container {
      @apply flex flex-row justify-end items-center relative flex-shrink-0;

      > .more-action-btns-wrapper {
        @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;

        > .more-action-btns-container {
          @apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white;
          box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);

          > .btns-container {
            @apply w-full flex flex-row justify-between items-center border-b border-gray-100 p-1 mb-1;

            > .btn {
              @apply relative w-7 h-7 p-1;

              &:hover > .tip-text {
                @apply block;
              }

              > .icon-img {
                @apply w-5 h-auto;
              }

              > .tip-text {
                @apply hidden absolute top-0 p-1 px-2 rounded text-xs leading-6 -mt-9 bg-black text-white shadow opacity-70;
              }
            }
          }

          > .btn {
            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start;

            &.archive-btn {
              @apply text-orange-600;
            }
          }
        }
      }

      .btn {
        @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200;

        &.more-action-btn {
          @apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;

          > .icon-img {
            @apply w-4 h-auto;
          }

          &:hover {
            & + .more-action-btns-wrapper {
              display: flex;
            }
          }
        }
      }
    }
  }

  > .memo-content-text {
    @apply w-full h-auto transition-all;

    &.expanded {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 8;
      overflow: hidden;
    }

    .tag-span {
      @apply cursor-pointer hover:opacity-80;
    }
  }

  > .expand-btn-container {
    @apply w-full relative flex flex-row justify-start items-center;

    > .btn {
      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60;

      &.expand-btn {
        @apply mt-2;

        > .icon-img {
          @apply rotate-90;
        }
      }

      &.fold-btn {
        > .icon-img {
          @apply -rotate-90;
        }
      }

      > .icon-img {
        @apply w-4 h-auto ml-1 transition-all;
      }
    }
  }

  > .images-wrapper {
    @apply flex flex-row justify-start items-start mt-2 w-full overflow-x-auto overflow-y-hidden pb-1;
    .pretty-scroll-bar(0, 2px);

    > .memo-img {
      @apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;
      .hide-scroll-bar();

      > img {
        @apply w-auto max-h-40 rounded-lg;
      }
    }
  }
}