vue-material/src/components/mdSnackbar/mdSnackbar.scss

@import '../../core/stylesheets/variables.scss';
@import '../../core/stylesheets/mixins.scss';

$snackbar-height: 48px;
$snackbar-padding: 14px;
$snackbar-space: $snackbar-height / 2;

.md-snackbar {
  display: flex;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 120;
  transition: $swift-ease-out;
  transition-property: margin-top, margin-bottom;

  &.md-position-top-center,
  &.md-position-bottom-center {
    justify-content: center;
  }

  &.md-position-top-right,
  &.md-position-bottom-right {
    margin-right: $snackbar-space;
    justify-content: flex-end;
  }

  &.md-position-top-left,
  &.md-position-bottom-left {
    margin-left: $snackbar-space;
    justify-content: flex-start;
  }

  &.md-position-top-right,
  &.md-position-top-left,
  &.md-position-top-center {
    margin-top: $snackbar-space;
  }

  &.md-position-bottom-right,
  &.md-position-bottom-left {
    margin-bottom: $snackbar-space;
  }

  &.md-position-top-center,
  &.md-position-top-right,
  &.md-position-top-left {
    top: 0;

    .md-snackbar-container {
      transform: translate3D(0, calc(-100% - #{$snackbar-space}), 0);
    }
  }

  &.md-position-bottom-center,
  &.md-position-bottom-right,
  &.md-position-bottom-left {
    bottom: 0;

    .md-snackbar-container {
      transform: translate3D(0, calc(100% + #{$snackbar-space}), 0);
    }
  }

  &.md-active {
    .md-snackbar-container {
      transform: translate3D(0, 0, 0);
    }

    .md-snackbar-content {
      opacity: 1;
      transition: opacity .4s .1s $swift-ease-out-timing-function;
    }
  }

  @include layout-xsmall {
    margin: 0 !important;
  }

  .md-snackbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity .2s $swift-ease-out-timing-function;
    will-change: opacity;
  }

  .md-button {
    min-width: 64px;
    margin: -8px -16px;

    &:last-child {
      margin-left: $snackbar-height;
    }
  }
}

.md-snackbar-container {
  width: auto;
  min-width: 288px;
  max-width: 568px;
  min-height: $snackbar-height;
  padding: $snackbar-padding 24px;
  overflow: hidden;
  border-radius: 2px;
  background-color: #323232;
  transition: $swift-ease-out;
  color: #fff;
  font-size: $snackbar-padding;

  @include layout-xsmall {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

.md-has-toast-top-right {
  .md-fab.md-fab-top-right {
    transform: translate3D(0, $snackbar-height + $snackbar-padding + 6px, 0);

    @include layout-xsmall {
      transform: translate3D(0, $snackbar-height, 0);
    }
  }
}

.md-has-toast-top-center {
  .md-fab.md-fab-top-center {
    transform: translate3D(-50%, $snackbar-height + $snackbar-padding + 6px, 0);

    @include layout-xsmall {
      transform: translate3D(-50%, $snackbar-height, 0);
    }
  }
}

.md-has-toast-top-left {
  .md-fab.md-fab-top-left {
    transform: translate3D(0, $snackbar-height + $snackbar-padding + 6px, 0);

    @include layout-xsmall {
      transform: translate3D(0, $snackbar-height, 0);
    }
  }
}

.md-has-toast-bottom-right {
  .md-fab.md-fab-bottom-right {
    transform: translate3D(0, -$snackbar-height - $snackbar-padding - 6px, 0);

    @include layout-xsmall {
      transform: translate3D(0, -$snackbar-height, 0);
    }
  }
}

.md-has-toast-bottom-center {
  .md-fab.md-fab-bottom-center {
    transform: translate3D(-50%, -$snackbar-height - $snackbar-padding - 6px, 0);

    @include layout-xsmall {
      transform: translate3D(-50%, -$snackbar-height, 0);
    }
  }
}

.md-has-toast-bottom-left {
  .md-fab.md-fab-bottom-left {
    transform: translate3D(0, -$snackbar-height - $snackbar-padding - 6px, 0);

    @include layout-xsmall {
      transform: translate3D(0, -$snackbar-height, 0);
    }
  }
}

.md-has-toast {
  .md-fab.md-fab-top-right,
  .md-fab.md-fab-top-center,
  .md-fab.md-fab-top-left {
    @include layout-xsmall {
      transform: translate3D(0, $snackbar-height - 4px, 0);
    }
  }

  .md-fab.md-fab-bottom-right,
  .md-fab.md-fab-bottom-center,
  .md-fab.md-fab-bottom-left {
    @include layout-xsmall {
      transform: translate3D(0, -$snackbar-height + 4px, 0);
    }
  }
}