blockContent.scss

TLDR

This file defines the styles for a block content component.

Classes

BlockContent

The BlockContent class defines the styles for a block content component. It sets the display property to flex and defines styles for different states and actions of the block content component.

The class has the following nested elements:

• .over-up: Applies a solid top border to the block content component with a semi-transparent color.
• .over-down: Applies a solid bottom border to the block content component with a semi-transparent color.
• :hover: Applies styles to the block content component when it is being hovered. It sets the opacity property of the .action class to 1, and the opacity property of the .AddIcon class to 0.5.
• .action: Defines styles for action elements within the block content component. It sets the transition property to opacity 0.3s, the opacity property to 0, and adds a margin of 5px.
• .content: Styles the content element of the block content component, allowing it to grow flexibly within the component.

.BlockContent {
    display: flex;

    &.over-up {
        border-top: 1px solid rgba(128, 192, 255, 0.4);
    }

    &.over-down {
        border-bottom: 1px solid rgba(128, 192, 255, 0.4);
    }

    &:hover {
        .action {
            opacity: 1;

            .AddIcon {
                opacity: 0.5;
            }
        }
    }

    .action {
        transition: opacity 0.3s;
        opacity: 0;
        margin: 5px;
    }

    .content {
        flex-grow: 1;
    }
}