yuzu/assets/less/_top-bar.less

// main: style.less

.top-search-bar-container {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 60px;
  background: @top_bar_bg;
  background: var(--top_bar_bg);
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-top: -60px;
  transition: .2s;

  &.opened {
    margin-top: 0px;
    transition: .3s;
  }

  .super-large-container {
    position: relative;
    height: 60px;

    form {

      input {
        width: 100%;
        line-height: 60px;
        padding: 0;
        border: none;
        background: none;
        outline: none;
        font-size: 18px;
      }
    }

    .submit-top-bar-search {
      position: absolute;
      right: 0;
      top: 50%;
      height: 30px;
      margin-top: -15px;
      cursor: pointer;
      opacity: .5;
      transition: .1s;

      svg {
        height: 30px;
        width: 30px;
        stroke: @top_bar_color;
        stroke: var(--top_bar_color);
        stroke-width: 2px;
        cursor: pointer;
      }

      &:hover {
        opacity: 1;
        transition: .1s;
      }
    }
  }
}

.site-header {
  position: relative;
  z-index: 99;
  @header_height: 60px;
  width: 100%;
  background: @top_bar_bg;
  background: var(--top_bar_bg);
  height: @header_height;
  box-shadow: @shadow;
  box-shadow: var(--shadow);
    
  .top-bar-content {
    display: flex;

    .site-branding {
      flex: 1;
      max-width: 300px;

      .site-logo {
        height: 50px;
        margin-top: 5px;

        a, img {
          height: 100%;
          width: auto;
        }
      }

      .site-title {
        font-size: 18px;
        line-height: @header_height;
        margin: 0;
        
        a {
          color: @top_bar_color;
          color: var(--top_bar_color);
        }
      }
    }

    .site-navigation {
      flex: 1;
      line-height: @header_height;
      text-align: right;

      .menu-main-menu-container {
        display: inline-block;
        vertical-align: middle;

        @media screen and (max-width: 860px) {
          display: none;
        }
      }

      ul {
        margin: 0;
        padding: 0;

        li {
          position: relative;
          display: inline-block;
          list-style: none;
          margin-left: 10px;
          font-weight: 400;

          &.current-menu-item {
            font-weight: 600;

            a {
              opacity: 1;
            }
          }

          a {
            color: @top_bar_color;
            color: var(--top_bar_color);
            opacity: .5;
          }

          &:hover {

            a {
              opacity: 1;
              transition: .1s;
            }

            ul {
              visibility: visible;
              opacity: 1;
              transition: .1s;

              li a {
                opacity: .5;
              }
            }
          }

          ul {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            z-index: 999;
            background: @top_bar_bg;
            background: var(--top_bar_bg);
            padding: 20px;
            box-shadow: @shadow;
            box-shadow: var(--shadow);
            right: 0;
            margin-top: -1px;
            margin-right: -20px;
            transition: .1s;
            text-align: left;

            li {
              display: block;
              margin: 0;
              line-height: 30px;
              white-space: nowrap;

              &.current-menu-item {
                a {
                  opacity: 1;
                }
              }

              &:hover {
                a {
                  opacity: 1;
                }
              }

              ul, &.current-menu-item > ul, &:hover > ul {
                position: relative;
                padding: 10px 20px;
                border-left: 1px solid rgba(0,0,0,.4);
                box-shadow: none;

                li {
                  display: block;
                  margin: 0;
                  line-height: 30px;
                  white-space: nowrap;
                  
                  a {
                    opacity: .5;
                  }

                  &.current-menu-item {
                    a {
                      opacity: 1;
                    }
                  }

                  &:hover {
                    a {
                      opacity: 1;
                    }
                  }

                  ul, &.current-menu-item > ul, &:hover > ul {
                    position: relative;
                    padding: 10px 20px;
                    border-left: 1px solid rgba(0,0,0,.4);

                    li {
                      display: block;
                      margin: 0;
                      line-height: 30px;
                      white-space: nowrap;
                      
                      a {
                        opacity: .5;
                      }

                      &.current-menu-item {
                        a {
                          opacity: 1;
                        }
                      }

                      &:hover {
                        a {
                          opacity: 1;
                        }
                      }
                    }
                  }
                }
              }

            }

            &::after {
              content: "";
              position: absolute;
              top: -2px;
              left: 0;
              width: 100%;
              height: 5px;
              background: @top_bar_bg;
              background: var(--top_bar_bg);
            }
          }
        }
      }

      .open-top-bar-search, .close-top-bar-search {
        display: inline-block;
        margin-left: 20px;
        vertical-align: middle;
        line-height: @header_height;
        cursor: pointer;
        opacity: .5;
        transition: .1s;

        &:hover {
          opacity: 1;
          transition: .1s;
        }

        svg {
          display: inline-block;
          height: 16px;
          width: 16px;
          line-height: @header_height;
          stroke: @top_bar_color;
          stroke: var(--top_bar_color);
          stroke-width: 2px;
        }

        &.active {
          opacity: 1;

          svg {
            stroke-width: 3px;
          }
        }
      }
    }
  }
}

.mobile-navigation {
  position: relative;
  z-index: 9;
  display: none;
  width: 100%;
  box-shadow: @shadow;
  box-shadow: var(--shadow);
  background: @top_bar_bg;
  background: var(--top_bar_bg);
  //background: var(--top_bar_bg);
  text-align: center;

  @media screen and (max-width: 860px) {
    display: block;
  }

  .site-navigation {
    display: inline-block;
    padding: 30px 0;
    margin: auto;
    text-align: left;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        line-height: 200%;

        a {
          color: @top_bar_color;
          color: var(--top_bar_color);
        }

        ul {
          padding-left: 30px;
          border-left: 1px dashed #e6e6e6;
        }
      }
    }
  }

  .mobile-navigation-toggle {
    position: absolute;
    height: 40px;
    width: 60px;
    background: @top_bar_bg;
    background: var(--top_bar_bg);
    color: @top_bar_color;
    color: var(--top_bar_color);
    bottom: -40px;
    left: 50%;
    margin-left: -30px;
    line-height: 40px;
    box-shadow: @shadow;
    box-shadow: var(--shadow);
    text-align: center;
    border-radius: 0 0 8px 8px;
    cursor: pointer;

    .open-icon, .close-icon {
      margin-top: 5px;

      svg {
        stroke: @top_bar_color;
        stroke: var(--top_bar_color);
      }
    }

    .close-icon {
      display: none;
    }

    &.active {
      .close-icon {
        display: block;
      }

      .open-icon {
        display: none;
      }
    }
  }
}