]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // |
2 | // Base styles | |
3 | // | |
4 | ||
5 | .input-group { | |
6 | position: relative; | |
7 | display: flex; | |
8 | width: 100%; | |
9 | ||
10 | .form-control { | |
11 | // Ensure that the input is always above the *appended* addon button for | |
12 | // proper border colors. | |
13 | position: relative; | |
14 | z-index: 2; | |
15 | flex: 1 1 auto; | |
16 | // Add width 1% and flex-basis auto to ensure that button will not wrap out | |
17 | // the column. Applies to IE Edge+ and Firefox. Chrome does not require this. | |
18 | width: 1%; | |
19 | margin-bottom: 0; | |
20 | ||
21 | // Bring the "active" form control to the front | |
22 | @include hover-focus-active { | |
23 | z-index: 3; | |
24 | } | |
25 | } | |
26 | } | |
27 | ||
28 | .input-group-addon, | |
29 | .input-group-btn, | |
30 | .input-group .form-control { | |
31 | // Vertically centers the content of the addons within the input group | |
32 | display: flex; | |
33 | flex-direction: column; | |
34 | justify-content: center; | |
35 | ||
36 | &:not(:first-child):not(:last-child) { | |
37 | @include border-radius(0); | |
38 | } | |
39 | } | |
40 | ||
41 | .input-group-addon, | |
42 | .input-group-btn { | |
43 | white-space: nowrap; | |
44 | vertical-align: middle; // Match the inputs | |
45 | } | |
46 | ||
47 | ||
48 | // Sizing options | |
49 | // | |
50 | // Remix the default form control sizing classes into new ones for easier | |
51 | // manipulation. | |
52 | ||
53 | .input-group-lg > .form-control, | |
54 | .input-group-lg > .input-group-addon, | |
55 | .input-group-lg > .input-group-btn > .btn { | |
56 | @extend .form-control-lg; | |
57 | } | |
58 | .input-group-sm > .form-control, | |
59 | .input-group-sm > .input-group-addon, | |
60 | .input-group-sm > .input-group-btn > .btn { | |
61 | @extend .form-control-sm; | |
62 | } | |
63 | ||
64 | ||
65 | // | |
66 | // Text input groups | |
67 | // | |
68 | ||
69 | .input-group-addon { | |
70 | padding: $input-padding-y $input-padding-x; | |
71 | margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom | |
72 | font-size: $font-size-base; // Match inputs | |
73 | font-weight: $font-weight-normal; | |
74 | line-height: $input-line-height; | |
75 | color: $input-color; | |
76 | text-align: center; | |
77 | background-color: $input-group-addon-bg; | |
78 | border: $input-btn-border-width solid $input-group-addon-border-color; | |
79 | @include border-radius($input-border-radius); | |
80 | ||
81 | // Sizing | |
82 | &.form-control-sm { | |
83 | padding: $input-padding-y-sm $input-padding-x-sm; | |
84 | font-size: $font-size-sm; | |
85 | @include border-radius($input-border-radius-sm); | |
86 | } | |
87 | &.form-control-lg { | |
88 | padding: $input-padding-y-lg $input-padding-x-lg; | |
89 | font-size: $font-size-lg; | |
90 | @include border-radius($input-border-radius-lg); | |
91 | } | |
92 | ||
93 | // scss-lint:disable QualifyingElement | |
94 | // Nuke default margins from checkboxes and radios to vertically center within. | |
95 | input[type="radio"], | |
96 | input[type="checkbox"] { | |
97 | margin-top: 0; | |
98 | } | |
99 | // scss-lint:enable QualifyingElement | |
100 | } | |
101 | ||
102 | ||
103 | // | |
104 | // Reset rounded corners | |
105 | // | |
106 | ||
107 | .input-group .form-control:not(:last-child), | |
108 | .input-group-addon:not(:last-child), | |
109 | .input-group-btn:not(:last-child) > .btn, | |
110 | .input-group-btn:not(:last-child) > .btn-group > .btn, | |
111 | .input-group-btn:not(:last-child) > .dropdown-toggle, | |
112 | .input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle), | |
113 | .input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn { | |
114 | @include border-right-radius(0); | |
115 | } | |
116 | .input-group-addon:not(:last-child) { | |
117 | border-right: 0; | |
118 | } | |
119 | .input-group .form-control:not(:first-child), | |
120 | .input-group-addon:not(:first-child), | |
121 | .input-group-btn:not(:first-child) > .btn, | |
122 | .input-group-btn:not(:first-child) > .btn-group > .btn, | |
123 | .input-group-btn:not(:first-child) > .dropdown-toggle, | |
124 | .input-group-btn:not(:last-child) > .btn:not(:first-child), | |
125 | .input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn { | |
126 | @include border-left-radius(0); | |
127 | } | |
128 | .form-control + .input-group-addon:not(:first-child) { | |
129 | border-left: 0; | |
130 | } | |
131 | ||
132 | // | |
133 | // Button input groups | |
134 | // | |
135 | ||
136 | .input-group-btn { | |
137 | position: relative; | |
138 | // Jankily prevent input button groups from wrapping with `white-space` and | |
139 | // `font-size` in combination with `inline-block` on buttons. | |
140 | font-size: 0; | |
141 | white-space: nowrap; | |
142 | ||
143 | // Negative margin for spacing, position for bringing hovered/focused/actived | |
144 | // element above the siblings. | |
145 | > .btn { | |
146 | position: relative; | |
147 | // Vertically stretch the button and center its content | |
148 | flex: 1; | |
149 | ||
150 | + .btn { | |
151 | margin-left: (-$input-btn-border-width); | |
152 | } | |
153 | ||
154 | // Bring the "active" button to the front | |
155 | @include hover-focus-active { | |
156 | z-index: 3; | |
157 | } | |
158 | } | |
159 | ||
160 | // Negative margin to only have a single, shared border between the two | |
161 | &:not(:last-child) { | |
162 | > .btn, | |
163 | > .btn-group { | |
164 | margin-right: (-$input-btn-border-width); | |
165 | } | |
166 | } | |
167 | &:not(:first-child) { | |
168 | > .btn, | |
169 | > .btn-group { | |
170 | z-index: 2; | |
171 | margin-left: (-$input-btn-border-width); | |
172 | // Because specificity | |
173 | @include hover-focus-active { | |
174 | z-index: 3; | |
175 | } | |
176 | } | |
177 | } | |
178 | } |