@dslate/dslate/lib/components/DSlate/index.less

一个Ant Design风格的富文本编辑器 - An Ant Design style rich editor based on Slate

@dslate-prefix: ant-dslate;
@root-entry-name: 'default';

@import '~@dslate/component/es/style/index.less';

@import (reference) '~antd/es/style/themes/index.less';
@import (reference) '~antd/es/style/mixins/index.less';
@import (reference) '~antd/es/input/style/mixin.less';

@toolbar-button-size: 30px;
@ant-popover-inner-content: ~'@{ant-prefix}-popover-inner-content';

.@{dslate-prefix} {
  .reset-component();
  .input();

  &-input {
    .input();
  }

  padding: @input-padding-vertical-base 0px;

  &-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: @input-padding-vertical-base @input-padding-horizontal-base;
    column-gap: 8px;
    border-bottom: 1px solid @border-color-base;
    row-gap: 8px;

    &-item {
      display: flex;
      flex-wrap: wrap;
      column-gap: 8px;
      row-gap: 8px;
    }

    &-button {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-width: @toolbar-button-size;
      height: @toolbar-button-size;
      padding: 0px @padding-xs;
      color: @text-color;
      border-radius: @border-radius-base;
      cursor: pointer;

      &:hover {
        background-color: @item-hover-bg;
      }

      &.active {
        color: @link-active-color;
      }

      &.disabled {
        color: @disabled-color !important;
        cursor: not-allowed !important;
        &:hover {
          background-color: transparent !important;
        }
      }
    }

    &-select {
      &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: @toolbar-button-size;

        .icon-down {
          margin-left: 8px;
          color: @disabled-color;
          font-size: 7px;
        }
      }

      &-content {
        .item {
          padding: @input-padding-vertical-base @input-padding-horizontal-base * 2;
          color: @text-color;
          cursor: pointer;

          &:hover {
            background-color: @item-hover-bg;
          }

          &.active {
            background-color: @item-active-bg;
          }
        }

        &.horizontal {
          display: flex;

          .item {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: @toolbar-button-size;
            min-height: 32px;
            padding: @input-padding-vertical-base;
          }
        }
      }
    }
  }

  &-editable {
    min-height: @input-height-base * 10 !important;
    padding: @input-padding-vertical-base @input-padding-horizontal-base;

    * {
      margin: 0;
      &::selection {
        color: inherit;
        background-color: hsla(@primary-color, 50%);
      }
    }
  }

  &-counter {
    padding-right: @input-padding-horizontal-base;
    color: @text-color-secondary;
    font-size: @font-size-sm;
    white-space: nowrap;
    text-align: right;
    pointer-events: none;
  }

  &-lg {
    padding: @input-padding-vertical-lg 0px;
  }

  &-lg &-editable,
  &-lg &-toolbar {
    padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
  }

  &-sm {
    padding: @input-padding-vertical-sm 0px;
  }

  &-sm &-editable,
  &-sm &-toolbar {
    padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
  }

  &-img {
    position: relative;
    display: inline-block;
    border: 1px solid transparent;

    &:hover {
      border-color: @primary-color-outline;
    }

    &.selected {
      border-color: transparent;
    }

    &-drag {
      border: 1px solid @primary-color;
      visibility: hidden;

      &.selected {
        visibility: visible;
      }

      .size-content {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.5);
      }

      &.draging {
        .size-content {
          display: flex;
        }
      }
    }
  }

  &-progress {
    &-bg {
      background-color: @primary-color;
    }
  }
}