@blinkk/selective-edit
Version:
Selective structured text editor.
2 lines (1 loc) • 7.5 kB
CSS
.selective *{box-sizing:border-box}.selective__sortable--hover *{pointer-events:none}.selective__field{margin:.5em 0 1em 0}.selective__field .material-icons{font-size:18px}.selective__field:last-child{margin-bottom:0}.selective__field__label{display:flex;flex-flow:row;margin:.5em 0}.selective__field__label label{display:block}.selective__field__input{margin:.5em 0}.selective__field__actions__wrapper{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.selective__field__actions{align-items:center;display:flex;flex-flow:row}.selective__field__help{color:#648391;font-size:9.6px;margin:.5em 0}[draggable=true].selective__sortable--hover *{pointer-events:none}[draggable=true].selective__sortable--above{border-top:1px solid #48a0f4}[draggable=true].selective__sortable--below{border-bottom:1px solid #48a0f4}.selective__field input{border:1px solid transparent;border-radius:3px;background:rgba(229,229,229,.5);color:#455a64;padding:.5em;width:100%;font-family:"Roboto Mono",monospace;transition:all 150ms ease-in-out}.selective__field input:focus{border:1px solid #48a0f4;outline:none}.selective__field input:hover{border:1px solid rgba(0,0,0,.3)}.selective__field input:hover:focus{border:1px solid #48a0f4}.selective__field input[type=color]{padding:0}.selective__field textarea{border:1px solid transparent;border-radius:3px;background:rgba(229,229,229,.5);color:#455a64;padding:.5em;width:100%;font-family:"Roboto Mono",monospace;transition:all 400ms ease-in-out}.selective__field textarea:focus{border:1px solid #48a0f4;outline:none}.selective__field textarea:hover{border:1px solid rgba(0,0,0,.3)}.selective__field textarea:hover:focus{border:1px solid #48a0f4}.selective__field [contenteditable=true]{border:1px solid transparent;border-radius:3px;background:rgba(229,229,229,.5);color:#455a64;padding:.5em;width:100%}.selective__field [contenteditable=true]:focus{border:1px solid #48a0f4;outline:none}.selective__field [contenteditable=true]:hover{border:1px solid rgba(0,0,0,.3)}.selective__field [contenteditable=true]:hover:focus{border:1px solid #48a0f4}.selective__field button{background:#fff;border-radius:6px;color:#455a64;border:1px solid #e5e5e5;font-family:Roboto;font-size:12px;padding:.5em 1em}.selective__field button[disabled]{opacity:.5}.selective__field button:focus{outline:none;box-shadow:0px 0px 0px 2px rgba(126,126,126,.15)}.selective__field button:hover{box-shadow:0px 0px 0px 2px rgba(126,126,126,.15)}.selective__field button.selective__button--primary{background:#48a0f4;border-color:#48a0f4;color:#fff;font-weight:bold}.selective__field button.selective__button--primary:focus{outline:none;box-shadow:0px 0px 0px 2px rgba(66,133,244,.15)}.selective__field button.selective__button--primary:hover{box-shadow:0px 0px 0px 2px rgba(66,133,244,.15)}.selective__field button.selective__button--secondary{background:none;border:none;color:gray;font-weight:bold}.selective__field button.selective__button--secondary.selective__button--selected{color:#000}.selective__field button.selective__button--secondary:hover{color:#000}.selective__field button.selective__button--secondary:focus{box-shadow:none}.selective__options{display:grid;grid-template-columns:1fr;column-gap:.5em;row-gap:.5em}.selective__options--few{grid-template-columns:1fr 1fr}.selective__options--many{grid-template-columns:1fr 1fr 1fr}.selective__options__option{align-items:center;cursor:pointer;display:flex;flex-flow:row}.selective__swatch{background-repeat:no-repeat;border:1px solid rgba(0,0,0,.6);border-radius:50%;margin-right:.5em;height:1em;width:1em}.selective__options--multi .selective__swatch{border-radius:3px}.selective__options--swatches .selective__swatch{margin-right:0}.selective__options__option--low_contrast .selective__swatch{border-color:rgba(0,0,0,.6)}.selective__options__option--multiple .selective__swatch{border-color:rgba(0,0,0,.3)}.selective__field__type__checkbox .selective__options__option .material-icons{margin-right:.5em}.selective__field__type__checkboxMulti .selective__options__option .material-icons{margin-right:.5em}.selective__field__type__group>.selective__field__header{display:flex;cursor:pointer;flex-flow:row;justify-content:space-between}.selective__field__type__group>.selective__field__header>.selective__field__label{flex-grow:1}.selective__field__type__group>.selective__field__header>.selective__field__label label{cursor:pointer}.selective__field__type__group>.selective__field__input__structure>.selective__field__preview{border-left:1px solid rgba(0,0,0,.3);color:#648391;font-size:9.6px;padding:1em 0 1em 1em}.selective__field__type__group--expanded>.selective__field__input__structure>.selective__fields{border-left:1px solid rgba(0,0,0,.6);padding:.5em 0 .5em 1em}.selective__field__type__list>.selective__field__header{display:flex;flex-flow:row-reverse;justify-content:space-between}.selective__field__type__list>.selective__field__header>.selective__field__label{flex-grow:1}.editor--highlight .selective__list--auto .selective__list__item{background-color:#e1fc8d }.selective__list__item{background:rgba(229,229,229,.5);border:1px solid transparent;border-radius:3px;color:#455a64;margin:.5em 0;padding:1em}.selective__list__item:hover{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.selective__list__item--empty{background:none;border:1px dashed rgba(229,229,229,.5)}.selective__list__item--empty:hover{box-shadow:none ;cursor:default}.selective__list__item--collapsed,.selective__list__item--simple{align-items:center;display:flex;flex-flow:row;align-items:center;padding:.5em 0}.selective__list__item--collapsed .selective__field,.selective__list__item--simple .selective__field{flex-grow:1;margin:0}.selective__list__item--simple{padding:.25em 0}.selective__list__item__delete,.selective__list__item__drag{padding:0 .5em}.selective__list__item__delete .material-icons,.selective__list__item__drag .material-icons{cursor:pointer;font-size:14px}.selective__list__item__delete .material-icons:focus,.selective__list__item__drag .material-icons:focus{color:#48a0f4}.selective__list__item__delete .material-icons:hover,.selective__list__item__drag .material-icons:hover{color:rgba(0,0,0,.3)}.selective__list__item__delete .material-icons:hover:focus,.selective__list__item__drag .material-icons:hover:focus{color:#48a0f4}.selective__list__item__delete .material-icons--checked,.selective__list__item__delete .material-icons--selected,.selective__list__item__drag .material-icons--checked,.selective__list__item__drag .material-icons--selected{color:#48a0f4}.selective__list__item__delete .material-icons--checked:hover,.selective__list__item__delete .material-icons--selected:hover,.selective__list__item__drag .material-icons--checked:hover,.selective__list__item__drag .material-icons--selected:hover{color:#48a0f4}.selective__list__item__label{cursor:pointer;flex-basis:25%;flex-grow:1;font-weight:bold;padding-right:1em}.selective__list__item__preview{cursor:pointer;flex-basis:75%;flex-shrink:1;flex-grow:1;overflow:hidden;text-overflow:ellipsis}.selective__list__fields__label{font-weight:700}.selective__list__fields__label--empty{cursor:pointer;background:rgba(0,0,0,.1);border-radius:3px 3px 0 0;height:10px;margin:-1em -1em 1em -1em;width:calc(100% + 2em)}.selective__field__type__radio .selective__options__option .material-icons{margin-right:.5em}.selective__variant__variants{align-items:center;display:flex;flex-flow:row}.selective__variant__clear{margin-left:1em}