wikijs/client/scss/components/navigator.scss

.navigator {
  position: fixed;
  top: 0;
  left: 0;
  width: 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;

    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      cursor: pointer;

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

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

  &-sd {
    width: 350px;
    background-color: #FFF;
    border-radius: 0 0 5px 0;
    padding: 0 0 1rem 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;
        }

        svg {
          use {
            color: mc('blue-grey', '500');
            fill: mc('blue-grey', '500');
            transition: all .4s ease;
          }
        }
      }
    }

    &-search {
      position: relative;

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

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

      svg {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 9px;
        left: 15px;

        use {
          color: mc('grey', '500');
          fill: mc('grey', '500');
          transition: all .4s ease;
        }
      }
    }
  }
}