2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03: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
2012-09-18 21:16:08 -07:00
parent 2769241aeb
commit 2d90c816ac
6 changed files with 181 additions and 82 deletions
+4 -9
View File
@@ -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);
}
+35 -10
View File
@@ -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;
}
}
+18 -12
View File
@@ -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";