Skip to content

Commit

Permalink
Merge branch 'release/2.17.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Misplon
Misplon committed Aug 28, 2022
2 parents 764003b + 10d31ed commit 7a97e47
Show file tree
Hide file tree
Showing 7 changed files with 427 additions and 155 deletions.
10 changes: 5 additions & 5 deletions compat/js/siteorigin-panels-layout-block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,8 +428,8 @@ wp.blocks.registerBlockType('siteorigin-panels/layout-block', {
})(jQuery); // Detect preview mode changes, and trigger resize.


jQuery(document).on('click', '.block-editor-post-preview__button-resize', function (e) {
if (!jQuery(this).hasClass('has-icon')) {
jQuery(window).trigger('resize');
}
});
jQuery( document ).on( 'click', '.block-editor-post-preview__button-resize', function( e ) {
if ( ! jQuery( this ).hasClass( 'has-icon' ) ) {
jQuery( window ).trigger( 'resize' );
}
} );
286 changes: 160 additions & 126 deletions css/admin.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -786,6 +786,126 @@

}

/* Toggle Switch used on the custom home page interface and Toggle Style Admin fields. */
.so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field-toggle,
.block-editor-page .so-visual-styles .style-section-fields .style-field-wrapper .style-field-toggle,
#panels-home-page {
.so-toggle-switch {
@switch_height: 24px;
@switch_width: 68px;
@switch_padding: 3px;

background-color: #fff;
background-image: linear-gradient(to bottom, #eee, #fff 25px);
border-radius: @switch_height;
box-shadow: inset 0 -1px #fff, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
display: inline-block;
height: @switch_height;
margin: 0 10px 0 0;
padding: @switch_padding;
position: relative;
vertical-align: top;
width: @switch_width;

.so-toggle-switch-input {
left: 0;
opacity: 0;
position: absolute;
top: 0;
}

.so-toggle-switch-label {
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
display: block;
font-size: @switch_height/2;
height: inherit;
position: relative;
text-transform: uppercase;
transition-property: opacity background;
transition: 0.15s ease-out;
}

.so-toggle-switch-label:before,
.so-toggle-switch-label:after {
line-height: 1;
margin-top: -.5em;
position: absolute;
top: 50%;
transition: inherit;
}

.so-toggle-switch-label:before {
color: #aaa;
content: attr(data-off);
right: 11px;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.so-toggle-switch-label:after {
color: #fff;
content: attr(data-on);
left: @switch_height/2 + 1px;
opacity: 0;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}

.so-toggle-switch-input:checked ~ .so-toggle-switch-label {
background: #47a8d8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.so-toggle-switch-input:checked ~ .so-toggle-switch-label:before {
opacity: 0;
}

.so-toggle-switch-input:checked ~ .so-toggle-switch-label:after {
opacity: 1;
}

.so-toggle-switch-handle {
background-image: linear-gradient(to bottom, #fff 40%, #f0f0f0);
background: #fff;
border-radius: @switch_height/2;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
height: @switch_height - 2px;
left: @switch_padding + 1px;
position: absolute;
top: 4px;
transition: left 0.15s ease-out;
width: @switch_height - 2px;
}

.so-toggle-switch-handle:before {
background-image: -moz-linear-gradient(top, #eee, #fff);
background-image: -o-linear-gradient(top, #eee, #fff);
background-image: -webkit-linear-gradient(top, #eee, #fff);
background-image: linear-gradient(to bottom, #eee, #fff);
background: #f9f9f9;
border-radius: (@switch_height/2 + 2px) / 2;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
content: '';
height: @switch_height/2 + 2px;
left: 50%;
margin: -7px 0 0 -7px;
position: absolute;
top: 50%;
width: @switch_height/2 + 2px;
}

.so-toggle-switch-input:checked ~ .so-toggle-switch-handle {
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
left: @switch_width - @switch_height + 2px + 2px;
}

.so-toggle-switch-green > .so-toggle-switch-input:checked ~ .so-toggle-switch-label {
background: #4fb845;
}
}
}

.so-panels-dialog,
.block-editor-page {

Expand Down Expand Up @@ -1953,6 +2073,45 @@
font-size: 12px;
}
}

.style-field-toggle {
.so-toggle-switch {
padding: 0;
height: 18px;
width: 51px;

.so-toggle-switch-handle {
height: 16.5px;
left: 1px;
top: 0.5px;
width: 16.5px;
}

.so-toggle-switch-input:checked ~ .so-toggle-switch-handle {
left: 33.8px;
}

.so-toggle-switch-label {
&::before,
&::after {
font-size: 9px;
margin-top: -4px;
}

&::before {
right: 9px;
}

&::after {
left: 9px;
}
}
}

.so-toggle-fields {
margin-top: 20px;
}
}
}
}

Expand Down Expand Up @@ -2449,133 +2608,8 @@
/* For the custom home page interface */

#panels-home-page {

/* The Switch - © 2013 Thibaut Courouble - MIT License */

.switch {
@switch_height: 24px;
@switch_width: 68px;
@switch_padding: 3px;

margin: 0 10px 0 0;
.so-toggle-switch {
float: left;
position: relative;
display: inline-block;
vertical-align: top;
width: @switch_width;
height: @switch_height;
padding: @switch_padding;
background-color: #fff;
border-radius: @switch_height;
box-shadow: inset 0 -1px #fff, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
background-image: -webkit-linear-gradient(top, #eee, #fff 25px);
background-image: -moz-linear-gradient(top, #eee, #fff 25px);
background-image: -o-linear-gradient(top, #eee, #fff 25px);
background-image: linear-gradient(to bottom, #eee, #fff 25px);

.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.switch-label {
position: relative;
display: block;
height: inherit;
font-size: @switch_height/2;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: @switch_height/2 + 1px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #47a8d8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}

.switch-handle {
position: absolute;
top: 4px;
left: @switch_padding + 1px;
width: @switch_height - 2px;
height: @switch_height - 2px;
background: #fff;
border-radius: @switch_height/2;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, #fff 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, #fff 40%, #f0f0f0);
background-image: -o-linear-gradient(top, #fff 40%, #f0f0f0);
background-image: linear-gradient(to bottom, #fff 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
width: @switch_height/2 + 2px;
height: @switch_height/2 + 2px;
background: #f9f9f9;
border-radius: (@switch_height/2 + 2px) / 2;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eee, #fff);
background-image: -moz-linear-gradient(top, #eee, #fff);
background-image: -o-linear-gradient(top, #eee, #fff);
background-image: linear-gradient(to bottom, #eee, #fff);
}
.switch-input:checked ~ .switch-handle {
left: @switch_width - @switch_height + 2px + 2px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-green > .switch-input:checked ~ .switch-label {
background: #4fb845;
}
}

#panels-view-as-page {
Expand Down
Loading

0 comments on commit 7a97e47

Please sign in to comment.