elemental/less/components/Alert.less

React UI Framework

//
// Alerts
// --------------------------------------------------


// Base styles
// -------------------------

.Alert {
	padding: .75em  1em;
	margin-bottom: 1em;
	border: 1px solid transparent;
	border-radius: @border-radius-base;

	// Headings for larger alerts
	h4 {
		margin-top: 0;
		// Specified for the h4 to prevent conflicts of changing @headingsColor
		color: inherit;
	}

	// Improve alignment and spacing of inner content
	> p,
	> ul {
		margin-bottom: 0;
	}
	> p + p {
		margin-top: 5px;
	}
}

// Dismissable alerts
//
// Expand the right padding and account for the close button's positioning.

.Alert--dismissable {
	padding-right: 2em;

	// Adjust close link position
	.close {
		position: relative;
		top: -2px;
		right: -21px;
		color: inherit;
	}
}

// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

.Alert--success {
	.alert-variant(@app-success);
}
.Alert--info {
	.alert-variant(@app-info);
}
.Alert--warning {
	.alert-variant(@app-warning);
}
.Alert--danger,
.Alert--error {
	.alert-variant(@app-danger);
}