ejplatform/ej-server

/*
 CONFIG COLOR STYLES
 =============================================================================*/

$color-palette-radius: 150px;

.ColorStyles {
    display: flex;
    flex-wrap: wrap;

    > * {
        border: 1px solid black;
        box-sizing: border-box;
        margin: $spacing-unit-tiny;
        min-height: 120px;
        text-align: center;
        padding: 0;
        width: 120px;
        display: flex;
        flex-flow: column;
        align-items: stretch;
        align-content: stretch;
        justify-content: space-between;
    }

    div > span {
        display: block;
        width: 100%;
        flex-grow: 1;
    }

    // Roles
    .error {
        @include color('negative');
    }
    .warning {
        @include color('warning');
    }
    .action-default {
        @include color('primary');
    }
    .action-primary {
        @include color('primary');
    }
    .action-secondary {
        @include color('secondary');
    }

}

.ColorPalette {
    align-content: center;
    background: white;
    display: flex;
    flex-flow: column wrap;
    height: 1.5 * $color-palette-radius;
    justify-content: center;
    padding: ($color-palette-radius / 3) auto;
    text-align: center;

    > * {
        border-radius: 50%;
        box-sizing: border-box;
        height: $color-palette-radius;
        margin: -$color-palette-radius / 5;
        mix-blend-mode: multiply;
        min-width: $color-palette-radius;
        padding: 0;
    }
}

// Schema -- Common to styles and palette
.ColorStyles,
.ColorPalette {
    .primary {
        @include color('primary');
    }
    .accent {
        @include color('accent');
    }
    .alt {
        @include color($color-hint $color-hint-text);
    }
    .hint {
        @include color($color-hint $color-hint-text);
    }
    .content {
        @include color($color-content-text $color-content);
    }
}