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

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

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