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-org/gitlab-design#559 (closed) and was opened to iterate on changes made in gitlab-org/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