Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 1... Línea -...
1 
// stylelint-disable selector-no-qualifying-type
 - 
 
2 
 
 - 
 
3 
//
 - 
 
4 
// Textual form controls
 - 
 
5 
//
 - 
 
6 
 
 - 
 
7 
.form-control {
 - 
 
8 
  display: block;
 - 
 
9 
  width: 100%;
 - 
 
10 
  height: $input-height;
 - 
 
11 
  padding: $input-padding-y $input-padding-x;
 - 
 
12 
  font-family: $input-font-family;
 - 
 
13 
  @include font-size($input-font-size);
 - 
 
14 
  font-weight: $input-font-weight;
 - 
 
15 
  line-height: $input-line-height;
 - 
 
16 
  color: $input-color;
 - 
 
17 
  background-color: $input-bg;
 - 
 
18 
  background-clip: padding-box;
 - 
 
19 
  border: $input-border-width solid $input-border-color;
 - 
 
20 
 
 - 
 
21 
  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
 - 
 
22 
  @include border-radius($input-border-radius, 0);
 - 
 
23 
 
 - 
 
24 
  @include box-shadow($input-box-shadow);
 - 
 
25 
  @include transition($input-transition);
 - 
 
26 
 
 - 
 
27 
  // Unstyle the caret on `<select>`s in IE10+.
 - 
 
28 
  &::-ms-expand {
 - 
 
29 
    background-color: transparent;
 - 
 
30 
    border: 0;
 - 
 
31 
  }
 - 
 
32 
 
 - 
 
33 
  // Customize the `:focus` state to imitate native WebKit styles.
 - 
 
34 
  @include form-control-focus($ignore-warning: true);
 - 
 
35 
 
 - 
 
36 
  // Placeholder
 - 
 
37 
  &::placeholder {
 - 
 
38 
    color: $input-placeholder-color;
 - 
 
39 
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
 - 
 
40 
    opacity: 1;
 - 
 
41 
  }
 - 
 
42 
 
 - 
 
43 
  // Disabled and read-only inputs
 - 
 
44 
  //
 - 
 
45 
  // HTML5 says that controls under a fieldset > legend:first-child won't be
 - 
 
46 
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
 - 
 
47 
  // don't honor that edge case; we style them as disabled anyway.
 - 
 
48 
  &:disabled,
 - 
 
49 
  &[readonly] {
 - 
 
50 
    background-color: $input-disabled-bg;
 - 
 
51 
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
 - 
 
52 
    opacity: 1;
 - 
 
53 
  }
 - 
 
54 
}
 - 
 
55 
 
 - 
 
56 
input[type="date"],
 - 
 
57 
input[type="time"],
 - 
 
58 
input[type="datetime-local"],
 - 
 
59 
input[type="month"] {
 - 
 
60 
  &.form-control {
 - 
 
61 
    appearance: none; // Fix appearance for date inputs in Safari
 - 
 
62 
  }
 - 
 
63 
}
 - 
 
64 
 
 - 
 
65 
select.form-control {
 - 
 
66 
  // Remove select outline from select box in FF
 - 
 
67 
  &:-moz-focusring {
 - 
 
68 
    color: transparent;
 - 
 
69 
    text-shadow: 0 0 0 $input-color;
 - 
 
70 
  }
 - 
 
71 
 
 - 
 
72 
  &:focus::-ms-value {
 - 
 
73 
    // Suppress the nested default white text on blue background highlight given to
 - 
 
74 
    // the selected option text when the (still closed) <select> receives focus
 - 
 
75 
    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
 - 
 
76 
    // match the appearance of the native widget.
 - 
 
77 
    // See https://github.com/twbs/bootstrap/issues/19398.
 - 
 
78 
    color: $input-color;
 - 
 
79 
    background-color: $input-bg;
 - 
 
80 
  }
 - 
 
81 
}
 - 
 
82 
 
 - 
 
83 
// Make file inputs better match text inputs by forcing them to new lines.
 - 
 
84 
.form-control-file,
 - 
 
85 
.form-control-range {
 - 
 
86 
  display: block;
 - 
 
87 
  width: 100%;
 - 
 
88 
}
 - 
 
89 
 
 - 
 
90 
 
 - 
 
91 
//
 - 
 
92 
// Labels
 - 
 
93 
//
 - 
 
94 
 
 - 
 
95 
// For use with horizontal and inline forms, when you need the label (or legend)
 - 
 
96 
// text to align with the form controls.
 - 
 
97 
.col-form-label {
 1 
@import "forms/labels";
98 
  padding-top: add($input-padding-y, $input-border-width);
 - 
 
99 
  padding-bottom: add($input-padding-y, $input-border-width);
 - 
 
100 
  margin-bottom: 0; // Override the `<label>/<legend>` default
 - 
 
101 
  @include font-size(inherit); // Override the `<legend>` default
 - 
 
102 
  line-height: $input-line-height;
 - 
 
103 
}
 - 
 
104 
 
 - 
 
105 
.col-form-label-lg {
 - 
 
106 
  padding-top: add($input-padding-y-lg, $input-border-width);
 - 
 
107 
  padding-bottom: add($input-padding-y-lg, $input-border-width);
 - 
 
108 
  @include font-size($input-font-size-lg);
 - 
 
109 
  line-height: $input-line-height-lg;
 - 
 
110 
}
 - 
 
111 
 
 - 
 
112 
.col-form-label-sm {
 - 
 
113 
  padding-top: add($input-padding-y-sm, $input-border-width);
 - 
 
114 
  padding-bottom: add($input-padding-y-sm, $input-border-width);
 - 
 
115 
  @include font-size($input-font-size-sm);
 - 
 
116 
  line-height: $input-line-height-sm;
 - 
 
117 
}
 - 
 
118 
 
 - 
 
119 
 
 - 
 
120 
// Readonly controls as plain text
 - 
 
121 
//
 - 
 
122 
// Apply class to a readonly input to make it appear like regular plain
 - 
 
123 
// text (without any border, background color, focus indicator)
 - 
 
124 
 
 - 
 
125 
.form-control-plaintext {
 2 
@import "forms/form-text";
126 
  display: block;
 - 
 
127 
  width: 100%;
 - 
 
128 
  padding: $input-padding-y 0;
 - 
 
129 
  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
 - 
 
130 
  @include font-size($input-font-size);
 - 
 
131 
  line-height: $input-line-height;
 - 
 
132 
  color: $input-plaintext-color;
 - 
 
133 
  background-color: transparent;
 - 
 
134 
  border: solid transparent;
 - 
 
135 
  border-width: $input-border-width 0;
 - 
 
136 
 
 - 
 
137 
  &.form-control-sm,
 - 
 
138 
  &.form-control-lg {
 - 
 
139 
    padding-right: 0;
 - 
 
140 
    padding-left: 0;
 - 
 
141 
  }
 - 
 
142 
}
 - 
 
143 
 
 - 
 
144 
 
 - 
 
145 
// Form control sizing
 - 
 
146 
//
 - 
 
147 
// Build on `.form-control` with modifier classes to decrease or increase the
 - 
 
148 
// height and font-size of form controls.
 - 
 
149 
//
 - 
 
150 
// Repeated in `_input_group.scss` to avoid Sass extend issues.
 - 
 
151 
 
 - 
 
152 
.form-control-sm {
 - 
 
153 
  height: $input-height-sm;
 - 
 
154 
  padding: $input-padding-y-sm $input-padding-x-sm;
 - 
 
155 
  @include font-size($input-font-size-sm);
 - 
 
156 
  line-height: $input-line-height-sm;
 - 
 
157 
  @include border-radius($input-border-radius-sm);
 - 
 
158 
}
 - 
 
159 
 
 - 
 
160 
.form-control-lg {
 - 
 
161 
  height: $input-height-lg;
 - 
 
162 
  padding: $input-padding-y-lg $input-padding-x-lg;
 - 
 
163 
  @include font-size($input-font-size-lg);
 - 
 
164 
  line-height: $input-line-height-lg;
 - 
 
165 
  @include border-radius($input-border-radius-lg);
 - 
 
166 
}
 - 
 
167 
 
 - 
 
168 
// stylelint-disable-next-line no-duplicate-selectors
 - 
 
169 
select.form-control {
 - 
 
170 
  &[size],
 - 
 
171 
  &[multiple] {
 - 
 
172 
    height: auto;
 - 
 
173 
  }
 - 
 
174 
}
 - 
 
175 
 
 - 
 
176 
textarea.form-control {
 3 
@import "forms/form-control";
177 
  height: auto;
 - 
 
178 
}
 - 
 
179 
 
 - 
 
180 
// Form groups
 - 
 
181 
//
 - 
 
182 
// Designed to help with the organization and spacing of vertical forms. For
 - 
 
183 
// horizontal forms, use the predefined grid classes.
 - 
 
184 
 
 - 
 
185 
.form-group {
 - 
 
186 
  margin-bottom: $form-group-margin-bottom;
 - 
 
187 
}
 - 
 
188 
 
 - 
 
189 
.form-text {
 - 
 
190 
  display: block;
 - 
 
191 
  margin-top: $form-text-margin-top;
 4 
@import "forms/form-select";
192 
}
 - 
 
193 
 
 - 
 
194 
 
 - 
 
195 
// Form grid
 - 
 
196 
//
 - 
 
197 
// Special replacement for our grid system's `.row` for tighter form layouts.
 - 
 
198 
 
 - 
 
199 
.form-row {
 - 
 
200 
  display: flex;
 - 
 
201 
  flex-wrap: wrap;
 - 
 
202 
  margin-right: -$form-grid-gutter-width * .5;
 - 
 
203 
  margin-left: -$form-grid-gutter-width * .5;
 - 
 
204 
 
 - 
 
205 
  > .col,
 - 
 
206 
  > [class*="col-"] {
 - 
 
207 
    padding-right: $form-grid-gutter-width * .5;
 - 
 
208 
    padding-left: $form-grid-gutter-width * .5;
 - 
 
209 
  }
 - 
 
210 
}
 - 
 
211 
 
 - 
 
212 
 
 - 
 
213 
// Checkboxes and radios
 - 
 
214 
//
 - 
 
215 
// Indent the labels to position radios/checkboxes as hanging controls.
 - 
 
216 
 
 - 
 
217 
.form-check {
 5 
@import "forms/form-check";
218 
  position: relative;
 6 
@import "forms/form-range";
219 
  display: block;
 - 
 
220 
  padding-left: $form-check-input-gutter;
 - 
 
221 
}
 - 
 
222 
 
 - 
 
223 
.form-check-input {
 - 
 
224 
  position: absolute;
 - 
 
225 
  margin-top: $form-check-input-margin-y;
 7 
@import "forms/floating-labels";
226 
  margin-left: -$form-check-input-gutter;
 8 
@import "forms/input-group";
227 
 
 - 
 
228 
  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
 - 
 
229 
  &[disabled] ~ .form-check-label,
 - 
 
230 
  &:disabled ~ .form-check-label {
 - 
 
231 
    color: $text-muted;
 - 
 
232 
  }
 - 
 
233 
}
 - 
 
234 
 
 - 
 
235 
.form-check-label {
 - 
 
236 
  margin-bottom: 0; // Override default `<label>` bottom margin
 - 
 
237 
}
 - 
 
238 
 
 - 
 
239 
.form-check-inline {
 - 
 
240 
  display: inline-flex;
 - 
 
241 
  align-items: center;
 - 
 
242 
  padding-left: 0; // Override base .form-check
 - 
 
243 
  margin-right: $form-check-inline-margin-x;
 - 
 
244 
 
 - 
 
245 
  // Undo .form-check-input defaults and add some `margin-right`.
 - 
 
246 
  .form-check-input {
 - 
 
247 
    position: static;
 - 
 
248 
    margin-top: 0;
 - 
 
249 
    margin-right: $form-check-inline-input-margin-x;
 - 
 
250 
    margin-left: 0;
 - 
 
251 
  }
 - 
 
252 
}
 - 
 
253 
 
 - 
 
254 
 
 - 
 
255 
// Form validation
 9 
@import "forms/validation";
256 
//
 - 
 
257 
// Provide feedback to users when form field values are valid or invalid. Works
 - 
 
258 
// primarily for client-side validation via scoped `:invalid` and `:valid`
 - 
 
259 
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 - 
 
260 
// server side validation.
 - 
 
261 
 
 - 
 
262 
@each $state, $data in $form-validation-states {
 - 
 
263 
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
 - 
 
264 
}
 - 
 
265 
 
 - 
 
266 
// Inline forms
 - 
 
267 
//
 - 
 
268 
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 - 
 
269 
// forms begin stacked on extra small (mobile) devices and then go inline when
 - 
 
270 
// viewports reach <768px.
 - 
 
271 
//
 - 
 
272 
// Requires wrapping inputs and labels with `.form-group` for proper display of
 - 
 
273 
// default HTML form controls and our custom form controls (e.g., input groups).
 - 
 
274 
 
 - 
 
275 
.form-inline {
 - 
 
276 
  display: flex;
 - 
 
277 
  flex-flow: row wrap;
 - 
 
278 
  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
 - 
 
279 
 
 - 
 
280 
  // Because we use flex, the initial sizing of checkboxes is collapsed and
 - 
 
281 
  // doesn't occupy the full-width (which is what we want for xs grid tier),
 - 
 
282 
  // so we force that here.
 - 
 
283 
  .form-check {
 - 
 
284 
    width: 100%;
 - 
 
285 
  }
 - 
 
286 
 
 - 
 
287 
  // Kick in the inline
 - 
 
288 
  @include media-breakpoint-up(sm) {
 - 
 
289 
    label {
 - 
 
290 
      display: flex;
 - 
 
291 
      align-items: center;
 - 
 
292 
      justify-content: center;
 - 
 
293 
      margin-bottom: 0;
 - 
 
294 
    }
 - 
 
295 
 
 - 
 
296 
    // Inline-block all the things for "inline"
 - 
 
297 
    .form-group {
 - 
 
298 
      display: flex;
 - 
 
299 
      flex: 0 0 auto;
 - 
 
300 
      flex-flow: row wrap;
 - 
 
301 
      align-items: center;
 - 
 
302 
      margin-bottom: 0;
 - 
 
303 
    }
 - 
 
304 
 
 - 
 
305 
    // Allow folks to *not* use `.form-group`
 - 
 
306 
    .form-control {
 - 
 
307 
      display: inline-block;
 - 
 
308 
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
 - 
 
309 
      vertical-align: middle;
 - 
 
310 
    }
 - 
 
311 
 
 - 
 
312 
    // Make static controls behave like regular ones
 - 
 
313 
    .form-control-plaintext {
 - 
 
314 
      display: inline-block;
 - 
 
315 
    }
 - 
 
316 
 
 - 
 
317 
    .input-group,
 - 
 
318 
    .custom-select {
 - 
 
319 
      width: auto;
 - 
 
320 
    }
 - 
 
321 
 
 - 
 
322 
    // Remove default margin on radios/checkboxes that were used for stacking, and
 - 
 
323 
    // then undo the floating of radios and checkboxes to match.
 - 
 
324 
    .form-check {
 - 
 
325 
      display: flex;
 - 
 
326 
      align-items: center;
 - 
 
327 
      justify-content: center;
 - 
 
328 
      width: auto;
 - 
 
329 
      padding-left: 0;
 - 
 
330 
    }
 - 
 
331 
    .form-check-input {
 - 
 
332 
      position: relative;
 - 
 
333 
      flex-shrink: 0;
 - 
 
334 
      margin-top: 0;
 - 
 
335 
      margin-right: $form-check-input-margin-x;
 - 
 
336 
      margin-left: 0;
 - 
 
337 
    }
 - 
 
338 
 
 - 
 
339 
    .custom-control {
 - 
 
340 
      align-items: center;
 - 
 
341 
      justify-content: center;
 - 
 
342 
    }
 - 
 
343 
    .custom-control-label {
 - 
 
344 
      margin-bottom: 0;
 - 
 
345 
    }
 - 
 
346 
  }
 - 
 
347 
}
 -