squidex/src/Squidex/app/theme/_bootstrap.scss

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

body {
    background: $color-background;
}

.navbar {
    & {
        height: $size-navbar-height;
    }

    &-nav {
        line-height: 2.2rem;
    }

    &-fixed-top {
        @include fixed(0, 0, auto, 0);
        z-index: 10000;
    }

    .dropdown-menu {
        top: 2.6rem;
    }
}

.nav-pills {
    .nav-link {
        @include border-radius(0);
    }
}

.navbar-nav {
    .nav-link {
        cursor: pointer;
    }
}

.dropdown-menu {
    @include box-shadow(0, 3px, 16px, .2px);
    border: 0;
    background: $panel-light-background;
}

.nav-dark {
    & {
        background: $color-dark2-background;
    }

    .nav-item + .nav-item {
        margin: 0;
    }

    &-bordered {
        .nav-link {
            border-bottom: 1px solid $color-dark2-separator;
        }

        .nav-item {
            &:last-child {
                .nav-link {
                    border: 0;
                }
            }
        }
    }

    &.nav-pills {
        .nav-link {
            & {
                color: $color-dark2-foreground;
            }

            &:hover,
            &.active {
                color: $color-dark1-focus-foreground;
            }

            &.active {
                background: $color-dark2-active-background;
            }
        }
    }
}

.nav-field-tabs {
    & {
        @include absolute(auto, auto, 0, 1.25rem);
    }

    & .nav-link {
        & {
            color: $color-text;
            cursor: pointer;
            padding: 1rem .625rem;
            border-bottom: .25rem solid transparent;
            width: 6.25rem;
            text-align: center;
        }

        &.active {
            font-weight: bold;
        }

        &.active,
        &:hover {
            border-color: $color-theme-blue;
        }
    }
}

@mixin link-button($color) {
    color: $color;
    cursor: pointer;

    &:focus {
        outline-color: transparent;
    }

    &:disabled {
        @include opacity(.4);
    }

    &:disabled,
    &.disabled {
        cursor: not-allowed;
        border-color: transparent;
    }

    &:focus,
    &:active,
    &:hover {
        color: darken($color, 8%);
        border-color: transparent;
        background: transparent;
        text-decoration: none;
    }
}

.btn {
    &-simple {
        & {
            background: transparent;
            color: $color-border-dark;
        }

        &:hover,
        &.active {
            color: $color-text;
        }
    }

    &-cancel {
        padding: .2rem;
        font-size: 1.5rem;
        font-weight: normal;
    }

    &-radio {
        & {
            color: $color-border-dark;
            cursor: pointer;
            border: 1px solid $color-border;
            background: transparent;
            margin-right: .5rem;
            font-size: 1.5rem;
            font-weight: normal;
            text-align: center;
            width: 4.5rem;
        }

        .radio-label {
            display: block;
            font-size: .7rem;
            font-weight: bold;
            margin-left: -.5rem;
            margin-right: -.5rem;
            line-height: 1.5rem;
        }

        &.active {
            & {
                @include box-shadow(0, 0, 10px, .5);
                background: $color-theme-blue;
                border-color: $color-theme-blue;
                color: $color-accent-dark;
            }

            &:hover {
                color: $color-accent-dark;
            }
        }

        &:hover {
            color: $color-theme-blue;
        }

        .radio-input {
            display: none;
        }
    }

    &-link {
        &.btn-danger {
            @include link-button($color-theme-error);
        }

        &.btn-primary {
            @include link-button($color-theme-blue);
        }
    }
}

.modal {
    &-content,
    &-header {
        border: 0;
    }

    &-backdrop {
        @include opacity(.5);
    }

    &-header {
        @include border-radius-top(.3rem);
        background: $color-modal-header-background;

        h4 {
            color: $color-modal-header-foreground;
            font-size: 1rem;
            font-weight: normal;
        }

        .close {
            & {
                @include opacity(1);
                @include text-shadow-none;
                color: $color-modal-header-foreground;
                font-size: 1.6rem;
                font-weight: 400;
            }

            &:hover {
                color: lighten($color-modal-header-foreground, 15%);
            }
        }
    }

    &-content {
        @include box-shadow(0, 6px, 16px, .4);
        @include border-radiusn(.4rem, .35rem, .35rem, .4rem);
    }

    &-dialog {
        & {
            z-index: 1100;
        }

        @media (min-width: 576px) {
            margin-top: 4.5rem;
        }
    }
}

.table {
    &-fixed {
        table-layout: fixed;
    }

    &-middle {
        td {
            vertical-align: middle;
        }
    }

    &-borderless {
        td {
            border: 0;
        }
    }
}