CSS for adding and deleting images
This commit is contained in:
parent
5f304b91f3
commit
277cac323e
@ -1588,23 +1588,56 @@ body {
|
|||||||
border: none; }
|
border: none; }
|
||||||
.LP-ImageGrid__Container {
|
.LP-ImageGrid__Container {
|
||||||
gap: 10px; }
|
gap: 10px; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * {
|
.LP-ImageGrid__Item {
|
||||||
|
position: relative; }
|
||||||
|
.LP-ImageGrid__Item, .LP-ImageGrid__Item * {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
word-break: break-all; }
|
word-break: break-all; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item img {
|
.LP-ImageGrid__Item img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover; }
|
object-fit: cover; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item--left img {
|
.LP-ImageGrid__Item--left img {
|
||||||
object-position: left; }
|
object-position: left; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item--center img {
|
.LP-ImageGrid__Item--center img {
|
||||||
object-position: center; }
|
object-position: center; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item--top img {
|
.LP-ImageGrid__Item--top img {
|
||||||
object-position: top; }
|
object-position: top; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item--bottom img {
|
.LP-ImageGrid__Item--bottom img {
|
||||||
object-position: botom; }
|
object-position: botom; }
|
||||||
.LP-ImageGrid .LP-ImageGrid__Item--center img {
|
.LP-ImageGrid__Item--center img {
|
||||||
object-position: center; }
|
object-position: center; }
|
||||||
|
.LP-ImageGrid__Item--add .LP-Link {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
background: #f9f9f9; }
|
||||||
|
.LP-ImageGrid__Item--add .LP-Link .LP-Icon {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); }
|
||||||
|
.LP-ImageGrid__DeleteItem {
|
||||||
|
opacity: 0.7;
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background-color: #C09F80;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 35px;
|
||||||
|
width: 35px; }
|
||||||
|
.LP-ImageGrid__DeleteItem .LP-Link .LP-Icon {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
position: relative;
|
||||||
|
left: 8.33333px;
|
||||||
|
top: 8.33333px; }
|
||||||
|
.LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
|
||||||
|
visibility: visible; }
|
||||||
|
|
||||||
.LP-MainContainer {
|
.LP-MainContainer {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
Loading…
Reference in New Issue
Block a user