Commit 7dbcd0be authored by Mark Otto's avatar Mark Otto

fix navbar button for mobile tapping (turn to button instead of adding...

fix navbar button for mobile tapping (turn to button instead of adding href=#), streamline less docs page
parent aaf1825b
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
...@@ -138,514 +138,507 @@ ...@@ -138,514 +138,507 @@
<h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1> <h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
</div> </div>
<div class="row"> <h3>Scaffolding and links</h3>
<div class="span6"> <table class="table table-bordered table-striped">
<h3>Scaffolding and links</h3> <tbody>
<table class="table table-bordered table-striped"> <tr>
<tbody> <td class="span4"><code>@bodyBackground</code></td>
<tr> <td><code>@white</code></td>
<td class="span2"><code>@bodyBackground</code></td> <td>Page background color</td>
<td><code>@white</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
<td>Page background color</td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td> <tr>
</tr> <td><code>@textColor</code></td>
<tr> <td><code>@grayDark</code></td>
<td><code>@textColor</code></td> <td>Default text color for entire body, headings, and more</td>
<td><code>@grayDark</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
<td>Default text color for entire body, headings, and more</td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td> <tr>
</tr> <td><code>@linkColor</code></td>
<tr> <td><code>#08c</code></td>
<td><code>@linkColor</code></td> <td>Default link text color</td>
<td><code>#08c</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
<td>Default link text color</td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td> <tr>
</tr> <td><code>@linkColorHover</code></td>
<tr> <td><code>darken(@linkColor, 15%)</code></td>
<td><code>@linkColorHover</code></td> <td>Default link text hover color</td>
<td><code>darken(@linkColor, 15%)</code></td> <td><span class="swatch" style="background-color: #005580;"></span></td>
<td>Default link text hover color</td> </tr>
<td><span class="swatch" style="background-color: #005580;"></span></td> </tbody>
</tr> </table>
</tbody> <h3>Grid system</h3>
</table> <table class="table table-bordered table-striped">
<h3>Grid system</h3> <tbody>
<table class="table table-bordered table-striped"> <tr>
<tbody> <td class="span4"><code>@gridColumns</code></td>
<tr> <td>12</td>
<td class="span2"><code>@gridColumns</code></td> </tr>
<td>12</td> <tr>
</tr> <td><code>@gridColumnWidth</code></td>
<tr> <td>60px</td>
<td><code>@gridColumnWidth</code></td> </tr>
<td>60px</td> <tr>
</tr> <td><code>@gridGutterWidth</code></td>
<tr> <td>20px</td>
<td><code>@gridGutterWidth</code></td> </tr>
<td>20px</td> <tr>
</tr> <td><code>@fluidGridColumnWidth</code></td>
<tr> <td>6.382978723%</td>
<td><code>@fluidGridColumnWidth</code></td> </tr>
<td>6.382978723%</td> <tr>
</tr> <td><code>@fluidGridGutterWidth</code></td>
<tr> <td>2.127659574%</td>
<td><code>@fluidGridGutterWidth</code></td> </tr>
<td>2.127659574%</td> </tbody>
</tr> </table>
</tbody> <h3>Typography</h3>
</table> <table class="table table-bordered table-striped">
<h3>Typography</h3> <tbody>
<table class="table table-bordered table-striped"> <tr>
<tbody> <td class="span4"><code>@sansFontFamily</code></td>
<tr> <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
<td class="span2"><code>@sansFontFamily</code></td> </tr>
<td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td> <tr>
</tr> <td><code>@serifFontFamily</code></td>
<tr> <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
<td><code>@serifFontFamily</code></td> </tr>
<td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td> <tr>
</tr> <td><code>@monoFontFamily</code></td>
<tr> <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
<td><code>@monoFontFamily</code></td> </tr>
<td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
</tr>
<tr> <tr>
<td class="span2"><code>@baseFontSize</code></td> <td><code>@baseFontSize</code></td>
<td>13px</td> <td>13px</td>
<td><em class="muted">Must be pixels</em></td> <td><em class="muted">Must be pixels</em></td>
</tr> </tr>
<tr> <tr>
<td><code>@baseFontFamily</code></td> <td><code>@baseFontFamily</code></td>
<td colspan="2"><code>@sansFontFamily</code></td> <td colspan="2"><code>@sansFontFamily</code></td>
</tr> </tr>
<tr> <tr>
<td><code>@baseLineHeight</code></td> <td><code>@baseLineHeight</code></td>
<td>18px</td> <td>18px</td>
<td><em class="muted">Must be pixels</em></td> <td><em class="muted">Must be pixels</em></td>
</tr> </tr>
<tr> <tr>
<td><code>@altFontFamily</code></td> <td><code>@altFontFamily</code></td>
<td colspan="2"><code>@serifFontFamily</code></td> <td colspan="2"><code>@serifFontFamily</code></td>
</tr> </tr>
<tr>
<td><code>@headingsFontFamily</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
<tr>
<td><code>@headingsFontWeight</code></td>
<td colspan="2"><code>bold</code></td>
</tr>
<tr>
<td><code>@headingsColor</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
</tbody>
</table>
<h3>Tables</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@tableBackground</code></td>
<td><code>transparent</code></td>
</tr>
<tr>
<td><code>@tableBackgroundAccent</code></td>
<td><code>#f9f9f9</code></td>
</tr>
<tr>
<td><code>@tableBackgroundHover</code></td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>@tableBorder</code></td>
<td><code>ddd</code></td>
</tr>
</tbody>
</table>
<h3>Grayscale colors</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@black</code></td>
<td>#000</td>
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
</tr>
<tr>
<td><code>@grayDarker</code></td>
<td>#222</td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td>#333</td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@gray</code></td>
<td>#555</td>
<td><span class="swatch" style="background-color: #555;"></span></td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td>#999</td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td>#eee</td>
<td><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h3>Accent colors</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@blue</code></td>
<td>#049cdb</td>
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td><span class="swatch" style="background-color: #46a546;"></span></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td><span class="swatch" style="background-color: #f89406;"></span></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
</tr>
</tbody>
</table>
<tr>
<td class="span2"><code>@headingsFontFamily</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
<tr>
<td><code>@headingsFontWeight</code></td>
<td colspan="2"><code>bold</code></td>
</tr>
<tr>
<td><code>@headingsColor</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
</tbody>
</table>
<h3>Tables</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@tableBackground</code></td>
<td><code>transparent</code></td>
</tr>
<tr>
<td><code>@tableBackgroundAccent</code></td>
<td><code>#f9f9f9</code></td>
</tr>
<tr>
<td><code>@tableBackgroundHover</code></td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>@tableBorder</code></td>
<td><code>ddd</code></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h3>Grayscale colors</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@black</code></td>
<td>#000</td>
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
</tr>
<tr>
<td><code>@grayDarker</code></td>
<td>#222</td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td>#333</td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@gray</code></td>
<td>#555</td>
<td><span class="swatch" style="background-color: #555;"></span></td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td>#999</td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td>#eee</td>
<td><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h3>Accent colors</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@blue</code></td>
<td>#049cdb</td>
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td><span class="swatch" style="background-color: #46a546;"></span></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td><span class="swatch" style="background-color: #f89406;"></span></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /row -->
<h3>Components</h3> <h3>Components</h3>
<div class="row">
<div class="span6">
<h4>Buttons</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@btnBackground</code></td>
<td><code>@white</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td class="span3"><code>@btnBackgroundHighlight</code></td>
<td><code>darken(@white, 10%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
</tr>
<tr>
<td class="span3"><code>@btnBorder</code></td>
<td><code>darken(@white, 20%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr> <h4>Buttons</h4>
<td class="span3"><code>@btnPrimaryBackground</code></td> <table class="table table-bordered table-striped">
<td><code>@linkColor</code></td> <tbody>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td> <tr>
</tr> <td class="span4"><code>@btnBackground</code></td>
<tr> <td><code>@white</code></td>
<td class="span3"><code>@btnPrimaryBackgroundHighlight</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
<td><code>spin(@btnPrimaryBackground, 15%)</code></td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td> <tr>
</tr> <td><code>@btnBackgroundHighlight</code></td>
<td><code>darken(@white, 10%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
</tr>
<tr>
<td><code>@btnBorder</code></td>
<td><code>darken(@white, 20%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr>
<td><code>@btnPrimaryBackground</code></td>
<td><code>@linkColor</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
</tr>
<tr>
<td><code>@btnPrimaryBackgroundHighlight</code></td>
<td><code>spin(@btnPrimaryBackground, 15%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
</tr>
<tr>
<td><code>@btnInfoBackground</code></td>
<td><code>#5bc0de</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
</tr>
<tr>
<td><code>@btnInfoBackgroundHighlight</code></td>
<td><code>#2f96b4</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
</tr>
<tr>
<td><code>@btnSuccessBackground</code></td>
<td><code>#62c462</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
</tr>
<tr>
<td><code>@btnSuccessBackgroundHighlight</code></td>
<td><code>51a351</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
</tr>
<tr> <tr>
<td class="span3"><code>@btnInfoBackground</code></td> <td><code>@btnWarningBackground</code></td>
<td><code>#5bc0de</code></td> <td><code>lighten(@orange, 15%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnInfoBackgroundHighlight</code></td> <td><code>@btnWarningBackgroundHighlight</code></td>
<td><code>#2f96b4</code></td> <td><code>@orange</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnSuccessBackground</code></td> <td><code>@btnDangerBackground</code></td>
<td><code>#62c462</code></td> <td><code>#ee5f5b</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnSuccessBackgroundHighlight</code></td> <td><code>@btnDangerBackgroundHighlight</code></td>
<td><code>51a351</code></td> <td><code>#bd362f</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnWarningBackground</code></td> <td><code>@btnInverseBackground</code></td>
<td><code>lighten(@orange, 15%)</code></td> <td><code>@gray</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnWarningBackgroundHighlight</code></td> <td><code>@btnInverseBackgroundHighlight</code></td>
<td><code>@orange</code></td> <td><code>@grayDarker</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
</tr> </tr>
</tbody>
</table>
<h4>Forms</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@placeholderText</code></td>
<td><code>@grayLight</code></td>
</tr>
<tr>
<td><code>@inputBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@inputBorder</code></td>
<td><code>#ccc</code></td>
</tr>
<tr>
<td><code>@inputBorderRadius</code></td>
<td><code>3px</code></td>
</tr>
<tr>
<td><code>@inputDisabledBackground</code></td>
<td><code>@grayLighter</code></td>
</tr>
<tr>
<td><code>@formActionsBackground</code></td>
<td><code>#f5f5f5</code></td>
</tr>
</tbody>
</table>
<h4>Form states and alerts</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@warningText</code></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
<td>#b94a48</td>
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
</tr>
<tr>
<td><code>@errorBackground</code></td>
<td>#f2dede</td>
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
</tr>
<tr>
<td><code>@successText</code></td>
<td>#468847</td>
<td><span class="swatch" style="background-color: #468847;"></span></td>
</tr>
<tr>
<td><code>@successBackground</code></td>
<td>#dff0d8</td>
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
</tr>
<tr>
<td><code>@infoText</code></td>
<td>#3a87ad</td>
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
</tr>
<tr>
<td><code>@infoBackground</code></td>
<td>#d9edf7</td>
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
</tr>
</tbody>
</table>
<tr> <h4>Navbar</h4>
<td class="span3"><code>@btnDangerBackground</code></td> <table class="table table-bordered table-striped">
<td><code>#ee5f5b</code></td> <tbody>
<td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td> <tr>
</tr> <td class="span4"><code>@navbarHeight</code></td>
<tr> <td>40px</td>
<td class="span3"><code>@btnDangerBackgroundHighlight</code></td> <td class="swatch-col"></td>
<td><code>#bd362f</code></td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td> <tr>
</tr> <td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr> <tr>
<td class="span3"><code>@btnInverseBackground</code></td> <td><code>@navbarText</code></td>
<td><code>@gray</code></td> <td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td> <td><span class="swatch" style="background-color: #999;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnInverseBackgroundHighlight</code></td> <td><code>@navbarLinkColor</code></td>
<td><code>@grayDarker</code></td> <td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td> <td><span class="swatch" style="background-color: #999;"></span></td>
</tr> </tr>
</tbody> <tr>
</table> <td><code>@navbarLinkColorHover</code></td>
<h4>Forms</h4> <td><code>@white</code></td>
<table class="table table-bordered table-striped"> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
<tbody> </tr>
<tr> <tr>
<td class="span3"><code>@placeholderText</code></td> <td><code>@navbarLinkColorActive</code></td>
<td><code>@grayLight</code></td> <td><code>@navbarLinkColorHover</code></td>
</tr> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
<tr> </tr>
<td><code>@inputBackground</code></td> <tr>
<td><code>@white</code></td> <td><code>@navbarLinkBackgroundHover</code></td>
</tr> <td><code>transparent</code></td>
<tr> <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
<td><code>@inputBorder</code></td> </tr>
<td><code>#ccc</code></td> <tr>
</tr> <td><code>@navbarLinkBackgroundActive</code></td>
<tr> <td><code>@navbarBackground</code></td>
<td><code>@inputBorderRadius</code></td> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
<td><code>3px</code></td> </tr>
</tr>
<tr>
<td><code>@inputDisabledBackground</code></td>
<td><code>@grayLighter</code></td>
</tr>
<tr>
<td><code>@formActionsBackground</code></td>
<td><code>#f5f5f5</code></td>
</tr>
</tbody>
</table>
<h4>Form states and alerts</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@warningText</code></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
<td>#b94a48</td>
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
</tr>
<tr>
<td><code>@errorBackground</code></td>
<td>#f2dede</td>
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
</tr>
<tr>
<td><code>@successText</code></td>
<td>#468847</td>
<td><span class="swatch" style="background-color: #468847;"></span></td>
</tr>
<tr>
<td><code>@successBackground</code></td>
<td>#dff0d8</td>
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
</tr>
<tr>
<td><code>@infoText</code></td>
<td>#3a87ad</td>
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
</tr>
<tr>
<td><code>@infoBackground</code></td>
<td>#d9edf7</td>
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h4>Navbar</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr> <tr>
<td><code>@navbarText</code></td> <td><code>@navbarSearchBackground</code></td>
<td><code>@grayLight</code></td> <td><code>lighten(@navbarBackground, 25%)</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td> <td><span class="swatch" style="background-color: #666;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkColor</code></td> <td><code>@navbarSearchBackgroundFocus</code></td>
<td><code>@grayLight</code></td> <td><code>@white</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkColorHover</code></td> <td><code>@navbarSearchBorder</code></td>
<td><code>@white</code></td> <td><code>darken(@navbarSearchBackground, 30%)</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td> <td><span class="swatch" style="background-color: #111;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkColorActive</code></td> <td><code>@navbarSearchPlaceholderColor</code></td>
<td><code>@navbarLinkColorHover</code></td> <td><code>#ccc</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td> <td><span class="swatch" style="background-color: #ccc;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkBackgroundHover</code></td> <td><code>@navbarBrandColor</code></td>
<td><code>transparent</code></td> <td><code>@navbarLinkColor</code></td>
<td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr> </tr>
<tr> </tbody>
<td><code>@navbarLinkBackgroundActive</code></td> </table>
<td><code>@navbarBackground</code></td> <h4>Dropdowns</h4>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td> <table class="table table-bordered table-striped">
</tr> <tbody>
<tr>
<td class="span4"><code>@dropdownBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownBorder</code></td>
<td><code>rgba(0,0,0,.2)</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColor</code></td>
<td><code>@grayDark</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerTop</code></td>
<td><code>#e5e5e5</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerBottom</code></td>
<td><code>@white</code></td>
</tr>
</tbody>
</table>
<h4>Hero unit</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@heroUnitBackground</code></td>
<td><code>@grayLighter</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td class="span2"><code>@heroUnitHeadingColor</code></td>
<td><code>inherit</code></td>
<td></td>
</tr>
<tr>
<td><code>@heroUnitLeadColor</code></td>
<td><code>inhereit</code></td>
<td></td>
</tr>
</tbody>
</table>
<tr>
<td><code>@navbarSearchBackground</code></td>
<td><code>lighten(@navbarBackground, 25%)</code></td>
<td><span class="swatch" style="background-color: #666;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBackgroundFocus</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBorder</code></td>
<td><code>darken(@navbarSearchBackground, 30%)</code></td>
<td><span class="swatch" style="background-color: #111;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchPlaceholderColor</code></td>
<td><code>#ccc</code></td>
<td><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr>
<td><code>@navbarBrandColor</code></td>
<td><code>@navbarLinkColor</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h4>Dropdowns</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@dropdownBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownBorder</code></td>
<td><code>rgba(0,0,0,.2)</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColor</code></td>
<td><code>@grayDark</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerTop</code></td>
<td><code>#e5e5e5</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerBottom</code></td>
<td><code>@white</code></td>
</tr>
</tbody>
</table>
<h4>Hero unit</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@heroUnitBackground</code></td>
<td><code>@grayLighter</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td class="span2"><code>@heroUnitHeadingColor</code></td>
<td><code>inherit</code></td>
<td></td>
</tr>
<tr>
<td><code>@heroUnitLeadColor</code></td>
<td><code>inhereit</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
</section> </section>
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
...@@ -61,514 +61,507 @@ ...@@ -61,514 +61,507 @@
<h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1> <h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
</div> </div>
<div class="row"> <h3>{{_i}}Scaffolding and links{{/i}}</h3>
<div class="span6"> <table class="table table-bordered table-striped">
<h3>{{_i}}Scaffolding and links{{/i}}</h3> <tbody>
<table class="table table-bordered table-striped"> <tr>
<tbody> <td class="span4"><code>@bodyBackground</code></td>
<tr> <td><code>@white</code></td>
<td class="span2"><code>@bodyBackground</code></td> <td>{{_i}}Page background color{{/i}}</td>
<td><code>@white</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
<td>{{_i}}Page background color{{/i}}</td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td> <tr>
</tr> <td><code>@textColor</code></td>
<tr> <td><code>@grayDark</code></td>
<td><code>@textColor</code></td> <td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
<td><code>@grayDark</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
<td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td> <tr>
</tr> <td><code>@linkColor</code></td>
<tr> <td><code>#08c</code></td>
<td><code>@linkColor</code></td> <td>{{_i}}Default link text color{{/i}}</td>
<td><code>#08c</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
<td>{{_i}}Default link text color{{/i}}</td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td> <tr>
</tr> <td><code>@linkColorHover</code></td>
<tr> <td><code>darken(@linkColor, 15%)</code></td>
<td><code>@linkColorHover</code></td> <td>{{_i}}Default link text hover color{{/i}}</td>
<td><code>darken(@linkColor, 15%)</code></td> <td><span class="swatch" style="background-color: #005580;"></span></td>
<td>{{_i}}Default link text hover color{{/i}}</td> </tr>
<td><span class="swatch" style="background-color: #005580;"></span></td> </tbody>
</tr> </table>
</tbody> <h3>{{_i}}Grid system{{/i}}</h3>
</table> <table class="table table-bordered table-striped">
<h3>{{_i}}Grid system{{/i}}</h3> <tbody>
<table class="table table-bordered table-striped"> <tr>
<tbody> <td class="span4"><code>@gridColumns</code></td>
<tr> <td>12</td>
<td class="span2"><code>@gridColumns</code></td> </tr>
<td>12</td> <tr>
</tr> <td><code>@gridColumnWidth</code></td>
<tr> <td>60px</td>
<td><code>@gridColumnWidth</code></td> </tr>
<td>60px</td> <tr>
</tr> <td><code>@gridGutterWidth</code></td>
<tr> <td>20px</td>
<td><code>@gridGutterWidth</code></td> </tr>
<td>20px</td> <tr>
</tr> <td><code>@fluidGridColumnWidth</code></td>
<tr> <td>6.382978723%</td>
<td><code>@fluidGridColumnWidth</code></td> </tr>
<td>6.382978723%</td> <tr>
</tr> <td><code>@fluidGridGutterWidth</code></td>
<tr> <td>2.127659574%</td>
<td><code>@fluidGridGutterWidth</code></td> </tr>
<td>2.127659574%</td> </tbody>
</tr> </table>
</tbody> <h3>{{_i}}Typography{{/i}}</h3>
</table> <table class="table table-bordered table-striped">
<h3>{{_i}}Typography{{/i}}</h3> <tbody>
<table class="table table-bordered table-striped"> <tr>
<tbody> <td class="span4"><code>@sansFontFamily</code></td>
<tr> <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
<td class="span2"><code>@sansFontFamily</code></td> </tr>
<td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td> <tr>
</tr> <td><code>@serifFontFamily</code></td>
<tr> <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
<td><code>@serifFontFamily</code></td> </tr>
<td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td> <tr>
</tr> <td><code>@monoFontFamily</code></td>
<tr> <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
<td><code>@monoFontFamily</code></td> </tr>
<td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
</tr>
<tr> <tr>
<td class="span2"><code>@baseFontSize</code></td> <td><code>@baseFontSize</code></td>
<td>13px</td> <td>13px</td>
<td><em class="muted">Must be pixels</em></td> <td><em class="muted">Must be pixels</em></td>
</tr> </tr>
<tr> <tr>
<td><code>@baseFontFamily</code></td> <td><code>@baseFontFamily</code></td>
<td colspan="2"><code>@sansFontFamily</code></td> <td colspan="2"><code>@sansFontFamily</code></td>
</tr> </tr>
<tr> <tr>
<td><code>@baseLineHeight</code></td> <td><code>@baseLineHeight</code></td>
<td>18px</td> <td>18px</td>
<td><em class="muted">Must be pixels</em></td> <td><em class="muted">Must be pixels</em></td>
</tr> </tr>
<tr> <tr>
<td><code>@altFontFamily</code></td> <td><code>@altFontFamily</code></td>
<td colspan="2"><code>@serifFontFamily</code></td> <td colspan="2"><code>@serifFontFamily</code></td>
</tr> </tr>
<tr>
<td><code>@headingsFontFamily</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
<tr>
<td><code>@headingsFontWeight</code></td>
<td colspan="2"><code>bold</code></td>
</tr>
<tr>
<td><code>@headingsColor</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Tables{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@tableBackground</code></td>
<td><code>transparent</code></td>
</tr>
<tr>
<td><code>@tableBackgroundAccent</code></td>
<td><code>#f9f9f9</code></td>
</tr>
<tr>
<td><code>@tableBackgroundHover</code></td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>@tableBorder</code></td>
<td><code>ddd</code></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Grayscale colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@black</code></td>
<td>#000</td>
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
</tr>
<tr>
<td><code>@grayDarker</code></td>
<td>#222</td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td>#333</td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@gray</code></td>
<td>#555</td>
<td><span class="swatch" style="background-color: #555;"></span></td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td>#999</td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td>#eee</td>
<td><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Accent colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@blue</code></td>
<td>#049cdb</td>
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td><span class="swatch" style="background-color: #46a546;"></span></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td><span class="swatch" style="background-color: #f89406;"></span></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
</tr>
</tbody>
</table>
<tr>
<td class="span2"><code>@headingsFontFamily</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
<tr>
<td><code>@headingsFontWeight</code></td>
<td colspan="2"><code>bold</code></td>
</tr>
<tr>
<td><code>@headingsColor</code></td>
<td colspan="2"><code>inherit</code></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Tables{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@tableBackground</code></td>
<td><code>transparent</code></td>
</tr>
<tr>
<td><code>@tableBackgroundAccent</code></td>
<td><code>#f9f9f9</code></td>
</tr>
<tr>
<td><code>@tableBackgroundHover</code></td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>@tableBorder</code></td>
<td><code>ddd</code></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h3>{{_i}}Grayscale colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@black</code></td>
<td>#000</td>
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
</tr>
<tr>
<td><code>@grayDarker</code></td>
<td>#222</td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td>#333</td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr>
<td><code>@gray</code></td>
<td>#555</td>
<td><span class="swatch" style="background-color: #555;"></span></td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td>#999</td>
<td><span class="swatch" style="background-color: #999;"></span></td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td>#eee</td>
<td><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h3>{{_i}}Accent colors{{/i}}</h3>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@blue</code></td>
<td>#049cdb</td>
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td><span class="swatch" style="background-color: #46a546;"></span></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td><span class="swatch" style="background-color: #f89406;"></span></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /row -->
<h3>{{_i}}Components{{/i}}</h3> <h3>{{_i}}Components{{/i}}</h3>
<div class="row">
<div class="span6">
<h4>{{_i}}Buttons{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@btnBackground</code></td>
<td><code>@white</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td class="span3"><code>@btnBackgroundHighlight</code></td>
<td><code>darken(@white, 10%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
</tr>
<tr>
<td class="span3"><code>@btnBorder</code></td>
<td><code>darken(@white, 20%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr> <h4>{{_i}}Buttons{{/i}}</h4>
<td class="span3"><code>@btnPrimaryBackground</code></td> <table class="table table-bordered table-striped">
<td><code>@linkColor</code></td> <tbody>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td> <tr>
</tr> <td class="span4"><code>@btnBackground</code></td>
<tr> <td><code>@white</code></td>
<td class="span3"><code>@btnPrimaryBackgroundHighlight</code></td> <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
<td><code>spin(@btnPrimaryBackground, 15%)</code></td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td> <tr>
</tr> <td><code>@btnBackgroundHighlight</code></td>
<td><code>darken(@white, 10%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
</tr>
<tr>
<td><code>@btnBorder</code></td>
<td><code>darken(@white, 20%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr>
<td><code>@btnPrimaryBackground</code></td>
<td><code>@linkColor</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
</tr>
<tr>
<td><code>@btnPrimaryBackgroundHighlight</code></td>
<td><code>spin(@btnPrimaryBackground, 15%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
</tr>
<tr>
<td><code>@btnInfoBackground</code></td>
<td><code>#5bc0de</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
</tr>
<tr>
<td><code>@btnInfoBackgroundHighlight</code></td>
<td><code>#2f96b4</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
</tr>
<tr>
<td><code>@btnSuccessBackground</code></td>
<td><code>#62c462</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
</tr>
<tr>
<td><code>@btnSuccessBackgroundHighlight</code></td>
<td><code>51a351</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
</tr>
<tr> <tr>
<td class="span3"><code>@btnInfoBackground</code></td> <td><code>@btnWarningBackground</code></td>
<td><code>#5bc0de</code></td> <td><code>lighten(@orange, 15%)</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnInfoBackgroundHighlight</code></td> <td><code>@btnWarningBackgroundHighlight</code></td>
<td><code>#2f96b4</code></td> <td><code>@orange</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnSuccessBackground</code></td> <td><code>@btnDangerBackground</code></td>
<td><code>#62c462</code></td> <td><code>#ee5f5b</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnSuccessBackgroundHighlight</code></td> <td><code>@btnDangerBackgroundHighlight</code></td>
<td><code>51a351</code></td> <td><code>#bd362f</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnWarningBackground</code></td> <td><code>@btnInverseBackground</code></td>
<td><code>lighten(@orange, 15%)</code></td> <td><code>@gray</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnWarningBackgroundHighlight</code></td> <td><code>@btnInverseBackgroundHighlight</code></td>
<td><code>@orange</code></td> <td><code>@grayDarker</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
</tr> </tr>
</tbody>
</table>
<h4>{{_i}}Forms{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@placeholderText</code></td>
<td><code>@grayLight</code></td>
</tr>
<tr>
<td><code>@inputBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@inputBorder</code></td>
<td><code>#ccc</code></td>
</tr>
<tr>
<td><code>@inputBorderRadius</code></td>
<td><code>3px</code></td>
</tr>
<tr>
<td><code>@inputDisabledBackground</code></td>
<td><code>@grayLighter</code></td>
</tr>
<tr>
<td><code>@formActionsBackground</code></td>
<td><code>#f5f5f5</code></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Form states and alerts{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@warningText</code></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
<td>#b94a48</td>
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
</tr>
<tr>
<td><code>@errorBackground</code></td>
<td>#f2dede</td>
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
</tr>
<tr>
<td><code>@successText</code></td>
<td>#468847</td>
<td><span class="swatch" style="background-color: #468847;"></span></td>
</tr>
<tr>
<td><code>@successBackground</code></td>
<td>#dff0d8</td>
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
</tr>
<tr>
<td><code>@infoText</code></td>
<td>#3a87ad</td>
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
</tr>
<tr>
<td><code>@infoBackground</code></td>
<td>#d9edf7</td>
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
</tr>
</tbody>
</table>
<tr> <h4>{{_i}}Navbar{{/i}}</h4>
<td class="span3"><code>@btnDangerBackground</code></td> <table class="table table-bordered table-striped">
<td><code>#ee5f5b</code></td> <tbody>
<td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td> <tr>
</tr> <td class="span4"><code>@navbarHeight</code></td>
<tr> <td>40px</td>
<td class="span3"><code>@btnDangerBackgroundHighlight</code></td> <td class="swatch-col"></td>
<td><code>#bd362f</code></td> </tr>
<td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td> <tr>
</tr> <td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr> <tr>
<td class="span3"><code>@btnInverseBackground</code></td> <td><code>@navbarText</code></td>
<td><code>@gray</code></td> <td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td> <td><span class="swatch" style="background-color: #999;"></span></td>
</tr> </tr>
<tr> <tr>
<td class="span3"><code>@btnInverseBackgroundHighlight</code></td> <td><code>@navbarLinkColor</code></td>
<td><code>@grayDarker</code></td> <td><code>@grayLight</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td> <td><span class="swatch" style="background-color: #999;"></span></td>
</tr> </tr>
</tbody> <tr>
</table> <td><code>@navbarLinkColorHover</code></td>
<h4>{{_i}}Forms{{/i}}</h4> <td><code>@white</code></td>
<table class="table table-bordered table-striped"> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
<tbody> </tr>
<tr> <tr>
<td class="span3"><code>@placeholderText</code></td> <td><code>@navbarLinkColorActive</code></td>
<td><code>@grayLight</code></td> <td><code>@navbarLinkColorHover</code></td>
</tr> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
<tr> </tr>
<td><code>@inputBackground</code></td> <tr>
<td><code>@white</code></td> <td><code>@navbarLinkBackgroundHover</code></td>
</tr> <td><code>transparent</code></td>
<tr> <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
<td><code>@inputBorder</code></td> </tr>
<td><code>#ccc</code></td> <tr>
</tr> <td><code>@navbarLinkBackgroundActive</code></td>
<tr> <td><code>@navbarBackground</code></td>
<td><code>@inputBorderRadius</code></td> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
<td><code>3px</code></td> </tr>
</tr>
<tr>
<td><code>@inputDisabledBackground</code></td>
<td><code>@grayLighter</code></td>
</tr>
<tr>
<td><code>@formActionsBackground</code></td>
<td><code>#f5f5f5</code></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Form states and alerts{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@warningText</code></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
<td>#b94a48</td>
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
</tr>
<tr>
<td><code>@errorBackground</code></td>
<td>#f2dede</td>
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
</tr>
<tr>
<td><code>@successText</code></td>
<td>#468847</td>
<td><span class="swatch" style="background-color: #468847;"></span></td>
</tr>
<tr>
<td><code>@successBackground</code></td>
<td>#dff0d8</td>
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
</tr>
<tr>
<td><code>@infoText</code></td>
<td>#3a87ad</td>
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
</tr>
<tr>
<td><code>@infoBackground</code></td>
<td>#d9edf7</td>
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h4>{{_i}}Navbar{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@navbarHeight</code></td>
<td>40px</td>
<td class="swatch-col"></td>
</tr>
<tr>
<td><code>@navbarBackground</code></td>
<td><code>@grayDarker</code></td>
<td><span class="swatch" style="background-color: #222;"></span></td>
</tr>
<tr>
<td><code>@navbarBackgroundHighlight</code></td>
<td><code>@grayDark</code></td>
<td><span class="swatch" style="background-color: #333;"></span></td>
</tr>
<tr> <tr>
<td><code>@navbarText</code></td> <td><code>@navbarSearchBackground</code></td>
<td><code>@grayLight</code></td> <td><code>lighten(@navbarBackground, 25%)</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td> <td><span class="swatch" style="background-color: #666;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkColor</code></td> <td><code>@navbarSearchBackgroundFocus</code></td>
<td><code>@grayLight</code></td> <td><code>@white</code></td>
<td><span class="swatch" style="background-color: #999;"></span></td> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkColorHover</code></td> <td><code>@navbarSearchBorder</code></td>
<td><code>@white</code></td> <td><code>darken(@navbarSearchBackground, 30%)</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td> <td><span class="swatch" style="background-color: #111;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkColorActive</code></td> <td><code>@navbarSearchPlaceholderColor</code></td>
<td><code>@navbarLinkColorHover</code></td> <td><code>#ccc</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td> <td><span class="swatch" style="background-color: #ccc;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@navbarLinkBackgroundHover</code></td> <td><code>@navbarBrandColor</code></td>
<td><code>transparent</code></td> <td><code>@navbarLinkColor</code></td>
<td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td> <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr> </tr>
<tr> </tbody>
<td><code>@navbarLinkBackgroundActive</code></td> </table>
<td><code>@navbarBackground</code></td> <h4>{{_i}}Dropdowns{{/i}}</h4>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td> <table class="table table-bordered table-striped">
</tr> <tbody>
<tr>
<td class="span4"><code>@dropdownBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownBorder</code></td>
<td><code>rgba(0,0,0,.2)</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColor</code></td>
<td><code>@grayDark</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerTop</code></td>
<td><code>#e5e5e5</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerBottom</code></td>
<td><code>@white</code></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Hero unit{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span4"><code>@heroUnitBackground</code></td>
<td><code>@grayLighter</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td class="span2"><code>@heroUnitHeadingColor</code></td>
<td><code>inherit</code></td>
<td></td>
</tr>
<tr>
<td><code>@heroUnitLeadColor</code></td>
<td><code>inhereit</code></td>
<td></td>
</tr>
</tbody>
</table>
<tr>
<td><code>@navbarSearchBackground</code></td>
<td><code>lighten(@navbarBackground, 25%)</code></td>
<td><span class="swatch" style="background-color: #666;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBackgroundFocus</code></td>
<td><code>@white</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchBorder</code></td>
<td><code>darken(@navbarSearchBackground, 30%)</code></td>
<td><span class="swatch" style="background-color: #111;"></span></td>
</tr>
<tr>
<td><code>@navbarSearchPlaceholderColor</code></td>
<td><code>#ccc</code></td>
<td><span class="swatch" style="background-color: #ccc;"></span></td>
</tr>
<tr>
<td><code>@navbarBrandColor</code></td>
<td><code>@navbarLinkColor</code></td>
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Dropdowns{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span2"><code>@dropdownBackground</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownBorder</code></td>
<td><code>rgba(0,0,0,.2)</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColor</code></td>
<td><code>@grayDark</code></td>
</tr>
<tr>
<td><code>@dropdownLinkColorHover</code></td>
<td><code>@white</code></td>
</tr>
<tr>
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerTop</code></td>
<td><code>#e5e5e5</code></td>
</tr>
<tr>
<td><code>@@dropdownDividerBottom</code></td>
<td><code>@white</code></td>
</tr>
</tbody>
</table>
<h4>{{_i}}Hero unit{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="span3"><code>@heroUnitBackground</code></td>
<td><code>@grayLighter</code></td>
<td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
</tr>
<tr>
<td class="span2"><code>@heroUnitHeadingColor</code></td>
<td><code>inherit</code></td>
<td></td>
</tr>
<tr>
<td><code>@heroUnitLeadColor</code></td>
<td><code>inhereit</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
</section> </section>
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment