Your IP : 216.73.216.104

Current Path : /home/p/o/n/poneycluc/www/templates/ja_stark/scss/
Upload File :
Current File : /home/p/o/n/poneycluc/www/templates/ja_stark/scss/_megamenu.scss

/**
* $JA#COPYRIGHT$
*/


// EXTEND STYLE IN BASE
// --------------------
@import "../../../plugins/system/t4/themes/base/scss/megamenu";

.t4-megamenu {
  flex-direction: row-reverse;

  // THE MEGAMENU
  //--------------------------------------------
  .navbar-nav {
    > li {
      padding-left: $navbar-padding-x/2;
      padding-right: $navbar-padding-x/2;

      > a,
      > .nav-link {
        color: $navbar-dark-color;
        padding: $navbar-padding-y/2 0;
        border-bottom: 1px solid transparent;
        margin-bottom: -1px;

        .item-caret::before {
          border-top-color: $navbar-dark-color;
          margin-top: 3px;
        }

        &:hover, &:focus, &:active {
          color: $navbar-dark-hover-color;
        }

        &:after {
        }

        .mega-caption {
          position: absolute;
        }
      }

      // Parent focus
      &.show,
      &:hover {
        
        > a, 
        > .nav-link {
          color: $navbar-dark-hover-color;
        }
      }

      // Active item
      &.active {
        > a,
        > .nav-link {
          color: $navbar-dark-active-color;
          border-bottom: 1px solid $navbar-dark-active-color;
        }
      }
    }
  }

  // Dropdown menu
  .mega-dropdown-inner {
    > .row > .col-md {
      padding-right: $grid-gutter-width/2;
      padding-left: $grid-gutter-width/2;
    }
  }

  .mega-dropdown-inner {
    > .row {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .dropdown-menu {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    min-width: $dropdown-min-width;
    margin-top: 0;
    padding: 0;

    @include media-breakpoint-up(lg) {
      background: $dropdown-bg;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    }

    ul {
      padding-top: $spacer;
      padding-bottom: $spacer;

      > li {
        a.nav-link,
        a.dropdown-item {
          color: $white;
          padding: $navbar-padding-y/4 $navbar-padding-x/2;

          &:hover {
            color: $secondary;
            background: $dropdown-link-hover-bg;
          }
        }
      }

      > .active {
        a.nav-link,
        a.dropdown-item {
          color: $secondary !important;
        }
      }
    }

    .mega-nav {
      > li {
        a.nav-link,
        a.dropdown-item {
          padding-right: 0;
          padding-left: 0;
          color: $white;

          &:hover {
            color: $secondary;
            background: $dropdown-link-hover-bg;
          }
        }
      }

      > .active {
        a.nav-link,
        a.dropdown-item {
          color: $secondary !important;
        }
      }
    }

    > li {
      &:last-child {
        border: 0;
      }

      > a,
      > .nav-link { 
        color: $navbar-light-color;
        padding: $navbar-padding-y/1.5 $navbar-padding-x;

        &:hover, &:focus, &:active {
          color: $navbar-light-hover-color;

          @include media-breakpoint-up(lg) {
            background-color: $gray-100;
          }
        }
      }

      // Parent focus
      &.show,
      &:hover {
        
        > a, 
        > .nav-link {
        }
      }
    }
  }

  // Parent hover
  .parent {
  }

  .dropdown-toggle {
    &:after {
      margin-top: $spacer/2;
      float: right;
    }
  }

  .dropdown {
    &:hover {
      > .dropdown-menu {
      } 
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 1rem 0;
    }
  }

  // Modules in Megamenu
  // -------------------
  .t4-module {
    border-radius: 0;
    border: 0;
  }

  .t4-module, 
  .mega-col-nav {
    .mega-col-title {
      margin-bottom: 0;

      @include media-breakpoint-up(sm) {
        padding-bottom: $spacer;
        padding-top: $spacer;
        font-size: $font-size-base;
        color: $headings-color;        
      }
    }
  }

  .t4-module .module-inner {
  }
}

// Style for breakdown configure
.nav-breakpoint {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    &#{$infix} {
      .t4-megamenu {
        .navbar-nav {
          > li {
            > a,
            > .nav-link {
              @include media-breakpoint-up($breakpoint) {
                padding: $navbar-padding-y $navbar-padding-x;
              }
            }
          }
        }

        // Dropdown menu
        .mega-dropdown-inner {
          > .row > .col-md {
            @include media-breakpoint-up($breakpoint) {
              padding-right: $grid-gutter-width;
              padding-left: $grid-gutter-width;        
            }
          }
        }

        .dropdown-menu {
          @include media-breakpoint-up(lg) {
            background: $dropdown-bg;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
          }

          ul {
            > li {
              a.nav-link,
              a.dropdown-item {
                @include media-breakpoint-up($breakpoint) {
                  color: $dropdown-link-color;
                  padding: $navbar-padding-y/4 $navbar-padding-x;
                }
              }
            }
          }

          .mega-nav {
            > li {
              a.nav-link,
              a.dropdown-item {
                padding-left: 0;
                padding-right: 0;
                
                @include media-breakpoint-up($breakpoint) {
                  color: $dropdown-link-color;
                }
              }
            }
          }

          > li {
            > a,
            > .nav-link { 
              @include media-breakpoint-up($breakpoint) {
                color: $navbar-light-color;
              }

              &:hover, &:focus, &:active {
                @include media-breakpoint-up(lg) {
                  background-color: $gray-100;
                }
              }
            }

            // Parent focus
            &.show,
            &:hover {
              
              > a, 
              > .nav-link {
                @include media-breakpoint-up($breakpoint) {
                  border-bottom: 1px solid $navbar-dark-hover-color;
                }
              }
            }
          }
        }

        .t4-module, 
        .mega-col-nav {
          .mega-col-title {
            color: $white;
            
            @include media-breakpoint-up($breakpoint) {
              padding-bottom: $spacer;
              padding-top: $spacer;
              font-size: $font-size-base;
              color: $headings-color;        
            }
          }
        }
      }
    }
  }
}