Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- &__input {
- position: relative;
- width: calc(100% - 28px);
- max-width: 290px;
- margin-bottom: 60px;
- &--filled {
- .contact__input-field {
- opacity: 1;
- transition-delay: 0.3s;
- }
- .contact__input-label:before {
- transform: translate3d(-10%, 0, 0);
- border: 1px solid $green;
- border-right: none;
- }
- .contact__input-label:after {
- transform: translate3d(10%, 0, 0);
- border: 1px solid $green;
- border-left: none;
- }
- .contact__input-label-content {
- animation: anim-input 0.3s forwards;
- color: $green;
- @media (max-width: 768px) {
- animation: anim-input2 0.3s forwards;
- }
- }
- }
- @media (max-width: 1024px) {
- margin: 0 24px 60px 24px;
- }
- @media (max-width: 768px) {
- margin: 0 16px 34px 16px;
- }
- @media (max-width: 480px) {
- max-width: 360px;
- margin: 0 0 34px 0;
- }
- }
- &__input-field {
- width: 100%;
- height: 60px;
- position: relative;
- display: block;
- padding: 10px;
- border: none;
- border-radius: 0;
- background: transparent;
- font: 400 14px/1 Open Sans, sans-serif;
- text-align: center;
- color: $gray;
- opacity: 0;
- transition: opacity 0.3s;
- &:hover {
- &+.contact__input-label:before {
- border: 1px solid $green;
- border-right: none;
- }
- &+.contact__input-label:after {
- border: 1px solid $green;
- border-left: none;
- }
- }
- &:focus {
- outline: none;
- opacity: 1;
- transition-delay: 0.3s;
- &+.contact__input-label:before {
- transform: translate3d(-10%, 0, 0);
- border: 1px solid $green;
- border-right: none;
- }
- &+.contact__input-label:after {
- transform: translate3d(10%, 0, 0);
- border: 1px solid $green;
- border-left: none;
- }
- &+.contact__input-label {
- .contact__input-label-content {
- animation: anim-input 0.3s forwards;
- color: $green;
- @media (max-width: 768px) {
- animation: anim-input2 0.3s forwards;
- }
- }
- }
- }
- &--invalid {
- outline: none;
- opacity: 1;
- transition-delay: 0.3s;
- &+.contact__input-label:before {
- transform: translate3d(-10%, 0, 0);
- border: 1px solid $red;
- border-right: none;
- }
- &+.contact__input-label:after {
- transform: translate3d(10%, 0, 0);
- border: 1px solid $red;
- border-left: none;
- }
- }
- }
- &__input-label {
- display: inline-block;
- width: 100%;
- height: 60px;
- position: absolute;
- top: 0;
- left: 0;
- padding: 0 10px;
- font: 300 16px/1 Source Sans Pro, sans-serif;
- color: $gray1;
- user-select: none;
- pointer-events: none;
- &:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 50%;
- height: 100%;
- border: 1px solid $lightgray3;
- border-radius: 15px 0 0 15px;
- transition: transform 0.3s;
- border-right: none;
- }
- &:after {
- content: '';
- position: absolute;
- top: 0;
- left: 50%;
- width: 50%;
- height: 100%;
- border: 1px solid $lightgray3;
- border-radius: 0 15px 15px 0;
- border-left: none;
- transition: transform 0.3s;
- }
- }
Add Comment
Please, Sign In to add comment