Skip to content

Header logged out styles

Scott de Jonge requested to merge header-logged-out into master

What does this MR do and why?

Refactor logged out header to isolate styles specific to it's usage

  • Add .header-logged-out parent class and styles
  • Add dropdown overrides with .header-logged-out-dropdown
  • Add button normalizing styles to .header-logged-out-toggle
  • Rename .nav-item to .header-logged-out-nav-item
  • Update logo hover/active appearance to match super sidebar

Screenshots or screen recordings

Before After
gitlab.com_gitlab-org_gitlab_-commits_master_app_views_layouts_header__super_sidebar_logged_out.haml__2 gdk.test_3000_flightjs_Flight_-commit_8749d49930866a4871fa086adbd7d2057fcc3ebb__2
gitlab.com_gitlab-org_gitlab_-commits_master_app_views_layouts_header__super_sidebar_logged_out.haml__1 gdk.test_3000_flightjs_Flight_-commit_8749d49930866a4871fa086adbd7d2057fcc3ebb__1
gitlab.com_gitlab-org_gitlab_-_commits_master_app_views_layouts_header__super_sidebar_logged_out.haml gdk.test_3000_flightjs_Flight_-_commit_8749d49930866a4871fa086adbd7d2057fcc3ebb

How to set up and validate locally

  1. In a logged out window (incognito) view public accessible route e.g. http://gdk.test:3000/explore
  2. Resize window to small size
  3. Review toggle button styles
  4. Review dropdown menu
  5. Review :hover/:active/:focus states for all links/buttons

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Scott de Jonge

Merge request reports