e0d9a0514668a13631c2db519be8241a194203dc
[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 //
31 // Component
32 //
33 .icon {
34 position: relative;
35 display: inline-block;
36 overflow: hidden;
37 img {
38 display: block;
39 height: 100%;
40 width: 100%;
41 }
42 }
43 .icon-markup {
44 position: absolute;
45 height: 100%;
46 width: 100%;
47 text-align: center;
48 }
49 .icon-overlay {
50 position: absolute;
51 bottom: 0;
52 right: 0;
53 height: 50%;
54 width: 50%;
55 text-align: center;
56 }
57
58 //
59 // Variants
60 //
61 .icon-size(@identifier; @size) {
62 .icon-size-@{identifier} {
63 height: @size;
64 width: @size;
65 .icon-unify {
66 line-height: @size;
67 font-size: ceil(@size * @icon-unify-modifier);
68 }
69 .icon-overlay {
70 .icon-unify {
71 line-height: ceil(@size / 2);
72 font-size: ceil(ceil(@size / 2) * @icon-unify-modifier);
73 }
74 }
75 }
76 }
77 .icon-size(small; @icon-size-small);
78 .icon-size(default; @icon-size-default);
79 .icon-size(large; @icon-size-large);
80
81 //
82 // Special icons
83 //
84 .icon-default-not-found {
85 color: @brand-danger;
86 }
87
88 .icon-overlay-read-only {
89 color: @brand-danger;
90 }