.example-list { max-width: 100%; border: solid 1px #323232; min-height: 60px; display: block; background: transparent; border-radius: 4px; overflow: hidden; } .damage-list{ display: flex; flex-direction: column; } .damage-row{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.1rem; // margin: 0.5rem; } .damage-icon{ height: 1rem; width: 1rem; } .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; color: rgba(0, 0, 0, 0.87); display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; cursor: move; background: white; font-size: 14px; input{ border: none; background: transparent; text-align: center; } } //////////////// list item elemens //////////////// .vertical-line{ width: 1px; height: 3rem; border-left: solid 1px rgb(121, 121, 121) } .weapon-type{ width: 2rem; text-align: center; } .weapon-proficient{ width: 2rem; text-align: center; } .weapon-name{ width: 6rem; text-align: center; } .weapon-attack-bonus{ width: 2rem; text-align: center; } .weapon-damage{ width: 3rem; text-align: center; } .weapon-range{ width: 4rem; text-align: center; } .weapon-edit{ width: 3rem; text-align: center; } ////////////////////////////////////////////////// .add-box{ text-align: center; } .add-form-group{ display: flex; flex-direction: column; gap: 1rem; } .form-element{ display: flex; flex-direction: column; // gap: 0.1rem; // align-items: center; // justify-content: center; } .form-element-row{ display: flex; flex-direction: row; // gap: 2rem; justify-content: space-around; text-align:center; } // Drag and Drop .cdk-drag-preview { box-sizing: border-box; border-radius: 4px; 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); } .example-box:last-child { border: none; } .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }