merchi_product_editor
Version:
A React component for editing product images using Fabric.js
66 lines (60 loc) • 1.3 kB
CSS
.bottom-preview-section {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
transform: none;
background-color: rgba(245, 245, 245, 0.95);
border-radius: 0 0 8px 8px;
padding: 10px 0;
z-index: 5;
display: flex;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
}
.preview-images {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
padding: 0 15px;
box-sizing: border-box;
}
.preview-image-box {
width: 60px;
height: 60px;
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #d0d0d0;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
overflow: hidden;
}
.preview-image-box-loading {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #d0d0d0;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
overflow: hidden;
}
.preview-image-box-oading-spinner {
width: 1.5rem;
height: 1.5rem;
border: 4px solid #e5e7eb;
border-top: 4px solid #374151;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.preview-image-box:hover {
transform: scale(1.05);
border-color: #aaa;
}