/** * Sortable control CSS. */ .customize-control-blogdata-sortable ul.ui-sortable { cursor: default; } .customize-control-blogdata-sortable ul.ui-sortable .dashicons-visibility { cursor: pointer; } .customize-control-blogdata-sortable ul.ui-sortable li { border: 1px solid #EBEBEB; background: #ffffff; cursor: move; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .customize-control-blogdata-sortable ul.ui-sortable li .blogdata-choice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .customize-control-blogdata-sortable ul.ui-sortable li .blogdata-choice .blogdata-label { padding: 6px; } .customize-control-blogdata-sortable ul.ui-sortable li .blogdata-choice .dashicons-menu { padding: 8px; border-right: 1px solid #EBEBEB; } .customize-control-blogdata-sortable ul.ui-sortable li .dashicons { width: 18px; height: 16px; font-size: 16px; } .customize-control-blogdata-sortable ul.ui-sortable li .dashicons.visibility { margin-right: 10px; } .customize-control-blogdata-sortable ul.ui-sortable li.invisible { color: #aaaaaa; border: 1px dashed #EBEBEB; } .customize-control-blogdata-sortable ul.ui-sortable li.invisible .dashicons-menu { padding: 8px; border-right: 1px dashed #EBEBEB; } .customize-control-blogdata-sortable ul.ui-sortable li.invisible .dashicons.visibility { color: #aaaaaa; } .customize-control-blogdata-sortable ul.unsortable .dashicons-visibility { cursor: pointer; } .customize-control-blogdata-sortable ul.unsortable li { border: 1px solid #EBEBEB; background: #ffffff; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: #444444; } .customize-control-blogdata-sortable ul.unsortable li .blogdata-label { padding: 6px 6px 6px 6px; line-height: 1.5; font-size: 13px; } .customize-control-blogdata-sortable ul.unsortable li .dashicons.dashicons-menu { float: right; } .customize-control-blogdata-sortable ul.unsortable li .dashicons.visibility { margin-right: 10px; } .customize-control-blogdata-sortable ul.unsortable li.invisible { color: #aaaaaa; border: 1px dashed #EBEBEB; } .customize-control-blogdata-sortable ul.unsortable li.invisible .dashicons.visibility { color: #aaaaaa; } .customize-control-blogdata-sortable .invisible label { border-left: 1px dashed #EBEBEB; } .customize-control-blogdata-sortable label { position: relative; display: inline-block; width: 38px; height: 32px; right: 0; border-left: 1px solid #EBEBEB; top: 0; } .customize-control-blogdata-sortable label.toggle-description { right: 20px; } .customize-control-blogdata-sortable label input { display: none; } .customize-control-blogdata-sortable label input:checked + .switch:before { background: #ffffff; border-color: #ffffff; left: -4px; -webkit-transform: translateX(20px); transform: translateX(20px); } .customize-control-blogdata-sortable label input:checked + .switch { background-color: #0377B5; border-color: #0377B5; } .customize-control-blogdata-sortable label .switch { position: absolute; cursor: pointer; top: 9px; left: 5px; right: 0; bottom: 0; height: 14px; width: 28px; background: #aeaeae; border-radius: 100px; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; } .customize-control-blogdata-sortable label .switch:hover { background: #ebebeb; } .customize-control-blogdata-sortable label .switch:before { position: absolute; content: ''; height: 10px; width: 10px; left: 2px; bottom: 2px; background: #ffffff; border-radius: 100%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; } .customize-control-blogdata-sortable li { position: relative; } .customize-control-blogdata-sortable li .switch-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px; border-left: 1px dashed #ebebeb; } .customize-control-blogdata-sortable li:not(.invisible) .switch-wrap { border-left: 1px solid #ebebeb; } .customize-control-blogdata-sortable li:not(.invisible) .switch-wrap > .switch { background-color: #4296f4; border-color: #0377B5; } .customize-control-blogdata-sortable li:not(.invisible) .switch-wrap > .switch:before { background: #ffffff; border-color: #ffffff; left: -4px; -webkit-transform: translateX(20px); transform: translateX(20px); } .customize-control-blogdata-sortable li .switch { position: relative; cursor: pointer; top: 3px; left: 0; right: 0; bottom: 0; height: 16px; width: 30px; background: #aeaeae; border-radius: 100px; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; } .customize-control-blogdata-sortable li .switch:before { position: absolute; content: ''; height: 12px; width: 12px; left: 2px; bottom: 2px; background: #ffffff; border-radius: 100%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }