sass/uchu/_form.scss


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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

fieldset {
  position: relative;

  button {
    margin-top: 1rem; padding: 0.5rem calc(0.75rem + 2px);

    border: none;
    display: block;
    text-transform: lowercase;

    &:not(:disabled) {
      background-color: var(--uchu-gray-9);
      color: var(--uchu-gray-2);
      cursor: pointer;
    }

    &:disabled {
      background-color: var(--uchu-gray-2);
      color: var(--uchu-gray-6);
      cursor: not-allowed;
    }
  }

  label {
    color: var(--uchu-gray-5);
    font-size: 80%;
    position: absolute;
    padding-top: 4px;
    padding-left: calc(0.75rem + 2px);
    text-transform: lowercase;

    + input,
    + select {
      background-color: var(--uchu-gray-2);
      border: 2px solid;
      transition: border-color 0.2s;
      width: 400px;

      @media (prefers-reduced-motion: reduce)  {
        transition: none;
      }

      &::placeholder {
        color: var(--uchu-gray-5);
        opacity: 1;
      }

      &:not(:focus) {
        border-color: var(--uchu-gray-2);
      }

      &:focus {
        border-color: var(--uchu-blue-4);
        box-shadow: none;
        outline: none;
      }
    }

    + select {
      background-image: url("/media/svg/caret-down.svg");
      background-position: right 1rem bottom 0.7rem;
      background-repeat: no-repeat;
      background-size: 1rem;
      padding: 1.5rem 0.75rem 0.5rem 0.5rem;
    }

    + input {
      padding: 1.5rem 0.75rem 0.5rem 0.75rem;

      &:invalid {
        border-color: var(--uchu-red-5);
        box-shadow: none;
        outline: none;
      }
    }
  }
}