@blexar/framework/src/components/dropdown.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.dropdown
  position: relative
  display: flex
  flex-direction: column
  align-items: flex-start
  &.is-active .dropdown-menu
    transform: scale(1)

  &.is-right
    align-items: flex-end
    .dropdown-menu
      transform-origin: top right

  &.is-center
    align-items: center
    .dropdown-menu
      transform-origin: top center

.dropdown-toggle.button
  marign: 0

.dropdown-item
  display: block
  padding: $padding (2 * $padding)
  color: $black
  &:hover
    background-color: $light
    color: $black
  &.is-active,
  &:focus,
  &:active
    color: $white
    background-color: $primary

.dropdown-menu
  display: flex
  flex-direction: column
  padding: $padding 0
  max-width: 250px
  border-radius: $border-radius
  background-color: $white
  color: $dark
  transform-origin: top left
  user-select: none
  margin: 0
  box-shadow: boxShadow(small)
  transform: scale(0)
  &:empty
    display: none