Josef-Hehmann-Site-Package/Resources/Public/Css/default_form_formframework.scss

.ce.ce-form_formframework {
    margin-top: 2rem;

    h2, .h2 {
        padding-left: 0 !important;
        display: none;
    }
   .input,
   [class^='captcha'],
   [class*='captcha'] {
        margin-bottom: 2rem;
        flex: 0 0 auto;
        width: 50%;
        position: relative;
        border-radius: 0;
        @media (max-width: 767.98px){
            width: 100%;
        }

        &:nth-of-type(even) {
            padding-right: 0;
            @media (max-width: 767.98px){
                padding-left: 0;
            }
            @media (min-width: 768px){
                label {
                    left: 30px;
                    &.input-has-value {
                        left: 15px !important;
                    }
                }
                input, textarea, select {
                    &:focus, &:not(:empty) {
                        + label {
                            left: 15px;
                        }
                    }
                }
                &[class^='singleselect'],
                &[class*='singleselect'] {
                    &::after {
                        right: 1rem;
                    }
                }
                .error {
                    right: 0;
                }
            }
        }
        &:nth-of-type(odd) {
            padding-left: 0;
            @media (max-width: 767.98px){
                padding: 0;
            }
        }
        &[class^='textarea'],
        &[class*='textarea'],
        &[class^='fileupload'],
        &[class*='fileupload'],
        &.checkbox {
            width: 100%;
            padding-right: 0;
            padding-left: 0;
           // margin-bottom: 0;
        }
        &[class^='textarea'],
        &[class*='textarea'] {
            & + .input {
                margin-top: -10px;
            }
        }
        &[class^='fileupload'],
        &[class*='fileupload'] {
            label {
                color: $color_brand_dark;
                font-size: 0.8rem;
                top: -35px;
                left: 0;
                pointer-events: none;
            }
            input {
                padding-top: 8px;
            }
        }
        label {
            top: 0;
            left: 15px;
            right: 0;
            color: $color_basic;;
            display: flex;
            align-items: center;
            position: absolute;
            font-weight: 300;
            cursor: text;
            transition: .2s ease-in-out;
            box-sizing: border-box;
            width: 100%;
            height: 50px;
        }
        input, textarea {
            background-color: rgba($color_basic,0.15);
            border: 0;
            outline: none;
            transition: .2s ease-in-out;
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            font-size: 1rem;
            border-radius: 0;
            padding: 0 15px;
        }
        select {
            width: 100%;
            background-color: rgba($color_basic,0.15);
            font-weight: 300;
            padding-left: 15px;
            border: none;
            height: 50px;
            appearance: none;
        }

        textarea {
            padding-top: 13px;
            min-height: 150px;
        }
        input, textarea, select {
            color: $color_basic;
            font-weight: 300;
            &:focus {
                border-bottom: 1px solid $color_brand;
                + label {
                    color: $color_brand_dark;
                    font-size: 0.8rem;
                    top: -35px;
                    left: 0;
                    pointer-events: none;
                }
            }
            &.error,
            &.f3-form-error {
				border: 1px solid $color_red;
			}
            &:not(:empty) {
                + label {
                    color: $color_brand_dark;
                    font-size: 0.8rem;
                    top: -35px;
                    left: 0;
                    pointer-events: none;
                }
            }

            &.parsley-error {
                border: 1px solid $color_red;
            }
        }
        label.input-has-value {
            //color: $color_brand_dark;
            font-size: 0.8rem;
            top: -35px;
            left: 0;
            pointer-events: none;
        }


        &[class^='singleselect'],
        &[class*='singleselect'] {
            &::after {
                @include icon();
                content: "\f282";
                position: absolute;
                right: calc(1rem + 15px);
                top: 1rem;
                pointer-events: none;
                @media (max-width: 767.98px){
                    right: 1rem;
                }
            }
        }
        &[class^='checkbox'],
        &[class*='checkbox'],
        &[class^='linkedcheckbox'],
        &[class*='linkedcheckbox'] {
            padding-left: 10px;
            float: left;
            margin-top: .5rem;
            margin-bottom: .5rem;

            @media (max-width: 767.98px){
                margin-top: 1rem;
                margin-bottom: 1rem;
            }

            .checkbox, .form-check {
                padding-left: 0;
                label {
                    left: 0;
                    position: relative;
                    height: auto;
                }
                input{
                    height: auto;
                    opacity: 0;
                    position: absolute;
                    &:checked{
                        + span:not(.required){
                            &:before{
                                content: "\F271";
                                animation: effect 250ms ease-in;
                            }
                        }
                    }
                }
                span:not(.required){
                    &:before{
                        content: "\F584";
                        display: inline-block;
                        @include icon;
                        margin-left: -10px;
                        margin-right: 5px;
                        color: $color_brand;
                    }
                    a {
                        position: relative;
                        z-index: 10000;
                    }
                }
                .parsley-error {
                    &::before {
                        content: none !important;
                    }
                }

            }
            .parsley-errors-list {
                position: relative;
                right: inherit;
                left: -10px;
                top: 5px;
            }
        }
        .error {
            position: absolute;
            right: 15px;
            font-size: 0.8rem;
            top: -20px;
            pointer-events: none;
            color: $color_red;
            @media (max-width: 767.98px){
                right: 0;
            }
        }
        .captcha {
            position: absolute;
            top: 0;
            padding-top: 0;
            margin: 0;
        }

   }
   [class^='captcha'],
   [class*='captcha'] {
       width: 100%;
       padding-top: 70px;
       padding-left: 0;
       margin-top: .75rem;
       margin-bottom: 0;

       label {
           top: 70px;
           left: 15px !important;
       }
       input:focus + label,
       label.input-has-value,
       &:nth-of-type(even) label.input-has-value {
           top: calc(-35px + 70px);
           left: 0 !important;
       }

   }

   button,
   .btn-default {
        border: none !important;
        font-weight: 300;
        @include fade();
        &:hover {
            background: $color_brand;
            color: $color_white !important;
        }


    }
}

@keyframes effect{
    0%{transform: scale(0);}
    25%{transform: scale(1.1);}
    75%{transform: scale(1.2);}
    100%{transform: scale(1);}
}