Skip to content

Color Swatches Control

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

Structurally .color-swatches-control contains following elements:

  • .color-swatches-control_error

Example

Here is an example of color swatches control 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 control variables

Variables used to style color swatches control.

@colorSwatchesControlBorderRadiusPadding: 4;
@colorSwatchesControlBorderError: 2px solid @errorColors500;
@colorSwatchesControlBorderRadius: 2px;

Color swatches control styles

Here are standard color swatches control styles.

.color-swatches-control {
    display: inline-block;

    &_error {
        .pixel-to-rem(padding, @colorSwatchesControlBorderRadiusPadding);
        border: @colorSwatchesControlBorderError;
        border-radius: @colorSwatchesControlBorderRadius;
    }
}

Webcomponents reference