first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content .block-editor-block-list__layout:empty:after {
|
||||
min-height: 50px;
|
||||
content: 'Click on the block to enter text';
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-left: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-right: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content .block-editor-block-list__layout:empty:after {
|
||||
min-height: 50px;
|
||||
content: 'Click on the block to enter text';
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-right: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-right-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-left: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab.cnvs-block-tab-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) a {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-left: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-right: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab.cnvs-block-tab-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) a {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-right: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-right-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-left: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TabsBlockEdit from './edit.jsx';
|
||||
import TabsBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Tabs block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/tabs' === blockProps.name ) {
|
||||
return (
|
||||
<TabsBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Tabs block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/tabs' === blockData.name ) {
|
||||
blockData.save = TabsBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/tabs/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/tabs/registerData', registerData );
|
||||
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
PanelBody,
|
||||
RangeControl,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
InnerBlocks,
|
||||
RichText,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class TabsBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.state = {
|
||||
// fix for WP 5.2
|
||||
// styles control generates error
|
||||
showInnerBlocks: !! this.props.clientId,
|
||||
};
|
||||
|
||||
this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the template configuration for a given section layout.
|
||||
*
|
||||
* @return {Object[]} Layout configuration.
|
||||
*/
|
||||
getLayoutTemplate() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
tabsData,
|
||||
} = attributes;
|
||||
|
||||
const result = [];
|
||||
|
||||
console.log(tabsData);
|
||||
|
||||
for ( let k = 0; k < tabsData.length; k++ ) {
|
||||
result.push( [
|
||||
'canvas/tab',
|
||||
{},
|
||||
] );
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
tabActive,
|
||||
tabsData,
|
||||
tabsPosition,
|
||||
canvasClassName,
|
||||
} = this.props.attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-tabs',
|
||||
`cnvs-block-tabs-${ tabsData.length }`,
|
||||
'vertical' === tabsPosition ? `cnvs-block-tabs-${ tabsPosition }` : '',
|
||||
canvasClassName,
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<InspectorControls>
|
||||
<PanelBody>
|
||||
<RangeControl
|
||||
label={ __( 'Tabs' ) }
|
||||
value={ tabsData.length }
|
||||
min={ 1 }
|
||||
max={ 20 }
|
||||
onChange={ ( val ) => {
|
||||
const newTabsData = [];
|
||||
|
||||
for ( let k = 0; k < val; k += 1 ) {
|
||||
if ( tabsData[ k ] ) {
|
||||
newTabsData.push( tabsData[ k ] );
|
||||
} else {
|
||||
newTabsData.push( `Tab ${ k + 1 }` );
|
||||
}
|
||||
}
|
||||
|
||||
setAttributes( { tabsData: newTabsData } );
|
||||
} }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div className={ className }>
|
||||
<div className="cnvs-block-tabs-buttons">
|
||||
{
|
||||
tabsData.map( ( title, i ) => {
|
||||
const selected = tabActive === i;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
classnames(
|
||||
'cnvs-block-tabs-button',
|
||||
{
|
||||
'cnvs-block-tabs-button-active': selected,
|
||||
}
|
||||
)
|
||||
}
|
||||
key={ `tab_button_${ i }` }
|
||||
>
|
||||
<RichText
|
||||
tagName="span"
|
||||
placeholder={ __( 'Tab label' ) }
|
||||
value={ title }
|
||||
unstableOnFocus={ () => setAttributes( { tabActive: i } ) }
|
||||
onChange={ ( value ) => {
|
||||
if ( tabsData[ i ] ) {
|
||||
const newTabsData = tabsData.map( ( oldTabData, newIndex ) => {
|
||||
if ( i === newIndex ) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return oldTabData;
|
||||
} );
|
||||
|
||||
setAttributes( {
|
||||
tabsData: newTabsData,
|
||||
} );
|
||||
}
|
||||
} }
|
||||
keepPlaceholderOnFocus
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} )
|
||||
}
|
||||
</div>
|
||||
<div className="cnvs-block-tabs-content">
|
||||
{ this.state.showInnerBlocks ? (
|
||||
<InnerBlocks
|
||||
template={ this.getLayoutTemplate() }
|
||||
templateLock="all"
|
||||
allowedBlocks={ [ 'canvas/tab' ] }
|
||||
/>
|
||||
) : __( 'Tab content' ) }
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
{ `
|
||||
[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > div {
|
||||
display: none;
|
||||
}
|
||||
[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > :nth-child(${ tabActive + 1 }) {
|
||||
display: block;
|
||||
}
|
||||
` }
|
||||
</style>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Block Tabs
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
$( document ).ready( function() {
|
||||
|
||||
$( document ).on( 'click', '.cnvs-block-tabs .cnvs-block-tabs-button a', function( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
var $tab = $( this ).closest( '.cnvs-block-tabs-button' );
|
||||
var $tabs = $tab.closest( '.cnvs-block-tabs' );
|
||||
|
||||
$tab
|
||||
.addClass( 'cnvs-block-tabs-button-active' )
|
||||
.siblings()
|
||||
.removeClass( 'cnvs-block-tabs-button-active' );
|
||||
$tabs
|
||||
.find( '.cnvs-block-tabs-content' ).children( '.cnvs-block-tab:eq(' + $tab.index() + ')' )
|
||||
.addClass( 'cnvs-block-tab-active' )
|
||||
.siblings()
|
||||
.removeClass( 'cnvs-block-tab-active' );
|
||||
} );
|
||||
|
||||
$( '.cnvs-block-tabs .cnvs-block-tabs-button-active a' ).click();
|
||||
|
||||
} );
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
/**
|
||||
* Tabs block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$tabs_data = is_array( $attributes['tabsData'] ) ? $attributes['tabsData'] : array();
|
||||
|
||||
if ( $tabs_data && count( $tabs_data ) ) {
|
||||
$attributes['className'] .= ' cnvs-block-tabs-' . count( $tabs_data );
|
||||
}
|
||||
|
||||
if ( 'vertical' === $attributes['tabsPosition'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-tabs-' . $attributes['tabsPosition'];
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<div class="cnvs-block-tabs-buttons">
|
||||
<?php
|
||||
foreach ( $tabs_data as $i => $title ) {
|
||||
$tab_class = 'cnvs-block-tabs-button';
|
||||
|
||||
if ( $i === $attributes['tabActive'] ) {
|
||||
$tab_class .= ' cnvs-block-tabs-button-active';
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $tab_class ); ?>">
|
||||
<a href="#"><?php echo (string) $title; // XSS. ?></a>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="cnvs-block-tabs-content">
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class TabsBlockSave extends Component {
|
||||
render() {
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user