arch-editor/src/components/AtomicFormula.less

Rich text editor with a high degree of customization.

@import '~theme';

.formula-container {
  display: inline-block;
}
.formula {
  display: inline-flex;
  min-width: 60px;
  min-height: 50px;
  padding: 10px 20px;
  transition: box-shadow 0.3s ease;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  &.active,
  &:hover {
    cursor: default;
    outline: 1px solid @border-color;
    box-shadow: @box-shadow;
  }
  .placeholder {
    display: inline-block;
    font-family: 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    color: #999;
    padding: 10px 0;
  }
  .tip-info {
    display: block;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    line-height: 1.8;
    border-radius: 2px;
    margin: 10px 0 5px 0;
    border: 1px solid @danger-color;
    background-color: mix(#fff, @danger-color, 35%);
  }
  .advise-info {
    font-size: 12px;
    color: #999;
    margin: 15px 0 5px 0;
    button {
      display: inline;
      background-color: transparent;
      border: 0;
      outline: none;
      font-size: 12px;
      cursor: pointer;
      color: #666;
      &:hover {
        color: #999;
      }
    }
  }
  .input-tex {
    display: inline-block;
    min-width: 300px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    border: 1px solid @border-color;
    line-height: 1.8;
    font-size: 15px;
    border-radius: 0;
    font-family: 'Times New Roman', Times, serif;
    outline: none;
    padding: 0 5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    &:focus {
      border-color: @primary-color;
    }
    &::placeholder {
      font-family: 'Microsoft YaHei', sans-serif;
      font-size: 12px;
      color: #ccc;
    }
  }
}