38 lines
2.5 KiB
PHP
38 lines
2.5 KiB
PHP
<div role="button" class="doc-search doc-search-container" dir="rtl">
|
|
<div class="doc-search-modal rounded-2xl overflow-hidden border border-slate-200 shadow-xl bg-white" dir="rtl">
|
|
<div class="modal-header doc-search-bar px-4 py-3 border-b border-slate-100 bg-slate-50">
|
|
<form class="doc-search-form flex items-center gap-2">
|
|
<label class="doc-search-magnifier-label flex-shrink-0 text-slate-500" for="doc-search-input" id="doc-search-label">
|
|
<svg width="20" height="20" class="doc-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
</label>
|
|
<div class="doc-search-loading-indicator w-5 h-5 text-brand-500 animate-spin" style="display: none;"></div>
|
|
<div class="doc-search-field flex-1 relative">
|
|
<input
|
|
type="text"
|
|
id="doc-search-input"
|
|
placeholder="<?php esc_attr_e( 'جستجو در راهنما...', 'wedocs' ); ?>"
|
|
autocomplete="off"
|
|
class="w-full py-2.5 pl-4 pr-10 rounded-xl border border-slate-200 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 text-slate-800"
|
|
/>
|
|
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="search-clean w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 cursor-pointer hover:text-slate-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
<button class="doc-search-cancel text-sm text-slate-500 hover:text-slate-700 px-3 py-2 rounded-lg hover:bg-slate-100 transition-colors" type="reset">
|
|
<?php esc_html_e( 'ESC', 'wedocs' ); ?>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body doc-search-dropdown max-h-96 overflow-y-auto">
|
|
<div class="doc-search-dropdown-container">
|
|
<section class="doc-search-hits p-4">
|
|
<div class="doc-empty-search text-sm text-slate-500">
|
|
<?php esc_html_e( 'عبارتی برای جستجو وارد کنید.', 'wedocs' ); ?>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|