[선택약관] 선택약관 관련부분 스타일 수정
1. 체크박스 호버시 주변 색노출 제거. 2. 버튼부분 포커스시 outline 부분 변경.
This commit is contained in:
@@ -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,7 +15,9 @@
|
||||
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,
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
&::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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
// 체크마크
|
||||
|
||||
Reference in New Issue
Block a user