app/assets/stylesheets/pages_core/admin/components/image_grid.css
.image-grid {
--image-padding: 7px;
margin-bottom: 40px;
display: flex;
@media (--mobile) {
flex-direction: column;
}
& input[type="file"] {
display: none;
}
& h3 {
margin: 10px var(--image-padding) 10px var(--image-padding);
border-bottom: 1px solid var(--border-color);
padding-bottom: 5px;
}
& img {
display: block;
width: 100%;
height: auto;
min-height: 1px; /* Hack for IE11 */
}
& .grid-image {
padding: var(--image-padding);
&.placeholder {
opacity: 0.25;
}
&.uploading {
user-select: none;
opacity: 0.5;
overflow: hidden;
& .temp-image {
position: relative;
cursor: pointer;
overflow: hidden;
background: #000;
}
& img {
filter: blur(20px);
opacity: 0.75;
}
& span {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-radius: 20px;
margin-top: -20px;
margin-left: -20px;
border: 5px solid rgba(255, 255, 255, 0.9);
border-right-color: transparent;
text-indent: -9000px;
overflow: hidden;
animation: rotate-spinner 0.8s infinite linear;
}
}
& .file-placeholder,
& .placeholder {
position: relative;
vertical-align: middle;
background: var(--background-disabled-color);
border: 2px dashed var(--border-color);
width: 100%;
padding-bottom: 100%;
& span {
color: var(--text-light-color);
text-shadow: none;
}
}
& .actions {
margin-top: 7px;
display: flex;
gap: 4px;
flex-direction: row;
visibility: hidden;
@media (--mobile) {
visibility: visible;
}
& button {
flex: 1;
}
}
&:hover {
& .actions {
visibility: visible;
}
}
}
& .primary-image {
width: 33.33%;
@media (--mobile) {
width: 100%;
}
& .drop-target {
position: relative;
width: 100%;
padding-bottom: 66.67%;
text-align: center;
line-height: 1.6;
& > .upload-button {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: var(--image-padding);
bottom: var(--image-padding);
left: var(--image-padding);
right: var(--image-padding);
min-height: 150px;
background: var(--background-disabled-color);
}
}
}
& .grid {
width: 100%;
& .images {
position: relative;
display: flex;
flex-wrap: wrap;
& .grid-image {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 16.66%;
@media (--narrow) {
width: 50%;
}
@media (--mobile) {
width: 50%;
}
}
}
& .editable-image {
padding-bottom: 75%;
& img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
}
}
& .drop-target {
margin: 10px var(--image-padding);
padding-top: 10px;
& button {
margin: 0px 7px;
}
}
}
&.with-primary-image {
& .grid {
width: 66.67%;
@media (--mobile) {
width: 100%;
}
}
& .images .grid-image {
width: 25%;
@media (--narrow) {
width: 50%;
}
@media (--mobile) {
width: 50%;
}
}
}
& .drag-image {
position: absolute;
width: 150px;
z-index: 100;
}
}
@keyframes rotate-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}