From 2d90c816accea106cbf70c988ddd866268851595 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Tue, 18 Sep 2012 21:16:08 -0700
Subject: [PATCH] add new vars for common border-radius, upping border-radius
of inputs to 4px; add border-radius changes to -large, -small, -mini for
buttons and paginations
---
docs/assets/css/bootstrap.css | 145 +++++++++++++++--------
docs/components.html | 16 +++
docs/templates/pages/components.mustache | 16 +++
less/buttons.less | 13 +-
less/pagination.less | 45 +++++--
less/variables.less | 30 +++--
6 files changed, 182 insertions(+), 83 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index aa950d24c5..d4d4e031f3 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -992,9 +992,9 @@ input[type="color"],
font-size: 14px;
line-height: 20px;
color: #555555;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
}
input,
@@ -1582,9 +1582,9 @@ select:focus:required:invalid:focus {
margin-bottom: 0;
*margin-left: 0;
vertical-align: top;
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
+ -webkit-border-radius: 0 4px 4px 0;
+ -moz-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
}
.input-append input:focus,
@@ -1635,17 +1635,17 @@ select:focus:required:invalid:focus {
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
+ -webkit-border-radius: 4px 0 0 4px;
+ -moz-border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
}
.input-append input,
.input-append select,
.input-append .uneditable-input {
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
+ -webkit-border-radius: 4px 0 0 4px;
+ -moz-border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
}
.input-append .add-on,
@@ -1655,9 +1655,9 @@ select:focus:required:invalid:focus {
.input-append .add-on:last-child,
.input-append .btn:last-child {
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
+ -webkit-border-radius: 0 4px 4px 0;
+ -moz-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
}
.input-prepend.input-append input,
@@ -1671,17 +1671,17 @@ select:focus:required:invalid:focus {
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
margin-right: -1px;
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
+ -webkit-border-radius: 4px 0 0 4px;
+ -moz-border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
margin-left: -1px;
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
+ -webkit-border-radius: 0 4px 4px 0;
+ -moz-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
}
input.search-query {
@@ -3062,7 +3062,7 @@ button.close {
.btn {
display: inline-block;
*display: inline;
- padding: 4px 14px;
+ padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
@@ -3159,14 +3159,8 @@ button.close {
box-shadow: none;
}
-.btn-large,
-.btn-small,
-.btn-mini {
- line-height: 1;
-}
-
.btn-large {
- padding: 10px 19px;
+ padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@@ -3178,8 +3172,11 @@ button.close {
}
.btn-small {
- padding: 6px 10px;
+ padding: 2px 10px;
font-size: 11.9px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
.btn-small [class^="icon-"] {
@@ -3187,8 +3184,11 @@ button.close {
}
.btn-mini {
- padding: 5px 6px;
+ padding: 1px 6px;
font-size: 10.5px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
.btn-block {
@@ -4787,8 +4787,8 @@ input[type="submit"].btn.btn-mini {
.pagination ul > li > a,
.pagination ul > li > span {
float: left;
- padding: 10px 14px;
- line-height: 1;
+ padding: 4px 12px;
+ line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
@@ -4818,16 +4818,22 @@ input[type="submit"].btn.btn-mini {
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
+ -webkit-border-bottom-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ -webkit-border-top-left-radius: 4px;
+ border-top-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ -moz-border-radius-topleft: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
+ -webkit-border-top-right-radius: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ -moz-border-radius-bottomright: 4px;
}
.pagination-centered {
@@ -4838,31 +4844,66 @@ input[type="submit"].btn.btn-mini {
text-align: right;
}
-.pagination-large {
- font-size: 17.5px;
-}
-
.pagination-large ul > li > a,
.pagination-large ul > li > span {
- padding: 10px 19px;
+ padding: 11px 19px;
+ font-size: 17.5px;
}
-.pagination-small {
- font-size: 11.9px;
+.pagination-large ul > li:first-child > a,
+.pagination-large ul > li:first-child > span {
+ -webkit-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ -webkit-border-top-left-radius: 5px;
+ border-top-left-radius: 5px;
+ -moz-border-radius-bottomleft: 5px;
+ -moz-border-radius-topleft: 5px;
+}
+
+.pagination-large ul > li:last-child > a,
+.pagination-large ul > li:last-child > span {
+ -webkit-border-top-right-radius: 5px;
+ border-top-right-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ -moz-border-radius-topright: 5px;
+ -moz-border-radius-bottomright: 5px;
+}
+
+.pagination-mini ul > li:first-child > a,
+.pagination-small ul > li:first-child > a,
+.pagination-mini ul > li:first-child > span,
+.pagination-small ul > li:first-child > span {
+ -webkit-border-bottom-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-top-left-radius: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ -moz-border-radius-topleft: 3px;
+}
+
+.pagination-mini ul > li:last-child > a,
+.pagination-small ul > li:last-child > a,
+.pagination-mini ul > li:last-child > span,
+.pagination-small ul > li:last-child > span {
+ -webkit-border-top-right-radius: 3px;
+ border-top-right-radius: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ -moz-border-radius-topright: 3px;
+ -moz-border-radius-bottomright: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
- padding: 6px 10px;
-}
-
-.pagination-mini {
- font-size: 10.5px;
+ padding: 2px 10px;
+ font-size: 11.9px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
- padding: 5px 6px;
+ padding: 1px 6px;
+ font-size: 10.5px;
}
.pager {
diff --git a/docs/components.html b/docs/components.html
index b5d39b7be6..ac44cca29f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1525,6 +1525,17 @@
<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>
@@ -1554,6 +1565,11 @@
...
</ul>
</div>
+<div class="pagination">
+ <ul>
+ ...
+ </ul>
+</div>
<div class="pagination pagination-small">
<ul>
...
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 67fbf55352..99da9da7c3 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1454,6 +1454,17 @@
<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>
@@ -1483,6 +1494,11 @@
...
</ul>
</div>
+<div class="pagination">
+ <ul>
+ ...
+ </ul>
+</div>
<div class="pagination pagination-small">
<ul>
...
diff --git a/less/buttons.less b/less/buttons.less
index 1fa33d1e54..223d7439b8 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -10,7 +10,7 @@
.btn {
display: inline-block;
.ie7-inline-block();
- padding: 4px 14px;
+ padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
@@ -71,18 +71,11 @@
// Button Sizes
// --------------------------------------------------
-// Reset line-heights
-.btn-large,
-.btn-small,
-.btn-mini {
- line-height: 1;
-}
-
// Large
.btn-large {
padding: @paddingLarge;
font-size: @fontSizeLarge;
- .border-radius(5px);
+ .border-radius(@borderRadiusLarge);
}
.btn-large [class^="icon-"] {
margin-top: 2px;
@@ -92,6 +85,7 @@
.btn-small {
padding: @paddingSmall;
font-size: @fontSizeSmall;
+ .border-radius(@borderRadiusSmall);
}
.btn-small [class^="icon-"] {
margin-top: 0;
@@ -101,6 +95,7 @@
.btn-mini {
padding: @paddingMini;
font-size: @fontSizeMini;
+ .border-radius(@borderRadiusSmall);
}
diff --git a/less/pagination.less b/less/pagination.less
index 2c823e1498..88065aa220 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -15,7 +15,7 @@
margin-left: 0;
margin-bottom: 0;
// Visuals
- .border-radius(4px);
+ .border-radius(@baseBorderRadius);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
@@ -24,8 +24,8 @@
.pagination ul > li > a,
.pagination ul > li > span {
float: left; // Collapse white-space
- padding: 10px 14px;
- line-height: 1;
+ padding: 4px 12px;
+ line-height: @baseLineHeight;
text-decoration: none;
background-color: @paginationBackground;
border: 1px solid @paginationBorder;
@@ -51,14 +51,17 @@
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
- .border-radius(3px 0 0 3px);
+ .border-left-radius(@baseBorderRadius);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
- .border-radius(0 3px 3px 0);
+ .border-right-radius(@baseBorderRadius);
}
-// Centered
+
+// Alignment
+// --------------------------------------------------
+
.pagination-centered {
text-align: center;
}
@@ -67,30 +70,52 @@
}
-// Pagination Sizes
+// Sizing
// --------------------------------------------------
// Large
.pagination-large {
- font-size: @fontSizeLarge;
ul > li > a,
ul > li > span {
padding: @paddingLarge;
+ font-size: @fontSizeLarge;
+ }
+ ul > li:first-child > a,
+ ul > li:first-child > span {
+ .border-left-radius(@borderRadiusLarge);
+ }
+ ul > li:last-child > a,
+ ul > li:last-child > span {
+ .border-right-radius(@borderRadiusLarge);
}
}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+ ul > li:first-child > a,
+ ul > li:first-child > span {
+ .border-left-radius(@borderRadiusSmall);
+ }
+ ul > li:last-child > a,
+ ul > li:last-child > span {
+ .border-right-radius(@borderRadiusSmall);
+ }
+}
+
// Small
.pagination-small {
- font-size: @fontSizeSmall;
ul > li > a,
ul > li > span {
padding: @paddingSmall;
+ font-size: @fontSizeSmall;
}
}
// Mini
.pagination-mini {
- font-size: @fontSizeMini;
ul > li > a,
ul > li > span {
padding: @paddingMini;
+ font-size: @fontSizeMini;
}
}
diff --git a/less/variables.less b/less/variables.less
index 5fb685377b..fcb85c0095 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -58,6 +58,23 @@
@headingsColor: inherit; // empty to use BS default, @textColor
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge: @baseFontSize * 1.25; // ~18px
+@fontSizeSmall: @baseFontSize * 0.85; // ~12px
+@fontSizeMini: @baseFontSize * 0.75; // ~11px
+
+@paddingLarge: 11px 19px; // 44px
+@paddingSmall: 2px 10px; // 26px
+@paddingMini: 1px 6px; // 24px
+
+@baseBorderRadius: 4px;
+@borderRadiusLarge: 5px;
+@borderRadiusSmall: 3px;
+
+
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@@ -94,7 +111,7 @@
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
-@inputBorderRadius: 3px;
+@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
@@ -131,17 +148,6 @@
@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