diff --git a/com.twin.app.shoptime/assets/images/icons/ic-category-accessories-no@3x.png b/com.twin.app.shoptime/assets/images/icons/ic-category-accessories-no@3x.png new file mode 100644 index 00000000..fd0d28e1 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/icons/ic-category-accessories-no@3x.png differ diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less index 092dca66..3ccb7efd 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less @@ -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; - } -} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.module.less index a607b6c4..ae986c72 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.module.less +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.module.less @@ -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; - } -}