assets/sass/checklist.scss


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

body {
    article section.page div.content {
        div.checklist-header {
            .form-control-file {
                position: relative;
                width: 100%;
                height: 100%;
                min-height: 6em;
                outline: none;
                visibility: hidden;
                cursor: pointer;
                background-color: #c61c23;
                box-shadow: 0 0 5px solid currentColor;

                &:before {
                    content: attr(data-title);
                    position: absolute;
                    top: 0.5em;
                    left: 0;
                    width: 100%;
                    min-height: 4em;
                    line-height: 0.5em;
                    padding-top: 1.5em;
                    opacity: 1;
                    visibility: visible;
                    text-align: center;
                    border: 0.25em dashed currentColor;
                    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                    overflow: hidden;
                }

                &:hover {
                    &:before {
                        border-style: solid;
                        box-shadow: inset 0px 0px 0px 0.25em currentColor;
                    }
                }
            }
        }


        div.checklist-footer {
            margin-top: 2em;
            margin-bottom: 2em;
            text-align: center;
        }
    }

    
        #TableOfContents > ul  li {
            input {
                margin-right: 0.3em;
            }
            
            &:not(.cl-ready):not(.cl-done):not(.cl-doing) {
                input{
                   visibility: hidden;    
                }
            }            

            &.cl-ready,&.cl-doing,&.cl-done {
                input {
                    visibility: visible;
                }
            }
        }
    
}