xref: /plugin/acknowledge/style.less (revision b55c1d2d1a0da3f1d0a253b758a162b4c0c2a0a0) 
1@check-ok-color: #355723;
2@check-needed-color: #840705;
3
4.plugin_acknowledgement_admin {
5    nav {
6        box-sizing: border-box;
7
8        width: 100%;
9        display: flex;
10        justify-content: space-between;
11
12        border: 1px solid @ini_border;
13        padding: 1em;
14        margin-bottom: 1em;
15    }
16
17    table {
18        width: 100%;
19    }
20}
21
22// Neutral wrapper: the AJAX response fills this with one or two separate boxes
23.plugin-acknowledge-banner {
24    display: block;
25
26    // keep the boxes from touching when both are shown
27    .plugin-acknowledge-box + .plugin-acknowledge-box {
28        margin-top: 1em;
29    }
30}
31
32.plugin-acknowledge-box {
33    // table is block-level (so boxes stack vertically) but shrinks to its
34    // content width instead of filling the full page width
35    display: table;
36    padding: 1.2em 1.5em;
37    border: 1px solid @ini_border;
38    border-radius: 4px;
39    background-color: @ini_background_alt;
40    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
41
42    // icon column / content column sit side by side
43    > .ack-icon,
44    > .content {
45        display: table-cell;
46        vertical-align: top;
47    }
48
49    > .ack-icon {
50        padding-right: .8em;
51    }
52
53    .ack-icon svg {
54        fill: @check-needed-color;
55    }
56
57    &.done .ack-icon svg {
58        fill: @check-ok-color;
59    }
60
61    &.report .ack-icon svg {
62        fill: @ini_text;
63    }
64}
65
66// personal acknowledgement banner
67.plugin-acknowledge-box.ack {
68    .ack-icon svg {
69        width: 48px;
70        height: 48px;
71    }
72
73    label {
74        margin-top: 1em;
75        display: block;
76    }
77}
78
79// manager/admin report
80.plugin-acknowledge-box.report {
81    .ack-icon svg {
82        width: 1.5em;
83        height: 1.5em;
84    }
85}
86