.customize-control-kirki-number { position: relative; .ui-spinner.ui-widget-content { position: relative; .ui-spinner-button { position: absolute; right: 0; color: rgba(0,0,0,.3); border: none; padding: 0 5px; width: 20px; height: calc(50% + 0.5em); // font-size: 19px; border-radius: 0; -webkit-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; background: transparent; background: none; margin: 0; .ui-button-text { display: none; } &.ui-spinner-down, &.ui-spinner-up { &:before { font-family: dashicons; position: absolute; left: 0; } } &.ui-spinner-up { top: -50%; &:before { content: "\f343"; } } &.ui-spinner-down { top: 50%; &:before { content: "\f347"; } } &:hover { color: rgba(0,0,0,.7); } } } .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); } }