src/displayer/style.scss
//
// Alerts
// --------------------------------------------------
@import "./_variables/variables";
@import "./_mixins/mixins";
// Base styles
// -------------------------
.displayer {
padding: $displayer-padding;
margin-bottom: $line-height-computed;
border: 1px solid transparent;
border-radius: $displayer-border-radius;
// Provide class for links that match alerts
.alert-link {
font-weight: $displayer-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.displayer-success {
@include displayer-variant($displayer-success-bg, $displayer-success-border, $displayer-success-text);
}
.displayer-info {
@include displayer-variant($displayer-info-bg, $displayer-info-border, $displayer-info-text);
}
.displayer-warning {
@include displayer-variant($displayer-warning-bg, $displayer-warning-border, $displayer-warning-text);
}
.displayer-danger {
@include displayer-variant($displayer-danger-bg, $displayer-danger-border, $displayer-danger-text);
}
.displayer-primary {
@include displayer-variant($displayer-primary-bg, $displayer-primary-border, $displayer-primary-text);
@include themify($themes) {
@include displayer-variant(themed('brand-primary'), $displayer-primary-border, $displayer-primary-text);
}
}