talos

1
// stylelint-disable selector-no-qualifying-type
2

3
//
4
// Base styles
5
//
6

7
.input-group {
8
  position: relative;
9
  display: flex;
10
  flex-wrap: wrap; // For form validation feedback
11
  align-items: stretch;
12
  width: 100%;
13

14
  > .form-control,
15
  > .form-control-plaintext,
16
  > .custom-select,
17
  > .custom-file {
18
    position: relative; // For focus state's z-index
19
    flex: 1 1 auto;
20
    width: 1%;
21
    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
22
    margin-bottom: 0;
23

24
    + .form-control,
25
    + .custom-select,
26
    + .custom-file {
27
      margin-left: -$input-border-width;
28
    }
29
  }
30

31
  // Bring the "active" form control to the top of surrounding elements
32
  > .form-control:focus,
33
  > .custom-select:focus,
34
  > .custom-file .custom-file-input:focus ~ .custom-file-label {
35
    z-index: 3;
36
  }
37

38
  // Bring the custom file input above the label
39
  > .custom-file .custom-file-input:focus {
40
    z-index: 4;
41
  }
42

43
  > .form-control,
44
  > .custom-select {
45
    &:not(:first-child) { @include border-left-radius(0); }
46
  }
47

48
  // Custom file inputs have more complex markup, thus requiring different
49
  // border-radius overrides.
50
  > .custom-file {
51
    display: flex;
52
    align-items: center;
53

54
    &:not(:last-child) .custom-file-label,
55
    &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
56
    &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
57
  }
58

59
  &:not(.has-validation) {
60
    > .form-control:not(:last-child),
61
    > .custom-select:not(:last-child),
62
    > .custom-file:not(:last-child) .custom-file-label,
63
    > .custom-file:not(:last-child) .custom-file-label::after {
64
      @include border-right-radius(0);
65
    }
66
  }
67

68
  &.has-validation {
69
    > .form-control:nth-last-child(n + 3),
70
    > .custom-select:nth-last-child(n + 3),
71
    > .custom-file:nth-last-child(n + 3) .custom-file-label,
72
    > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
73
      @include border-right-radius(0);
74
    }
75
  }
76
}
77

78

79
// Prepend and append
80
//
81
// While it requires one extra layer of HTML for each, dedicated prepend and
82
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
83
// 3) support HTML5 form validation.
84

85
.input-group-prepend,
86
.input-group-append {
87
  display: flex;
88

89
  // Ensure buttons are always above inputs for more visually pleasing borders.
90
  // This isn't needed for `.input-group-text` since it shares the same border-color
91
  // as our inputs.
92
  .btn {
93
    position: relative;
94
    z-index: 2;
95

96
    &:focus {
97
      z-index: 3;
98
    }
99
  }
100

101
  .btn + .btn,
102
  .btn + .input-group-text,
103
  .input-group-text + .input-group-text,
104
  .input-group-text + .btn {
105
    margin-left: -$input-border-width;
106
  }
107
}
108

109
.input-group-prepend { margin-right: -$input-border-width; }
110
.input-group-append { margin-left: -$input-border-width; }
111

112

113
// Textual addons
114
//
115
// Serves as a catch-all element for any text or radio/checkbox input you wish
116
// to prepend or append to an input.
117

118
.input-group-text {
119
  display: flex;
120
  align-items: center;
121
  padding: $input-padding-y $input-padding-x;
122
  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
123
  @include font-size($input-font-size); // Match inputs
124
  font-weight: $font-weight-normal;
125
  line-height: $input-line-height;
126
  color: $input-group-addon-color;
127
  text-align: center;
128
  white-space: nowrap;
129
  background-color: $input-group-addon-bg;
130
  border: $input-border-width solid $input-group-addon-border-color;
131
  @include border-radius($input-border-radius);
132

133
  // Nuke default margins from checkboxes and radios to vertically center within.
134
  input[type="radio"],
135
  input[type="checkbox"] {
136
    margin-top: 0;
137
  }
138
}
139

140

141
// Sizing
142
//
143
// Remix the default form control sizing classes into new ones for easier
144
// manipulation.
145

146
.input-group-lg > .form-control:not(textarea),
147
.input-group-lg > .custom-select {
148
  height: $input-height-lg;
149
}
150

151
.input-group-lg > .form-control,
152
.input-group-lg > .custom-select,
153
.input-group-lg > .input-group-prepend > .input-group-text,
154
.input-group-lg > .input-group-append > .input-group-text,
155
.input-group-lg > .input-group-prepend > .btn,
156
.input-group-lg > .input-group-append > .btn {
157
  padding: $input-padding-y-lg $input-padding-x-lg;
158
  @include font-size($input-font-size-lg);
159
  line-height: $input-line-height-lg;
160
  @include border-radius($input-border-radius-lg);
161
}
162

163
.input-group-sm > .form-control:not(textarea),
164
.input-group-sm > .custom-select {
165
  height: $input-height-sm;
166
}
167

168
.input-group-sm > .form-control,
169
.input-group-sm > .custom-select,
170
.input-group-sm > .input-group-prepend > .input-group-text,
171
.input-group-sm > .input-group-append > .input-group-text,
172
.input-group-sm > .input-group-prepend > .btn,
173
.input-group-sm > .input-group-append > .btn {
174
  padding: $input-padding-y-sm $input-padding-x-sm;
175
  @include font-size($input-font-size-sm);
176
  line-height: $input-line-height-sm;
177
  @include border-radius($input-border-radius-sm);
178
}
179

180
.input-group-lg > .custom-select,
181
.input-group-sm > .custom-select {
182
  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
183
}
184

185

186
// Prepend and append rounded corners
187
//
188
// These rulesets must come after the sizing ones to properly override sm and lg
189
// border-radius values when extending. They're more specific than we'd like
190
// with the `.input-group >` part, but without it, we cannot override the sizing.
191

192

193
.input-group > .input-group-prepend > .btn,
194
.input-group > .input-group-prepend > .input-group-text,
195
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
196
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
197
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
198
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
199
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
200
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
201
  @include border-right-radius(0);
202
}
203

204
.input-group > .input-group-append > .btn,
205
.input-group > .input-group-append > .input-group-text,
206
.input-group > .input-group-prepend:not(:first-child) > .btn,
207
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
208
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
209
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
210
  @include border-left-radius(0);
211
}
212