/** * Customizer styles * */ .customize-control-sad-toggle label { display: flex; flex-wrap: wrap; } .customize-control-sad-toggle label .customize-control-title { width: calc(100% - 55px); } .customize-control-sad-toggle label .description { order: 99; } .customize-control-sad-toggle input[type=checkbox] { display: none; } .customize-control-sad-toggle .switch { border: 1px solid rgba(0, 0, 0, .1); display: inline-block; width: 35px; height: 12px; border-radius: 8px; background: #ccc; vertical-align: middle; position: relative; cursor: pointer; user-select: none; transition: background 350ms ease; } .customize-control-sad-toggle .switch:after, .customize-control-sad-toggle .switch:before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 50%; left: -3px; transition: all 350ms cubic-bezier(0, .95, .38, .98), background 150ms ease; } .customize-control-sad-toggle .switch:before { background: rgba(0, 0, 0, .2); transform: translate3d(0, -50%, 0) scale(0); } .customize-control-sad-toggle .switch:after { background: #999; border: 1px solid rgba(0, 0, 0, .1); transform: translate3d(0, -50%, 0); } .customize-control-sad-toggle .switch:active:before { transform: translate3d(0, -50%, 0) scale(3); } .customize-control-sad-toggle input:checked+.switch { background: rgba(52, 152, 222, .3); } .customize-control-sad-toggle input:checked+.switch:before { background: rgba(52, 152, 222, .075); transform: translate3d(100%, -50%, 0) scale(1); } .customize-control-sad-toggle input:checked+.switch:after { background: #3498de; transform: translate3d(100%, -50%, 0); } .customize-control-sad-toggle input:checked+.switch:active:before { background: rgba(52, 152, 222, .075); transform: translate3d(100%, -50%, 0) scale(3); } .customize-control-sad-radio-image>.image { display: flex; flex-wrap: wrap; } .customize-control-sad-radio-image label { position: relative; display: inline-block; } .customize-control-sad-radio-image label .image-label { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .7); font-weight: 700; } .customize-control-sad-radio-image label .image-label .inner { width: 100%; height: 100%; text-align: center; padding: .5em; vertical-align: middle; } .customize-control-sad-radio-image label:hover .image-label { display: block; } .customize-control-sad-radio-image input { display: none; } .customize-control-sad-radio-image input img { border: 1px solid transparent; } .customize-control-sad-radio-image input:checked+label img { -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25); box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25); border: 1px solid #3498db; } .customize-control-sad-radio-image input+label .image-clickable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input { display: none; } .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input img { border: 1px solid transparent; } .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input:checked+label img { -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25); box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25); border: 1px solid #3498db; } .customize-control-sad-radio-image input+label .image-clickable { margin: 0; border-radius: 0; border: none; background: 0 0; } .customize-control-sad-radio-image input+label .image-clickable, .customize-control-sad-radio-image input:checked+label img { box-sizing: border-box; max-width: 100%; height: auto; padding: 2px; border: 3px solid transparent; } .customize-control-sad-radio-image input+label .image-clickable:focus, .customize-control-sad-radio-image input+label .image-clickable:hover { border-color: #ddd; } .customize-control-sad-radio-image input:checked+label img { border-color: #00a0d2; display: block } .customize-control-sad-radio-image .image label { margin-right: 10px; } .customize-control-sad-radio-image input:checked+label img { box-shadow: none; } .customize-control-sad-radio-image>.image { display: block; } .sad-clearfix:after, .sad-clearfix:before { content: ""; display: table; } .sad-clearfix:after { clear: both; } .sad-repeater-field-control { background: #fff; margin-bottom: 12px; display: block; } .sad-repeater-footer { margin-top: 15px; text-align: right; } .sad-repeater-field-control:first-child .sad-repeater-footer { display: none; } .sad-repeater-field-title { padding: 13px 15px; line-height: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; font-size: 1em; border: 1px solid #e5e5e5; cursor: move; position: relative; border-bottom: 0; } .sad-repeater-field-title:after { content: "\f142"; font: 400 20px/1 dashicons; position: absolute; right: 0; top: 0; padding: 1px 2px 1px 0; margin-top: 10px; margin-right: 10px; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; } .sad-repeater-field-control.expanded .sad-repeater-field-title:after { content: "\f140" } .sad-repeater-fields { padding: 0 10px 10px; border-top: none; line-height: 16px; border: 1px solid #e5e5e5; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); display: none; } .sad-repeater-fields .customize-control-title { margin-top: 10px } .sad-repeater-field-control.expanded .sad-repeater-fields { display: block; } .sad-reapeater-add-control-field { float: right; } .sad-reapeater-add-add-control-field:before { content: "\f132"; display: inline-block; position: relative; left: -2px; top: -1px; font: 400 18px/1 dashicons; vertical-align: middle; } .sad-repeater-type-icon { overflow: hidden; } .sad-repeater-selected-icon { background: #f6f6f6; height: 45px; line-height: 45px; text-align: center; border: 1px solid #eee; position: relative; margin-right: 45px; cursor: pointer; font-size: 28px; } .sad-repeater-selected-icon span { position: absolute; background: #f6f6f6; right: -45px; top: -1px; height: 45px; width: 45px; border: 1px solid #eee; font-size: 20px; } .sad-repeater-selected-icon i { margin-top: 3%; } .sad-repeater-selected-icon span i { margin-top: 24%; } .sad-repeater-icon-list { height: 215px; overflow-y: scroll; font-size: 18px; border: 1px solid #eee; border-right: 0; border-top: 0; padding-bottom: 4%; display: none; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .sad-repeater-icon-list li { float: left; margin: 4% 3% 0; height: 40px; width: 16%; text-align: center; line-height: 40px; border: 1px solid #eee; } .sad-repeater-icon-list li:hover { background: #333; border: 1px solid #333; color: #fff; } .sad-repeater-icon-list li.icon-active { background: #0073aa; border: 1px solid #0073aa; color: #fff; } .customize-control-sad-repeater .sad-limit-msg { display: none; } .customize-control-sad-repeater span.sad-limit-msg:nth-of-type(2) { display: block; background: #fff; padding: 10px 15px; margin: 10px 0 10px; border-left: 3px solid #ffb900; } .customize-control textarea { width: 100%; }