[BUGFIX] Correct icon alignment
[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 white-space: nowrap;
37 vertical-align: -22%;
38 img {
39 display: block;
40 height: 100%;
41 width: 100%;
42 }
43 * {
44 display: block;
45 line-height: inherit;
46 }
47 }
48 .icon-markup {
49 position: absolute;
50 display: block;
51 text-align: center;
52 top: 0;
53 left: 0;
54 right: 0;
55 bottom: 0;
56 }
57 .icon-overlay {
58 position: absolute;
59 bottom: 0;
60 right: 0;
61 height: 60%;
62 width: 60%;
63 text-align: center;
64 }
65
66 //
67 // Variants
68 //
69 .icon-size(@identifier; @size) {
70 .icon-size-@{identifier} {
71 height: @size;
72 width: @size;
73 line-height: @size;
74 .icon-unify {
75 line-height: @size;
76 font-size: ceil(@size * @icon-unify-modifier);
77 }
78 .icon-overlay {
79 .icon-unify {
80 line-height: ceil(@size / 1.6);
81 font-size: ceil(ceil(@size / 1.6) * @icon-unify-modifier);
82 }
83 }
84 }
85 }
86 .icon-size(small; @icon-size-small);
87 .icon-size(default; @icon-size-default);
88 .icon-size(large; @icon-size-large);
89
90 //
91 // Special icons
92 //
93 .icon-default-not-found {
94 color: @brand-danger;
95 }
96
97 .icon-overlay-read-only {
98 color: @brand-danger;
99 }