Appearance

Header Styles ​

File Information ​

  • Path: app/assets/scss/layout/_header.scss
  • Purpose: Styles for the main application header component
  • Type: Layout component

Overview ​

The header file contains styles for the main application header, including brand logo, search functionality, announcement icon, and search results display.

Key Components ​

.collage-header ​

Main header container:

  • Position: Relative
  • Display: Flex (space-between)
  • Z-index: 3
  • Padding: 16px 24px
  • Background: White
  • Box shadow: Subtle shadow
  • Transitions: Smooth transitions
  • Display: Flex, aligned center
  • H1: Extrabold font weight
  • Image: 300px width, 40px height
  • Responsive: Adjusts on smaller screens

Header Right (.headerRight) ​

  • Display: Flex, aligned center
  • Gap: 16px
  • Max-width: 1080px
  • Contains: Search input, announcement icon, profile

Search Input (.searchInput) ​

  • Position: Relative
  • Border radius: Large (48px)
  • Font size: 16px
  • Hover/Focus: Blue-700 border and shadow
  • Close icon: Absolute positioned

Search Count (.searchCount) ​

  • Font size: 12px
  • Font weight: Medium
  • Color: Gray-900
  • Margin: Right 8px

Search Icon (.searchIcon) ​

  • Background: Lavender-200
  • Box shadow: None

Announcement Icon (.announcementIcon) ​

  • Size: 40px × 40px
  • Background: White
  • Border radius: 40px
  • Badge: Red-600 background, positioned bottom-left
  • Hover: Lavender-200 background

Search Result (.searchResult) ​

  • Position: Absolute
  • Background: White
  • Transition: Smooth
  • Initially hidden (height: 0, opacity: 0)
  • Becomes visible when header has .open class

Search Title (.search-title) ​

  • Display: Flex, aligned center
  • Gap: 12px
  • Min-height: 32px
  • Border title variant with decorative line

Recent Search List (.recent-search-list) ​

  • Display: Flex column
  • Gap: 8px
  • List items: 8px vertical padding
  • Hover: Blue-700 color, underline

Search Top Fixed (.searchTopFixed) ​

  • Display: Flex column
  • Gap: 16px
  • Padding: 40px horizontal
  • Contains: Search type filters and table lists

Search Type (.searchType) ​

  • Display: Flex, aligned end
  • Button toggle: Border, rounded
  • Active/Hover: Gray-150 background
  • Text field: 180px width

Search Filter Level Three (.search-filter-level-three) ​

  • Position: Relative
  • Background: White
  • Border radius: 20px
  • Box shadow: Medium shadow
  • Overflow: Hidden

Responsive Design ​

Tablet (max-width: 1280.98px) ​

  • Header padding: 12px 24px
  • Icon sizes: 36px
  • Logo: 220px width, 32px height
  • Search input: Max-height 40px
  • Search result: Full width, top: 60px

Mobile (max-width: 960.98px) ​

  • Header padding: 12px 16px
  • Logo: 180px width
  • Search result padding: 16px horizontal

Small Mobile (max-width: 600.98px) ​

  • Search type buttons: Smaller font (12px)
  • Min-height: 30px
  • Max-width: 31.5vw for button content

States ​

Open State (.open) ​

  • Search count: Margin-right 48px
  • Search result: Full height, visible, pointer-events enabled

Mini State (.mini) ​

  • Search result: Adjusted left position (92px)
  • Width: calc(100% - 92px)