merchi_product_editor
Version:
A React component for editing product images using Fabric.js
74 lines (64 loc) • 1.14 kB
CSS
/* ImageZoomModal styles */
.zoom-modal {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.75);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
}
.zoom-modal-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
position: absolute;
top: 1rem;
right: 1rem;
color: white;
z-index: 50;
font-size: 1.5rem;
cursor: pointer;
}
.close-button:hover {
color: #d1d5db;
}
.nav-button-zoom {
position: absolute;
color: white;
z-index: 50;
font-size: 2rem;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.nav-button-zoom:hover {
color: #d1d5db;
background-color: rgba(0, 0, 0, 0.4);
}
.nav-button-zoom.left {
left: 1.5rem;
}
.nav-button-zoom.right {
right: 1.5rem;
}
.zoom-image-container {
position: relative;
width: 90vw;
height: 90vh;
}
.zoom-image {
width: 100%;
height: 100%;
object-fit: contain;
}