superdesk/superdesk-client-core

@import '~mixins.scss';
@import '~variables.scss';

sd-content-schema-editor {
    .schema-editor {
        margin-block-end: 10px;
        box-sizing: border-box;
        cursor: pointer;

        h4 { padding: 5px; }

        ul.pills-list {
            padding-block-start: 10px;
            .vocabulary-field-type {
                font-weight: 300;
                font-style: italic;
            }
            > li.schema-item {
                cursor: grab;
                border: 1px solid var(--sd-colour-line--x-light);
                padding: 20px;
                margin-block-end: 12px;
                border-radius: 6px;
                .header {
                    margin-block-end: 10px;

                    button {
                        margin: -15px;
                        opacity: 0;
                    }
                    .title {
                        font-size: 16px;
                        font-weight: 500;
                    }
                }

                fieldset {
                    padding-block-start: 10px;
                }

                .dropdown--add-more {
                    > button {
                        opacity: .1;
                        z-index: 99;
                        @include transition(all .3s);
                    }
                    .dropdown__menu {
                        margin-block-start: 10px;
                        margin-inline-start: -90px;
                        max-height: 253px;
                        overflow: auto;
                        z-index: 100;
                    }
                }

                &:hover {
                    background: var(--sd-item__main-Bg);
                    .header button {
                        opacity: 1
                    }
                    .dropdown--add-more > button {
                        opacity: 1;
                    }
                }
                &:first-of-type {
                    .dropdown--add-more__top {
                        inset-block-start: -14px;
                    }
                }
                &:last-of-type {
                    .dropdown--add-more__bottom {
                        inset-block-end: -14px;
                    }
                }
                &.ui-sortable-helper {
                    border-color: var(--sd-colour-interactive--alpha-50);
                    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
                    cursor: grabbing !important;
                    .dropdown--add-more {
                        display: none;
                    }
                }
            }

            .dropdown--add-more {
                cursor: grabbing;
                position: absolute;
                margin-inline-start: -14px;
                inset-inline-start: 50%;
                &__top {
                    inset-block-start: -18px;
                }
                &__bottom {
                    inset-block-end: -19px;
                }
            }
        }

        .field {
            margin-block-end: 15px;
            label {
                min-width: 130px;
                line-height: 23px;
            }

            input, select, .input-medium {
                width: 90px;
            }
            .dropdown { margin-block-start: 0; }
            .sd-check__wrapper {
                margin-inline-start: 0;
                .sd-checkbox {
                    margin-block-start: 3px;
                    margin-inline-start: 0;
                }
            }
            &:last-of-type {
                margin-block-end: 0;
            }
        }
    }
}