@ruliad-engr/forms
Version:
Forms fields, inputs, etc.
217 lines (216 loc) • 3.97 kB
CSS
.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;
}
}