rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

add new vars for common font-sizes and paddings with large, small, and mini components; resize pagination and buttons to better match each other

Browse Source
This commit is contained in:
Mark Otto 2012-09-18 20:56:20 -07:00
parent 37460e58d3
commit 2769241aeb
6 changed files with 143 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
docs/assets/css/bootstrap.css vendored
View File

@ -3159,10 +3159,15 @@ button.close {
box-shadow: none; box-shadow: none;
} }
.btn-large,
.btn-small,
.btn-mini {
line-height: 1;
}
.btn-large { .btn-large {
padding: 9px 14px; padding: 10px 19px;
font-size: 16px; font-size: 17.5px;
line-height: normal;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@ -3173,9 +3178,8 @@ button.close {
} }
.btn-small { .btn-small {
padding: 3px 9px; padding: 6px 10px;
font-size: 12px; font-size: 11.9px;
line-height: 18px;
} }
.btn-small [class^="icon-"] { .btn-small [class^="icon-"] {
@ -3183,9 +3187,8 @@ button.close {
} }
.btn-mini { .btn-mini {
padding: 2px 6px; padding: 5px 6px;
font-size: 11px; font-size: 10.5px;
line-height: 17px;
} }
.btn-block { .btn-block {
@ -4759,14 +4762,18 @@ input[type="submit"].btn.btn-mini {
color: #999999; color: #999999;
} }
.pagination {
margin: 20px 0;
}
.pagination ul { .pagination ul {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
-webkit-border-radius: 3px; -webkit-border-radius: 4px;
-moz-border-radius: 3px; -moz-border-radius: 4px;
border-radius: 3px; border-radius: 4px;
*zoom: 1; *zoom: 1;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@ -4780,6 +4787,8 @@ input[type="submit"].btn.btn-mini {
.pagination ul > li > a, .pagination ul > li > a,
.pagination ul > li > span { .pagination ul > li > span {
float: left; float: left;
padding: 10px 14px;
line-height: 1;
text-decoration: none; text-decoration: none;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #dddddd; border: 1px solid #dddddd;
@ -4829,52 +4838,31 @@ input[type="submit"].btn.btn-mini {
text-align: right; text-align: right;
} }
.pagination {
height: 30px;
margin: 17px 0;
font-size: 14px;
}
.pagination ul > li > a,
.pagination ul > li > span {
padding: 0 12px;
line-height: 28px;
}
.pagination-large { .pagination-large {
height: 38px; font-size: 17.5px;
margin: 20px 0;
font-size: 16px;
} }
.pagination-large ul > li > a, .pagination-large ul > li > a,
.pagination-large ul > li > span { .pagination-large ul > li > span {
padding: 0 15px; padding: 10px 19px;
line-height: 36px;
} }
.pagination-small { .pagination-small {
height: 26px; font-size: 11.9px;
margin: 15px 0;
font-size: 12px;
} }
.pagination-small ul > li > a, .pagination-small ul > li > a,
.pagination-small ul > li > span { .pagination-small ul > li > span {
padding: 0 10px; padding: 6px 10px;
line-height: 22px;
} }
.pagination-mini { .pagination-mini {
height: 23px; font-size: 10.5px;
margin: 10px 0;
font-size: 11px;
} }
.pagination-mini ul > li > a, .pagination-mini ul > li > a,
.pagination-mini ul > li > span { .pagination-mini ul > li > span {
padding: 0 8px; padding: 5px 6px;
line-height: 21px;
} }
.pager { .pager {

114
docs/components.html
View File

@ -1474,21 +1474,47 @@
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2>Sizes</h2> <h2>Options</h2>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<h3>Disabled and active states</h3>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="pagination pagination-large"> <div class="pagination pagination-centered">
<ul> <ul>
<li><a href="#">&laquo;</a></li> <li class="disabled"><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li> <li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#">&raquo;</a></li>
</ul> </ul>
</div> </div>
<div class="pagination"> </div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>Sizes</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<div class="pagination pagination-large">
<ul> <ul>
<li><a href="#">&laquo;</a></li> <li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
@ -1525,86 +1551,16 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="pagination pagination-large"&gt; &lt;div class="pagination pagination-large"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt; ...
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="pagination pagination-small"&gt; &lt;div class="pagination pagination-small"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt; ...
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="pagination pagination-mini"&gt; &lt;div class="pagination pagination-mini"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Options</h2>
<h3>Disabled and active states</h3>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-docs-example">
<div class="pagination pagination-centered">
<ul>
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;

114
docs/templates/pages/components.mustache vendored
View File

@ -1403,21 +1403,47 @@
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2>{{_i}}Sizes{{/i}}</h2> <h2>{{_i}}Options{{/i}}</h2>
<p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
<h3>{{_i}}Disabled and active states{{/i}}</h3>
<p>{{_i}}Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.{{/i}}</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="pagination pagination-large"> <div class="pagination pagination-centered">
<ul> <ul>
<li><a href="#">&laquo;</a></li> <li class="disabled"><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li> <li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li> <li><a href="#">&raquo;</a></li>
</ul> </ul>
</div> </div>
<div class="pagination"> </div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Sizes{{/i}}</h3>
<p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
<div class="bs-docs-example">
<div class="pagination pagination-large">
<ul> <ul>
<li><a href="#">&laquo;</a></li> <li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
@ -1454,86 +1480,16 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="pagination pagination-large"&gt; &lt;div class="pagination pagination-large"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt; ...
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="pagination pagination-small"&gt; &lt;div class="pagination pagination-small"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt; ...
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="pagination pagination-mini"&gt; &lt;div class="pagination pagination-mini"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Options{{/i}}</h2>
<h3>{{_i}}Disabled and active states{{/i}}</h3>
<p>{{_i}}Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.{{/i}}</p>
<div class="bs-docs-example">
<div class="pagination pagination-centered">
<ul>
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;

22
less/buttons.less
View File

@ -71,11 +71,17 @@
// Button Sizes // Button Sizes
// -------------------------------------------------- // --------------------------------------------------
// Reset line-heights
.btn-large,
.btn-small,
.btn-mini {
line-height: 1;
}
// Large // Large
.btn-large { .btn-large {
padding: 9px 14px; padding: @paddingLarge;
font-size: @baseFontSize + 2px; font-size: @fontSizeLarge;
line-height: normal;
.border-radius(5px); .border-radius(5px);
} }
.btn-large [class^="icon-"] { .btn-large [class^="icon-"] {
@ -84,9 +90,8 @@
// Small // Small
.btn-small { .btn-small {
padding: 3px 9px; padding: @paddingSmall;
font-size: @baseFontSize - 2px; font-size: @fontSizeSmall;
line-height: @baseLineHeight - 2px;
} }
.btn-small [class^="icon-"] { .btn-small [class^="icon-"] {
margin-top: 0; margin-top: 0;
@ -94,9 +99,8 @@
// Mini // Mini
.btn-mini { .btn-mini {
padding: 2px 6px; padding: @paddingMini;
font-size: @baseFontSize - 3px; font-size: @fontSizeMini;
line-height: @baseLineHeight - 3px;
} }

48
less/pagination.less
View File

@ -2,21 +2,30 @@
// Pagination (multiple pages) // Pagination (multiple pages)
// -------------------------------------------------- // --------------------------------------------------
// Space out pagination from surrounding content
.pagination {
margin: @baseLineHeight 0;
}
.pagination ul { .pagination ul {
// Allow for text-based alignment
display: inline-block; display: inline-block;
.ie7-inline-block(); .ie7-inline-block();
// Reset default ul styles
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
.border-radius(3px); // Visuals
.border-radius(4px);
.box-shadow(0 1px 2px rgba(0,0,0,.05)); .box-shadow(0 1px 2px rgba(0,0,0,.05));
} }
.pagination ul > li { .pagination ul > li {
display: inline; display: inline; // Remove list-style and block-level defaults
} }
.pagination ul > li > a, .pagination ul > li > a,
.pagination ul > li > span { .pagination ul > li > span {
float: left; float: left; // Collapse white-space
padding: 10px 14px;
line-height: 1;
text-decoration: none; text-decoration: none;
background-color: @paginationBackground; background-color: @paginationBackground;
border: 1px solid @paginationBorder; border: 1px solid @paginationBorder;
@ -57,50 +66,31 @@
text-align: right; text-align: right;
} }
// Pagination Sizes // Pagination Sizes
// -------------------------------------------------- // --------------------------------------------------
// Default
.pagination {
margin: (@baseLineHeight - 3) 0;
height: @baseLineHeight + 10;
font-size: @baseFontSize;
ul > li > a,
ul > li > span {
padding: 0 12px;
line-height: @baseLineHeight + 8;
}
}
// Large // Large
.pagination-large { .pagination-large {
margin: @baseLineHeight 0; font-size: @fontSizeLarge;
height: @baseLineHeight + 18;
font-size: @baseFontSize + 2px;
ul > li > a, ul > li > a,
ul > li > span { ul > li > span {
padding: 0 15px; padding: @paddingLarge;
line-height: (@baseLineHeight * 2) - 4;
} }
} }
// Small // Small
.pagination-small { .pagination-small {
margin: (@baseLineHeight - 5) 0; font-size: @fontSizeSmall;
height: @baseLineHeight + 6;
font-size: @baseFontSize - 2px;
ul > li > a, ul > li > a,
ul > li > span { ul > li > span {
padding: 0 10px; padding: @paddingSmall;
line-height: @baseLineHeight + 2;
} }
} }
// Mini // Mini
.pagination-mini { .pagination-mini {
margin: (@baseLineHeight - 10) 0; font-size: @fontSizeMini;
height: @baseLineHeight + 3;
font-size: @baseFontSize - 3px;
ul > li > a, ul > li > a,
ul > li > span { ul > li > span {
padding: 0 8px; padding: @paddingMini;
line-height: @baseLineHeight + 1;
} }
} }

14
less/variables.less
View File

@ -57,6 +57,7 @@
@headingsFontWeight: bold; // instead of browser default, bold @headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor @headingsColor: inherit; // empty to use BS default, @textColor
// Tables // Tables
// ------------------------- // -------------------------
@tableBackground: transparent; // overall background-color @tableBackground: transparent; // overall background-color
@ -97,6 +98,7 @@
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5; @formActionsBackground: #f5f5f5;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdownBackground: @white; @dropdownBackground: @white;
@ -116,6 +118,7 @@
// COMPONENT VARIABLES // COMPONENT VARIABLES
// -------------------------------------------------- // --------------------------------------------------
// Z-index master list // Z-index master list
// ------------------------- // -------------------------
// Used for a bird's eye view of components dependent on the z-axis // Used for a bird's eye view of components dependent on the z-axis
@ -128,6 +131,17 @@
@zindexModal: 1050; @zindexModal: 1050;
// Component size variations
// -------------------------
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 10px 19px;
@paddingSmall: 6px 10px;
@paddingMini: 5px 6px;
// Sprite icons path // Sprite icons path
// ------------------------- // -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png"; @iconSpritePath: "../img/glyphicons-halflings.png";