tools-modal.component.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .modal-dimensions {
  2. width: 40vw;
  3. background-color: var(--modal-background);
  4. border-radius: 10px;
  5. border: 1px solid var(--border-color);
  6. padding: 1rem;
  7. }
  8. //
  9. .example-list {
  10. width: 100%;
  11. border: solid 1px #ccc;
  12. min-height: 60px;
  13. display: block;
  14. background: white;
  15. border-radius: 4px;
  16. overflow: hidden;
  17. }
  18. .example-box {
  19. padding: 20px 10px;
  20. border-bottom: solid 1px #ccc;
  21. color: rgba(0, 0, 0, 0.87);
  22. display: flex;
  23. position: relative;
  24. flex-direction: column;
  25. // align-items: center;
  26. justify-content: space-between;
  27. box-sizing: border-box;
  28. cursor: move;
  29. background: white;
  30. font-size: 14px;
  31. }
  32. .cdk-drag-preview {
  33. box-sizing: border-box;
  34. border-radius: 4px;
  35. box-shadow:
  36. 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  37. 0 8px 10px 1px rgba(0, 0, 0, 0.14),
  38. 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  39. }
  40. .cdk-drag-placeholder {
  41. opacity: 0;
  42. }
  43. .cdk-drag-animating {
  44. transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  45. }
  46. .example-box:last-child {
  47. border: none;
  48. }
  49. .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  50. transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  51. }