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

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

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

//
// Override most common header sizes
//
h1 {
    font-size: 1.3rem;
}

h2 {
    font-size: 1.1rem;
}

h3 {
    font-size: 1.05rem;
}

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

    &-default {
        color: $color-badge-default-foreground;
    }

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

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

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

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

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

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

//
// 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, .2px);
        border: 0;
        background: $panel-light-background;
    }

    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;
            }
        }
    }
}

//
// 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-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;
        }
    }
}

//
// 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;
    }
}

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

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

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

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

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

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

    // Special radio button.
    &-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;
        }

        .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;
        }
    }

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

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

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

        &.btn-decent {
            @include build-link-button($color-subtext);
        }
    }
}

//
// Restyle modal dialogs.
//
.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 Helpers
// 
.table {
    // Use fixed width for columns.
    &-fixed {
        table-layout: fixed;
    }

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

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

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

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