woocommerce/packages/js/components/src/image-gallery/image-gallery-item.scss

49 lines
788 B
SCSS
Raw Normal View History

.woocommerce-image-gallery__item {
height: 146px;
width: 146px;
position: relative;
Images Product management MVP 1.0 (#34769) * Add image section # Conflicts: # plugins/woocommerce-admin/client/products/add-product-page.tsx * Add `keepSpaceWhenDragging` to sortable # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/sortable/sortable.tsx * Export ImageGalleryItem * Add props to `image-gallery` # Conflicts: # packages/js/components/src/image-gallery/image-gallery-item.tsx # packages/js/components/src/image-gallery/image-gallery.tsx * Changed `media-uploader` label * Add changelogs * Fix image-gallery and sortable components # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx # packages/js/components/src/sortable/sortable.tsx * Set gallery min-height * Add onOrderChange * Show images section edit-product # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx * Fix styles * Fix styles * Fix image alt * Fix TS any * Add prop `onDragOver` # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx * Fix styles * Fix padding * Fix image area min-height * Fix subtitle copy * Fix image margin * Change `draggedImageId` * Fix `setDraggedImageId` reset * Rename `isRemoveZoneVisible` * Add `CardBody` and remove redundant `setValue` * Fix card styles * Remove `getUniqueImages` * Use url as a key when there is no image id * Fix `orderedImages` * Add hover to gallery images * Fix gallery arrows and set cover problems * Altering blur handler to prevent toolbar closure on media modal * Fix toolbar drag and drop * Add replace fn * Restoring modal class for blur function * Fix storybook * Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox * Adding expected event object to drag callbacks * Fix image size * Fix lint * Another fix lint * Update plugins/woocommerce-admin/client/products/sections/images-section.tsx Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Fix `draggedImageId` default value * Fix toolbar icon style * Rename consts * Update pnpm-lock.yaml Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Joel <dygerati@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-10-12 18:16:22 +00:00
&.is-toolbar-visible {
img {
border: 2px solid #007cba;
}
}
Images Product management MVP 1.0 (#34769) * Add image section # Conflicts: # plugins/woocommerce-admin/client/products/add-product-page.tsx * Add `keepSpaceWhenDragging` to sortable # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/sortable/sortable.tsx * Export ImageGalleryItem * Add props to `image-gallery` # Conflicts: # packages/js/components/src/image-gallery/image-gallery-item.tsx # packages/js/components/src/image-gallery/image-gallery.tsx * Changed `media-uploader` label * Add changelogs * Fix image-gallery and sortable components # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx # packages/js/components/src/sortable/sortable.tsx * Set gallery min-height * Add onOrderChange * Show images section edit-product # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx * Fix styles * Fix styles * Fix image alt * Fix TS any * Add prop `onDragOver` # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx * Fix styles * Fix padding * Fix image area min-height * Fix subtitle copy * Fix image margin * Change `draggedImageId` * Fix `setDraggedImageId` reset * Rename `isRemoveZoneVisible` * Add `CardBody` and remove redundant `setValue` * Fix card styles * Remove `getUniqueImages` * Use url as a key when there is no image id * Fix `orderedImages` * Add hover to gallery images * Fix gallery arrows and set cover problems * Altering blur handler to prevent toolbar closure on media modal * Fix toolbar drag and drop * Add replace fn * Restoring modal class for blur function * Fix storybook * Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox * Adding expected event object to drag callbacks * Fix image size * Fix lint * Another fix lint * Update plugins/woocommerce-admin/client/products/sections/images-section.tsx Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Fix `draggedImageId` default value * Fix toolbar icon style * Rename consts * Update pnpm-lock.yaml Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Joel <dygerati@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-10-12 18:16:22 +00:00
&:not(.is-toolbar-visible){
img:hover {
border: 1.5px solid #007cba;
}
}
img {
border: 1px solid $gray-200;
border-radius: 3px;
box-sizing: border-box;
Images Product management MVP 1.0 (#34769) * Add image section # Conflicts: # plugins/woocommerce-admin/client/products/add-product-page.tsx * Add `keepSpaceWhenDragging` to sortable # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/sortable/sortable.tsx * Export ImageGalleryItem * Add props to `image-gallery` # Conflicts: # packages/js/components/src/image-gallery/image-gallery-item.tsx # packages/js/components/src/image-gallery/image-gallery.tsx * Changed `media-uploader` label * Add changelogs * Fix image-gallery and sortable components # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx # packages/js/components/src/sortable/sortable.tsx * Set gallery min-height * Add onOrderChange * Show images section edit-product # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx * Fix styles * Fix styles * Fix image alt * Fix TS any * Add prop `onDragOver` # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx * Fix styles * Fix padding * Fix image area min-height * Fix subtitle copy * Fix image margin * Change `draggedImageId` * Fix `setDraggedImageId` reset * Rename `isRemoveZoneVisible` * Add `CardBody` and remove redundant `setValue` * Fix card styles * Remove `getUniqueImages` * Use url as a key when there is no image id * Fix `orderedImages` * Add hover to gallery images * Fix gallery arrows and set cover problems * Altering blur handler to prevent toolbar closure on media modal * Fix toolbar drag and drop * Add replace fn * Restoring modal class for blur function * Fix storybook * Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox * Adding expected event object to drag callbacks * Fix image size * Fix lint * Another fix lint * Update plugins/woocommerce-admin/client/products/sections/images-section.tsx Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Fix `draggedImageId` default value * Fix toolbar icon style * Rename consts * Update pnpm-lock.yaml Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Joel <dygerati@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-10-12 18:16:22 +00:00
object-fit: cover;
width: 100%;
height: 146px;
}
.woocommerce-pill {
background: var(--wp-admin-theme-color);
border: 0;
color: $white;
padding-top: 2px;
padding-bottom: 2px;
position: absolute;
top: 10px;
left: 10px;
}
.components-toolbar-group {
flex-wrap: inherit;
border-right: 1px solid #ccc;
svg {
width: 24px;
Images Product management MVP 1.0 (#34769) * Add image section # Conflicts: # plugins/woocommerce-admin/client/products/add-product-page.tsx * Add `keepSpaceWhenDragging` to sortable # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/sortable/sortable.tsx * Export ImageGalleryItem * Add props to `image-gallery` # Conflicts: # packages/js/components/src/image-gallery/image-gallery-item.tsx # packages/js/components/src/image-gallery/image-gallery.tsx * Changed `media-uploader` label * Add changelogs * Fix image-gallery and sortable components # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx # packages/js/components/src/sortable/sortable.tsx * Set gallery min-height * Add onOrderChange * Show images section edit-product # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx * Fix styles * Fix styles * Fix image alt * Fix TS any * Add prop `onDragOver` # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx * Fix styles * Fix padding * Fix image area min-height * Fix subtitle copy * Fix image margin * Change `draggedImageId` * Fix `setDraggedImageId` reset * Rename `isRemoveZoneVisible` * Add `CardBody` and remove redundant `setValue` * Fix card styles * Remove `getUniqueImages` * Use url as a key when there is no image id * Fix `orderedImages` * Add hover to gallery images * Fix gallery arrows and set cover problems * Altering blur handler to prevent toolbar closure on media modal * Fix toolbar drag and drop * Add replace fn * Restoring modal class for blur function * Fix storybook * Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox * Adding expected event object to drag callbacks * Fix image size * Fix lint * Another fix lint * Update plugins/woocommerce-admin/client/products/sections/images-section.tsx Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Fix `draggedImageId` default value * Fix toolbar icon style * Rename consts * Update pnpm-lock.yaml Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Joel <dygerati@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-10-12 18:16:22 +00:00
margin-top: $gap-smallest;
}
}
}