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