arch-editor/src/InlineToolbar.less

Rich text editor with a high degree of customization.

@import '~theme';

.popover {
  .arrow() {
    position: absolute;
    width: @popover-arrow-size;
    height: @popover-arrow-size;
    background: inherit;
  }

  position: relative;
  min-width: 47px;
  height: 47px;
  color: @popover-fore-color;
  border-radius: 4px;
  font-size: 13px;
  background-color: @popover-background-color;
  border: 1px solid @popover-border-color;
  box-sizing: border-box;
  box-shadow: 0 0 20px 5px rgba(6, 25, 64, 0.15);
  transition: all 300ms;
  z-index: 9999;

  .content {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 20px;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
    > li {
      display: inline-flex;
      height: 100%;
      padding: 0 10px;
      align-items: center;
      transition: all 0.3s ease;
      &:hover {
        cursor: default;
        background-color: mix(#ffffff, @popover-background-color, 10%) !important;
      }
      &.active {
        background-color: darken(@popover-background-color, 5%);
      }
    }
  }

  .link-content {
    position: relative;
    padding: 5px;
    padding-bottom: 10px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    z-index: 1;
    .url-input {
      width: 200px;
      border: 0;
      background-color: transparent;
      border-bottom: 1px solid #fff;
      font-size: 15px;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      caret-color: #fff;
      outline: none;
      margin: 0 5px;
      &::placeholder {
        color: #cccccc;
      }
      &::selection {
        background-color: #cccccc;
        color: #fff;
      }
    }
    .button {
      display: inline-block;
      width: 30px;
      background-color: transparent;
      outline: none;
      color: #fff;
      font-size: 18px;
      border: 0;
      &:hover {
        background-color: mix(#fff, @popover-background-color, 15%);
      }
    }
  }

  .popover-arrow {
    .arrow();
    visibility: hidden;
    &::before {
      .arrow();
      content: '';
      visibility: visible;
      transform: rotate(45deg);
    }
  }

  &[data-popper-placement^='top'] {
    > .popover-arrow {
      bottom: -(@popover-arrow-size / 2);
      &::before {
        border-right: 1px solid @popover-border-color;
        border-bottom: 1px solid @popover-border-color;
      }
    }
  }

  &[data-popper-placement^='bottom'] {
    > .popover-arrow {
      top: -(@popover-arrow-size / 2 + 1);
      &::before {
        border-left: 1px solid @popover-border-color;
        border-top: 1px solid @popover-border-color;
      }
    }
  }

  &[data-popper-placement^='left'] {
    > .popover-arrow {
      right: -(@popover-arrow-size / 2);
      &::before {
        border-top: 1px solid @popover-border-color;
        border-right: 1px solid @popover-border-color;
      }
    }
  }

  &[data-popper-placement^='right'] {
    > .popover-arrow {
      left: -(@popover-arrow-size / 2 + 1);
      &::before {
        border-left: 1px solid @popover-border-color;
        border-bottom: 1px solid @popover-border-color;
      }
    }
  }
}