[SHOPTIME-3549] FHD / Theme detail / Box 테두리가 일부 미노출되는 현상

원인 : border를 포함하는 box 의 크기가 소수점으로 계산되어 크기 계산
오류
대책 : 해당 패널의 1px, 2px 단위는 절대 px(apx)로 사용하도록 하고, 하위
component의 크기는 부모크기를 참조한 상대크기로 변경
This commit is contained in:
yonghyon
2024-10-07 10:07:18 +09:00
parent d3b942f710
commit 87eb5d2662
2 changed files with 12 additions and 12 deletions

View File

@@ -35,11 +35,11 @@
} }
.image { .image {
.size(@w: 558px, @h: 558px); .size(@w: calc(100% - 2apx), @h: calc(100% - 2apx));
object-fit: contain; object-fit: contain;
position: absolute; position: absolute;
left: 1px; left: 1apx;
top: 1px; top: 1apx;
border: 0; border: 0;
} }
@@ -155,11 +155,11 @@
.size(@w: 144px , @h: 144px); .size(@w: 144px , @h: 144px);
object-fit: contain; object-fit: contain;
margin: 0 0 6px 0; margin: 0 0 6px 0;
border: solid 1px #dadada; border: solid 1apx #dadada;
position: relative; position: relative;
.smallImage { .smallImage {
.size(@w: 142px , @h: 142px); .size(@w: 100%, @h: 100%);
object-fit: contain; object-fit: contain;
} }
@@ -172,7 +172,7 @@
&.selected { &.selected {
&:before { &:before {
.size(@w: 142px , @h: 142px); .size(@w: 100% , @h: 100%);
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;

View File

@@ -33,11 +33,11 @@
color: #fff; color: #fff;
} }
.image { .image {
.size(@w: 558px, @h: 558px); .size(@w: calc(100% - 2apx), @h: calc(100% - 2apx));
object-fit: contain; object-fit: contain;
position: absolute; position: absolute;
left: 1px; left: 1apx;
top: 1px; top: 1apx;
border: 0; border: 0;
} }
@@ -107,11 +107,11 @@
.image { .image {
.size(@w: 144px , @h: 144px); .size(@w: 144px , @h: 144px);
margin: 0 0 6px 0; margin: 0 0 6px 0;
border: solid 1px #dadada; border: solid 1apx #dadada;
position: relative; position: relative;
.smallImage { .smallImage {
.size(@w: 142px , @h: 142px); .size(@w: 100%, @h: 100%);
object-fit: contain; object-fit: contain;
} }
&:focus { &:focus {
@@ -123,7 +123,7 @@
&.selected { &.selected {
&:before { &:before {
.size(@w: 142px , @h: 142px); .size(@w: 100% , @h: 100%);
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;