blexar/src/stylus/components/modal.styl

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

.modal
  position: relative
  z-index: 999
  display: flex
  flex-direction: column
  justify-content: center
  align-items: stretch
  margin: $margin $gutter-full
  padding: $modal-spacing
  width: 100%
  border: 0
  border-radius: $borderRadius
  background-color: $white
  max-width: 800px
  max-height: calc(100vh - 40px)
  box-shadow: 0 15px 20px -10px alpha($black, 20%)
  @extends $normal

  &-header
    position: relative
    margin-bottom: $modal-spacing

  &-title
    margin: 0

  &-body
    position: relative
    overflow: auto
    padding: 0
    max-height: 50vh

  &-icon
    margin-{$dir-end}: $modal-spacing

  &-footer
    margin-top: $modal-spacing

    .button
      margin-{$dir-end}: $modal-spacing * 0.5
    >*
      margin-bottom: 0

  &-dismiss
    position: absolute
    top: 0
    z-index: 9999
    padding: $modal-spacing * 0.5
    border: 0
    background-color: transparent
    {$dir-end}: 0
    cursor: pointer
    _icon-color: inherit

    &:hover
      _icon-color: $primary

  &-container
    position: fixed
    top: 0
    right: 0
    left: 0
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100vh
    background-color: alpha($black, 10%)
    z-index: 999

    &.is-hidden
      display: none

    &.is-visable
      display: flex

  for color in $modifiers-color
    $accentColor = lookup('$' + color)
    $textColor = isLight(color) ? $dark : $accentColor
    &.is-{color}
      _modal-color: $accentColor $textColor

  &.is-outline
    border-width: 1px
    border-style: solid
    background-color: transparent