Proyectos de Subversion Moodle

// Contents

//

// Navbar

// Navbar brand

// Navbar nav

// Navbar text

// Navbar divider

// Responsive navbar

// Navbar position

// Navbar themes

// Navbar

//

// Provide a static navbar from which we expand to create full-width, fixed, and

// other navbar variations.

.navbar {

  position: relative;

  display: flex;

  flex-wrap: wrap; // allow us to do the line break for collapsing content

  align-items: center;

  justify-content: space-between; // space out brand from logo

  padding: $navbar-padding-y $navbar-padding-x;

  // Because flex properties aren't inherited, we need to redeclare these first

  // few properties so that content nested within behave properly.

  %container-flex-properties {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

  }

  .container,

  .container-fluid {

    @extend %container-flex-properties;

  }

  @each $breakpoint,

  $container-max-width in $container-max-widths {

    >.container#{breakpoint-infix($breakpoint, $container-max-widths)} {

      @extend %container-flex-properties;

    }

  }

}

// Navbar brand

//

// Used for brand, project, or site names.

.navbar-brand {

  display: inline-block;

  padding-top: $navbar-brand-padding-y;

  padding-bottom: $navbar-brand-padding-y;

  margin-right: 25px;

  @include font-size($navbar-brand-font-size);

  line-height: inherit;

  white-space: nowrap;

  @include hover-focus() {

    text-decoration: none;

  }

}

// Navbar nav

//

// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).

.navbar-nav {

  display: flex;

  flex-direction: row; // cannot use `inherit` to get the `.navbar`s value

  padding-left: 0;

  margin-bottom: 0;

  list-style: none;

  .nav-link {

    padding-right: 0;

    padding-left: 0;

  }

}

// Navbar text

//

//

.navbar-text {

  display: inline-block;

  padding-top: $nav-link-padding-y;

  padding-bottom: $nav-link-padding-y;

}

// Responsive navbar

//

// Custom styles for responsive collapsing and toggling of navbar contents.

// Powered by the collapse Bootstrap JavaScript plugin.

// When collapsed, prevent the toggleable navbar contents from appearing in

// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`

// on the `.navbar` parent.

.navbar-collapse {

  flex-basis: 100%;

  flex-grow: 1;

  // For always expanded or extra full navbars, ensure content aligns itself

  // properly vertically. Can be easily overridden with flex utilities.

  align-items: center;

}

// Button for toggling the navbar when in its collapsed state

.navbar-toggler {

  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;

  @include font-size($navbar-toggler-font-size);

  line-height: 1;

  background-color: transparent; // remove default button style

  border: $border-width solid transparent; // remove default button style

  @include border-radius($navbar-toggler-border-radius);

  @include hover-focus() {

    text-decoration: none;

  }

}

// Keep as a separate element so folks can easily override it with another icon

// or image file as needed.

.navbar-toggler-icon {

  display: inline-block;

  width: 1.5em;

  height: 1.5em;

  vertical-align: middle;

  content: "";

  background: no-repeat center center;

  background-size: 100% 100%;

}

// Generate series of `.navbar-expand-*` responsive classes for configuring

// where your navbar collapses.

.navbar-expand {

  @each $breakpoint in map-keys($grid-breakpoints) {

    $next: breakpoint-next($breakpoint, $grid-breakpoints);

    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {

      @include media-breakpoint-down($breakpoint) {

        %container-navbar-expand-#{$breakpoint} {

          padding-right: 0;

          padding-left: 0;

        }

        >.container,

        >.container-fluid {

          @extend %container-navbar-expand-#{$breakpoint};

        }

        @each $size,

        $container-max-width in $container-max-widths {

          >.container#{breakpoint-infix($size, $container-max-widths)} {

            @extend %container-navbar-expand-#{$breakpoint};

          }

        }

      }

      @include media-breakpoint-up($next) {

        flex-flow: row nowrap;

        justify-content: flex-start;

        .navbar-nav {

          flex-direction: row;

          .dropdown-menu {

            position: absolute;

          }

          .nav-link {

            padding-right: $navbar-nav-link-padding-x;

            padding-left: $navbar-nav-link-padding-x;

          }

        }

        // For nesting containers, have to redeclare for alignment purposes

        %container-nesting-#{$breakpoint} {

          flex-wrap: nowrap;

        }

        >.container,

        >.container-fluid {

          @extend %container-nesting-#{$breakpoint};

        }

        @each $size,

        $container-max-width in $container-max-widths {

          >.container#{breakpoint-infix($size, $container-max-widths)} {

            @extend %container-nesting-#{$breakpoint};

          }

        }

        .navbar-nav-scroll {

          overflow: visible;

        }

        .navbar-collapse {

          display: flex !important; // stylelint-disable-line declaration-no-important

          // Changes flex-bases to auto because of an IE10 bug

          flex-basis: auto;

        }

        .navbar-toggler {

          display: none;

        }

      }

    }

  }

}