toggle-corp/react-store

View on GitHub
stylesheets/_visualizations.scss

Summary

Maintainability
Test Coverage
%viz-content {
    display: flex;
    flex-direction: column;

    .header {
        display: flex;
        align-items: flex-end;
        flex-shrink: 0;
        justify-content: space-between;
        border-bottom: var(--width-separator-thin) solid var(--color-separator);
        background-color: var(--color-background-header);
        padding: var(--spacing-small) var(--spacing-medium-alt);

        .left-content {
            align-self: center;

            .heading {
                margin: 0;
                margin-right: var(--spacing-medium);
                text-transform: uppercase;
                font-size: var(--font-size-large);
            }
        }

        .right-content {
            display: flex;
            align-items: center;

            .select-input {
                margin-right: var(--spacing-extra-small);
            }

            button {
                margin-left: var(--spacing-extra-small);
                padding: 0 var(--spacing-small);
                font-size: var(--font-size-large);
            }
        }
    }

    .viz-container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: var(--spacing-large);
    }
}