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

[서치] 낮은 버전에서 focus-within 안먹는 부분처리

Browse Source 
- focus-within 제거 및 focus outline으로 변경 처리.
This commit is contained in:
junghoon86.park
2025-10-24 17:08:04 +09:00
parent a843b7c215
commit 820aab8d03
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less
View File

@@ -1,6 +1,6 @@
// src/views/SearchPanel/SearchPanel.module.less
@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";
@import '../../style/CommonStyle.module.less';
@import '../../style/utils.module.less';
.container {
background-color: @BG_COLOR_01;
@@ -77,9 +77,11 @@
border-radius: 1000px;
border: 5px solid #ccc; // 기본 회색 테두리
box-sizing: border-box;
transition: border 0.2s ease, box-shadow 0.2s ease;
transition:
border 0.2s ease,
box-shadow 0.2s ease;
&:focus-within {
&:focus {
border: 5px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
}
@@ -87,7 +89,7 @@
// 입력 모드 활성화 시 (webOS 키보드 표시됨)
.inputWrapperActive {
outline: 2px solid @PRIMARY_COLOR_RED; // 기존 5px 테두리 위에 2px 추가
outline: 5cap solid @PRIMARY_COLOR_RED; // 기존 5px 테두리 위에 2px 추가
outline-offset: 0px;
box-shadow: 0 0 30px 0 rgba(229, 9, 20, 0.6) !important;
}
@@ -106,6 +108,10 @@
align-items: center;
z-index: 1001;
position: relative;
&:focus {
outline: 5px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
}
> div:first-child {
margin: 0 !important;
@@ -119,7 +125,7 @@
text-align: left;
color: black;
font-size: 42px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 42px;
outline: none;
@@ -134,13 +140,12 @@
}
// TInput 내부 컨테이너의 포커스 스타일 완전 제거
&[data-spotlight-container="true"] {
&[data-spotlight-container='true'] {
outline: none !important;
border: none !important;
box-shadow: none !important;
&:focus,
&:focus-within {
&:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
@@ -150,8 +155,7 @@
// TInput 컴포넌트 자체의 내부 포커스 스타일 제거
> div {
&:focus,
&:focus-within {
&:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
@@ -160,8 +164,7 @@
// 모든 내부 요소의 포커스 스타일 완전 제거
* {
&:focus,
&:focus-within {
&:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
@@ -169,13 +172,12 @@
}
// TInput 내부 Container의 포커스 제거
> div[data-spotlight-container="true"] {
> div[data-spotlight-container='true'] {
outline: none !important;
border: none !important;
box-shadow: none !important;
&:focus,
&:focus-within {
&:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
@@ -188,8 +190,7 @@
border: none !important;
box-shadow: none !important;
&:focus,
&:focus-within {
&:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
@@ -203,7 +204,7 @@
position: relative;
&::before {
content: "";
content: '';
width: 36.27px;
height: 36.27px;
position: absolute;
@@ -365,7 +366,7 @@
color: black;
font-size: 24px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 24px;
text-align: center;
@@ -430,7 +431,7 @@
text-align: center;
color: black;
font-size: 42px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 42px;
word-wrap: break-word;
@@ -473,7 +474,7 @@
color: black;
font-size: 24px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 24px;
text-align: center;
@@ -524,7 +525,7 @@
text-align: center;
color: black;
font-size: 42px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 42px;
word-wrap: break-word;
@@ -634,7 +635,7 @@
text-align: center;
color: #808080;
font-size: 18px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 18px;
word-wrap: break-word;
@@ -644,7 +645,7 @@
align-self: stretch;
color: black;
font-size: 24px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
@@ -732,7 +733,7 @@
color: black;
font-size: 24px;
font-family: "LG Smart UI";
font-family: 'LG Smart UI';
font-weight: 700;
line-height: 24px;
text-align: center;