드롭다운 UI 개선: 하이라이트 색상 및 transition 효과 수정, CSS 정돈

dev
박성영 4 months ago
parent baafd38c13
commit 262caf8829

@ -991,10 +991,10 @@ XitDropdown.prototype = {
self.selectItem(index);
});
// hover 효과 추가
// hover 효과 추가 - 키보드 방향키 하이라이트 색상과 동일하게 설정
this.$dropdown.find('.' + this.options.cssClass + '-item:not(.no-results)').hover(
function() {
$(this).css('background-color', '#f8f9fa');
$(this).css('background-color', '#e3f2fd');
},
function() {
if (!$(this).hasClass('selected')) {

@ -1647,7 +1647,7 @@ select[data-auto-color="true"] option[data-color] {
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
transition: background-color 0.2s, color 0.2s;
transition: background-color 0.2s;
}
.xit-dropdown-item:last-child {
@ -1655,13 +1655,12 @@ select[data-auto-color="true"] option[data-color] {
}
.xit-dropdown-item:hover {
background-color: #e3f2fd !important;
color: #1976d2 !important;
background-color: #f8f9fa;
}
.xit-dropdown-item.selected {
background-color: #e3f2fd !important;
color: #1976d2 !important;
background-color: #e3f2fd;
color: #1976d2;
}
.xit-dropdown-item.no-results {
@ -1683,10 +1682,6 @@ select[data-auto-color="true"] option[data-color] {
margin-bottom: 4px;
}
.xit-dropdown-item:hover .xit-dropdown-main {
color: #1976d2 !important;
}
/* 아이템 상세 정보 */
.xit-dropdown-details {
display: flex;
@ -1696,22 +1691,20 @@ select[data-auto-color="true"] option[data-color] {
}
.xit-dropdown-value {
color: #495057;
background-color: #f1f3f4;
padding: 3px 7px;
color: #666;
background-color: #f8f9fa;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
}
.xit-dropdown-item:hover .xit-dropdown-value {
background-color: #bbdefb !important;
color: #1565c0 !important;
background-color: #e9ecef;
}
.xit-dropdown-item.selected .xit-dropdown-value {
background-color: #bbdefb !important;
color: #1565c0 !important;
background-color: #bbdefb;
color: #1565c0;
}
/* 드롭다운 스크롤바 스타일 */

Loading…
Cancel
Save