Page Builder by SiteOrigin - Version 2.5.2

Version Description

  • 19 April 2017 =
  • Fixed RTL layouts for new flexbox layout.
  • Renamed front.css to ensure cache busting.
  • Allow cache with auto legacy layout.
  • Use HTTPS for layout directory screenshots.
  • Fixed namespaced widget escaping.
Download this release

Release Info

Developer gpriday
Plugin Icon 128x128 Page Builder by SiteOrigin
Version 2.5.2
Comparing to
See all releases

Code changes from version 2.5.1 to 2.5.2

css/admin.less DELETED
@@ -1,1927 +0,0 @@
1
- @import "mixins";
2
-
3
- @font-face {
4
- font-family: 'siteorigin-panels';
5
- src:url('icons/siteorigin-panels.eot?-yv2c11');
6
- src:url('icons/siteorigin-panels.eot?#iefix-yv2c11') format('embedded-opentype'),
7
- url('icons/siteorigin-panels.woff?-yv2c11') format('woff'),
8
- url('icons/siteorigin-panels.ttf?-yv2c11') format('truetype'),
9
- url('icons/siteorigin-panels.svg?-yv2c11#siteorigin-panels') format('svg');
10
- font-weight: normal;
11
- font-style: normal;
12
- }
13
-
14
- #panels{
15
- }
16
-
17
- /* This is for the metabox */
18
-
19
- #so-panels-panels {
20
- &.attached-to-editor{
21
-
22
- margin-top: 20px;
23
-
24
- h3.hndle {
25
- display: none;
26
- }
27
-
28
- .inside {
29
- margin: 0 !important;
30
- padding: 0 !important;
31
- }
32
-
33
- .so-toolbar .so-switch-to-standard{
34
- display: block;
35
- }
36
- }
37
- }
38
-
39
- /* Everything for the main builder interface */
40
-
41
- .siteorigin-panels-builder {
42
-
43
- position: relative;
44
-
45
- .so-builder-container {
46
- /* Top padding for the toolbar */
47
- padding-top: 38px;
48
- position: relative;
49
- }
50
-
51
- /* These are generic iconic buttons used in the page builder interface */
52
- .so-tool-button {
53
- padding: 6px 7px;
54
- font-size: 11px;
55
- text-decoration: none;
56
- line-height: 0.9em;
57
-
58
- float: left;
59
- margin-right: 2px;
60
- display: block;
61
- visibility: visible;
62
- position: relative;
63
-
64
- border: 1px solid #C0C0C0;
65
- .gradient(#F0F0F0, #F0F0F0, #F9F9F9);
66
- .box-shadow(~"0 1px 1px rgba(0,0,0,0.04)");
67
- outline: none;
68
- .rounded(2px);
69
-
70
- span {
71
- display: inline-block;
72
- color: #666666;
73
- text-shadow: 0 1px 0 #FFFFFF;
74
- min-width: 10px;
75
- text-align: center;
76
- }
77
-
78
- &:hover {
79
- background: #FFFFFF;
80
-
81
- span {
82
- color: #444444;
83
- }
84
- }
85
- }
86
-
87
- .so-builder-toolbar {
88
- .box-sizing(border-box);
89
- border-bottom: 1px solid #D0D0D0;
90
- background: #F5F5F5;
91
- line-height: 1em;
92
- position: absolute;
93
- z-index: 101;
94
- white-space: nowrap;
95
- overflow-x: hidden;
96
-
97
- box-shadow: 0 1px 1px rgba(0,0,0,0.04);
98
-
99
- top: 0;
100
- left: 0;
101
- width: 100%;
102
-
103
- padding: 6px 9px;
104
- margin-top: 0 !important;
105
- .clearfix();
106
-
107
- /* The toolbar buttons */
108
- > .so-tool-button {
109
- display: inline-block;
110
- color: #666666;
111
- padding-right: 8px;
112
-
113
- .so-panels-icon {
114
- float: left;
115
- margin: 0 5px 0 0;
116
- }
117
-
118
- &:hover {
119
- color: #444444;
120
- }
121
- }
122
-
123
- .so-switch-to-standard {
124
- position: absolute;
125
- top: 5px;
126
- right: 10px;
127
-
128
- display: none;
129
- text-decoration: none;
130
- color: #666666;
131
- padding: 5px 6px;
132
- .rounded(2px);
133
- border: 1px solid transparent;
134
- margin-top: 2px;
135
- font-size: 11px;
136
-
137
- &:hover {
138
- background: #fafafa;
139
- border: 1px solid #999999;
140
- color: #444444;
141
- }
142
- }
143
- }
144
-
145
- @media screen and (max-width: 600px) {
146
- .so-builder-toolbar {
147
-
148
- padding: 10px;
149
-
150
- > .so-tool-button {
151
- padding-right: 2px;
152
-
153
- .so-panels-icon {
154
- font-size: 20px;
155
- }
156
-
157
- span.so-button-text {
158
- display: none;
159
- }
160
- }
161
-
162
- }
163
-
164
- }
165
-
166
- .so-rows-container{
167
- padding: 20px 15px 0 15px;
168
-
169
- .so-row-toolbar {
170
- .clearfix();
171
-
172
- .so-tool-button {
173
- .box-sizing(border-box);
174
- height: 22px;
175
- padding: 5px;
176
- font-size: 10px;
177
- float: right;
178
-
179
- &.so-row-move {
180
- cursor: move;
181
- }
182
- }
183
-
184
- margin-bottom: 4px;
185
-
186
- .so-dropdown-wrapper {
187
- position: relative;
188
- float: right;
189
-
190
- .so-dropdown-links-wrapper {
191
- display: none;
192
- z-index: 11;
193
- position:absolute;
194
- right: -10px;
195
- padding: 6px 0 0 0;
196
- top: 22px;
197
- width: 125px;
198
-
199
- ul {
200
- margin: 0;
201
- border: 1px solid #C0C0C0;
202
- background: #F9F9F9;
203
- .rounded(2px);
204
- padding: 4px 0;
205
- .box-shadow(~"0 2px 2px rgba(0,0,0,0.1)");
206
-
207
- li {
208
- margin: 0;
209
-
210
- &:first-child {
211
- border-top-width: 1px;
212
- }
213
-
214
- a {
215
- display: block;
216
- padding: 2px 8px;
217
- text-decoration: none;
218
- color: #666;
219
- font-size: 11px;
220
- font-weight: bold;
221
-
222
- outline: 0 !important;
223
- .box-shadow(none);
224
-
225
- &:hover {
226
- background: #F0F0F0;
227
- color: #444;
228
- }
229
-
230
- .dashicons {
231
- font-size: 16px;
232
- margin: 0;
233
- float: right;
234
- line-height: 16px;
235
- }
236
-
237
- /* Specific drop down hovers */
238
-
239
- &.so-row-delete {
240
- color: #a00;
241
-
242
- &:hover {
243
- color: #FFF;
244
- background: #a00;
245
- }
246
- }
247
- }
248
- }
249
-
250
- .so-pointer {
251
- width: 12px;
252
- height: 6px;
253
- position: absolute;
254
- z-index: 12;
255
- background: url("./images/dropdown-pointer.png");
256
- background-size: 12px 6px;
257
- top: 1px;
258
- right: 18px;
259
- }
260
- }
261
-
262
- }
263
-
264
- &:hover {
265
- .so-dropdown-links-wrapper {
266
- display: block;
267
- }
268
- }
269
-
270
- }
271
-
272
- }
273
-
274
- .ui-sortable-placeholder {
275
- visibility: visible !important;
276
- background: #F7F7F7;
277
- .box-sizing(border-box);
278
- }
279
-
280
- .so-row-container {
281
- margin-bottom: 20px;
282
- .user-select(none);
283
-
284
- .so-cells {
285
- .clearfix();
286
- margin: 0 -5px;
287
- position: relative;
288
-
289
- .ui-resizable-handle.ui-resizable-w{
290
- width: 10px;
291
- left: -11px;
292
- cursor: col-resize;
293
- background: rgba(0,150,211, 0);
294
- background: rgba(0,150,211, 0.25);
295
-
296
- -webkit-transition: background 0.25s ease-in-out;
297
- -moz-transition: background 0.25s ease-in-out;
298
- -o-transition: background 0.25s ease-in-out;
299
- transition: background 0.25s ease-in-out;
300
-
301
- &:hover{
302
- background: rgba(0,150,211, 0.1);
303
- }
304
- }
305
-
306
- .cell {
307
-
308
- .box-sizing(border-box);
309
- float: left;
310
- position: relative;
311
- padding: 0 5px;
312
-
313
- &.so-first{
314
- margin-left: 0;
315
- }
316
-
317
- &.so-last{
318
- margin-right: 0;
319
- }
320
-
321
- .cell-wrapper{
322
- background: #e4eff4;
323
- border: 1px solid #bcccd2;
324
- padding: 10px 10px 4px 10px; /* 6px bottom to remove bottom margin from panels */
325
- height: 100%;
326
- min-height: 70px;
327
- }
328
-
329
- &.cell-selected .cell-wrapper{
330
- background: #cae7f4 url("images/cell-selected.png") repeat;
331
- border-color: #9abcc7;
332
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
333
- }
334
-
335
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
336
- &.cell-selected .cell-wrapper{
337
- background-size: 3px 3px;
338
- }
339
- }
340
-
341
- &, .cell-wrapper {
342
- .box-sizing(border-box);
343
- }
344
-
345
- .widgets-container {
346
-
347
- .so-widget {
348
- cursor: move;
349
- margin-bottom: 5px;
350
-
351
- background: #f9f9fb;
352
-
353
- border: 1px solid #9bafb5;
354
- max-height: 49px;
355
- .box-sizing(border-box);
356
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.075)");
357
-
358
-
359
- &:hover {
360
- border: 1px solid #93a7ad;
361
- background: #feffff;
362
- .box-shadow(~"0 2px 2px rgba(0,0,0,0.075)");
363
- }
364
-
365
- .so-widget-wrapper{
366
- padding: 7px 9px;
367
- overflow: hidden;
368
- position: relative;
369
- }
370
-
371
- h4{
372
- display: block;
373
- cursor: pointer;
374
- margin: 0 15px 3px 0;
375
- font-weight: 600;
376
- line-height: 1.25em;
377
- color: #474747;
378
- text-shadow: 0 1px 0 #FFF;
379
- white-space: nowrap;
380
-
381
- span {
382
- font-weight: normal;
383
- display: inline-block;
384
- color: #999;
385
- text-shadow: 0 1px 0 #FFF;
386
- margin-left: 12px;
387
- margin-right: 5px;
388
- font-style: italic;
389
- }
390
- }
391
-
392
- .title {
393
- .actions {
394
- font-size: 12px;
395
- position: absolute;
396
- top: 5px;
397
- right: 7px;
398
- cursor: pointer;
399
- padding: 2px 2px 2px 15px;
400
- z-index: 10;
401
-
402
- &:hover {
403
- background: #feffff;
404
-
405
- a{
406
- opacity: 1;
407
- }
408
- }
409
-
410
- a{
411
- display: none;
412
- margin-right: 3px;
413
- text-decoration: none;
414
- }
415
-
416
- a.widget-delete{
417
- color: #FF0000;
418
-
419
- &:hover {
420
- color: white;
421
- background: #FF0000;
422
- }
423
- }
424
-
425
- }
426
- }
427
-
428
- &:hover {
429
- .title a{
430
- display: inline-block;
431
- opacity: 0.5;
432
- }
433
- }
434
-
435
- &.panel-being-dragged .title .actions {
436
- display: none;
437
- }
438
-
439
- small{
440
- display: block;
441
- height: 16px;
442
- overflow: hidden;
443
- color: #777;
444
- }
445
-
446
- .form{
447
- display: none;
448
- }
449
-
450
- &.widget-being-dragged {
451
- opacity: 0.9;
452
- pointer-events: none;
453
- }
454
-
455
- }
456
-
457
- .so-widget-sortable-highlight{
458
- border: 1px solid;
459
- .box-sizing(border-box);
460
-
461
- height: 49px;
462
-
463
- background: #ddebef;
464
- border-color: #bcccd2;
465
- margin-bottom: 5px;
466
-
467
- position: relative;
468
-
469
- .box-shadow(~"inset 2px 2px 2px rgba(0,0,0,0.01)");
470
- }
471
-
472
- }
473
-
474
- .resize-handle{
475
- z-index: 100;
476
- position: absolute;
477
- top: 0;
478
- width: 10px;
479
- left: -5px;
480
- cursor: col-resize;
481
- background: #e5f4fa;
482
- height: 100%;
483
-
484
- .transition(0.25s, background, ease-in-out);
485
-
486
- &:hover{
487
- background: #bfe4f3;
488
- }
489
- }
490
-
491
- &:first-child {
492
- .resize-handle {
493
- display: none;
494
- }
495
- }
496
- }
497
- }
498
-
499
- }
500
- }
501
-
502
- /* Page Builder icons */
503
-
504
- .so-panels-icon {
505
- font-family: 'siteorigin-panels';
506
- speak: none;
507
- font-style: normal;
508
- font-weight: normal;
509
- font-variant: normal;
510
- text-transform: none;
511
- line-height: 1;
512
-
513
- /* Better Font Rendering =========== */
514
- -webkit-font-smoothing: antialiased;
515
- -moz-osx-font-smoothing: grayscale;
516
-
517
- &.so-panels-icon-plus:before {
518
- content: "\f067";
519
- }
520
- &.so-panels-icon-eye:before {
521
- content: "\f06e";
522
- }
523
- &.so-panels-icon-arrows-v:before {
524
- content: "\f07d";
525
- }
526
- &.so-panels-icon-wrench:before {
527
- content: "\f0ad";
528
- }
529
- &.so-panels-icon-columns:before {
530
- content: "\f0db";
531
- }
532
- &.so-panels-icon-rotate-left:before {
533
- content: "\f0e2";
534
- }
535
- &.so-panels-icon-puzzle-piece:before {
536
- content: "\f12e";
537
- }
538
- &.so-panels-icon-cubes:before {
539
- content: "\f1b3";
540
- }
541
- }
542
-
543
- .so-panels-welcome-message {
544
- text-align: center;
545
- padding: 0px 15px 20px 15px;
546
- color: #555;
547
- line-height: 1.8em;
548
-
549
- .so-message-wrapper {
550
- padding: 15px 10px;
551
- background: #F8F8F8;
552
- border: 1px solid #E0E0E0;
553
- }
554
-
555
- .so-tool-button {
556
- font-size: inherit;
557
- display: inline-block;
558
- float: none;
559
- color: #666;
560
- padding: 5px 10px;
561
- margin: 0 3px;
562
-
563
- .so-panels-icon {
564
- color: #777;
565
- font-size: 0.8em;
566
- }
567
- }
568
- }
569
-
570
- }
571
-
572
- /* This is to display a draggable widget */
573
- .so-widget.ui-sortable-helper.widget-being-dragged {
574
- /* Need a high z-index for layout builder widget */
575
- z-index: 500002 !important;
576
-
577
- .siteorigin-panels-builder.so-rows-container.so-row-container.so-cells.cell.widgets-container.so-widget;
578
- }
579
-
580
- /* Handles displaying a builder in the WordPress widget interface */
581
- .widgets-holder-wrap .widget-inside {
582
-
583
- .siteorigin-panels-builder {
584
-
585
- .so-builder-container {
586
- padding-top: 0;
587
- }
588
-
589
- .so-rows-container {
590
- padding: 10px 0 0 0;
591
- }
592
-
593
- .so-builder-toolbar {
594
- padding-left: 15px;
595
- padding-right: 15px;
596
- margin: 0 -15px;
597
- }
598
- }
599
-
600
- }
601
-
602
- .so-panels-dialog {
603
-
604
- @edge_spacing: 30px;
605
-
606
- @title_bar_height: 50px;
607
- @toolbar_height: 58px;
608
- @sidebar_width: 290px;
609
-
610
- @pane_padding: 15px;
611
- @border_color: #D8D8D8;
612
-
613
- .so-overlay, .so-content, .so-title-bar, .so-toolbar, .so-left-sidebar, .so-right-sidebar {
614
- z-index: 100000;
615
- position: fixed;
616
- .box-sizing(border-box);
617
- padding: @pane_padding;
618
-
619
- }
620
-
621
- .so-content, .so-left-sidebar, .so-right-sidebar {
622
- overflow-y: auto;
623
- }
624
-
625
- .so-overlay {
626
- top: 0;
627
- left: 0;
628
- right: 0;
629
- bottom: 0;
630
- background: rgba(0,0,0,0.5);
631
- }
632
-
633
- .so-content {
634
- top: @edge_spacing + @title_bar_height;
635
- left: @edge_spacing;
636
- right: @edge_spacing;
637
- bottom: @edge_spacing + @toolbar_height;
638
- background-color: #fdfdfd;
639
- overflow-x: hidden;
640
-
641
- .box-shadow(~"inset 0 2px 2px rgba(0,0,0,0.03)");
642
-
643
- > *:first-child {
644
- margin-top: 0;
645
- }
646
-
647
- > *:last-child {
648
- margin-bottom: 0;
649
- }
650
-
651
- .so-content-tabs > * {
652
- display: none;
653
- }
654
-
655
- }
656
-
657
- .so-title-bar {
658
- left: @edge_spacing;
659
- right: @edge_spacing;
660
- top: @edge_spacing;
661
- height: @title_bar_height;
662
- background-color: #fafafa;
663
- border-bottom: 1px solid @border_color;
664
-
665
- h3.so-title {
666
- margin: 0 !important;
667
- padding: 0 !important;
668
- }
669
-
670
- h3.so-parent-link {
671
- cursor: pointer;
672
- position: relative;
673
- float: left;
674
- margin: 0 @pane_padding 0 0 !important;
675
- padding: 0 @pane_padding+12px 0 0 !important;
676
-
677
- .so-separator {
678
- position: absolute;
679
- top: -@pane_padding;
680
- right: 0;
681
- width: 12px;
682
- height: @title_bar_height;
683
- display: block;
684
- background: url(./images/dialog-separator.png) no-repeat;
685
- }
686
-
687
-
688
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
689
- .so-separator {
690
- background: url(./images/dialog-separator@2x.png) no-repeat;
691
- background-size: cover;
692
- }
693
- }
694
-
695
-
696
- }
697
-
698
-
699
-
700
- /* These are the action buttons in the title bar */
701
- a {
702
- cursor: pointer;
703
- position: absolute;
704
- box-sizing: border-box;
705
- width: 50px;
706
- height: 50px;
707
- display: block;
708
-
709
- top: 0;
710
- right: 0;
711
-
712
- .transition(0.2s);
713
- background: #fafafa;
714
- border-left: 1px solid #d8d8d8;
715
- border-bottom: 1px solid #d8d8d8;
716
-
717
- &:hover {
718
- background: #e9e9e9;
719
- .so-dialog-icon {
720
- color: #333333;
721
- }
722
- }
723
-
724
- .so-dialog-icon {
725
- position: absolute;
726
- top: 50%;
727
- left: 50%;
728
- text-decoration: none;
729
- width: 20px;
730
- height: 20px;
731
- margin-left: -10px;
732
- margin-top: -10px;
733
- color: #666666;
734
- text-align: center;
735
-
736
- &:before {
737
- font: 400 20px/1em dashicons;
738
-
739
- top: 7px;
740
- left: 13px;
741
- }
742
- }
743
-
744
- &.so-close {
745
- right: 0;
746
-
747
- .so-dialog-icon:before {
748
- content: "\f335";
749
- }
750
- }
751
-
752
- &.so-next {
753
- right: 50px;
754
-
755
- .so-dialog-icon:before {
756
- content: '\f345';
757
- }
758
- }
759
-
760
- &.so-previous {
761
- right: 100px;
762
-
763
- .so-dialog-icon:before {
764
- content: '\f341';
765
- }
766
- }
767
-
768
- /* Disabled nav */
769
- &.so-nav.so-disabled {
770
- cursor: default;
771
- pointer-events:none;
772
-
773
- .so-dialog-icon {
774
- color: #dddddd;
775
- }
776
- }
777
-
778
- }
779
- }
780
-
781
- .so-toolbar {
782
- left: @edge_spacing;
783
- right: @edge_spacing;
784
- bottom: @edge_spacing;
785
- height: @toolbar_height;
786
- background-color: #fafafa;
787
- border-top: 1px solid @border_color;
788
-
789
- .so-status {
790
- float: left;
791
- padding-top: 6px;
792
- padding-bottom: 6px;
793
- font-style: italic;
794
- color: #999999;
795
- line-height: 1em;
796
-
797
- &.so-panels-loading {
798
- padding-left: 26px;
799
- background-position: left center;
800
- }
801
- }
802
-
803
- .so-buttons {
804
-
805
- .action-buttons {
806
-
807
- position: absolute;
808
- left: 15px;
809
- top: 50%;
810
- margin-top: -0.65em;
811
-
812
- a {
813
- display: inline;
814
- padding: 0.2em 0.5em;
815
- line-height: 1em;
816
- margin-right: 0.5em;
817
- text-decoration: none;
818
- }
819
-
820
- .so-delete {
821
- color: #a00;
822
-
823
- &:hover {
824
- background: #a00;
825
- color: #FFFFFF;
826
- }
827
- }
828
-
829
- .so-duplicate:hover {
830
- text-decoration: underline;
831
- }
832
-
833
- }
834
-
835
- float: right;
836
- }
837
- }
838
-
839
- .so-left-sidebar, .so-right-sidebar {
840
- background-color: #f3f3f3;
841
- }
842
-
843
- .so-left-sidebar {
844
- display: none;
845
-
846
- top: @edge_spacing;
847
- left: @edge_spacing;
848
- bottom: @edge_spacing;
849
- width: @sidebar_width;
850
-
851
-
852
- border-right: 1px solid @border_color;
853
-
854
- h4 {
855
- margin: 0 0 20px 0;
856
- font-size: 18px;
857
- }
858
-
859
- .so-sidebar-search {
860
- width: 100%;
861
- padding: 6px;
862
- margin-bottom: 20px;
863
- }
864
-
865
- .so-sidebar-tabs {
866
- list-style: none;
867
- margin: 0 -15px;
868
-
869
- li {
870
- margin-bottom: 0;
871
- a {
872
- padding: 7px 16px;
873
- display: block;
874
- font-size: 14px;
875
- text-decoration: none;
876
-
877
- &:hover {
878
- background: #FFFFFF;
879
- }
880
-
881
- box-shadow: none !important;
882
- }
883
-
884
- &.tab-active {
885
- a {
886
- color: #555;
887
- font-weight: bold;
888
- background: #FFFFFF;
889
- &:hover {
890
- background: #FFFFFF;
891
- }
892
- }
893
- }
894
- }
895
- }
896
-
897
- }
898
-
899
- .so-right-sidebar {
900
- display: none;
901
-
902
- top: @edge_spacing + @title_bar_height;
903
- right: @edge_spacing;
904
- bottom: @edge_spacing + @toolbar_height;
905
- width: @sidebar_width;
906
-
907
- border-left: 1px solid @border_color;
908
-
909
- h3 {
910
- color: #333;
911
-
912
- &:first-child {
913
- margin-top: 0;
914
- }
915
- }
916
- }
917
-
918
- .so-sidebar {
919
- .form-field {
920
- margin-bottom: 20px;
921
-
922
- label{
923
- font-weight: 500;
924
- font-size: 15px;
925
- display: block;
926
- margin-bottom: 10px;
927
- }
928
-
929
- input[type=text] {
930
-
931
- }
932
- }
933
- }
934
-
935
- &.so-panels-dialog-has-left-sidebar {
936
- .so-content, .so-toolbar, .so-title-bar {
937
- left: @edge_spacing + @sidebar_width;
938
- }
939
-
940
- .so-content {
941
- .box-shadow(~"inset 2px 2px 2px rgba(0,0,0,0.03)");
942
- }
943
-
944
- .so-left-sidebar {
945
- display: block;
946
- }
947
- }
948
-
949
- &.so-panels-dialog-has-right-sidebar {
950
- .so-content {
951
- right: @edge_spacing + @sidebar_width;
952
- }
953
-
954
- .so-right-sidebar {
955
- display: block;
956
- }
957
- }
958
-
959
- &.so-panels-dialog-edit-widget {
960
-
961
- .so-left-sidebar {
962
-
963
- .so-widgets {
964
-
965
- .so-widget {
966
- .rounded(2px);
967
-
968
- border: 1px solid #cccccc;
969
- cursor: pointer;
970
- padding: 10px;
971
- background: #f9f9f9;
972
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.075), inset 0 1px 0 #FFFFFF");
973
- margin-bottom: 15px;
974
-
975
- &:hover {
976
- border: 1px solid #BBBBBB;
977
- background: #FFFFFF;
978
- }
979
-
980
- &.so-current {
981
- border-color: #0074a2;
982
- background: #2ea2cc;
983
- cursor: auto;
984
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2)");
985
-
986
- h3 {
987
- color: #FFFFFF;
988
- }
989
-
990
- small {
991
- color: #eeeeee;
992
- }
993
-
994
- &:hover {
995
- border-color: #0074a2;
996
- background: #2ea2cc;
997
- }
998
- }
999
-
1000
- &:last-child {
1001
- margin-bottom: 0;
1002
- }
1003
-
1004
- h3 {
1005
- margin: 0 0 7px 0;
1006
- padding: 0;
1007
- height: 1.2em;
1008
- color: #222222;
1009
- font-size: 14px;
1010
- }
1011
-
1012
- small{
1013
- font-size: 11px;
1014
- line-height: 1.25em;
1015
- display: block;
1016
- overflow: hidden;
1017
- color: #888888;
1018
- }
1019
-
1020
- }
1021
-
1022
- }
1023
-
1024
- }
1025
-
1026
- }
1027
-
1028
- /* The add widget dialog */
1029
-
1030
- &.so-panels-dialog-add-widget {
1031
-
1032
- .widget-type-list {
1033
-
1034
- .clearfix();
1035
-
1036
- margin: 0 -5px -10px -5px;
1037
- min-height: 10px;
1038
-
1039
- .widget-type {
1040
- -ms-user-select: none; /* IE 10+ */
1041
- -moz-user-select: -moz-none;
1042
- -khtml-user-select: none;
1043
- -webkit-user-select: none;
1044
- user-select: none;
1045
-
1046
- .box-sizing(border-box);
1047
-
1048
- width: 25%;
1049
- padding: 0 5px;
1050
- margin-bottom: 10px;
1051
- float: left;
1052
-
1053
- @media (max-width: 1280px) {
1054
- & {
1055
- width: 33.333%;
1056
- }
1057
-
1058
- }
1059
-
1060
- @media (max-width: 960px) {
1061
- & {
1062
- width: 50%;
1063
- }
1064
-
1065
- }
1066
-
1067
- h3 {
1068
- margin: 0 0 7px 0;
1069
- padding: 0;
1070
- color: #222222;
1071
- font-size: 14px;
1072
- }
1073
-
1074
- small{
1075
- font-size: 11px;
1076
- min-height: 2.5em;
1077
- line-height: 1.25em;
1078
- display: block;
1079
- overflow: hidden;
1080
- color: #888888;
1081
- }
1082
-
1083
- .widget-icon {
1084
- font-size: 20px;
1085
- width: 20px;
1086
- height: 20px;
1087
- color: #666;
1088
- float: left;
1089
- margin: -1px 0.5em 0 0;
1090
- }
1091
- }
1092
-
1093
- .widget-type-wrapper {
1094
- border: 1px solid #cccccc;
1095
- cursor: pointer;
1096
- padding: 10px;
1097
- background: #F8F8F8;
1098
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.075)");
1099
-
1100
- &:hover {
1101
- border: 1px solid #BBBBBB;
1102
- background: #FFFFFF;
1103
- .box-shadow(~"0 2px 2px rgba(0,0,0,0.075)");
1104
- }
1105
- }
1106
-
1107
- }
1108
-
1109
- }
1110
-
1111
- /* The row edit dialog */
1112
-
1113
- &.so-panels-dialog-row-edit {
1114
-
1115
- .so-content {
1116
-
1117
- @preview_height: 360px;
1118
-
1119
- .row-set-form {
1120
- .clearfix();
1121
- padding: 8px;
1122
- border: 1px solid #ccc;
1123
- margin-bottom: 20px;
1124
- background: #F3F3F3;
1125
-
1126
- input, select, button, strong, span {
1127
- display: inline;
1128
- margin: 1px 5px;
1129
-
1130
- outline: none;
1131
- box-shadow: none;
1132
- }
1133
-
1134
- button {
1135
- margin-top: 2px;
1136
- }
1137
-
1138
- label{
1139
- display: inline;
1140
- }
1141
- }
1142
-
1143
- .row-preview {
1144
-
1145
- margin: 0 -6px;
1146
- height: @preview_height;
1147
- position: relative;
1148
- .preview-cell, .preview-cell-in, .preview-cell-weight {
1149
- .box-sizing(border-box);
1150
- }
1151
-
1152
- white-space: nowrap;
1153
-
1154
- .preview-cell {
1155
- display: inline-block;
1156
- position: relative;
1157
- padding: 0 6px;
1158
-
1159
- .preview-cell-in {
1160
- border: 1px solid #bcccd2;
1161
- min-height: @preview_height;
1162
- background: #e4eff4;
1163
- position: relative;
1164
-
1165
- .preview-cell-weight,
1166
- .preview-cell-weight-input {
1167
- position: absolute;
1168
- font-size: 17px;
1169
- font-weight: bold;
1170
- top: 50%;
1171
- left: 50%;
1172
- width: 80px;
1173
- text-align: center;
1174
- color: #5e6d72;
1175
- margin: -0.95em 0 0 -40px;
1176
- padding: 10px 0;
1177
- border: 1px solid transparent;
1178
- line-height: 1.4em !important;
1179
-
1180
- &:after{
1181
- content: '%';
1182
- }
1183
- overflow: hidden;
1184
- cursor: pointer;
1185
-
1186
- &:hover {
1187
- background: #F6F6F6;
1188
- border: 1px solid #D0D0D0;
1189
- }
1190
- }
1191
-
1192
- .preview-cell-weight-input {
1193
- background: #F6F6F6;
1194
- border: 1px solid #D0D0D0;
1195
- .box-shadow(none);
1196
- }
1197
- }
1198
-
1199
- .resize-handle{
1200
- z-index: 100;
1201
- position: absolute;
1202
- top: 0;
1203
- width: 12px;
1204
- left: -6px;
1205
- cursor: col-resize;
1206
- background: #e5f4fb;
1207
- height: @preview_height;
1208
-
1209
- .transition(0.15s, background, ease-in-out);
1210
-
1211
- &:hover, &.ui-draggable-dragging {
1212
- background: #b7e0f1;
1213
- }
1214
- }
1215
- }
1216
- }
1217
-
1218
- }
1219
-
1220
-
1221
- }
1222
-
1223
- &.so-panels-dialog-history {
1224
-
1225
- .so-left-sidebar {
1226
- padding: 0;
1227
- }
1228
-
1229
- .history-entries {
1230
-
1231
-
1232
- .history-entry {
1233
- padding: 10px;
1234
- background: #F8F8F8;
1235
- cursor: pointer;
1236
-
1237
- h3 {
1238
- margin: 0 0 0.6em 0;
1239
- font-size: 12px;
1240
- font-weight: bold;
1241
- color: #444444;
1242
- line-height: 1em;
1243
- }
1244
-
1245
- .timesince {
1246
- color: #999999;
1247
- font-size: 11px;
1248
- line-height: 1em;
1249
- }
1250
-
1251
- border-bottom: 1px solid #ccc;
1252
-
1253
- &:hover {
1254
- background: #F0F0F0;
1255
- }
1256
-
1257
- &.so-selected {
1258
- background: #EEEEEE;
1259
- }
1260
-
1261
- .count {
1262
- color: #999999;
1263
- }
1264
- }
1265
- }
1266
-
1267
- .so-content {
1268
- padding: 0;
1269
- overflow-y: hidden;
1270
-
1271
- form.history-form {
1272
- display: none;
1273
- }
1274
-
1275
- iframe.siteorigin-panels-history-iframe {
1276
- width: 100%;
1277
- height: 100%;
1278
- }
1279
- }
1280
- }
1281
-
1282
- /* For prebuilt layouts */
1283
-
1284
- &.so-panels-dialog-prebuilt-layouts {
1285
- .so-content {
1286
-
1287
- padding-left: 10px;
1288
- padding-right: 10px;
1289
-
1290
- .layout {
1291
- .box-sizing(border-box);
1292
- float: left;
1293
- width: 33.333%;
1294
- padding: 0 5px 10px 5px;
1295
-
1296
- .layout-inside {
1297
- padding: 10px 15px;
1298
- cursor: pointer;
1299
- border: 1px solid #cccccc;
1300
- background: #F8F8F8;
1301
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.075)");
1302
-
1303
- &:hover {
1304
- border: 1px solid #BBBBBB;
1305
- background: #FFFFFF;
1306
- .box-shadow(~"0 2px 2px rgba(0,0,0,0.075)");
1307
- }
1308
-
1309
- h4 {
1310
- font-size: 15px;
1311
- margin: 0;
1312
- line-height: 1.2em;
1313
- height: 1.2em;
1314
- overflow: hidden;
1315
- }
1316
-
1317
- .description {
1318
- line-height: 1.2em;
1319
- height: 1.2em;
1320
- margin-top: 0.7em;
1321
- font-size: 12px;
1322
- color: #888;
1323
- overflow: hidden;
1324
- }
1325
-
1326
- .dashicons {
1327
- display: none;
1328
- float: left;
1329
- margin-top: 10px;
1330
- }
1331
-
1332
- }
1333
-
1334
- &.so-selected {
1335
-
1336
- .layout-inside {
1337
- border: 1px solid #aaaaaa;
1338
- background: #F2F2F2;
1339
-
1340
- h4, .description {
1341
- margin-left: 35px;
1342
- }
1343
-
1344
- .dashicons {
1345
- display: inline-block;
1346
- }
1347
- }
1348
-
1349
- }
1350
-
1351
- }
1352
-
1353
- .so-error-message {
1354
- font-size: 14px;
1355
- border: 1px solid #cccccc;
1356
- background: #F8F8F8;
1357
- padding: 15px 20px;
1358
- }
1359
-
1360
- .export-file-ui {
1361
- padding: 5px 15px;
1362
- text-align: right;
1363
- }
1364
-
1365
- .import-upload-ui {
1366
- padding: 15px;
1367
-
1368
- .drag-drop-message {
1369
- display: none;
1370
- }
1371
-
1372
- &.has-drag-drop .drag-drop-message {
1373
- display: block;
1374
- }
1375
-
1376
- p.drag-drop-message{
1377
- font-size: 0.9em;
1378
- }
1379
-
1380
- .drag-upload-area {
1381
- display: block;
1382
- .box-sizing(border-box);
1383
- padding: 50px 30px;
1384
- border: 4px dashed #E0E0E0;
1385
- text-align: center;
1386
- .transition(0.25s);
1387
-
1388
- &.file-dragover {
1389
- background-color: #f2f9fc;
1390
- border-color: #0074a2;
1391
- }
1392
- }
1393
-
1394
- .progress-bar {
1395
- display: none;
1396
- padding: 2px;
1397
- border: 2px solid #2181b1;
1398
- .rounded(2px);
1399
- margin-top: 20px;
1400
-
1401
- .progress-percent{
1402
- height: 14px;
1403
- background-color: #358ebe;
1404
- .rounded(1px);
1405
- }
1406
- }
1407
-
1408
- .file-browse-button {
1409
- padding: 12px 30px;
1410
- height: auto;
1411
- }
1412
- }
1413
- }
1414
-
1415
- }
1416
-
1417
- /* Everything we need for the style fields */
1418
-
1419
- .so-visual-styles {
1420
-
1421
- margin: -15px;
1422
-
1423
- h3 {
1424
- line-height: 1em;
1425
- margin: 0;
1426
- padding: 20px 15px;
1427
- border-bottom: 1px solid #ddd;
1428
- }
1429
-
1430
- .style-section-head {
1431
- background: white;
1432
- padding: 15px 10px;
1433
- border-bottom: 1px solid #ddd;
1434
- cursor: pointer;
1435
-
1436
- .user-select(none);
1437
-
1438
- h4 {
1439
- margin: 0;
1440
- }
1441
- }
1442
-
1443
- .style-section-fields {
1444
- padding: 15px;
1445
- border-bottom: 1px solid #ddd;
1446
- background: #F7F7F7;
1447
-
1448
- .style-field-wrapper {
1449
- margin-bottom: 20px;
1450
-
1451
- &:last-child {
1452
- margin-bottom: 0;
1453
- }
1454
-
1455
- > label {
1456
- font-weight: bold;
1457
- display: block;
1458
- margin-bottom: 3px;
1459
- }
1460
-
1461
- .style-field {
1462
- .clearfix();
1463
-
1464
- input {
1465
- font-size: 12px;
1466
- }
1467
- }
1468
- }
1469
- }
1470
-
1471
- .style-input-wrapper {
1472
- .clearfix();
1473
-
1474
- input {
1475
- max-width: 100%;
1476
- }
1477
- }
1478
-
1479
- /* All the field types */
1480
-
1481
- .style-field-measurement {
1482
- input[type="text"] {
1483
- width: 60px;
1484
- float: left;
1485
- }
1486
-
1487
- select {
1488
- float: left;
1489
- }
1490
- }
1491
-
1492
- .style-field-image {
1493
-
1494
- @image_field_height: 28px;
1495
-
1496
- .so-image-selector {
1497
- display: inline-block;
1498
- background-color: #f7f7f7;
1499
- border: 1px solid #ccc;
1500
- height: @image_field_height;
1501
- float: left;
1502
- .rounded(3px);
1503
- cursor: pointer;
1504
-
1505
- .box-shadow(~"inset 0 1px #FFFFFF");
1506
-
1507
- .current-image {
1508
- height: @image_field_height;
1509
- width: @image_field_height;
1510
- float: left;
1511
- background: #ffffff;
1512
- border-right: 1px solid #ccc;
1513
- background-size: cover;
1514
-
1515
- .border-radius(0, 0, 3px, 3px);
1516
- }
1517
-
1518
- .select-image {
1519
- font-size: 12px;
1520
- line-height: @image_field_height;
1521
- float: left;
1522
- padding: 0 8px;
1523
- color: #555;
1524
- }
1525
- }
1526
-
1527
- .remove-image {
1528
- font-size: 12px;
1529
- margin-top: 4px;
1530
- margin-left: 15px;
1531
-
1532
- display: inline-block;
1533
- float: left;
1534
- color: #666;
1535
- text-decoration: none;
1536
-
1537
- .remove-image {
1538
- color: #333;
1539
- }
1540
- }
1541
- }
1542
-
1543
- .so-field-code {
1544
- font-size: 12px;
1545
- font-family: "Courier 10 Pitch", Courier, monospace;
1546
- }
1547
-
1548
- .so-description {
1549
- color: #999;
1550
- font-size: 12px;
1551
- margin-top: 5px;
1552
- margin-bottom: 0;
1553
- font-style: italic;
1554
- clear:both;
1555
- }
1556
-
1557
- }
1558
-
1559
- /* Special case of the builder interface being inside a dialog */
1560
-
1561
- .so-content {
1562
- .siteorigin-panels-builder {
1563
- .so-builder-toolbar {
1564
- border: 1px solid #dedede;
1565
- }
1566
-
1567
- .so-rows-container {
1568
- padding: 20px 0 0 0;
1569
- }
1570
-
1571
- .so-panels-welcome-message {
1572
- padding-left: 0;
1573
- padding-right: 0;
1574
- }
1575
- }
1576
- }
1577
- }
1578
-
1579
- /* Display the dialog with a proper z-index in the customizer */
1580
- .wp-customizer .so-panels-dialog {
1581
- .so-overlay, .so-content, .so-title-bar, .so-toolbar, .so-left-sidebar, .so-right-sidebar {
1582
- z-index: 500001;
1583
- }
1584
- }
1585
-
1586
- .so-panels-live-editor {
1587
- > div {
1588
- position: fixed;
1589
- z-index: 99999;
1590
- }
1591
-
1592
- .live-editor-form {
1593
- display: none;
1594
- }
1595
-
1596
- .so-overlay {
1597
- top: 0;
1598
- right: 0;
1599
- bottom: 0;
1600
- left: 0;
1601
- background: rgba(0,0,0,0.75);
1602
- }
1603
-
1604
- .so-sidebar {
1605
- top: 0;
1606
- left: 0;
1607
- bottom: 0;
1608
- width: 260px;
1609
- overflow-y: auto;
1610
-
1611
- background: #F2F2F2;
1612
-
1613
- border-right: 1px solid #D0D0D0;
1614
- .box-sizing(border-box);
1615
-
1616
- .so-sidebar-tools {
1617
- background: #eee;
1618
- border-bottom: 1px solid #ddd;
1619
-
1620
- .live-editor-close {
1621
- .box-sizing(border-box);
1622
- display: block;
1623
- width: 45px;
1624
- height: 45px;
1625
- background: #eee;
1626
- border-right: 1px solid #ddd;
1627
- color: #444;
1628
- cursor: pointer;
1629
- text-decoration: none;
1630
- position: relative;
1631
- text-align: center;
1632
- padding-top: 12px;
1633
-
1634
- &:hover {
1635
- background: #FFFFFF;
1636
- }
1637
-
1638
- &:before {
1639
- font: 400 22px/1 dashicons;
1640
- content: "\f341";
1641
- top: 7px;
1642
- left: 13px;
1643
- }
1644
- }
1645
-
1646
- }
1647
-
1648
- .page-widgets {
1649
-
1650
- .page-widgets-section {
1651
-
1652
- .section-header {
1653
- cursor: pointer;
1654
- background: white;
1655
- padding: 15px 10px;
1656
- border: solid #ddd;
1657
- border-width: 1px 0;
1658
-
1659
- h4 {
1660
- margin: 0;
1661
- font-size: 16px;
1662
- }
1663
- }
1664
-
1665
- .section-widgets {
1666
- padding: 10px;
1667
- }
1668
-
1669
-
1670
- &:first-child {
1671
- .section-header {
1672
- border-top: 0;
1673
- }
1674
- }
1675
- }
1676
-
1677
- .so-widget {
1678
- border: 1px solid #cccccc;
1679
- cursor: pointer;
1680
- padding: 10px;
1681
- background: #F8F8F8;
1682
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.075), inset 0 1px 0 #FFFFFF");
1683
- margin-bottom: 6px;
1684
-
1685
- &:hover, &.so-hovered {
1686
- .box-shadow(~"0 2px 2px rgba(0,0,0,0.0125), inset 0 1px 0 #FFFFFF");
1687
- border: 1px solid #9bafb5;
1688
- background: #f4f9fd;
1689
- }
1690
-
1691
- &.so-current {
1692
- border-color: #0074a2;
1693
- background: #2ea2cc;
1694
- cursor: auto;
1695
- .box-shadow(~"0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2)");
1696
-
1697
- h4 {
1698
- color: #FFFFFF;
1699
- }
1700
-
1701
- small {
1702
- color: #eeeeee;
1703
- }
1704
-
1705
- &:hover {
1706
- border-color: #0074a2;
1707
- background: #2ea2cc;
1708
- }
1709
- }
1710
-
1711
- &:last-child {
1712
- margin-bottom: 0;
1713
- }
1714
-
1715
- h4 {
1716
- margin: 0 0 7px 0;
1717
- padding: 0;
1718
- height: 1.2em;
1719
- color: #222222;
1720
- font-size: 14px;
1721
- }
1722
-
1723
- .actions {
1724
- display: none;
1725
- }
1726
-
1727
- small{
1728
- font-size: 11px;
1729
- line-height: 1.2em;
1730
- height: 1.2em;
1731
- display: block;
1732
- overflow: hidden;
1733
- color: #888888;
1734
- }
1735
-
1736
- }
1737
-
1738
- }
1739
- }
1740
-
1741
- .so-preview {
1742
- top: 0;
1743
- right: 0;
1744
- bottom: 0;
1745
- left: 260px;
1746
-
1747
- background: #F4F4F4;
1748
-
1749
- iframe{
1750
- width: 100%;
1751
- height: 100%;
1752
- }
1753
- }
1754
-
1755
- }
1756
-
1757
- .so-panels-loading {
1758
- background-image: url("images/wpspin_light.gif");
1759
- background-position: center center;
1760
- background-repeat: no-repeat;
1761
-
1762
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1763
- & {
1764
- background-image: url(images/wpspin_light-2x.gif);
1765
- background-size: 16px 16px;
1766
- }
1767
- }
1768
- }
1769
-
1770
-
1771
- /* For the custom home page interface */
1772
-
1773
- #panels-home-page {
1774
-
1775
- .siteorigin-panels-builder {
1776
- border: 1px solid #D0D0D0;
1777
- background-color: #ffffff;
1778
- margin: 10px 0;
1779
-
1780
- &.so-panels-loading {
1781
- min-height: 150px;
1782
- }
1783
- }
1784
-
1785
- /* The Switch - © 2013 Thibaut Courouble - MIT License */
1786
-
1787
- .switch {
1788
- @switch_height: 24px;
1789
- @switch_width: 68px;
1790
- @switch_padding: 3px;
1791
-
1792
- margin: 0 10px 0 0;
1793
- float: left;
1794
- position: relative;
1795
- display: inline-block;
1796
- vertical-align: top;
1797
- width: @switch_width;
1798
- height: @switch_height;
1799
- padding: @switch_padding;
1800
- background-color: white;
1801
- border-radius: @switch_height;
1802
- box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
1803
- cursor: pointer;
1804
- background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
1805
- background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
1806
- background-image: -o-linear-gradient(top, #eeeeee, white 25px);
1807
- background-image: linear-gradient(to bottom, #eeeeee, white 25px);
1808
-
1809
- .switch-input {
1810
- position: absolute;
1811
- top: 0;
1812
- left: 0;
1813
- opacity: 0;
1814
- }
1815
-
1816
- .switch-label {
1817
- position: relative;
1818
- display: block;
1819
- height: inherit;
1820
- font-size: @switch_height/2;
1821
- text-transform: uppercase;
1822
- background: #eceeef;
1823
- border-radius: inherit;
1824
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
1825
- -webkit-transition: 0.15s ease-out;
1826
- -moz-transition: 0.15s ease-out;
1827
- -o-transition: 0.15s ease-out;
1828
- transition: 0.15s ease-out;
1829
- -webkit-transition-property: opacity background;
1830
- -moz-transition-property: opacity background;
1831
- -o-transition-property: opacity background;
1832
- transition-property: opacity background;
1833
- }
1834
- .switch-label:before,
1835
- .switch-label:after {
1836
- position: absolute;
1837
- top: 50%;
1838
- margin-top: -.5em;
1839
- line-height: 1;
1840
- -webkit-transition: inherit;
1841
- -moz-transition: inherit;
1842
- -o-transition: inherit;
1843
- transition: inherit;
1844
- }
1845
- .switch-label:before {
1846
- content: attr(data-off);
1847
- right: 11px;
1848
- color: #aaa;
1849
- text-shadow: 0 1px rgba(255, 255, 255, 0.5);
1850
- }
1851
- .switch-label:after {
1852
- content: attr(data-on);
1853
- left: @switch_height/2 + 1px;
1854
- color: white;
1855
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
1856
- opacity: 0;
1857
- }
1858
- .switch-input:checked ~ .switch-label {
1859
- background: #47a8d8;
1860
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
1861
- }
1862
- .switch-input:checked ~ .switch-label:before {
1863
- opacity: 0;
1864
- }
1865
- .switch-input:checked ~ .switch-label:after {
1866
- opacity: 1;
1867
- }
1868
-
1869
- .switch-handle {
1870
- position: absolute;
1871
- top: 4px;
1872
- left: @switch_padding + 1px;
1873
- width: @switch_height - 2px;
1874
- height: @switch_height - 2px;
1875
- background: white;
1876
- border-radius: @switch_height/2;
1877
- box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
1878
- background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
1879
- background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
1880
- background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
1881
- background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
1882
- -webkit-transition: left 0.15s ease-out;
1883
- -moz-transition: left 0.15s ease-out;
1884
- -o-transition: left 0.15s ease-out;
1885
- transition: left 0.15s ease-out;
1886
- }
1887
- .switch-handle:before {
1888
- content: '';
1889
- position: absolute;
1890
- top: 50%;
1891
- left: 50%;
1892
- margin: -7px 0 0 -7px;
1893
- width: @switch_height/2 + 2px;
1894
- height: @switch_height/2 + 2px;
1895
- background: #f9f9f9;
1896
- border-radius: (@switch_height/2 + 2px) / 2;
1897
- box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
1898
- background-image: -webkit-linear-gradient(top, #eeeeee, white);
1899
- background-image: -moz-linear-gradient(top, #eeeeee, white);
1900
- background-image: -o-linear-gradient(top, #eeeeee, white);
1901
- background-image: linear-gradient(to bottom, #eeeeee, white);
1902
- }
1903
- .switch-input:checked ~ .switch-handle {
1904
- left: @switch_width - @switch_height + 2px + 2px;
1905
- box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
1906
- }
1907
-
1908
- .switch-green > .switch-input:checked ~ .switch-label {
1909
- background: #4fb845;
1910
- }
1911
- }
1912
-
1913
- #panels-view-as-page {
1914
- display: inline-block;
1915
- margin-left: 50px;
1916
- }
1917
- }
1918
-
1919
- .siteorigin-page-builder-widget {
1920
- .siteorigin-panels-display-builder {
1921
- display: inline-block !important;
1922
- }
1923
-
1924
- .siteorigin-panels-no-builder {
1925
- display: none !important;
1926
- }
1927
- }