/* ========================================================== SPI UI Framework Component : Searchable Select Version : 1.0.0 Author : StudioProjectID ========================================================== */ /*========================================================= ROOT =========================================================*/ .spi-search-select{ position:relative; width:100%; } /*========================================================= CONTROL =========================================================*/ .spi-search-select-control{ width:100%; min-height:56px; display:flex; align-items:center; gap:10px; padding:0 16px; box-sizing:border-box; border:1px solid #dfe3e8; border-radius:14px; background:#ffffff; box-shadow: 0 1px 2px rgba(15,23,42,.02); cursor:text; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } /*========================================================= CONTROL HOVER =========================================================*/ .spi-search-select-control:hover{ border-color:#cbd5e1; } /*========================================================= CONTROL FOCUS =========================================================*/ .spi-search-select-control:focus-within{ border-color:#22b573; box-shadow: 0 0 0 3px rgba(34,181,115,.10); } /*========================================================= CONTROL OPEN =========================================================*/ .spi-search-select.open .spi-search-select-control{ border-color:#22b573; box-shadow: 0 0 0 3px rgba(34,181,115,.10); } /*========================================================= ICON =========================================================*/ .spi-search-select-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:20px; color:#94a3b8; font-size:16px; line-height:1; } /*========================================================= INPUT =========================================================*/ .spi-search-select-input{ flex:1; width:100%; min-width:0; padding:0; border:none !important; outline:none !important; background:transparent !important; box-shadow:none !important; color:var(--text); font-family:inherit; font-size:15px; font-weight:400; line-height:1.4; } /*========================================================= INPUT FOCUS =========================================================*/ .spi-search-select-input:focus{ border:none !important; outline:none !important; box-shadow:none !important; } /*========================================================= INPUT PLACEHOLDER =========================================================*/ .spi-search-select-input::placeholder{ color:#94a3b8; opacity:1; } /*========================================================= ARROW =========================================================*/ .spi-search-select-arrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:20px; color:#64748b; font-size:12px; line-height:1; pointer-events:none; transition: transform .2s ease, color .2s ease; } /*========================================================= ARROW OPEN =========================================================*/ .spi-search-select.open .spi-search-select-arrow{ transform:rotate(180deg); color:#22b573; } /*========================================================= DROPDOWN =========================================================*/ .spi-search-select-dropdown{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:500; display:none; max-height:320px; overflow-x:hidden; overflow-y:auto; border:1px solid #e2e8f0; border-radius:14px; background:#ffffff; box-shadow: 0 15px 35px rgba(15,23,42,.12); } /*========================================================= DROPDOWN OPEN =========================================================*/ .spi-search-select.open .spi-search-select-dropdown{ display:block; } /*========================================================= ITEM =========================================================*/ .spi-search-select-item{ width:100%; display:block; padding:13px 16px; border:0; border-bottom:1px solid #f1f5f9; background:#ffffff; color:var(--text); text-align:left; cursor:pointer; transition: background-color .15s ease, color .15s ease; } /*========================================================= ITEM LAST =========================================================*/ .spi-search-select-item:last-child{ border-bottom:none; } /*========================================================= ITEM HOVER =========================================================*/ .spi-search-select-item:hover{ background:#f0fdf4; } /*========================================================= ITEM ACTIVE =========================================================*/ .spi-search-select-item.active{ background:#ecfdf5; } /*========================================================= ITEM FOCUS =========================================================*/ .spi-search-select-item:focus{ outline:none; background:#ecfdf5; } /*========================================================= ITEM NAME =========================================================*/ .spi-search-select-name{ display:block; color:#0f172a; font-size:14px; font-weight:600; line-height:1.4; } /*========================================================= ITEM META =========================================================*/ .spi-search-select-meta{ display:block; margin-top:3px; color:#94a3b8; font-size:12px; line-height:1.4; } /*========================================================= EMPTY =========================================================*/ .spi-search-select-empty{ display:none; padding:22px 16px; color:#94a3b8; font-size:14px; text-align:center; } /*========================================================= DISABLED =========================================================*/ .spi-search-select.is-disabled .spi-search-select-control{ border-color:#e2e8f0; background:#f8fafc; cursor:not-allowed; opacity:.7; } .spi-search-select.is-disabled .spi-search-select-input{ cursor:not-allowed; } /*========================================================= ERROR STATE =========================================================*/ .spi-search-select.is-error .spi-search-select-control{ border-color:#ef4444; } /*========================================================= ERROR FOCUS =========================================================*/ .spi-search-select.is-error .spi-search-select-control:focus-within{ border-color:#ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.10); } /*========================================================= SUCCESS STATE =========================================================*/ .spi-search-select.is-success .spi-search-select-control{ border-color:#22b573; } /*========================================================= SCROLLBAR =========================================================*/ .spi-search-select-dropdown::-webkit-scrollbar{ width:7px; } /*========================================================= SCROLLBAR TRACK =========================================================*/ .spi-search-select-dropdown::-webkit-scrollbar-track{ background:#f8fafc; } /*========================================================= SCROLLBAR THUMB =========================================================*/ .spi-search-select-dropdown::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; } /*========================================================= SCROLLBAR THUMB HOVER =========================================================*/ .spi-search-select-dropdown::-webkit-scrollbar-thumb:hover{ background:#94a3b8; } /*========================================================= FIREFOX SCROLLBAR =========================================================*/ .spi-search-select-dropdown{ scrollbar-width:thin; scrollbar-color:#cbd5e1 #f8fafc; } /*========================================================= RESPONSIVE TABLET =========================================================*/ @media(max-width:768px){ .spi-search-select-control{ min-height:52px; padding-left:14px; padding-right:14px; border-radius:12px; } .spi-search-select-dropdown{ max-height:280px; border-radius:12px; } .spi-search-select-input{ font-size:15px; } } /*========================================================= RESPONSIVE MOBILE =========================================================*/ @media(max-width:480px){ .spi-search-select-control{ min-height:50px; padding-left:12px; padding-right:12px; gap:8px; } .spi-search-select-dropdown{ max-height:250px; } .spi-search-select-item{ padding:12px 14px; } .spi-search-select-name{ font-size:13px; } .spi-search-select-meta{ font-size:11px; } }