Proyectos de Subversion Moodle

@mixin hover-navbar {
    border-color: transparent;
    background-color: $gray-100;
}

.navbar.fixed-top {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    border-bottom: $gray-300 1px solid;
    align-items: stretch;
    height: $navbar-height + 1px;
    z-index: $zindex-fixed;

    .navbar-brand {
        .logo {
            max-height: calc(#{$navbar-height} - (#{$primary-nav-padding-y} * 2));
        }
    }
    .nav-link {
        height: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
    .divider {
        width: 1px;
        background-color: $gray-300;
    }

    #usernavigation .nav-link {
        padding: 0 $primary-nav-padding-x;
    }
    .login {
        display: flex;
        align-items: center;
    }
    .usermenu {
        display: flex;
        .action-menu {
            display: flex;
            align-items: center;
        }
        .dropdown {
            display: flex;
            align-items: center;
            .dropdown-toggle {
                padding-top: 0;
                padding-bottom: 0;
                border-radius: 0;
                display: flex;
                align-items: center;
                height: 100%;
            }
        }
        .dropdown-menu {
            min-width: 235px;
            .carousel-navigation-link {
                > * {
                    pointer-events: none;
                }
            }
            .dropdown-item {
                padding: .25rem 1.75rem .25rem .75rem;
                &.carousel-navigation-link::after {
                    //TODO
                    content: '';
                    font-size: 1rem;
                    right: .75rem;
                    position: absolute;
                }
            }
            .submenu {
                .header {
                    padding: .25rem .75rem;
                    font-size: .975rem;
                    .icon {
                        font-size: 20px;
                        height: 20px;
                        width: 20px;
                        margin: 0;
                    }
                }
                .items {
                    .dropdown-item {
                        &[aria-current="true"]::before {
                            //TODO
                            content: '';
                            font-size: 0.75rem;
                            padding-left: .25rem;
                        }
                    }
                }
            }
        }
        .login {
            display: flex;
            align-items: center;
        }
    }
    .usermenu,
    .langmenu {
        .dropdown {
            display: flex;
            align-items: center;
            height: 100%;
            .dropdown-toggle {
                padding-top: 0;
                padding-bottom: 0;
                border-radius: 0;
                display: flex;
                align-items: center;
                height: 100%;
            }
        }
    }
    .langmenu {
        .dropdown-menu {
            .dropdown-item {
                &[aria-current="true"]::before {
                    content: "\f00c";
                    font-size: 0.75rem;
                    padding-left: .25rem;
                }
            }
        }

        @include media-breakpoint-between(xs, sm) {
            .langbutton {
                display: none;
            }
        }
    }

    .moodle-actionmenu .menubar,
    .action-menu-trigger .dropdown {
        height: 100%;
        display: flex;
    }
}

.dir-rtl .navbar.fixed-top {
    .usermenu {
        .dropdown-menu {
            .dropdown-item {
                &.carousel-navigation-link::after {
                    //TODO
                    content: '';
                }
            }

            .carousel {
                .carousel-inner {

                    .carousel-item-prev.carousel-item-right,
                    .carousel-item-next.carousel-item-left {
                        transform: translateX(0);
                    }

                    .carousel-item-next,
                    .carousel-item-right.active {
                        transform: translateX(-100%);
                    }

                    .carousel-item-prev,
                    .carousel-item-left.active {
                        transform: translateX(100%);
                    }
                }
            }
        }
    }
}

.pagelayout-embedded #page {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.rui-courseheadermenu-container {
    @include media-breakpoint-down(md) {
        overflow-x: auto;

        .header-links {
            width: max-content;
        }
    }
}

.rui-course-nav-container {
    width: max-content;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 0;

    border-bottom: 1px solid $border-color;
    font-weight: $font-weight-medium;
    font-size: 0.813rem; //13px

    .theme-dark & {
        color: $dm-gray-900;
        border-color: $dm-border-color;
    }

    @include media-breakpoint-between(xs, sm) {
        margin-top: 0;
    }

    .header-link-item {
        display: inline-flex;
        align-items: center;
        position: relative;

        margin: 5px 1.5rem 5px 0;
        padding: .55rem 0;

        border-radius: $btn-border-radius;
        color: $gray-700;

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

        .theme-dark & {
            color: $dm-gray-700;
        }

        .header-link-item-icon {
            margin-right: .35rem;
            opacity: .7;
        }

        &:before {
            content: '';
            position: absolute;

            top: 0;
            bottom: -6px;
            left: 0;
            right: 0;

            border-bottom: 1px solid $primary-color-600;

            transition: $transition-base;

            opacity: 0;

            .theme-dark & {
                border-color: $primary-color-400;
            }
        }

        &:hover {
            text-decoration: none;
            color: $primary-color-600;

            .theme-dark & {
                color: $primary-color-400;
            }

            &:before {
                opacity: 1;
            }
        }

        &.active {
            color: $primary-color-600;

            .theme-dark & {
                color: $primary-color-400;
            }

            &:before {
                opacity: 1;
            }
        }

    }
}

.rui-course-nav-wrapper {
    width: 100%;

    @include media-breakpoint-up(md) {
        margin: 30px 0;
    }

    @include media-breakpoint-between(xs, sm) {
        margin: 0;
    }

    .moremenu {
        @include media-breakpoint-between(xs, sm) {
            height: max-content;
        }
    }
}

.rui-course-nav {
    background-color: $gray-100;
    border-radius: $btn-border-radius;

    font-size: 1.125rem; // 18px
    font-weight: $font-weight-medium;

    @include media-breakpoint-up(lg) {
        width: max-content;
        margin: 0;
    }

    @include media-breakpoint-between(xs, md) {
        margin: 0 auto;
    }

    .theme-dark & {
        background-color: $black;
    }

    .nav-link {
        background-color: transparent;
        border-radius: $btn-border-radius;
        color: $body-color;
        border: 0;

        @include media-breakpoint-up(md) {
            padding: 10px 20px;
        }

        @include media-breakpoint-between(xs, sm) {
            padding: 8px 14px;
            font-size: $font-size-md;
        }
    

        .theme-dark & {
            color: $dm-body-color;
        }
    }

    .btn--more {
        margin: 3px;
    }
}

.tag-index-toc {
    position: sticky;
    top: 0;
}

.actions {
    .btn-link {
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        border-bottom: 1px solid $border-color;

        a {
            font-weight: $font-weight-medium;
            color: $body-color;

            .theme-dark & {
                color: $dm-body-color;
            }
        }

        &:hover {
            border-color: $primary-color-600;
        }

        .theme-dark & {
            border-color: $dm-border-color;
        }
    }
}