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:
+13
-9
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user