gulp-starter

1
@mixin custom-checkbox {
2
  position: relative;
3

4
  &__field {
5
    appearance: none;
6
    position: absolute;
7
  }
8

9
  &__content {
10
    padding-left: 25px;
11
    cursor: pointer;
12

13
    &::before {
14
      content: '';
15
      position: absolute;
16
      left: 0;
17
      top: 0;
18
      border: 1px solid #000;
19
      width: 15px;
20
      height: 15px;
21
      box-sizing: border-box;
22
    }
23

24
    &::after {
25
      content: '';
26
      position: absolute;
27
      left: 0;
28
      top: 0;
29
      width: 15px;
30
      height: 15px;
31
      box-sizing: border-box;
32
      background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='fi_32282' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='405.272px' height='405.272px' viewBox='0 0 405.272 405.272' style='enable-background:new 0 0 405.272 405.272;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836 c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064 c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z'%3E%3C/path%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
33
      background-position: center;
34
      background-size: 10px 10px;
35
      background-repeat: no-repeat;
36
      opacity: 0;
37
      transition: opacity 0.3s ease-in-out;
38
    }
39
  }
40
}
41

42
.custom-checkbox__field:checked + .custom-checkbox__content::after {
43
  opacity: 1;
44
}
45

46
.custom-checkbox__field:focus + .custom-checkbox__content::before {
47
  outline: 2px solid #f00;
48
  outline-offset: 2px;
49
}
50

51
.custom-checkbox__field:disabled + .custom-checkbox__content {
52
  opacity: 0.4;
53
  pointer-events: none;
54
}
55