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

[선택약관] 선택약관 관련부분 스타일 수정

Browse Source 
1. 체크박스 호버시 주변 색노출 제거.
	2. 버튼부분 포커스시 outline 부분 변경.
This commit is contained in:
junghoon86.park
2025-09-17 16:00:13 +09:00
parent 8a06aa2113
commit f9af36a274
3 changed files with 73 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
com.twin.app.shoptime/src/components/TCheckBox/TCheckBoxSquare.module.less
View File

@@ -1,11 +1,9 @@
// src/components/TCheckBox/TCheckBoxSquare.module.less
@SQUARE_BORDER_DEFAULT: #CCCCCC;
@SQUARE_BORDER_ACTIVE: #C70850;
@SQUARE_BG_SELECTED: #7A808D;
@SQUARE_BORDER_DEFAULT: #cccccc;
@SQUARE_BORDER_ACTIVE: #c70850;
@SQUARE_BG_SELECTED: #7a808d;
// @SQUARE_BG_SELECTED: #C70850;
;
.tCheckBoxSquare {
min-width: 45px !important;
min-height: 45px !important;
@@ -17,17 +15,19 @@
position: relative;
box-sizing: border-box;
cursor: pointer;
transition: background 0.15s, border 0.15s !important;
transition:
background 0.15s,
border 0.15s !important;
&:hover,
&:focus,
&.focus {
border-color: @SQUARE_BORDER_ACTIVE !important;
border-width: 4px !important; // 🔥 포커스 시 굵은 테두리
border-width: 4px !important; // 🔥 포커스 시 굵은 테두리
}
&::before {
content: '';
content: "";
position: absolute;
top: 50%;
left: 50%;
@@ -53,7 +53,6 @@
border-color: @SQUARE_BORDER_ACTIVE !important;
border-width: 4px !important;
background-color: @SQUARE_BG_SELECTED !important;
box-shadow: 0 0 0 4px fade(@SQUARE_BORDER_ACTIVE, 20%) !important;
&::before {
transform: translate(-50%, -70%) rotate(-45deg) scale(1);
}

30
com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less
View File

@@ -910,9 +910,9 @@
.optionalConfirmInfo {
width: 100vw;
height: 198px;
background-color: #E6EBF0;
background-color: #e6ebf0;
border-radius: 4px;
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.30);
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
box-sizing: border-box;
@@ -963,7 +963,7 @@
padding: 0 20px !important;
margin: 0 !important;
background: white !important;
border: 1px solid #CFCFCF !important;
border: 1px solid #cfcfcf !important;
border-radius: 4px !important;
display: flex !important;
align-items: center !important;
@@ -973,15 +973,15 @@
// 포커스 스타일
&:focus {
outline: 2px solid #C70850 !important;
outline-offset: 1px !important;
outline: 2px solid #c70850;
outline-offset: -1px;
}
.optionalTermsTitle {
height: 100%;
color: #1A1A1A;
color: #1a1a1a;
font-size: 22px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 600;
line-height: 22px;
white-space: nowrap;
@@ -995,7 +995,7 @@
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #1A1A1A;
border: 2px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
@@ -1003,10 +1003,10 @@
margin-left: 8px;
&::after {
content: '>';
content: ">";
font-size: 14px;
font-weight: bold;
color: #1A1A1A;
color: #1a1a1a;
}
}
}
@@ -1037,8 +1037,8 @@
.figmaTermsInfo {
.size(@w: 1064px, @h: 750px);
padding: 60px 57px 40px;
background: #E6EBF0;
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.30);
background: #e6ebf0;
box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
@@ -1051,7 +1051,7 @@
.figmaTermsCard {
background: white;
border-radius: 4px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -1059,11 +1059,11 @@
.figmaTermsTitleBar {
padding: 17px 31px;
border-bottom: 1px solid #CCCCCC;
border-bottom: 1px solid #cccccc;
}
.figmaTermsTitleText {
color: #C70850;
color: #c70850;
font-size: 30px;
font-weight: 700;
}

7
com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less
View File

@@ -171,16 +171,12 @@
// &:focus-visible,
&:hover {
outline: 4px #c91d53 solid !important;
outline-offset: 2px !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(201, 29, 83, 0.3) !important;
.termsText {
font-weight: bold !important;
}
}
}
}
}
.termsRightPanel {
@@ -317,14 +313,12 @@
&.selected:before {
background-color: #c91d53 !important;
border: 4px solid #c91d53 !important; // 굵은 테두리로 변경
box-shadow: 0 0 8px rgba(201, 29, 83, 0.3); // 약간의 그림자 효과
}
// 포커스 받았지만 선택 안됨
&.focused:not(.selected):before {
background-color: rgba(201, 29, 83, 0.1);
border: 4px solid #c91d53 !important;
box-shadow: 0 0 10px rgba(199, 8, 80, 0.3) !important;
}
// 비활성화됨
@@ -337,7 +331,6 @@
// 포커스 받음 (선택된 상태가 아닌 경우에만 적용)
&.focused:not(.selected):before {
border: 4px solid #c91d53 !important;
box-shadow: 0 0 10px rgba(199, 8, 80, 0.3) !important;
}
// 체크마크