public/third_party/notific8/src/sass/_legacy_theme.scss
/**
 * @author Will Steinmetz
 *
 * Legacy family themes for the notific8 plug-in for jQuery
 *
 * Copyright (c)2013-2015, Will Steinmetz
 * Licensed under the BSD license.
 * http://opensource.org/licenses/BSD-3-Clause
 */

// mixins
@mixin notific8_legacy_theme($name, $border-color, $background-color, $close-background-color: $border-color, $text-color: #fff, $close-text-color: $text-color) {
  .#{$notific8-ns}-notification.family-legacy.#{$name} {
    background-color: $background-color;
    border-color: $border-color;
    color: $text-color;
    .#{$notific8-ns}-close {
      background-color: $close-background-color;
      color: $close-text-color;
    }
  }
}

.#{$notific8-ns}-notification {
  &.family-legacy {
    border-style: solid;
    border-width: 2px;
    color: #fff;
    height: em(90px);
    max-height: em(90px);
    transition: all 0.2s ease-in-out;
    width: em(390px);

    &.has-icon {
      width: em(435px);
    }

    .#{$notific8-ns}-icon {
      font-size: em(70px);
      line-height: 1em;
      margin-top: -1px;
    }

    .#{$notific8-ns}-heading {
      font-weight: bold;
      margin-bottom: em(5px);
    }

    .#{$notific8-ns}-message {
      font-size: em(14px);
    }

    .#{$notific8-ns}-close {
      font-size: 1.25em;
      line-height: 1em;
      padding: 0 0.25em;
      top: 0;
      &.sticky {
        font-size: em(10px);
        line-height: em(14px, 10px);
        padding: em(2px, 10px) 0;
        text-transform: uppercase;
        width: em(89px, 10px);
      }
    }
  }
}

$notific8-sides: (right: left, left: right);
@each $main-dir, $second-dir in $notific8-sides {
  .#{$main-dir} {
    .#{$notific8-ns}-notification.family-legacy {
      margin-#{$main-dir}: em(-390px);
      padding-#{$main-dir}: em(33px);
      &.open {
        margin-#{$main-dir}: 0;
      }
      &.has-icon {
        padding-#{$second-dir}: 90px;
      }
      .#{$notific8-ns}-icon {
        float: #{$second-dir};
        margin-#{$second-dir}: em(-81px, 70px);
      }
      .#{$notific8-ns}-close {
        #{$main-dir}: -2px;
        &.sticky {
          #{$main-dir}: em(-37px, 10px);
          top: em(34px, 10px);
          @if $main-dir == left {
            transform: rotate(270deg);
          } @else {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}
