diff --git a/components/03_Organisms/imageGrid/_imageGrid.scss b/components/03_Organisms/imageGrid/_imageGrid.scss index 95f5a58..ebf2a32 100644 --- a/components/03_Organisms/imageGrid/_imageGrid.scss +++ b/components/03_Organisms/imageGrid/_imageGrid.scss @@ -6,6 +6,26 @@ &__Item { position: relative; @include RV-ContentCrop; + + &--add { + .LP-Link { + width: 100%; + height: 100%; + position: relative; + display: block; + background: $-almost-white; + + .LP-Icon { + width: $-spacing-large; + height: $-spacing-large; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + } } &__DeleteItem { @@ -20,17 +40,15 @@ height: $-spacing-large; width: $-spacing-large; - line-height: $-spacing-large; - vertical-align: middle; - - .LP-Icon{ - height: $-spacing-medium; - width: $-spacing-medium; + .LP-Link .LP-Icon{ + height: #{$-spacing-small * 2}; + width: #{$-spacing-small * 2}; position:relative; - top: calc(50% - 18.75px); + left: #{($-spacing-large - $-spacing-small) / 3}; + top: #{($-spacing-large - $-spacing-small) / 3}; } } - &__Item:hover &__DeleteItem { + &__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover { visibility: visible; } } \ No newline at end of file diff --git a/components/03_Organisms/imageGrid/imageGrid.hbs b/components/03_Organisms/imageGrid/imageGrid.hbs index 81702a9..8b3301e 100644 --- a/components/03_Organisms/imageGrid/imageGrid.hbs +++ b/components/03_Organisms/imageGrid/imageGrid.hbs @@ -3,8 +3,20 @@
\ No newline at end of file diff --git a/public/main.css b/public/main.css index 1cd7d75..f6a7e64 100644 --- a/public/main.css +++ b/public/main.css @@ -1588,23 +1588,56 @@ body { border: none; } .LP-ImageGrid__Container { gap: 10px; } - .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * { - overflow: hidden; - word-break: break-all; } - .LP-ImageGrid .LP-ImageGrid__Item img { - width: 100%; - height: 100%; - object-fit: cover; } - .LP-ImageGrid .LP-ImageGrid__Item--left img { - object-position: left; } - .LP-ImageGrid .LP-ImageGrid__Item--center img { - object-position: center; } - .LP-ImageGrid .LP-ImageGrid__Item--top img { - object-position: top; } - .LP-ImageGrid .LP-ImageGrid__Item--bottom img { - object-position: botom; } - .LP-ImageGrid .LP-ImageGrid__Item--center img { - object-position: center; } + .LP-ImageGrid__Item { + position: relative; } + .LP-ImageGrid__Item, .LP-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + .LP-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .LP-ImageGrid__Item--left img { + object-position: left; } + .LP-ImageGrid__Item--center img { + object-position: center; } + .LP-ImageGrid__Item--top img { + object-position: top; } + .LP-ImageGrid__Item--bottom img { + object-position: botom; } + .LP-ImageGrid__Item--center img { + 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 { margin: 0 auto;