Filter Section / Search Panel

Design Specifications (Figma)

Container

  • Background: #DDF1FF (Light Blue)
  • Padding: 20px 10px
  • Border-radius: 4px
  • Gap between elements: 20px

Form Elements

  • Input height: 40px
  • Border: 1px solid #ABABAB
  • Border-radius: 4px
  • Font: Open Sans Regular 16px

Main Input

  • Flex: 1 (takes remaining space)
  • Placeholder color: #ABABAB

Selectors

  • Width: 245px (fixed)
  • Dropdown arrow included

Search Panel (Figma)

Main input + selectors + Search button with advanced filters link

Advanced filters
Save filter Clear fields
<div class="xcart-search-panel"> <div class="xcart-filter-row"> <div class="xcart-filter-main-input"> <input type="text" class="xcart-input" placeholder="Enter"> </div> <div class="xcart-filter-selector"> <select class="xcart-select">...</select> </div> <button class="xcart-btn xcart-btn-secondary">Search</button> </div> <div class="xcart-filter-row-secondary"> <a href="#" class="xcart-filter-advanced-link"> Advanced filters <i class="fas fa-chevron-right"></i> </a> <div class="xcart-filter-actions"> <a href="#" class="xcart-filter-action-link">Save filter</a> <span class="xcart-filter-actions-divider"></span> <a href="#" class="xcart-filter-action-link">Clear fields</a> </div> </div> </div>

Search Panel (Expanded)

With advanced filters panel visible

Advanced filters
Save filter Clear fields

Basic Filter Section

Search input with action buttons

Bulk Actions Bar

Appears when items are selected

5 orders selected

CSS Classes Reference

Search Panel

Class Description
.xcart-search-panel Main container (background #DDF1FF)
.xcart-filter-row Row of filter elements (gap 20px)
.xcart-filter-main-input Flex-grow input container
.xcart-filter-selector Fixed width select (245px)
.xcart-filter-row-secondary Secondary row with links
.xcart-filter-advanced-link Advanced filters toggle link
.xcart-filter-actions Action links container (right)
.xcart-filter-action-link Action link (dashed underline)
.xcart-filter-action-link.disabled Disabled state (20% opacity)
.xcart-filter-actions-divider Vertical divider between links

Advanced Filters

Class Description
.xcart-filter-advanced-panel Expandable panel (hidden by default)
.xcart-filter-advanced-panel.show Visible state
.xcart-filter-advanced-grid 2-column grid for filters
.xcart-filter-group Label + input pair
.xcart-filter-label Filter label (min-width 120px)

Legacy Classes

Class Description
.xcart-filter-section Alias for .xcart-search-panel
.xcart-filter-search Search input container
.xcart-bulk-actions Bulk action bar