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

[프리뷰영상 공통] border 처리 변경

Browse Source
This commit is contained in:
jangheon Pyo
2024-06-12 19:59:32 +09:00
parent 55ffc527fa
commit a6bcf6fe0d
6 changed files with 55 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalContents.module.less
View File

@@ -11,6 +11,11 @@
.player {
&::after {
.focused(@boxShadow: 0, @borderRadius: 12px);
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
> div {

26
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveVideoCard/LiveVideoCard.module.less
View File

@@ -4,7 +4,6 @@
.card {
position: relative;
z-index: 10;
overflow: hidden;
.size(@w: 1002px, @h: 564px);
border-radius: 12px;
@@ -14,12 +13,13 @@
&:focus {
&::before {
// .focused(@boxShadow: 0, @borderRadius: 12px);
.position(@position: absolute, @top: 0, @left: 0, @right: 0, @bottom: 0);
z-index: 10;
border: 4px solid @PRIMARY_COLOR_RED;
border-radius: 12px;
content: "";
.focused(@boxShadow: 0, @borderRadius: 12px);
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
z-index: 30;
}
}
@@ -28,6 +28,7 @@
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
.size(@w: 1002px, @h: 564px);
background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);
border-radius: 10px 10px 0 0;
content: "";
}
@@ -40,6 +41,7 @@
&.horizontal {
> img {
.size(@w: 1002px, @h: 564px);
border-radius: 10px;
}
}
@@ -48,6 +50,7 @@
> img {
.size(@w: 326px, @h: 564px);
border-radius: 10px;
}
}
}
@@ -66,15 +69,6 @@
.size(@w: 108px, @h: 48px);
}
// &::after {
// .position(@position: absolute, @top: 33px, @left: 18px);
// .size(@w: 108px, @h: 48px);
// background-image: url(../../../../../../assets/images/tag/tag-liveshow.png);
// background-position: center center;
// background-repeat: no-repeat;
// content: "";
// }
> h3 {
min-height: 42px;
margin-bottom: 6px;

18
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.module.less
View File

@@ -31,10 +31,11 @@
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}
}
@@ -48,10 +49,11 @@
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}
> img {

18
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less
View File

@@ -156,10 +156,11 @@
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}
}
@@ -201,9 +202,10 @@
.videoModal {
&::after {
.focused(@boxShadow:0, @borderRadius: 12px);
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}

9
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less
View File

@@ -151,10 +151,11 @@
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}
}

36
com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.module.less
View File

@@ -10,6 +10,11 @@
&::after {
z-index: 10;
.focused(@boxShadow:22px, @borderRadius: 12px);
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}
@@ -56,6 +61,11 @@
&:focus {
.focused(@borderRadius: 12px);
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
&::after {
@@ -186,29 +196,13 @@
}
}
.player {
height: 564px;
&.horizontal {
width: 1002px;
}
&.vertical {
width: 362px;
}
&::after {
.focused(@borderRadius: 12px);
z-index: 10;
}
}
.videoModal {
&::after {
.focused(@boxShadow:0, @borderRadius: 12px);
}
> * {
border-radius: 12px;
overflow: hidden;
border: 6px solid @PRIMARY_COLOR_RED;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
}
}