← Back to branch summary

~hanspayer/+junk/kobersdorf

« back to all changes in this revision

Viewing changes to static/cms/sass/components/_structureboard.scss

  • Committer: Payer Hans-Christian
  • Date: 2016-03-29 20:18:05 UTC
  • Revision ID: hans@net-so.org-20160329201805-cs2re2zwb7svwje4
base template working

Show diffs side-by-side

added added

removed removed

Lines of Context:
static/cms/sass/components/_structureboard.scss
 
1
//##############################################################################
 
2
// STRUCTURE
 
3
 
 
4
.cms-structure-dynamic {
 
5
    position: absolute;
 
6
    overflow: hidden;
 
7
}
 
8
 
 
9
.cms-droppable {
 
10
    position: relative;
 
11
    z-index: z(structure, content, droppable);
 
12
    line-height: 0;
 
13
    height: 0;
 
14
    min-height: 0;
 
15
    box-shadow: 0 0 0 2px $color-primary;
 
16
    transform: translateY(2px);
 
17
    .cms-draggable + & {
 
18
        transform: translateY(-2px);
 
19
    }
 
20
    &:before {
 
21
        content: "";
 
22
        position: absolute;
 
23
        top: -8px;
 
24
        left: -4px;
 
25
        width: 0;
 
26
        height: 0;
 
27
        border-top: 8px solid transparent;
 
28
        border-bottom: 8px solid transparent;
 
29
        border-left: 8px solid $color-primary;
 
30
    }
 
31
}
 
32
.cms-draggables > .cms-droppable:first-child {
 
33
    transform: translateY(-2px);
 
34
}
 
35
.cms-draggables > .cms-droppable:only-child {
 
36
    transform: translateY(2px);
 
37
}
 
38
 
 
39
.cms-structure {
 
40
    display: none;
 
41
    position: fixed;
 
42
    top: 0;
 
43
    overflow: hidden;
 
44
    z-index: z(structure, base);
 
45
    width: 100%;
 
46
    height: 100%;
 
47
    background: $structure-bgcolor;
 
48
 
 
49
    .cms-structure-content {
 
50
        position: absolute;
 
51
        top: 0;
 
52
        left: 0;
 
53
        z-index: z(structure, content, base);
 
54
        width: 100%;
 
55
        height: 100%;
 
56
        transform: translateZ(0);
 
57
        user-select: none;
 
58
        -webkit-overflow-scrolling: touch;
 
59
    }
 
60
 
 
61
    //###########################################################
 
62
    // #DRAGAREA#
 
63
    // basically a cms placeholder representation
 
64
    .cms-dragarea {
 
65
        position: absolute;
 
66
        margin: 0 0 $structure-dragarea-space;
 
67
        padding: $structure-dragarea-padding $structure-dragarea-padding-horizontal;
 
68
    }
 
69
 
 
70
    .cms-dragarea-static {
 
71
        .cms-dragarea-static-icon {
 
72
            position: relative;
 
73
            top: 2px;
 
74
        }
 
75
    }
 
76
 
 
77
    // subclasses for the simple structure borad without absolute positioning
 
78
    .cms-structure-content-simple {
 
79
        position: relative;
 
80
        overflow-y: scroll;
 
81
        height: 100%;
 
82
        padding: ($toolbar-height + 40px) 5%;
 
83
        @media (max-width: 480px) {
 
84
            padding-left: 0;
 
85
            padding-right: 0;
 
86
        }
 
87
    }
 
88
    .cms-dragarea-simple {
 
89
        position: static;
 
90
        max-width: $structure-max-width;
 
91
        margin: $structure-dragarea-margin-vertical auto;
 
92
    }
 
93
 
 
94
    //###########################################################
 
95
    // #DRAGBAR#
 
96
    //
 
97
    // Placeholder box title
 
98
    .cms-dragbar {
 
99
        position: relative;
 
100
        top: 0;
 
101
        left: 0;
 
102
        font-size: $font-size-normal;
 
103
        line-height: $line-height-normal;
 
104
        padding-left: $border-radius-normal + 2px;
 
105
        border-radius: $border-radius-base;
 
106
 
 
107
        .cms-dragbar-title {
 
108
            display: inline-block;
 
109
            position: relative;
 
110
            color: $structure-dragbar-color;
 
111
            font-size: $font-size-large;
 
112
            font-weight: bold;
 
113
            line-height: $structure-dragbar-height;
 
114
            height: $structure-dragbar-height;
 
115
            margin-right: $submenu-icon-area-size;
 
116
        }
 
117
        .cms-dragbar-toggler {
 
118
            font-weight: normal;
 
119
            text-transform: uppercase;
 
120
            margin-left: 30px;
 
121
            cursor: pointer;
 
122
            a {
 
123
                color: $color-primary !important;
 
124
                font-size: $font-size-small !important;
 
125
                &:hover {
 
126
                    color: darken($color-primary, 10%) !important;
 
127
                }
 
128
            }
 
129
        }
 
130
        .cms-dragbar-collapse-all {
 
131
            display: none;
 
132
        }
 
133
        .cms-dragbar-expand-all {
 
134
            display: inline;
 
135
        }
 
136
        .cms-dragbar-title-expanded {
 
137
            .cms-dragbar-collapse-all {
 
138
                display: inline;
 
139
            }
 
140
            .cms-dragbar-expand-all {
 
141
                display: none;
 
142
            }
 
143
        }
 
144
    }
 
145
 
 
146
    // #DRAGBAR/empty#
 
147
    .cms-dragbar-empty {
 
148
        font-size: $font-size-small;
 
149
        text-transform: uppercase;
 
150
        padding-top: 0;
 
151
        padding-bottom: 0;
 
152
    }
 
153
 
 
154
    .cms-dragarea-empty {
 
155
        .cms-dragbar-empty-wrapper {
 
156
            display: block !important;
 
157
        }
 
158
        .cms-dragbar-toggler {
 
159
            display: none;
 
160
        }
 
161
    }
 
162
 
 
163
    //###########################################################
 
164
    // #DRAGITEM#
 
165
    .cms-draggables {
 
166
        margin: 0;
 
167
        padding: 0;
 
168
        list-style-type: none;
 
169
    }
 
170
    .cms-draggables.cms-hidden {
 
171
        display: none !important;
 
172
    }
 
173
    .cms-draggables .cms-draggables {
 
174
        padding-left: $structure-draggable-inner-padding;
 
175
    }
 
176
    .cms-dragarea-empty .cms-draggables-root {
 
177
        position: relative;
 
178
        min-height: 46px;
 
179
        border: 2px solid $btn-default-border;
 
180
        border-radius: $border-radius-base;
 
181
    }
 
182
 
 
183
    // #DRAGGABLES/general#
 
184
    .cms-draggable {
 
185
        display: block !important; // fixes hide/show with jqueryui so the scroll doesn't jump
 
186
        top: 0;
 
187
        left: 0;
 
188
        margin-left: 0 !important;
 
189
        padding: 0;
 
190
        border-radius: $border-radius-base;
 
191
        white-space: nowrap;
 
192
        list-style-type: none;
 
193
        -ms-touch-action: none;
 
194
        touch-action: none;
 
195
 
 
196
        // levels
 
197
        .cms-draggable {
 
198
            border-color: $gray-lighter;
 
199
            &:hover {
 
200
                border-color: $gray-light;
 
201
            }
 
202
        }
 
203
 
 
204
        // menu overwrites
 
205
        .cms-submenu-dropdown-top {
 
206
            top: $structure-dragitem-height + $structure-dragarea-padding * 2;
 
207
        }
 
208
        .cms-submenu-dropdown-bottom {
 
209
            bottom: $structure-dragitem-height + $structure-dragarea-padding * 2;
 
210
        }
 
211
 
 
212
        .cms-dragitem {
 
213
            line-height: $structure-dragitem-height;
 
214
            border: 2px solid $structure-bgcolor;
 
215
        }
 
216
        .cms-dragitem-text {
 
217
            position: relative;
 
218
            display: block;
 
219
            overflow: hidden;
 
220
            text-overflow: ellipsis;
 
221
            white-space: nowrap;
 
222
            padding: $structure-dragarea-padding $structure-dragarea-padding-horizontal;
 
223
            margin-right: $submenu-icon-area-size * 3 + $submenu-right * 4;
 
224
        }
 
225
        .cms-dragitem-collapsable .cms-dragitem-text {
 
226
            padding-left: $structure-dragitem-icon-space;
 
227
        }
 
228
    }
 
229
 
 
230
    .cms-collapsable-container.cms-hidden > .cms-draggable {
 
231
        display: none !important;
 
232
    }
 
233
 
 
234
    .cms-draggable-success {
 
235
        position: relative;
 
236
    }
 
237
 
 
238
    .cms-draggables-empty {
 
239
        display: none;
 
240
    }
 
241
    .cms-dragarea-empty {
 
242
        .cms-droppable {
 
243
            position: absolute;
 
244
            top: -1px;
 
245
            right: -1px;
 
246
            bottom: -1px;
 
247
            left: -1px;
 
248
            z-index: z(structure, content, empty, droppable);
 
249
            color: $gray;
 
250
            line-height: $structure-dragitem-height;
 
251
            height: auto;
 
252
            margin: 0;
 
253
            border: 2px solid $color-primary;
 
254
            border-radius: $border-radius-base;
 
255
            background-color: mix(white, $color-primary, 90%);
 
256
            box-shadow: none;
 
257
            transform: translateY(0) !important;
 
258
            &:before {
 
259
                display: none;
 
260
            }
 
261
            &.cms-draggable-disallowed {
 
262
                border: 2px solid saturate($color-danger, 80%);
 
263
                background: rgba($color-danger, 0.1);
 
264
            }
 
265
        }
 
266
        .cms-draggables-empty {
 
267
            display: block;
 
268
            position: absolute;
 
269
            top: 0;
 
270
            right: 0;
 
271
            bottom: 0;
 
272
            left: 0;
 
273
            z-index: z(structure, content, empty, empty);
 
274
            color: $gray;
 
275
            line-height: 44px;
 
276
            padding-left: 20px;
 
277
        }
 
278
    }
 
279
 
 
280
    // #DRAGGABLES/specific#
 
281
    .cms-draggable {
 
282
        color: $black;
 
283
    }
 
284
    .cms-draggable-is-dragging {
 
285
        z-index: z(default);
 
286
        width: $structure-draggable-width-while-dragging !important;
 
287
        height: $structure-dragitem-fullheight !important;
 
288
        border-radius: 0;
 
289
        transform: translateZ(0);
 
290
        .cms-dragitem {
 
291
            color: $white !important;
 
292
            border: none;
 
293
            border-radius: 0;
 
294
            background-color: $color-primary !important;
 
295
            background-image: none !important;
 
296
            &:before {
 
297
                display: none;
 
298
                color: white;
 
299
            }
 
300
            .cms-draggables {
 
301
                display: none;
 
302
            }
 
303
            .cms-dragitem-text {
 
304
                padding-left: $structure-dragarea-padding-horizontal;
 
305
            }
 
306
        }
 
307
        .cms-dragitem-text {
 
308
            margin-right: 0;
 
309
        }
 
310
        &.cms-draggable-from-clipboard .cms-dragitem-text {
 
311
            margin-right: $padding-large;
 
312
        }
 
313
        &.cms-draggable-disabled > .cms-draggable {
 
314
            display: none !important;
 
315
        }
 
316
    }
 
317
    .cms-draggable-stack {
 
318
        overflow: hidden;
 
319
        height: $structure-dragitem-fullheight !important;
 
320
        box-shadow: 1px 1px 1px rgba($black ,0.2),
 
321
        4px 4px 0 0 $color-primary;
 
322
    }
 
323
 
 
324
    .cms-dragitem {
 
325
        position: relative;
 
326
        border-radius: $border-radius-normal;
 
327
        cursor: move;
 
328
        background: $white;
 
329
        @if ($structure-dragarea-use-background == 1) {
 
330
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABCCAAAAAB73glBAAAAAnRSTlMAAHaTzTgAAAAeSURBVHgBY7gCBgxAAGHRRoAKYOi5dNSloy4ddSkA3VChcDH0cxcAAAAASUVORK5CYII=");
 
331
            background-repeat: no-repeat;
 
332
            background-position: 10px 50%;
 
333
            background-size: 8px 33px;
 
334
        }
 
335
        &:hover {
 
336
            box-shadow: inset 0 0 0 1px $gray-light;
 
337
        }
 
338
    }
 
339
    .cms-dragitem-collapsable {
 
340
        @include icon(arrow-wide);
 
341
        &:before {
 
342
            @extend %icon;
 
343
            position: absolute;
 
344
            top: 50%;
 
345
            cursor: pointer;
 
346
            left: $structure-dragitem-icon-space - $structure-dragarea-padding-horizontal - 10px;
 
347
            color: $submenu-icon-color;
 
348
            font-size: $structure-dragitem-icon-size;
 
349
            margin-top: -$structure-dragitem-icon-size/2;
 
350
            margin-left: $structure-dragarea-padding-horizontal - 10px;
 
351
            transform: rotate(180deg);
 
352
        }
 
353
        .cms-dragitem-text {
 
354
            cursor: pointer;
 
355
        }
 
356
    }
 
357
    .cms-dragitem-expanded:before {
 
358
        transform: rotate(-90deg);
 
359
    }
 
360
    .cms-dragitem-success {
 
361
        position: absolute;
 
362
        top: -1px;
 
363
        right: -1px;
 
364
        bottom: -1px;
 
365
        left: -1px;
 
366
        z-index: z(structure, content, droppable);
 
367
        border-radius: $border-radius-base;
 
368
        opacity: 0.6;
 
369
    }
 
370
 
 
371
    // #DRAGGABLES/states#
 
372
 
 
373
    .cms-draggable-selected .cms-dragitem,
 
374
    .cms-draggable-selected .cms-dragitem strong {
 
375
        color: adjust-hue($color-primary, 15deg);
 
376
    }
 
377
    .cms-draggable-selected .cms-draggable .cms-dragitem,
 
378
    .cms-draggable-selected .cms-draggable .cms-dragitem strong {
 
379
        color: $black;
 
380
    }
 
381
 
 
382
    .cms-draggable-allowed,
 
383
    .cms-draggable-hover-allowed,
 
384
    .cms-draggable-placeholder {
 
385
        color: lighten($color-primary, 40%);
 
386
        border-color: lighten($color-primary, 40%);
 
387
    }
 
388
    .cms-draggable-hover-allowed,
 
389
    .cms-draggable-placeholder {
 
390
        color: $white;
 
391
        background: rgba($color-primary, 0.2);
 
392
    }
 
393
    .cms-dragitem-success {
 
394
        border: 1px solid $color-primary;
 
395
        background: mix(white, $color-primary, 80%);
 
396
    }
 
397
 
 
398
    .cms-draggable-disallowed,
 
399
    .cms-draggable-hover-disallowed {
 
400
        color: saturate($color-danger, 80%);
 
401
        background: rgba($color-danger, 0.1);
 
402
        box-shadow: 0 0 0 2px saturate($color-danger, 80%);
 
403
        &:before {
 
404
            display: none;
 
405
        }
 
406
    }
 
407
 
 
408
    // hide arrow when adding plugin-in-plugin within disabled item
 
409
    .cms-draggable-disabled {
 
410
        .cms-submenu {
 
411
            display: none;
 
412
        }
 
413
 
 
414
        > .cms-dragitem-collapsable,
 
415
        > .cms-dragitem {
 
416
            .cms-submenu {
 
417
                display: block;
 
418
            }
 
419
        }
 
420
 
 
421
        .cms-draggable {
 
422
            margin-left: $structure-draggable-inner-padding !important;
 
423
            .cms-dragitem {
 
424
                background-image: none;
 
425
                &:hover {
 
426
                    box-shadow: none;
 
427
                }
 
428
            }
 
429
        }
 
430
 
 
431
        .cms-draggables,
 
432
        .cms-droppable {
 
433
            display: none !important;
 
434
        }
 
435
    }
 
436
    .cms-plugin-disabled {
 
437
        position: absolute;
 
438
        top: 50%;
 
439
        right: $submenu-right;
 
440
        width: $submenu-icon-area-size;
 
441
        height: $submenu-icon-area-size;
 
442
        margin-top: -($submenu-icon-area-size / 2);
 
443
        .cms-icon {
 
444
            $submenu-icon-size: 20px;
 
445
            position: absolute;
 
446
            top: 50%;
 
447
            left: 50%;
 
448
            color: $submenu-icon-color;
 
449
            font-size: $submenu-icon-size;
 
450
            margin-top: -($submenu-icon-size / 2);
 
451
            margin-left: -($submenu-icon-size / 2);
 
452
        }
 
453
    }
 
454
 
 
455
    // end of dragarea
 
456
    .cms-is-dragging {
 
457
        display: block !important;
 
458
        opacity: 0.3;
 
459
    }
 
460
}
 
461
 
 
462
@at-root .cms-structure-mode-structure {
 
463
    overflow: hidden;
 
464
    // min-height is necessary for iOS9
 
465
    // when we have a page that has content
 
466
    // that takes less than a screen structureboard
 
467
    // becomes unusable because it tries to fit
 
468
    // in the size of the content and not the size
 
469
    // of the device screen
 
470
    min-height: 100%;
 
471
}
 
472
 
 
473
// hide elements when dragging
 
474
@at-root .ui-sortable-helper.cms-draggable .cms-submenu-btn {
 
475
    display: none !important;
 
476
}
 
477
@at-root .ui-sortable-helper.cms-draggable .cms-draggables {
 
478
    display: none !important;
 
479
}