fixes #3845: add .btn-link for transparent buttons styled as links

5 files changed, 64 insertions, 8 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 65e0c870f..239de594a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3175,6 +3175,26 @@ input[type="submit"].btn.btn-mini {
   *padding-bottom: 1px;
 }
 
+.btn-link {
+  color: #0088cc;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: none;
+  border-color: transparent;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-link:hover {
+  color: #005580;
+  text-decoration: underline;
+  background-color: transparent;
+}
+
 .btn-group {
   position: relative;
   *margin-left: .3em;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 844b39577..e2cb315fb 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -93,7 +93,7 @@ hr.soften {
   padding: 40px 0;
   color: #fff;
   text-align: center;
-  text-shadow: 0 1px 5px rgba(0,0,0,.3), 0 0 30px rgba(0,0,0,.075);
+  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
   background: #020031; /* Old browsers */
   background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
@@ -146,7 +146,7 @@ hr.soften {
   bottom: 0;
   left: 0;
   background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
-  opacity: .5;
+  opacity: .3;
 }
 
 /* Masthead (docs home)
diff --git a/docs/base-css.html b/docs/base-css.html
index a6b545c1d..a23008dd1 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -712,12 +712,14 @@ For example, <code>section</code> should be wrapped as inline.
           </table>
         </div>
 <pre class="prettyprint linenums">
-&lt;tr class="success"&gt;
-  &lt;td&gt;1&lt;/td&gt;
-  &lt;td&gt;TB - Monthly&lt;/td&gt;
-  &lt;td&gt;01/04/2012&lt;/td&gt;
-  &lt;td&gt;Approved&lt;/td&gt;
-&lt;/tr&gt;
+...
+  &lt;tr class="success"&gt;
+    &lt;td&gt;1&lt;/td&gt;
+    &lt;td&gt;TB - Monthly&lt;/td&gt;
+    &lt;td&gt;01/04/2012&lt;/td&gt;
+    &lt;td&gt;Approved&lt;/td&gt;
+  &lt;/tr&gt;
+...
 </pre>
 
 
@@ -1423,6 +1425,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
               <td><code>btn btn-inverse</code></td>
               <td>Alternate dark gray button, not tied to a semantic action or use</td>
             </tr>
+            <tr>
+              <td><button type="button" class="btn btn-link">Link</button></td>
+              <td><code>btn btn-link</code></td>
+              <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
+            </tr>
           </tbody>
         </table>
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index c150521cc..481974591 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1362,6 +1362,11 @@
               <td><code>btn btn-inverse</code></td>
               <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
             </tr>
+            <tr>
+              <td><button type="button" class="btn btn-link">{{_i}}Link{{/i}}</button></td>
+              <td><code>btn btn-link</code></td>
+              <td>{{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}}</td>
+            </tr>
           </tbody>
         </table>
 
diff --git a/less/buttons.less b/less/buttons.less
index b25d97180..8bdf34b20 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -173,3 +173,27 @@ input[type="submit"].btn {
     *padding-bottom: 1px;
   }
 }
+
+
+// Link buttons
+// --------------------------------------------------
+
+// Make a button look and behave like a link
+.btn-link {
+  background-color: transparent;
+  background-image: none;
+  border-color: transparent;
+  cursor: pointer;
+  color: @linkColor;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+.btn-link:hover {
+  color: @linkColorHover;
+  text-decoration: underline;
+  background-color: transparent;
+}