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

카테고리 부분 포커스 셀렉트 변경건.

Browse Source
This commit is contained in:
junghoon86.park
2024-06-14 18:35:21 +09:00
parent 24a94e998f
commit a8ac10929d
3 changed files with 289 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
com.twin.app.shoptime/assets/images/icons/ic-category-accessories-no@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

155
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less
View File

@@ -2,12 +2,90 @@
@import "../../../../../style/utils.module.less";
.category {
&.selected {
div {
background-color: @COLOR_WHITE;
border: solid 2px @PRIMARY_COLOR_RED;
}
strong {
color: @PRIMARY_COLOR_RED;
}
span {
.size(@w: 80px, @h:80px);
background-position: center;
background-size: cover;
border-radius: 50%;
&.category-icon-1017 {
// LG Electronics
background-image: url("../../../../../../assets/images/icons/ic-category-lgelectronics-foc@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../../../../assets/images/icons/ic-category-fashion-foc@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../../../../assets/images/icons/ic-category-beauty-foc@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../../../../assets/images/icons/ic-category-jewelry-foc@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../../../../assets/images/icons/ic-category-home-foc@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../../../../assets/images/icons/ic-category-kitchen-foc@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../../../../assets/images/icons/ic-category-accessories-no@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../../../../assets/images/icons/ic-category-health-foc@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../../../../assets/images/icons/ic-category-cw-foc@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../../../../assets/images/icons/ic-category-electronics-foc@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../../../../assets/images/icons/ic-category-clearance-foc@3x.png");
}
}
}
/* normal */
position: relative;
.flex(@direction: column);
color: @COLOR_GRAY08;
text-align: center;
padding-top: 20px;
&:focus {
background-color: #eaeaea;
}
div {
.flex();
.size(@w: 94px, @h: 94px);
@@ -104,13 +182,76 @@
div {
background-color: @PRIMARY_COLOR_RED;
border: solid 2px @PRIMARY_COLOR_RED;
box-shadow: 0 0 25px 0 rgba(2, 3, 3, 0.8);
}
strong {
color: @PRIMARY_COLOR_RED;
}
span {
.size(@w: 80px, @h:80px);
background-position: center;
background-size: cover;
&.category-icon-1017 {
// LG Electronics
background-image: url("../../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../../../../assets/images/icons/ic-category-beauty-nor@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../../../../assets/images/icons/ic-category-jewelry-nor@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../../../../assets/images/icons/ic-category-home-nor@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../../../../assets/images/icons/ic-category-kitchen-nor@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../../../../assets/images/icons/ic-category-health-nor@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
}
}
&::after {
background-color: @PRIMARY_COLOR_RED;
}
@@ -118,13 +259,3 @@
}
/* selected */
.selected {
div {
background-color: @SELECTED_COLOR_RED;
border: solid 2px @SELECTED_COLOR_RED;
}
strong {
color: @SELECTED_COLOR_RED;
}
}

167
com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.module.less
View File

@@ -2,12 +2,88 @@
@import "../../../../style/utils.module.less";
.item {
&.selected {
> figure:nth-child(1) {
background-color: @COLOR_WHITE;
border: solid 2px @PRIMARY_COLOR_RED;
> div {
.size(@w: 80px, @h:80px);
background-position: center;
background-size: cover;
&.icon-1017 {
// LG Electronics
background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-foc@3x.png");
}
// Garden and Outdoors
&.icon-1008 {
background-image: url("../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
}
// Fashion
&.icon-1000 {
background-image: url("../../../../../assets/images/icons/ic-category-fashion-foc@3x.png");
}
// Beauty
&.icon-1003 {
background-image: url("../../../../../assets/images/icons/ic-category-beauty-foc@3x.png");
}
// Jewelry
&.icon-1004 {
background-image: url("../../../../../assets/images/icons/ic-category-jewelry-foc@3x.png");
}
// Home
&.icon-1006 {
background-image: url("../../../../../assets/images/icons/ic-category-home-foc@3x.png");
}
// Kitchen & Food
&.icon-1007 {
background-image: url("../../../../../assets/images/icons/ic-category-kitchen-foc@3x.png");
}
// Accessories
&.icon-1014 {
background-image: url("../../../../../assets/images/icons/ic-category-accessories-no@3x.png");
}
// Heaclth & Fitness
&.icon-1009 {
background-image: url("../../../../../assets/images/icons/ic-category-health-foc@3x.png");
}
// Crafts & Sewing
&.icon-1011 {
background-image: url("../../../../../assets/images/icons/ic-category-cw-foc@3x.png");
}
// Electronics
&.icon-1010 {
background-image: url("../../../../../assets/images/icons/ic-category-electronics-foc@3x.png");
}
// Clearance
&.icon-1013 {
background-image: url("../../../../../assets/images/icons/ic-category-clearance-foc@3x.png");
}
}
}
> strong:nth-child(2) {
color: @PRIMARY_COLOR_RED;
}
}
position: relative;
.flex(@direction: column);
min-width: 210px;
margin: 50px 30px 0 0;
margin: 30px 30px 0 0;
color: @COLOR_GRAY08;
text-align: center;
padding-top: 20px;
> figure:nth-child(1) {
.flex();
@@ -88,21 +164,73 @@
height: 60px;
margin-bottom: 12px;
}
&::after {
.position(@position: absolute, @bottom: 0);
display: block;
.size(@w: 100%, @h:6px);
background-color: transparent;
content: "";
}
// focused
&:focus {
background-color: #eaeaea;
> figure:nth-child(1) {
background-color: @PRIMARY_COLOR_RED;
border: solid 2px @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(2, 3, 3, 0.8);
> div {
&.icon-1017 {
// LG Electronics
background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
}
// Garden and Outdoors
&.icon-1008 {
background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
}
// Fashion
&.icon-1000 {
background-image: url("../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
}
// Beauty
&.icon-1003 {
background-image: url("../../../../../assets/images/icons/ic-category-beauty-nor@3x.png");
}
// Jewelry
&.icon-1004 {
background-image: url("../../../../../assets/images/icons/ic-category-jewelry-nor@3x.png");
}
// Home
&.icon-1006 {
background-image: url("../../../../../assets/images/icons/ic-category-home-nor@3x.png");
}
// Kitchen & Food
&.icon-1007 {
background-image: url("../../../../../assets/images/icons/ic-category-kitchen-nor@3x.png");
}
// Accessories
&.icon-1014 {
background-image: url("../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
}
// Heaclth & Fitness
&.icon-1009 {
background-image: url("../../../../../assets/images/icons/ic-category-health-nor@3x.png");
}
// Crafts & Sewing
&.icon-1011 {
background-image: url("../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
}
// Electronics
&.icon-1010 {
background-image: url("../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
}
// Clearance
&.icon-1013 {
background-image: url("../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
}
}
}
> strong:nth-child(2) {
@@ -113,16 +241,13 @@
background-color: @PRIMARY_COLOR_RED;
}
}
&::after {
.position(@position: absolute, @bottom: 0);
display: block;
.size(@w: 100%, @h:6px);
background-color: transparent;
content: "";
}
}
// selected
.selected {
> figure:nth-child(1) {
background-color: @SELECTED_COLOR_RED;
border: solid 2px @SELECTED_COLOR_RED;
}
> strong:nth-child(2) {
color: @SELECTED_COLOR_RED;
}
}