qfq-bs.css.less 11.5 KB
Newer Older
1
2
3
4
@spinner : url(data:image/gif;base64,R0lGODlhEAAQAKIAAP///9bW1szMzL29vXt7e3Nzc2ZmZv4BAiH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAHACwAAAAAEAAQAAADPAi6QRQrymJMkcwFatuLXOFt1bWEYBmNq6awGDCicUhjIYzBwTBAmc9CQBSkLJGiYKZi+EgdV60ZCwIjCQAh+QQFBwAHACwAAAYABgAIAAADE3gz1/LCwaYYbYTQYkxpnEdlRwIAIfkEBQcABwAsAAACAAYACAAAAxN4OqMnUKgoVzuEuGJMUZznZE4CACH5BAUHAAcALAIAAAAIAAYAAAMUeKozqyKKQ8iRohhTTjsa91DWkwAAIfkEBQcABwAsBgAAAAgABgAAAxR4RNddxhR3oDxjtHWEF9QHUtmRAAAh+QQFBwAHACwKAAIABgAIAAADFHhE12WmOCjbaviMgYUXzQc225EAACH5BAUHAAcALAoABgAGAAgAAAMTeEqkV8YUBaVjagwnulDel21KAgAh+QQFBwAHACwGAAoACAAGAAADFHiqRKvFmHLGOHGKLU47XPdYz5EAADs=);

@alert_container_id : #qfqAlertContainer;
@spinner_class : spinner;
5
@CodeMirror_border_color: #ccc;
6
7

@{alert_container_id} {
8
  position: fixed;
Rafael Ostertag's avatar
Rafael Ostertag committed
9
10
11
  top: 0;
  left: 0;
  width: 100%;
12
  z-index: 1000;
13
14

  .alert {
15
16
    padding: 30px;
    border-radius: 0px;
17
    margin-bottom: 2px;
18
19
20
    border-top: none;
    border-left: none;
    border-right: none;
21
  }
Benjamin Baer's avatar
Benjamin Baer committed
22

Carsten  Rose's avatar
Carsten Rose committed
23
  .alert + .alert {
Benjamin Baer's avatar
Benjamin Baer committed
24
25
    margin-top: -2px;
  }
Rafael Ostertag's avatar
Rafael Ostertag committed
26
27
}

28
29
30
31
32
33
34
i.@{spinner_class} {
  display: inline-block;
  background: @spinner no-repeat;
  //height: image-height(@spinner);
  //width: image-width(@spinner);
  height: 16px;
  width: 16px;
35
36
}

37
38
39
40
.alert-buttons {
  margin-top: 10px;
}

41
/* inline elements in horizontal mode are too much left */
42
43
44
45
46
47
.form-horizontal {
  .form-inline {
    .form-group {
      margin: 0;
    }
  }
Rafael Ostertag's avatar
Rafael Ostertag committed
48

49
50
  /* reduce unwished padding-top offset */
  .checkbox {
51
    padding-top: 7px;
52
  }
53

54
  .checkbox-inline {
55
56
    padding-top: 7px;
    margin-top: 0;
57
58
59
  }

  .radio {
60
    padding-top: 7px;
61
62
63
  }

  .radio-inline {
64
65
    padding-top: 7px;
    margin-top: 0px;
66
67
68
69
70
  }

  input[type=file] {
    display: inline;
  }
71
72
}

73
74
// select:invalid: Dropdown with 'emptyItemAtStart' and required are grey on form load.
select.qfq-locked:invalid {
75
76
77
  color: #a0a0a0;
}

78
79
80
81
82
.form-inline {
  .control-label {
    font-weight: normal;
  }
}
83

84
85
86
87
.lower-canvas {
  background-color: #fff;
}

88
89
90
91
92
93
94
95
96
97
//.form-group.required.control-label:before{
//  color: red;
//  content: "*";
//  position: absolute;
//  margin-left: -10px;
//}

.required-field:after {
  color: #d00;
  content: "*";
98
  //position: absolute;
99
  margin-left: 3px;
100
  //top: 10px;
101
102
}

103
104
105
106
107
108
109
110
111
112
.qfq-table-50 {
  min-width: 50%;
  width: auto;
}

.qfq-table-80 {
  min-width: 80%;
  width: auto;
}

113
114
115
116
117
.qfq-table-100 {
  min-width: 100%;
  width: auto;
}

Benjamin Baer's avatar
Benjamin Baer committed
118

119
.qfq-form-pill {
Benjamin Baer's avatar
Benjamin Baer committed
120
  /*
121
  border-top-right-radius: 4px;
Benjamin Baer's avatar
Benjamin Baer committed
122
123
124
  border-top-left-radius: 4px; */
  border: 1px solid #ccc;
  border-top: none;
125
126
}

Benjamin Baer's avatar
Benjamin Baer committed
127

128
129
130
131
132
.qfq-form-body {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
Benjamin Baer's avatar
Benjamin Baer committed
133
134
  border: 1px solid #ccc;
  border-top: none;
135
136
137
138
139
140
141
142
143
}

/* adjust BS padding of input elements: center */
.form-group {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}

144
145
146
147
148
/* adjust BS padding: Filename (=Text) of the uploaded file should be on the same base line as the label text left of it. */
.uploaded-file {
  padding-top: 4px;
}

Benjamin Baer's avatar
Benjamin Baer committed
149
150
151
152
153
154
155
.qfq-subrecord-table {
  margin-left: 10px;
  margin-right: 10px;
  width: calc(~"100% - 20px");
}

.qfq-form-title, .qfq-subrecord-title {
Benjamin Baer's avatar
Benjamin Baer committed
156
  border: 1px solid #ccc;
157
  border-radius: 4px 4px 0 0;
Benjamin Baer's avatar
Benjamin Baer committed
158
159
  background-image: linear-gradient(to bottom, #fefefe 0, #dedede 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
160
  min-height: 45px;
Benjamin Baer's avatar
Benjamin Baer committed
161
  font-size: 1.2em;
162
  padding: 13px 15px;
Benjamin Baer's avatar
Benjamin Baer committed
163
164
165
  font-weight: bold;
}

Benjamin Baer's avatar
Benjamin Baer committed
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
.qfq-subrecord-title {
  color: #333;
  padding: 10px 12px;
}

.qfq-subrecord-table .btn {
  padding: 5px 10px;
}

.qfq-subrecord-head {
  background-color: #dedede;
  border: 1px solid #ccc;
  border-top: none;
}

.qfq-subrecord-head th, .qfq-subrecord-table td {
  padding: 3px !important;
  vertical-align: middle !important;
Benjamin Baer's avatar
Benjamin Baer committed
184
  border-bottom: 1px solid #ccc !important;
Benjamin Baer's avatar
Benjamin Baer committed
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
}

.qfq-subrecord-table tbody {
  border: 1px solid #ccc;
  border-radius: 0 0 3px 3px;
}

.qfq-subrecord-table>tbody>tr {
  background-color: #ededed;
}

.qfq-subrecord-table>tbody>tr:hover {
  background-color: #efefef;
}

Benjamin Baer's avatar
Benjamin Baer committed
200
201
202
203
.qfq-table-button-width {
  width: 44px;
}

Benjamin Baer's avatar
Benjamin Baer committed
204
205
206
207
.nav-pills>li>a {
  border-radius: 0;
}

208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
.qfq-color-white {
  background-color: #ffffff;
}

.qfq-color-grey-1 {
  background-color: #dedede;
}

.qfq-color-grey-2 {
  background-color: #ededed;
}

.qfq-color-blue-1 {
  background-color: #d2dded;
}

.qfq-color-blue-2 {
Benjamin Baer's avatar
Benjamin Baer committed
225
  background-color: #e2eeff;
226
227
228
229
230
231
}

.qfq-form-right .qfq-label {
  text-align: right;
  padding-right: 0;
}
232

233
234
235
.qfq-child-margin-top + .qfq-child-margin-top {
  margin-top: 15px;
}
236
237
238
239

.qfq-note {
  padding-top: 7px;
}
240

241
242
243
244
.control-label .small, .control-label small {
  font-weight: normal;
}

Benjamin Baer's avatar
Benjamin Baer committed
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
// Fabric Plugin classes
.fabric-text {
  width: 100%;
  height: 80px;
}

#text-bg-submit {
  background-color: #ccc;
  height: 24px;
  border: none;
}

.text-bg-toggle {
  width: 24px;
  height: 24px;
  background-size: contain;
  border: none;
}

264
265
266
267
.color-picker {
  margin-top: 5px;
}

Carsten  Rose's avatar
Carsten Rose committed
268
.color-picker > button {
269
270
271
272
273
274
275
276
277
278
279
280
  margin-right: 2px;
}

.qfq-fabric-image {
  display: none;
}

// Emoji

.emoji {
  display: inline-block;
  border: none;
281
  /*background-color: #fff;*/
282
283
284
285
286
  width: 32px;
  height: 32px;
  margin: 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
287

288
289
290
291
292
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
  display: block !important;
}

293
294
.qfq-cc-style {
  font-size: 0.8em;
295
  color: #777;
Carsten  Rose's avatar
Carsten Rose committed
296
297
298
299
300
  //position: relative;
  //top: -24px;
  //right: 10px;
  //text-align: right;
  //display: block;
301
302
}

303
// TypeAhead Suggestions
304
305
306
307
308
309
310
311
.tt-menu {
  background-color: #fff;
  border-left: 1px solid #66afe9;
  border-right: 1px solid #66afe9;
  border-bottom: 1px solid #66afe9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  width: 100%;
}

@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: unset;
  }
}

.tt-suggestion {
  cursor: pointer;
  cursor: hand;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-top: 12px;
329
330
331
}

.tt-suggestion + .tt-suggestion {
332
333
334
335
336
  padding-top: 6px;
}

.tt-suggestion:hover {
  background-color: rgba(102, 175, 233, .6);
337
}
338

339
340
341
342
// Workaround as long as rendering of notes can't be specific.
.qfq-note-no-padding {
  margin-top: -7px;
}
343

344
345
346
347
348
349
350
351
// Mit BB anschauen wie man die NOTE Felder formatiert
//
//.text-input {
//  padding-top: 7px;
//}
//
//.text-note {
//  padding-top: 7px;
352
353
354
355
356
//}

.CodeMirror {
  border: 1px solid @CodeMirror_border_color;
  border-radius: 4px;
Carsten  Rose's avatar
Carsten Rose committed
357
358
359
}

//}
Carsten  Rose's avatar
Carsten Rose committed
360

Benjamin Baer's avatar
Benjamin Baer committed
361
362
363
364
365
366
367
368
369
370
371
372
373
374
/* classes for toggleable note mockup, bb */
.qfq-icon-inside {
  position: relative;
  top: -22px;
  left: calc(100% - 26px);
}

.qfq-margin-top {
  margin-top: 10px;
}

/* spinning icons */

.text-large-with-margin {
375
376
  font-size: 92px;
  line-height: normal;
Benjamin Baer's avatar
Benjamin Baer committed
377
378
379
  margin: 0.4em;
}

380
381
382
383
384
385
.qfq-icon-gear {
  height: 190px;
  width: 190px;
  margin: 1em;
}

Benjamin Baer's avatar
Benjamin Baer committed
386
.glyphicon-spin {
387
388
  -webkit-animation: spin 2350ms infinite linear;
  animation: spin 2350ms infinite linear;
Benjamin Baer's avatar
Benjamin Baer committed
389
}
Carsten  Rose's avatar
Carsten Rose committed
390

Benjamin Baer's avatar
Benjamin Baer committed
391
392
393
394
395
396
397
398
399
400
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
Carsten  Rose's avatar
Carsten Rose committed
401

Benjamin Baer's avatar
Benjamin Baer committed
402
403
404
405
406
407
408
409
410
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
411
412
}

413
.noclick {
414
  pointer-events: none;
415
}
416

417
418
// Buttons: full width
.qfq-100 {
419
  width: 100%;
420
421
422
423
}

// Buttons: text left aligned
.qfq-left {
424
  text-align: left;
Benjamin Baer's avatar
Benjamin Baer committed
425
426
427
}

.alert-interactive {
428
  position: fixed;
Benjamin Baer's avatar
Benjamin Baer committed
429
430
431
432
  display: box;
  left: 50%;
  transform: translate(-50%,0);
  top: 200px;
433
  max-height: 60%;
Benjamin Baer's avatar
Benjamin Baer committed
434
435
  padding: 20px;
  color: #d0d0d0;
436
437
  min-width: 24%;
  max-width: 90%;
Benjamin Baer's avatar
Benjamin Baer committed
438
439
  border-left: 5px solid;
  background-color: #333;
440
441
  overflow-y: auto;
  overflow-x: hidden;
Benjamin Baer's avatar
Benjamin Baer committed
442
443
}

Benjamin Baer's avatar
Benjamin Baer committed
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
.alert-side > p.body {
  margin: 0px;
  overflow: hidden;
  white-space: nowrap;
}

.alert-side {
  position: fixed;
  display: box;
  right: 0px;
  top: 20px;
  padding: 20px;
  color: #d0d0d0;
  border-left: 5px solid;
  background-color: #333;
459
  z-index: 10000; /* Always on top */
Benjamin Baer's avatar
Benjamin Baer committed
460
461
}

Benjamin Baer's avatar
Benjamin Baer committed
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
.border-success {
  border-color: #5cb85c;
}

.border-error {
  border-color: #fb4f4f;
}

.border-warning {
  border-color: #fbb64f;
}

.border-info {
  border-color: #25adf1;
}

.alert-interactive p.title {
  font-size: 1.5em;
  margin-bottom: 0px;
}

.alert-interactive p.buttons {
  margin-top: 20px;
  text-align: center;
Benjamin Baer's avatar
Benjamin Baer committed
486
487
}

Benjamin Baer's avatar
Benjamin Baer committed
488

Benjamin Baer's avatar
Benjamin Baer committed
489
490
491
// Code Correction

.codeCorrectionWrap {
492
  border: 1px solid #ccc;
Benjamin Baer's avatar
Benjamin Baer committed
493
  border-top: unset;
Benjamin Baer's avatar
Benjamin Baer committed
494
495
}

Benjamin Baer's avatar
Benjamin Baer committed
496
497
498
499
500
501
502
503
.qfqCodeCorrectionTitle {
  border: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  height: 40px;
};

Benjamin Baer's avatar
Benjamin Baer committed
504
505
.qfqLineCount {
  width: 50px;
506
  height: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
507
  text-align: right;
508
509
510
511
512
513
514
515
516
517
  border-right: 1px solid #ccc;
  padding-right: 10px;
  line-height: 23px;
  background-color: #efefef;
}

.qfqCode  {
  width: ~"calc(100% - 50px)";
  min-height: 23px;
  padding-left: 15px;
Benjamin Baer's avatar
Benjamin Baer committed
518
  padding-right: 15px;
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
  text-align: left;
  font-size: 1.2em;
  font-family: monospace;
}

.qfqCodeLine {
  background-color: #fff;
}

.qfqCodeLine:hover {
  background-color: #efefef;
}

.qfqCodeLine:hover .qfqLineCount {
  background-color: #b9def0;
  border-color: #9acfea;
  color: #31708f;
}

.qfqCommentContainer {
  color: #333;
  height: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
541
  padding-bottom: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
542
543
}

Benjamin Baer's avatar
Benjamin Baer committed
544
545
546
547
.qfqComment {
  display: grid;
  position: relative;
  grid-template-columns: 110px auto;
Benjamin Baer's avatar
Benjamin Baer committed
548
  grid-template-rows: 30px auto;
Benjamin Baer's avatar
Benjamin Baer committed
549
  margin: 10px;
550
  margin-top: 20px;
Benjamin Baer's avatar
Benjamin Baer committed
551
552
553
}

.qfqCommentAvatar {
554
  background-color: #fff;
Benjamin Baer's avatar
Benjamin Baer committed
555
556
557
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 2;
Benjamin Baer's avatar
Benjamin Baer committed
558
  align-self: start;
Benjamin Baer's avatar
Benjamin Baer committed
559
  width: 100px;
560
  height: 120px;
Benjamin Baer's avatar
Benjamin Baer committed
561
  border: 1px solid #ccc;
562
  padding: 4px;
563
  padding-bottom: 20px;
564
  /*transform: rotate(20deg);*/
Benjamin Baer's avatar
Benjamin Baer committed
565
566
567
568
}

.qfqCommentAuthor {
  position: absolute;
569
570
  top: 10px;
  left: 10px;
571
  font-weight: bold;
Benjamin Baer's avatar
Benjamin Baer committed
572
573
574
}

.qfqCommentText {
Benjamin Baer's avatar
Benjamin Baer committed
575
  position: relative;
Benjamin Baer's avatar
Benjamin Baer committed
576
  grid-column: 2;
Benjamin Baer's avatar
Benjamin Baer committed
577
  grid-row: 2;
Benjamin Baer's avatar
Benjamin Baer committed
578
579
  background-color: #fff;
  width: 100%;
Benjamin Baer's avatar
Benjamin Baer committed
580
581
  min-height: 90px;
  height: 100%;
582
  padding: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
583
  padding-bottom: 25px;
Benjamin Baer's avatar
Benjamin Baer committed
584
585
586
587
588
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

Benjamin Baer's avatar
Benjamin Baer committed
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
.qfqCommentCommands {
  position: absolute;
  bottom: 5px;
  right: 15px;
  width: 100%;
  color: #ccc;
  text-align: right;
}

.qfqCommentReply {
  cursor: pointer;
}

.qfqCommentReply:hover {
  color: #9acfea;
}

Benjamin Baer's avatar
Benjamin Baer committed
606
607
608
609
610
.qfqCommentTopLine {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  border: 1px solid #ccc;
611
  border-bottom: none;
Benjamin Baer's avatar
Benjamin Baer committed
612
613
614
615
616
617
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

.qfqCommentDateTime {
  position: absolute;
618
619
  right: 10px;
  top: 10px;
Benjamin Baer's avatar
Benjamin Baer committed
620
621
622
623
  color: grey;
  font-size: 0.8em;
}

624
625
626
627
628
629
630
.qfqEditorContainer {
  display: grid;
  position: relative;
  width: 100%;
  grid-template-columns: auto 110px;
  grid-template-rows: auto;
  margin: 20px 10px 10px;
Benjamin Baer's avatar
Benjamin Baer committed
631
632
}

633
.qfqEditor {
634
635
  z-index: 1;
  position: relative;
636
637
638
  grid-column: 1;
  width: 100%;
  min-height: 100px;
639
640
641
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
642
643
  padding: 10px;
  padding-left: 40px;
644
645
646
647
648
649
}

.qfqEditorControls {
  grid-column: 2;
  width: 100%;
  padding-left: 10px;
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
}

.qfqCodeElement {
  display: block;
  background: #333;
  color: #eee;
  margin: 10px;
  padding: 15px;
  border-left: 2px solid #5cb85c;
}

.qfqEditor ul {
  margin: 10px;
}

.qfqEditorControl {
  z-index: 5;
  cursor: pointer;
  color: #ccc;
  position: absolute;
  left: 10px;
}

.qfqEditorControl:hover {
  color: #9acfea;
}

.qfqCodeAdd {
  top: 10px;
}

.qfqCodeList {
  top: 35px;
Benjamin Baer's avatar
Benjamin Baer committed
683
684
685
686
687
688
689
690
691
692
693
694
695
}

.qfqSyntaxDoc {
  color: #888;
}

.qfqSyntaxWord {
  font-weight: bold;
  color: #31708f;
}

.qfqSyntaxData {
  color: #5cb85c;
Benjamin Baer's avatar
Benjamin Baer committed
696

697
698
699
700
701
702
703
704
.qfqDropTarget {
  height: 50px;
  margin: 1px;
  border: 1px dashed #ccc;
}

.qfqTargetDisplay {
  border: 1px dashed #25adf1;
705
}