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: 10px 0;
  margin: 0;

  font-size: $font-size-sm;
  font-weight: $font-weight-medium;

  &.root {
    max-width: 100%;
    width: max-content;
  }

  +.nav-tabs {
    margin-top: .25rem;
  }

  .nav-item {
    display: block;

    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

  .nav-item {
    &:last-child {
      margin-right: 0;
    }
  }

  .nav-link {
    padding: 0;
    margin-right: 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 {
      color: $nav-tabs-link-hover-color;
      text-decoration: none;

      .theme-dark & {
        color: var(--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 {
    color: $nav-tabs-link-active-color;

    &:hover {
      color: $nav-tabs-link-hover-color;
    }

    .theme-dark & {
      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;
  }
}


/* universe 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: var(--primary-color-500);
      width: 0%;
      height: 1px;

      position: absolute;
      left: 1px;
      bottom: -6px;

      opacity: 0;

      transition: all 350ms ease;

      .theme-dark & {
        background-color: var(--primary-color-300);
      }
    }

    &:hover {
      color: var(--main-theme-color);
      text-decoration: none;

      .theme-dark & {
        color: var(--primary-color-400);
      }

      &:after {
        width: 100%;
        opacity: 1;
      }
    }

    &.active {
      color: var(--primary-color-400);

      &:after {
        color: var(--primary-color-400);
        background-color: var(--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: $btn-border-radius-lg;
  }

  .nav-tabs {
    background-color: $gray-100;
    border-radius: $btn-border-radius-lg;

    @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: block;
      position: relative;

      border-radius: $btn-border-radius-lg;

      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: var(--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;
        }

      }
    }

  }
}