superdesk/superdesk-client-core

// settings.scss
// Styling for the superdesk ingest settings
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';

// Ingest sources
// -------------------------------------

.addSource.modal {
    input {
        height: 31px;
        line-height: 19px;
        &.blue-text {
            &::-webkit-input-placeholder {
                font-style:normal !important;
            }
            &:-moz-placeholder {
                font-style:normal !important;
            }
            &::-moz-placeholder {
                font-style:normal !important;
            }
            &::-ms-input-placeholder {
                font-style:normal !important;
            }
        }
        &::-webkit-input-placeholder {
            font-style:italic;
        }
    }
    .credentials {
        margin-block-start: 20px;
        label {
            font-size: 16px;
        }
        input {
            float: inline-start;
            width: 49%;
            &.first {
                margin-inline-end: 2%;
            }
        }
    }
}

.ingestsource-modal {
    .modal-body {
        flex: 1 1 auto !important;
        .popup-subnav {
            padding-inline-start: 10px;
            label {
                color: $sd-text-light;
            }
            .TabContent {
                margin-block-end: 20px;
            }
            .field {
                padding-inline-start: 10px;
                float: inline-start;
                .field {
                    padding-inline-start: 0 !important;
                }
            }
        }
        .article-type {
            margin-block-end: 30px !important;
        }
        .rss-config {
            .empty {
                width: 64px;
            }
            .btn-remove {
                padding-inline-end: 14px;
            }
            .multiple .field {
                padding-inline-end: 10px;
            }
        }

        .field {
            .helper-text--padded {
                padding-inline-start: 0;
            }
        }
    }
}

// Ruleset settings
// -------------------------------------

.ruleset-modal {

    header {
        padding: 10px;
    }
    .modal-body {
        flex: 1 1 auto !important;
    }
    .rule-list {

        >li {
            position: relative;
            .order {
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: 0;
                line-height: 28px;
                color: #aaa;
            }
            .actions {
                position: absolute;
                inset-inline-end: 0; inset-block-start: 0;
                button {
                    border: 0;
                    background: none;
                }
            }
            fieldset {
                padding: 0 40px;
                .field:first-child {
                    padding-inline-end: 3%;
                }
                .field:last-child {
                    padding-inline-start: 3%;
                }
            }
        }
    }
    .modal-body {
        flex: 1 1 auto !important;
    }
}

.shadow-list-holder > .pills-list {
    margin: 8px 0 0 5px;
}

.pills-list--draggable {
    & > li {
        position: relative;
        //transition: all ease-in-out 0.2s;
        &:after {
            content: "";
            width: 6px;
            transition: opacity ease-in-out 0.2s;
            inset-block-start: 4px;
            inset-block-end: 4px;
            inset-inline-start: 3px;
            border: 2px dotted currentColor;
            border-width: 0 2px;
            opacity: 0.1;
            position: absolute;
            display: block;
        }
        &:hover {
            &:after {
                opacity: 0.6;
                cursor: move;
            }
        }

    }
    .ui-sortable-placeholder {
        border: 1px dashed $sd-blue !important;
        background-color: scale-color($sd-blue, $alpha: -90%) !important;
        visibility: visible !important;
        box-shadow: none !important;
        &:after {
            content: none !important;
        } 
    } 
}

.selected-field {
    outline: 1px solid #5ea9c8;
    background-color: rgba(94, 169, 200, 0.1);
    padding: 0 1rem 1rem;
}