PluginProbe
Orderable – Restaurant & Food Ordering System / 1.14.0
Orderable – Restaurant & Food Ordering System v1.14.0
0.1.4 0.1.5 0.2.0 1.0.0 1.1.0 1.1.1 1.10.0 1.10.1 1.11.0 1.12.0 1.12.1 1.12.2 1.13.0 1.14.0 1.15.0 1.16.0 1.17.0 1.17.1 1.18.0 1.19.0 1.19.1 1.19.2 1.2.0 1.20.0 1.20.1 All 44 releases
orderable / inc / vendor / wp-settings-framework / assets / css / main.css

main.css in Orderable – Restaurant & Food Ordering System 1.14.0, at inc/vendor/wp-settings-framework/assets/css/main.css

698 lines 11.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Settings page styles
3 *
4 * $. Tabs
5 * $. Repeater
6 * $. Fields
7 * $. - Toggle
8 * $. - Multifields
9 * $. - Subtitle
10 * $. Tables
11 * $. Lists
12 * $. Visual Checkbox and radio fields
13 */
14
15 /* Main */
16
17 .wpsf-settings {
18 margin: 0 0 0 -20px;
19 }
20
21 @media screen and (max-width: 782px) {
22 .wpsf-settings {
23 margin-left: -10px;
24 }
25 }
26
27 .wpsf-settings__header {
28 background: #fff;
29 border-bottom: 1px solid #e2e4e7;
30 padding: 10px 20px;
31 height: 70px;
32 box-sizing: border-box;
33 display: flex;
34 align-items: center;
35 margin: 0;
36 }
37
38 .wpsf-settings__content {
39 padding: 0 20px;
40 }
41
42 /* Nav */
43
44 .wpsf-nav {
45 margin: 0 -20px;
46 padding: 0 12px;
47 list-style: none none outside;
48 background: #fff;
49 border-bottom: 1px solid #e2e4e7;
50 display: flex;
51 flex-wrap: nowrap;
52 position: sticky;
53 top: 32px;
54 z-index: 100;
55 align-items: center;
56 }
57
58 @media screen and (max-width: 782px) {
59 .wpsf-nav {
60 top: 46px;
61 }
62 }
63
64 @media screen and (max-width: 600px) {
65 .wpsf-nav {
66 position: relative;
67 top: 0;
68 flex-direction: column;
69 padding: 0;
70 }
71 }
72
73 .wpsf-nav__item {
74 display: inline-block;
75 margin: 0 8px;
76 padding: 0 4px 4px;
77 position: relative;
78 }
79
80 @media screen and (max-width: 600px) {
81 .wpsf-nav__item {
82 padding-right: 0;
83 padding-left: 0;
84 margin: 0;
85 width: 100%;
86 text-align: center;
87 border-top: 1px solid #e2e4e7;
88 }
89
90 .wpsf-nav__item:first-child {
91 border-top: none;
92 }
93 }
94
95 .wpsf-nav__item:after {
96 content: '';
97 height: 0;
98 transition: height 150ms ease-in-out;
99 position: absolute;
100 bottom: 0;
101 left: 0;
102 right: 0;
103 backface-visibility: hidden;
104 transform: translateZ(0);
105 }
106
107 .wpsf-nav__item--active:after {
108 height: 4px;
109 background: #2271b6;
110 border-radius: 4px 4px 0 0;
111 }
112
113 @media screen and (max-width: 600px) {
114 .wpsf-nav__item--active:after {
115 border-radius: 0;
116 }
117 }
118
119 .wpsf-nav__item-link {
120 padding: 15px 0 13px;
121 display: block;
122 text-decoration: none;
123 color: #000;
124 white-space: nowrap;
125 }
126
127 .wpsf-nav__item-link:active,
128 .wpsf-nav__item-link:focus {
129 outline: none;
130 box-shadow: none;
131 color: #000;
132 }
133
134 .wpsf-nav__item-link:hover {
135 color: #2271b6;
136 }
137
138 .wpsf-nav__item--active .wpsf-nav__item-link,
139 .wpsf-nav__item--active .wpsf-nav__item-link:active,
140 .wpsf-nav__item--active .wpsf-nav__item-link:focus,
141 .wpsf-nav__item--active .wpsf-nav__item-link:hover {
142 color: #2271b6;
143 }
144
145 .wpsf-nav__item--last {
146 margin: 0 0 0 auto;
147 padding: 0 8px;
148 }
149
150 @media screen and (max-width: 782px) {
151 .wpsf-nav__item--last {
152 display: none;
153 }
154 }
155
156 /* Notices */
157
158 .notice {
159 display: none !important;
160 }
161
162 .wpsf-notices {
163 padding: 0;
164 margin: 0;
165 }
166
167 .wpsf-notices h2 {
168 display: none !important;
169 }
170
171 .wpsf-notices .notice {
172 display: block !important;
173 margin: 0 0 15px;
174 }
175
176 .wpsf-notices h2+.notice {
177 margin-top: 20px;
178 }
179
180 .wpsf-notices .notice:last-child {
181 margin-bottom: 20px;
182 }
183
184 /* Submit */
185
186 p.submit {
187 padding-top: 0 !important;
188 }
189
190 /* $. Tabs */
191
192 .nav-tab-wrapper {
193 min-height: 35px;
194 }
195
196 .wpsf-tab {
197 display: none;
198 }
199
200 .wpsf-tab--active {
201 display: block;
202 }
203
204 .wpsf-tab .postbox {
205 margin: 20px 0;
206 border-radius: 8px;
207 border: none;
208 background: #fff;
209 }
210
211 .wpsf-tab .postbox:after {
212 content: '';
213 display: table;
214 }
215
216 .wpsf-tab .postbox h2 {
217 padding: 15px 20px;
218 border: none;
219 margin: 0 0 10px;
220 background: #23282d;
221 color: #fff;
222 -webkit-font-smoothing: antialiased;
223 -moz-font-smoothing: antialiased;
224 -o-font-smoothing: antialiased;
225 font-smoothing: antialiased;
226 font-size: 1.25em;
227 }
228
229 .wpsf-tab .postbox h2:first-child {
230 border-radius: 8px 8px 0 0;
231 }
232
233 .wpsf-tab .postbox h3:first-child {
234 margin-top: 0;
235 }
236
237 .js .wpsf-tab .postbox h3 {
238 cursor: default;
239 }
240
241 .wpsf-tab .postbox table.form-table,
242 .wpsf-tab .wpsf-section-description {
243 margin: 0 20px;
244 width: auto;
245 }
246
247 .wpsf-tab .postbox table.form-table {
248 min-width: 80%;
249 }
250
251 .wpsf-tab .postbox table.form-table {
252 margin-bottom: 10px;
253 }
254
255 .wpsf-tab .wpsf-section-description {
256 margin: 30px 0 20px;
257 padding: 0 30px 30px;
258 box-sizing: border-box;
259 font-size: 13px;
260 line-height: 1.5;
261 border-bottom: 1px solid #f1f1f1;
262 }
263
264 .wpsf-tab .wpsf-section-description h3 {
265 font-size: 22px;
266 max-width: 600px;
267 }
268
269 .wpsf-tab .wpsf-section-description p,
270 .wpsf-tab .wpsf-section-description ol,
271 .wpsf-tab .wpsf-section-description ul {
272 font-size: 15px;
273 max-width: 600px;
274 margin-top: 1em;
275 margin-bottom: 1em;
276 }
277
278 .wpsf-tab .wpsf-section-description ol,
279 .wpsf-tab .wpsf-section-description ul {
280 margin: 1em 0 2em 2em;
281 }
282
283 .wpsf-tab .wpsf-section-description p:first-of-type {
284 font-size: 17px;
285 }
286
287 .wpsf-tab .wpsf-section-description :last-child {
288 margin-bottom: 0;
289 }
290
291 .wpsf-tab a .dashicons {
292 text-decoration: none;
293 }
294
295 @media screen and (max-width: 782px) {
296 .wpsf-tab .wpsf-section-description {
297 padding: 20px 0;
298 }
299 }
300
301 /* $. Repeater */
302
303 .wpsf-group__row:first-child .wpsf-group__row-remove {
304 display: none;
305 }
306
307 .wpsf-group__row td {
308 border-bottom: 1px solid #ccd0d4;
309 }
310
311 .wpsf-group__row:last-child td {
312 border-bottom: none;
313 }
314
315 .wpsf-group__row-index,
316 .wpsf-group__row-actions {
317 vertical-align: middle !important;
318 }
319
320 .wpsf-group__row-index {
321 width: 25px;
322 border-right: 1px solid #e5e5e5;
323 }
324
325 .wpsf-group__row-index span {
326 text-align: center;
327 display: inline-block;
328 width: 25px;
329 line-height: 25px;
330 height: 25px;
331 background: #e5e5e5;
332 border-radius: 25px;
333 box-shadow: inset 0px 1px #c5c5c5;
334 font-size: 90%;
335 font-weight: bold;
336 }
337
338 .wpsf-group__row-actions {
339 border-left: 1px solid #e5e5e5;
340 position: relative;
341 width: 20px;
342 }
343
344 .wpsf-group__row-add {
345 position: absolute;
346 bottom: -10px;
347 background: #fff;
348 border-radius: 100%;
349 }
350
351 .wpsf-group__row-fields {
352 padding: 0 !important;
353 }
354
355 .wpsf-group__field-wrapper {
356 display: block;
357 border-bottom: 1px solid #e5e5e5;
358 padding: 15px 10px;
359 }
360
361 .wpsf-group__field-wrapper:last-child {
362 border-bottom: none;
363 }
364
365 .wpsf-group__field-wrapper.wpsf-group__field-wrapper--hidden {
366 display: none;
367 }
368
369 .wpsf-group__field-label {
370 display: block;
371 margin: 0 0 5px;
372 font-weight: bold;
373 }
374
375 .wpsf-group__row-fields .regular-text,
376 .wpsf-group__row-fields textarea {
377 width: 100%;
378 }
379
380 @media screen and (max-width: 782px) {
381 .wpsf-group__row-index span {
382 margin: 4px 0 1px;
383 }
384
385 .wpsf-group__row td,
386 .wpsf-group__row:last-child td {
387 border: none;
388 border-bottom: 1px solid #e5e5e5;
389 }
390
391 .wpsf-group__row td:last-child {
392 border: none;
393 }
394
395 .wpsf-group__row-add,
396 .wpsf-group__row-remove {
397 position: relative;
398 display: inline-block;
399 bottom: auto;
400 margin: 4px 10px 1px 0;
401 }
402
403 .wpsf-group__row-add span,
404 .wpsf-group__row-remove span {
405 font-size: 24px;
406 width: 24px;
407 height: 24px;
408 }
409 }
410
411 /* $. Fields */
412
413 .wpsf-section input.hasDatepicker {
414 background: #fff;
415 }
416
417 .wpsf-section input[type="checkbox"],
418 .wpsf-section input[type="radio"] {
419 vertical-align: text-bottom;
420 }
421
422 /* $. Toggle */
423
424 .wpsf-section label.switch {
425 position: relative;
426 display: inline-block;
427 width: 52px;
428 height: 26px;
429 margin-top: -3px;
430 }
431
432 .wpsf-section label.switch input {
433 opacity: 0;
434 width: 0;
435 height: 0;
436 }
437
438 .wpsf-section label.switch .slider {
439 border-radius: 26px;
440 position: absolute;
441 cursor: pointer;
442 top: 0;
443 left: 0;
444 right: 0;
445 bottom: 0;
446 background-color: #ccc;
447 -webkit-transition: .2s;
448 transition: .2s;
449 }
450
451 .wpsf-section label.switch .slider:before {
452 border-radius: 50%;
453 position: absolute;
454 content: "";
455 height: 18px;
456 width: 18px;
457 left: 4px;
458 bottom: 4px;
459 background-color: white;
460 -webkit-transition: .2s;
461 transition: .2s;
462 }
463
464 .wpsf-section label.switch input:checked+.slider {
465 background-color: #2196F3;
466 }
467
468 .wpsf-section label.switch input:checked+.slider:before {
469 -webkit-transform: translateX(26px);
470 -ms-transform: translateX(26px);
471 transform: translateX(26px);
472 }
473
474 /* $. End Toggle */
475
476 @media screen and (max-width: 782px) {
477
478 .wpsf-section input[type="checkbox"],
479 .wpsf-section input[type="radio"] {
480 vertical-align: middle;
481 display: inline-block;
482 margin-top: 0;
483 }
484 }
485
486 /* $. Multifields */
487
488 .wpsf-multifields {
489 overflow: hidden;
490 width: 100%;
491 }
492
493 .wpsf-multifields__field {
494 width: 25%;
495 float: left;
496 display: inline-block;
497 padding-right: 10px;
498 -webkit-box-sizing: border-box;
499 -moz-box-sizing: border-box;
500 box-sizing: border-box;
501 }
502
503 .wpsf-multifields__field input {
504 max-width: 100%;
505 width: 100%;
506 }
507
508 .wpsf-multifields__field span {
509 font-weight: 400;
510 display: block;
511 font-size: 12px;
512 color: #888;
513 font-style: italic;
514 margin: 10px 0 0;
515 }
516
517 @media screen and (max-width: 782px) {
518
519 .wpsf-multifields__field span {
520 margin: -10px 0 0;
521 }
522
523 }
524
525 /* $. Field Label */
526
527 .wpsf-label {
528 display: flex;
529 align-items: center;
530 gap: 4px;
531 }
532
533 .wpsf-label__link {
534 line-height: 21px;
535 }
536
537 /* $. Subtitle */
538
539 .wpsf-subtitle,
540 .wpsf-description {
541 font-weight: 400;
542 display: block;
543 font-size: 12px !important;
544 color: #888;
545 font-style: italic;
546 margin: 15px 0 0;
547 }
548
549 .wpsf-description {
550 max-width: 380px;
551 margin-top: 15px !important;
552 }
553
554 .wpsf-hide-description {
555 display: none;
556 }
557
558 /* $. Import */
559
560 .wpsf-import__false_btn {
561 position: relative;
562 overflow: hidden;
563 display: inline-block;
564 }
565
566 .wpsf-import input[type=file] {
567 display: none;
568 }
569
570 .wpsf-import__file {
571 position: relative;
572 display: inline-block;
573 width: 200px;
574 overflow: hidden;
575 }
576
577
578 @media screen and (max-width: 782px) {
579 .wpsf-subtitle {
580 margin: 10px 0 15px;
581 }
582 }
583
584 /* $. Tables */
585
586 .wpsf-section .form-table th,
587 .wpsf-section .form-table td {
588 vertical-align: top;
589 }
590
591 .wpsf-section .form-table td {
592 padding: 20px 10px;
593 }
594
595 @media screen and (max-width: 782px) {
596 .wpsf-section .form-table td {
597 padding: 10px;
598 }
599
600 .wpsf-section .form-table>tbody>tr>td {
601 padding-left: 0;
602 padding-right: 0;
603 }
604
605 .wpsf-section .form-table>tbody>tr>td:last-child {
606 padding-bottom: 20px;
607 }
608 }
609
610 /* $. Lists */
611
612 .wpsf-list {
613 margin: 0;
614 padding: 0;
615 list-style: none none outside;
616 }
617
618 @media screen and (max-width: 782px) {
619 .wpsf-list--checkboxes li {
620 min-height: 25px;
621 }
622 }
623
624 .wpsf-list li:last-child {
625 margin-bottom: 0;
626 }
627
628
629 .wpsf-visual-field--grid {
630 display: grid;
631 grid-gap: 5%;
632 grid-row-gap: 18px;
633 }
634
635
636 /* Image Checkbox and radio fields */
637 .wpsf-visual-field--grid {
638 display: flex;
639 gap: 20px;
640 }
641
642
643 ul.wpsf-visual-field--image-checkboxes img {
644 max-width: 100%;
645 }
646
647
648 ul.wpsf-visual-field--image-radio img {
649 max-width: 100%;
650 height: auto;
651 display: block;
652 margin: 0 auto;
653 }
654
655 .wpsf-visual-field__item {
656 margin: 0;
657 padding: 0;
658 border-radius: 4px;
659 border: 1px solid #c9c9cd;
660 position: relative;
661 }
662
663 .wpsf-visual-field__item label {
664 display: block;
665 border-radius: 4px;
666 cursor: pointer;
667 user-select: none;
668 }
669
670 .wpsf-visual-field input[type=checkbox],
671 .wpsf-visual-field input[type=radio] {
672 display: inline-block;
673 }
674
675 .wpsf-visual-field__item--checked {
676 box-shadow: 0 0.3px 0.5px rgba(0, 0, 0, 0.035), 0 2px 4px rgba(0, 0, 0, 0.07);
677 border-color: #24242d;
678 }
679
680 .wpsf-visual-field__item--checked .wpsf-visual-field-image-radio__img_wrap {
681 border-color: #24242d;
682 }
683
684 .wpsf-visual-field-image-radio__img_wrap {
685 height: 135px;
686 display: flex;
687 border-bottom: 1px solid #c9c9cd;
688 }
689
690 .wpsf-visual-field__item-text {
691 color: #1d2327;
692 font-weight: bold;
693 display: inline;
694 }
695
696 .wpsf-visual-field__item-footer {
697 padding: 12px 19px;
698 }