squidex/frontend/app/theme/_bootstrap.scss

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

@import './../../node_modules/bootstrap/scss/mixins/_buttons';

//
// Bade colors
//
.badge {
    & {
        font-size: .9rem;
        font-weight: normal;
        padding: .25rem .6rem;
    }

    &-primary {
        color: $color-badge-primary-foreground;
        background: $color-badge-primary-background;
    }

    &-secondary {
        color: $color-badge-secondary-foreground;
        background: $color-badge-secondary-background;
    }

    &-success {
        color: $color-badge-success-foreground;
        background: $color-badge-success-background;
    }

    &-info {
        color: $color-badge-info-foreground;
        background: $color-badge-info-background;
    }

    &-warning {
        color: $color-badge-warning-foreground;
        background: $color-badge-warning-background;
    }

    &-danger {
        color: $color-badge-danger-foreground;
        background: $color-badge-danger-background;
    }
}

// 
// Alert overrides.
//
.alert-success,
.alert-warning,
.alert-info,
.alert-danger {
    & {
        border: 0;
    }

    .alert-link {
        color: $color-dark-foreground !important;
        font-size: inherit;
        font-weight: normal;
        text-decoration: underline;
    }

    .close {
        & {
            font-weight: 400;
            font-size: 1.6rem;
            padding-top: .25rem;
        }

        &:hover,
        &:focus {
            color: inherit;
        }
    }
}

.alert-info {
    background: $color-theme-blue;
    border: 0;
}

.alert-hint {
    @include border-radius(0);
    background: lighten($color-theme-blue, 35%);
    border: 1px solid $color-border;
    font-size: 90%;
    font-weight: normal;
    color: $color-text;

    .alert-link {
        color: $color-text !important;
    }

    i {
        color: $color-theme-blue;
        font-size: 1.2rem;
        font-weight: normal;
        vertical-align: text-bottom;
    }
}

a {
    &:disabled,
    &.disabled {
        @include opacity(.8);
        pointer-events: none;
    }

    &.btn {
        &:focus {
            color: inherit;
        }
    }

    &.pointer {
        cursor: pointer;
    }

    &.force {
        & {
            color: $color-theme-blue !important;
        }

        &:hover {
            text-decoration: underline !important;
            cursor: pointer;
            color: inherit;
        }
    }
}

//
// Fix navbar.
// 
.navbar {
    // Use fixed height to reduce problems with dynamic elements.
    & {
        height: $size-navbar-height;
    }

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

    // Ensure that dropdown is always under nav bar.
    .dropdown-menu {
        top: 2.6rem;
    }
}

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

//
// Restyle dropdown menu.
//
.dropdown-menu {
    // White dropdown menu without border and shadow.
    & {
        @include box-shadow(0, 3px, 16px, .2);
        border: 0;
        background: $panel-light-background;
        z-index: 1200;
    }

    a {
        // Special style for menu item to delete something.
        &.dropdown-item-delete {
            & {
                color: $color-theme-error;
            }

            &:hover {
                color: $color-theme-error-dark;
            }

            &:active {
                background: $color-theme-error-dark;
            }

            &:disabled,
            &.disabled {
                color: lighten($color-theme-error, 20%);
            }
        }

        &.dropdown-item {
            // Make the color white on active.
            &:active {
                color: $color-dark-foreground;
            }
        }
    }
}

.dropdown-divider {
    &:first-child {
        display: none;
    }

    &:last-child {
        display: none;
    }

    & + .dropdown-divider {
        display: none;
    }
}

//
// Dark vertical menu for dark panels.
//
.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 {
                    // Keep border between two items, not after last item.
                    border: 0;
                }
            }
        }
    }

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

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

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

//
// Tab control navigation.
//
.nav-tabs2 {
    & {
        @include absolute(auto, auto, 0, 1.25rem);
    }

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

        &.active {
            font-weight: bold;
        }

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

//
// Corresponding icon colors for external login buttons.
//
.icon {
    &-github {
        color: $color-extern-github-icon;
    }

    &-google {
        color: $color-extern-google-icon;
    }

    &-microsoft {
        color: $color-extern-microsoft-icon;
    }

    &-twitter {
        color: $color-extern-twitter-icon;
    }
}

.icon-sm {
    font-size: 70%;
}

//
// Button improvements
//
.btn {
    // Buttons for external logins.
    &-github {
        @include button-variant($color-extern-github, $color-extern-github);

        &:hover,
        &:focus {
            .icon-github {
                color: darken($color-extern-github-icon, 5%);
            }
        }
    }

    &-google {
        @include button-variant($color-extern-google, $color-extern-google);

        &:hover,
        &:focus {
            .icon-google {
                color: darken($color-extern-google-icon, 5%);
            }
        }
    }

    &-microsoft {
        @include button-variant($color-extern-microsoft, $color-extern-microsoft);

        &:hover,
        &:focus {
            .icon-microsoft {
                color: darken($color-extern-microsoft-icon, 5%);
            }
        }
    }

    &-twitter {
        @include button-variant($color-extern-twitter, $color-extern-twitter);

        & {
            color: $color-dark-foreground;
        }

        &:hover,
        &:focus {
            .icon-twitter {
                color: darken($color-extern-twitter-icon, 5%);
            }
        }
    }

    // Special radio button.
    &-radio {
        & {
            @include border-radius;
            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;
        }

        .radio-input {
            display: none;
        }

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

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

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

    // Special button groups
    &-group {
        .btn-toggle {
            & {
                border: 1px solid $color-theme-secondary;
                background: $color-dark-foreground;
            }

            &.btn-primary {
                @include build-toggle-button($color-theme-blue, $color-badge-primary-background);
            }

            &.btn-info {
                @include build-toggle-button($color-theme-info, $color-badge-info-background);
            }

            &.btn-danger {
                @include build-toggle-button($color-theme-error, $color-badge-danger-background);
            }

            &.btn-success {
                @include build-toggle-button($color-theme-green, $color-badge-success-background);
            }

            &.btn-warning {
                @include build-toggle-button($color-theme-orange, $color-badge-warning-background);
            }
        }

        .btn + .btn-toggle {
            margin-left: -2px;
        }
    }

    // Link buttons only exists with blue text color in bootstrap. Provide them for all colors.
    &-text {
        & {
            @include build-text-button($color-theme-blue);
        }

        &-secondary {
            @include build-text-button($color-text-decent);
        }

        &-danger {
            @include build-text-button($color-theme-error);
        }

        &-success {
            @include build-text-button($color-theme-green);
        }

        &-info {
            @include build-text-button($color-theme-info);
        }

        &-warning {
            @include build-text-button($color-theme-orange);
        }
    }
}

//
// Restyle modal dialogs.
//
.modal {
    &-header,
    &-footer {
        @include flex-shrink(0);
    }

    &-body {
        overflow-y: auto;
    }

    &-header {
        & {
            @include border-radius-top(.25rem);
            background: $color-modal-header-background;
            border: 0;
            color: $color-modal-header-foreground;
        }

        h4 {
            font-size: 1rem;
            font-weight: normal;
        }

        .close {
            & {
                color: $color-modal-header-foreground;
            }

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

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

    &-fh {
        .modal-content {
            min-height: 100%;
        }
    }

    &-lg {
        @media (min-width: 992px) {
            max-width: 854px;
        }
    }

    &-dialog {
        & {
            @include absolute(0, 0, 0, 0);
            z-index: 1100;
        }
    }

    &-tabs {
        background: $color-border;
        position: relative;
        padding: .75rem 1.25rem;
        height: 70px;
    }

    &-footer {
        .clearfix {
            width: 100%;
        }
    }
}

// 
// Table Helpers
// 
.table {
    // Use fixed width for columns.
    &-fixed {
        table-layout: fixed;
    }

    // Vertical align cells.
    &-middle {
        td {
            vertical-align: middle;
        }
    }

    // Remove all borders.
    &-borderless {
        td,
        th {
            border: 0;
        }
    }

    &-lesspadding {
        td {
            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                padding-right: 0;
            }
        }
    }

    tbody + tbody {
        border: 0;
    }
}