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