Sha256: d03f1f6c04a3fe89c079ad5a32cc9e227c2d9a68acadbd83c6dc65fa7b7c235d
Contents?: true
Size: 1.92 KB
Versions: 34
Compression:
Stored size: 1.92 KB
Contents
// =============================================================================
// Notify
// =============================================================================
// Notifies the user with success messages or errors in the right bottom of the
// page.
// Settings
// =============================================================================
// Scaffolding notifications with a given color.
// @param {Hex} $color color background and font.
@mixin notification-generator($color) {
color: $color;
background-color: rgba(lighten($color, 55), .8);
.close {
color: rgba($color, .3);
&:hover {
color: rgba($color, .6);
}
}
[data-notify="icon"] {
color: $color;
}
}
// Components
// =============================================================================
[data-notify="container"] {
position: relative;
width: 100%;
max-width: 350px;
font-size: 0;
border: 0;
box-shadow: 0 1px 10px rgba($black, .2);
animation: fade-left .5s ease-out;
.close {
position: absolute;
top: 50%;
right: 15px;
padding: 0;
margin-top: -12px;
font-size: 24px;
line-height: 1;
background: none;
border: 0;
&:focus,
&:active {
outline: none;
}
}
}
[data-notify="icon"] {
display: inline-block;
width: 15%;
margin-left: -7.5px;
font-size: 18px;
text-align: center;
vertical-align: middle;
}
[data-notify="message"] {
display: inline-block;
width: 85%;
padding-right: 5%;
font-size: $font-size-base;
vertical-align: middle;
}
// Descendants
// =============================================================================
[data-notify="container"].alert-danger,
[data-notify="container"].alert-error {
@include notification-generator($brand-danger);
}
[data-notify="container"].alert-success {
@include notification-generator($brand-success);
}
[data-notify="container"].alert-warning {
@include notification-generator($brand-warning);
}
Version data entries
34 entries across 34 versions & 1 rubygems