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

Styles for PopularFilterPills.vue (quick custom-field filters next to the search type toggle).

  • Wrapping flex row, row-gap: 4px, column-gap: 12px. No vertical margin: margin-block: 4px was commented out in e3c490b so the pill row lines up with the toggle and text field instead of adding 8px of height.
  • Pill (.v-btn): 14px regular text, 1px $black-color-200 border, min-height: 34px, 4px radius, padding: 4px 32px 4px 12px (right padding reserves room for the absolutely positioned chevron at right: 4px).
  • Hover or open menu (aria-expanded="true"): $black-color-50 background; the chevron rotates 180deg while the menu is open.
  • .is-active (a value from that field is applied): blue border, background and text ($blue-text-color / $blue-bg-color), chevron stroke blue.
  • .popular-filter-pill-count: 18px-high pill badge (min-width 18px, radius 9px), 10px/600 white text on $blue-text-color, 4px left margin.

Inner Search Section (.inner-search-section) ​

In-page search bar used on folder detail, collage detail and shared-assets/[type] pages.

  • Width capped at calc(100% - 100px).
  • .searchType > .v-text-field: fixed 260px, bottom border only, input min-height: 35px. Its margin-block: 4px is also commented out (e3c490b).
  • .open-filter and the filter wrapper's .btn-primary-invert: borderless, 32px high; .btn-gray-invert is hidden here.
  • .mobile-filter: 480px fixed side panel below the 64px header, parked off-screen with translateX(520px) and slid in with .is-open. The .close-filter tab is rotated 90deg and sits at left: -56px. A .v-btn-toggle inside the panel gets margin-bottom: 8px (added in e3c490b) so the toggle no longer touches the filter controls below it.

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)