.customize-control-abiz-sortable ul.ui-sortable li { padding: 5px 10px; border: 1px solid #333; background: #fff; } .customize-control-abiz-sortable ul.ui-sortable li .dashicons.dashicons-menu { float: right; } .customize-control-abiz-sortable ul.ui-sortable li .dashicons.visibility { margin-right: 10px; } .customize-control-abiz-sortable ul.ui-sortable li.invisible { color: #aaa; border: 1px dashed #aaa; } .customize-control-abiz-sortable ul.ui-sortable li.invisible .dashicons.visibility { color: #aaa; } .customize-control-hidden { display: block; padding: 13px 12px; color:#fff; font-weight: 600; letter-spacing: 1px; line-height: 1; margin: 0 -12px; margin-bottom: 12px; border-width: 1px 0; border-style: solid; border-color: #dddddd; background-color: #13a1dc; } .customize-control-hidden label { margin-bottom: 0; line-height: 1; font-size: 15px; cursor: default; } /* Control: Switch. */ .customize-control-abiz-toggle { position: relative; } .customize-control-abiz-toggle label { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .customize-control-abiz-toggle label .customize-control-title { width: calc(100% - 55px); } .customize-control-abiz-toggle label .description { -webkit-box-ordinal-group: 100; -ms-flex-order: 99; order: 99; } .customize-control-abiz-toggle .switch { border: 1px solid #b4b9be; display: inline-block; width: 35px; height: 12px; border-radius: 8px; background: #b4b9be; vertical-align: middle; position: relative; top: 4px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background 350ms ease; transition: background 350ms ease; } .customize-control-abiz-toggle .switch::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 50%; left: -3px; -webkit-transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; background: #999; border: 1px solid rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .customize-control-abiz-toggle .switch::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 50%; left: -3px; -webkit-transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; background: rgba(0, 0, 0, 0.2); -webkit-transform: translate3d(0, -50%, 0) scale(0); transform: translate3d(0, -50%, 0) scale(0); } .customize-control-abiz-toggle .switch:active::before { -webkit-transform: translate3d(0, -50%, 0) scale(3); transform: translate3d(0, -50%, 0) scale(3); } .customize-control-abiz-toggle input:checked + .switch::before { background: rgba(0, 115, 170, 0.075); -webkit-transform: translate3d(100%, -50%, 0) scale(1); transform: translate3d(100%, -50%, 0) scale(1); } .customize-control-abiz-toggle input:checked + .switch::after { background: #13a1dc; -webkit-transform: translate3d(100%, -50%, 0); transform: translate3d(100%, -50%, 0); } .customize-control-abiz-toggle input:checked + .switch:active::before { background: rgba(0, 115, 170, 0.075); -webkit-transform: translate3d(100%, -50%, 0) scale(3); transform: translate3d(100%, -50%, 0) scale(3); } .customize-control-abiz-toggle input[type=checkbox] { display: none; }