UNPKG

@ruliad-engr/forms

Version:
217 lines (216 loc) 3.97 kB
.form { &__button { width: 100%; &-item { min-width: 240px; } } } .form { &__group { margin: 0; &-wrapper { display: flex; ^^&__item { margin: 0 20px 0 0; } } } } .form { &__header { width: 100%; position: relative; &-wrapper { position: relative; } &-title { width: 100%; position: relative; &-text { width: 100%; max-width: var(--max); color: var(--color-surface-text-primary); margin: 0 auto; position: relative; align-self: center; @mixin h4 500; } &-desc { width: 100%; color: var(--color-surface-text-primary); padding: 12px 0 0 0; position: relative; @mixin text-xl; @media (--mobile) { padding: 24px 0 0 0; grid-row-start: 3; grid-column: 1 / 3; } } } } } .form { &__item { &_reset-fill { & input, & textarea { background: none; } } } } .form { &__item { &&_state_error { /* & ^&-label { &-inner { color: var(--color-error-text-secondary); } } & ^&-inner { &-item { } } */ } } } .form { &__item { &&_state_required { & ^&-inner { &-item { } } } } } .form { &__item { &&_state_success { /* & ^&-label { &-inner { color: var(--color-success-text-primary); } } & ^&-inner { &-item { } } */ } } } .form { &__item { &&_type_float { position: relative; &^&_state_focus, &^&_state_filled { & .form { &__item { &-label { top: 0; transform: scale(0.7) translate(6px, 14px); } } } & .form-input, & .form-textarea { &__input { &::placeholder { color: var(--color-surface-text-secondary); } } } } & .form { &__item { &-wrapper { position: relative; } &-label { pointer-events: none; color: var(--color-surface-text-secondary); position: absolute; display: flex; top: 28px; z-index: 2; transform: scale(1) translate(0, -50%); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top left; @media (--mobile) { top: 26px; } &-inner { margin: 0 0 0 16px; @mixin text-m; } } } } & .form-input, & .form-textarea { &__input { padding: 22px 16px 10px 16px; &::placeholder { color: transparent; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } } } } } } .form { &__text { width: 100%; position: relative; } } .form-response { background: var(--color-surface-primary); padding: 30px; display: flex; flex-flow: column nowrap; align-items: center; @mixin elevation-2; &__icon { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; & svg { fill: var(--color-surface-item-accent); transform: scale(4.18); } } &__title { max-width: 240px; color: var(--color-surface-text-primary); text-align: center; padding: 0; margin: 0 0 8px 0; @mixin h5; } &__text { max-width: 240px; color: var(--color-surface-text-primary); text-align: center; padding: 0; margin: 0; @mixin text-l; } &__button { width: 100%; margin: 30px 0 0 0; } } .form { width: 100%; &__wrapper { width: 100%; position: relative; } }