dev/scss/header/header.scss

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

header {
  @include box-sizing-box();
  position:         relative;
  background-color: $light-green;
  // padding:          $base-padding 0 0 $base-padding;
  padding-top:      4rem;
  font-size:        10pt;
  color:            $nearly-white;
  
  .navbar {
    width: 100%;
    height: 3rem;
    background-color: $dark-green;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    // overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 999;

    &-group {

      & fieldset.fieldset-login {
        display: inline;
        margin-right: 0;
        padding: 0;
        min-inline-size: unset;
        border: unset;

        & form.login {
          display: flex;
          align-items: center;
          
          & input[type=text],
          & input[type=password] {
            @include input-field;
            margin-right: 8px;
            height: 2rem;
          }
    
          & button.btn-login {
            width: 3rem;
            height: 3rem;
            background-color: $dark-green;
            color: $nearly-white;
            // padding: .75rem 1rem;
            font-size: 180%;
            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: $fa-login;
            }
          }
          & button.btn-login:hover {
            background-color: $middle-green;
          }
        }
      }
    }

    .dropdown {
      display: flex;
      align-items: center;
      margin-right: 4rem;
      position: relative;

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

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

      &-btn {
        height: 3rem;
        padding: .6rem .9rem;
        font-size: 180% !important;
        color: $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;
        
        &.profile::before {
          @include icon-font;
          content: $fa-user;
        }

        h3.user-name {
          padding-right: 2px;
          font-size: 85%;
          display: inline;
        }
      }

      &-content {
        display: none;
        width: 100%;
        margin-top: 3rem;
        padding: 0;
        background-color: $middle-green;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
      }

      &-item {
        display: block;
        padding: .75rem;
        font-size: 120%;
        // font-weight: bold;
        color: $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;

        &:hover {
          background-color: $light-green;
        }
      }
    }

    // &-item {
    //   height: 3rem;
    //   padding: .6rem .9rem;
    //   font-size: 180% !important;
    //   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;

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

    //   &.profile {
    //     width: 3rem;
    //     height: 3rem;
    //     padding: .6rem .9rem;

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

    //   &.logout {
    //     width: 3rem;
    //     height: 3rem;
    //     margin-left: 1rem;
    //     padding: .6rem .9rem;
        
    //     &:hover {
    //       background-color: $middle-green;
    //     }
    //   }
    // }
  }

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

    > span {
      font-weight: bold;
    }

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

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

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

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

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

  form {
    position:     relative;
    display:      block;
    // padding-left: $logo-left-distance;
    min-height:   2.7em;
    margin:       0 4rem;
  }

  input {
    @include input-field;
  }

  .button {
    color:        $nearly-white;
    line-height:  2em;
    margin-right: $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: $dark-green;
      text-align:       center;
      height:           100%;
      z-index:          20;

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

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

      > span {
	      @include blind;
      }
    }

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

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

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

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

    > a.logout::after {
      content: $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;
  }
}