squidex/frontend/app/theme/_common.scss

@import '_mixins';
@import '_vars';

body {
    // Default body with padding for fixed navbar and sidebar.
    & {
        background: $color-background;
        padding-left: 0;
        padding-top: $size-navbar-height;
    }

    // White body for login and profile page.
    &.white {
        background: $color-dark-foreground;
    }
}

* {
    @include scrollbars(8px, $color-border-dark, transparent);
}

// Common style for user email.
.user-email {
    font-size: .8rem;
    font-style: italic;
}

.text-decent {
    color: $color-text-decent;
}

.text-nowrap {
    white-space: nowrap;
}

.drag-handle {
    color: $color-text-decent;
    cursor: move;
}

//
// Rich editor icon. Must be placed here, because element is not created by angular.
//
.mce-i-assets {
    & {
        font-family: 'icomoon' !important;
    }

    &::before {
        content: '\e948';
    }
}

.cdk-drag-preview {
    opacity: .7;

    &.table-drag {
        background: $color-dark-foreground;
        border: 2px dashed darken($color-border, 5%);
        display: table;

        * {
            display: none;
        }
    }
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, .2, 1);
}

.cdk-drop-list-dragging {
    * {
        transition: transform 250ms cubic-bezier(0, 0, .2, 1);
    }

    .cdk-drag-placeholder {
        transition: none;
    }
}

.icon-bold {
    font-weight: bold;
}

//
// Help texts
//
.help {
    & {
        font-size: 90%;
    }

    h2,
    h3,
    h4 {
        margin-top: 1rem;
    }
}

//
// Profile picture in circle
//
.user-picture {
    & {
        @include circle(2rem);
    }

    &:not([src]) {
        opacity: 0;
    }
}

.truncate {
    @include truncate;
}

//
// Green or red circle if element is published or unpublished
//
.item-published {
    & {
        @include circle(.5rem);
        background: $color-theme-green;
        border: 0;
        margin-left: .4rem;
    }

    &.unpublished {
        background: $color-theme-error;
    }
}

.dropdown-options {
    & {
        display: inline-block;
    }

    .dropdown-menu {
        @include absolute(100%, 0, auto, auto);
    }

    .dropdown-item {
        cursor: pointer;
    }
}

.dropdown-item {
    cursor: pointer;
}

//
// Landing page with loading spinner.
//
.landing-page {
    & {
        margin: 8rem auto;
        max-width: 32rem;
        text-align: center;
    }

    h1 {
        margin-top: 2.5rem;
    }

    .logo {
        height: 4rem;
    }
}

// Hidden helper (fast *ngIf replacement)
.hidden {
    display: none;
}

// Hidden helper (fast *ngIf replacement)
.invisible {
    visibility: hidden;
}

//
// Drop area for drag and drop features.
//
.drop-container {
    & {
        position: relative;
    }

    .drop-area {
        & {
            @include absolute(30px, 30px, 30px, 30px);
            @include border-radius;
            align-content: center;
            align-items: center;
            border: 2px dashed $color-border;
            color: darken($color-border, 30%);
            display: none;
            font-size: 1.2rem;
            font-weight: normal;
            justify-content: center;
            z-index: 10;
        }

        &.dragging {
            display: flex;
        }

        &.drag {
            border-color: darken($color-border, 10%);
            color: darken($color-border, 40%);
            cursor: copy;
            text-decoration: none;
        }
    }

    .drop-text {
        background: $color-dark-foreground;
    }
}

.sorting {
    &,
    & > * {
        opacity: .5;
    }
}

//
// Animations
//
.spin {
    animation: spin 3s infinite linear;
}

.spin2 {
    animation: spin2 1s infinite linear;
}

i {
    &.spin {
        display: inline-block;
    }

    &.spin2 {
        display: inline-block;
    }
}

@keyframes spin2 {
    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    20% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(180deg);
    }

    70% {
        transform: rotate(180deg);
    }

    80% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}