kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
less/alerts.less
View File

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

19
less/variables.less
View File

@ -277,6 +277,25 @@
@modal-title-padding: 15px; @modal-title-padding: 15px;
@modal-title-line-height: @line-height-base; @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 // Progress bars
// ------------------------- // -------------------------