PluginProbe
Adminify – White Label, Admin Menu Editor, Login Customizer / 4.3.2
Adminify – White Label, Admin Menu Editor, Login Customizer v4.3.2
4.3.2 4.3.1 4.3.0 4.2.26 4.2.25 4.2.24 4.2.23 4.2.22 4.2.21 4.2.20 4.2.19 4.2.18 4.2.17 4.2.16 4.2.15 4.2.14 4.2.13 4.2.12 4.2.11 4.2.10 4.2.9 4.2.8 4.2.7 4.2.6 4.2.5 All 165 releases
adminify / assets / vendors / adminify-icon-picker / css / style.css

style.css in Adminify – White Label, Admin Menu Editor, Login Customizer 4.3.2, at assets/vendors/adminify-icon-picker/css/style.css

467 lines 11.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!******************************************************************************************************************************************************************************************************************************************************************************!*\
2 !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./dev/vendors/adminify-icon-picker/css/icon-picker.scss ***!
3 \******************************************************************************************************************************************************************************************************************************************************************************/
4 .wp-adminify button.select-icon {
5 padding: 20px;
6 border-radius: 5px;
7 background-color: #70b2dc;
8 font-size: 22px;
9 cursor: pointer;
10 }
11 .wp-adminify .icon-picker-wrap ul {
12 list-style: none;
13 margin: 0;
14 padding: 0;
15 display: inline-flex;
16 }
17 .wp-adminify .icon-picker-wrap ul li {
18 border: 1px solid var(--adminify-primary);
19 color: var(--adminify-primary);
20 font-size: 20px;
21 cursor: pointer;
22 line-height: 34px;
23 margin: 0;
24 padding: 5px 10px;
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 /* min-width: 40px;
29 min-height: 40px; */
30 }
31 .wp-adminify .icon-picker-wrap ul li.select-icon.custom-icon {
32 line-height: 0;
33 padding: 0;
34 border-left: 0;
35 background: transparent;
36 position: relative;
37 }
38 .wp-adminify .icon-picker-wrap ul li.select-icon.custom-icon i {
39 line-height: 0;
40 min-width: 38px;
41 }
42 .wp-adminify .icon-picker-wrap ul li.select-icon.custom-icon img {
43 max-width: 38px;
44 max-height: 38px;
45 width: 100%;
46 position: absolute;
47 left: 50%;
48 top: 50%;
49 padding: 2px;
50 transform: translate(-50%, -50%);
51 }
52 .wp-adminify .icon-picker-wrap ul li.select-icon {
53 background-color: var(--adminify-primary);
54 color: #fff;
55 font-size: 14px;
56 line-height: 0;
57 border-top-right-radius: 4px;
58 border-bottom-right-radius: 4px;
59 }
60 .wp-adminify .icon-picker-wrap ul li.icon-none {
61 border-top-left-radius: 4px;
62 border-bottom-left-radius: 4px;
63 }
64 .wp-adminify .aim-close {
65 opacity: 0;
66 visibility: hidden;
67 transition: all 0.4s ease-in-out;
68 }
69 .wp-adminify .aim-open {
70 opacity: 1;
71 visibility: visible;
72 transition: all 0.4s ease-in-out;
73 }
74 .wp-adminify .aim-modal {
75 position: fixed;
76 height: 100%;
77 width: 100%;
78 bottom: 0;
79 left: 0;
80 background-color: rgba(0, 0, 0, 0.6);
81 z-index: 9999;
82 -webkit-user-select: none;
83 -moz-user-select: none;
84 user-select: none;
85 display: flex;
86 align-items: center;
87 /* padding: 5% 10%; */
88 }
89 .wp-adminify .aim-modal .aim-modal--content {
90 background-color: #f1f3f5;
91 position: relative;
92 border-radius: 3px;
93 box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
94 overflow: hidden;
95 max-width: 950px;
96 width: 100%;
97 margin: auto;
98 top: 0;
99 left: 0;
100 right: 0;
101 height: 70vh;
102 padding-bottom: 60px;
103 }
104 .wp-adminify .aim-modal .aim-modal--header {
105 padding: 15px 15px;
106 background-color: #fff;
107 box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
108 position: relative;
109 z-index: 1;
110 font-size: 15px;
111 color: #495157;
112 font-weight: 500;
113 display: flex;
114 align-items: center;
115 justify-content: space-between;
116 }
117 .wp-adminify .aim-modal .aim-modal--header .aim-modal--header-logo-title {
118 font-weight: 700;
119 padding-left: 25px;
120 position: relative;
121 text-transform: uppercase;
122 }
123 .wp-adminify .aim-modal .aim-modal--header .aim-modal--header-logo-title img {
124 height: 18px;
125 width: 18px;
126 left: 0;
127 top: 1px;
128 position: absolute;
129 }
130 .wp-adminify .aim-modal .aim-modal--header .aim-modal--header-close-btn {
131 cursor: pointer;
132 }
133 .wp-adminify .aim-modal .aim-modal--header .aim-modal--header-close-btn i {
134 color: #ed2e7e;
135 font-size: 22px;
136 vertical-align: top;
137 }
138 .wp-adminify .aim-modal .aim-modal--body {
139 background-color: #fff;
140 font-size: 12px;
141 line-height: 1.5;
142 box-sizing: border-box;
143 padding: 0;
144 height: 100%;
145 display: flex;
146 align-items: flex-start;
147 flex-direction: row;
148 min-height: 50px;
149 overflow: auto;
150 }
151 .wp-adminify .aim-modal .aim-modal--body .aim-modal--sidebar {
152 background-color: #fff;
153 height: calc(100% - 40px);
154 flex: 0 0 25%;
155 max-width: 25%;
156 position: relative;
157 }
158
159 /*
160 */
161 /* Sidebar Tabs */
162 .wp-adminify .aim-modal--sidebar-tabs {
163 height: 100%;
164 overflow-y: scroll;
165 padding-bottom: 20px;
166 position: absolute;
167 width: 100%;
168 }
169
170 .wp-adminify .aim-modal--sidebar-tab-item {
171 background-color: #fff;
172 border-bottom: 1px solid #f1f1f3;
173 box-shadow: none;
174 color: #14142b;
175 cursor: pointer;
176 font-size: 14px;
177 line-height: 20px;
178 padding: 13px 20px;
179 position: relative;
180 text-transform: capitalize;
181 }
182
183 .wp-adminify .aim-modal--sidebar-tab-item i {
184 color: #14142b;
185 font-size: 16px;
186 height: 20px;
187 width: 20px;
188 margin-right: 10px;
189 vertical-align: middle;
190 }
191
192 .wp-adminify .aim-modal--sidebar-tab-item:hover,
193 .wp-adminify .aim-modal--sidebar-tab-item:hover i,
194 .wp-adminify .aim-modal--sidebar-tab-item.aesthetic-active,
195 .wp-adminify .aim-modal--sidebar-tab-item.aesthetic-active i {
196 color: var(--adminify-primary);
197 }
198
199 .wp-adminify .aim-modal--sidebar-tab-item:after {
200 content: "";
201 position: absolute;
202 height: 100%;
203 width: 4px;
204 top: 0;
205 left: 0;
206 background-color: transparent;
207 }
208
209 .wp-adminify .aim-modal--sidebar-tab-item.aesthetic-active:after,
210 .wp-adminify .aim-modal--sidebar-tab-item:hover:after {
211 background-color: var(--adminify-primary);
212 }
213
214 /* Preview wrapper */
215 .wp-adminify .aim-modal--icon-preview-wrap {
216 background-color: #f5f5f5;
217 flex: 0 0 75%;
218 max-width: 75%;
219 height: 100%;
220 padding: 30px;
221 box-sizing: border-box;
222 }
223
224 .wp-adminify .aim-modal--icon-preview-inner {
225 display: inline-block;
226 height: calc(100% - 60px);
227 overflow: auto;
228 margin: 10px -15px 0;
229 padding: 0 15px 15px;
230 }
231
232 .wp-adminify #aim-modal--icon-preview {
233 display: grid;
234 grid-template-columns: repeat(7, 1fr);
235 grid-gap: 20px;
236 margin: 20px 0;
237 }
238
239 /* search filter */
240 .wp-adminify .aim-modal--icon-search {
241 position: relative;
242 }
243
244 .wp-adminify .aim-modal--icon-search input {
245 background-color: #fff;
246 border: 1px solid #d8d8d8;
247 width: 100%;
248 padding: 6px 10px;
249 }
250
251 .wp-adminify .aim-modal--icon-search input::-moz-placeholder {
252 font-style: italic;
253 }
254
255 .wp-adminify .aim-modal--icon-search input::placeholder {
256 font-style: italic;
257 }
258
259 .wp-adminify .aim-modal--icon-search i {
260 color: var(--adminify-primary);
261 position: absolute;
262 top: 50%;
263 transform: translateY(-50%);
264 right: 15px;
265 }
266
267 /* Icon Item */
268 .wp-adminify .aim-icon-item {
269 position: relative;
270 padding: 10px;
271 background-color: #fff;
272 box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
273 border-radius: 3px;
274 cursor: pointer;
275 transition: all 0.3s;
276 overflow: hidden;
277 }
278
279 .wp-adminify .aim-icon-item:hover {
280 box-shadow: 0 1px 14px rgba(0, 0, 0, 0.16);
281 }
282
283 .wp-adminify .aim-icon-item.aesthetic-selected {
284 box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 0 0 3px var(--adminify-primary);
285 }
286
287 .wp-adminify .aim-icon-item-inner {
288 display: flex;
289 flex-direction: column;
290 align-items: center;
291 padding: 1px;
292 }
293
294 .wp-adminify .aim-icon-item-inner i,
295 .wp-adminify .aim-icon-item__icon {
296 font-size: 25px;
297 color: rgba(78, 75, 102, 0.72);
298 }
299
300 .wp-adminify .aim-icon-item-name {
301 color: rgba(78, 75, 102, 0.72);
302 font-size: 12px;
303 padding: 13px 0px 0;
304 max-width: 100%;
305 white-space: nowrap;
306 text-overflow: ellipsis;
307 overflow: hidden;
308 text-transform: capitalize;
309 }
310
311 .wp-adminify .aim-icon-item:hover .aim-icon-item-inner i,
312 .wp-adminify .aim-icon-item:hover .aim-icon-item-name {
313 color: var(--adminify-primary);
314 }
315
316 /* Footer */
317 .wp-adminify .aim-modal .aim-modal--footer {
318 background-color: #fff;
319 border-top: 1px solid #e6e9ec;
320 padding: 8px 15px;
321 bottom: 0;
322 position: absolute;
323 text-align: right;
324 width: 100%;
325 box-sizing: border-box;
326 }
327
328 .wp-adminify .aim-modal--footer button.aim-insert-icon-button {
329 background-color: var(--adminify-primary);
330 border: 1px solid var(--adminify-primary);
331 border-radius: 6px;
332 color: #fff;
333 cursor: pointer;
334 font-size: 14px;
335 font-weight: 700;
336 height: auto;
337 letter-spacing: 0.5px;
338 line-height: 33px;
339 padding: 0 16px;
340 text-transform: uppercase;
341 }
342
343 .wp-adminify .aim-modal--footer button.aim-insert-icon-button:hover {
344 background-color: #fff;
345 color: var(--adminify-primary);
346 }
347
348 .wp-adminify .hide {
349 display: none !important;
350 }
351
352 .wp-adminify #adminify-drag-drop-area {
353 border: 2px dashed #c3c4c7;
354 border-radius: 4px;
355 }
356
357 .wp-adminify #adminify-drag-drop-area .drag-drop-inside {
358 margin: 30px auto 35px;
359 width: 250px;
360 }
361
362 .wp-adminify #adminify-drag-drop-area .drag-drop-inside p {
363 display: block;
364 text-align: center;
365 margin: 5px 0;
366 color: #111;
367 }
368
369 .wp-adminify #adminify-drag-drop-area .drag-drop-inside p.drag-drop-info {
370 font-size: 22px;
371 line-height: 28px;
372 font-weight: 600;
373 }
374
375 .wp-adminify #adminify-drag-drop-area .drag-drop-inside p {
376 font-size: 14px;
377 line-height: 22px;
378 }
379
380 .wp-adminify #adminify-drag-drop-area .drag-drop-buttons .button-hero {
381 background-color: transparent !important;
382 border: 1px solid var(--adminify-primary) !important;
383 border-radius: 6px !important;
384 color: var(--adminify-primary) !important;
385 font-size: 14px;
386 font-weight: 600;
387 line-height: 34px !important;
388 padding: 0 16px !important;
389 min-height: 36px;
390 }
391
392 .wp-adminify #adminify-drag-drop-area .drag-drop-buttons .button-hero:hover {
393 background-color: var(--adminify-primary) !important;
394 color: #fff !important;
395 }
396
397 .wp-adminify .aim-modal--icon-preview-wrap #display-custom-icons {
398 margin: 25px 0;
399 }
400
401 .wp-adminify .aim-modal--icon-preview-wrap #display-custom-icons ul {
402 margin: 0 -8px;
403 }
404
405 .wp-adminify .aim-modal--icon-preview-wrap #display-custom-icons ul li {
406 display: inline-block;
407 width: calc(25% - 16px);
408 height: 150px;
409 margin: 5px 8px;
410 box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
411 background: #f0f0f1;
412 cursor: pointer;
413 position: relative;
414 border: 3px solid rgba(0, 0, 0, 0.1);
415 }
416
417 .wp-adminify .aim-modal--icon-preview-wrap #display-custom-icons ul li.selected {
418 border-color: var(--adminify-primary);
419 }
420
421 .wp-adminify .aim-modal--icon-preview-wrap #display-custom-icons ul li.selected::after {
422 font-family: "Dashicons";
423 content: "\f147";
424 position: absolute;
425 right: -3px;
426 top: -2px;
427 width: 24px;
428 height: 24px;
429 background-color: var(--adminify-primary);
430 background-repeat: no-repeat;
431 border-radius: 4px;
432 color: #fff;
433 font-size: 18px;
434 font-weight: bold;
435 display: flex;
436 align-items: center;
437 justify-content: center;
438 }
439
440 .wp-adminify .aim-modal--icon-preview-wrap #display-custom-icons ul li img {
441 max-width: 100%;
442 width: 100%;
443 height: 100%;
444 position: absolute;
445 left: 50%;
446 top: 50%;
447 transform: translate(-50%, -50%);
448 padding: 8px;
449 }
450
451 .wp-adminify .aim-modal--icon-preview-wrap.y-scroll {
452 overflow-y: scroll;
453 padding-top: 15px;
454 }
455
456 .wp-adminify #icon-upload-bar {
457 height: 5px;
458 width: 5%;
459 background: var(--adminify-btn-bg);
460 margin-bottom: 15px;
461 opacity: 0;
462 }
463
464 .wp-adminify #icon-upload-bar.show {
465 opacity: 1;
466 }
467