add new vars for common border-radius, upping border-radius of inputs to 4px;...

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

@@ -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 {

docs/components.html

@@ -1525,6 +1525,17 @@
                 <li><a href="#">&raquo;</a></li>
               </ul>
             </div>
+            <div class="pagination">
+              <ul>
+                <li><a href="#">&laquo;</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="#">&raquo;</a></li>
+             </ul>
+            </div>
             <div class="pagination pagination-small">
               <ul>
                 <li><a href="#">&laquo;</a></li>
@@ -1554,6 +1565,11 @@
     ...
   &lt;/ul&gt;
 &lt;/div&gt;
+&lt;div class="pagination"&gt;
+  &lt;ul&gt;
+    ...
+  &lt;/ul&gt;
+&lt;/div&gt;
 &lt;div class="pagination pagination-small"&gt;
   &lt;ul&gt;
     ...

docs/templates/pages/components.mustache

@@ -1454,6 +1454,17 @@
                 <li><a href="#">&raquo;</a></li>
               </ul>
             </div>
+            <div class="pagination">
+              <ul>
+                <li><a href="#">&laquo;</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="#">&raquo;</a></li>
+             </ul>
+            </div>
             <div class="pagination pagination-small">
               <ul>
                 <li><a href="#">&laquo;</a></li>
@@ -1483,6 +1494,11 @@
     ...
   &lt;/ul&gt;
 &lt;/div&gt;
+&lt;div class="pagination"&gt;
+  &lt;ul&gt;
+    ...
+  &lt;/ul&gt;
+&lt;/div&gt;
 &lt;div class="pagination pagination-small"&gt;
   &lt;ul&gt;
     ...

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);
 }
 
 

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;
   }
 }

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";