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

[Hot Picks] 스타일 수정

Browse Source 
Detail Notes :
1. 모든 스타일 .hotPicks 내부로 이동
This commit is contained in:
jangheon Pyo
2024-02-05 23:06:31 +09:00
parent 97303892a7
commit 8b58c65f51
1 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less
View File

@@ -7,95 +7,95 @@
> div { > div {
height: 100%; height: 100%;
} }
} h2 {
h2 {
position: absolute;
left: 0;
top: 0;
font-size: 40px;
color: #000;
z-index: 100;
}
.sectionWrap {
height: 100%;
position: relative;
> div {
height: 100%;
.flex();
> img {
width: auto;
max-width: 100%;
height: auto;
position: relative;
&:focus-within {
&::after {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid @PRIMARY_COLOR_RED;
position: absolute;
left: 0;
top: 0;
content: "";
}
}
}
}
> ul {
position: absolute; position: absolute;
display: flex; left: 0;
> li { top: 0;
position: relative; font-size: 40px;
&:focus-within { color: #000;
&::after { z-index: 100;
width: 100%; }
height: 100%;
box-sizing: border-box; .sectionWrap {
border: 4px solid @PRIMARY_COLOR_RED; height: 100%;
position: absolute; position: relative;
left: 0;
top: 0; > div {
content: ""; height: 100%;
.flex();
> img {
width: auto;
max-width: 100%;
height: auto;
position: relative;
&:focus-within {
&::after {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid @PRIMARY_COLOR_RED;
position: absolute;
left: 0;
top: 0;
content: "";
}
}
}
}
> ul {
position: absolute;
display: flex;
> li {
position: relative;
&:focus-within {
&::after {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid @PRIMARY_COLOR_RED;
position: absolute;
left: 0;
top: 0;
content: "";
}
}
}
}
}
.arrow {
width: 100%;
text-align: center;
position: absolute;
z-index: 2;
> button {
width: 120px;
height: 55px;
background-size: 120px 120px;
background-repeat: no-repeat;
font-size: 0;
line-height: 0;
display: inline-block;
cursor: pointer;
}
&.arrowPrev {
top: 0;
> button {
background-image: url(../../../assets/images/hotPicks/ic-scrollup-nor@3x.png);
&:focus {
background-image: url(../../../assets/images/hotPicks/ic-scrollup-foc@3x.png);
}
}
}
&.arrowNext {
bottom: 0;
> button {
background-image: url(../../../assets/images/hotPicks/ic-scrolldown-nor@3x.png);
background-position: 0 -65px;
&:focus {
background-image: url(../../../assets/images/hotPicks/ic-scrolldown-foc@3x.png);
} }
} }
} }
} }
} }
.arrow {
width: 100%;
text-align: center;
position: absolute;
z-index: 2;
> button {
width: 120px;
height: 55px;
background-size: 120px 120px;
background-repeat: no-repeat;
font-size: 0;
line-height: 0;
display: inline-block;
cursor: pointer;
}
&.arrowPrev {
top: 0;
> button {
background-image: url(../../../assets/images/hotPicks/ic-scrollup-nor@3x.png);
&:focus {
background-image: url(../../../assets/images/hotPicks/ic-scrollup-foc@3x.png);
}
}
}
&.arrowNext {
bottom: 0;
> button {
background-image: url(../../../assets/images/hotPicks/ic-scrolldown-nor@3x.png);
background-position: 0 -65px;
&:focus {
background-image: url(../../../assets/images/hotPicks/ic-scrolldown-foc@3x.png);
}
}
}
}