qfq-bs.css.less 13.3 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
  }
bbaer's avatar
bbaer committed
22

Carsten  Rose's avatar
Carsten Rose committed
23
  .alert + .alert {
bbaer's avatar
bbaer 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
    padding-top: 7px;
bbaer's avatar
bbaer committed
56
    padding-right: 12px;
57
    margin-top: 0;
58
59
  }

bbaer's avatar
bbaer committed
60
61
62
63
  .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
    margin-left: 0;
  }

64
  .radio {
65
    padding-top: 7px;
66
67
68
  }

  .radio-inline {
69
    padding-top: 7px;
bbaer's avatar
bbaer committed
70
71
    margin-top: 0;
    padding-right: 12px;
72
73
74
75
76
  }

  input[type=file] {
    display: inline;
  }
77
78
}

79
80
// select:invalid: Dropdown with 'emptyItemAtStart' and required are grey on form load.
select.qfq-locked:invalid {
81
82
83
  color: #a0a0a0;
}

84
85
86
87
88
.form-inline {
  .control-label {
    font-weight: normal;
  }
}
89

90
91
92
93
.lower-canvas {
  background-color: #fff;
}

94
//.form-group.required.control-label:before{
bbaer's avatar
bbaer committed
95
//  color: red;/home/a/bbaer/PhpstormProjects/uzh_cd_template
96
97
98
99
100
101
102
103
//  content: "*";
//  position: absolute;
//  margin-left: -10px;
//}

.required-field:after {
  color: #d00;
  content: "*";
104
  //position: absolute;
105
  margin-left: 3px;
106
  //top: 10px;
107
108
}

109
110
111
112
113
114
115
116
117
118
.qfq-table-50 {
  min-width: 50%;
  width: auto;
}

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

119
120
121
122
123
.qfq-table-100 {
  min-width: 100%;
  width: auto;
}

124
.qfq-fieldset {
125
126
  margin-top: 5px;
  margin-bottom: 15px;
127
128
}

bbaer's avatar
bbaer committed
129

130
.qfq-form-pill {
bbaer's avatar
bbaer committed
131
  /*
132
  border-top-right-radius: 4px;
bbaer's avatar
bbaer committed
133
134
135
  border-top-left-radius: 4px; */
  border: 1px solid #ccc;
  border-top: none;
136
137
}

bbaer's avatar
bbaer committed
138

139
140
141
142
143
.qfq-form-body {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
bbaer's avatar
bbaer committed
144
145
  border: 1px solid #ccc;
  border-top: none;
146
147
148
149
150
151
152
153
154
}

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

155
156
157
158
159
/* 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;
}

bbaer's avatar
bbaer committed
160
.qfq-subrecord-table {
161
  margin-top: -5px;
162
163
  min-width: 100%;
  width: auto;
bbaer's avatar
bbaer committed
164
165
}

166
.qfq-form-title {
bbaer's avatar
bbaer committed
167
  border: 1px solid #ccc;
168
  border-radius: 4px 4px 0 0;
bbaer's avatar
bbaer committed
169
170
  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);
171
  min-height: 45px;
bbaer's avatar
bbaer committed
172
  font-size: 1.2em;
173
  padding: 13px 15px;
bbaer's avatar
bbaer committed
174
175
176
  font-weight: bold;
}

bbaer's avatar
bbaer committed
177
178
179
180
.qfq-table-button-width {
  width: 44px;
}

bbaer's avatar
bbaer committed
181
182
183
184
185
186
.qfq-comment-marker {
  position: absolute;
  right: 22px;
  z-index: 2;
}

bbaer's avatar
bbaer committed
187
188
189
190
.nav-pills>li>a {
  border-radius: 0;
}

191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
.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 {
bbaer's avatar
bbaer committed
208
  background-color: #e2eeff;
209
210
211
212
213
214
}

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

216
217
218
.qfq-child-margin-top + .qfq-child-margin-top {
  margin-top: 15px;
}
219
220
221
222

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

224
225
226
227
.control-label .small, .control-label small {
  font-weight: normal;
}

bbaer's avatar
bbaer committed
228
// Fabric Plugin classes
bbaer's avatar
bbaer committed
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245

.qfq-fabric-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 41px;
  z-index: 100;
  border: 1px solid #ccc;
  background-color: #ededed;
  padding: 5px;
}

.qfq-fabric-bar .btn {
  padding: 3px 8px;
}

bbaer's avatar
bbaer committed
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
.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;
}

bbaer's avatar
bbaer committed
264
.color-picker {
bbaer's avatar
bbaer committed
265
  margin-top: 2px;
bbaer's avatar
bbaer committed
266
267
}

Carsten  Rose's avatar
Carsten Rose committed
268
.color-picker > button {
bbaer's avatar
bbaer committed
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;
bbaer's avatar
bbaer committed
281
  /*background-color: #fff;*/
bbaer's avatar
bbaer committed
282
283
284
285
286
  width: 32px;
  height: 32px;
  margin: 5px;
}

bbaer's avatar
bbaer 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

bbaer's avatar
bbaer 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;
bbaer's avatar
bbaer committed
377
378
379
  margin: 0.4em;
}

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

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

bbaer's avatar
bbaer 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

bbaer's avatar
bbaer 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;
bbaer's avatar
bbaer committed
425
426
427
}

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

bbaer's avatar
bbaer 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 */
bbaer's avatar
bbaer committed
460
461
}

bbaer's avatar
bbaer 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;
bbaer's avatar
bbaer committed
486
487
}

Benjamin Baer's avatar
Benjamin Baer committed
488

bbaer's avatar
bbaer committed
489
490
491
// Code Correction

.codeCorrectionWrap {
492
  border: 1px solid #ccc;
bbaer's avatar
bbaer committed
493
  border-top: unset;
bbaer's avatar
bbaer committed
494
  margin-bottom: 10px;
bbaer's avatar
bbaer committed
495
496
}

bbaer's avatar
bbaer committed
497
498
499
500
501
502
503
504
.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;
};

bbaer's avatar
bbaer committed
505
.qfqLineCount {
506
  user-select: none;
bbaer's avatar
bbaer committed
507
  width: 50px;
508
  height: 100%;
bbaer's avatar
bbaer committed
509
  text-align: right;
510
511
512
513
514
515
516
517
518
519
  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;
bbaer's avatar
bbaer committed
520
  padding-right: 15px;
521
522
523
  text-align: left;
  font-size: 1.2em;
  font-family: monospace;
bbaer's avatar
bbaer committed
524
  word-break: break-word;
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
}

.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%;
bbaer's avatar
bbaer committed
544
  padding-bottom: 20px;
bbaer's avatar
bbaer committed
545
546
}

bbaer's avatar
bbaer committed
547
548
549
550
.qfqComment {
  display: grid;
  position: relative;
  grid-template-columns: 110px auto;
bbaer's avatar
bbaer committed
551
  grid-template-rows: 30px auto;
bbaer's avatar
bbaer committed
552
  margin: 10px;
553
  margin-top: 20px;
bbaer's avatar
bbaer committed
554
555
556
}

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

.qfqCommentAuthor {
  position: absolute;
572
573
  top: 10px;
  left: 10px;
574
  font-weight: bold;
bbaer's avatar
bbaer committed
575
576
577
}

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

bbaer's avatar
bbaer committed
592
593
594
595
596
597
598
599
600
.qfqCommentCommands {
  position: absolute;
  bottom: 5px;
  right: 15px;
  width: 100%;
  color: #ccc;
  text-align: right;
}

bbaer's avatar
bbaer committed
601
.qfqCommentCommand {
bbaer's avatar
bbaer committed
602
  cursor: pointer;
bbaer's avatar
bbaer committed
603
  margin-left: 9px;
bbaer's avatar
bbaer committed
604
605
}

bbaer's avatar
bbaer committed
606
.qfqCommentCommand:hover {
bbaer's avatar
bbaer committed
607
608
609
  color: #9acfea;
}

bbaer's avatar
bbaer committed
610
611
612
613
614
.qfqCommentTopLine {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  border: 1px solid #ccc;
615
  border-bottom: none;
bbaer's avatar
bbaer committed
616
617
618
619
620
621
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

.qfqCommentDateTime {
  position: absolute;
622
623
  right: 10px;
  top: 10px;
bbaer's avatar
bbaer committed
624
625
626
627
  color: grey;
  font-size: 0.8em;
}

628
629
630
631
632
633
634
.qfqEditorContainer {
  display: grid;
  position: relative;
  width: 100%;
  grid-template-columns: auto 110px;
  grid-template-rows: auto;
  margin: 20px 10px 10px;
bbaer's avatar
bbaer committed
635
636
}

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

.qfqEditorControls {
  grid-column: 2;
  width: 100%;
  padding-left: 10px;
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
683
684
685
686
}

.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;
bbaer's avatar
bbaer committed
687
688
689
690
691
692
693
694
695
696
697
698
699
}

.qfqSyntaxDoc {
  color: #888;
}

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

.qfqSyntaxData {
  color: #5cb85c;
bbaer's avatar
bbaer committed
700
}
Benjamin Baer's avatar
Benjamin Baer committed
701

bbaer's avatar
bbaer committed
702
703
704
705
706
707
708
709
.qfqDropTarget {
  height: 50px;
  margin: 1px;
  border: 1px dashed #ccc;
}

.qfqTargetDisplay {
  border: 1px dashed #25adf1;
710
711
712
713
714
715
}

// Droplets

.qfq-droplet-container {
  position: absolute;
716
  border-radius: 6px;
717
718
719
720
721
722
723
724
725
726
727
728
729
730
  padding: 15px;
}

.qfq-droplet-container:before {
  content: ' ';
  position: absolute;
  left: 10px;
  top: -10px;
  border: 5px solid;
}

.qfq-droplet-container:after {
  content: ' ';
  position: absolute;
731
  left: 20px;
732
733
  top: -10px;
  border: 5px solid;
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
}

.qfq-droplet-grey {
  border: 2px solid #ccc;
  background-image: linear-gradient(to bottom,#f0f0f0 0,#e0e0e0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}

.qfq-droplet-container.qfq-droplet-grey:after {
  border-color: transparent transparent #ccc #ccc;
}

.qfq-droplet-container.qfq-droplet-grey:before {
  border-color: transparent #ccc #ccc transparent;
}

.qfq-droplet-blue {
  border: 2px solid #25adf1;
  background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
}

.qfq-droplet-container.qfq-droplet-blue:after {
756
  border-color: transparent transparent #25adf1 #25adf1;
757
758
759
760
}

.qfq-droplet-container.qfq-droplet-blue:before {
  border-color: transparent #25adf1 #25adf1 transparent;
761
762
763
764
}

.qfq-wavy-underline {
  background: url('../icons/wavy-underline.gif') bottom repeat-x
bbaer's avatar
bbaer committed
765
766
}

767
768
769
770
legend {
  margin-bottom: 5px;
}

bbaer's avatar
bbaer committed
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
/* glyphicon functions */
.icon-flipped {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

.icon-spin {
  display: block;
}

.icon-spin:hover {
  -webkit-animation: spin 850ms 1 ease-in;
  animation: spin 850ms 1 ease-in;
}

.icon-spin-reverse {
  display: block;
}

.icon-spin-reverse:hover {
  -webkit-animation: spin-reverse 850ms 1 ease-in;
  animation: spin-reverse 850ms 1 ease-in;
}

@keyframes spin-reverse {
  0% {
    transform: scaleX(-1) rotate(-360deg);
  }
  100% {
    transform: scaleX(-1) rotate(0deg);
  }
804
}