ctf-server
old server for hosting capture-the-flag
git clone https://9o.is/git/ctf-server.git
forms.less
(15866B)
1 //
2 // Forms
3 // --------------------------------------------------
4
5
6 // GENERAL STYLES
7 // --------------
8
9 // Make all forms have space below them
10 form {
11 margin: 0 0 @baseLineHeight;
12 }
13
14 fieldset {
15 padding: 0;
16 margin: 0;
17 border: 0;
18 }
19
20 // Groups of fields with labels on top (legends)
21 legend {
22 display: block;
23 width: 100%;
24 padding: 0;
25 margin-bottom: @baseLineHeight;
26 font-size: @baseFontSize * 1.5;
27 line-height: @baseLineHeight * 2;
28 color: @grayDark;
29 border: 0;
30 border-bottom: 1px solid #e5e5e5;
31
32 // Small
33 small {
34 font-size: @baseLineHeight * .75;
35 color: @grayLight;
36 }
37 }
38
39 // Set font for forms
40 label,
41 input,
42 button,
43 select,
44 textarea {
45 #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
46 }
47 input,
48 button,
49 select,
50 textarea {
51 font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52 }
53
54 // Identify controls by their labels
55 label {
56 display: block;
57 margin-bottom: 5px;
58 }
59
60 // Form controls
61 // -------------------------
62
63 // Shared size and type resets
64 select,
65 textarea,
66 input[type="text"],
67 input[type="password"],
68 input[type="datetime"],
69 input[type="datetime-local"],
70 input[type="date"],
71 input[type="month"],
72 input[type="time"],
73 input[type="week"],
74 input[type="number"],
75 input[type="email"],
76 input[type="url"],
77 input[type="search"],
78 input[type="tel"],
79 input[type="color"],
80 .uneditable-input {
81 display: inline-block;
82 height: @baseLineHeight;
83 padding: 4px 6px;
84 margin-bottom: @baseLineHeight / 2;
85 font-size: @baseFontSize;
86 line-height: @baseLineHeight;
87 color: @gray;
88 .border-radius(@inputBorderRadius);
89 vertical-align: middle;
90 }
91
92 // Reset appearance properties for textual inputs and textarea
93 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
94 input,
95 textarea,
96 .uneditable-input {
97 width: 206px; // plus 12px padding and 2px border
98 }
99 // Reset height since textareas have rows
100 textarea {
101 height: auto;
102 }
103 // Everything else
104 textarea,
105 input[type="text"],
106 input[type="password"],
107 input[type="datetime"],
108 input[type="datetime-local"],
109 input[type="date"],
110 input[type="month"],
111 input[type="time"],
112 input[type="week"],
113 input[type="number"],
114 input[type="email"],
115 input[type="url"],
116 input[type="search"],
117 input[type="tel"],
118 input[type="color"],
119 .uneditable-input {
120 background-color: @inputBackground;
121 border: 1px solid @inputBorder;
122 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
123 .transition(~"border linear .2s, box-shadow linear .2s");
124
125 // Focus state
126 &:focus {
127 border-color: rgba(82,168,236,.8);
128 outline: 0;
129 outline: thin dotted \9; /* IE6-9 */
130 .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
131 }
132 }
133
134 // Position radios and checkboxes better
135 input[type="radio"],
136 input[type="checkbox"] {
137 margin: 4px 0 0;
138 *margin-top: 0; /* IE7 */
139 margin-top: 1px \9; /* IE8-9 */
140 line-height: normal;
141 }
142
143 // Reset width of input images, buttons, radios, checkboxes
144 input[type="file"],
145 input[type="image"],
146 input[type="submit"],
147 input[type="reset"],
148 input[type="button"],
149 input[type="radio"],
150 input[type="checkbox"] {
151 width: auto; // Override of generic input selector
152 }
153
154 // Set the height of select and file controls to match text inputs
155 select,
156 input[type="file"] {
157 height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
158 *margin-top: 4px; /* For IE7, add top margin to align select with labels */
159 line-height: @inputHeight;
160 }
161
162 // Make select elements obey height by applying a border
163 select {
164 width: 220px; // default input width + 10px of padding that doesn't get applied
165 border: 1px solid @inputBorder;
166 background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
167 }
168
169 // Make multiple select elements height not fixed
170 select[multiple],
171 select[size] {
172 height: auto;
173 }
174
175 // Focus for select, file, radio, and checkbox
176 select:focus,
177 input[type="file"]:focus,
178 input[type="radio"]:focus,
179 input[type="checkbox"]:focus {
180 .tab-focus();
181 }
182
183
184 // Uneditable inputs
185 // -------------------------
186
187 // Make uneditable inputs look inactive
188 .uneditable-input,
189 .uneditable-textarea {
190 color: @grayLight;
191 background-color: darken(@inputBackground, 1%);
192 border-color: @inputBorder;
193 .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
194 cursor: not-allowed;
195 }
196
197 // For text that needs to appear as an input but should not be an input
198 .uneditable-input {
199 overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
200 white-space: nowrap;
201 }
202
203 // Make uneditable textareas behave like a textarea
204 .uneditable-textarea {
205 width: auto;
206 height: auto;
207 }
208
209
210 // Placeholder
211 // -------------------------
212
213 // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
214 input,
215 textarea {
216 .placeholder();
217 }
218
219
220 // CHECKBOXES & RADIOS
221 // -------------------
222
223 // Indent the labels to position radios/checkboxes as hanging
224 .radio,
225 .checkbox {
226 min-height: @baseLineHeight; // clear the floating input if there is no label text
227 padding-left: 20px;
228 }
229 .radio input[type="radio"],
230 .checkbox input[type="checkbox"] {
231 float: left;
232 margin-left: -20px;
233 }
234
235 // Move the options list down to align with labels
236 .controls > .radio:first-child,
237 .controls > .checkbox:first-child {
238 padding-top: 5px; // has to be padding because margin collaspes
239 }
240
241 // Radios and checkboxes on same line
242 // TODO v3: Convert .inline to .control-inline
243 .radio.inline,
244 .checkbox.inline {
245 display: inline-block;
246 padding-top: 5px;
247 margin-bottom: 0;
248 vertical-align: middle;
249 }
250 .radio.inline + .radio.inline,
251 .checkbox.inline + .checkbox.inline {
252 margin-left: 10px; // space out consecutive inline controls
253 }
254
255
256
257 // INPUT SIZES
258 // -----------
259
260 // General classes for quick sizes
261 .input-mini { width: 60px; }
262 .input-small { width: 90px; }
263 .input-medium { width: 150px; }
264 .input-large { width: 210px; }
265 .input-xlarge { width: 270px; }
266 .input-xxlarge { width: 530px; }
267
268 // Grid style input sizes
269 input[class*="span"],
270 select[class*="span"],
271 textarea[class*="span"],
272 .uneditable-input[class*="span"],
273 // Redeclare since the fluid row class is more specific
274 .row-fluid input[class*="span"],
275 .row-fluid select[class*="span"],
276 .row-fluid textarea[class*="span"],
277 .row-fluid .uneditable-input[class*="span"] {
278 float: none;
279 margin-left: 0;
280 }
281 // Ensure input-prepend/append never wraps
282 .input-append input[class*="span"],
283 .input-append .uneditable-input[class*="span"],
284 .input-prepend input[class*="span"],
285 .input-prepend .uneditable-input[class*="span"],
286 .row-fluid input[class*="span"],
287 .row-fluid select[class*="span"],
288 .row-fluid textarea[class*="span"],
289 .row-fluid .uneditable-input[class*="span"],
290 .row-fluid .input-prepend [class*="span"],
291 .row-fluid .input-append [class*="span"] {
292 display: inline-block;
293 }
294
295
296
297 // GRID SIZING FOR INPUTS
298 // ----------------------
299
300 // Grid sizes
301 #grid > .input(@gridColumnWidth, @gridGutterWidth);
302
303 // Control row for multiple inputs per line
304 .controls-row {
305 .clearfix(); // Clear the float from controls
306 }
307
308 // Float to collapse white-space for proper grid alignment
309 .controls-row [class*="span"],
310 // Redeclare the fluid grid collapse since we undo the float for inputs
311 .row-fluid .controls-row [class*="span"] {
312 float: left;
313 }
314 // Explicity set top padding on all checkboxes/radios, not just first-child
315 .controls-row .checkbox[class*="span"],
316 .controls-row .radio[class*="span"] {
317 padding-top: 5px;
318 }
319
320
321
322
323 // DISABLED STATE
324 // --------------
325
326 // Disabled and read-only inputs
327 input[disabled],
328 select[disabled],
329 textarea[disabled],
330 input[readonly],
331 select[readonly],
332 textarea[readonly] {
333 cursor: not-allowed;
334 background-color: @inputDisabledBackground;
335 }
336 // Explicitly reset the colors here
337 input[type="radio"][disabled],
338 input[type="checkbox"][disabled],
339 input[type="radio"][readonly],
340 input[type="checkbox"][readonly] {
341 background-color: transparent;
342 }
343
344
345
346
347 // FORM FIELD FEEDBACK STATES
348 // --------------------------
349
350 // Warning
351 .control-group.warning {
352 .formFieldState(@warningText, @warningText, @warningBackground);
353 }
354 // Error
355 .control-group.error {
356 .formFieldState(@errorText, @errorText, @errorBackground);
357 }
358 // Success
359 .control-group.success {
360 .formFieldState(@successText, @successText, @successBackground);
361 }
362 // Success
363 .control-group.info {
364 .formFieldState(@infoText, @infoText, @infoBackground);
365 }
366
367 // HTML5 invalid states
368 // Shares styles with the .control-group.error above
369 input:focus:invalid,
370 textarea:focus:invalid,
371 select:focus:invalid {
372 color: #b94a48;
373 border-color: #ee5f5b;
374 &:focus {
375 border-color: darken(#ee5f5b, 10%);
376 @shadow: 0 0 6px lighten(#ee5f5b, 20%);
377 .box-shadow(@shadow);
378 }
379 }
380
381
382
383 // FORM ACTIONS
384 // ------------
385
386 .form-actions {
387 padding: (@baseLineHeight - 1) 20px @baseLineHeight;
388 margin-top: @baseLineHeight;
389 margin-bottom: @baseLineHeight;
390 background-color: @formActionsBackground;
391 border-top: 1px solid #e5e5e5;
392 .clearfix(); // Adding clearfix to allow for .pull-right button containers
393 }
394
395
396
397 // HELP TEXT
398 // ---------
399
400 .help-block,
401 .help-inline {
402 color: lighten(@textColor, 15%); // lighten the text some for contrast
403 }
404
405 .help-block {
406 display: block; // account for any element using help-block
407 margin-bottom: @baseLineHeight / 2;
408 }
409
410 .help-inline {
411 display: inline-block;
412 .ie7-inline-block();
413 vertical-align: middle;
414 padding-left: 5px;
415 }
416
417
418
419 // INPUT GROUPS
420 // ------------
421
422 // Allow us to put symbols and text within the input field for a cleaner look
423 .input-append,
424 .input-prepend {
425 display: inline-block;
426 margin-bottom: @baseLineHeight / 2;
427 vertical-align: middle;
428 font-size: 0; // white space collapse hack
429 white-space: nowrap; // Prevent span and input from separating
430
431 // Reset the white space collapse hack
432 input,
433 select,
434 .uneditable-input,
435 .dropdown-menu,
436 .popover {
437 font-size: @baseFontSize;
438 }
439
440 input,
441 select,
442 .uneditable-input {
443 position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
444 margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
445 *margin-left: 0;
446 vertical-align: top;
447 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
448 // Make input on top when focused so blue border and shadow always show
449 &:focus {
450 z-index: 2;
451 }
452 }
453 .add-on {
454 display: inline-block;
455 width: auto;
456 height: @baseLineHeight;
457 min-width: 16px;
458 padding: 4px 5px;
459 font-size: @baseFontSize;
460 font-weight: normal;
461 line-height: @baseLineHeight;
462 text-align: center;
463 text-shadow: 0 1px 0 @white;
464 background-color: @grayLighter;
465 border: 1px solid #ccc;
466 }
467 .add-on,
468 .btn,
469 .btn-group > .dropdown-toggle {
470 vertical-align: top;
471 .border-radius(0);
472 }
473 .active {
474 background-color: lighten(@green, 30);
475 border-color: @green;
476 }
477 }
478
479 .input-prepend {
480 .add-on,
481 .btn {
482 margin-right: -1px;
483 }
484 .add-on:first-child,
485 .btn:first-child {
486 // FYI, `.btn:first-child` accounts for a button group that's prepended
487 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
488 }
489 }
490
491 .input-append {
492 input,
493 select,
494 .uneditable-input {
495 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
496 + .btn-group .btn:last-child {
497 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
498 }
499 }
500 .add-on,
501 .btn,
502 .btn-group {
503 margin-left: -1px;
504 }
505 .add-on:last-child,
506 .btn:last-child,
507 .btn-group:last-child > .dropdown-toggle {
508 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
509 }
510 }
511
512 // Remove all border-radius for inputs with both prepend and append
513 .input-prepend.input-append {
514 input,
515 select,
516 .uneditable-input {
517 .border-radius(0);
518 + .btn-group .btn {
519 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
520 }
521 }
522 .add-on:first-child,
523 .btn:first-child {
524 margin-right: -1px;
525 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
526 }
527 .add-on:last-child,
528 .btn:last-child {
529 margin-left: -1px;
530 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
531 }
532 .btn-group:first-child {
533 margin-left: 0;
534 }
535 }
536
537
538
539
540 // SEARCH FORM
541 // -----------
542
543 input.search-query {
544 padding-right: 14px;
545 padding-right: 4px \9;
546 padding-left: 14px;
547 padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
548 margin-bottom: 0; // Remove the default margin on all inputs
549 .border-radius(15px);
550 }
551
552 /* Allow for input prepend/append in search forms */
553 .form-search .input-append .search-query,
554 .form-search .input-prepend .search-query {
555 .border-radius(0); // Override due to specificity
556 }
557 .form-search .input-append .search-query {
558 .border-radius(14px 0 0 14px);
559 }
560 .form-search .input-append .btn {
561 .border-radius(0 14px 14px 0);
562 }
563 .form-search .input-prepend .search-query {
564 .border-radius(0 14px 14px 0);
565 }
566 .form-search .input-prepend .btn {
567 .border-radius(14px 0 0 14px);
568 }
569
570
571
572
573 // HORIZONTAL & VERTICAL FORMS
574 // ---------------------------
575
576 // Common properties
577 // -----------------
578
579 .form-search,
580 .form-inline,
581 .form-horizontal {
582 input,
583 textarea,
584 select,
585 .help-inline,
586 .uneditable-input,
587 .input-prepend,
588 .input-append {
589 display: inline-block;
590 .ie7-inline-block();
591 margin-bottom: 0;
592 vertical-align: middle;
593 }
594 // Re-hide hidden elements due to specifity
595 .hide {
596 display: none;
597 }
598 }
599 .form-search label,
600 .form-inline label,
601 .form-search .btn-group,
602 .form-inline .btn-group {
603 display: inline-block;
604 }
605 // Remove margin for input-prepend/-append
606 .form-search .input-append,
607 .form-inline .input-append,
608 .form-search .input-prepend,
609 .form-inline .input-prepend {
610 margin-bottom: 0;
611 }
612 // Inline checkbox/radio labels (remove padding on left)
613 .form-search .radio,
614 .form-search .checkbox,
615 .form-inline .radio,
616 .form-inline .checkbox {
617 padding-left: 0;
618 margin-bottom: 0;
619 vertical-align: middle;
620 }
621 // Remove float and margin, set to inline-block
622 .form-search .radio input[type="radio"],
623 .form-search .checkbox input[type="checkbox"],
624 .form-inline .radio input[type="radio"],
625 .form-inline .checkbox input[type="checkbox"] {
626 float: left;
627 margin-right: 3px;
628 margin-left: 0;
629 }
630
631
632 // Margin to space out fieldsets
633 .control-group {
634 margin-bottom: @baseLineHeight / 2;
635 }
636
637 // Legend collapses margin, so next element is responsible for spacing
638 legend + .control-group {
639 margin-top: @baseLineHeight;
640 -webkit-margin-top-collapse: separate;
641 }
642
643 // Horizontal-specific styles
644 // --------------------------
645
646 .form-horizontal {
647 // Increase spacing between groups
648 .control-group {
649 margin-bottom: @baseLineHeight;
650 .clearfix();
651 }
652 // Float the labels left
653 .control-label {
654 float: left;
655 width: @horizontalComponentOffset - 20;
656 padding-top: 5px;
657 text-align: right;
658 }
659 // Move over all input controls and content
660 .controls {
661 // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
662 // don't inherit the margin of the parent, in this case .controls
663 *display: inline-block;
664 *padding-left: 20px;
665 margin-left: @horizontalComponentOffset;
666 *margin-left: 0;
667 &:first-child {
668 *padding-left: @horizontalComponentOffset;
669 }
670 }
671 // Remove bottom margin on block level help text since that's accounted for on .control-group
672 .help-block {
673 margin-bottom: 0;
674 }
675 // And apply it only to .help-block instances that follow a form control
676 input,
677 select,
678 textarea,
679 .uneditable-input,
680 .input-prepend,
681 .input-append {
682 + .help-block {
683 margin-top: @baseLineHeight / 2;
684 }
685 }
686 // Move over buttons in .form-actions to align with .controls
687 .form-actions {
688 padding-left: @horizontalComponentOffset;
689 }
690 }