.customize-control-kirki-palette { position: relative; input[type="radio"] { display: none; &:checked { + label { border: 3px solid rgba(0,0,0,.4); } } } label { background: none; padding: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-bottom: 5px; display: flex; span { padding: 10px 0; flex-grow: 1; font-size: 0; line-height: 10px; color: rgba(0,0,0,0); -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; border-top: 1px solid rgba(0,0,0,.1); border-bottom: 1px solid rgba(0,0,0,.1); &:first-child { border-left: 1px solid rgba(0,0,0,.1); } &:last-child { border-right: 1px solid rgba(0,0,0,.1); } &:hover { padding: 10px; flex-grow: 3; min-width: 60px; font-size: 10px; line-height: 10px; color: #000; } } } .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); } }