100 lines
2.0 KiB
SCSS
100 lines
2.0 KiB
SCSS
// Resizable frame styles
|
|
.edit-site-resizable-frame__inner.is-resizing::before {
|
|
content: "";
|
|
inset: 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.edit-site-resizable-frame__inner-content {
|
|
inset: 0;
|
|
position: absolute;
|
|
z-index: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.edit-site-resizable-frame__handle {
|
|
align-items: center;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: var(--wp-admin-theme-color);
|
|
cursor: ew-resize;
|
|
display: flex;
|
|
height: 64px;
|
|
justify-content: flex-end;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: calc(50% - 32px);
|
|
width: 4px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.edit-site-resizable-frame__handle::before {
|
|
content: "";
|
|
height: 100%;
|
|
left: 100%;
|
|
position: absolute;
|
|
width: 32px;
|
|
}
|
|
|
|
.edit-site-resizable-frame__handle::after {
|
|
content: "";
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 100%;
|
|
width: 32px;
|
|
}
|
|
|
|
.edit-site-resizable-frame__handle:focus-visible {
|
|
outline: 2px solid #0000;
|
|
}
|
|
|
|
.edit-site-resizable-frame__handle.is-resizing,
|
|
.edit-site-resizable-frame__handle:focus,
|
|
.edit-site-resizable-frame__handle:hover {
|
|
background-color: var(--wp-admin-theme-color);
|
|
}
|
|
|
|
.launch-store-site-preview-page__container {
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 3;
|
|
|
|
.launch-store-site__preview-site-iframe {
|
|
display: block;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20px;
|
|
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.04), 0 13px 15px 0 rgba(0, 0, 0, 0.03), 0 6px 10px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.25);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.launch-store-site-preview-site__loading-overlay {
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1;
|
|
background-color: #fff;
|
|
opacity: 0.9;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.launch-store-preview-layout__canvas {
|
|
align-items: center;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -32px; // Make room for the handle on the left side for maximum width
|
|
width: calc(100% + 32px);
|
|
padding: 16px 16px 16px 32px;
|
|
}
|
|
}
|