@blinkk/selective-edit
Version:
Selective structured text editor.
2 lines (1 loc) • 8.98 kB
CSS
body{background-color:#fff;font-family:"Roboto",sans-serif;margin:0;padding:0}body.localhost{background-image:radial-gradient(circle, #cdcdcd 1px, rgba(0, 0, 0, 0) 1px);background-size:20px 20px}body *{box-sizing:border-box}.container{display:flex;flex-flow:row;min-height:100vh}.content{display:flex;flex-flow:column;flex-grow:1}.content__section{align-items:stretch;display:flex;flex-flow:column;flex-grow:1;padding:1em}.content__data__actions{flex-grow:0;flex-shrink:1;padding:1em}.content textarea{width:100%;flex-grow:1}.sidebar{display:flex;flex-flow:column;max-height:100vh;max-width:650px;flex-basis:40vw}.sidebar__content{flex-grow:1;overflow-y:auto;padding:1em}.sidebar__content .info{flex-grow:1}.sidebar__action{align-items:center;display:flex;flex-flow:row}.sidebar__action i:last-child{margin-right:1rem}.info{background-color:#fff;border-radius:.5em;color:#000;margin:1em;padding:1em}.info__info{background-color:#e1f5fe}.list__items{margin:1em 0}.list__add{align-items:center;display:flex;flex-flow:row;justify-content:center;padding:1em}.localhost .selective__field--dirty{box-shadow:0 0 0 1px #d78528}.list__label{font-size:1.2rem}.status{align-items:center;display:flex;flex-flow:row;flex-grow:0;flex-shrink:1}.status>div{margin-right:1em}.status span{border:2px solid;border-radius:5px;display:inline-block;font-weight:bold;min-width:4em;padding:.25em;text-align:center}.status span.status--true{color:#d78528}.status span.status--false{color:#c71f25}.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}