WP color picker

by PhilQ

HTML

<div class="components-color-palette editor-color-palette-control__color-palette"><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Bleek roze" aria-pressed="false" style="color: rgb(247, 141, 167);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Levendig rood" aria-pressed="false" style="color: rgb(207, 46, 46);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Lichtgevend levendig oranje" aria-pressed="false" style="color: rgb(255, 105, 0);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Lichtgevend levendig amber" aria-pressed="false" style="color: rgb(252, 185, 0);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Licht groen cyaan" aria-pressed="false" style="color: rgb(123, 220, 181);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Levendig groen cyaan" aria-pressed="false" style="color: rgb(0, 208, 132);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Bleek cyaan blauw" aria-pressed="false" style="color: rgb(142, 209, 252);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur: Levendig cyaan blauw" aria-pressed="false" style="color: rgb(6, 147, 227);"></button></div><div class="components-color-palette__item-wrapper"><button type="button" class="components-color-palette__item" aria-label="Kleur:...

SCSS

*, *::before, *::after { box-sizing: border-box; }

.components-color-palette__item-wrapper {
    display: inline-block;
    height: 28px;
    width: 28px;
    margin-right: 14px;
    margin-bottom: 14px;
    vertical-align: top;
    transform: scale(1);
    transition: .1s transform ease;
    
    &:focus, &:hover {
        transform: scale(1.2);
    }
}

.components-color-palette__item {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 50%;
    background: 0 0;
    box-shadow: inset 0 0 0 14px;
    transition: .1s box-shadow ease;
    cursor: pointer;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    }

    &.is-active {
        box-shadow: inset 0 0 0 4px;
    }
}

.components-color-palette__custom-color {
    
    .components-color-palette__item {
        position: relative;
        box-shadow: none;
    }
    
    .components-color-palette__custom-color-gradient {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        overflow: hidden;
        
        &::before {
            content: "";
            //-webkit-filter: blur(6px) saturate(.7) brightness(1.1);
            filter: blur(6px) saturate(.7) brightness(1.1);
            display: block;
            width: 200%;
            height: 200%;
            position: absolute;
            top: -50%;
            left: -50%;
            padding-top: 100%;
            transform: scale(1);
            background-image: linear-gradient(330deg,transparent 50%,#ff8100 50%),linear-gradient(300deg,transparent 50%,#ff5800 50%),linear-gradient(270deg,transparent 50%,#c92323 50%),linear-gradient(240deg,transparent 50%,#cc42a2 50%),linear-gradient(210deg,transparent...