Color Swatches¶

Styles for an color swatches used in h-color-swatches webcomponent.

Example¶

Here is an example of color swatches element usage.

HTML

<h-color-swatches class="color-swatches">
    <h-color-item color="#048A81" tabindex="0" role="button" aria-label="#048A81" class="color-item color-swatches__color-item" style="background-color: rgb(4, 138, 129);"></h-color-item>
    <h-color-item color="#8A89C0" tabindex="0" role="button" aria-label="#8A89C0" class="color-item color-swatches__color-item" style="background-color: rgb(138, 137, 192);"></h-color-item>
</h-color-swatches>

LESS¶

Color swatches variables¶

Variables used to style color swatches.

@colorSwatchesGap: 12px;
@colorSwatchesWidth: @colorSwatchesGap * 6 + @colorItemSize * 7;
@colorSwatchesNumberOfColumns: 7;
@colorSwatchesSWidth: @colorSwatchesGap * 6 + @colorItemSSize * 7;

Color swatches styles¶

Here are standard color swatches styles.

.color-swatches {
    width: @colorSwatchesWidth;

    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;

    gap: @colorSwatchesGap;

    &_s {
        width: @colorSwatchesSWidth;
    }

    h-color-swatches-show-more {
        grid-column-start: 1;
        grid-column-end: calc(@colorSwatchesNumberOfColumns + 1);
    }
}

Webcomponents reference¶

h-color-swatches