_input-groups.scss (4484B)
1 // 2 // Input groups 3 // -------------------------------------------------- 4 5 // Base styles 6 // ------------------------- 7 .input-group { 8 position: relative; // For dropdowns 9 display: table; 10 border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table 11 12 // Undo padding and float of grid classes 13 &[class*="col-"] { 14 float: none; 15 padding-left: 0; 16 padding-right: 0; 17 } 18 19 .form-control { 20 // Ensure that the input is always above the *appended* addon button for 21 // proper border colors. 22 position: relative; 23 z-index: 2; 24 25 // IE9 fubars the placeholder attribute in text inputs and the arrows on 26 // select elements in input groups. To fix it, we float the input. Details: 27 // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 28 float: left; 29 30 width: 100%; 31 margin-bottom: 0; 32 33 &:focus { 34 z-index: 3; 35 } 36 } 37 } 38 39 // Sizing options 40 // 41 // Remix the default form control sizing classes into new ones for easier 42 // manipulation. 43 44 .input-group-lg > .form-control, 45 .input-group-lg > .input-group-addon, 46 .input-group-lg > .input-group-btn > .btn { 47 @extend .input-lg; 48 } 49 .input-group-sm > .form-control, 50 .input-group-sm > .input-group-addon, 51 .input-group-sm > .input-group-btn > .btn { 52 @extend .input-sm; 53 } 54 55 56 // Display as table-cell 57 // ------------------------- 58 .input-group-addon, 59 .input-group-btn, 60 .input-group .form-control { 61 display: table-cell; 62 63 &:not(:first-child):not(:last-child) { 64 border-radius: 0; 65 } 66 } 67 // Addon and addon wrapper for buttons 68 .input-group-addon, 69 .input-group-btn { 70 width: 1%; 71 white-space: nowrap; 72 vertical-align: middle; // Match the inputs 73 } 74 75 // Text input groups 76 // ------------------------- 77 .input-group-addon { 78 padding: $padding-base-vertical $padding-base-horizontal; 79 font-size: $font-size-base; 80 font-weight: normal; 81 line-height: 1; 82 color: $input-color; 83 text-align: center; 84 background-color: $input-group-addon-bg; 85 border: 1px solid $input-group-addon-border-color; 86 border-radius: $input-border-radius; 87 88 // Sizing 89 &.input-sm { 90 padding: $padding-small-vertical $padding-small-horizontal; 91 font-size: $font-size-small; 92 border-radius: $input-border-radius-small; 93 } 94 &.input-lg { 95 padding: $padding-large-vertical $padding-large-horizontal; 96 font-size: $font-size-large; 97 border-radius: $input-border-radius-large; 98 } 99 100 // Nuke default margins from checkboxes and radios to vertically center within. 101 input[type="radio"], 102 input[type="checkbox"] { 103 margin-top: 0; 104 } 105 } 106 107 // Reset rounded corners 108 .input-group .form-control:first-child, 109 .input-group-addon:first-child, 110 .input-group-btn:first-child > .btn, 111 .input-group-btn:first-child > .btn-group > .btn, 112 .input-group-btn:first-child > .dropdown-toggle, 113 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 114 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { 115 @include border-right-radius(0); 116 } 117 .input-group-addon:first-child { 118 border-right: 0; 119 } 120 .input-group .form-control:last-child, 121 .input-group-addon:last-child, 122 .input-group-btn:last-child > .btn, 123 .input-group-btn:last-child > .btn-group > .btn, 124 .input-group-btn:last-child > .dropdown-toggle, 125 .input-group-btn:first-child > .btn:not(:first-child), 126 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { 127 @include border-left-radius(0); 128 } 129 .input-group-addon:last-child { 130 border-left: 0; 131 } 132 133 // Button input groups 134 // ------------------------- 135 .input-group-btn { 136 position: relative; 137 // Jankily prevent input button groups from wrapping with `white-space` and 138 // `font-size` in combination with `inline-block` on buttons. 139 font-size: 0; 140 white-space: nowrap; 141 142 // Negative margin for spacing, position for bringing hovered/focused/actived 143 // element above the siblings. 144 > .btn { 145 position: relative; 146 + .btn { 147 margin-left: -1px; 148 } 149 // Bring the "active" button to the front 150 &:hover, 151 &:focus, 152 &:active { 153 z-index: 2; 154 } 155 } 156 157 // Negative margin to only have a 1px border between the two 158 &:first-child { 159 > .btn, 160 > .btn-group { 161 margin-right: -1px; 162 } 163 } 164 &:last-child { 165 > .btn, 166 > .btn-group { 167 z-index: 2; 168 margin-left: -1px; 169 } 170 } 171 }