From 339ba96f9f70f974adead7ef96a7b99415eb3c85 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 14 Feb 2024 10:26:04 +0900 Subject: [PATCH] =?UTF-8?q?[Focus]focus-within=20=EA=B4=80=EB=A0=A8=20=20f?= =?UTF-8?q?ocus=EC=B6=94=EA=B0=80.=20-=20:focus-within=20=EC=97=90=20:focu?= =?UTF-8?q?s=EC=B6=94=EA=B0=80=EA=B1=B4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TButtonTab/TButtonTabItem.module.less | 3 ++- .../src/components/TDropDown/TDropDown.module.less | 3 ++- .../src/components/TIconButton/TIconButton.module.less | 6 ++++-- .../src/components/TInput/TInput.module.less | 6 ++++-- .../src/components/TopButton/TopButton.module.less | 3 ++- .../CategoryContents/ShowContents/ShowContents.module.less | 3 ++- .../LiveChannels/LiveVideoCard/LiveVideoCard.module.less | 3 ++- .../QuickMenu/QuickMenuItem/QuickMenuItem.module.less | 3 ++- .../TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less | 3 ++- .../UpComingList/UpComingCard/UpComingCard.module.less | 3 ++- .../HomePanel/HomeBanner/HomeBannerTemplate2.module.less | 6 ++++-- .../SubCategory/SubCategoryItem/SubCategoryItem.module.less | 3 ++- .../src/views/HotPicksPanel/HotPicks.module.less | 3 ++- .../src/views/HotPicksPanel/Type/TCFI/TCFI.module.less | 3 ++- .../src/views/HotPicksPanel/Type/TCFV/TCFV.module.less | 3 ++- .../src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less | 3 ++- .../src/views/HotPicksPanel/Type/TCHH/TCHH.module.less | 3 ++- .../RecommendedKeywords/RecommendedKeywords.module.less | 3 ++- .../SearchItemCard/SearchItemCard.module.less | 3 ++- .../SearchShowCard/SearchShowCard.module.less | 3 ++- .../SearchThemeCard/SearchThemeCard.module.less | 3 ++- 21 files changed, 48 insertions(+), 24 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.module.less b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.module.less index fd2e00ba..c2389bff 100644 --- a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.module.less +++ b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.module.less @@ -34,7 +34,8 @@ } } - &:focus-within { + &:focus-within, + &:focus { background-color: @PRIMARY_COLOR_RED; border-color: @PRIMARY_COLOR_RED; diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less index 07a11304..e1df65c7 100644 --- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less +++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less @@ -64,7 +64,8 @@ > div { padding: 0 15px !important; - &:focus-within { + &:focus-within, + &:focus { background-color: var( --list-item-focus-background-color ) !important; diff --git a/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less index 05f41661..c31cd6ff 100644 --- a/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less +++ b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less @@ -16,7 +16,8 @@ width: 47px; height: 92px; - &:focus-within { + &:focus-within, + &:focus { background-position: center bottom; transform: scale(1.2); } @@ -29,7 +30,8 @@ width: 47px; height: 92px; - &:focus-within { + &:focus-within, + &:focus { background-position: center bottom; transform: scale(1.2); } diff --git a/com.twin.app.shoptime/src/components/TInput/TInput.module.less b/com.twin.app.shoptime/src/components/TInput/TInput.module.less index 57593c67..e23cbc84 100644 --- a/com.twin.app.shoptime/src/components/TInput/TInput.module.less +++ b/com.twin.app.shoptime/src/components/TInput/TInput.module.less @@ -17,7 +17,8 @@ width: 100% !important; &:focus-within, - &:hover { + &:hover, + &:focus { box-shadow: 0 0 0 2px #fefefe inset; border: 5px solid @PRIMARY_COLOR_RED; } @@ -53,7 +54,8 @@ background-image: url("../../../assets/searchpanel/ico_search_submit.png"); &:focus-within, - &:hover { + &:hover, + &:focus { width: 43px; height: 43px; transform: translateY(-50%) scale(1.1); diff --git a/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less b/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less index 85ca2b90..7af5211d 100644 --- a/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less +++ b/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less @@ -12,7 +12,8 @@ background-image: url("../../../assets/button/120x120/btn-top-nor.svg"); /* focuesd */ - &:focus-within { + &:focus-within, + &:focus { background-image: url("../../../assets/button/120x120/btn-top-foc.svg"); } } diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less index 42b4c555..69b96545 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less @@ -25,7 +25,8 @@ height: 100%; } - &:focus-within { + &:focus-within, + &:focus { outline: 4px solid @PRIMARY_COLOR_RED; outline-offset: -3px; box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED, diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveVideoCard/LiveVideoCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveVideoCard/LiveVideoCard.module.less index 79013b19..2821cbc1 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveVideoCard/LiveVideoCard.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveVideoCard/LiveVideoCard.module.less @@ -64,7 +64,8 @@ } /* focused */ - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(@borderRadius: 12px); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.module.less index da965d93..0f8f04aa 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.module.less @@ -33,7 +33,8 @@ } /* focused */ - &:focus-within { + &:focus-within, + &:focus { border-radius: 100%; .focusDropShadow(); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less index add4a0e8..1f45a623 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less @@ -161,7 +161,8 @@ } /* focused */ - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(@boxShadow:50px, @borderRadius:12px); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less index 2b183f3a..ac963140 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less @@ -62,7 +62,8 @@ } /* normal focused */ - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(@boxShadow:50px, @borderRadius:12px); } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less index 6ed8c4f6..dca5aed1 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less @@ -98,7 +98,8 @@ background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg"); background-size: 42px 42px; background-repeat: no-repeat; - &:focus-within { + &:focus-within, + &:focus { background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg"); } } @@ -112,7 +113,8 @@ background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg"); background-size: 42px 42px; background-repeat: no-repeat; - &:focus-within { + &:focus-within, + &:focus { background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg"); } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less index c334c696..1c795eae 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less @@ -73,7 +73,8 @@ } } /* focused */ - &:focus-within { + &:focus-within, + &:focus { border: solid 1px @PRIMARY_COLOR_RED; box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED, 0 0 50px 0 rgba(0, 0, 0, 0.5); diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less index 795cf1db..041a4c56 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less @@ -37,7 +37,8 @@ display: flex; > li { position: relative; - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less index c18dfc60..385ed149 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less @@ -3,7 +3,8 @@ .fullImg { position: relative; - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less index 715bb0e2..c8697d60 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less @@ -3,7 +3,8 @@ .fullImg { position: relative; - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less index 50e44984..dcbf3768 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less @@ -8,7 +8,8 @@ > div { width: 1414px; position: relative; - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less index d7910a88..1611384f 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less @@ -12,7 +12,8 @@ display: flex; align-items: center; justify-content: center; - &:focus-within { + &:focus-within, + &:focus { &::after { .focused(); } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/RecommendedKeywords/RecommendedKeywords.module.less b/com.twin.app.shoptime/src/views/SearchPanel/RecommendedKeywords/RecommendedKeywords.module.less index e68630ac..ff901544 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/RecommendedKeywords/RecommendedKeywords.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/RecommendedKeywords/RecommendedKeywords.module.less @@ -40,7 +40,8 @@ overflow: unset; } - &:focus-within { + &:focus-within, + &:focus { box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED, 0 0 50px 0 rgba(11, 8, 8, 0.5); color: @PRIMARY_COLOR_RED; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less index 0ac68fe1..afda3d1c 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less @@ -51,7 +51,8 @@ } } - &:focus-within { + &:focus-within, + &:focus { border: 4px solid @PRIMARY_COLOR_RED; box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5); } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowCard/SearchShowCard.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowCard/SearchShowCard.module.less index 06c3ea46..8ce16871 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowCard/SearchShowCard.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowCard/SearchShowCard.module.less @@ -41,7 +41,8 @@ padding: 0 15px; } - &:focus-within { + &:focus-within, + &:focus { border: 4px solid @PRIMARY_COLOR_RED; background-color: @COLOR_WHITE; box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5); diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeCard/SearchThemeCard.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeCard/SearchThemeCard.module.less index d03b4015..6c4eb28c 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeCard/SearchThemeCard.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeCard/SearchThemeCard.module.less @@ -35,7 +35,8 @@ } } - &:focus-within { + &:focus-within, + &:focus { background-position: center bottom; border: 4px solid @PRIMARY_COLOR_RED; box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5);