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

[Focus]focus-within 관련 focus추가.

Browse Source 
- :focus-within 에 :focus추가건.
This commit is contained in:
junghoon86.park
2024-02-14 10:26:04 +09:00
parent 44846eca8d
commit 339ba96f9f
21 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.module.less
View File

@@ -34,7 +34,8 @@
}
}
&:focus-within {
&:focus-within,
&:focus {
background-color: @PRIMARY_COLOR_RED;
border-color: @PRIMARY_COLOR_RED;

3
com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
View File

@@ -64,7 +64,8 @@
> div {
padding: 0 15px !important;
&:focus-within {
&:focus-within,
&:focus {
background-color: var(
--list-item-focus-background-color
) !important;

6
com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less
View File

@@ -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);
}

6
com.twin.app.shoptime/src/components/TInput/TInput.module.less
View File

@@ -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);

3
com.twin.app.shoptime/src/components/TopButton/TopButton.module.less
View File

@@ -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");
}
}

3
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less
View File

@@ -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,

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

@@ -64,7 +64,8 @@
}
/* focused */
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused(@borderRadius: 12px);
}

3
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.module.less
View File

@@ -33,7 +33,8 @@
}
/* focused */
&:focus-within {
&:focus-within,
&:focus {
border-radius: 100%;
.focusDropShadow();

3
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less
View File

@@ -161,7 +161,8 @@
}
/* focused */
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused(@boxShadow:50px, @borderRadius:12px);
}

3
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less
View File

@@ -62,7 +62,8 @@
}
/* normal focused */
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused(@boxShadow:50px, @borderRadius:12px);
}

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

@@ -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");
}
}

3
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less
View File

@@ -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);

3
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less
View File

@@ -37,7 +37,8 @@
display: flex;
> li {
position: relative;
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused();
}

3
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less
View File

@@ -3,7 +3,8 @@
.fullImg {
position: relative;
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused();
}

3
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less
View File

@@ -3,7 +3,8 @@
.fullImg {
position: relative;
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused();
}

3
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less
View File

@@ -8,7 +8,8 @@
> div {
width: 1414px;
position: relative;
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused();
}

3
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less
View File

@@ -12,7 +12,8 @@
display: flex;
align-items: center;
justify-content: center;
&:focus-within {
&:focus-within,
&:focus {
&::after {
.focused();
}

3
com.twin.app.shoptime/src/views/SearchPanel/RecommendedKeywords/RecommendedKeywords.module.less
View File

@@ -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;

3
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less
View File

@@ -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);
}

3
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowCard/SearchShowCard.module.less
View File

@@ -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);

3
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeCard/SearchThemeCard.module.less
View File

@@ -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);