diff options
| author | Mark Otto <[email protected]> | 2012-09-18 21:16:08 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-09-18 21:16:08 -0700 |
| commit | 2d90c816accea106cbf70c988ddd866268851595 (patch) | |
| tree | 633113028b4e2bae4ad55374ea48738d45310d9d /less | |
| parent | 2769241aeb5e9eba4a34ddbd9d495f7f8271e360 (diff) | |
| download | bootstrap-2d90c816accea106cbf70c988ddd866268851595.tar.xz bootstrap-2d90c816accea106cbf70c988ddd866268851595.zip | |
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
Diffstat (limited to 'less')
| -rw-r--r-- | less/buttons.less | 13 | ||||
| -rw-r--r-- | less/pagination.less | 45 | ||||
| -rw-r--r-- | less/variables.less | 30 |
3 files changed, 57 insertions, 31 deletions
diff --git a/less/buttons.less b/less/buttons.less index 1fa33d1e5..223d7439b 100644 --- a/less/buttons.less +++ b/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); } diff --git a/less/pagination.less b/less/pagination.less index 2c823e149..88065aa22 100644 --- a/less/pagination.less +++ b/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; } } diff --git a/less/variables.less b/less/variables.less index 5fb685377..fcb85c009 100644 --- a/less/variables.less +++ b/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"; |
