[TASK] Replace sprite icon "actions-document-new" with the new IconFactory
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / Component / icon.less
1 //
2 // Icon
3 // ====
4 // General CSS for Icons
5 //
6 //
7 // Example Usage
8 // -------------
9 //
10 // <span class="icon icon-size-large icon-provider-svg">
11 // <span class="icon-markup">
12 // <img src="#" width="16" height="16">
13 // </span>
14 // <span class="icon-overlay">
15 // <img src="#" width="8" height="8">
16 // </span>
17 // </span>
18 //
19
20
21 //
22 // Variables
23 //
24 @icon-size-small: 16px;
25 @icon-size-default: 32px;
26 @icon-size-large: 48px;
27 @icon-unify-modifier: 0.86;
28
29 //
30 // Component
31 //
32 .icon {
33 position: relative;
34 display: inline-block;
35 overflow: hidden;
36 vertical-align: middle;
37 white-space: nowrap;
38 img {
39 display: block;
40 height: 100%;
41 width: 100%;
42 }
43 }
44 .icon-markup {
45 position: absolute;
46 display: block;
47 text-align: center;
48 top: 0;
49 left: 0;
50 right: 0;
51 bottom: 0;
52 }
53 .icon-overlay {
54 position: absolute;
55 bottom: 0;
56 right: 0;
57 height: 60%;
58 width: 60%;
59 text-align: center;
60 }
61 .icon-unify {
62 display: block;
63 }
64
65 //
66 // Variants
67 //
68 .icon-size(@identifier; @size) {
69 .icon-size-@{identifier} {
70 height: @size;
71 width: @size;
72 line-height: @size;
73 .icon-unify {
74 line-height: @size;
75 font-size: ceil(@size * @icon-unify-modifier);
76 }
77 .icon-overlay {
78 .icon-unify {
79 line-height: ceil(@size / 1.6);
80 font-size: ceil(ceil(@size / 1.6) * @icon-unify-modifier);
81 }
82 }
83 }
84 }
85 .icon-size(small; @icon-size-small);
86 .icon-size(default; @icon-size-default);
87 .icon-size(large; @icon-size-large);
88
89 //
90 // Special icons
91 //
92 .icon-default-not-found {
93 color: @brand-danger;
94 }
95
96 .icon-overlay-read-only {
97 color: @brand-danger;
98 }