@blinkk/editor
Version:
Structured content editor with live previews.
2 lines (1 loc) • 48.3 kB
CSS
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&family=Roboto+Mono:wght@400;700&family=Rubik:wght@300;400;500;700&display=swap");body{margin:0;padding:0}.container{height:100vh;display:flex;flex-flow:column}.container>div{flex-grow:1}.le{background:#fff;display:grid;font-family:"Nunito Sans",sans-serif;font-size:14px;grid-template-columns:100%;line-height:1;overflow:hidden}.le--docked-menu{-moz-column-gap:2px;column-gap:2px;grid-template-columns:minmax(300px, 15%) 1fr}.le *{box-sizing:border-box}.le p{line-height:1.2}.le pre{margin:0}.le .material-icons{font-size:18px;vertical-align:middle}.le__structure__content{display:flex;flex-flow:column}.le__structure__content_header{flex-grow:0;flex-shrink:1}.le__structure__content_panes{-moz-column-gap:2px;column-gap:2px;display:grid;flex-grow:1;grid-template-columns:minmax(475px, 40%) 1fr}.le__structure__content_only,.le__structure__preview_only{display:flex;flex-flow:column;flex-grow:1}a,[aria-role="link"],.le__clickable{cursor:pointer}a .material-icons,[aria-role="link"] .material-icons,.le__clickable .material-icons{padding:4px}.material-icons[aria-role="link"],.material-icons.le__clickable{padding:4px}.le__actions{align-items:center;display:flex;flex-flow:row;margin:0 16px}.le__actions--slim{margin:0 8px}.le__actions__action{margin-right:8px}.le__actions__action--extreme{color:#C71F25}.le__actions__action--warning{color:#D78528}.le__actions__action:first-child{margin-left:8px}.le__button{background:transparent;border:none;border-radius:2px;font-weight:700;padding:8px;transition:opacity 600ms}.le__button:disabled{opacity:.35}.le__button--primary{background-color:#48a0f4;border-color:#fff;color:#fff}.le__button--primary.le__button--on-primary{background-color:#fff;border-color:#48a0f4;color:#48a0f4}.le__button--secondary{background-color:#2c2c2c;border-color:#fff;color:#fff}.le__button--secondary.le__button--on-secondary{background-color:#fff;border-color:#2c2c2c;color:#2c2c2c}.le__button--tertiary{background-color:#eee;border-color:#000;color:#000}.le__button--tertiary.le__button--on-tertiary{background-color:#000;border-color:#eee;color:#eee}.le__button--extreme{background-color:#C71F25;border-color:#fff;color:#fff}.le__button--extreme.le__button--on-extreme{background-color:#fff;border-color:#C71F25;color:#C71F25}.le__error{color:#C71F25;max-width:38vw}.le__error--pad{margin:0 16px}.le__error__message{font-weight:700;margin:16px 0}.le__error__description{margin:16px 0}.le__list:last-child{margin-bottom:16px}.le__list--constrained{max-height:20vh;overflow-y:auto}.le__list--indent{padding-left:32px}.le__list>.le__list{padding-left:16px}.le__list__item{align-items:center;display:flex;font-weight:300;flex-flow:row}.le__list__item--constrained{max-height:20vh;overflow-y:auto}.le__list__item--pad_xsmall{padding:4px}.le__list__item--pad_small{padding:8px}.le__list__item--pad{padding:16px}.le__list__item--pad_large{padding:32px}.le__list__item--pad_xlarge{padding:64px}.le__list__item--pad_horizontal_xsmall{padding:0 4px}.le__list__item--pad_horizontal_small{padding:0 8px}.le__list__item--pad_horizontal{padding:0 16px}.le__list__item--pad_horizontal_large{padding:0 32px}.le__list__item--pad_horizontal_xlarge{padding:0 64px}.le__list__item--pad_vertical_xsmall{padding:4px 0}.le__list__item--pad_vertical_small{padding:8px 0}.le__list__item--pad_vertical{padding:16px 0}.le__list__item--pad_vertical_large{padding:32px 0}.le__list__item--pad_vertical_xlarge{padding:64px 0}.le__list__item--indent_xxsmall{padding-left:2px}.le__list__item--indent_xsmall{padding-left:4px}.le__list__item--indent_small{padding-left:8px}.le__list__item--indent{padding-left:16px}.le__list__item--indent_large{padding-left:32px}.le__list__item--indent_xlarge{padding-left:64px}.le__list__item--indent_xxlarge{padding-left:128px}.le__list__item--primary{color:#48a0f4;font-weight:700}.le__list__item--secondary{color:#2c2c2c;font-weight:700}.le__list__item--heading{color:#000;font-weight:700}.le__list__item--emphasis{font-weight:700}.le__list__item .le__actions{opacity:0;transition:opacity 100ms}.le__list__item.le__clickable:hover{background-color:#eee;color:#000}.le__part__menu .le__list__item.le__clickable:hover{box-shadow:-15vw 0 0 #eee}.le__list__item.le__clickable:hover .le__actions{opacity:1}.le__list__item--primary.le__clickable,.le__list__item--primary.le__clickable:hover{color:#48a0f4}.le__list__item--secondary.le__clickable,.le__list__item--secondary.le__clickable:hover{color:#2c2c2c}.le__list__item--selected,.le__list__item--selected.le__clickable:hover{background-color:#2c2c2c;color:#fff}.le__part__menu .le__list__item--selected,.le__part__menu .le__list__item--selected.le__clickable:hover{box-shadow:-15vw 0 0 #2c2c2c}.le__list__item__label{flex-grow:1;line-height:1.2;margin:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.le__list__item__aside{font-size:12px;font-style:italic;margin:8px 16px 8px 0}.le__list__item--pad .le__list__item__aside,.le__list__item--pad_horizontal .le__list__item__aside{margin:8px 0}.le__list__item--pad_vertical .le__list__item__aside{margin:0 16px 0 0}.le__loading{display:inline-block;height:28px;position:relative;width:28px}.le__loading:after{-webkit-animation:editor__loading 2000ms linear infinite;animation:editor__loading 2000ms linear infinite;border:2px solid #2c2c2c;border-color:#2c2c2c transparent #2c2c2c transparent;border-radius:50%;content:" ";display:block;height:20px;margin:2px;position:absolute;width:20px}.le__loading:before{-webkit-animation:editor__loading__inner 3000ms linear infinite;animation:editor__loading__inner 3000ms linear infinite;border:2px solid #2c2c2c;border-color:#48a0f4 transparent #48a0f4 transparent;border-radius:50%;content:" ";display:block;height:12px;margin:6px;position:absolute;width:12px}.le__loading--pad{margin:16px}.le__loading--pad-horizontal{margin:0 16px}.le__loading--pad-vertical{margin:16px 0}.le__loading--small{height:14px;width:14px}.le__loading--small:after{border-width:1px;height:10px;margin:1px;width:10px}.le__loading--small:before{border-width:1px;height:6px;margin:3px;width:6px}@-webkit-keyframes editor__loading__inner{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}@keyframes editor__loading__inner{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}@-webkit-keyframes editor__loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes editor__loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.le__modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:rgba(0,0,0,0.25);bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000}.le__modal--low_priority{z-index:900}.le__modal--high_priority{z-index:1100}.le__modal__container{align-items:center;display:flex;flex-flow:column;height:100vh;justify-content:center}.le__modal--docked .le__modal__container{justify-content:stretch}.le__modal--docked-left .le__modal__container{align-items:flex-start}.le__modal--docked-right .le__modal__container{align-items:flex-end}.le__modal__content{background:#fff}.le__modal--dialog .le__modal__content{box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);display:flex;flex-flow:column;height:auto;min-width:600px;min-height:250px;width:50vw}.le__modal--dialog.le__modal--large .le__modal__content{height:70vh;width:80vw}.le__modal--docked .le__modal__content{flex-grow:1;min-width:300px;width:30%}.le__modal--dialog .le__modal__content__template{flex-grow:1;max-height:60vh;max-width:70vw;overflow:auto}.le__modal__content__template__padded{padding:16px}.le__modal__content__footer{align-items:center;display:flex;flex-flow:row;justify-content:space-between;padding:16px}.le__modal__content__header{border-bottom:1px solid #e5e5e5;font-weight:700;padding:16px}.le__modal__actions__tertiary{flex-grow:1}.le__part__toasts{align-items:center;bottom:16px;display:flex;flex-flow:column;left:0;position:fixed;right:0;z-index:2000}.le__toast{-webkit-animation:toast-slide-down 300ms ease-in forwards;animation:toast-slide-down 300ms ease-in forwards;background:#2c2c2c;border-radius:4px;color:#fff;display:flex;flex-flow:column;margin-bottom:16px;max-width:1000px;min-width:400px;overflow:hidden;width:60vw}.le__toast--removed{-webkit-animation:toast-remove 600ms ease forwards;animation:toast-remove 600ms ease forwards}.le__toast__structure{align-items:center;display:flex;flex-flow:row}.le__toast__message{flex-grow:1;margin:16px}.le__toast__action{padding:16px 8px}.le__toast__action:hover{background:#555;color:#fff}.le__toast__close{padding:8px 16px}.le__toast__timer{height:4px;background:#48a0f4;-webkit-animation:toast-timer 5000ms linear forwards;animation:toast-timer 5000ms linear forwards}.le__toast--paused .le__toast__timer,.le__toast:hover:not(.le__toast--no-hover-pause) .le__toast__timer{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes toast-slide-down{0%{opacity:0;transform:translateY(-16px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-slide-down{0%{opacity:0;transform:translateY(-16px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@-webkit-keyframes toast-remove{0%{opacity:1;transform:scale(1)}50%{height:46px;opacity:0;transform:translateY(16px)}100%{height:0;margin-bottom:0;opacity:0;transform:translateY(16px)}}@keyframes toast-remove{0%{opacity:1;transform:scale(1)}50%{height:46px;opacity:0;transform:translateY(16px)}100%{height:0;margin-bottom:0;opacity:0;transform:translateY(16px)}}@-webkit-keyframes toast-timer{0%{width:100%}100%{width:0}}@keyframes toast-timer{0%{width:100%}100%{width:0}}[data-tip]:not(.material-icons){position:relative;display:inline-block}[data-tip]:not(.material-icons):before{background:#2c2c2c;border-radius:2px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);color:#fff;content:attr(data-tip);display:none;font-family:"Nunito Sans",sans-serif;font-size:12px;position:absolute;left:100%;margin-left:8px;padding:8px;text-align:center;top:50%;transform:translateY(-50%);white-space:nowrap;z-index:500}[data-tip]:not(.material-icons):hover:after,[data-tip]:not(.material-icons):hover:before{display:block}[data-tip]:not(.material-icons):after{border:8px solid #2c2c2c;border-color:transparent #2c2c2c transparent transparent;content:"";display:none;left:100%;margin-left:-8px;position:absolute;top:50%;transform:translateY(-50%);z-index:510}[data-tip]:not(.material-icons).selective__tooltip--wrap:before,[data-tip]:not(.material-icons).le__tooltip--wrap:before{max-width:256px;min-width:128px;white-space:normal;width:10vw}[data-tip]:not(.material-icons).selective__tooltip--bottom:before,[data-tip]:not(.material-icons).le__tooltip--bottom:before,[data-tip]:not(.material-icons).selective__tooltip--bottom-left:before,[data-tip]:not(.material-icons).le__tooltip--bottom-left:before,[data-tip]:not(.material-icons).selective__tooltip--bottom-right:before,[data-tip]:not(.material-icons).le__tooltip--bottom-right:before{left:initial;margin:initial;top:initial;top:100%;left:50%;margin-top:8px;transform:translateX(-50%)}[data-tip]:not(.material-icons).selective__tooltip--bottom:after,[data-tip]:not(.material-icons).le__tooltip--bottom:after,[data-tip]:not(.material-icons).selective__tooltip--bottom-left:after,[data-tip]:not(.material-icons).le__tooltip--bottom-left:after,[data-tip]:not(.material-icons).selective__tooltip--bottom-right:after,[data-tip]:not(.material-icons).le__tooltip--bottom-right:after{left:initial;margin:initial;top:initial;border-color:transparent transparent #2c2c2c transparent;top:100%;left:50%;margin-top:-8px;transform:translateX(-50%)}[data-tip]:not(.material-icons).selective__tooltip--bottom-left:before,[data-tip]:not(.material-icons).le__tooltip--bottom-left:before{transform:translateX(calc(-100% + 16px))}[data-tip]:not(.material-icons).selective__tooltip--bottom-right:before,[data-tip]:not(.material-icons).le__tooltip--bottom-right:before{transform:translateX(-16px)}[data-tip]:not(.material-icons).selective__tooltip--left:before,[data-tip]:not(.material-icons).le__tooltip--left:before{left:initial;margin:initial;margin-right:8px;right:100%}[data-tip]:not(.material-icons).selective__tooltip--left:after,[data-tip]:not(.material-icons).le__tooltip--left:after{left:initial;margin:initial;border-color:transparent transparent transparent #2c2c2c;margin-right:-8px;right:100%}[data-tip]:not(.material-icons).selective__tooltip--top:before,[data-tip]:not(.material-icons).le__tooltip--top:before,[data-tip]:not(.material-icons).selective__tooltip--top-left:before,[data-tip]:not(.material-icons).le__tooltip--top-left:before,[data-tip]:not(.material-icons).selective__tooltip--top-right:before,[data-tip]:not(.material-icons).le__tooltip--top-right:before{left:initial;margin:initial;top:initial;bottom:100%;left:50%;margin-bottom:8px;transform:translateX(-50%)}[data-tip]:not(.material-icons).selective__tooltip--top:after,[data-tip]:not(.material-icons).le__tooltip--top:after,[data-tip]:not(.material-icons).selective__tooltip--top-left:after,[data-tip]:not(.material-icons).le__tooltip--top-left:after,[data-tip]:not(.material-icons).selective__tooltip--top-right:after,[data-tip]:not(.material-icons).le__tooltip--top-right:after{left:initial;margin:initial;top:initial;border-color:#2c2c2c transparent transparent transparent;bottom:100%;left:50%;margin-bottom:-8px;transform:translateX(-50%)}[data-tip]:not(.material-icons).selective__tooltip--top-left:before,[data-tip]:not(.material-icons).le__tooltip--top-left:before{transform:translateX(calc(-100% + 16px))}[data-tip]:not(.material-icons).selective__tooltip--top-right:before,[data-tip]:not(.material-icons).le__tooltip--top-right:before{transform:translateX(-16px)}.le__part__content{display:flex;flex-flow:column;flex-grow:1}.le__part__content__sections{display:flex;flex-flow:column;flex-grow:1;height:0;overflow:auto}.le__part__content__section{display:flex;flex-flow:column;flex-grow:1}.le__part__content__footer{align-items:center;background-color:#eee;color:#000;display:flex;flex-flow:row;justify-content:space-between}.le__part__content__logo{flex-grow:1;margin:0 16px}.le__part__content__logo svg{max-height:28px;max-width:28px}.le__part__content__dev_tools{font-size:12px;margin:16px 0}.le__part__content__dev_tools__icons{margin:0 16px}.le__part__content__dev_tools__icons .material-icons{font-size:14px}.le__part__content__dev_tools__icon--selected{color:#48a0f4}.le__part__content__header{align-items:center;background-color:#eee;color:#000;display:flex;flex-flow:row;justify-content:space-between}.le__part__content__header__sections{display:flex;flex-flow:row}.le__part__content__header__section{padding:16px;border-bottom:2px solid transparent;color:#555;font-size:12px;font-weight:700;text-transform:uppercase;transition:opacity 600ms}.le__part__content__header__section--disabled{opacity:.35}.le__part__content__header__section:hover:not(.le__part__content__header__section--disabled){border-bottom:2px solid #555;color:#2c2c2c}.le__part__content__header__section--selected{border-bottom:2px solid #2c2c2c;color:#2c2c2c}.le__part__content__header__section--selected:hover{border-bottom:2px solid #000}.le__part__content__header__actions{align-items:center;display:flex;flex-flow:row;margin-right:16px}.le__part__content__header__actions .le__loading{margin-right:16px}.le__part__content__header__action{min-width:128px}.le__part__content__header__status--error{color:#C71F25;margin-right:16px}.le__part__content__header__status .material-icons{font-size:22px}.le__part__content__toolbar{align-items:center;background-color:#2c2c2c;color:#fff;display:flex;flex-flow:row;justify-content:space-between}.le__part__content__toolbar a{color:#fff}.le__part__content__toolbar__label{margin:16px;font-family:"Rubik",sans-serif;font-size:12px;font-weight:300}.le__part__content__toolbar__label strong{font-family:"Nunito Sans",sans-serif;font-weight:700}.le__part__content__toolbar__icons{margin:0 16px}.le__structure__content_only .le__part__content__fields{margin:0 auto;max-width:70vw;width:100%}.le__part__content__history__title{color:#555;font-size:12px;text-transform:uppercase;margin:16px}.le__part__content__history__current .material-icons{margin-right:16px}.le__change .material-icons{margin-right:16px}.le__change__summary{font-size:12px;line-height:1.2;margin-top:8px}.le__part__content__raw .selective{display:flex;flex-flow:column;flex-grow:1}.le__part__content__raw .selective__fields,.le__part__content__raw .selective__field,.le__part__content__raw .selective__field__input__structure,.le__part__content__raw .selective__field__input{display:flex;flex-flow:column;flex-grow:1}.le__part__content__raw textarea{flex-grow:1;font-family:"Roboto Mono",monospace ;overflow:auto;white-space:nowrap}.le__part__empty{margin:16px}.le__part__menu__content{overflow-x:auto;max-height:calc(100vh - 46px)}.le__part__menu__header{align-items:center;background:#000;color:#fff;display:flex;flex-flow:row;justify-content:space-between}.le__part__menu__project{flex-grow:1;font-weight:700;overflow:hidden;padding:16px;text-overflow:ellipsis;white-space:nowrap}.le__part__menu__section{border-bottom:1px solid #e5e5e5}.le__part__menu__section:last-child{border-bottom:none}.le__part__menu__section__header{color:#555;font-size:12px;text-transform:uppercase;align-items:center;display:flex;flex-flow:row}.le__part__menu__section__title{padding:16px 0}.le__part__notifications{margin:0 16px}.le__part__notifications--errors{color:#C71F25}.le__part__notifications .material-icons{font-size:22px}.ls__part__notifications__notification{align-items:center;display:grid;grid-template-columns:32px 1fr 64px;padding:16px}.ls__part__notifications__notification:hover{background-color:#eee;color:#000}.ls__part__notifications__notification--error{color:#C71F25}.ls__part__notifications__notification--error:hover{color:#C71F25}.ls__part__notifications__notification--warning{color:#D78528}.ls__part__notifications__notification--warning:hover{color:#D78528}.ls__part__notifications__notification__message{display:grid;grid-template-columns:0 1fr 64px;padding:16px}.ls__part__notifications__notification__status{grid-column:1}.ls__part__notifications__notification__label{grid-column:2;margin:8px 0}.ls__part__notifications__notification__mark{grid-column:3}.ls__part__notifications__notification__description,.ls__part__notifications__notification__expand,.ls__part__notifications__notification__meta{grid-column:2 / span 2;padding:8px 0}.ls__part__notifications__notification__expand{font-size:12px;text-transform:uppercase}.ls__part__notifications__notification__actions{grid-column:2 / span 2}.ls__part__notifications__notification__actions button{margin-right:16px}.le__part__overview{align-items:center;background:#000;color:#fff;display:flex;flex-flow:row;justify-content:space-between}.le__part__overview a{color:#fff}.le__part__overview__title{flex-grow:1;font-weight:700;padding:16px 0}.le__part__overview__menu{padding:0 16px}.le__part__overview__workspace{font-size:12px;margin:16px 0 16px 16px}.le__part__overview__publish{margin-left:16px}.le__part__overview__publish button{min-width:128px}.le__part__preview{display:flex;flex-flow:column;flex-grow:1;justify-content:stretch}.le__part__preview__container{align-items:stretch;background-color:#fff;color:#000;display:flex;flex-flow:column;flex-grow:1;justify-content:stretch}.le__part__preview--device_mode .le__part__preview__container{align-items:center;justify-content:center}.le__part__preview__frame{display:flex;flex-flow:column;flex-grow:1;overflow:hidden}.le__part__preview--device_mode .le__part__preview__frame{box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);flex-grow:0;justify-content:center}.le__part__preview--device_mode .le__part__preview__frame--unbounded{box-shadow:none}.le__part__preview__frame iframe{background-color:#fff;border:none;color:#000;flex-grow:1;transform-origin:center left;z-index:5}.le__part__preview__toolbar{align-items:center;background-color:#2c2c2c;color:#fff;display:flex;flex-flow:row;flex-grow:0;justify-content:space-between}.le__part__preview__toolbar a{color:#fff}.le__part__preview__toolbar__devices{display:flex;flex-flow:row;font-size:12px;font-weight:300;margin:16px}.le__part__preview__toolbar__device{margin:0 8px}.le__part__preview__toolbar__device--selected{color:#48a0f4}.le__part__preview__toolbar__icons{margin:0 16px}.le__part__preview__toolbar__icon--selected{color:#48a0f4}.le__part__preview__toolbar__icon--disabled .material-icons{opacity:.35}.le__part__preview__toolbar__label{font-size:12px;font-weight:700;text-transform:uppercase;margin:16px}.selective{margin:16px}.selective__field{margin:16px 0}.selective__field:first-child{margin-top:0}.selective__field:last-child{margin-bottom:0}.selective__field--invalid>.selective__field__header{color:#C71F25}.selective__field__help{color:#555;font-size:12px;margin-bottom:8px}.selective__field__errors{margin:8px 0}.selective__field__label{align-items:center;display:flex;flex-flow:row;font-weight:700;margin-bottom:8px}.selective__field__label--error{color:#C71F25}.selective__field__label>.selective__field__invalid{margin-right:8px}.selective__field__actions{align-items:center;display:flex;flex-flow:row}.selective__field__actions .selective__action{cursor:pointer}.selective__field__actions .selective__action .material-icons{padding:8px 16px}.selective__field__header .selective__field__actions .selective__action .material-icons{padding:8px}.selective__action[disabled]{cursor:default;opacity:.35}.selective__action--delete{color:#C71F25}.selective__action--add{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000000" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>')}.selective__droppable__target{position:relative}.selective__droppable--hover{background:#84d1ff;color:#000}.selective__droppable--hover::before{background:#0072c1;background:linear-gradient(45deg, #0072c1 0%, #48a0f4 50%, #84d1ff 100%);box-shadow:0 3px 6px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);content:'';height:100%;left:0;position:absolute;top:0;width:100%}.selective__droppable--hover::after{color:#fff;content:'Drop file…';font-size:18px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.selective__droppable--hover *{pointer-events:none}.selective__field__input input[type=text],.selective__field__input input[type=date],.selective__field__input input[type=datetime-local],.selective__field__input input[type=file],.selective__field__input input[type=number],.selective__field__input input[type=time],.selective__field__input textarea{background:#eee;color:#000;border:none;box-shadow:0 1px 0 0 #2c2c2c;font-family:"Rubik",sans-serif;padding:16px;width:100%}.selective__field__input input[type=text]:focus,.selective__field__input input[type=date]:focus,.selective__field__input input[type=datetime-local]:focus,.selective__field__input input[type=file]:focus,.selective__field__input input[type=number]:focus,.selective__field__input input[type=time]:focus,.selective__field__input textarea:focus{outline:none;box-shadow:0 3px 0 0 #000}.selective__field__input input[type=text]:disabled,.selective__field__input input[type=date]:disabled,.selective__field__input input[type=datetime-local]:disabled,.selective__field__input input[type=file]:disabled,.selective__field__input input[type=number]:disabled,.selective__field__input input[type=time]:disabled,.selective__field__input textarea:disabled{opacity:.5}.selective__field__input textarea{line-height:1.2}.selective__field__input--row{align-items:center;display:flex;flex-flow:row}.selective__field__input--error{color:#C71F25}.selective__field__input--error input[type=text],.selective__field__input--error input[type=date],.selective__field__input--error input[type=datetime-local],.selective__field__input--error input[type=file],.selective__field__input--error input[type=number],.selective__field__input--error input[type=time],.selective__field__input--error textarea{color:inherit;box-shadow:0 2px 0 0 #C71F25}.selective__field__input--error input[type=text]:focus,.selective__field__input--error input[type=date]:focus,.selective__field__input--error input[type=datetime-local]:focus,.selective__field__input--error input[type=file]:focus,.selective__field__input--error input[type=number]:focus,.selective__field__input--error input[type=time]:focus,.selective__field__input--error textarea:focus{box-shadow:0 3px 0 0 #C71F25}.selective__field__input--warning{color:#D78528}.selective__field__input--warning input[type=text],.selective__field__input--warning input[type=date],.selective__field__input--warning input[type=datetime-local],.selective__field__input--warning input[type=file],.selective__field__input--warning input[type=number],.selective__field__input--warning input[type=time],.selective__field__input--warning textarea{color:inherit;box-shadow:0 2px 0 0 #D78528}.selective__field__input--warning input[type=text]:focus,.selective__field__input--warning input[type=date]:focus,.selective__field__input--warning input[type=datetime-local]:focus,.selective__field__input--warning input[type=file]:focus,.selective__field__input--warning input[type=number]:focus,.selective__field__input--warning input[type=time]:focus,.selective__field__input--warning textarea:focus{box-shadow:0 3px 0 0 #D78528}.selective__field__input--info{color:#4F9CD1}.selective__field__input--info input[type=text],.selective__field__input--info input[type=date],.selective__field__input--info input[type=datetime-local],.selective__field__input--info input[type=file],.selective__field__input--info input[type=number],.selective__field__input--info input[type=time],.selective__field__input--info textarea{color:inherit;box-shadow:0 2px 0 0 #4F9CD1}.selective__field__input--info input[type=text]:focus,.selective__field__input--info input[type=date]:focus,.selective__field__input--info input[type=datetime-local]:focus,.selective__field__input--info input[type=file]:focus,.selective__field__input--info input[type=number]:focus,.selective__field__input--info input[type=time]:focus,.selective__field__input--info textarea:focus{box-shadow:0 3px 0 0 #4F9CD1}.selective__field__error{color:#C71F25}.selective__field__type__group>.selective__field__header{cursor:pointer;align-items:center;color:#555;display:flex;flex-flow:row;margin-bottom:8px;text-transform:uppercase}.selective__field__type__group>.selective__field__header .selective__field__label{margin-bottom:0}.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 #555;color:#555;font-size:12px;padding:8px 0 8px 16px}.selective__field__type__group>.selective__field__input__structure .selective__field__preview__line{margin:8px 0}.selective__field__type__group--expanded>.selective__field__input__structure>.selective__fields,.selective__field__type__group--expanded>.selective__field__input__structure>.selective__field{border-left:1px solid #2c2c2c;padding:16px 0 16px 16px}.selective__field__type__list>.selective__field__header{align-items:center;display:flex;flex-flow:row-reverse}.selective__field__type__list>.selective__field__header .selective__field__label{flex-grow:1;margin:8px 0}.selective__field__type__list>.selective__field__footer{margin-top:8px}.selective__field__type__list>.selective__field__footer button{background:transparent;border:none;border-radius:2px;font-weight:700;padding:8px;transition:opacity 600ms;border:1px solid #2c2c2c;background-color:#fff;border-color:#48a0f4;color:#48a0f4}.selective__field__type__list>.selective__field__footer button:disabled{opacity:.35}.selective__field__type__list>.selective__field__footer button--primary{background-color:#48a0f4;border-color:#fff;color:#fff}.selective__field__type__list>.selective__field__footer button--primary.le__button--on-primary{background-color:#fff;border-color:#48a0f4;color:#48a0f4}.selective__field__type__list>.selective__field__footer button--secondary{background-color:#2c2c2c;border-color:#fff;color:#fff}.selective__field__type__list>.selective__field__footer button--secondary.le__button--on-secondary{background-color:#fff;border-color:#2c2c2c;color:#2c2c2c}.selective__field__type__list>.selective__field__footer button--tertiary{background-color:#eee;border-color:#000;color:#000}.selective__field__type__list>.selective__field__footer button--tertiary.le__button--on-tertiary{background-color:#000;border-color:#eee;color:#eee}.selective__field__type__list>.selective__field__footer button--extreme{background-color:#C71F25;border-color:#fff;color:#fff}.selective__field__type__list>.selective__field__footer button--extreme.le__button--on-extreme{background-color:#fff;border-color:#C71F25;color:#C71F25}.selective__field__type__list>.selective__field__footer .selective__action--add{background-position:left 7px top 7px;background-repeat:no-repeat;background-size:18px;padding-left:34px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2348A0F4" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>')}.selective__field__header .selective__field__type__list>.selective__field__footer .selective__action--add{background-position:left 4px top 4px;padding-left:26px}.selective__list__item{align-items:center;display:flex;flex-flow:row}.selective__list__item>.selective__field__actions .selective__list__item__drag{cursor:-webkit-grab;cursor:grab}.selective__list__item>.selective__field__actions .selective__field__action{cursor:pointer}.selective__list__item>.selective__field__actions .material-icons{padding:8px}.selective__list__item>.selective__field{flex-grow:1;margin:8px 0}.selective__list__item>.selective__list__fields__header>.selective__list__item__preview,.selective__list__item>.selective__list__item__preview{flex-grow:1;overflow:hidden;padding:8px 0;text-overflow:ellipsis;white-space:nowrap}.selective__list__item>.selective__list__fields__header>.selective__list__item__preview img,.selective__list__item>.selective__list__item__preview img{max-height:128px;max-width:100%}.selective__list__item:not(.selective__list__item--simple):not(.selective__list__item--empty){border:1px solid #e5e5e5;border-radius:2px;margin-bottom:8px}.selective__list__item:not(.selective__list__item--simple):not(.selective__list__item--empty):last-child{margin-bottom:0}.selective__list__item--simple>.selective__field__actions--pre .material-icons{padding-left:0}.selective__list__item--empty{padding:16px 0}.selective__list__item--collapsed>.selective__list__item__preview{cursor:pointer;padding:16px 0}.selective__list__item--expanded{align-items:stretch;flex-flow:column}.selective__list__item--expanded>.selective__list__fields__header{cursor:pointer;align-items:center;background:#eee;color:#000;display:flex;flex-flow:row;font-weight:700;padding:8px}.selective__list__item--expanded>.selective__list__fields__header img{max-height:64px;max-width:100%}.selective__list__item--expanded>.selective__list__fields{padding:16px}.selective__list__item--no-drag{padding-left:16px}.selective__list__item.selective__sortable--hover *{pointer-events:none}.selective__list__item.selective__sortable--hover.selective__sortable--above{box-shadow:0 -3px 0 0 #000}.selective__list__item.selective__sortable--hover.selective__sortable--below{box-shadow:0 3px 0 0 #000}.selective__field__type__media>.selective__field__input__structure>.selective__droppable__target,.selective__field__type__remoteMedia>.selective__field__input__structure>.selective__droppable__target{position:relative}.selective__field__type__media .selective__media__path__input,.selective__field__type__remoteMedia .selective__media__path__input{align-items:center;display:flex;flex-flow:row}.selective__field__type__media .selective__media__path__input .selective__field__input,.selective__field__type__remoteMedia .selective__media__path__input .selective__field__input{flex-grow:1}.selective__field__type__media .selective__media__preview img,.selective__field__type__media .selective__media__preview video,.selective__field__type__remoteMedia .selective__media__preview img,.selective__field__type__remoteMedia .selective__media__preview video{height:15vh;max-height:150px;max-width:100%;margin:8px 0}.selective__field__type__media .selective__media__section__label,.selective__field__type__remoteMedia .selective__media__section__label{color:#555;font-size:12px;text-transform:uppercase;margin:16px 0 8px 0}.selective__field__type__media .selective__media__path .selective__media__section__label,.selective__field__type__remoteMedia .selective__media__path .selective__media__section__label{margin-top:0}.selective__field__type__media .selective__media__meta,.selective__field__type__remoteMedia .selective__media__meta{color:#555;display:flex;flex-flow:row;font-size:12px}.selective__field__type__media .selective__media__meta__item,.selective__field__type__remoteMedia .selective__media__meta__item{margin-right:16px}.selective__field__type__media .selective__media__meta__item:last-child,.selective__field__type__remoteMedia .selective__media__meta__item:last-child{margin-right:0}.selective__field__type__media .selective__media__meta__label,.selective__field__type__remoteMedia .selective__media__meta__label{font-weight:700}.selective__field__type__media .selective__media__upload,.selective__field__type__remoteMedia .selective__media__upload{display:none}.selective__field__type__media .selective__droppable--hover::after,.selective__field__type__remoteMedia .selective__droppable--hover::after{content:'Drop new media…'}.selective__field__type__media>.selective__field__input__structure>.selective__field__type__group>.selective__field__header .selective__field__label,.selective__field__type__remoteMedia>.selective__field__input__structure>.selective__field__type__group>.selective__field__header .selective__field__label{color:#555;font-size:12px;text-transform:uppercase;margin:16px 0 8px 0;font-weight:400;margin:0}.selective__field__type__media>.selective__field__input__structure>.selective__field__type__group>.selective__field__header .selective__field__actions .selective__action .material-icons,.selective__field__type__remoteMedia>.selective__field__input__structure>.selective__field__type__group>.selective__field__header .selective__field__actions .selective__action .material-icons{padding:4px 8px 4px 0}.selective__field__type__mediaList .selective__media_list,.selective__field__type__remoteMediaList .selective__media_list{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;-moz-column-gap:16px;column-gap:16px;row-gap:16px}.selective__field__type__mediaList .selective__media_list__item,.selective__field__type__remoteMediaList .selective__media_list__item{aspect-ratio:1}.selective__field__type__mediaList .selective__media_list__item--collapsed,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed{border:1px solid #e5e5e5;padding:8px;position:relative;transition:background 600ms}.selective__field__type__mediaList .selective__media_list__item--collapsed .selective__media_list__item__preview,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed .selective__media_list__item__preview{align-items:center;aspect-ratio:1;display:flex;flex-flow:column;justify-content:center}.selective__field__type__mediaList .selective__media_list__item--collapsed .selective__media_list__item__preview img,.selective__field__type__mediaList .selective__media_list__item--collapsed .selective__media_list__item__preview video,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed .selective__media_list__item__preview img,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed .selective__media_list__item__preview video{max-height:100%;max-width:100%}.selective__field__type__mediaList .selective__media_list__item--collapsed .selective__media_list__item__preview .material-icons,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed .selective__media_list__item__preview .material-icons{font-size:22px}.selective__field__type__mediaList .selective__media_list__item--collapsed .selective__field__actions,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed .selective__field__actions{opacity:0;position:absolute;right:0;top:0;transform:translateX(50%) translateY(-50%);transition:opacity 600ms}.selective__field__type__mediaList .selective__media_list__item--collapsed .selective__field__actions .selective__action .material-icons,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed .selective__field__actions .selective__action .material-icons{padding:8px}.selective__field__type__mediaList .selective__media_list__item--collapsed:focus,.selective__field__type__mediaList .selective__media_list__item--collapsed:hover,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed:focus,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed:hover{background:#eee}.selective__field__type__mediaList .selective__media_list__item--collapsed:focus .selective__field__actions,.selective__field__type__mediaList .selective__media_list__item--collapsed:hover .selective__field__actions,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed:focus .selective__field__actions,.selective__field__type__remoteMediaList .selective__media_list__item--collapsed:hover .selective__field__actions{opacity:1}.selective__field__type__mediaList .selective__media_list__item--expanded,.selective__field__type__remoteMediaList .selective__media_list__item--expanded{aspect-ratio:auto;border:1px solid #e5e5e5;grid-column-start:1;grid-column-end:5}.selective__field__type__mediaList .selective__media_list__item--expanded .selective__media_list__fields__header,.selective__field__type__remoteMediaList .selective__media_list__item--expanded .selective__media_list__fields__header{cursor:pointer;background:#eee;color:#000;font-weight:700;padding:16px}.selective__field__type__mediaList .selective__media_list__item--expanded .selective__media_list__fields,.selective__field__type__remoteMediaList .selective__media_list__item--expanded .selective__media_list__fields{padding:16px}.selective__field__type__mediaList .selective__media_list__add,.selective__field__type__remoteMediaList .selective__media_list__add{cursor:pointer;align-items:center;aspect-ratio:1;border:1px dashed #48a0f4;color:#48a0f4;display:flex;flex-flow:column;justify-content:center}.selective__field__type__mediaList .selective__media_list__add:focus,.selective__field__type__mediaList .selective__media_list__add:hover,.selective__field__type__remoteMediaList .selective__media_list__add:focus,.selective__field__type__remoteMediaList .selective__media_list__add:hover{background:#0072c1;border:1px solid #0072c1;color:#fff}.selective__field__type__mediaList .selective__media_list__add .material-icons,.selective__field__type__remoteMediaList .selective__media_list__add .material-icons{font-size:22px}.selective__field__type__mediaList .selective__media_list__add .selective__media_list__add__label,.selective__field__type__remoteMediaList .selective__media_list__add .selective__media_list__add__label{font-weight:700;margin:8px 0}.selective__field__type__mediaList .selective__droppable--hover::after,.selective__field__type__remoteMediaList .selective__droppable--hover::after{content:'Drop new media…'}.selective__field__type__variant>.selective__field__input__structure>.selective__fields,.selective__field__type__variant>.selective__field__input__structure>.selective__field{border-left:1px solid #2c2c2c;padding:16px 0 16px 16px;margin:16px 0}.selective__variant__variants{align-items:center;display:flex;flex-flow:row}.selective__variant__variant{background:transparent;border:none;border-radius:2px;font-weight:700;padding:8px;transition:opacity 600ms;border:1px solid #2c2c2c;margin-left:0;margin-right:0;border-radius:0;border-right:none}.selective__variant__variant:disabled{opacity:.35}.selective__variant__variant--primary{background-color:#48a0f4;border-color:#fff;color:#fff}.selective__variant__variant--primary.le__button--on-primary{background-color:#fff;border-color:#48a0f4;color:#48a0f4}.selective__variant__variant--secondary{background-color:#2c2c2c;border-color:#fff;color:#fff}.selective__variant__variant--secondary.le__button--on-secondary{background-color:#fff;border-color:#2c2c2c;color:#2c2c2c}.selective__variant__variant--tertiary{background-color:#eee;border-color:#000;color:#000}.selective__variant__variant--tertiary.le__button--on-tertiary{background-color:#000;border-color:#eee;color:#eee}.selective__variant__variant--extreme{background-color:#C71F25;border-color:#fff;color:#fff}.selective__variant__variant--extreme.le__button--on-extreme{background-color:#fff;border-color:#C71F25;color:#C71F25}.selective__variant__variant:first-of-type{border-bottom-left-radius:2px;margin-left:16px;border-top-left-radius:2px}.selective__variant__variant:last-of-type{border-bottom-right-radius:2px;border-right:1px solid #2c2c2c;border-top-right-radius:2px;margin-right:16px}.selective__variant__variant--selected{background:#2c2c2c;box-shadow:0px 0px 0px 2px #2c2c2c;color:#fff}.selective__field__type__partials>.selective__field__header{align-items:center;display:flex;flex-flow:row-reverse}.selective__field__type__partials>.selective__field__header .selective__field__label{flex-grow:1;margin:8px 0}.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item:focus-within{border-color:rgba(0,0,0,0.8)}.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item>.selective__list__fields__header>.selective__list__item__preview span,.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item>.selective__list__item__preview span{margin-left:8px;font-size:12px}.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item>.selective__list__fields__header>.selective__list__item__preview span::after,.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item>.selective__list__item__preview span::after{content:')'}.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item>.selective__list__fields__header>.selective__list__item__preview span::before,.selective__field__type__partials>.selective__field__input__structure>.selective__list>.selective__list__item>.selective__list__item__preview span::before{content:'('}.selective__field__type__partials>.selective__field__footer{margin-top:8px}.selective__field__type__partials>.selective__field__footer button{background:transparent;border:none;border-radius:2px;font-weight:700;padding:8px;transition:opacity 600ms;border:1px solid #2c2c2c;background-color:#fff;border-color:#48a0f4;color:#48a0f4}.selective__field__type__partials>.selective__field__footer button:disabled{opacity:.35}.selective__field__type__partials>.selective__field__footer button--primary{background-color:#48a0f4;border-color:#fff;color:#fff}.selective__field__type__partials>.selective__field__footer button--primary.le__button--on-primary{background-color:#fff;border-color:#48a0f4;color:#48a0f4}.selective__field__type__partials>.selective__field__footer button--secondary{background-color:#2c2c2c;border-color:#fff;color:#fff}.selective__field__type__partials>.selective__field__footer button--secondary.le__button--on-secondary{background-color:#fff;border-color:#2c2c2c;color:#2c2c2c}.selective__field__type__partials>.selective__field__footer button--tertiary{background-color:#eee;border-color:#000;color:#000}.selective__field__type__partials>.selective__field__footer button--tertiary.le__button--on-tertiary{background-color:#000;border-color:#eee;color:#eee}.selective__field__type__partials>.selective__field__footer button--extreme{background-color:#C71F25;border-color:#fff;color:#fff}.selective__field__type__partials>.selective__field__footer button--extreme.le__button--on-extreme{background-color:#fff;border-color:#C71F25;color:#C71F25}.selective__field__type__partials>.selective__field__footer .selective__action--add{background-position:left 7px top 7px;background-repeat:no-repeat;background-size:18px;padding-left:34px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2348A0F4" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>')}.selective__field__header .selective__field__type__partials>.selective__field__footer .selective__action--add{background-position:left 4px top 4px;padding-left:26px}.selective__field__type__string__preview{font-size:12px;overflow:hidden;padding:16px 0;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.selective__field__type__string__preview span{font-weight:700}.selective__autocomplete{position:relative}.selective__autocomplete__list{background:#fff;box-shadow:0 3px 6px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);border:rgba(0,0,0,0.1) 1px solid;border-bottom-left-radius:4px;border-bottom-right-radius:4px;color:#000;left:0;max-height:256px;overflow-y:auto;position:absolute;right:0;top:2px;z-index:200}.selective__autocomplete__list__item{padding:8px 16px}.selective__autocomplete__list__item:focus,.selective__autocomplete__list__item:hover,.selective__autocomplete__list__item[aria-selected=true]{background:#eee;color:#000}.selective__autocomplete__list__item__meta{font-size:12px;padding:8px 4px 4px 8px}.selective__autocomplete__list__status{font-size:12px;padding:8px 16px}.selective__options{display:grid;grid-template-columns:1fr;-moz-column-gap:8px;column-gap:8px}.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;padding:8px 0}.selective__options__option .material-icons{margin-right:8px}.selective__swatch{background-repeat:no-repeat;border:1px solid transparent;border-color:rgba(0,0,0,0.1);border-radius:2px;margin-right:8px;height:16px;width:16px}.selective__options--swatches .selective__swatch{margin-right:0}.selective__options__option--low_contrast .selective__swatch{border-color:rgba(0,0,0,0.8)}.example_tool{position:fixed;bottom:32px;font-family:'Rubik', sans-serif;right:32px;z-index:10000}.example_tool h3,.example_tool h4{margin:0 0 16px 0}.example_tool__float_button{align-items:center;background-color:#eee;border-radius:50%;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);color:#000;display:flex;font-size:22px;flex-flow:row;height:44px;justify-content:center;width:44px}.example_tool__float_button--should-error{color:#C71F25}.example_tool__container{background-color:#eee;border-radius:4px;bottom:32px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);color:#000;display:flex;flex-flow:row;padding:32px;position:fixed;right:108px}.example_tool__container>div{margin:0 16px}.example_tool__container>div:first-child{margin-left:0}.example_tool__container>div:last-child{margin-right:0}.example_tool__api_method{align-items:center;display:flex;flex-flow:row;margin:8px 0}.example_tool__api_method--should-error{color:#C71F25}.example_tool__api_method:first-child{margin-top:0}.example_tool__api_method:last-child{margin-bottom:0}.example_tool__api_method .material-icons{font-size:18px;margin-right:8px}.selective__example_field__expand,.selective__example_field__doc_url{color:#bcbcbc;font-size:12px;margin-top:8px}.selective__example_field__doc_url a{margin-right:16px}.selective__example_field__code{border-left:1px solid #48a0f4;font-family:"Roboto Mono",monospace;font-size:12px;line-height:1.2;padding:8px 16px}