From 2769241aeb5e9eba4a34ddbd9d495f7f8271e360 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Tue, 18 Sep 2012 20:56:20 -0700
Subject: [PATCH] add new vars for common font-sizes and paddings with large,
small, and mini components; resize pagination and buttons to better match
each other
---
docs/assets/css/bootstrap.css | 66 ++++++-------
docs/components.html | 114 +++++++----------------
docs/templates/pages/components.mustache | 114 +++++++----------------
less/buttons.less | 22 +++--
less/pagination.less | 48 ++++------
less/variables.less | 14 +++
6 files changed, 143 insertions(+), 235 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2cba1da9e3..aa950d24c5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3159,10 +3159,15 @@ button.close {
box-shadow: none;
}
+.btn-large,
+.btn-small,
+.btn-mini {
+ line-height: 1;
+}
+
.btn-large {
- padding: 9px 14px;
- font-size: 16px;
- line-height: normal;
+ padding: 10px 19px;
+ font-size: 17.5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
@@ -3173,9 +3178,8 @@ button.close {
}
.btn-small {
- padding: 3px 9px;
- font-size: 12px;
- line-height: 18px;
+ padding: 6px 10px;
+ font-size: 11.9px;
}
.btn-small [class^="icon-"] {
@@ -3183,9 +3187,8 @@ button.close {
}
.btn-mini {
- padding: 2px 6px;
- font-size: 11px;
- line-height: 17px;
+ padding: 5px 6px;
+ font-size: 10.5px;
}
.btn-block {
@@ -4759,14 +4762,18 @@ input[type="submit"].btn.btn-mini {
color: #999999;
}
+.pagination {
+ margin: 20px 0;
+}
+
.pagination ul {
display: inline-block;
*display: inline;
margin-bottom: 0;
margin-left: 0;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
*zoom: 1;
-webkit-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 > span {
float: left;
+ padding: 10px 14px;
+ line-height: 1;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
@@ -4829,52 +4838,31 @@ input[type="submit"].btn.btn-mini {
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 {
- height: 38px;
- margin: 20px 0;
- font-size: 16px;
+ font-size: 17.5px;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span {
- padding: 0 15px;
- line-height: 36px;
+ padding: 10px 19px;
}
.pagination-small {
- height: 26px;
- margin: 15px 0;
- font-size: 12px;
+ font-size: 11.9px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
- padding: 0 10px;
- line-height: 22px;
+ padding: 6px 10px;
}
.pagination-mini {
- height: 23px;
- margin: 10px 0;
- font-size: 11px;
+ font-size: 10.5px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
- padding: 0 8px;
- line-height: 21px;
+ padding: 5px 6px;
}
.pager {
diff --git a/docs/components.html b/docs/components.html
index 2db1189a92..b5d39b7be6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1474,21 +1474,47 @@
<hr class="bs-docs-separator">
- <h2>Sizes</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>
+ <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-large">
+ <div class="pagination pagination-centered">
<ul>
- <li><a href="#">«</a></li>
- <li><a href="#">1</a></li>
+ <li class="disabled"><a href="#">«</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="#">»</a></li>
- </ul>
+ </ul>
</div>
- <div class="pagination">
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination">
+ <ul>
+ <li class="disabled"><a href="#">Prev</a></li>
+ <li class="active"><a href="#">1</a></li>
+ ...
+ </ul>
+</div>
+</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">
+<div class="pagination">
+ <ul>
+ <li class="disabled"><span>Prev</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+ </ul>
+</div>
+</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>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
@@ -1525,86 +1551,16 @@
<pre class="prettyprint linenums">
<div class="pagination pagination-large">
<ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
- </ul>
-</div>
-<div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
+ ...
</ul>
</div>
<div class="pagination pagination-small">
<ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
- </ul>
-</div>
-<div class="pagination pagination-mini">
- <ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
- </ul>
-</div>
-</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="#">«</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="#">»</a></li>
- </ul>
- </div>
- </div>
-<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="disabled"><a href="#">Prev</a></li>
- <li class="active"><a href="#">1</a></li>
...
</ul>
</div>
-</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">
-<div class="pagination">
+<div class="pagination pagination-mini">
<ul>
- <li class="disabled"><span>Prev</span></li>
- <li class="active"><span>1</span></li>
...
</ul>
</div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index c674863f25..67fbf55352 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1403,21 +1403,47 @@
<hr class="bs-docs-separator">
- <h2>{{_i}}Sizes{{/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>
+ <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-large">
+ <div class="pagination pagination-centered">
<ul>
- <li><a href="#">«</a></li>
- <li><a href="#">1</a></li>
+ <li class="disabled"><a href="#">«</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="#">»</a></li>
- </ul>
+ </ul>
</div>
- <div class="pagination">
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination">
+ <ul>
+ <li class="disabled"><a href="#">Prev</a></li>
+ <li class="active"><a href="#">1</a></li>
+ ...
+ </ul>
+</div>
+</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">
+<div class="pagination">
+ <ul>
+ <li class="disabled"><span>Prev</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+ </ul>
+</div>
+</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>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
@@ -1454,86 +1480,16 @@
<pre class="prettyprint linenums">
<div class="pagination pagination-large">
<ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
- </ul>
-</div>
-<div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
+ ...
</ul>
</div>
<div class="pagination pagination-small">
<ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
- </ul>
-</div>
-<div class="pagination pagination-mini">
- <ul>
- <li><a href="#">«</a></li>
- <li><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="#">»</a></li>
- </ul>
-</div>
-</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="#">«</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="#">»</a></li>
- </ul>
- </div>
- </div>
-<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="disabled"><a href="#">Prev</a></li>
- <li class="active"><a href="#">1</a></li>
...
</ul>
</div>
-</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">
-<div class="pagination">
+<div class="pagination pagination-mini">
<ul>
- <li class="disabled"><span>Prev</span></li>
- <li class="active"><span>1</span></li>
...
</ul>
</div>
diff --git a/less/buttons.less b/less/buttons.less
index c80986ea7b..1fa33d1e54 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -71,11 +71,17 @@
// Button Sizes
// --------------------------------------------------
+// Reset line-heights
+.btn-large,
+.btn-small,
+.btn-mini {
+ line-height: 1;
+}
+
// Large
.btn-large {
- padding: 9px 14px;
- font-size: @baseFontSize + 2px;
- line-height: normal;
+ padding: @paddingLarge;
+ font-size: @fontSizeLarge;
.border-radius(5px);
}
.btn-large [class^="icon-"] {
@@ -84,9 +90,8 @@
// Small
.btn-small {
- padding: 3px 9px;
- font-size: @baseFontSize - 2px;
- line-height: @baseLineHeight - 2px;
+ padding: @paddingSmall;
+ font-size: @fontSizeSmall;
}
.btn-small [class^="icon-"] {
margin-top: 0;
@@ -94,9 +99,8 @@
// Mini
.btn-mini {
- padding: 2px 6px;
- font-size: @baseFontSize - 3px;
- line-height: @baseLineHeight - 3px;
+ padding: @paddingMini;
+ font-size: @fontSizeMini;
}
diff --git a/less/pagination.less b/less/pagination.less
index 57771824ae..2c823e1498 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -2,21 +2,30 @@
// Pagination (multiple pages)
// --------------------------------------------------
+// Space out pagination from surrounding content
+.pagination {
+ margin: @baseLineHeight 0;
+}
.pagination ul {
+ // Allow for text-based alignment
display: inline-block;
.ie7-inline-block();
+ // Reset default ul styles
margin-left: 0;
margin-bottom: 0;
- .border-radius(3px);
+ // Visuals
+ .border-radius(4px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
- display: inline;
+ display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
- float: left;
+ float: left; // Collapse white-space
+ padding: 10px 14px;
+ line-height: 1;
text-decoration: none;
background-color: @paginationBackground;
border: 1px solid @paginationBorder;
@@ -57,50 +66,31 @@
text-align: right;
}
+
// 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
.pagination-large {
- margin: @baseLineHeight 0;
- height: @baseLineHeight + 18;
- font-size: @baseFontSize + 2px;
+ font-size: @fontSizeLarge;
ul > li > a,
ul > li > span {
- padding: 0 15px;
- line-height: (@baseLineHeight * 2) - 4;
+ padding: @paddingLarge;
}
}
// Small
.pagination-small {
- margin: (@baseLineHeight - 5) 0;
- height: @baseLineHeight + 6;
- font-size: @baseFontSize - 2px;
+ font-size: @fontSizeSmall;
ul > li > a,
ul > li > span {
- padding: 0 10px;
- line-height: @baseLineHeight + 2;
+ padding: @paddingSmall;
}
}
// Mini
.pagination-mini {
- margin: (@baseLineHeight - 10) 0;
- height: @baseLineHeight + 3;
- font-size: @baseFontSize - 3px;
+ font-size: @fontSizeMini;
ul > li > a,
ul > li > span {
- padding: 0 8px;
- line-height: @baseLineHeight + 1;
+ padding: @paddingMini;
}
}
diff --git a/less/variables.less b/less/variables.less
index 734664316d..5fb685377b 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -57,6 +57,7 @@
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
+
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@@ -97,6 +98,7 @@
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
+
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@@ -116,6 +118,7 @@
// COMPONENT VARIABLES
// --------------------------------------------------
+
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
@@ -128,6 +131,17 @@
@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
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
--
GitLab