dragula.css in Opigno group manager 8
.gu-mirror {
position: fixed!important;
margin: 0!important;
z-index: 9999!important;
opacity: .8;
}
.gu-hide {
display: none!important
}
.gu-unselectable {
user-select: none!important
}
.gu-transit {
z-index: 15;
}
.gu-transit .drag-and-drop-item {
box-shadow: none!important;
opacity: .2;
border: 5px dashed;
}
.gh-fork {
position: fixed;
top: 0;
right: 0;
border: 0;
}
table.drag-and-drop-wrapper {
width: auto;
border-spacing: 0;
margin: 0;
border-collapse: collapse !important;
}
table.drag-and-drop-wrapper td.drag-and-drop-bag {
vertical-align: top;
padding: 0;
background-color: transparent!important;
border-left: 3rem solid;
border-right: 3rem solid;
border-top: 5rem solid;
border-bottom: 5rem solid;
/*border-color: #fcfcfc;*/
border-color: transparent;
min-width: 300px;
width: 300px;
height: 300px;
box-sizing: content-box;
position: relative;
}
table.drag-and-drop-wrapper td.drag-and-drop-bag.first {
border-left: 0;
}
table.drag-and-drop-wrapper td.drag-and-drop-bag.last {
/*border-right: 0;*/
}
table.drag-and-drop-wrapper tr.first td.drag-and-drop-bag {
border-top: 0;
}
table.drag-and-drop-wrapper tr.last td.drag-and-drop-bag {
/*border-bottom: 0;*/
}
table.drag-and-drop-wrapper td.drag-and-drop-bag .drag-and-drop-item {
cursor: move;
width: 300px;
height: 300px;
box-sizing: border-box;
position: absolute;
}
/*
* note that styling gu-mirror directly is a bad practice because it's too generic.
* you're better off giving the draggable elements a unique class and styling that directly!
*/
.drag-and-drop-bag td, .gu-mirror {
background-color: rgba(0, 0, 0, 0.2);
transition: opacity 0.4s ease-in-out;
}
.gu-mirror {
cursor: grabbing;
}
.handle {
padding: 0 5px;
margin-right: 5px;
background-color: rgba(0, 0, 0, 0.4);
cursor: move;
}
nested-repeat-example .drag-and-drop-bag span {
display: block;
padding: 8px;
}
File
ng/src/assets/css/dragula.css
View source
- .gu-mirror {
- position: fixed!important;
- margin: 0!important;
- z-index: 9999!important;
- opacity: .8;
- }
-
- .gu-hide {
- display: none!important
- }
-
- .gu-unselectable {
- user-select: none!important
- }
-
- .gu-transit {
- z-index: 15;
- }
-
- .gu-transit .drag-and-drop-item {
- box-shadow: none!important;
- opacity: .2;
- border: 5px dashed;
- }
-
- .gh-fork {
- position: fixed;
- top: 0;
- right: 0;
- border: 0;
- }
-
- table.drag-and-drop-wrapper {
- width: auto;
- border-spacing: 0;
- margin: 0;
- border-collapse: collapse !important;
- }
-
- table.drag-and-drop-wrapper td.drag-and-drop-bag {
- vertical-align: top;
- padding: 0;
- background-color: transparent!important;
- border-left: 3rem solid;
- border-right: 3rem solid;
- border-top: 5rem solid;
- border-bottom: 5rem solid;
- /*border-color: #fcfcfc;*/
- border-color: transparent;
- min-width: 300px;
- width: 300px;
- height: 300px;
- box-sizing: content-box;
- position: relative;
- }
-
- table.drag-and-drop-wrapper td.drag-and-drop-bag.first {
- border-left: 0;
- }
-
- table.drag-and-drop-wrapper td.drag-and-drop-bag.last {
- /*border-right: 0;*/
- }
-
- table.drag-and-drop-wrapper tr.first td.drag-and-drop-bag {
- border-top: 0;
- }
-
- table.drag-and-drop-wrapper tr.last td.drag-and-drop-bag {
- /*border-bottom: 0;*/
- }
-
- table.drag-and-drop-wrapper td.drag-and-drop-bag .drag-and-drop-item {
- cursor: move;
- width: 300px;
- height: 300px;
- box-sizing: border-box;
- position: absolute;
- }
-
-
- /*
- * note that styling gu-mirror directly is a bad practice because it's too generic.
- * you're better off giving the draggable elements a unique class and styling that directly!
- */
-
- .drag-and-drop-bag td, .gu-mirror {
- background-color: rgba(0, 0, 0, 0.2);
- transition: opacity 0.4s ease-in-out;
- }
-
- .gu-mirror {
- cursor: grabbing;
- }
-
- .handle {
- padding: 0 5px;
- margin-right: 5px;
- background-color: rgba(0, 0, 0, 0.4);
- cursor: move;
- }
-
- nested-repeat-example .drag-and-drop-bag span {
- display: block;
- padding: 8px;
- }