587a0fe443
Alters the projector detail interface to provide better usability. Alters the dragging slightly to have a nice preview and smoother transitions.
30 lines
841 B
SCSS
30 lines
841 B
SCSS
//shared CSS rules that are required for all components that implement drag and drop
|
|
/**
|
|
* Moving list entries away from preview cannot be stored in this scss file, cause the naming
|
|
* of the css classes is relevant. Use it like the following.
|
|
*
|
|
* transform can somehow not be stored as css variable
|
|
*
|
|
* @example
|
|
* ```css
|
|
* .drop-list.cdk-drop-list-dragging .list-entry:not(.cdk-drag-placeholder) {
|
|
* transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
* }
|
|
*/
|
|
|
|
.cdk-drag-preview {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.cdk-drag-placeholder {
|
|
opacity: 0;
|
|
}
|
|
|
|
.cdk-drag-animating {
|
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
}
|