|
0
|
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 align-items: center;
|
|
|
34
|
|
|
35 &:not(:first-child):not(:last-child) {
|
|
|
36 @include border-radius(0);
|
|
|
37 }
|
|
|
38 }
|
|
|
39
|
|
|
40 .input-group-addon,
|
|
|
41 .input-group-btn {
|
|
|
42 white-space: nowrap;
|
|
|
43 vertical-align: middle; // Match the inputs
|
|
|
44 }
|
|
|
45
|
|
|
46
|
|
|
47 // Sizing options
|
|
|
48 //
|
|
|
49 // Remix the default form control sizing classes into new ones for easier
|
|
|
50 // manipulation.
|
|
|
51
|
|
|
52 .input-group-lg > .form-control,
|
|
|
53 .input-group-lg > .input-group-addon,
|
|
|
54 .input-group-lg > .input-group-btn > .btn {
|
|
|
55 @extend .form-control-lg;
|
|
|
56 }
|
|
|
57 .input-group-sm > .form-control,
|
|
|
58 .input-group-sm > .input-group-addon,
|
|
|
59 .input-group-sm > .input-group-btn > .btn {
|
|
|
60 @extend .form-control-sm;
|
|
|
61 }
|
|
|
62
|
|
|
63
|
|
|
64 //
|
|
|
65 // Text input groups
|
|
|
66 //
|
|
|
67
|
|
|
68 .input-group-addon {
|
|
|
69 padding: $input-btn-padding-y $input-btn-padding-x;
|
|
|
70 margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
|
|
71 font-size: $font-size-base; // Match inputs
|
|
|
72 font-weight: $font-weight-normal;
|
|
|
73 line-height: $input-btn-line-height;
|
|
|
74 color: $input-color;
|
|
|
75 text-align: center;
|
|
|
76 background-color: $input-group-addon-bg;
|
|
|
77 border: $input-btn-border-width solid $input-group-addon-border-color;
|
|
|
78 @include border-radius($input-border-radius);
|
|
|
79
|
|
|
80 // Sizing
|
|
|
81 &.form-control-sm {
|
|
|
82 padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
|
|
83 font-size: $font-size-sm;
|
|
|
84 @include border-radius($input-border-radius-sm);
|
|
|
85 }
|
|
|
86
|
|
|
87 &.form-control-lg {
|
|
|
88 padding: $input-btn-padding-y-lg $input-btn-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
|
|
|
148 + .btn {
|
|
|
149 margin-left: (-$input-btn-border-width);
|
|
|
150 }
|
|
|
151
|
|
|
152 // Bring the "active" button to the front
|
|
|
153 @include hover-focus-active {
|
|
|
154 z-index: 3;
|
|
|
155 }
|
|
|
156 }
|
|
|
157
|
|
|
158 // Negative margin to only have a single, shared border between the two
|
|
|
159 &:not(:last-child) {
|
|
|
160 > .btn,
|
|
|
161 > .btn-group {
|
|
|
162 margin-right: (-$input-btn-border-width);
|
|
|
163 }
|
|
|
164 }
|
|
|
165 &:not(:first-child) {
|
|
|
166 > .btn,
|
|
|
167 > .btn-group {
|
|
|
168 z-index: 2;
|
|
|
169 margin-left: (-$input-btn-border-width);
|
|
|
170 // Because specificity
|
|
|
171 @include hover-focus-active {
|
|
|
172 z-index: 3;
|
|
|
173 }
|
|
|
174 }
|
|
|
175 }
|
|
|
176 }
|
