2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

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

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
+13 -9
View File
@@ -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;
}
+19 -29
View File
@@ -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;
}
}
+14
View File
@@ -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";