@pusdn/gatsby-theme-antv/site/components/MdPlayGround.module.less

Ant Visualization solution home page

@import '~antd/es/style/themes/default.less';
@editor-height: 580px;

.playground {
  margin: 0;
  padding: 0;
  border: 1px solid @border-color-split;
  border-radius: 4px;
  background: #fff;
  height: @editor-height;
  overflow: hidden;
  position: relative;

  .preview,
  .editor {
    height: 100%;
  }

  .preview {
    padding: 24px 16px;
    overflow: auto;
    height: 100%;
    width: 100%;
  }

  .editor {
    overflow: hidden;
    height: 100%;

    .monaco {
      overflow: hidden;
      height: 100%;
    }
  }

  // 非常关键
  // 参考：https://codesandbox.io/s/mow7x4zyqx
  :global {
    .Pane1,
    .Pane2 {
      overflow: auto;
    }

    .Resizer.vertical {
      width: 11.5px !important;
    }
  }

  .exampleContainerWrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    > * {
      width: 100%;
      height: 100%;
    }
  }
}

@media (max-width: 768px) {
  .playground {
    height: 720px;
  }
}