drone/web/src/components/MarkdownEditorWithPreview/MarkdownEditorWithPreview.module.scss

@import 'src/utils/utils';

.main {
  --color-border: var(--grey-200);
  --box-radius: 5px;

  background-color: var(--grey-50);
  border-bottom-left-radius: var(--box-radius);
  border-bottom-right-radius: var(--box-radius);
  position: relative;

  &:focus-within {
    --color-border: var(--primary-7);
  }

  &.withPreview {
    --color-border: var(--grey-200);
  }

  > div:first-child {
    padding-top: 0 !important;
  }

  .tabs {
    :global {
      .bp3-tab-list {
        border: none;
        background-color: transparent !important;
        position: absolute;
        top: -4px;
        left: 0px;
        z-index: 2;
        padding: 0;

        .bp3-tab {
          margin: 0 !important;
          padding: 6px 10px !important;
          border-bottom: 1px solid transparent !important;

          &[aria-selected='true'] {
            background-color: var(--white) !important;
            border-top: 1px solid var(--color-border);
            border-left: 1px solid var(--color-border);
            border-right: 1px solid var(--color-border);
            border-top-left-radius: var(--box-radius);
            border-top-right-radius: var(--box-radius);
          }

          &:not([aria-selected='true']) {
            border-bottom: 1px solid transparent !important;
          }
        }

        .bp3-tab-indicator-wrapper {
          display: none;
        }
      }

      .bp3-tab {
        font-size: var(--font-size-normal);
        line-height: 19px;
        color: var(--grey-700);
      }

      .bp3-tab[aria-selected='true'] {
        color: var(--grey-900);
        font-weight: 600;
      }

      .bp3-tab[aria-disabled='true'] {
        opacity: 50%;
        cursor: not-allowed;
      }

      .bp3-tab-panel {
        margin-top: 0;
      }
    }
  }

  .preview {
    background-color: var(--white);
    margin-top: 28px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--box-radius);
    max-height: 400px;
    overflow: auto;

    :global {
      .wmde-markdown {
        .anchor {
          display: none;
        }

        pre {
          position: relative;
        }
      }
    }
  }

  .markdownEditor {
    :global {
      // .cm-editor .cm-line {
      //   &,
      //   * {
      //     @include mono-font;
      //   }
      // }

      .md-editor {
        background-color: transparent !important;
        box-shadow: none !important;

        .md-editor-content {
          border: 1px solid var(--color-border) !important;
          border-bottom-left-radius: var(--box-radius);
          border-bottom-right-radius: var(--box-radius);
          border-top-right-radius: var(--box-radius);
        }
      }

      .md-editor-toolbar-warp,
      .md-editor-toolbar-warp:not(.md-editor-toolbar-bottom) {
        border-bottom: none !important;
      }

      .md-editor-preview {
        display: none;
      }

      .md-editor-toolbar {
        margin-left: auto;
        margin-right: 0;
        position: relative;
      }

      .md-editor-content {
        padding: var(--spacing-small);
        background-color: var(--white);
        height: var(--editor-height, auto);
        min-height: var(--editor-height, auto);
        max-height: var(--max-editor-height, var(--editor-height, auto));

        .ͼ1.cm-editor.cm-focused {
          outline: none !important;
        }
      }

      .cm-content {
        min-height: 46px;
      }
    }
  }
}

.container {
  --tab-border-primary: rgba(176, 177, 195, 0.5);
  --radius: 5px;

  box-shadow: var(--elevation-2);
  border-radius: var(--radius);
  border: 1px solid var(--tab-border-primary);
  border-bottom: none;
  background-color: var(--white);

  &.noBorder {
    border: none;
    box-shadow: none;
  }

  position: relative;

  .tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: var(--grey-100);
    padding: 15px 15px 0;
    background: var(--grey-50) !important;
    border-bottom: 1px solid var(--tab-border-primary);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);

    li {
      a {
        padding: 6px 15px;
        display: block;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 18px;
        text-decoration: none;
        color: var(--grey-900);

        position: relative;
        border: 1px solid transparent;
        border-bottom: none;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);

        &::after {
          content: '';
          right: 0;
          left: 0;
          bottom: -1px;
          height: 1px;
          width: 100%;
          position: absolute;
          background-color: transparent;
        }

        &[aria-selected='true'] {
          background-color: var(--white);
          border-color: var(--tab-border-primary);

          &::after {
            background-color: var(--white);
          }
        }
      }
    }
  }

  .toolbar {
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .tabContent {
    padding: var(--spacing-large);
    background-color: var(--white);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }

  .buttonsBar {
    padding: 0 var(--spacing-large) var(--spacing-large);
    background-color: var(--white);
    border-radius: var(--radius);
  }

  .hidden {
    display: none;
  }
}