.form { background: $color_white; color: $color_darkgrey; .col, .mb-3 { //position: relative; margin-bottom: 2rem !important; @media (max-width: 1024px) { flex: 1 0 100%; } } .powermail_legend { display: none; } .powermail_fieldwrap_formularabschicken { width: 100%; } .powermail_fieldwrap_loesensiedieaufgabe{ .powermail_field{ width: calc(90% - 200px); } } .powermail_fieldwrap_type_submit { flex: 0 0 auto; width: 100%; text-align: center; margin-bottom: 0 !important; } .powermail_fieldwrap { &.col-md-6 { &:nth-of-type(even) { padding-right: 0; @media (max-width: 1024px){ padding: 0; } } &:nth-of-type(odd) { padding-left: 0; @media (max-width: 1024px){ padding: 0; } } } &.col-md-12 { padding: 0; } } .powermail_fieldwrap_type_check{ .powermail_field { padding-left: 10px; .checkbox { 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; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: -10px; margin-right: 5px; } } &.parsley-error { input, span:not(.required) { &::before { color: $color_red; } } } } .parsley-errors-list { position: relative; right: inherit; left: -10px; top: 5px; } } } .input-container { position: relative; border-radius: 0; input, textarea { background-color: rgba($color_grey,0.10); border: 0; outline: none; transition: .2s ease-in-out; box-sizing: border-box; width: 100%; height: 50px; //font-size: 1rem; color: $color_basic; //font-weight: 700; border-radius: 0; padding: 0 15px; &:valid { + label { /*color: $darkergrey; font-size: 0.8rem; top: -35px; left: 0; pointer-events: none;*/ } } &:focus { border-bottom: 1px solid $color_brand; + label { color: $color_basic; font-size: 0.8rem; top: -35px; left: 0; pointer-events: none; } } &.parsley-error { border: 1px solid $color_red; } } label { top: 0; left: 15px; right: 0; color: $color_basic; display: flex; align-items: center; position: absolute; //font-size: 1.25rem; font-weight: 300; cursor: text; transition: .2s ease-in-out; box-sizing: border-box; width: 100%; height: 50px; } textarea { padding-top: 13px; min-height: 150px; } } .headline { color: $color_white; } input, textarea { border-radius: 0; border: none; //width: 100%; } .powermail_fieldwrap_type_select { position: relative; float: left; select { width: 100%; background: #edf0f0; background-color: rgba($color_grey,0.10); color: $color_basic; font-weight: 300; padding-left: 15px; border: none; height: 50px; appearance: none; background-image: url(../img/midland-it-arrow-abstract-space.svg); background-repeat: no-repeat; background-position: right; background-size: 25px; &.parsley-error { border: 1px solid $color_red; } } label { // font-size: 0.8rem; // top: -20px; // position: absolute; } } .powermail_fieldwrap_type_file { position: relative; float: left; margin-top: 10px; label { font-size: 0.8rem; top: -20px; position: absolute; } } .button, input[type="submit"] { position: relative; float: right; float: none; color: $color_white; background: $color_brand; width: inherit; padding: 10px 15px; text-decoration: none; margin-top: 1rem; border: none; border-radius: 0; @include fade(); &:hover { background: $color_white; color: $color_red; } } .powermail_captcha { padding-left: 200px !important; } .powermail_captchaimage { position: absolute; right: 0; height: 50px; @media (max-width: 768px) { position: relative; float: left; right: inherit; margin-top: 15px; } } .parsley-errors-list { position: absolute; right: 5px; top: 5px; top: -20px; color: $color_red; li { list-style: none; font-size: .8rem; } } h3{ display: none; } // form{ // position: relative; // float: left; // width: 100%; // padding-top: 0; // padding-bottom: 0; // } &.section{ padding-top: 3rem; .h1{ margin-bottom: 1rem; } } } @keyframes effect{ 0%{transform: scale(0);} 25%{transform: scale(1.1);} 75%{transform: scale(1.2);} 100%{transform: scale(1);} }