/* Radio Image */ .customize-control-radio-image .ui-button { margin: 0; border-radius: 0; border: none; background: transparent; } .customize-control-radio-image .ui-button-text { padding: 0; } .customize-control-radio-image img { box-sizing: border-box; max-width: 100%; height: auto; padding: 1px; border: 4px solid transparent; } .customize-control-radio-image img:hover, .customize-control-radio-image img:focus { border-color: #ddd; } .customize-control-radio-image .ui-state-active img { border-color: #00a0d2; } /* Checkbox */ .customize-control .customize-inside-control-row { margin-left: 0; } .customize-inside-control-row input[type="checkbox"] + label, .customize-inside-control-row input[type="radio"] + label { position: relative; } .customize-inside-control-row input[type="checkbox"] + label { padding-left: 45px; } .customize-inside-control-row input[type="radio"] + label { padding-left: 28px; } .customize-inside-control-row input[type="checkbox"], .customize-inside-control-row input[type="radio"] { display:none; } .customize-inside-control-row input[type="checkbox"] + label:before, .customize-inside-control-row input[type="checkbox"] + label:after, .customize-inside-control-row input[type="radio"] + label:before, .customize-inside-control-row input[type="radio"] + label:after { content: ''; position: absolute; top: 50%; box-sizing: border-box; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .customize-inside-control-row input[type="checkbox"] + label:before { width: 36px; height: 15px; left: 0px; background: #9B9B9B; border: 1px solid #e4e3e1; border-radius: 15px; } .customize-inside-control-row input[type="checkbox"] + label:after { width: 20px; height: 20px; left: 0; background: #fff; border-radius: 50%; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; transition: all 200ms ease-out; } .customize-inside-control-row input[type="checkbox"]:checked + label:before { background: #a6cef1; } .customize-inside-control-row input[type="checkbox"]:checked + label:after { left: 16px; background: #0085BA; } .customize-inside-control-row input[type="radio"] + label:before { width: 20px; height: 20px; left: 0px; background: transparent; border: 1px solid #9B9B9B; border-radius: 100%; } .customize-inside-control-row input[type="radio"]:checked + label:after { background: #0085BA; border-radius: 100%; width: 12px; height: 12px; left: 4px; }