OddSite 4.0.0

Dropdowns

A flexible pattern for dropdown menus.

.has-dropdown

scss
.has-dropdown {
  position: relative;
}

Apply relative positioning to establish the layout context of a dropdown.

[data-btn~='summary']

scss
[data-btn~='summary'] {
  --marker-color: currentColor;

  [open] > & {
    @include tools.z-index('dropdown');

    @include tools.before('') {
      @include tools.position(0 fixed);
      @include tools.z-index('bump');
      cursor: default;
      display: block;
    }
  }
}

Generates a fixed overlay of the viewport when open. The overlay is part of the summary button, between the dropdown itself and the rest of the page, and acts as a click target to close the dropdown.

[data-dropdown]

scss
[data-dropdown] {
  @include tools.z-index('dropdown');
  background: var(--bg);
  border: thin solid var(--active);
  box-shadow: 0 0 var(--quarter-shim) var(--shadow);
  max-width: calc(100vw - var(--page-margin) * 2);
  min-width: 14em;
  position: absolute;

  &[aria-expanded='false'] {
    display: none;
  }
}

The basic dropdown box, with a max-width of the available space.

[data-dropdown~='pad']

scss
[data-dropdown~='pad'] {
  padding: var(--gutter);
}

Add default padding to dropdowns that don’t need full-width content.

Dropdowns can be aligned with keyword variants

[data-dropdown~='center']

scss
[data-dropdown~='center'] {
  left: 50%;
  transform: translateX(-50%);
}

[data-dropdown~='ltr']

scss
[data-dropdown~='ltr'] {
  left: 0;
}

[data-dropdown~='rtl']

scss
[data-dropdown~='rtl'] {
  right: 0;
}