Make alerts use variables better

This commit is contained in:
Mark Otto 2013-04-20 15:47:07 -07:00
parent dc4436dbc9
commit 2d5ab9a2de
2 changed files with 40 additions and 21 deletions

View File

@ -9,10 +9,10 @@
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base;
color: @state-warning-text;
background-color: @state-warning-bg;
border: 1px solid @state-warning-border;
border-radius: @border-radius-base;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
@ -22,13 +22,13 @@
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@state-warning-border, 5%);
border-top-color: darken(@alert-border, 5%);
}
// Inherit color for immediate links and bolden them some
> a,
> p > a {
font-weight: 500;
color: darken(@state-warning-text, 10%);
color: darken(@alert-text, 10%);
}
// Adjust close link position
@ -44,39 +44,39 @@
// -------------------------
.alert-success {
background-color: @state-success-bg;
border-color: @state-success-border;
color: @state-success-text;
background-color: @alert-success-bg;
border-color: @alert-success-border;
color: @alert-success-text;
hr {
border-top-color: darken(@state-success-border, 5%);
border-top-color: darken(@alert-success-border, 5%);
}
> a,
> p > a {
color: darken(@state-success-text, 10%);
color: darken(@alert-success-text, 10%);
}
}
.alert-danger {
background-color: @state-danger-bg;
border-color: @state-danger-border;
color: @state-danger-text;
background-color: @alert-danger-bg;
border-color: @alert-danger-border;
color: @alert-danger-text;
hr {
border-top-color: darken(@state-danger-border, 5%);
border-top-color: darken(@alert-danger-border, 5%);
}
> a,
> p > a {
color: darken(@state-danger-text, 10%);
color: darken(@alert-danger-text, 10%);
}
}
.alert-info {
background-color: @state-info-bg;
border-color: @state-info-border;
color: @state-info-text;
background-color: @alert-info-bg;
border-color: @alert-info-border;
color: @alert-info-text;
hr {
border-top-color: darken(@state-info-border, 5%);
border-top-color: darken(@alert-info-border, 5%);
}
> a,
> p > a {
color: darken(@state-info-text, 10%);
color: darken(@alert-info-text, 10%);
}
}

View File

@ -277,6 +277,25 @@
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
// Alerts
// -------------------------
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-border-radius: @border-radius-base;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
// Progress bars
// -------------------------