.ct-layers { list-style: none; margin: 0; padding: 0; } .ct-layer { list-style: none; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); z-index: 9999999; &:not(:last-child) { margin-bottom: 10px; } &.ct-disabled { opacity: 0.6; .ct-layer-controls { .ct-visibility:before { opacity: 1; } } } } .ct-layer-controls { display: flex; height: 40px; border: 1px solid #ddd; user-select: none; button { display: flex; align-items: center; justify-content: center; width: 40px; height: inherit; border: none; background: transparent; box-shadow: none; padding: 0; cursor: pointer; color: #72777c; svg { fill: currentColor; } &.ct-toggle, &.ct-remove { font: 400 16px dashicons; -webkit-font-smoothing: antialiased; } &.ct-toggle:before { content: '\f140'; } &.ct-remove { &:before { content: '\f335'; } &:hover { &:before { color: #dd4b39; } } } &.ct-visibility { position: relative; &:before { opacity: 0; position: absolute; content: ''; width: 18px; height: 2px; background: #656565; border-radius: 5px; transform: rotate(-45deg); box-shadow: 0px 0px 0px 1px #fff; transition: opacity 0.1s ease; } &:hover { &:before { opacity: 1; } } } &:focus { outline: none; } } span { display: flex; align-items: center; flex: 1 1 auto; font-size: 12px; font-weight: 600; padding: 0 15px; cursor: move; } > * { &:not(:last-child) { border-right: 1px solid #e5e5e5; } } } .ct-layer-content { display: flex; flex-direction: column; border: 1px solid #ddd; border-top: none; padding-bottom: 20px; > * { padding-left: 20px !important; padding-right: 20px !important; &:not(:last-child) { padding-bottom: 20px; border-bottom: 1px solid #ddd; } } } // add layer .ct-add-layer-controls { display: flex; margin-bottom: 10px; .ct-select-input { max-width: 100%; } button { padding: 0 8px 1px 8px !important; margin-left: 10px !important; } }