From 24f0505bde5df08e9e7dd5b96bf0abeaab10901d Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Fri, 1 Feb 2013 01:39:26 -0200 Subject: [PATCH] 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