[ FormFullBleat ] sass

[ FormFullBleat ] sass

.contact_form
    position: relative
    overflow: hidden
    z-index: 1

    form
        filter: blur(0px)
        transition: all .5s ease

        textarea,
        input[type=text]
            border: none ! important
            outline: none ! important
            box-shadow: none ! important
            padding: .5em .2em
            color: black

        .checkbox
            font: 1.1em/1.2em "Verdana"

            input
                position: absolute
                z-index: -1
                opacity: 0
                margin: 10px 0 0 20px

            .checkbox__text
                position: relative
                padding: 0 0 0 60px
                cursor: pointer

                &:before
                    content: ''
                    position: absolute
                    top: 6px
                    left: 0
                    width: 50px
                    height: 26px
                    border-radius: 13px
                    background: #CDD1DA
                    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2)
                    transition: .2s

                &:after
                    content: ''
                    position: absolute
                    top: 8px
                    left: 2px
                    width: 22px
                    height: 22px
                    border-radius: 10px
                    background: #FFF
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
                    transition: .2s

        .checkbox input
            &:checked + .checkbox__text
                &:before
                    background: #9FD468
                &:after
                    left: 26px
                &:focus + .checkbox__text:before
                    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 0, 0.7)

        .btn[type=submit]
            padding-left: 2vw
            padding-right: 2vw

        ._input
            position: relative

            &:before,
            &:after
                content: ''
                position: absolute
                bottom: 0%
                left: 15px
                right: 15px
                margin: auto auto auto 0
                width: 100%
                height: .1em
                background: #adadad
                transition: all .5s ease

            &:hover
                &:before
                    z-index: 2
                    width: 10%
                    background: black

            &:active
                &:before
                    width: 100%
                    z-index: 1
                    background: black

    ._success
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: -1
        display: flex
        align-items: center
        justify-content: center
        opacity: 0
        background: rgba(255,255,255,.5)
        transform: scale(2, 2)
        transition: transform .5s ease

        p
            text-align: center
            font: 1.4em / 1.4em "Verdana"
            color: green

    &._complete_
        form
            filter: blur(2px)

        ._success
            opacity: 1
            transform: scale(1, 1)
            z-index: 1