Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BS3: Refactor alerts to require a modifier class #9818

Merged
merged 3 commits into from
Aug 19, 2013
Merged

BS3: Refactor alerts to require a modifier class #9818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
108d10a
Refactor alerts to have a base class, but no default class, thus requ…
mdo Aug 19, 2013
03ba9ed
update theme to match
mdo Aug 19, 2013
e6ff75b
Update var in theme
mdo Aug 19, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions _includes/nav-components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,7 @@
<li>
<a href="#alerts">Alerts</a>
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-examples">Examples</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
Expand Down
22 changes: 9 additions & 13 deletions components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2206,36 +2206,32 @@ <h1 id="alerts">Alerts</h1>
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>

<h2 id="alerts-default">Default alert</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
<h2 id="alerts-examples">Examples</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>

<div class="bs-example">
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="bs-callout bs-callout-info">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
{% highlight html %}
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}

<h2 id="alerts-alternatives">Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-example">
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
{% highlight html %}
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
{% endhighlight %}

Expand Down
20 changes: 10 additions & 10 deletions dist/css/bootstrap-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,16 +199,6 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.alert {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#f8efc0));
background-image: -webkit-linear-gradient(top, #fcf8e3, 0%, #f8efc0, 100%);
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}

.alert-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(top, #dff0d8, 0%, #c8e5bc, 100%);
Expand All @@ -229,6 +219,16 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}

.alert-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#f8efc0));
background-image: -webkit-linear-gradient(top, #fcf8e3, 0%, #f8efc0, 100%);
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}

.alert-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f2dede), to(#e7c3c3));
background-image: -webkit-linear-gradient(top, #f2dede, 0%, #e7c3c3, 100%);
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap-theme.min.css
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 29 additions & 22 deletions dist/css/bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4935,9 +4935,7 @@ a.thumbnail:focus {
.alert {
padding: 15px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border: 1px solid transparent;
border-radius: 4px;
}

Expand All @@ -4946,13 +4944,8 @@ a.thumbnail:focus {
color: inherit;
}

.alert hr {
border-top-color: #f8e5be;
}

.alert .alert-link {
font-weight: bold;
color: #a47e3c;
}

.alert > p,
Expand Down Expand Up @@ -4989,20 +4982,6 @@ a.thumbnail:focus {
color: #356635;
}

.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}

.alert-danger hr {
border-top-color: #e6c1c7;
}

.alert-danger .alert-link {
color: #953b39;
}

.alert-info {
color: #3a87ad;
background-color: #d9edf7;
Expand All @@ -5017,6 +4996,34 @@ a.thumbnail:focus {
color: #2d6987;
}

.alert-warning {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}

.alert-warning hr {
border-top-color: #f8e5be;
}

.alert-warning .alert-link {
color: #a47e3c;
}

.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}

.alert-danger hr {
border-top-color: #e6c1c7;
}

.alert-danger .alert-link {
color: #953b39;
}

@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions examples/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,15 +219,15 @@ <h1>Navbars</h1>
<div class="page-header">
<h1>Alerts</h1>
</div>
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Expand Down
2 changes: 1 addition & 1 deletion javascript.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1184,7 +1184,7 @@ <h1 id="alerts">Alert messages <small>alert.js</small></h1>
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert fade in">
<div class="alert alert-warning fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
Expand Down
18 changes: 7 additions & 11 deletions less/alerts.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border: 1px solid transparent;
border-radius: @alert-border-radius;

// Headings for larger alerts
Expand All @@ -20,14 +18,9 @@
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@alert-border, 5%);
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
color: darken(@alert-text, 10%);
}

// Improve alignment and spacing of inner content
Expand Down Expand Up @@ -63,9 +56,12 @@
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
2 changes: 1 addition & 1 deletion less/theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,9 @@
}

// Apply the mixin to the alerts
.alert { .alert-styles(@alert-bg); }
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-warning { .alert-styles(@alert-warning-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }


Expand Down
16 changes: 8 additions & 8 deletions less/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,22 +439,22 @@
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;

@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;

@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;

@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;

@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;


// Progress bars
// -------------------------
Expand Down