clover-ai/src/components/Input/style.module.css at 487b9a58ee7a9f6f1889a912c7c442ce464c9ff3 · charlesLoder/clover-ai · 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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.container {
  /* input container layout */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--clover-ai-fontSizes-1) / var(--golden-ratio));

  /* shared styles */
  --accent-color: var(--clover-ai-colors-accentMuted);

  input {
    width: 100%;
    outline: none;
    transition:
      border-color 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;
    font-size: var(--clover-ai-fontSizes-3);

    --input-border-radius: var(--clover-ai-sizes-2);
    border-radius: var(--input-border-radius);

    --input-border-width: 1px;
    border-width: var(--input-border-width);

    --input-border-style: solid;
    border-style: var(--input-border-style);

    --input-border-color: var(--accent-color);
    border-color: var(--input-border-color);

    --input-padding: var(--clover-ai-sizes-2);
    padding: var(--input-padding);

    --input-background-color: initial;
    background-color: var(--input-background-color);

    &:focus {
      --input-box-shadow-color: color-mix(in srgb, var(--input-border-color) 10%, transparent);
      --input-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--input-box-shadow-color);
      box-shadow: var(--input-box-shadow);
    }

    &:user-invalid {
      --input-border-color: var(--clover-ai-colors-error);
    }
  }

  label,
  .helperText {
    font-size: var(--clover-ai-fontSizes-2);
  }

  * {
    font-family: inherit;
  }
}

/* Error state */
.container[data-error="true"] {
  --accent-color: var(--clover-ai-colors-error);
  --input-border-color: var(--clover-ai-colors-error);

  label {
    color: var(--accent-color);
  }

  .helperText {
    color: var(--accent-color);
  }
}

.container:has(input:required) {
  label::after {
    content: " *";
    color: var(--clover-ai-colors-error);
  }
}

/* Size styles */
.container[data-size="small"] {
  /* decrease the font sizes by 1 */
  input {
    font-size: var(--clover-ai-fontSizes-2);
  }

  label,
  .helperText {
    font-size: var(--clover-ai-fontSizes-1);
  }
}

.container[data-size="large"] {
  /* increase the font sizes by 2 */
  input {
    --input-padding: var(--clover-ai-sizes-3);
    font-size: var(--clover-ai-fontSizes-5);
  }

  label,
  .helperText {
    font-size: var(--clover-ai-fontSizes-3);
  }
}

/* Input prop styles */
input:disabled {
  cursor: not-allowed;
}

input:read-only:focus {
  --input-box-shadow-color: none;
  --input-box-shadow: none;
}