Skip to content

Drawer styling when it contains sidebar content

Following up on styling of the drawer content when it contains sidebar type content and settings. This is expanding on gitlab-design#559 (closed) and was opened to iterate on changes made in gitlab!21962 (merged)

General drawer iterations
  • Drawer header = ui/2-h2/4-base
  • Drawer shadow = There are two defined in the design of the component
    • Shadow 1 =
      • Color: #000000, Alpha: 5
      • x: -12
      • y: 0
      • Blur: 12
      • Spread: -8
    • Shadow 2=
      • Color: #000000, Alpha: 15
      • x: -6
      • y: 0
      • Blur: 8
      • Spread: -4
Drawer styling with sidebar content
  • Content header (ie: Epic) = ui/7-md/label/primary/left
  • Value when not defined (ie: none) = ui/7-md/label/secondary/left
  • Value when defined (ie: Epic ABC) = ui/7-md/label/primary/bold/left
  • Static edit link = ui/7-md/label/primary/left
  • Edit link hover styling =
    • text-decoration: underline;
    • color: #134a81
  • Other sidebar links (not "Edit") = ui/7-md/label/primary/bold/left
    • text-decoration: underline;
    • color: #134a81
Edited by Holly Reynolds