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