56040a435fdfa13d775d795fe84b280605aa4fbd
[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 }