mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 05:58:25 +01:00
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
This commit is contained in:
Mark Otto
parent
2769241aeb
commit
2d90c816ac
143
docs/assets/css/bootstrap.css
vendored
143
docs/assets/css/bootstrap.css
vendored
@ -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 {
|
||||
.pagination-large ul > li > a,
|
||||
.pagination-large ul > li > span {
|
||||
padding: 11px 19px;
|
||||
font-size: 17.5px;
|
||||
}
|
||||
|
||||
.pagination-large ul > li > a,
|
||||
.pagination-large ul > li > span {
|
||||
padding: 10px 19px;
|
||||
.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-small {
|
||||
font-size: 11.9px;
|
||||
.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 {
|
||||
|
||||
@ -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>
|
||||
...
|
||||
|
||||
16
docs/templates/pages/components.mustache
vendored
16
docs/templates/pages/components.mustache
vendored
@ -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>
|
||||
...
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user