73 lines
1.8 KiB
Plaintext
73 lines
1.8 KiB
Plaintext
// src/components/TCheckBox/TCheckBoxSquare.module.less
|
|
|
|
@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;
|
|
width: 45px !important;
|
|
height: 45px !important;
|
|
border: 3px solid @SQUARE_BORDER_DEFAULT !important;
|
|
border-radius: 8px !important;
|
|
background-color: #fff !important;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
transition:
|
|
background 0.15s,
|
|
border 0.15s !important;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.focus {
|
|
border-color: @SQUARE_BORDER_ACTIVE !important;
|
|
border-width: 4px !important; // 🔥 포커스 시 굵은 테두리
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 18px !important;
|
|
height: 10px !important;
|
|
border-left: 4px solid #fff !important;
|
|
border-bottom: 4px solid #fff !important;
|
|
transform: translate(-50%, -70%) rotate(-45deg) scale(0);
|
|
border-radius: 0 !important;
|
|
transition: transform 0.2s ease-in-out !important;
|
|
}
|
|
|
|
&.selected {
|
|
border-color: @SQUARE_BG_SELECTED !important;
|
|
border-width: 4px !important;
|
|
background-color: @SQUARE_BG_SELECTED !important;
|
|
&::before {
|
|
transform: translate(-50%, -70%) rotate(-45deg) scale(1);
|
|
}
|
|
}
|
|
|
|
&.selectedFocus {
|
|
border-color: @SQUARE_BORDER_ACTIVE !important;
|
|
border-width: 4px !important;
|
|
background-color: @SQUARE_BG_SELECTED !important;
|
|
|
|
&::before {
|
|
transform: translate(-50%, -70%) rotate(-45deg) scale(1);
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.5 !important;
|
|
cursor: not-allowed !important;
|
|
pointer-events: none !important;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: @SQUARE_BORDER_DEFAULT !important;
|
|
}
|
|
}
|
|
}
|