Bourbon Modal

styles.sass

.modal
    $base-border-color: #dcdcdc !default
    $base-border-radius: 3px !default
    $base-background-color: #fff !default
    $base-font-size: 1em !default
    $base-line-height: 1.5em !default
    $action-color: #477dca !default
    $dark-gray: #333 !default
    $light-gray: #ddd !default
    $medium-screen: em(640) !default
    $large-screen: em(860) !default
    $base-font-color: $dark-gray !default
    $modal-padding: 3em
    $modal-background: $base-background-color
    $modal-close-color: $light-gray
    $modal-image-height: 135px
    $modal-image-width: $modal-image-height
    $modal-trigger-image-width: 300px

    label
        cursor: pointer
        margin-bottom: 0

        img
            border-radius: $modal-trigger-image-width / 2
            display: block
            max-width: $modal-trigger-image-width

    .modal-fade-screen
        background-color: rgba(#000, 0.85)
        opacity: 0
        padding-top: 0.6em
        text-align: left
        visibility: hidden
        z-index: 99999999999
        @include transition(opacity 0.25s ease)
        @include position(fixed, 0)

        @include media($large-screen)
            padding-top: 10em

        .modal-bg
            cursor: pointer
            @include position(absolute, 0)

    .modal-close
        background: $modal-background
        cursor: pointer
        @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null)
        @include size(1.5em)

        &:after,
        &:before
            background: $modal-close-color
            content: ''
            display: block
            margin: -3px 0 0 -1px
            @include position(absolute, 3px 3px 0 50%)
            @include transform(rotate(45deg))
            @include size(0.15em 1.5em)

        &:hover:after,
        &:hover:before
            background: darken($modal-close-color, 10%)

        &:before
            @include transform(rotate(-45deg))

    .modal-inner
        background: $modal-background
        border-radius: $base-border-radius
        margin-top: 0
        margin: auto
        max-height: 95%
        overflow: auto
        padding: $modal-padding / 2
        position: relative
        width: 95%
        @include transition(opacity 0.25s ease)

        @include media($medium-screen)
            max-height: 70%
            padding: $modal-padding
            width: 60%

        @include media($large-screen)
            width: 50%

        h1
            color: $base-font-color
            margin-bottom: 0 0 0.6em 0
            text-align: left
            text-transform: capitalize

        p
            color: $base-font-color
            line-height: $base-line-height

    &.visible > .modal-fade-screen
        opacity: 1
        visibility: visible

    &.visible > .modal-fade-screen .modal-inner
        top: 0.5em

.modal-open
    overflow: hidden