Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
163 lines (129 sloc) 3.47 KB
// ------------------------------
// edX Pattern Library: Utilities - Alerts
//
// About: Contains base styling for alerts.
// ----------------------------
// #UTILITIES
// #GENERAL
// #INDIVIDUAL CASES
// ----------------------------
// #UTILITIES
// ----------------------------
@mixin alert($alert-color, $alert-color-glow) {
border: rem(1) solid $alert-color;
box-shadow: inset 0 0 0 rem(4) $alert-color-glow;
.alert-icon {
color: $white;
background-color: $alert-color;
}
}
@mixin alert-message($width) {
@media(min-width: $bp-screen-md) {
@include float(left);
width: $width;
padding: spacing-vertical(small);
padding-top: 0;
padding-bottom: 0;
}
:last-child {
// keeps the message compact
margin-bottom: 0;
}
}
// ----------------------------
// #GENERAL
// ----------------------------
.alert {
background-color: $white;
border: rem(1) solid palette(grayscale, accent);
padding: spacing-vertical(small) spacing-horizontal(base);
box-shadow: inset 0 0 0 rem(4) palette(grayscale, back);
overflow: auto;
&.alert-slim {
padding: spacing-vertical(x-small);
.alert-message {
padding: spacing-vertical(small) spacing-horizontal(base);
font-size: font-size(small);
.copy {
margin-bottom: 0;
}
}
}
&.alert-tiny {
padding: spacing-vertical(x-small);
.alert-message {
padding: spacing-vertical(x-small) spacing-horizontal(small);
font-size: font-size(small);
.copy {
margin-bottom: 0;
.icon {
display: inline-block;
margin-right: $baseline;
}
}
}
}
}
.alert-icon {
// hide icons on small screens
display: none;
@media(min-width: $bp-screen-md) {
@include float(left);
display: block;
// create a circle around the icon
border-radius: 50%;
// create room around the icon for the circle
padding: spacing-vertical(x-small);
}
}
.alert-message-with-action {
// provide room for the action to be displayed next to the alert message
@include alert-message(70%);
}
.alert-message {
@include alert-message(90%);
}
.alert-title {
@extend %hd-5;
@extend %headings-emphasized;
@media(min-width: $bp-screen-md) {
// shift the section up to make the alert more compact
margin-top: - spacing-vertical(x-small);
}
}
.alert-copy {
@extend %copy-base;
@media(min-width: $bp-screen-md) {
// shift the message down to be in line with the icon
margin-top: spacing-vertical(xx-small);
}
}
.alert-copy-with-title {
@extend %copy-base;
}
.alert-action {
width: 100%;
@media(min-width: $bp-screen-md) {
@include float(right);
width: inherit;
}
}
// ----------------------------
// #INDIVIDUAL CASES
// ----------------------------
// information-based alert
.alert-information {
@include alert(palette(information, accent), palette(information, back));
}
// warning-based alert
.alert-warning {
@include alert(palette(warning, accent), palette(warning, back));
}
// error-based alert
.alert-error {
@include alert(palette(error, accent), palette(error, back));
}
// success-based alert
.alert-success {
@include alert(palette(success, accent), palette(success, back));
}