[BUGFIX] Add reserved area for loading indicator within modules
[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 @icon-opacity-disabled:  0.5;
29
30 //
31 // Component
32 //
33 .icon {
34         position: relative;
35         display: inline-block;
36         overflow: hidden;
37         white-space: nowrap;
38         vertical-align: -22%;
39         svg,
40         img {
41                 display: block;
42                 height: 100%;
43                 width: 100%;
44                 .translate3d(0,0,0);
45         }
46         * {
47                 display: block;
48                 line-height: inherit;
49         }
50 }
51 .icon-markup {
52         position: absolute;
53         display: block;
54         text-align: center;
55         top: 0;
56         left: 0;
57         right: 0;
58         bottom: 0;
59 }
60 .icon-overlay {
61         position: absolute;
62         bottom: 0;
63         right: 0;
64         height: 68.75%;
65         width: 68.75%;
66         text-align: center;
67 }
68 .icon-color {
69         fill: currentColor;
70 }
71
72 //
73 // Icon Animation
74 //
75 .icon-spin {
76         .icon-markup {
77                 -webkit-animation: icon-spin 2s infinite linear;
78                 animation: icon-spin 2s infinite linear;
79         }
80 }
81 @-webkit-keyframes icon-spin {
82         0% {
83                 -webkit-transform: rotate(0deg);
84                 transform: rotate(0deg);
85         }
86         100% {
87                 -webkit-transform: rotate(359deg);
88                 transform: rotate(359deg);
89         }
90 }
91 @keyframes icon-spin {
92         0% {
93                 -webkit-transform: rotate(0deg);
94                 transform: rotate(0deg);
95         }
96         100% {
97                 -webkit-transform: rotate(359deg);
98                 transform: rotate(359deg);
99         }
100 }
101
102 //
103 // States
104 //
105 .icon-state-disabled {
106         .icon-markup {
107                 opacity: @icon-opacity-disabled;
108         }
109 }
110
111 //
112 // Variants
113 //
114 .icon-size(@identifier; @size) {
115         .icon-size-@{identifier} {
116                 height: @size;
117                 width: @size;
118                 line-height: @size;
119                 .icon-unify {
120                         line-height: @size;
121                         font-size: ceil(@size * @icon-unify-modifier);
122                 }
123                 .icon-overlay {
124                         .icon-unify {
125                                 line-height: ceil(@size / 1.6);
126                                 font-size: ceil(ceil(@size / 1.6) * @icon-unify-modifier);
127                         }
128                 }
129         }
130 }
131 .icon-size(small; @icon-size-small);
132 .icon-size(default; @icon-size-default);
133 .icon-size(large; @icon-size-large);
134
135 //
136 // Special icons
137 //
138 .icon-actions-edit-copy-release,
139 .icon-actions-edit-cut-release,
140 .icon-status-status-current,
141 .icon-status-dialog-error,
142 .icon-status-status-permission-denied {
143         color: @brand-danger;
144 }
145
146 .icon-status-status-sorting-light-asc,
147 .icon-status-status-sorting-light-desc {
148         color: #fff;
149 }
150
151 .icon-status-status-sorting-asc,
152 .icon-status-status-sorting-desc {
153         color: @gray;
154 }
155
156 .icon-status-dialog-information {
157         color: @brand-info;
158 }
159
160 .icon-status-dialog-ok,
161 .icon-status-status-permission-granted {
162         color: @brand-success;
163 }
164
165 .icon-status-dialog-notification {
166         color: @brand-notice;
167 }
168
169 .icon-status-dialog-warning {
170         color: @brand-warning;
171 }