material-scrolltop.scss

/**
* material-scrolltop
*
* Author: Bartholomej
* Website: https://github.com/bartholomej/material-scrolltop
* Docs: https://github.com/bartholomej/material-scrolltop
* Repo: https://github.com/bartholomej/material-scrolltop
* Issues: https://github.com/bartholomej/material-scrolltop/issues
*/

$mst-color: #4caf50; // Primary background color (deafualt: $primary-color)
$mst-gutter: 23px; // Gap from corner (default: $column-gutter)
$mst-button-size: 56px; // Size of circle button (default: rem-calc(56))
$mst-icon: true !default; // Set false if you want to use your own sign directly inside html span element

// ==========================================================================
//   Mixins for material-scrolltop
// ==========================================================================

@mixin prefixer($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  @include prefixer(transform, translate(-50%, -50%));
}

// ==========================================================================
//   Stylesheet
// ==========================================================================

.material-scrolltop {
  display: block;
  position: fixed;
  width: 0;
  height: 0;
  bottom: $mst-gutter;
  right: $mst-gutter;
  padding: 0;
  overflow: hidden;
  outline: none;
  border: none;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  cursor: hand;
  border-radius: 50%;
  background: $mst-color;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  @include prefixer(transition, all 0.3s cubic-bezier(0.25, 0.25, 0, 1));
  @if $mst-icon {
    @extend %mst-icon;
  }

  &:hover {
    background-color: $mst-color;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);
  }

  &::before {
    @include centerer;
    content: '';
    width: 0;
    border-radius: 100%;
    background: mix($mst-color, #fff, 85%);
    @if $mst-icon {
      @extend %mst-icon;
    }
  }

  &:active::before {
    width: 120%;
    padding-top: 120%;
    @include prefixer(transition, all 0.2s ease-out);
  }

  &.reveal {
    width: $mst-button-size;
    height: $mst-button-size;
  }

  span {
    display: block;
    font-size: 25px;
    color: #fff;
  }
}

%mst-icon {
  background-image: url(icons/top-arrow.svg);
  background-position: center 50%;
  background-repeat: no-repeat;
}