_check-box.scss

        
            
1
            /* Check Boxes */
        
            
2
            
        
            
3
            .check-box {
        
            
4
              StBoxLayout {
        
            
5
                spacing: 8px;
        
            
6
              }
        
            
7
            
        
            
8
              StBin {
        
            
9
                transition-duration: $duration;
        
            
10
                width: 24px;
        
            
11
                height: 24px;
        
            
12
                padding: ($medium-size - 24px) / 2;
        
            
13
                border-radius: $medium-size / 2;
        
            
14
              }
        
            
15
            
        
            
16
              StBin,
        
            
17
              &:focus StBin {
        
            
18
                background-image: url("assets/checkbox-off.svg");
        
            
19
              }
        
            
20
            
        
            
21
              &:focus StBin {
        
            
22
                background-color: overlay("focus", $on-surface);
        
            
23
              }
        
            
24
            
        
            
25
              &:hover StBin {
        
            
26
                background-color: overlay("hover", $on-surface);
        
            
27
              }
        
            
28
            
        
            
29
              &:active StBin {
        
            
30
                transition-duration: $duration-ripple;
        
            
31
                background-color: overlay("pressed", $on-surface);
        
            
32
              }
        
            
33
            
        
            
34
              &:checked StBin,
        
            
35
              &:checked:focus StBin {
        
            
36
                background-image: url("assets/checkbox.svg");
        
            
37
              }
        
            
38
            
        
            
39
              &:checked:focus StBin {
        
            
40
                background-color: overlay("focus", $primary);
        
            
41
              }
        
            
42
            
        
            
43
              &:checked:hover StBin {
        
            
44
                background-color: overlay("hover", $primary);
        
            
45
              }
        
            
46
            
        
            
47
              &:checked:active StBin {
        
            
48
                background-color: overlay("pressed", $primary);
        
            
49
              }
        
            
50
            }
        
            
51