zhdk/madek

/**
 * ## ui-modals `.ui-modal`
 *
 * .narrow    - Narrow variation
 * .wide      - Wide variation
 * .extrawide - Extra-Wide variation
 * .crucial   - Can be used instead of app-body and is scrollable
 *
 * Styleguide 6.10

// Relies on vendor/bootstrap

.ui-modal
  +border-radius($border-radius-m)
  +box-shadow(0 1px 3px $darken-more)
  +dimension(550px, auto)
  background: $white
  border: 1px solid $mono-dark
  z-index: 2001
  // clipboard is 2000
  &.transparent
    background: none
    border: none
    +box-shadow(none)

.ui-modal-head,
.ui-modal-toolbar,
.ui-modal-body,
.ui-modal-footer
  border-color: $mono-light
  border-style: solid
  padding: $space-s

.ui-modal-head,
.ui-modal-footer
  background: $mono-weak

.ui-modal-head
  +border-top-radius($border-radius-m)
  border-width: 0 0 1px
  padding-right: $space-m
  padding-left: $space-m
  text-align: center

.ui-modal-body
  +box-shadow(inset 0 1px 3px $darken-less, inset 0 -1px 3px $darken-less)
  border-width: 1px 0
  max-height: 480px
  margin: -1px 0
  overflow-y: auto
  padding: $space-m

.ui-modal-footer
  +border-bottom-radius($border-radius-m)
  border-width: 1px 0 0

.ui-modal-close
  +position-top-right(16px, $space-s)
  color: $mono-heavy
  &:hover
    opacity: 1
    text-decoration: none

// Crucial modals

.ui-modal.crucial
  position: relative
  margin-top: 20px
  margin-bottom: 20px

// Size variations

.ui-modal.narrow
  +dimension(400px, auto)
  margin-left: -200px

.ui-modal.wide
  +dimension(800px, auto)
  margin-left: -400px

.ui-modal.extrawide
  +dimension(960px, auto)
  margin-left: -480px

// Small reset for modal elements

.ui-modal-toolbar input[type="text"]
  margin: 0