@logicflow/dumi-theme-simple/dist/slots/_.less

Simple website theme based on dumi2.

@import '~normalize.css';

@black: #000;
@primary-color: #0082ff;
@secondary-color: #1a7bdc;
@text-color: fade(@black, 85%);
@font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
@border-color-split: hsv(0, 0, 94%); // split border inside a component
@text-color-secondary: fade(@black, 45%);

.container1440() {
  width: 1440px;
  max-width: calc(100% - 80px);
  margin-left: auto;
  margin-right: auto;

  @media only screen and (max-width: 931.99px) {
    & {
      max-width: calc(100% - 80px);
    }
  }

  @media only screen and (max-width: 767.99px) {
    & {
      max-width: calc(100% - 32px);
    }
  }
}

// 非常关键，用于 react-split-pane 的样式，如果没有，会没有办法鼠标拖拽
// 参考：https://codesandbox.io/s/mow7x4zyqx
:global {
  .Pane1,
  .Pane2 {
    overflow: auto;
  }

  .Resizer {
    background: #000;
    opacity: 0.1;
    z-index: 1;
    box-sizing: border-box;
    background-clip: padding-box;

    &:hover {
      transition: all 2s ease;
    }

    &.horizontal {
      height: 11px;
      margin: -5px 0;
      border-top: 5px solid rgba(255, 255, 255, 0);
      border-bottom: 5px solid rgba(255, 255, 255, 0);
      cursor: row-resize;
      width: 100%;

      &:hover {
        border-top: 5px solid rgba(0, 0, 0, 0.5);
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
      }
    }

    &.vertical {
      width: 11px;
      margin: 0 -5px;
      border-left: 5px solid rgba(255, 255, 255, 0);
      border-right: 5px solid rgba(255, 255, 255, 0);
      cursor: col-resize;

      Pane2 {
        border-left: 1px solid #e6e6e6;
      }

      &:hover {
        border-left: 5px solid rgba(0, 0, 0, 0.5);
        border-right: 5px solid rgba(0, 0, 0, 0.5);
      }
    }

    &.disabled {
      cursor: not-allowed;

      &:hover {
        border-color: transparent;
      }
    }
  }
}