fabToolbar.scss

md-fab-toolbar {
  $icon-delay: 200ms;

  display: block;

  /*
   * Closed styling
   */
  .md-fab-toolbar-wrapper {
    display: block;
    position: relative;
    overflow: hidden;

    // Account for the size of the trigger (5.6rem) plus it's margin/shadow (0.6rem * 2)
    height: 6.8rem;
  }

  md-fab-trigger {
    position: absolute;
    z-index: $z-index-fab;

    button {
      overflow: visible !important;
    }

    .md-fab-toolbar-background {
      display: block;
      position: absolute;
      z-index: $z-index-fab + 1;

      opacity: 1;
      transition: $swift-ease-in;
    }

    md-icon {
      position: relative;
      z-index: $z-index-fab + 2;

      opacity: 1;

      // Hide the icon very quickly
      transition: all $icon-delay ease-in;
    }
  }

  &.md-left {
    md-fab-trigger {
      left: 0;
    }

    .md-toolbar-tools {
      flex-direction: row;
    }
  }

  &.md-right {
    md-fab-trigger {
      right: 0;
    }

    .md-toolbar-tools {
      flex-direction: row-reverse;

      > .md-button:first-child {
        margin-left: 0.6rem;
      }

      > .md-button:first-child {
        margin-right: -0.8rem;
      }


      > .md-button:last-child {
        margin-right: 8px;
      }

    }
  }

  md-toolbar {
    background-color: transparent !important;
    z-index: $z-index-fab + 3;

    .md-toolbar-tools {
      // Fix some spacing issues with the icons and the trigger
      padding: 0 20px;
      margin-top: 3px;
    }

    .md-fab-action-item {
      opacity: 0;
      transform: scale(0);
      transition: $swift-ease-in;

      // Cut the action item's animation time in half since we delay it in the JS
      transition-duration: $swift-ease-in-duration / 2;
    }
  }

  /*
   * Hover styling
   */
  &.md-is-open {
    md-fab-trigger > button {
      box-shadow: none;

      md-icon {
        opacity: 0;
      }
    }

    .md-fab-action-item {
      opacity: 1;
      transform: scale(1);
    }
  }
}