Color Item

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

Structurally .color-item contains following elements:

• .color-item_s
• .color-item_xs

Example

Here is an example of color item element usage.

HTML

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

LESS

Color item variables

Variables used to style color item.

@colorItemSize: 40px;
@colorItemBorder: 1px solid @neutralColors300;
@colorItemSelectedBorder: 2px solid @primaryColor;
@colorItemSelectedDisabledBorderColor: @primaryColors200;
@colorItemDisabledBorderColor: @neutralColors300;
@colorItemDisabledLineWidth: 2px;
@colorItemSelectedIconUrl: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@colorItemSelectedDisabledIconUrl: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3L3 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 3L9 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@colorItemSelectedIconTopPostion: -2px;
@colorItemSelectedIconRightPostion: -4px;
@colorItemSelectedIconWrapperSize: 16px;
@colorItemSelectedIconWrapperColor: @primaryColor;
@colorItemXsSize: 20px;
@colorItemSSize: 32px;

Color item styles

Here are standard color item styles.

.color-item {
    display: block;
    width: @colorItemSize;
    height: @colorItemSize;
    border: @colorItemBorder;
    border-radius: 100%;
    cursor: pointer;

    &_s {
        width: @colorItemSSize;
        height: @colorItemSSize;
    }

    &_xs {
        width: @colorItemXsSize;
        height: @colorItemXsSize;
    }

    &[selected] {
        position: relative;
        border: @colorItemSelectedBorder;

        &::before {
            content: '';
            display: block;
            position: absolute;
            top: @colorItemSelectedIconTopPostion;
            right: @colorItemSelectedIconRightPostion;
            width: @colorItemSelectedIconWrapperSize;
            height: @colorItemSelectedIconWrapperSize;
            background-color: @colorItemSelectedIconWrapperColor;
            background-image: @colorItemSelectedIconUrl;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 100%;
            z-index: 1;
        }
    }

    &[disabled] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: @colorItemDisabledBorderColor;

        &::after {
            content: '';
            width: @colorItemDisabledLineWidth;
            height: 100%;
            background-color: @colorItemDisabledBorderColor;
            .rotate(45deg);
        }
    }

    &[disabled][selected] {
        border-color: @colorItemSelectedDisabledBorderColor;

        &::before {
            background-image: @colorItemSelectedDisabledIconUrl;
        }

        &::after {
            background-color: @colorItemSelectedDisabledBorderColor;
        }
    }

    &[unclickable] {
        cursor: not-allowed;
    }
}

Webcomponents reference

• h-color-item