.rsssl {
div[class^="rsssl-wizard-"] { // starts with selector
.rsssl-helplink {
color: var(--rsp-text-color);
}
.rsssl-grid-item {
position: relative; //to ensure the rsssl-lock stays within the div
margin-bottom: var(--rsp-grid-gap);
@media(max-width: $rsp-break-s) {
grid-column: span 4;
}
}
&.rsssl-column-2{
grid-column: span 2;
@media(max-width: $rsp-break-s) {
grid-column: span 4;
}
}
.rsssl-locked {
position: absolute;
z-index: 20;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
border-radius: var(--rsp-border-radius);
.rsssl-shield-overlay {
height:445px;
align-items: center;
justify-content: center;
display:flex;
}
.rsssl-locked-overlay {
z-index: 18;
position: absolute;
display: flex;
align-items: center;
gap: var(--rsp-spacing-s);
background-color: var(--rsp-white);
margin: var(--rsp-spacing-s);
border-radius: var(--rsp-border-radius-s);
box-shadow: var(--rsp-box-shadow);
bottom: 0;
width: calc(100% - (2 * var(--rsp-spacing-s)));
@include rsssl-block-padding;
.rsssl-open {
float: left;
margin-right: 12px;
}
.rsssl-progress-status {
float: left;
margin-right: 20px;
}
}
}
//.rsssl-grid-item-footer {
// justify-content: flex-end;
// padding: 0;
// display: flex;
// flex-wrap: wrap;
// align-items: center;
// gap: var(--rsp-grid-margin);
// width: 100%;
// min-height: 20px;
// box-sizing: border-box;
// align-self: flex-end;
//
// .rsssl-legend {
// display: flex;
// span {
// padding-left: 5px;
// }
// }
//
// &:empty {
// display: none;
// }
//}
& > div:nth-last-of-type(2) {
margin-bottom: 0;
border-radius: var(--rsp-border-radius) var(--rsp-border-radius) 0 0;
}
.rsssl-grid-item-footer-container {
position: sticky;
bottom: 0;
display: flex;
flex-direction: column;
z-index: 20; //should be above 10, for the text editor, which has 10.
.rsssl-grid-item-footer-buttons {
a.button, button {
box-shadow: none !important;
&:focus, &:active {
box-shadow: none !important;
}
}
}
}
.rsssl-grid-item-footer-scroll-progress-container {
display: flex;
flex-direction: column;
width: 100%;
height: 3px;
background-color: var(--rsp-grey-300);
overflow: hidden;
}
.rsssl-grid-item-footer-scroll-progress {
height: 100%;
background-color: var(--rsp-blue);
}
.rsssl-grid-item-footer {
background: var(--rsp-grey-100);
border-radius: 0 0 var(--rsp-border-radius) var(--rsp-border-radius);
border-top: 1px solid var(--rsp-grey-300);
box-sizing: border-box;
align-items: center;
@include rsssl-block-padding();
box-shadow: var(--rsp-box-shadow);
gap: var(--rsp-grid-margin);
width: 100%;
min-height: 20px;
justify-content: space-around;
// last item within the footer
& > div:last-of-type {
margin-left: auto;
}
&-buttons{
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--rsp-spacing-s);
}
.rsssl-legend {
display: flex;
span {
padding-left: 5px;
}
}
&-upsell-bar {
.button {
display:inline-block !important;
}
}
&:empty {
display: none;
}
}
}
}