.customize-control-kirki-color-palette { position: relative; label { position: relative; display: inline-block; padding: 0; margin-right: -2px; margin-top: -1px; } .colors-wrapper { max-height: 300px; overflow-y: auto; padding: 10px; .color-palette-color { color: transparent; display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(0,0,0,.2); } &.round { .color-palette-color { border-radius: 50%; } } &.box-shadow { .color-palette-color { box-shadow: inset 3px 3px 13px 2px rgba(0,0,0,.22); } } input:checked + label .color-palette-color { border: 0; width: 150%; height: 150%; position: relative; left: -25%; top: -25%; z-index: 99; } &.with-margin { label { margin: 3px; } } input { display: none; &:checked { + label .color-palette-color { box-shadow: 1px 1px 10px 1px #333333; border: 1px solid rgba(0,0,0,.3); } } } } .kirki-controls-loading-spinner { position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; z-index: 999; text-align: center; background-color: #eee; > div { margin-top: 20px; width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both; animation: kirkibouncedelay 1.4s infinite ease-in-out both; } .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } } } @-webkit-keyframes kirkibouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1.0); } } @keyframes kirkibouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } }