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

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

@@ -11,18 +11,18 @@
// bottom: unset !important;
// transform: none !important;
// overflow: unset;
// > div {
// overflow: unset;
// }
// }
// // 다른 팝업들은 기존 TPopUp 방식 유지
// &:not(:has(.src_components_TPopUp_TNewPopUp_optionalConfirm)) {
// bottom: 50%;
// transform: translateY(50%);
// overflow: unset;
// > div {
// overflow: unset;
// }
@@ -184,7 +184,7 @@
&.optionPopup {
.default-style();
.optionInfo {
width: 820px;
background-color: @BG_COLOR_01;
@@ -225,7 +225,7 @@
background: @PRIMARY_COLOR_RED;
color: @COLOR_WHITE;
}
.optionImg {
width: 60px;
height: 60px;
@@ -248,7 +248,7 @@
&.optionScroll {
overflow-y: auto;
}
.selectedOption {
box-sizing: border-box;
background: @COLOR_WHITE;
@@ -256,7 +256,7 @@
border: 4px solid @PRIMARY_COLOR_RED;
}
}
.optionButtonContainer {
margin: 30px 0 30px 0;
display: flex;
@@ -266,7 +266,7 @@
&.eventBannerPopup {
.default-style();
.eventBannerInfo {
width: 600px;
height: 510px;
@@ -277,7 +277,7 @@
font-weight: normal;
box-sizing: border-box;
border-radius: 4px;
> p > img {
width: 600px;
height: 510px;
@@ -291,7 +291,7 @@
left: 0;
right: 0;
bottom: 50px;
> div {
margin: 0 6px;
min-width: 240px;
@@ -302,7 +302,7 @@
&.supportPopup {
.default-style();
.supportInfo {
width: 960px;
height: 640px;
@@ -313,7 +313,7 @@
font-weight: normal;
box-sizing: border-box;
border-radius: 4px;
.supportButtonContainer {
position: absolute;
right: 0;
@@ -332,7 +332,7 @@
&.couponPopup {
.default-style();
.couponInfo {
width: 960px;
height: 640px;
@@ -343,7 +343,7 @@
font-weight: normal;
box-sizing: border-box;
border-radius: 4px;
.couponButtonContainer {
position: absolute;
right: 0;
@@ -362,7 +362,7 @@
&.mobileSendPopup {
.default-style();
.mobileSendInfo {
width: 960px;
height: 640px;
@@ -373,7 +373,7 @@
font-weight: normal;
box-sizing: border-box;
border-radius: 4px;
.mobileSendButtonContainer {
position: absolute;
right: 0;
@@ -392,7 +392,7 @@
&.qrPopup {
.default-style();
.qrInfo {
width: 960px;
height: 640px;
@@ -404,7 +404,7 @@
box-sizing: border-box;
border-radius: 4px;
}
.qrButtonContainer {
display: flex;
justify-content: center;
@@ -458,7 +458,7 @@
}
}
}
.checkoutTermsButtonContainer {
display: flex;
justify-content: center;
@@ -481,7 +481,7 @@
&.scrollPopup {
.default-style();
.scrollInfo {
width: 900px;
background-color: @BG_COLOR_01;
@@ -492,7 +492,7 @@
box-sizing: border-box;
border-radius: 4px;
}
.scrollButtonContainer {
display: flex;
justify-content: center;
@@ -517,7 +517,7 @@
position: absolute;
right: 42px;
bottom: -330px;
.watchInfo {
width: 1038px;
height: 168px;
@@ -567,7 +567,7 @@
.elip(@clamp:1);
}
}
.watchButtonContainer {
display: flex;
flex-wrap: wrap;
@@ -613,7 +613,7 @@
text-align: center;
.flex();
}
.setPinCodeButtonContainer {
margin: 0 0 30px 0;
display: flex;
@@ -902,22 +902,22 @@
.default-style();
bottom: unset !important;
transform: none !important;
transform: none !important;
top: 20% !important;
// 기존 위치 스타일들...
.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;
// gap: 15px;
.optionalConfirmContentContainer {
width: 100%;
height: 100%;
@@ -927,7 +927,7 @@
box-sizing: border-box;
justify-content: center;
// gap: 20px;
.optionalConfirmTextSection {
// flex: 1; // 나머지 높이를 모두 차지
height: 30px;
@@ -937,7 +937,7 @@
// border : 1px solid red;
margin-bottom: 20px;
}
.optionalConfirmButtonSection {
height: 60px;
// margin-top: 15px; // gap 대신 margin으로 간격 처리
@@ -951,10 +951,10 @@
width: 320px;
height: 60px; // 부모 높이(60px) 모두 사용
display: flex;
align-items: center; // 수직 중앙 정렬
align-items: center; // 수직 중앙 정렬
display: flex;
justify-content: space-between;
.optionalTermsButton {
width: 100% !important;
height: 100% !important;
@@ -963,25 +963,25 @@
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;
justify-content: space-between !important; // 👈 flex-start → space-between 변경
flex-shrink: 0;
box-sizing: border-box !important;
// 포커스 스타일
&:focus {
outline: 2px solid #C70850 !important;
outline-offset: 1px !important;
outline: 2px solid #c70850;
outline-offset: -1px;
}
.optionalTermsTitle {
height: 100%;
color: #1A1A1A;
height: 100%;
color: #1a1a1a;
font-size: 22px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 600;
line-height: 22px;
white-space: nowrap;
@@ -989,35 +989,35 @@
text-overflow: ellipsis;
flex: 1;
}
// 👈 '>' 아이콘 스타일 추가
.optionalTermsIcon {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #1A1A1A;
border: 2px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 8px;
&::after {
content: '>';
content: ">";
font-size: 14px;
font-weight: bold;
color: #1A1A1A;
color: #1a1a1a;
}
}
}
}
.optionalConfirmRightButtonSection {
// width: 332px;
height: 100%; // 부모 높이(60px) 모두 사용
display: flex;
align-items: center; // 수직 중앙 정렬
justify-content: space-between;
justify-content: space-between;
// gap: 12px;
.optionalConfirmButton {
@@ -1037,37 +1037,37 @@
.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;
}
.figmaTermsContentContainer {
display: flex;
flex-direction: column;
// gap: 40px;
}
.figmaTermsCard {
background: white;
border-radius: 4px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
overflow: hidden;
display: flex;
flex-direction: column;
}
.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;
}
.figmaTermsContentBody {
flex-grow: 1;
display: flex;
@@ -1081,7 +1081,7 @@
line-height: 1.5;
}
}
.figmaTermsButtonContainer {
display: flex;
justify-content: center;
@@ -1089,13 +1089,13 @@
margin-top: 40px;
// gap: 15px; // 버튼 사이 간격
}
.figmaTermsAgreeButton {
// 이제 TButton의 type="popup" 스타일을 사용하므로,
// 여기서는 추가적인 스타일이 필요 없습니다.
margin-right: 15px;
}
.figmaTermsCloseButton {
// TButton의 type="popup" 스타일을 사용합니다.
margin-left: 0px; // lint 오류 대비용용
@@ -1104,7 +1104,7 @@
}
// optionalConfirm일 때만 기존 위치 스타일 무력화
// :global([id="floatLayer"]) :global(> div:not([id])) :global(> div) :global(> div:nth-child(2)) {
// .tNewPopUp.optionalConfirm & {
// bottom: unset !important;

11
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;
}
// 체크마크