official_module/app/assets/stylesheets/websocket_apis/notification.scss

@import url(https://fonts.googleapis.com/css?family=Roboto);

@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css);

$white: #fff;
$black: #000;
$blue: #5F99D8;
$red: #E77E63;
$orange: #F5BE44;
$green: #43D068;

#notifications {
  position: fixed;
  margin: 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
  z-index: 1059;
  height: auto;
  width: 350px;
  font-family: 'Roboto', sans-serif;

  &.top {
    top: 40px;
  }

  &.right {
    right: 5px;
  }

  &.bottom {
    bottom: 0;
  }

  &.left {
    left: 5px;
  }

  &.center {
    left: 50%;
    margin-left: -175px;
  }

  .notice-item {
    position: relative;
    margin: 8px 0;
    padding: 15px 35px 15px 15px;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba($black, .2);

    &.success {
      background-color: $green;
    }

    &.warning {
      background-color: $orange;
    }

    &.error {
      background-color: $red;
    }

    &.info {
      color: $white;
      background-color: $blue;
    }

    .notice-content {
      color: $white;
      text-shadow: 0 1px rgba($black, .2);
      a {
        background-color: rgba($black, .2);
        color: $white;
        padding: 2px 5px;
        border-radius: 3px;
        &:hover {
          text-decoration: underline;
        }
      }
    }

    &.opacity {
      opacity: 0;
    }
  }

  .notice-close {
    position: absolute;
    top: 16px;
    right: 10px;
    border: none;
    line-height: 1em;
    font-size: 1em;
    background-color: transparent;
    cursor: pointer;
    fill: $white;
  }
}

// For settings
.notification-area {
  max-width: 150px;
  margin: 1em 0;
  background-color: #656D78;
  border: 1px solid #434A54;

  .notification-area-item {
    position: relative;
    line-height: 50px;
    height: 50px;

    &.select {
      span {
        &.notification-area-top-left {
          border-color: #4FC1E9 transparent transparent transparent;
        }

        &.notification-area-top-center {
          border-color: transparent transparent #4FC1E9 transparent;
        }

        &.notification-area-top-right {
          border-color: transparent #4FC1E9 transparent transparent;
        }

        &.notification-area-bottom-left {
          border-color: transparent transparent transparent #4FC1E9;
        }

        &.notification-area-bottom-center {
          border-color: #4FC1E9 transparent transparent transparent;
        }

        &.notification-area-bottom-right {
          border-color: transparent transparent #4FC1E9 transparent;
        }
      }
    }

    span {
      display: block;
      position: absolute;
      cursor: pointer;
      overflow: hidden;
      border-style: solid;
      width: 0;
      height: 0;

      &.notification-area-top-left {
        top: 2px;
        left: 2px;
        border-width: 15px 15px 0 0;
        border-color: #E6E9ED transparent transparent transparent;
      }

      &.notification-area-top-center {
        top: 2px;
        left: 50%;
        margin-left: -15px;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #E6E9ED transparent;
      }

      &.notification-area-top-right {
        top: 2px;
        right: 2px;
        border-width: 0 15px 15px 0;
        border-color: transparent #E6E9ED transparent transparent;
      }

      &.notification-area-bottom-left {
        bottom: 2px;
        left: 2px;
        border-width: 15px 0 0 15px;
        border-color: transparent transparent transparent #E6E9ED;
      }

      &.notification-area-bottom-center {
        bottom: 2px;
        left: 50%;
        margin-left: -15px;
        border-width: 15px 15px 0 15px;
        border-color: #E6E9ED transparent transparent transparent;
      }

      &.notification-area-bottom-right {
        bottom: 2px;
        right: 2px;
        border-width: 0 0 15px 15px;
        border-color: transparent transparent #E6E9ED transparent;
      }
    }
  }
}