superdesk/superdesk-client-core

// Utility classes
// -------------------------

// Angular specific
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

// Quick floats
.pull-right {
    float: inline-end;
}
.pull-left {
    float: inline-start;
}
.pull-left-10x {
    float: inline-start;
    padding: 10px;
}
.pull-right-10x {
    float: inline-end;
    padding: 10px;
}

// Toggling content
.hide {
    display: none;
}
.show {
    display: block;
}

// Visibility
.invisible {
    visibility: hidden;
}

// Preview feature elements
.beta-hide {
    display: none !important;
}

.sd-blue {
    color: $sd-blue;
}
// Blue text in input + blue placeholder
.blue-text {
    color: #419fc6 !important;
    &::-webkit-input-placeholder {
        color: #419fc6 !important;
    }
    &:-moz-placeholder {
        color: #419fc6 !important;
    }
    &::-moz-placeholder {
        color: #419fc6 !important;
    }
    &::-ms-input-placeholder {
        color: #419fc6 !important;
    }
}

// Remove background
.no-bg {
    background: none !important;
    &:hover {
        background: none !important;
    }
}

.uppercase {
    text-transform: uppercase;
}

// discreet text used for explaining e.g. what effects a particular setting has
.discreet {
    color: #888;
}


ul.list-view.list-without-items {
    li {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--color-text-lighter);
    }
}

.sd-grid-list.list-without-items {
    li {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.16);
        display: flex;
        line-height: 38px;
        align-content: center;
        justify-content: center;
        text-align: center;
        color: var(--color-text-lighter);
        border-radius: 3px;
    }

}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-row {
    display: flex;
    align-items: center;
}

.text-red {
    color: #e51c23;
}

.sibling-spacer-4 {
    > * + * {
        margin-inline-start: 4px;
    }
}

.sibling-spacer-10 {
    > * + * {
        margin-inline-start: 10px;
    }
}

// preview HTML generated via WYSIWYG editor in a single line
.user-html-in-single-line {
    p {
        display: inline;
    }
}


// SPACER START

.sd-spacer {
    display: flex;
}


// type
.sd-spacer--horizontal {
    flex-direction: row;
}

.sd-spacer--vertical {
    flex-direction: column;
}

// align
.sd-spacer--start {
    align-items: flex-start;
}

.sd-spacer--center {
    align-items: center;
}

.sd-spacer--end {
    align-items: flex-end;
}

.sd-spacer--stretch {
    align-items: stretch;
}

// spacing

.sd-spacer--horizontal-4 > * + * {
    margin-left: 4px;
}

.sd-spacer--vertical-4 > * + * {
    margin-top: 4px;
}

.sd-spacer--horizontal-8 > * + * {
    margin-left: 8px;
}

.sd-spacer--vertical-8 > * + * {
    margin-top: 8px;
}

.sd-spacer--horizontal-16 > * + * {
    margin-left: 16px;
}

.sd-spacer--vertical-16 > * + * {
    margin-top: 16px;
}

.sd-spacer--horizontal-medium > * + * {
    margin-inline-start: 10px;
}

.sd-spacer--vertical-medium > * + * {
    margin-block-start: 10px;
}

.css-table {
    display: table;

    > .tr {
        display: table-row;

        > .td {
            display: table-cell;
        }
    }
}

.small-tag {
    font-size: 12px;
    color: #000;
    background-color: #f5f5f5;
    padding: 3px 6px;
    border-radius: 2px;
}

// SPACER END


.hover-AB:hover .hover-AB--A,
.hover-AB:not(:hover) .hover-AB--B {
    display: none!important;
}

@media print
{
    .no-print
    {
        display: none!important;
    }
}

.icon-button--small {
    padding: 0;
    margin: 0;
    line-height: 1;

    &:hover, &:active {
        [class^="icon-"], [class*=" icon-"] {
            color: var(--sd-color-interactive);
        }
    }
}

.icon-big--inherit-color {
    &[class^="big-icon--"], &[class*=" big-icon--"] {
        color: inherit;
    }
}



:root {
    --diff-color-addition: #e6ffe6;
    --diff-color-removal: #ffe6e6;
    --diff-color-modification: #fff4e6;
    --diff-color-reordering: #ffffe6;
}

.html-diff {
    ins, del {
        text-decoration: auto;

        &.mod {
            border-bottom: 2px solid orange;
        }
    }

    del.diffmod,
    del.diffdel {
        background-color: var(--diff-color-removal);
    }

    ins.diffmod,
    ins.diffins {
        background-color: var(--diff-color-addition);
    }
}

.sd-focusable:focus {
    outline: 2px solid #5ea9c8;
}

.dragging-in-progress {
    z-index: 100;
}

.modal.modal-react p {
    margin: 0;
}

.input-error {
    font-size: 1.2rem;
    font-style: italic;
    color: $errorText;
}

.multi-edit-add-button {
    background-color: var(--sd-colour-bg--06);
    height: 100%;
    align-items: center;
    display: flex;
    width: 46px;
    justify-content: center;
}