cncjs

1
@import "../variables";
2

3
.workspace {
4
    .dropzone-overlay {
5
        position: fixed;
6
        top: $navbar-height;
7
        bottom: 0;
8
        left: $sidebar-width;
9
        right: 0;
10
        z-index: 100;
11
        background-color: rgba(255, 255, 255, .5);
12
        border: 4px dashed #286090;
13
        text-align: center;
14
        pointer-events: none;
15

16
        &.hidden {
17
            display: none;
18
        }
19

20
        .text-block {
21
            position: absolute;
22
            top: 25%;
23
            left: 50%;
24
            transform: translate(-50%, -50%);
25
            color: #666;
26
            font-size: 32px;
27
        }
28
    }
29
    .dropzone {
30
        height: 100%;
31
    }
32

33
    .workspace-table {
34
        display: table;
35
        width: 100%;
36
        height: 'calc(100vh - %s)' % ($navbar-height);
37
    }
38
    .workspace-table-row {
39
        display: table-row;
40
    }
41

42
    .primary-container,
43
    .secondary-container,
44
    .primary-toggler,
45
    .secondary-toggler,
46
    .default-container {
47
        display: table-cell;
48
        position: relative;
49
    }
50
    .primary-container {
51
        border-right: 1px solid #ccc;
52
    }
53
    .secondary-container {
54
        border-left: 1px solid #ccc;
55
    }
56
    .primary-container,
57
    .secondary-container {
58
        vertical-align: top;
59
        background-color: #f6f7f8;
60
        width: 360px;
61
        max-width: 360px;
62
        min-width: 360px;
63
        padding: 0 10px;
64

65
        &.hidden {
66
            display: none;
67
        }
68
    }
69
    .primary-toggler,
70
    .secondary-toggler {
71
        background-color: #f6f7f8;
72
        padding-top: 5px;
73
        text-align: center;
74
        width: $toggler-width;
75

76
        // http://stackoverflow.com/questions/32272158/how-to-use-a-stylus-variable-in-calc
77
        height: 'calc(100vh - %s)' % ($navbar-height);
78
    }
79
    .primary-toggler {
80
        border-right: 1px solid #ccc;
81
    }
82
    .secondary-toggler {
83
        border-left: 1px solid #ccc;
84
    }
85
    .default-container {
86
        min-width: 360px;
87

88
        &.fixed {
89
            position: fixed;
90
            left: 360px;
91
            right: 360px;
92
            top: ($navbar-height + 1);
93
            bottom: 0;
94
        }
95
    }
96
}
97