contentBlock.scss

TLDR

The contentBlock.scss file is a Sass file that contains styles for the ContentBlock component.

Classes

ContentBlock

The ContentBlock class is responsible for styling the ContentBlock component. It includes styles for fix Chrome drag and drop preview, hiding the MenuWrapper and dnd-handle elements, and displaying the MenuWrapper and dnd-handle elements when hovering or when the menu is opened. It also applies styles to the child elements within the ContentBlock component, such as setting flex properties and max-width. Lastly, it includes specific styles for the ImageElement class.

rowContents

The rowContents class is responsible for styling a container that displays its contents in a flex layout. It sets the width to 100%.

addToRow

The addToRow class is responsible for styling a container with a width of 10 pixels.

@import '../styles/z-index';

.ContentBlock {
    // HACK: Fixes Chrome drag and drop preview
    transform: translate3d(0, 0, 0);

    .MenuWrapper,
    .dnd-handle {
        display: none;
    }

    &:hover,
    &.menuOpened {
        @include z-index(menu);

        .MenuWrapper {
            display: flex;
        }

        .dnd-handle {
            display: flex;
            opacity: 0.8;
            height: 18px;
        }
    }

    > * {
        flex: 1 1 auto;
        max-width: 100%;
        min-height: 32px;
    }

    > .octo-block-margin {
        flex: 0 0 auto;
    }

    .ImageElement {
        pointer-events: none;
        width: 100%;
    }
}

.rowContents {
    display: flex;
    width: 100%;
}

.addToRow {
    width: 10px;
}