ec9adc3b5407f1ee705d02862761ea7b827f6842
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / Component / diff.less
1 //
2 // Diff
3 // ====
4 // Used for comparision of records
5 //
6 //
7 // Example Usage
8 // -------------
9 //
10 // <div class="diff">
11 //   <div class="div-item">
12 //     <div class="diff-title">
13 //       ...
14 //     </div>
15 //     <div class="diff-result">
16 //       ...
17 //     </div>
18 //   </div>
19 // </div>
20 //
21
22
23 //
24 // Variables
25 //
26 @diff-bgcolor:         #fff;
27 @diff-border:          #ccc;
28 @diff-color-remove:    #c80c05;
29 @diff-color-add:       #44a512;
30 @diff-padding:         10px;
31 @diff-title-bgcolor:   #fafafa;
32
33
34 //
35 // Component
36 //
37 .diff {
38         background-color: @diff-bgcolor;
39         border: 1px solid @diff-border;
40 }
41 .diff-item {
42         display: table;
43         table-layout: fixed;
44         width: 100%;
45         + .diff-item {
46                 border-top: 1px solid @diff-border;
47         }
48 }
49 .diff-item-title,
50 .diff-item-result {
51         padding: @diff-padding;
52         display: table-cell;
53 }
54 .diff-item-title {
55         background-color: @diff-title-bgcolor;
56         width: 120px;
57         padding-right: 10px;
58         font-style: italic;
59 }
60 .diff-item-result {
61         font-family: @font-family-monospace;
62         white-space: pre;
63         word-break: break-all;
64     word-wrap: break-word;
65         del {
66                 color: @diff-color-remove;
67                 background-color: lighten(@diff-color-remove, 58%);
68                 text-decoration: none;
69         }
70         ins {
71                 color: @diff-color-add;
72                 background-color: lighten(@diff-color-add, 58%);
73                 text-decoration: none;
74         }
75 }