resources/assets/stylesheets/scss/enrolment.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
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

#enrollment {
    ul {
        border-top: 1px solid var(--base-color);
        list-style: none inside;
        margin: 0;
        padding: 0;

        li {
            border-bottom: 1px solid var(--base-color);
            padding: 5px;

            &.ui-draggable.ui-draggable-handle {
                cursor: move;
            }

            .actions {
                cursor: pointer;
                float: right;
                white-space: nowrap;
            }

            &::after {
                content: '';
                display: block;
                clear: both;
            }
        }

        &.ui-sortable li.empty {
            cursor: no-drop;
        }
    }

    li.empty:not(:only-child) {
        display: none;
    }

    #available-courses li.visible,
    #selected-courses li {
        &:hover {
            background-color: var(--base-color-20);
        }
    }

    #available-courses li.ui-draggable.ui-draggable-dragging,
    #selected-courses li.ui-sortable-helper {
        background-color: var(--base-color-20);
        border: 1px solid var(--base-color);
        list-style: none inside;
        padding: 5px;
        width: auto;
    }

    #available-courses li:not(.visible) {
        display: none;
    }

    #selected-courses li {
        list-style-type: decimal;

        &.ui-sortable-placeholder,
        &.empty {
            list-style-type: none;
        }

        &.ui-sortable-placeholder {
            background-color: var(--yellow-20);
        }
    }

    .ui-sortable-helper .delete {
        display: none;
    }

    input[name="filter"] {
        margin-bottom: 20px;
    }

    .ui-state-highlight {
        background: var(--red);
        border: 0;
        height: 30px;
        padding: 10px;
    }

    // Show available and selected courses next to each others
    .priority-lists {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

        .available,
        .selected {
            flex: 1;
        }

        .available {
            margin-right: 0.5em;
        }

        .selected {
            margin-left: 0.5em;
            position: sticky;
            top: 0;
        }
    }
}