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

[TabLayout] css modify

Browse Source
This commit is contained in:
고동영
2024-06-13 11:13:41 +09:00
parent 2fb57cb4f9
commit cb3b87d3d9
3 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
View File

@@ -83,8 +83,8 @@ const TabItemBase = ({
<div
className={classNames(
css.imageWrap,
selected && css.selected
// focused && selected && css.selectedFocus
!focused && selected && css.selected,
focused && selected && css.selectedFocus
)}
>
<div

22
com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
View File

@@ -54,6 +54,12 @@
}
&.focused {
img {
border: 5px solid #c70850;
border-radius: 44.9px;
.size(@w: 80px, @h: 80px);
}
background: rgba(255, 255, 255, 0.1);
background: linear-gradient(to right, #cb1253, #e15ba1);
color: #fff;
@@ -62,18 +68,20 @@
&.selected {
img {
border: 5px solid #c70850;
.size(@w: 80px, @h: 80px);
object-fit: contain;
border: 5px solid #c70850;
border-radius: 44.9px;
}
}
// &.selectedFocus {
// img {
// box-shadow: -3px 0px 30px 0 #808080;
// border-radius: 37%;
// }
// }
&.selectedFocus {
img {
border: 5px solid #808080;
object-fit: contain;
.size(@w: 80px, @h: 80px);
border-radius: 44.9px;
}
}
}
.text {

5
com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
View File

@@ -50,6 +50,7 @@
height: 100%;
left: 0;
top: 0;
opacity: 0.95;
background-color: #222222;
z-index: 1;
@@ -57,7 +58,7 @@
width: 54px;
height: 54px;
overflow: hidden;
margin: 60px 24px 84px 42px;
margin: 60px 24px 84px 33px;
> img {
width: 234px;
height: 54px;
@@ -75,7 +76,7 @@
&.secondDepthLayout {
width: 386px;
height: 1080px;
opacity: 0.95;
opacity: 0.9;
box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08);
padding-bottom: unset;
z-index: 0;