/* ======================================================================== * ALERT * ======================================================================== */ .alert{ position: relative; } .alert-dismissable, .alert-dismissible { .close { position: absolute; top: 0px; right: 4px; } } @include alert-color(default,$color-default); @include alert-color(primary,$color-primary); @include alert-color(success,$color-success); @include alert-color(info,$color-info); @include alert-color(warning,$color-warning); @include alert-color(danger,$color-danger); @include alert-color(lilac,$color-lilac); @include alert-color(teals,$color-teal); @include alert-color(inverse,$color-inverse); .alert-icon{ width: 40px; height: 40px; display: inline-block; border-radius: 100%; i{ width: 40px; height: 40px; display: block; text-align: center; line-height: 40px; font-size: 20px; color: #FFF; } } .notification-info{ margin-left: 56px; margin-top: -40px; min-height: 40px; p{ margin: 0px; line-height: 13px; } } .notification-meta{ margin-bottom: 3px; padding-left: 0px; list-style: none outside none; } .notification-sender { color: #414147; } .notification-time { font-style: italic; color: #999; } /* ======================================================================== * CALLOUT * ======================================================================= */ .callout{ position: relative; min-height: 60px; margin: 0px; padding: 5px 30px 5px 60px; border-left: 5px solid #EEE; font-size: 0.9em; word-wrap: break-word; h4{ margin-top: 0; } p{ &:last-child{ margin-bottom: 0; } } code, .highlight{ background-color: transparent; } } @mixin color-callout($selector,$color,$content){ .callout-#{$selector}{ background-color: lighten($color,30%); border-color: $color; &:before{ position: absolute; left: 10px; top: 10px !important; display: block; background: $color; color: #fff; width: 40px; text-align: center; height: 40px; font-size: 1.5em; font-family: 'FontAwesome'; content: $content; line-height: 39px; } h4{ color: darken($color,10%); } a{ color: darken($color,5%); font-weight: bold; &:hover{ color: darken($color,10%); } } } } @include color-callout(info,$color-info,"\f0a2"); @include color-callout(warning,$color-warning,"\f071"); @include color-callout(danger,$color-danger,"\f0e7");