csv-import/src/importer/components/Checkbox/style/Checkbox.module.scss at aac40afaeacf0a70add88f113aba84774c603a12 · tableflowhq/csv-import · 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
.container {
  display: inline-block;
  gap: var(--csv-m-xs);
  align-items: center;

  &:has(input:not(:disabled)) {
    cursor: pointer;
  }

  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    color: var(--csv-color-primary);
    width: var(--csv-m);
    height: var(--csv-m);
    border: 2px solid var(--csv-color-border);
    display: grid;
    place-content: center;
    border-radius: var(--csv-border-radius-1);
    cursor: pointer;

    &::before {
      content: "";
      width: var(--csv-m-xs);
      height: var(--csv-m-xs);
    }

    &:checked {
      background-color: var(--csv-color-primary);
      border-color: var(--csv-color-primary);
    }

    &:checked::before {
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      box-shadow: inset 1em 1em var(--csv-color-text-on-primary);
    }

    &:not(:disabled) {
      &:focus-visible {
        outline: 1px solid var(--csv-color-border);
        outline-offset: 3px;
      }
    }

    &:disabled {
      --container-color: var(--csv-container-disabled);
      color: var(--csv-container-disabled);
      cursor: default;
      background-color: var(--csv-color-input-disabled);
      border-color: var(--csv-color-border-soft);

      &:checked {
        &::before {
          clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
          box-shadow: inset 1em 1em var(--csv-color-border-soft);
        }
      }
    }
  }
}