File: //home/vitanhod/barnabites.es/wp-content/themes/rishi/customizer/src/scss/_builder.scss
$rishiPrimaryColor: #216BDB;
$borderRadius: 8px;
$backgroundColor: #E5F0FF;
.rishi-builder-panel {
width: 100%;
height: 302px;
background: #f00;
position: absolute;
z-index: 3;
left: 0;
bottom: -302px;
box-sizing: border-box;
transition: left .2s ease, bottom .2s ease, opacity .2s ease;
-webkit-font-smoothing: antialiased;
}
.wp-full-overlay {
&.rishi-builder-open {
.rishi-builder-panel {
bottom: 0;
}
.wp-full-overlay-main {
height: initial;
bottom: 350px;
}
}
}
.rishi-layout-composer,
.rishi-builder-panel {
bottom: 0;
}
.rishi-layout-composer {
position: absolute;
left: 0;
width: 100%;
background: #F1F5F9;
z-index: 1;
transition: all 0.2s;
overflow: auto;
}
.outer-section-open .wp-full-overlay.expanded {
.rishi-layout-composer {
left: 300px;
}
}
.rishi-empty-row-item {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
.hr-line {
content: "" !important;
height: 0;
width: 100%;
border-top: 1px solid #E0E3E7;
flex: 1;
}
}
button.rishi-add-row-btn {
display: inline-block;
padding: 10px 16px;
border: 1px solid $rishiPrimaryColor;
border-radius: $borderRadius;
background-color: #ffffff;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: $rishiPrimaryColor;
transition: .2s ease;
&:hover {
background-color: $rishiPrimaryColor;
color: #ffffff;
}
}
.rishi-builder-items {
display: flex;
align-items: center;
position: relative;
gap: 8px;
.components-button {
border: none;
font-size: 0;
padding: 0;
display: block;
width: 41px;
flex: 0 0 41px;
height: 41px;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9999 13.9959H12.9999V19.9959H10.9999V13.9959H4.99988V11.9959H10.9999V5.99586H12.9999V11.9959H18.9999V13.9959Z' fill='%23216BDB'/%3E%3C/svg%3E%0A");
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center;
border-radius: $borderRadius;
box-shadow: none;
margin: 0 auto;
}
div[data-id="__inserter__"] {
margin: 0 auto;
}
.rishi-builder-item+div[data-id="__inserter__"] {
margin-left: 0;
margin-right: 0;
}
&[data-id*="start-middle"] {
.rishi-builder-item+div[data-id="__inserter__"] {
margin-right: 0;
}
}
&.flex-row-reverse {
>.rishi-builder-item+div[data-id="__inserter__"] {
margin-right: 0;
}
}
&.justify-center {
>.rishi-builder-item+div[data-id="__inserter__"] {
margin: 0;
}
}
}
.rishi-builder-items+.rishi-builder-items {
border-left: 1px solid rgba(0, 0, 0, .1);
}
.flex-row-reverse {
>.rishi-builder-items+.rishi-builder-items {
border-left: 0;
border-right: 1px solid rgba(0, 0, 0, .1);
}
}
.rishi-builder-item {
position: relative;
cursor: grab;
.rishi-builder-item-content {
width: 100%;
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 600;
line-height: 1.42;
padding: 10px;
background-color: $backgroundColor;
color: $rishiPrimaryColor;
border-radius: $borderRadius;
gap: 8px;
transition: .2s ease;
position: relative;
white-space: nowrap;
&::after {
content: "";
width: 100%;
height: 100%;
background-color: $backgroundColor;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
z-index: 0;
border-radius: $borderRadius;
visibility: hidden;
}
.rishi-btn-remove {
margin-left: auto;
}
}
&.sortable-chosen {
cursor: grabbing;
}
&.sortable-drag {
transform: rotate(-10deg);
opacity: 1 !important;
z-index: 99999999999 !important;
}
&.sortable-drag,
&:hover,
&:active {
.rishi-builder-item-content {
background-color: $rishiPrimaryColor;
color: #ffffff;
}
}
&.sortable-ghost {
.rishi-builder-item-content {
&::after {
z-index: 1;
opacity: 1;
visibility: visible;
}
}
}
.rishi-visibility {
svg {
width: 18px;
height: 18px;
}
}
&.is-hidden {
.rishi-builder-item-content {
background-color: #F2F7FE;
color: #CED0D3;
button {
&:hover {
color: $rishiPrimaryColor;
}
}
}
}
}
#customize-theme-controls {
.rishi-builder-items {
gap: 0;
// margin: -8px;
}
}
.rishi-builder__edge-panel {
.rishi-builder-items {
flex-direction: column;
flex-wrap: nowrap;
overflow-y: auto;
.rishi-builder-item {
width: 100% !important;
}
}
}
.rishi-builder-sidebar-item.rishi-builder-item {
.rishi-builder-item-content {
height: 120px;
border: 1px solid #DCE4EF;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #F6F8FB;
padding: 16px;
color: #2B3034;
&::after {
background-color: #E8ECF2;
}
}
&.sortable-drag {
transform: none;
.rishi-builder-item-content {
border-style: dashed;
border-color: $rishiPrimaryColor;
border-width: 2px;
&::after {
content: "";
width: 24px;
height: 24px;
background-color: #F6F8FB;
background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_138_1327' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='25'%3E%3Crect x='0.832764' y='0.0737915' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_138_1327)'%3E%3Cpath d='M11.8328 17.0738H13.8328V13.0738H17.8328V11.0738H13.8328V7.07379H11.8328V11.0738H7.83276V13.0738H11.8328V17.0738ZM12.8328 22.0738C11.4494 22.0738 10.1494 21.8113 8.93276 21.2863C7.7161 20.7613 6.65776 20.0488 5.75776 19.1488C4.85776 18.2488 4.14526 17.1905 3.62026 15.9738C3.09526 14.7571 2.83276 13.4571 2.83276 12.0738C2.83276 10.6905 3.09526 9.39046 3.62026 8.17379C4.14526 6.95712 4.85776 5.89879 5.75776 4.99879C6.65776 4.09879 7.7161 3.38629 8.93276 2.86129C10.1494 2.33629 11.4494 2.07379 12.8328 2.07379C14.2161 2.07379 15.5161 2.33629 16.7328 2.86129C17.9494 3.38629 19.0078 4.09879 19.9078 4.99879C20.8078 5.89879 21.5203 6.95712 22.0453 8.17379C22.5703 9.39046 22.8328 10.6905 22.8328 12.0738C22.8328 13.4571 22.5703 14.7571 22.0453 15.9738C21.5203 17.1905 20.8078 18.2488 19.9078 19.1488C19.0078 20.0488 17.9494 20.7613 16.7328 21.2863C15.5161 21.8113 14.2161 22.0738 12.8328 22.0738Z' fill='%23216BDB'/%3E%3C/g%3E%3C/svg%3E%0A");
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
top: 50%;
right: 0;
left: auto;
transform: translate(50%, -50%);
visibility: visible;
opacity: 1;
z-index: 999999999;
}
}
}
&.rishi-item-in-builder {
cursor: pointer;
.rishi-builder-item-content {
border-style: dashed;
border-width: 2px;
border-color: $rishiPrimaryColor;
cursor: pointer;
background-color: #ffffff;
color: $rishiPrimaryColor;
&::after {
content: none;
}
}
&:hover {
.rishi-builder-item-content {
background-color: $backgroundColor;
}
}
&.sortable-drag {
display: none;
}
}
}
.rishi-builder-item {
.rishi-builder-item-content {
&::before {
display: block;
content: "";
background-color: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
width: 24px;
height: 24px;
}
}
&.in-builder {
.rishi-builder-item-content {
&::before {
content: none;
}
}
}
}
[data-tippy-root] {
.rishi-builder-popover {
width: 350px;
border-radius: 8px;
border-color: var(--cw__secondary-color);
padding: 24px;
height: 360px;
overflow-y: auto;
overflow-x: hidden;
.tippy-arrow {
display: none;
}
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: #EAECF0;
border-radius: 8px;
}
.rishi-popover-search {
transform: translateY(-24px);
margin: 0 -24px 8px;
padding: 24px 24px 0;
background-color: #ffffff;
position: sticky;
top: 0;
z-index: 1;
input {
border-radius: 8px;
padding: 10px 14px 10px 42px;
font-size: 16px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 14px center;
}
}
.rishi-builder-items {
gap: 0;
row-gap: 32px;
align-items: flex-start;
flex-wrap: wrap;
margin: 0 -16px;
}
.rishi-builder-item {
width: 33.33%;
cursor: default;
padding: 0 16px;
.rishi-builder-item-content {
font-weight: 500;
flex-direction: column;
align-items: center;
background: none;
text-align: center;
color: #2B3034;
padding: 0;
cursor: pointer;
white-space: normal;
&::before {
width: 24px;
height: 24px;
color: #667085;
}
&:hover {
color: var(--cw__secondary-color);
&::before {
color: inherit;
}
}
&[data-disabled=true] {
opacity: .3;
pointer-events: none;
}
}
}
}
}
.rishi-builder__row-inner {
width: 100%;
border: 1px solid $rishiPrimaryColor;
border-radius: $borderRadius;
background-color: #ffffff;
transition: all .2s ease;
>li {
padding: 10px;
margin: 0;
min-height: 60px;
border-right: 1px solid $rishiPrimaryColor;
&:first-child {
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
&:last-child {
border-right: 0;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
}
}
.rishi-builder-items {
// flex-wrap: nowrap;
.rishi-builder-item {
width: unset;
}
}
}
.rishi-builder__row {
position: relative;
margin: 0 0 40px !important;
&:last-child {
margin: 0 !important;
}
.rishi-builder__row-inner {
padding-left: 32px;
transition: all .2s ease;
}
.__row-label {
position: absolute;
left: 0;
bottom: 100%;
padding: 6px 16px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
background-color: $rishiPrimaryColor;
color: #ffffff;
border-radius: $borderRadius $borderRadius 0 0;
transform: translateX(-5px);
}
.__row-actions {
width: 32px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: $rishiPrimaryColor;
color: #ffffff;
display: flex;
flex-direction: column;
border-radius: 0 0 0 $borderRadius;
transform: translateX(-5px);
z-index: 1;
path {
fill: currentColor;
}
button {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #1750A5;
&:last-child {
border-bottom: none;
}
svg{
width: 16px;
height: 16px;
}
}
}
.components-popover {
.components-popover__content {
padding: 24px;
max-height: 359px !important;
width: 350px;
overflow-y: auto;
border-radius: $borderRadius;
border: 1px solid $rishiPrimaryColor;
box-shadow: 0px 4px 6px -2px #10182829, 0px 12px 16px -4px #1018283D;
ul {
display: flex;
flex-wrap: wrap;
li {
padding: 16px;
text-align: center;
width: 33.333%;
font-size: 14px;
font-weight: 500;
color: #2B3034;
&:hover {
color: $rishiPrimaryColor;
}
}
}
}
}
&.is-hidden{
.__row-actions{
.button-setting{
opacity: .5;
cursor: not-allowed;
}
}
.rishi-builder__row-inner{
opacity: .3;
pointer-events: none;
border-color: #cccccc;
> li{
border-color: #cccccc;
}
}
}
}
.customize-section-title,
.customize-panel-actions {
position: sticky !important;
top: 0 !important;
background-color: #ffffff;
z-index: 2;
width: unset !important;
}
.customizer-panel-content {
clear: both;
}