Merge branch '3.0.0-wip' into bs3_panel_base_class

Conflicts:
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.min.css

_includes/nav-components.html

@@ -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-examples">Examples</a></li>
-    <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
     <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
     <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>

assets/js/customizer.js

@@ -158,6 +158,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
     css += __less['variables.less']
     if (vars) css += generateCustomCSS(vars)
     css += __less['mixins.less']
+    css += __less['normalize.less']
+    css += __less['scaffolding.less']
     css += $checked
       .map(function () { return __less[this.value] })
       .toArray()

components.html

@@ -2206,22 +2206,14 @@ body { padding-bottom: 70px; }
     </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>
+    <h2 id="alerts-examples">Examples</h2>
-    <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
+    <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="bs-callout bs-callout-info">
-      <div class="alert">
+      <h4>No default class</h4>
-        <strong>Warning!</strong> Best check yo self, you're not looking too good.
+      <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>
-    </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.
@@ -2229,6 +2221,9 @@ body { padding-bottom: 70px; }
       <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>
@@ -2236,6 +2231,7 @@ body { padding-bottom: 70px; }
 {% 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 %}
 

dist/css/bootstrap-theme.css

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

dist/css/bootstrap.css

@@ -4935,9 +4935,7 @@ a.thumbnail:focus {
 .alert {
   padding: 15px;
   margin-bottom: 20px;
-  color: #c09853;
+  border: 1px solid transparent;
-  background-color: #fcf8e3;
-  border: 1px solid #fbeed5;
   border-radius: 4px;
 }
 
@@ -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,
@@ -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;
@@ -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;

examples/theme/index.html

@@ -219,15 +219,15 @@
       <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>

javascript.html

@@ -1184,7 +1184,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
     <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>

less/alerts.less

@@ -9,9 +9,7 @@
 .alert {
   padding: @alert-padding;
   margin-bottom: @line-height-computed;
-  color: @alert-text;
+  border: 1px solid transparent;
-  background-color: @alert-bg;
-  border: 1px solid @alert-border;
   border-radius: @alert-border-radius;
 
   // Headings for larger alerts
@@ -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
@@ -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);
+}

less/theme.less

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

less/variables.less

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