optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[SEARCH] 검색 후 아이템 포커스 수정

Browse Source 
Detail Notes :
 
1. 검색 후 카드에 포커스시 border로 인해 박스가 작아지는 현상 수정
This commit is contained in:
jangheon Pyo
2024-02-14 10:37:57 +09:00
parent 9338829597
commit c62f6dd81f
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less
View File

@@ -4,9 +4,9 @@
.card { .card {
.size(@w: 561px, @h:150px); .size(@w: 561px, @h:150px);
background-color: @COLOR_LIGHT_SKYBLUE; background-color: @COLOR_LIGHT_SKYBLUE;
overflow: hidden;
border: 1px solid #ccc; border: 1px solid #ccc;
.flex(); .flex();
position: relative;
.imageBox { .imageBox {
.size(@w: 150px, @h: 100%); .size(@w: 150px, @h: 100%);
@@ -53,7 +53,8 @@
&:focus-within, &:focus-within,
&:focus { &:focus {
border: 4px solid @PRIMARY_COLOR_RED; &::after {
box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5); .focused(@boxShadow: 22px);
}
} }
} }

7
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeCard/SearchThemeCard.module.less
View File

@@ -5,11 +5,11 @@
.size(@w: 560px, @h: 140px); .size(@w: 560px, @h: 140px);
background-image: url("../../../../../../assets/searchpanel/bg_srch_curation.png"); background-image: url("../../../../../../assets/searchpanel/bg_srch_curation.png");
border: 2px solid #ccc; border: 2px solid #ccc;
overflow: hidden;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center top; background-position: center top;
padding: 25px 20px; padding: 25px 20px;
position: relative;
.title { .title {
color: @COLOR_GRAY06; color: @COLOR_GRAY06;
@@ -37,9 +37,10 @@
&:focus-within, &:focus-within,
&:focus { &:focus {
&::after {
.focused(@boxShadow: 22px);
}
background-position: center bottom; background-position: center bottom;
border: 4px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5);
.title { .title {
color: @COLOR_WHITE; color: @COLOR_WHITE;