[FEATURE] Add spinning feature for icons
[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 // Icon Animation
68 //
69 .icon-spin {
70         .icon-markup {
71                 -webkit-animation: icon-spin 2s infinite linear;
72                 animation: icon-spin 2s infinite linear;
73         }
74 }
75 @-webkit-keyframes icon-spin {
76         0% {
77                 -webkit-transform: rotate(0deg);
78                 transform: rotate(0deg);
79         }
80         100% {
81                 -webkit-transform: rotate(359deg);
82                 transform: rotate(359deg);
83         }
84 }
85 @keyframes icon-spin {
86         0% {
87                 -webkit-transform: rotate(0deg);
88                 transform: rotate(0deg);
89         }
90         100% {
91                 -webkit-transform: rotate(359deg);
92                 transform: rotate(359deg);
93         }
94 }
95
96 //
97 // Variants
98 //
99 .icon-size(@identifier; @size) {
100         .icon-size-@{identifier} {
101                 height: @size;
102                 width: @size;
103                 line-height: @size;
104                 .icon-unify {
105                         line-height: @size;
106                         font-size: ceil(@size * @icon-unify-modifier);
107                 }
108                 .icon-overlay {
109                         .icon-unify {
110                                 line-height: ceil(@size / 1.6);
111                                 font-size: ceil(ceil(@size / 1.6) * @icon-unify-modifier);
112                         }
113                 }
114         }
115 }
116 .icon-size(small; @icon-size-small);
117 .icon-size(default; @icon-size-default);
118 .icon-size(large; @icon-size-large);
119
120 //
121 // Special icons
122 //
123 .icon-default-not-found {
124         color: @brand-danger;
125 }
126
127 .icon-overlay-read-only {
128         color: @brand-danger;
129 }