markdownEditor.scss

TLDR

The provided file, markdownEditor.scss, contains the styling code for a Markdown editor component.

Classes

product-wrapper

This class is responsible for styling the preview section of the Markdown editor. It sets the color of the links to a variable --link-color-rgb.

MarkdownEditor

This class is the main styling for the Markdown editor component. It sets the cursor to text and defines the styles for the input area and preview area within the editor.

Methods

/* Markdown Editor */

.product-wrapper {
    .octo-editor-preview {
        a {
            color: rgba(var(--link-color-rgb), 1);
        }
    }
}

.MarkdownEditor {
    cursor: text;

    .MarkdownEditorInput * {
        user-select: text;
    }

    .octo-editor-preview * {
        user-select: text;
    }

    .octo-editor-preview {
        min-height: 2em;

        a {
            &:hover {
                text-decoration: underline;
            }
        }

        p {
            margin: 0;
            word-break: break-word;
        }
    }

    .octo-editor-activeEditor {
        overflow: hidden;
        border-radius: 5px;
    }
}