.modal-form-trigger
  @extends $reset-button

.modal-form-underlay
  background: rgba(gray, 0.2)

.modal-form-pointer
  background: white
  box-shadow: 0 0 5px rgba(black 0.3)
  height: 1em
  transform: translateX(0.3em) rotate(45deg)
  width: 1em
  z-index: -1

.modal-form
  background: white
  border-radius: 3px
  box-shadow: 0 5px 15px -5px rgba(black, 0.5)
  color: black
  font-size: 14px
  margin: 0.5em 3vw
  padding: 0.5em 1em

.modal-dialog-toolbar
  bottom: 100%
  margin-bottom: 0.5em
  position: absolute
  right: 0

.modal-dialog-toolbar-button
  @extends $reset-button
  background: rgba(black, 0.5)
  border-radius: 2em
  color: white
  height: 1em
  font-size: 2em
  line-height: 1
  min-width: 1em
  text-shadow: 0 2px 4px black

  &:hover
    background: rgba(black, 0.8)

  &:active
    background: black

.modal-form-trigger
  @extends $reset-button

.modal-form-underlay
  background: rgba(gray, 0.2)
  z-index: 1

.modal-form-pointer
  background: white
  box-shadow: 0 0 5px rgba(black 0.3)
  height: 1em
  transform: translateX(0.3em) rotate(45deg)
  width: 1em
  z-index: -1

.modal-form
  background: white
  border-radius: 3px
  box-shadow: 0 5px 15px -5px rgba(black, 0.5)
  color: black
  font-size: 14px
  margin: 0.5em 3vw
  padding: 0.5em 1em

.modal-dialog-toolbar
  bottom: 100%
  margin-bottom: 0.5em
  position: absolute
  right: 0

.modal-dialog-toolbar-button
  @extends $reset-button
  background: rgba(black, 0.5)
  border-radius: 2em
  color: white
  height: 1em
  font-size: 2em
  line-height: 1
  min-width: 1em
  text-shadow: 0 2px 4px black

  &:hover
    background: rgba(black, 0.8)

  &:active
    background: black

Fix modals on project pages
Fix modals on project pages