blog/_src/_assets/styl/_kremalicious/vex.styl

.vex,
.vex *,
.vex *:before,
.vex *:after
    box-sizing: border-box

.vex
    position: fixed
    overflow: auto
    -webkit-overflow-scrolling: touch
    z-index: 1111
    top: 0
    right: 0
    bottom: 0
    left: 0

.vex-scrollbar-measure
    position: absolute
    top: -9999px
    width: 50px
    height: 50px
    overflow: scroll

.vex-content
    animation: vex-fadein .3s
    background: #fff

    .vex.vex-closing &
        animation: vex-fadeout .2s

.vex-dialog-form
    margin: 0 // Browser reset

.vex-dialog-button
    text-rendering: optimizeLegibility
    appearance: none
    cursor: pointer
    -webkit-tap-highlight-color: transparent

// Prevent background scrolling when vex is open
// https://github.com/HubSpot/vex/issues/18
body.vex-open
    overflow: hidden


//
// Custom theme
//
.vex-theme-kremalicious
    display: flex
    align-items: center
    justify-content: center
    background: alpha($body-bg, .9)
    backdrop-filter: blur(5px)
    animation: vex-fadein .3s

    .vex.vex-closing &
        animation: vex-fadeout .3s

    .vex-content
        background: transparent
        padding: 0
        position: relative
        width: 100%
        max-width: $screen-xs-min
        border-radius: $border-radius-base
        border: 1px solid alpha($brand-grey-light, .4)
        box-shadow: 0 5px 30px alpha($brand-grey-light, .2)
        padding: 0 $spacer

    .vex__title
        @extend .h4
        margin-top: ($spacer/2)
        margin-left: -($spacer)
        margin-right: -($spacer)
        border-bottom: 1px solid alpha($brand-grey-light, .4)
        padding-bottom: ($spacer/2)

    .vex-dialog-buttons
        margin-top: $spacer
        border-top: 1px solid alpha($brand-grey-light, .4)
        padding-top: ($spacer/2)

    .vex-dialog-button
        @extend .btn

    .vex-dialog-button-primary
        @extend .btn-primary

    .vex-close
        @extend .close
        position: absolute
        top: ($spacer/4)
        right: ($spacer/2)


        &:before
            @extend .close
            content: "\00D7" // ×
            display: block

        &:hover,
        &:focus
            &:before
                color: $link-color

//
// Overlay/content animations
//
@keyframes vex-fadein
        0%
            opacity: 0
        100%
            opacity: 1

@keyframes vex-fadeout
        0%
            opacity: 1
        100%
            opacity: 0