Proyectos de Subversion Moodle

// Base class

//

// Kickstart any navigation component with a set of style resets. Works with

// `<nav>`s, `<ul>`s or `<ol>`s.

.nav {

  display: flex;

  flex-wrap: wrap;

  padding-left: 0;

  margin-bottom: 0;

  list-style: none;

}

.nav-link {

  text-decoration: if($link-decoration==none, null, none);

  @include hover-focus() {

    text-decoration: none;

  }

  // Disabled state lightens text

  &.disabled {

    color: $nav-link-disabled-color;

    pointer-events: none;

    cursor: default;

    .theme-dark & {

      color: $dm-nav-link-disabled-color;

    }

  }

}

.nav-tabs {

  padding: 0;

  margin: 0;

  font-size: $font-size-md;

  font-weight: $font-weight-medium;

  &.root {

    max-width: 100%;

    width: max-content;

    background-color: $gray-100;

    border-radius: $btn-border-radius-md;

    .theme-dark & {

      background-color: $dm-gray-100;

    }

  }

  +.nav-tabs {

    margin-top: .25rem;

  }

  .nav-item {

    display: flex;

    &:focus {

      outline: none;

      box-shadow: none;

    }

  }

  .nav-item {

    &:last-child {

      margin-right: 0;

    }

  }

  .nav-link {

    padding: 7px 16px;

    display: inline-flex;

    position: relative;

    border-radius: $btn-border-radius;

    font-weight: $font-weight-medium;

    color: $gray-900;

    transition: $transition-base;

    .theme-dark & {

      color: $dm-gray-900;

    }

    &:hover {

      background-color: $nav-tabs-link-hover-bg;

      color: $nav-tabs-link-hover-color;

      text-decoration: none;

      .theme-dark & {

        color: $primary-color-100;

      }

      &:before {

        opacity: 1;

      }

    }

    &.active {

      &::before {

        opacity: 0;

      }

    }

    &.disabled {

      color: $nav-link-disabled-color;

      opacity: 0.4;

      .theme-dark & {

        color: $dm-nav-link-disabled-color;

      }

    }

  }

  .nav-link.active,

  .nav-item.show .nav-link {

    background-color: $nav-tabs-link-active-bg;

    color: $nav-tabs-link-active-color;

    &:hover {

      background-color: $nav-tabs-link-hover-bg;

      color: $nav-tabs-link-hover-color;

    }

    .theme-dark & {

      background-color: $dm-gray-300;

      color: $dm-gray-600;

    }

  }

  // .dropdown-menu {

  //   // Make dropdown border overlap tab border

  //   margin-top: -$nav-tabs-border-width;

  //   // Remove the top rounded corners here since there is a hard edge above the menu

  //   //@include border-top-radius(0);

  // }

}

.dropdown .nav-item {

  margin-right: 0 !important;

  width: 100%;

}

//

// Pills

//

.nav-pills {

  .nav-link {

    @include border-radius($nav-pills-border-radius);

    color: $nav-pills-link-active-color;

    font-weight: $font-weight-medium;

    .theme-dark & {

      color: $dm-nav-pills-link-active-color;

    }

  }

  .nav-link.active,

  .show>.nav-link {

    color: $body-color;

    background-color: $nav-pills-link-active-bg;

    .theme-dark & {

      color: $dm-body-color;

      background-color: $dm-nav-pills-link-active-bg;

    }

  }

}

//

// Justified variants

//

.nav-fill {

  >.nav-link,

  .nav-item {

    flex: 1 1 auto;

    text-align: center;

  }

}

.nav-justified {

  >.nav-link,

  .nav-item {

    flex-basis: 0;

    flex-grow: 1;

    text-align: center;

  }

}

// Tabbable tabs

//

// Hide tabbable panes to start, show them when `.active`

.tab-content {

  >.tab-pane {

    display: none;

    .list-unstyled {

      line-height: 2;

    }

  }

  >.active {

    display: block;

  }

}

/* monocolor THEME */

.rui-courseheadermenu-container {

  margin-top: 20px;

  font-weight: $font-weight-medium;

  font-size: $font-size-md;

  +.page-content {

    margin-top: $page-padding-global;

  }

  &.rui-topbar--custom-menu {

    @include media-breakpoint-down(sm) {

      position: relative;

      top: 0;

    }

  }

  @include media-breakpoint-down(md) {

    overflow-x: auto;

    .header-links {

      width: max-content;

    }

  }

  .header-link-item {

    display: inline-flex;

    align-items: center;

    position: relative;

    margin: 5px 16px 5px 0;

    color: $body-color;

    &:last-of-type {

      margin-right: 0;

    }

    .theme-dark & {

      color: $dm-body-color;

    }

    .header-link-item-icon {

      opacity: .7;

      margin-right: .35rem;

    }

    &:after {

      content: '';

      background-color: $primary-color-500;

      width: 0%;

      height: 1px;

      position: absolute;

      left: 1px;

      bottom: -6px;

      opacity: 0;

      transition: all 350ms ease;

      .theme-dark & {

        background-color: $primary-color-300;

      }

    }

    &:hover {

      color: $primary-color-600;

      text-decoration: none;

      .theme-dark & {

        color: $primary-color-400;

      }

      &:after {

        width: 100%;

        opacity: 1;

      }

    }

    &.active {

      color: $primary-color-400;

      &:after {

        color: $primary-color-400;

        background-color: $primary-color-400;

        width: 100%;

        opacity: 1;

      }

    }

  }

}

@include media-breakpoint-down(md) {

  .main-nav-container-overflow {

    overflow-x: auto;

    overflow-y: hidden;

  }

}

.main-nav-container {

  .header-link-item {

    padding: .65rem 0;

    margin-right: 1rem;

  }

}

.nav-column {

  margin: 0;

  padding: 0 20px 0 0;

  border-right: 1px solid $border-color;

  .theme-dark & {

    border-right: 1px solid $dm-border-color;

  }

  @include media-breakpoint-between(xs, sm) {

    padding: 0;

    border-right: none;

  }

  li {

    a {

      padding: 16px 0;

      display: block;

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

      color: $body-color;

      font-weight: $font-weight-medium;

      position: relative;

      .theme-dark & {

        border-bottom: 1px solid $dm-border-color;

        color: $dm-body-color;

      }

      @include media-breakpoint-between(xs, sm) {

        padding: 16px;

      }

      &.active,

      &:hover {

        color: $link-color;

        border-color: $link-color;

        .theme-dark & {

          color: $dm-link-color;

          border-color: $dm-link-color;

        }

        &:before {

          content: '';

          background-color: rgba($link-color, .05);

          position: absolute;

          z-index: -1;

          width: calc(100% + 12px);

          top: 4px;

          bottom: 4px;

          left: -6px;

          border-radius: $btn-border-radius;

          .theme-dark & {

            background-color: rgba($link-color, .3);

          }

        }

      }

    }

  }

}

// CSS like moremenu but with less classes

.rui-tabs {

  .nav-item a {

    display: flex;

    align-items: center;

    &.focus,

    &:focus {

      position: relative;

    }

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 30px;

  }

  .nav-tabs {

    background-color: $gray-100;

    border-radius: 30px;

    @include media-breakpoint-up(lg) {

      margin-left: 0;

    }

    @include media-breakpoint-between(xs, md) {

      margin: 0 auto;

    }

    @include media-breakpoint-up(md) {

      width: max-content;

      max-width: 100%;

    }

    @include media-breakpoint-between(xs, sm) {

      width: 100%;

      padding: 10px;

    }

    .theme-dark & {

      background-color: #06090c;

    }

    a {

      padding: 7px 16px;

      display: inline-flex;

      position: relative;

      border-radius: 30px;

      font-weight: $font-weight-medium;

      color: $gray-900;

      transition: $transition-base;

      .theme-dark & {

        color: $dm-gray-900;

      }

      &:hover {

        background-color: $nav-tabs-link-hover-bg;

        color: $nav-tabs-link-hover-color;

        text-decoration: none;

        .theme-dark & {

          color: $primary-color-400;

        }

        &:before {

          opacity: 1;

        }

      }

      &.active {

        &::before {

          opacity: 0;

        }

      }

      &.disabled {

        color: $nav-link-disabled-color;

        opacity: 0.4;

        .theme-dark & {

          color: $dm-nav-link-disabled-color;

        }

      }

    }

  }

}