From e69912c163e64af91bdda623dce9cf84b7081eea Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Thu, 31 Jan 2013 19:00:22 -0200 Subject: [PATCH 1/2] Update line-height and padding for input sizes --- less/forms.less | 43 ++++++++++++++++++++++++++++++++++++------- less/variables.less | 13 +++++++++++-- 2 files changed, 47 insertions(+), 9 deletions(-) diff --git a/less/forms.less b/less/forms.less index 0415f217e5..8693fa35de 100644 --- a/less/forms.less +++ b/less/forms.less @@ -57,7 +57,7 @@ input[type="color"], .uneditable-input { display: inline-block; .box-sizing(border-box); // Makes inputs behave like true block-level elements - min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; // margin-bottom: @line-height-base / 2; font-size: @font-size-base; @@ -134,8 +134,8 @@ input[type="checkbox"] { // Set the height of select and file controls to match text inputs select, input[type="file"] { - height: @input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ - line-height: @input-height; + height: @input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ + line-height: @input-height-base; } // Make select elements obey height by applying a border @@ -270,21 +270,22 @@ input[type="tel"], input[type="color"], .uneditable-input { &.input-large { - padding: @padding-large; - padding-left: 14px; - padding-right: 14px; // TODO: Resolve this override + padding: @padding-large-input; font-size: @font-size-large; border-radius: @border-radius-large; + min-height: @input-height-large; } &.input-small { padding: @padding-small; font-size: @font-size-small; border-radius: @border-radius-small; + min-height: @input-height-small; } &.input-mini { padding: @padding-mini; font-size: @font-size-mini; border-radius: @border-radius-small; + min-height: @input-height-small; } } @@ -315,7 +316,7 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"] { - height: @input-height; + height: @input-height-base; } @@ -474,6 +475,14 @@ select:focus:invalid { .input-group .uneditable-input:first-child, .input-group-addon:first-child { .border-left-radius(@border-radius-base); + &.input-small { + .border-left-radius(@border-radius-small); + .border-right-radius(0); + } + &.input-large { + .border-left-radius(@border-radius-large); + .border-right-radius(0); + } } .input-group-addon:first-child { border-right: 0; @@ -482,6 +491,14 @@ select:focus:invalid { .input-group .uneditable-input:last-child, .input-group-addon:last-child { .border-right-radius(@border-radius-base); + &.input-small { + .border-right-radius(@border-radius-small); + .border-left-radius(0); + } + &.input-large { + .border-right-radius(@border-radius-large); + .border-left-radius(0); + } } .input-group-addon:last-child { border-left: 0; @@ -512,6 +529,12 @@ select:focus:invalid { &:first-child > .btn, &.btn-group:first-child > .btn { border-radius: @border-radius-base 0 0 @border-radius-base; + &.btn-large { + border-radius:@border-radius-large 0 0 @border-radius-large; + } + &.btn-small { + border-radius:@border-radius-small 0 0 @border-radius-small; + } } } // Append @@ -523,6 +546,12 @@ select:focus:invalid { &:last-child > .btn, &.btn-group:last-child > .btn { border-radius: 0 @border-radius-base @border-radius-base 0; + &.btn-large { + border-radius: 0 @border-radius-large @border-radius-large 0; + } + &.btn-small { + border-radius: 0 @border-radius-small @border-radius-small 0; + } } } diff --git a/less/variables.less b/less/variables.less index 538e2bd8b7..256959d645 100644 --- a/less/variables.less +++ b/less/variables.less @@ -53,10 +53,14 @@ // ------------------------- // Based on 14px font-size and 1.5 line-height -@padding-large: 11px 19px; // 44px +@padding-large: 11px 14px; // 44px @padding-small: 2px 10px; // 26px @padding-mini: 0 6px; // 22px +@padding-large-input: 10px 14px; // 44px +// firefox hack since it doesn't accept custom line-height for inputs and automatically sets line-height as font-size + 4 px. +// input-large at 18 + 4 = 22, so I tried to compensate on padding. + @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @@ -107,7 +111,12 @@ @input-color-placeholder: @grayLight; -@input-height: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border +@input-height-base: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border +@input-height-large: @line-height-base + 24px; // base line-height + 22px vertical padding + 2px top/bottom border +@input-height-small: @line-height-base + 6px; // base line-height + 4px vertical padding + 2px top/bottom border + +// adjust min-height on input sizes + @form-actions-background: #f5f5f5; From 24f0505bde5df08e9e7dd5b96bf0abeaab10901d Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Fri, 1 Feb 2013 01:39:26 -0200 Subject: [PATCH 2/2] Update input-group-addon for input sizes --- docs/assets/css/bootstrap.css | 91 +++++++++++++++++++++++++++++++++-- less/forms.less | 15 ++++++ 2 files changed, 101 insertions(+), 5 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 47396530a4..8a0c28bb42 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1242,9 +1242,8 @@ input[type="search"].input-large, input[type="tel"].input-large, input[type="color"].input-large, .uneditable-input.input-large { - padding: 11px 19px; - padding-right: 14px; - padding-left: 14px; + min-height: 44px; + padding: 10px 14px; font-size: 17.5px; border-radius: 6px; } @@ -1266,6 +1265,7 @@ input[type="search"].input-small, input[type="tel"].input-small, input[type="color"].input-small, .uneditable-input.input-small { + min-height: 26px; padding: 2px 10px; font-size: 11.9px; border-radius: 3px; @@ -1288,6 +1288,7 @@ input[type="search"].input-mini, input[type="tel"].input-mini, input[type="color"].input-mini, .uneditable-input.input-mini { + min-height: 26px; padding: 0 6px; font-size: 10.5px; border-radius: 3px; @@ -1462,6 +1463,20 @@ select:focus:invalid:focus { border-radius: 0; } +.input-group-addon.input-small, +.input-group-btn.input-small, +.input-group input.input-small, +.input-group .uneditable-input.input-small { + border-radius: 0; +} + +.input-group-addon.input-large, +.input-group-btn.input-large, +.input-group input.input-large, +.input-group .uneditable-input.input-large { + border-radius: 0; +} + .input-group-addon, .input-group-btn { width: 1%; @@ -1482,6 +1497,16 @@ select:focus:invalid:focus { box-sizing: border-box; } +.input-group-addon.input-small { + padding: 2px 10px; + font-size: 11.9px; +} + +.input-group-addon.input-large { + padding: 10px 14px; + font-size: 17.5px; +} + .input-group input:first-child, .input-group .uneditable-input:first-child, .input-group-addon:first-child { @@ -1489,6 +1514,24 @@ select:focus:invalid:focus { border-top-left-radius: 4px; } +.input-group input:first-child.input-small, +.input-group .uneditable-input:first-child.input-small, +.input-group-addon:first-child.input-small { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} + +.input-group input:first-child.input-large, +.input-group .uneditable-input:first-child.input-large, +.input-group-addon:first-child.input-large { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 6px; + border-top-left-radius: 6px; +} + .input-group-addon:first-child { border-right: 0; } @@ -1500,6 +1543,24 @@ select:focus:invalid:focus { border-bottom-right-radius: 4px; } +.input-group input:last-child.input-small, +.input-group .uneditable-input:last-child.input-small, +.input-group-addon:last-child.input-small { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.input-group input:last-child.input-large, +.input-group .uneditable-input:last-child.input-large, +.input-group-addon:last-child.input-large { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + .input-group-addon:last-child { border-left: 0; } @@ -1532,6 +1593,16 @@ select:focus:invalid:focus { border-radius: 4px 0 0 4px; } +.input-group-btn:first-child > .btn.btn-large, +.input-group-btn.btn-group:first-child > .btn.btn-large { + border-radius: 6px 0 0 6px; +} + +.input-group-btn:first-child > .btn.btn-small, +.input-group-btn.btn-group:first-child > .btn.btn-small { + border-radius: 3px 0 0 3px; +} + .input-group-btn:last-child > .btn, .input-group-btn.btn-group:last-child > .btn:first-child { border-left: 0; @@ -1542,6 +1613,16 @@ select:focus:invalid:focus { border-radius: 0 4px 4px 0; } +.input-group-btn:last-child > .btn.btn-large, +.input-group-btn.btn-group:last-child > .btn.btn-large { + border-radius: 0 6px 6px 0; +} + +.input-group-btn:last-child > .btn.btn-small, +.input-group-btn.btn-group:last-child > .btn.btn-small { + border-radius: 0 3px 3px 0; +} + @media screen and (min-width: 768px) { .form-horizontal .control-group { position: relative; @@ -1616,7 +1697,7 @@ fieldset[disabled] .btn { } .btn-large { - padding: 11px 19px; + padding: 11px 14px; font-size: 17.5px; border-radius: 6px; } @@ -3447,7 +3528,7 @@ button.close { .pagination-large > li > a, .pagination-large > li > span { - padding: 11px 19px; + padding: 11px 14px; font-size: 17.5px; } diff --git a/less/forms.less b/less/forms.less index 8693fa35de..5480419a25 100644 --- a/less/forms.less +++ b/less/forms.less @@ -448,6 +448,12 @@ select:focus:invalid { display: table-cell; margin: 0; border-radius: 0; + &.input-small { + border-radius: 0; + } + &.input-large { + border-radius: 0; + } } // Addon and addon wrapper for buttons .input-group-addon, @@ -468,6 +474,15 @@ select:focus:invalid { text-shadow: 0 1px 0 #fff; background-color: @grayLighter; border: 1px solid #ccc; + + &.input-small { + padding: @padding-small; + font-size: @font-size-small; + } + &.input-large { + padding: @padding-large-input; + font-size: @font-size-large; + } } // Reset rounded corners