VueX-toast SCSS style file with a helper mixin for new types

vuex-toast.scss

// VueX-toast SASS style file with a helper mixin for new types
//
// License: MIT
//
// Authors:
//  - ktns (https://github.com/ktns)
//  - mtancoigne (https://experimentslabs.com/users/administrator)
//
// Project page: https://github.com/ktsn/vuex-toast
// Matches with version: 0.1.3 (not tested on previous versions)

// Colors
$toast-info-text-color: #fff !default;
$toast-info-background-color: #43b4ec !default;

$toast-success-text-color: #fff !default;
$toast-success-background-color: #3add93 !default;

$toast-warning-text-color: #fff !default;
$toast-warning-background-color: #efd700 !default;

$toast-danger-text-color: #fff !default;
$toast-danger-background-color: #f3755e !default;

// Spacers
$toast-margin-to-border: 10px !default;

// Toast element
$toast-width: 350px !default;
$toast-zindex: 10000 !default;
$toast-padding-h: 15px !default;
$toast-padding-v: 15px !default;

// Transitions
$toast-transition-duration: 400ms !default;
$toast-transition-translation: 20px !default;

// Mixin
$toast-mixin-default-text-color: #fff !default;

// Use this mixin to create new types. I.e.:
//
//   @include toast-type('error', red);
//
// If you need more complex styles, create you own
@mixin toast-type($name, $background, $text: $toast-mixin-default-text-color) {
  .toast-type-#{$name} {
    color: $text;
    background-color: $background;
  }
}

%toast-transition-n {
  .toast-enter,
  .toast-leave-active {
    -webkit-transform: translateY(-$toast-transition-translation);
    -ms-transform: translateY(-$toast-transition-translation);
    transform: translateY(-$toast-transition-translation);
  }
}

%toast-transition-s {
  .toast-enter {
    -webkit-transform: translateY($toast-transition-translation);
    -ms-transform: translateY($toast-transition-translation);
    transform: translateY($toast-transition-translation);
  }

  .toast-leave-active {
    -webkit-transform: translateY(-100%) translateY($toast-transition-translation);
    -ms-transform: translateY(-100%) translateY($toast-transition-translation);
    transform: translateY(-100%) translateY($toast-transition-translation);
  }
}

.toast {
  position: fixed;
  width: $toast-width;
  z-index: $toast-zindex;

  &-message {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: $toast-margin-to-border;
    padding: $toast-padding-v $toast-padding-h;
    width: 100%;
    -webkit-transition: $toast-transition-duration cubic-bezier(0.17, 0.67, 0.17, 0.98);
    transition: $toast-transition-duration cubic-bezier(0.17, 0.67, 0.17, 0.98);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
  }

  &-button {
    position: absolute;
    top: 0;
    right: 5px;
    padding: 2px;
    background-color: transparent;
    border-width: 0;
    font-size: 1.5em;
    color: inherit;
    cursor: pointer;

    &::before {
      content: '\d7';
    }
  }

  //
  // Transition
  //
  &-enter-active,
  &-leave {
    opacity: 1;
  }

  &-enter,
  &-leave-active {
    opacity: 0;
  }

  &-leave-active {
    position: absolute;
  }

  //
  // Position
  //
  &-position {
    &-n {
      @extend %toast-transition-n;

      top: $toast-margin-to-border;
      left: 50%;
      margin-left: -$toast-width/2;
    }

    &-s {
      @extend %toast-transition-s;

      bottom: $toast-margin-to-border;
      left: 50%;
      margin-left: -$toast-width/2;
    }

    &-ne {
      @extend %toast-transition-n;

      top: $toast-margin-to-border;
      right: $toast-margin-to-border;
    }

    &-nw {
      @extend %toast-transition-n;

      top: $toast-margin-to-border;
      left: $toast-margin-to-border;
    }

    &-se {
      @extend %toast-transition-s;

      bottom: $toast-margin-to-border;
      right: $toast-margin-to-border;
    }

    &-sw {
      @extend %toast-transition-s;

      bottom: $toast-margin-to-border;
      left: $toast-margin-to-border;
    }
  }

  //
  // Types
  //
  &-type {
    &-info {
      color: $toast-info-text-color;
      background-color: $toast-info-background-color;
    }

    &-success {
      color: $toast-success-text-color;
      background-color: $toast-success-background-color;
    }

    &-warning {
      color: $toast-warning-text-color;
      background-color: $toast-warning-background-color;
    }

    &-danger {
      color: $toast-danger-text-color;
      background-color: $toast-danger-background-color;
    }
  }
}