442 lines
13 KiB
Plaintext
442 lines
13 KiB
Plaintext
@import "../../../../style/CommonStyle.module.less";
|
|
@import "../../../../style/utils.module.less";
|
|
|
|
.item {
|
|
height: 206px;
|
|
&.selected {
|
|
background-color: #eaeaea;
|
|
> 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;
|
|
|
|
// Fashion
|
|
&.icon-1000 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-fashion-foc@3x.png");
|
|
}
|
|
|
|
// Shoes
|
|
&.icon-1001 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-shoes-foc@3x.png");
|
|
}
|
|
|
|
// Handbags and Luggage
|
|
&.icon-1002 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-handbags-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");
|
|
}
|
|
|
|
// Gamstones
|
|
&.icon-1005 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-gamstones-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");
|
|
}
|
|
|
|
// Garden and Outdoors
|
|
&.icon-1008 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
|
|
}
|
|
|
|
// Health & Fitness
|
|
&.icon-1009 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-health-foc@3x.png");
|
|
}
|
|
|
|
// Electronics
|
|
&.icon-1010 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-electronics-foc@3x.png");
|
|
}
|
|
|
|
// Crafts & Sewing
|
|
&.icon-1011 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-cw-foc@3x.png");
|
|
}
|
|
|
|
// Entertainment
|
|
&.icon-1012 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-enter-foc@3x.png");
|
|
}
|
|
|
|
// Clearance
|
|
&.icon-1013 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-clearance-foc@3x.png");
|
|
}
|
|
|
|
// Accessories
|
|
&.icon-1014 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-accessories-foc@3x.png");
|
|
}
|
|
|
|
// Gifts & Holidays
|
|
&.icon-1015 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-gift-foc@3x.png");
|
|
}
|
|
|
|
// Finance
|
|
&.icon-1016 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-finance-foc@3x.png");
|
|
}
|
|
|
|
// LG Electronics
|
|
&.icon-1017 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-foc@3x.png");
|
|
}
|
|
|
|
//kids
|
|
&.icon-1018 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-kids-for@3x.png");
|
|
}
|
|
|
|
// Baby & kids
|
|
&.icon-1019 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-kids-for@3x.png");
|
|
}
|
|
// Food
|
|
&.icon-1020 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-food-foc@3x.png");
|
|
}
|
|
// Hobbies
|
|
&.icon-1021 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
|
|
}
|
|
// Sports & Outdoors
|
|
&.icon-1023 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-sports-outdoors-foc@3x.png");
|
|
}
|
|
// Promotions Banner
|
|
&.icon-9998 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-default-foc@3x.png");
|
|
}
|
|
|
|
// Tag Category Desc
|
|
&.icon-9999 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-default-foc@3x.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
> strong:nth-child(2) {
|
|
color: @PRIMARY_COLOR_RED;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
.position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
|
|
border: 1px solid @COLOR_GRAY02;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
position: relative;
|
|
.flex(@direction: column, @justifyCenter: flex-start);
|
|
min-width: 210px;
|
|
margin: 22px 30px 0 0;
|
|
padding-top: 20px;
|
|
color: @COLOR_GRAY08;
|
|
text-align: center;
|
|
|
|
> figure:nth-child(1) {
|
|
.flex();
|
|
.size(@w: 94px, @h: 94px);
|
|
margin-bottom: 18px;
|
|
border-radius: 48px;
|
|
background-color: @COLOR_GRAY08;
|
|
border: 2px solid @COLOR_GRAY08;
|
|
|
|
> div {
|
|
.size(@w: 80px, @h:80px);
|
|
background-position: center;
|
|
background-size: cover;
|
|
|
|
// Fashion
|
|
&.icon-1000 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
|
|
}
|
|
|
|
// Shoes
|
|
&.icon-1001 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-shoes-nor@3x.png");
|
|
}
|
|
|
|
// Handbags and Luggage
|
|
&.icon-1002 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-handbags-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");
|
|
}
|
|
|
|
// Gamstones
|
|
&.icon-1005 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-gamstones-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");
|
|
}
|
|
|
|
// Garden and Outdoors
|
|
&.icon-1008 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
|
|
}
|
|
|
|
// Health & Fitness
|
|
&.icon-1009 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-health-nor@3x.png");
|
|
}
|
|
|
|
// Electronics
|
|
&.icon-1010 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
|
|
}
|
|
|
|
// Crafts & Sewing
|
|
&.icon-1011 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
|
|
}
|
|
|
|
// Entertainment
|
|
&.icon-1012 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-enter-nor@3x.png");
|
|
}
|
|
|
|
// Clearance
|
|
&.icon-1013 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
|
|
}
|
|
|
|
// Accessories
|
|
&.icon-1014 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
|
|
}
|
|
|
|
// Gifts & Holidays
|
|
&.icon-1015 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-gift-nor@3x.png");
|
|
}
|
|
|
|
// Finance
|
|
&.icon-1016 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-finance-nor@3x.png");
|
|
}
|
|
|
|
// LG Electronics
|
|
&.icon-1017 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
|
|
}
|
|
|
|
//kids
|
|
&.icon-1018 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
|
|
}
|
|
|
|
// Baby & kids
|
|
&.icon-1019 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
|
|
}
|
|
// Food
|
|
&.icon-1020 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-food-nor@3x.png");
|
|
}
|
|
// Hobbies
|
|
&.icon-1021 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
|
|
}
|
|
// Sports & Outdoors
|
|
&.icon-1023 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-sports-outdoors-nor@3x.png");
|
|
}
|
|
|
|
// Promotions Banner
|
|
&.icon-9998 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
|
|
}
|
|
|
|
// Tag Category Desc
|
|
&.icon-9999 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
> strong:nth-child(2) {
|
|
height: 60px;
|
|
}
|
|
// focused
|
|
&:focus {
|
|
> figure:nth-child(1) {
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
border: solid 2px @PRIMARY_COLOR_RED;
|
|
> div {
|
|
// Fashion
|
|
&.icon-1000 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
|
|
}
|
|
|
|
// Shoes
|
|
&.icon-1001 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-shoes-nor@3x.png");
|
|
}
|
|
|
|
// Handbags and Luggage
|
|
&.icon-1002 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-handbags-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");
|
|
}
|
|
|
|
// Gamstones
|
|
&.icon-1005 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-gamstones-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");
|
|
}
|
|
|
|
// Garden and Outdoors
|
|
&.icon-1008 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
|
|
}
|
|
|
|
// Health & Fitness
|
|
&.icon-1009 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-health-nor@3x.png");
|
|
}
|
|
|
|
// Electronics
|
|
&.icon-1010 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
|
|
}
|
|
|
|
// Crafts & Sewing
|
|
&.icon-1011 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
|
|
}
|
|
|
|
// Entertainment
|
|
&.icon-1012 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-enter-nor@3x.png");
|
|
}
|
|
|
|
// Clearance
|
|
&.icon-1013 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
|
|
}
|
|
|
|
// Accessories
|
|
&.icon-1014 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
|
|
}
|
|
|
|
// Gifts & Holidays
|
|
&.icon-1015 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-gift-nor@3x.png");
|
|
}
|
|
|
|
// Finance
|
|
&.icon-1016 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-finance-nor@3x.png");
|
|
}
|
|
|
|
// LG Electronics
|
|
&.icon-1017 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
|
|
}
|
|
//kids
|
|
&.icon-1018 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
|
|
}
|
|
// Baby & kids
|
|
&.icon-1019 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
|
|
}
|
|
// Food
|
|
&.icon-1020 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-food-nor@3x.png");
|
|
}
|
|
// Hobbies
|
|
&.icon-1021 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
|
|
}
|
|
// Sports & Outdoors
|
|
&.icon-1023 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-sports-outdoors-nor@3x.png");
|
|
}
|
|
// Promotions Banner
|
|
&.icon-9998 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
|
|
}
|
|
|
|
// Tag Category Desc
|
|
&.icon-9999 {
|
|
background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
> strong:nth-child(2) {
|
|
color: @PRIMARY_COLOR_RED;
|
|
}
|
|
|
|
&::after {
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
}
|
|
}
|
|
&::after {
|
|
.position(@position: absolute, @bottom: 0);
|
|
display: block;
|
|
.size(@w: 100%, @h:6px);
|
|
background-color: transparent;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// selected
|