antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

select box

Browse Source
This commit is contained in:
antv
2026-07-13 16:28:44 +07:00
parent f0a25b840c
commit 47a8892623
24 changed files with 889 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+104
View File
@@ -51,6 +51,110 @@
@import 'tailwindcss';
@import 'tom-select/dist/css/tom-select.css';
/* --- TOM SELECT CUSTOM DESIGN SYSTEM --- */
.ts-wrapper.form-input {
padding: 0 !important;
border: none !important;
background: transparent !important;
height: 48px !important;
box-shadow: none !important;
}
.ts-wrapper.form-input .ts-control {
border: 1px solid #d9dfe7 !important;
border-radius: 0.75rem !important; /* 12px / rounded-xl */
height: 48px !important;
padding: 0 1rem !important;
display: flex !important;
align-items: center !important;
font-size: 0.875rem !important;
color: #1e293b !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
position: relative !important;
}
.ts-wrapper.form-input:hover .ts-control {
border-color: #9ca3af !important;
}
.ts-wrapper.form-input.focus .ts-control {
border-color: #3462f7 !important;
box-shadow: 0 0 0 4px rgba(52, 98, 247, 0.2) !important;
outline: none !important;
}
.ts-wrapper.form-input.focus:hover .ts-control {
border-color: #3462f7 !important;
}
.ts-wrapper.form-input-with-icon .ts-control {
padding-left: 48px !important;
}
/* Selected value item styling */
.ts-wrapper.form-input .ts-control .item {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: calc(100% - 24px) !important;
color: #1e293b !important;
font-size: 0.875rem !important;
padding: 0 !important;
margin: 0 !important;
line-height: normal !important;
}
/* Search input field styling */
.ts-wrapper.form-input .ts-control input {
font-size: 0.875rem !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
line-height: normal !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Dropdown popup list styling */
.ts-wrapper.form-input .ts-dropdown {
border: 1px solid #d9dfe7 !important;
border-radius: 0.75rem !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
margin-top: 4px !important;
z-index: 100 !important;
background-color: #ffffff !important;
overflow: hidden !important;
}
.ts-wrapper.form-input .ts-dropdown .option {
padding: 0.65rem 1rem !important;
font-size: 0.875rem !important;
color: #475569 !important;
white-space: normal !important;
word-break: break-word !important;
}
.ts-wrapper.form-input .ts-dropdown .option.active {
background-color: #e8f0fe !important;
color: #3462f7 !important;
}
/* Select dropdown arrow icon */
.ts-wrapper.form-input.single .ts-control::after {
right: 1.25rem !important;
border-color: #6b7280 transparent transparent transparent !important;
border-width: 5px 5px 0 5px !important;
top: 50% !important;
margin-top: -2.5px !important;
}
.ts-wrapper.form-input.single.dropdown-active .ts-control::after {
border-color: transparent transparent #6b7280 transparent !important;
border-width: 0 5px 5px 5px !important;
margin-top: -2.5px !important;
}
/* Specific height override for the search filter form */
#filterForm .ts-wrapper.form-input {
height: 38px !important;
}
#filterForm .ts-wrapper.form-input .ts-control {
height: 38px !important;
min-height: 38px !important;
padding: 0.375rem 1rem !important;
}
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';