Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
.customize-control-layout .selection .layout {
display: inline-block;
width: 50px;
height: 50px;
padding: 5px;
box-sizing: border-box;
opacity: 0.4;
.customize-control-layout .selection .layout.selected {
opacity: 1;
.customize-control-layout .selection .layout .icon {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
cursor: pointer;
text-indent: -9999px;
background-position: 0 0;
background-repeat: no-repeat;
.customize-control-layout .selection .layout[data-value="disabled"] .icon:after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(../img/disabled.png) center center no-repeat;
.customize-control-layout .selection .layout[data-value="none"] .icon, .customize-control-layout .selection .layout[data-value="disabled"] .icon {
background-image: url(../img/none.png);
.customize-control-layout .selection .layout[data-value="left"] .icon {
background-image: url(../img/left.png);
.customize-control-layout .selection .layout[data-value="right"] .icon {
background-image: url(../img/right.png);
.customize-control-layout .selection .layout.selected .icon {
cursor: not-allowed;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.