wikijs/client/scss/components/navigator.scss

.navigator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;

  &-bar {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    background-color: rgba(mc('grey', '900'), .7);
  }

  &-fab {

    &-button {
      width: 50px;
      height: 50px;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all .4s ease;

      svg use {
        transition: all .4s ease;
      }

      &:hover {
        svg use {
          color: mc('blue', '500');
          fill: mc('blue', '500');
        }
      }
    }
  }

  &-title {
    background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
    background-size: 200%;
    background-repeat: no-repeat;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease;
    cursor: pointer;

    &:hover {
      background-position-y: -50px;
    }

    h1 {
      font-size: 1.2rem;
      color: #FFF;
      font-weight: 500;
    }
  }

  &-subtitle {
    background-repeat: no-repeat;
    background-position-x: -100vw;
    color: #FFF;
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1rem;
    transition: background-position-x 1s ease;

    &.is-error {
      background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
    }
    &.is-warning {
      background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
    }
    &.is-success {
      background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
    }
    &.is-info {
      background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
    }

    &.is-active {
      background-position-x: 0;
    }

    svg {
      margin-right: .5rem;
      animation: flash 1s linear 1s;

      &.navigator-subtitle-icon {
        transition: all 1s ease;

        &-enter-active, &-leave-active {
          transform: scale(1);
          width: 24px;
          margin-right: .5rem;
        }
        &-enter, &-leave-to {
          transform: scale(0);
          width: 0;
          margin-right: 0;
        }
      }

      use {
        color: #FFF;
        fill: #FFF;
        stroke: #FFF;
        transition: all .4s ease;
      }
    }

    h2 {
      font-size: 1rem;
      font-weight: 400;
    }
  }

  &-action {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;

    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      cursor: pointer;
      transition: all .4s ease;

      svg use {
        color: #FFF;
        fill: #FFF;
        transition: all .4s ease;
      }

      &:hover {
        svg use {
          color: mc('blue', '500');
          fill: mc('blue', '500');
        }
      }

      &.is-active {
        background-color: #FFF;

        svg use {
          color: mc('grey', '500');
          fill: mc('grey', '500');
        }
      }

      &-dropdown {
        position: absolute;
        right: 0;
        top: 100%;
        width: 250px;
        border-radius: 0 0 0 5px;
        transition: all .4s ease;
        transform-origin: top right;

        &-enter-active, &-leave-active {
          transform: scale(1);
        }
        &-enter, &-leave-to {
          transform: scale(.1, 0);
        }

        li {
          background-color: #FFF;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 .8rem 0 1rem;
          
          & + li {
            border-top: 1px solid mc('grey', '100');
          }

          &:hover {
            background-color: mc('grey', '100');
          }
          
          label {
            font-size: .8rem;
            font-weight: 600;
            color: mc('blue', '800');
            text-transform: uppercase;
          }

          &:last-child {
            border-radius: 0 0 0 5px;
          }
        }
      }
    }
  }

  &-sd {
    width: 350px;
    background-color: #FFF;
    border-radius: 0 0 5px 0;
    transition: all .4s ease;
    transform-origin: top left;

    &-enter-active, &-leave-active {
      transform: scale(1);
    }
    &-enter, &-leave-to {
      transform: scale(.1, 0);
    }

    &-actions {
      background-color: mc('blue-grey', '50');
      display: flex;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 50px;
        transition: all .4s ease;

        &.is-active {
          background-color: #FFF;
        }

        &:hover {
          background-color: #FFF;
        }
      }
    }

    &-search {
      position: relative;

      input {
        display: block;
        width: 100%;
        padding: 0 3rem 0 1rem;
        height: 40px;
        border: 0;
        font-size: .9rem;
        color: mc('grey', '700');
        position: relative;

        &:focus {
          outline: none;
          border: 0;
        }
      }

      &::after {
        content: " ";
        @include spinner(mc('blue', '200'),0.5s,18px);
        position: absolute;
        display: block;
        top: 11px;
        right: 1rem;
      }
    }

    &-footer {
      background-color: mc('blue-grey', '100');
      border-top: 5px solid mc('blue-grey', '200');
      border-radius: 0 0 5px 0;
      display: flex;
      justify-content: center;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 50px;
        transition: all .4s ease;

        &:hover {
          background-color: mc('blue-grey', '200');
        }
      }
    }
  }
}