dev/scss/header/header.scss

@charset "utf-8";
@use 'sass:math';
@use "../util";
@use "hint";          // Hint specific menu list
@use "containermenu"; // Container menu specific
@use "searchbar";     // The search bar
@use "vc";            // Virtual corpus builder
@use "statistics";    // Statistics for VCs
@use "datepicker";    // Datepicker
@use "querylanguage"; // Query language
@use "pipe";          // Pipe
@use "state";         // State
@use "panel";         // Panel
@use "../base/colors";
@use "../base/icons";
@use "../base/lengths";
@use "../base/mixins";

.navbar {
  width: 100%;
  height: lengths.$standard-size-and-spacing;
  background-color: colors.$dark-green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  // overflow: hidden;
  // position: fixed;
  position: absolute;
  top: 0;
  z-index: 999;
  transition: top .3s ease-in-out;
  -o-transition: top .3s ease-in-out;
  -moz-transition: top .3s ease-in-out;
  -webkit-transition: top .3s ease-in-out;

  &-group {
    display: flex;
    align-items: center;

    h3.nav-link {
      height: lengths.$standard-size-and-spacing;
      font-size: 1rem;
      transition:  all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
      cursor: pointer;

      &:hover {
        background-color: colors.$middle-green;
      }

      a {
        display: block;
        padding: 1.5rem 1rem;
        color: colors.$nearly-white;
        cursor: pointer;
      }
    }
  }

  .dropdown {
    display: flex;
    align-items: center;
    margin-right: lengths.$standard-size-and-spacing;
    position: relative;

    &:hover .dropdown-content,
    &:focus-within .dropdown-content {
      display: block;
    }

    &:hover .dropdown-btn,
    &:focus-within .dropdown-btn {
      color: colors.$nearly-white;
      background-color: colors.$middle-green;
    }

    &-btn {
      display: flex;
      align-items: center;
      column-gap: lengths.$base-padding;
      height: lengths.$standard-size-and-spacing;
      padding: 1.25rem 1rem;
      color: colors.$nearly-white;
      transition:  all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
      cursor: pointer;

      &.login::before {
        @include mixins.icon-font;
        content: icons.$fa-login;
        font-size: 150%;
      }
      
      &.profile::before {
        @include mixins.icon-font;
        content: icons.$fa-user;
        font-size: 150%;
      }

      h3.user-name {
        padding-right: 2px;
        font-size: 120%;
        display: inline-block;
        max-width: 6ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &-content {
      display: none;
      width: fit-content;
      margin-top: lengths.$standard-size-and-spacing;
      padding: 0;
      background-color: colors.$middle-green;
      position: absolute;
      top: 0;
      z-index: 999;

      &--left {
        left: 0;
      }

      &--right {
        right: 0;
        padding: 1rem;
      }

      form.login {
        display: flex;
        flex-direction: column;
        align-items: center;

        legend {
          padding-bottom: lengths.$base-padding;
          color: colors.$nearly-white;
        }
        
        input[type=text],
        input[type=password] {
          @include mixins.input-field;
          margin-bottom: 8px;
          height: 2rem;
        }
  
        button.btn-login {
          width: 100%;
          height: 2rem;
          margin-bottom: 1rem;
          background-color: colors.$dark-green;
          color: colors.$nearly-white;
          font-size: 120%;
          border: none;
          border-color: unset;
          border-radius: 0;
          text-shadow: none;
          font-weight: normal;
          top: unset;
          transition:  all .2s ease-in-out;
          -o-transition: all .2s ease-in-out;
          -moz-transition: all .2s ease-in-out;
          -webkit-transition: all .2s ease-in-out;
  
          &::after {
            content: icons.$fa-login;
          }

          &:hover {
            // color: $dark-orange;
            background-color: colors.$dark-orange;
          }
        }
      }

      p {
        margin: 0;
        font-size: .7rem;
        color: colors.$nearly-white;

        a {
          color: colors.$dark-orange;

          &:hover {
            color: colors.$middle-orange;
          }
        }
      }
    }

    &-item {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: .75rem;
      font-size: 1rem;
      color: colors.$nearly-white;
      transition:  all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
      cursor: pointer;

      &:hover {
        color: colors.$nearly-white;
        background-color: colors.$light-green;
      }

      &.logout::before {
        @include mixins.icon-font;
        content: icons.$fa-logout;
        font-size: 1rem;
      }

      span {
        display: inline;
      }
    }
  }

  .burger-icon {
    display: none;

    &::after {
      @include mixins.icon-font;
      content: icons.$fa-bars;
    }
  }
}

header {
  @include mixins.box-sizing-box();
  position:         relative;
  background-color: colors.$light-green;
  // padding:          $base-padding 0 0 $base-padding;
  padding-top:      lengths.$standard-size-and-spacing;
  font-size:        10pt;
  color:            colors.$nearly-white;

  &.shifted {
    padding-left: lengths.$logo-left-distance;
  }

  span.select {
    display:     inline-block;
    cursor:      pointer;
    line-height: 1.8em;

    border: {
      width:        0;
      bottom-width: 3px;
      style:        solid;
      color:        transparent;
    }

    > span {
      font-weight: bold;
    }

    &:hover {
      color:        colors.$dark-green;
      border-color: colors.$dark-green;
    }

    &::after {
      @include mixins.icon-font;
      pointer-events: none;
      text-align:     center;
      content:        icons.$fa-down;

      padding: {
	      left:  4pt;
	      right: 4pt;
      }
    }

    &.active {
      border-color: colors.$dark-orange;
      &::after {
        content: icons.$fa-up;
      }
    }
  }

  form {
    position:     relative;
    display:      block;
    // padding-left: $logo-left-distance;
    min-height:   2.7em;

    &#searchform {
      margin: 0 lengths.$standard-size-and-spacing;
    }
  }

  input {
    @include mixins.input-field;
  }

  .button {
    color:        colors.$nearly-white;
    line-height:  2em;
    margin-right: lengths.$right-distance;

    &.right {
      float:   right;
      // display: inline-block;
      // >.tutorial{
      //   margin-left: 10px;
      // }
    }

    &.top {
      position:         absolute;
      display:          block;
      top:              0;
      right:            0;
      margin-right:     0;
      width:            20px;
      // width:            math.div($standard-margin,2);
      background-color: colors.$dark-green;
      text-align:       center;
      height:           100%;
      z-index:          20;

      > a:hover {
	      color: colors.$nearly-white
      }
    }

    > a {
      color:     colors.$nearly-white;
      cursor:    pointer;
      position:  relative;
      font-size: 120%;

      > span {
	      @include mixins.blind;
      }
    }

    > a::after {
      @include mixins.icon-font;
    }

    // > a.tutorial::after {
    //   content: $fa-tutorial;
    // }

    > a.question::after {
      content: icons.$fa-question;
    }

    > a.login::after {
      content: icons.$fa-login;
    }

    > a.logout::after {
      content: icons.$fa-logout;
    }
  }
}


.query.button-group > span {
  border-top-width: 0;
  border-color: white;
  
  &:first-child {
    border-top-left-radius: 0;
  }
  &:last-child {
    border-top-right-radius: 0;
  }
}