_draggable.scss 2.09 KB
Newer Older
1
2
.drag-default-button {
    @extend .btn-default; // Button like styling for drag element
Pat Kira's avatar
Pat Kira committed
3
4
    background-color: #ffffff;
    border-color: $list-group-border;
5
6
7
}

.drag-default-button:not(.ui-draggable-dragging) {
Pat Kira's avatar
Pat Kira committed
8
9
    border-left: none; // Don't need side borders because the elements are inside panel
    border-right: none;
10
11
}

12
13
.btn-draggable .btn-group-vertical > .btn,
.list-group.ui-sortable .ui-draggable-dragging {
Naomi Guyer's avatar
Naomi Guyer committed
14
    @extend .icon;
15
16
    font-family: $font-family-base;
    font-size: $font-size-base;
Pat Kira's avatar
Pat Kira committed
17
    padding: 10px 12px 10px 35px;
Naomi Guyer's avatar
Naomi Guyer committed
18
19
20
21
    text-align: left;

    &:before {
        box-sizing: border-box;
Pat Kira's avatar
Pat Kira committed
22
23
        color: #777;
        opacity: 0.7;
24
25
26
27
        content: "";
        font-family: FontAwesome;
        line-height: 1;
        text-rendering: auto;
Naomi Guyer's avatar
Naomi Guyer committed
28
29
30
31
        display: block;
        height: 100%;
        left: 0px;
        line-height: 1.3em;
Pat Kira's avatar
Pat Kira committed
32
        padding: 10px 15px 5px;
Naomi Guyer's avatar
Naomi Guyer committed
33
34
35
36
        position: absolute;
        top: 0px;
        width: 22px;
    }
Pat Kira's avatar
Pat Kira committed
37
38
39
    &.checkbox {
        margin-top: -1px;
    }
Naomi Guyer's avatar
Naomi Guyer committed
40
41
    .checkbox {
        right: 10px;
Pat Kira's avatar
Pat Kira committed
42
        top: 10px;
Naomi Guyer's avatar
Naomi Guyer committed
43
    }
44
45
    label {
        font-size: $font-size-base;
46
        white-space: normal;
47
    }
Naomi Guyer's avatar
Naomi Guyer committed
48
49
50
51
52
53
54
55
56
57
}
.draggable {
    z-index: 1;
    position: relative;
}

.droppable {
    z-index: 0;
    position: relative;
}
Pat Kira's avatar
Pat Kira committed
58

Naomi Guyer's avatar
Naomi Guyer committed
59
// This is a different case where we can use the icon itself
Pat Kira's avatar
Pat Kira committed
60
.icon-drag:before {
Naomi Guyer's avatar
Naomi Guyer committed
61
62
63
64
65
66
67
68
69
70
71
72
    display: block;
    float: left;
    margin-right: 10px;
    height: 100%;
    color: rgba(#555, 0.4);
}

.icon-drag-current {
    border: 1px dashed #ccc;
    min-width: 200px;
}

73
74
#addviews .ui-draggable-dragging {
    width: 100% !important;
Naomi Guyer's avatar
Naomi Guyer committed
75
76
}

77
78
79
80
81
82
83
84
85
// Edit page sortable - hide everything but title
.ui-sortable-helper .blockinstance-content,
.ui-sortable-helper .blockinstance-controls {
    display: none;
}
.ui-sortable-helper.panel-secondary.blockinstance > .panel-heading > .blockinstance-header {
    padding-right: 0;
}

86
87
88
89
90
// Droppable area background indicator
.block-drop-on {
    background: darken($panel-default-heading-bg, 5%) ;
}

Naomi Guyer's avatar
Naomi Guyer committed
91
92
93
94
95
96
97
98
.drag-handle,
.ui-draggable {
  cursor: move;
}

.ui-sortable-helper {
    overflow: hidden;
}
Pat Kira's avatar
Pat Kira committed
99
100
101
102

.ui-sortable {
    list-style-type: none;
}