Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

// Notifications
// =============

.notification {
  border-radius: 0.2em;
  color: hsla(312, 7%, 10%, 1);

  background-color: hsla(312, 7%, 55%, 1);
  border: 1px solid hsla(312, 7%, 45%, 1);

  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.9rem;

  line-height: 1.25;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  text-shadow: hsla(312, 7%, 70%, 1) 1px 1px 0;
}

// Notification used to provide helpful information to the user
//  ex. site announcments
.notification--info {


}

// Notification usd to warn the user
//  i.e Use for irreversible actions

.notification--alert {
  color: hsla(312, 100%, 40%, 1) ;
  background-color: hsla(312, 100%, 70%, 1);
  border-color: hsla(312, 100%, 60%, 1);
  text-shadow: hsla(312, 100%, 25%, 1) 1px 1px 0;

}

SassMeister-output.css

.notification {
  border-radius: 0.2em;
  color: #1b181b;
  background-color: #948491;
  border: 1px solid #7b6b78;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.9rem;
  line-height: 1.25;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  text-shadow: #b8adb6 1px 1px 0;
}

.notification--alert {
  color: #cc00a3;
  background-color: #ff66e0;
  border-color: #ff33d6;
  text-shadow: #800066 1px 1px 0;
}