contentBlock.scss

TLDR

The contentBlock.scss file contains SCSS code for styling the ContentBlock component in the Demo Projects project.

Classes

ContentBlock

The ContentBlock class is used to style the ContentBlock component in the Demo Projects project. It includes styles for fixing Chrome drag and drop preview, hiding the MenuWrapper and dnd-handle elements, and handling hover and menuOpened states. It also includes styles for the child elements, setting flex properties, and styling the ImageElement component.

rowContents

The rowContents class is used to style a row of contents in the ContentBlock component. It sets the display property to flex and the width property to 100%.

addToRow

The addToRow class is used to style an element that is added to a row in the ContentBlock component. It sets the width property to 10px.

@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;
}