patchsoftware.github.io/src/components/LabelledInput/index.css at development · patchsoftware/patchsoftware.github.io · GitHub

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
.labelled-input label {
  color: rgba(50, 50, 50, .4)
}

.labelled-input .input {
  border: 0;
  width: 100%;
  padding: .4rem 0;
  resize: none;
  outline: none;
  color: rgba(50, 50, 50, 1);

  background-image: linear-gradient(120deg, rgba(50,50,50,0.05) 0%, rgb(50,50,50,0.1) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2rem;
  background-position: 0 100%;
}

.labelled-input .input:valid {
  background-image: linear-gradient(120deg, rgba(52,148,230,0.5) 0%, rgb(236,110,173,0.5) 100%);
}

.labelled-input .input:focus:invalid {
  background-image: linear-gradient(120deg, rgba(229, 57, 53, 0.5) 0%, rgba(227, 93, 91, 0.5) 100%);
}

.labelled-input .input:valid {
  background-image: linear-gradient(120deg, rgba(29, 151, 108, 0.5) 0%, rgba(147, 249, 185, 0.5) 100%);
}