markdownEditorInput.scss

TLDR

This file contains the styles for the MarkdownEditorInput component.

Classes

MarkdownEditorInput

This class contains the styles for the MarkdownEditorInput component. Inside this class, there are styles for the div with role=option, which has a flex display and aligns its items. There are also styles for the span element with data-testid='mentionText', which sets its background color, border radius, and text color.

DraftEditor-root

This class contains styles for the div element that follows the .DraftEditor-root class. It sets the background color, box shadow, border, and border radius. Inside this class, there are also styles for the nested div elements, which sets the height, padding, and background color when aria-selected='true', on hover, and when active. There is also a style for .Badge, which sets the margin left.

code-block

This class contains styles that reset the background color and border for the code block.

.MarkdownEditorInput {
    div[role=option] {
        display: flex;
        align-items: center;
    }

    span[data-testid='mentionText'] {
        background: rgba(var(--button-bg-rgb), 0.16);
        border-radius: 4px;
        color: inherit;
    }
}

.DraftEditor-root + div {
    background: rgba(var(--center-channel-bg-rgb), 1);
    box-shadow: var(--elevation-1);
    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
    border-radius: 4px;

    > div {
        > div {
            height: 40px;
            padding: 0 20px;

            &[aria-selected='true'] {
                background: rgba(var(--center-channel-color-rgb), 0.08);
            }

            &:hover {
                background: rgba(var(--center-channel-color-rgb), 0.08);
            }

            &:active {
                background: rgba(var(--button-bg-rgb), 0.08);
            }

            .Badge {
                margin-left: 12px;
            }
        }
    }

    .code-block {
        background-color: unset;
        border: 0;
    }
}