Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 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(:last-child) { @include border-right-radius(0); }
46
    &:not(:first-child) { @include border-left-radius(0); }
47
  }
48
 
49
  // Custom file inputs have more complex markup, thus requiring different
50
  // border-radius overrides.
51
  > .custom-file {
52
    display: flex;
53
    align-items: center;
54
 
55
    &:not(:last-child) .custom-file-label,
56
    &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
57
    &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
58
  }
59
 
60
  &:not(.has-validation) {
61
    > .form-control:not(:last-child),
62
    > .custom-select:not(:last-child),
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::after {
72
      @include border-right-radius(0);
73
    }
74
  }
75
}
76
 
77
 
78
// Prepend and append
79
//
80
// While it requires one extra layer of HTML for each, dedicated prepend and
81
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
82
// 3) support HTML5 form validation.
83
 
84
.input-group-prepend,
85
.input-group-append {
86
  display: flex;
87
 
88
  // Ensure buttons are always above inputs for more visually pleasing borders.
89
  // This isn't needed for `.input-group-text` since it shares the same border-color
90
  // as our inputs.
91
  .btn {
92
    position: relative;
93
    z-index: 2;
94
 
95
    &:focus {
96
      z-index: 3;
97
    }
98
  }
99
 
100
  .btn + .btn,
101
  .btn + .input-group-text,
102
  .input-group-text + .input-group-text,
103
  .input-group-text + .btn {
104
    margin-left: -$input-border-width;
105
  }
106
}
107
 
108
.input-group-prepend { margin-right: -$input-border-width; }
109
.input-group-append { margin-left: -$input-border-width; }
110
 
111
 
112
// Textual addons
113
//
114
// Serves as a catch-all element for any text or radio/checkbox input you wish
115
// to prepend or append to an input.
116
 
117
.input-group-text {
118
  display: flex;
119
  align-items: center;
120
  padding: $input-padding-y $input-padding-x;
121
  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
122
  @include font-size($input-font-size); // Match inputs
123
  font-weight: $font-weight-normal;
124
  line-height: $input-line-height;
125
  color: $input-group-addon-color;
126
  text-align: center;
127
  white-space: nowrap;
128
  background-color: $input-group-addon-bg;
129
  border: $input-border-width solid $input-group-addon-border-color;
130
  @include border-radius($input-border-radius);
131
 
132
  // Nuke default margins from checkboxes and radios to vertically center within.
133
  input[type="radio"],
134
  input[type="checkbox"] {
135
    margin-top: 0;
136
  }
137
}
138
 
139
 
140
// Sizing
141
//
142
// Remix the default form control sizing classes into new ones for easier
143
// manipulation.
144
 
145
.input-group-lg > .form-control:not(textarea),
146
.input-group-lg > .custom-select {
147
  height: $input-height-lg;
148
}
149
 
150
.input-group-lg > .form-control,
151
.input-group-lg > .custom-select,
152
.input-group-lg > .input-group-prepend > .input-group-text,
153
.input-group-lg > .input-group-append > .input-group-text,
154
.input-group-lg > .input-group-prepend > .btn,
155
.input-group-lg > .input-group-append > .btn {
156
  padding: $input-padding-y-lg $input-padding-x-lg;
157
  @include font-size($input-font-size-lg);
158
  line-height: $input-line-height-lg;
159
  @include border-radius($input-border-radius-lg);
160
}
161
 
162
.input-group-sm > .form-control:not(textarea),
163
.input-group-sm > .custom-select {
164
  height: $input-height-sm;
165
}
166
 
167
.input-group-sm > .form-control,
168
.input-group-sm > .custom-select,
169
.input-group-sm > .input-group-prepend > .input-group-text,
170
.input-group-sm > .input-group-append > .input-group-text,
171
.input-group-sm > .input-group-prepend > .btn,
172
.input-group-sm > .input-group-append > .btn {
173
  padding: $input-padding-y-sm $input-padding-x-sm;
174
  @include font-size($input-font-size-sm);
175
  line-height: $input-line-height-sm;
176
  @include border-radius($input-border-radius-sm);
177
}
178
 
179
.input-group-lg > .custom-select,
180
.input-group-sm > .custom-select {
181
  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
182
}
183
 
184
 
185
// Prepend and append rounded corners
186
//
187
// These rulesets must come after the sizing ones to properly override sm and lg
188
// border-radius values when extending. They're more specific than we'd like
189
// with the `.input-group >` part, but without it, we cannot override the sizing.
190
 
191
 
192
.input-group > .input-group-prepend > .btn,
193
.input-group > .input-group-prepend > .input-group-text,
194
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
195
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
196
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
197
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
198
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
199
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
200
.input-group > .input-group-append > .btn,
201
.input-group > .input-group-append > .input-group-text
202
{
203
  @include border-right-radius(0);
204
}
205
 
206
.input-group > .input-group-append > .btn,
207
.input-group > .input-group-append > .input-group-text,
208
.input-group > .input-group-prepend:not(:first-child) > .btn,
209
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
210
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
211
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
212
  @include border-left-radius(0);
213
}