1
2
3
4
5
6
7
{
  "name": "email",
  "action": "",
  "type": "email",
  "label": "Your email",
  "submit": "Subscribe"
}

1
2
3
4
5
6
7
<form action="{{ action }}" class="m-single-field-form">
	<input aria-label="{{ label }}" class="m-single-field-form__input" type="{{ type }}" name="{{ name }}" placeholder="{{ label }}">
	<button class="m-single-field-form__button" type="submit">
		{{ submit }}
	</button>
	<span class="m-single-field-form__rule"></span>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.m-single-field-form {
  display: flex;
  position: relative;

  &__input {
    @include reset-input;
    flex: 1;
    margin-right: 8px;
  }

  &__rule {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom-width: 2px;
  }

  &__input:hover ~ &__rule {
    border-color: var(--color--rules--primary);
  }

  &__input:focus ~ &__rule {
    border-color: var(--color--action);
  }

  &__button {
    @include reset-btn;
    @include button-focus;
  }

  &__input,
  &__button {
    @include f-ui-1;
    padding-top: 4px;
    padding-bottom: 8px;
  }
}