first commit
This commit is contained in:
CHIEFSOFT\ameye
+186
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-content {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
-webkit-column-gap: 40px;
|
||||
-moz-column-gap: 40px;
|
||||
column-gap: 40px;
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
-webkit-column-gap: 60px;
|
||||
-moz-column-gap: 60px;
|
||||
column-gap: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-content"],
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-sidebar"] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.cnvs-block-section-sidebar-position-right > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
}
|
||||
.cnvs-block-section-sidebar-position-right > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/section-content"] {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full {
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-inner {
|
||||
max-width: 100% !important;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .block-editor-block-list__layout {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .wp-block {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.wp-block[data-type="canvas/section-sidebar"] .canvas-component-custom-blocks,
|
||||
.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
bottom: 20px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
bottom: initial;
|
||||
margin-top: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > :last-child {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner,
|
||||
[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks,
|
||||
[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-section-with-background-color {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-notice .components-notice {
|
||||
text-align: right;
|
||||
}
|
||||
+186
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-content {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
-webkit-column-gap: 40px;
|
||||
-moz-column-gap: 40px;
|
||||
column-gap: 40px;
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
-webkit-column-gap: 60px;
|
||||
-moz-column-gap: 60px;
|
||||
column-gap: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-content"],
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="canvas/section-sidebar"] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-section > .cnvs-block-section-inner {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-section > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
||||
.cnvs-block-section-sidebar-position-right > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
}
|
||||
.cnvs-block-section-sidebar-position-left > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/section-content"] {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-inner {
|
||||
max-width: 100% !important;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .block-editor-block-list__layout {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .wp-block[data-type="canvas/section-content"] .wp-block {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wp-block[data-type="canvas/section-sidebar"] .canvas-component-custom-blocks,
|
||||
.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wp-block[data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
bottom: 20px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.cnvs-block-section-sidebar-sticky-bottom [data-type="canvas/section-sidebar"] .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
bottom: initial;
|
||||
margin-top: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > :last-child {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner,
|
||||
[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks,
|
||||
[data-canvas-section-sticky="top-last-block"] .cnvs-block-section-sidebar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-section-with-background-color {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-notice .components-notice {
|
||||
text-align: left;
|
||||
}
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer > .cnvs-block-section-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-with-background-color {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.cnvs-block-section-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-inner > *:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.cnvs-block-section-sidebar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 340px;
|
||||
flex: 0 0 340px;
|
||||
max-width: 340px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 360px;
|
||||
flex: 0 0 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar-position-left .cnvs-block-section-content {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.cnvs-block-section-sidebar-position-left .cnvs-block-section-sidebar {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.cnvs-block-section-sidebar-position-right .cnvs-block-section-sidebar {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1019.98px) {
|
||||
.cnvs-block-section-sidebar {
|
||||
max-width: 340px;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section-layout-align-full {
|
||||
width: 100vw !important;
|
||||
margin-left: initial;
|
||||
margin-right: calc(50% - 50vw);
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-outer {
|
||||
max-width: 100% !important;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-outer > .cnvs-block-section-inner {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .cnvs-block-section-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
bottom: 30px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
bottom: initial;
|
||||
margin-top: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > :last-child {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section > .cnvs-block-section-outer > .cnvs-block-section-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-with-background-color {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.cnvs-block-section-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-inner > *:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.cnvs-block-section-sidebar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 340px;
|
||||
flex: 0 0 340px;
|
||||
max-width: 340px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 360px;
|
||||
flex: 0 0 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-section-sidebar-position-left .cnvs-block-section-content {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.cnvs-block-section-sidebar-position-left .cnvs-block-section-sidebar {
|
||||
padding-right: 40px;
|
||||
}
|
||||
.cnvs-block-section-sidebar-position-right .cnvs-block-section-sidebar {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1019.98px) {
|
||||
.cnvs-block-section-sidebar {
|
||||
max-width: 340px;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.cnvs-block-section-layout-align-full {
|
||||
width: 100vw !important;
|
||||
margin-right: initial;
|
||||
margin-left: calc(50% - 50vw);
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-outer {
|
||||
max-width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full > .cnvs-block-section-outer > .cnvs-block-section-inner {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-layout-align-full .cnvs-block-section-content {
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
bottom: 30px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.cnvs-block-section-sidebar-sticky-bottom .cnvs-block-section-sidebar-inner {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
bottom: initial;
|
||||
margin-top: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-section-sidebar-sticky-top-last-block .cnvs-block-section-sidebar-inner > :last-child {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import SectionBlockEdit from './edit.jsx';
|
||||
import SectionBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Section block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender(edit, blockProps) {
|
||||
if ('canvas/section' === blockProps.name) {
|
||||
return (
|
||||
<SectionBlockEdit {...blockProps} />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Section block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData(blockData) {
|
||||
if ('canvas/section' === blockData.name) {
|
||||
blockData.save = SectionBlockSave;
|
||||
blockData.getEditWrapperProps = (attributes) => {
|
||||
const result = {
|
||||
'data-align': 'full',
|
||||
};
|
||||
|
||||
// additional attribute for last block sticky
|
||||
if (attributes.sidebarSticky) {
|
||||
result['data-canvas-section-sticky'] = attributes.sidebarStickyMethod;
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter('canvas.customBlock.editRender', 'canvas/section/editRender', editRender);
|
||||
addFilter('canvas.customBlock.registerData', 'canvas/section/registerData', registerData);
|
||||
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Icon from './icon';
|
||||
import ImageSelector from '../../../gutenberg/components/image-selector';
|
||||
import iconLayouts from './icon-layouts';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
BaseControl,
|
||||
PanelBody,
|
||||
Placeholder,
|
||||
RangeControl,
|
||||
SelectControl,
|
||||
ToggleControl,
|
||||
Notice,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const { BlockControls, BlockAlignmentToolbar } = wp.blockEditor;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class SectionBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
|
||||
this.getLayoutSelector = this.getLayoutSelector.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the template configuration for a given section layout.
|
||||
*
|
||||
* @return {Object[]} Layout configuration.
|
||||
*/
|
||||
getLayoutTemplate() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
layout,
|
||||
} = attributes;
|
||||
|
||||
const result = [];
|
||||
|
||||
switch (layout) {
|
||||
case 'full':
|
||||
result.push( [ 'canvas/section-content' ] );
|
||||
break;
|
||||
case 'with-sidebar':
|
||||
result.push( [ 'canvas/section-content' ] );
|
||||
result.push( [ 'canvas/section-sidebar' ] );
|
||||
break;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns layout selector.
|
||||
*
|
||||
* @return {JSX} ImageSelector.
|
||||
*/
|
||||
getLayoutSelector() {
|
||||
const {
|
||||
setAttributes,
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
layout,
|
||||
sidebarPosition,
|
||||
} = attributes;
|
||||
|
||||
let val = '';
|
||||
switch( layout ) {
|
||||
case 'full':
|
||||
val = 'full';
|
||||
break;
|
||||
case 'with-sidebar':
|
||||
val = `with-sidebar${ 'left' === sidebarPosition ? '-left' : '' }`;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<ImageSelector
|
||||
value={ val }
|
||||
onChange={ ( val ) => {
|
||||
// confirmation to remove sidebar.
|
||||
if ( val === 'full' && ( 'with-sidebar' === layout || 'with-sidebar-left' === layout ) ) {
|
||||
if ( ! window.confirm( __( 'When switching from a Sidebar layout to the Fullwidth layout all sidebar content will be removed. Are you sure you would like to switch the layout?' ) ) ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
switch( val ) {
|
||||
case 'full':
|
||||
setAttributes( {
|
||||
layout: 'full',
|
||||
} );
|
||||
break;
|
||||
case 'with-sidebar':
|
||||
setAttributes( {
|
||||
layout: 'with-sidebar',
|
||||
sidebarPosition: 'right',
|
||||
} );
|
||||
break;
|
||||
case 'with-sidebar-left':
|
||||
setAttributes( {
|
||||
layout: 'with-sidebar',
|
||||
sidebarPosition: 'left',
|
||||
} );
|
||||
break;
|
||||
}
|
||||
} }
|
||||
items={
|
||||
[
|
||||
{
|
||||
content: iconLayouts.full,
|
||||
value: 'full',
|
||||
label: __( 'Fullwidth' ),
|
||||
}, {
|
||||
content: iconLayouts['with-sidebar'],
|
||||
value: 'with-sidebar',
|
||||
label: __( 'Right Sidebar' ),
|
||||
}, {
|
||||
content: iconLayouts['with-sidebar-left'],
|
||||
value: 'with-sidebar-left',
|
||||
label: __( 'Left Sidebar' ),
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
attributes,
|
||||
location,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
layout,
|
||||
layoutAlign,
|
||||
contentWidth,
|
||||
sidebarSticky,
|
||||
sidebarStickyMethod,
|
||||
sidebarPosition,
|
||||
textColor,
|
||||
backgroundColor,
|
||||
canvasClassName,
|
||||
} = attributes;
|
||||
|
||||
const pageTemplate = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'template' );
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-section',
|
||||
{
|
||||
[ `cnvs-block-section-fullwidth` ]: 'full' === layout,
|
||||
[ `cnvs-block-section-layout-align-${ layoutAlign }` ]: 'full' === layout && layoutAlign,
|
||||
[ `cnvs-block-section-sidebar-sticky-${ sidebarStickyMethod }` ]: 'with-sidebar' === layout && sidebarSticky,
|
||||
[ `cnvs-block-section-sidebar-position-${ sidebarPosition }` ]: 'with-sidebar' === layout && sidebarPosition,
|
||||
'cnvs-block-section-with-text-color': textColor,
|
||||
'cnvs-block-section-with-background-color': backgroundColor,
|
||||
},
|
||||
canvasClassName,
|
||||
);
|
||||
|
||||
// Page template is Canvas Full Width.
|
||||
if ( 'template-canvas-fullwidth.php' !== pageTemplate ) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ Icon }
|
||||
label={ __( 'Section' ) }
|
||||
className="cnvs-block-section-notice"
|
||||
>
|
||||
<Notice status="warning" isDismissible={ false }>
|
||||
{ __( 'To use this block, please select the page template - "Canvas Full Width".' ) }
|
||||
</Notice>
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
// Block is not in root.
|
||||
if ( 'root' !== location ) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ Icon }
|
||||
label={ __( 'Section' ) }
|
||||
className="cnvs-block-section-notice"
|
||||
>
|
||||
<Notice status="warning" isDismissible={ false }>
|
||||
{ __( 'Sections are supported on root level only. You’ve added the section inside another block and layout will most likely break. Please add the section block as a parent block instead.' ) }
|
||||
</Notice>
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
// Layout selector.
|
||||
if ( ! layout ) {
|
||||
return (
|
||||
<Placeholder
|
||||
className="canvas-component-custom-layouts-placeholder"
|
||||
icon={ Icon }
|
||||
label={ __( 'Section' ) }
|
||||
instructions={ __( 'Select the section layout type.' ) }
|
||||
>
|
||||
{ this.getLayoutSelector() }
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
var sectionStyle = {};
|
||||
|
||||
if ( ! canvasBSLocalize.disableSectionResponsive ) {
|
||||
sectionStyle = {
|
||||
maxWidth: ( contentWidth || canvasBSLocalize.sectionResponsiveMaxWidth ) + 'px',
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{ 'full' === layout ? (
|
||||
<BlockControls key="controls">
|
||||
<BlockAlignmentToolbar
|
||||
value={ layoutAlign }
|
||||
onChange={ ( val ) => {
|
||||
setAttributes( { layoutAlign: val } );
|
||||
|
||||
window.dispatchEvent(new Event( 'resize' ) );
|
||||
}
|
||||
}
|
||||
controls={ [ 'full' ] }
|
||||
/>
|
||||
</BlockControls>
|
||||
) : '' }
|
||||
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __( 'Layout' ) }
|
||||
>
|
||||
<BaseControl>
|
||||
{ this.getLayoutSelector() }
|
||||
</BaseControl>
|
||||
|
||||
{ ( ! canvasBSLocalize.disableSectionResponsive ) && ( ( 'full' === layout && ! layoutAlign ) || ( 'full' !== layout ) ) ? (
|
||||
<Fragment>
|
||||
<RangeControl
|
||||
label={ __( 'Content Width (px.)' ) }
|
||||
value={ contentWidth || canvasBSLocalize.sectionResponsiveMaxWidth }
|
||||
min={ 320 }
|
||||
max={ 2560 }
|
||||
step={ 1 }
|
||||
onChange={ ( val ) => {
|
||||
setAttributes( { contentWidth: val } );
|
||||
|
||||
window.dispatchEvent(new Event( 'resize' ) );
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
) : '' }
|
||||
|
||||
{ 'with-sidebar' === layout ? (
|
||||
<Fragment>
|
||||
<ToggleControl
|
||||
label={ __( 'Sticky Sidebar' ) }
|
||||
checked={ !! sidebarSticky }
|
||||
onChange={ () => { setAttributes( { sidebarSticky: ! sidebarSticky } ) } }
|
||||
/>
|
||||
{ sidebarSticky ? (
|
||||
<SelectControl
|
||||
label={ __( 'Sticky Method' ) }
|
||||
value={ sidebarStickyMethod }
|
||||
onChange={ ( val ) => { setAttributes( { sidebarStickyMethod: val } ) } }
|
||||
options={ [
|
||||
{
|
||||
label: __( 'Top Edge' ),
|
||||
value: 'top',
|
||||
}, {
|
||||
label: __( 'Bottom Edge' ),
|
||||
value: 'bottom',
|
||||
}, {
|
||||
label: __( 'Top Edge of Last Block' ),
|
||||
value: 'top-last-block',
|
||||
}
|
||||
] }
|
||||
/>
|
||||
) : '' }
|
||||
</Fragment>
|
||||
) : '' }
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div className={ className }>
|
||||
<div className="cnvs-block-section-inner" style={ sectionStyle }>
|
||||
<InnerBlocks
|
||||
template={ this.getLayoutTemplate() }
|
||||
templateLock="all"
|
||||
allowedBlocks={ [ 'canvas/section-content', 'canvas/section-sidebar' ] }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Path, Rect, SVG } = wp.components;
|
||||
|
||||
export default {
|
||||
'full': (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" width="50" height="29" viewBox="0 0 50 29" fill="none">
|
||||
<Rect x="3" y="3" width="44" height="23" rx="2" stroke="black" strokeWidth="2" />
|
||||
</SVG>
|
||||
),
|
||||
'with-sidebar': (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" width="50" height="29" viewBox="0 0 50 29" fill="none">
|
||||
<Rect x="3" y="3" width="44" height="23" rx="2" stroke="black" strokeWidth="2" />
|
||||
<Path d="M33 3.5V26" stroke="black" strokeWidth="2" />
|
||||
</SVG>
|
||||
),
|
||||
'with-sidebar-left': (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" width="50" height="29" viewBox="0 0 50 29" fill="none">
|
||||
<Rect x="3" y="3" width="44" height="23" rx="2" stroke="black" strokeWidth="2"/>
|
||||
<Path d="M17 3V25.5" stroke="black" strokeWidth="2"/>
|
||||
</SVG>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Path, SVG } = wp.components;
|
||||
|
||||
export default (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<Path d="M3 13h8v2H3zm0 4h8v2H3zm0-8h8v2H3zm0-4h8v2H3zm16 2v10h-4V7h4m2-2h-8v14h8V5z" />
|
||||
</SVG>
|
||||
);
|
||||
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
/**
|
||||
* Section block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
if ( 'full' === $attributes['layout'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-section-fullwidth';
|
||||
}
|
||||
if ( 'full' === $attributes['layout'] && 'full' === $attributes['layoutAlign'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-section-layout-align-full';
|
||||
}
|
||||
if ( 'with-sidebar' === $attributes['layout'] && $attributes['sidebarSticky'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-section-sidebar-sticky-' . $attributes['sidebarStickyMethod'];
|
||||
}
|
||||
if ( 'with-sidebar' === $attributes['layout'] && $attributes['sidebarPosition'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-section-sidebar-position-' . $attributes['sidebarPosition'];
|
||||
}
|
||||
if ( $attributes['textColor'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-section-with-text-color';
|
||||
}
|
||||
if ( $attributes['backgroundColor'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-section-with-background-color';
|
||||
}
|
||||
|
||||
$section_style = null;
|
||||
|
||||
// Set section style.
|
||||
if ( ! get_theme_support( 'canvas-disable-section-responsive' ) && ( ( 'full' === $attributes['layout'] && ! $attributes['layoutAlign'] ) || ( 'full' !== $attributes['layout'] ) ) ) {
|
||||
if ( isset( $attributes['contentWidth'] ) && $attributes['contentWidth'] ) {
|
||||
$section_style = sprintf( 'max-width: %spx;', $attributes['contentWidth'] );
|
||||
} else {
|
||||
$section_style = sprintf( 'max-width: %spx;', apply_filters( 'canvas_section_responsive_max_width', 1200 ) );
|
||||
}
|
||||
}
|
||||
|
||||
// Check page template.
|
||||
$object_id = get_queried_object_id();
|
||||
|
||||
$page_template = apply_filters( 'canvas_block_section_page_template', get_page_template_slug( $object_id ) );
|
||||
|
||||
if ( 'template-canvas-fullwidth.php' === $page_template ) {
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<div class="cnvs-block-section-outer" style="<?php echo esc_attr( $section_style ); ?>">
|
||||
<div class="cnvs-block-section-inner">
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
} else {
|
||||
cnvs_alert_warning( esc_html__( 'To use this block, please select the page template - "Canvas Full Width".', 'canvas' ) );
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class SectionBlockSave extends Component {
|
||||
render() {
|
||||
const className = 'cnvs-block-section-content';
|
||||
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user