Wordpress Discrete / Unobtrusive Admin Bar

_wp-unobtrusive-admin-bar.scss

// overrides WP admin bar behavior
// use mouseover on screen's top left corner to show it

@keyframes hideAdminBar {
  from {
    width: 35px;
  }
  to {
    width: 35px;
  }
}

@keyframes showAdminBar {
  from {
    width: 100%;
  }
  to {
    width: 100%;
  }
}

html[lang] {
  margin-top: 0 !important;//WP pushes the page 32px down when the user is logged in, in order to avoid content behind the bar
  #wpadminbar {
    min-width: 0;
    overflow: hidden;

    animation-name: hideAdminBar;
    animation-duration: 1s;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    &:hover {
      overflow: visible;

      animation-name: showAdminBar;
      animation-duration: 1s;
      animation-delay: 0;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
  }
}