diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss index 41b0ccb6..0f7fb264 100644 --- a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss +++ b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss @@ -90,7 +90,7 @@ height: 100vh; } .drag-handle{ position: absolute; - top: 5px; + top: 15px; right: 5px; cursor: move; } @@ -109,4 +109,79 @@ height: 100vh; .horizontal-list{ padding:0px; } +} + + + + + + + + + + + + + + + +/* General Box Styles */ +.box { + display: flex; + justify-content: space-between; + align-items: center; + // width: 250px; + width: 90%; + cursor: grab; + height: 60px; + padding: 12px; + border-left: 5px solid #99bcd8; + border-right: 1px solid black; + border-top: 1px solid black; + border-bottom: 1px solid black; + border-radius: 8px; + background: white; + // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); + font-weight: bold; + // transition: transform 0.2s ease-in-out; + position: relative; +} + +/* Restricting drag to within the box */ +.box cdkDrag { + width: 100%; + height: 100%; +} + +/* Prevent dragging outside the box */ +.cdk-drag-preview { + max-height: 60px; +} + +/* List Styles */ +.vertical-list { + display: flex; + flex-direction: column; + gap: 12px; + width:100%; + align-items: center; +} + +.horizontal-list { + display: flex; + flex-direction: row; + gap: 12px; +} + +/* Drag Handle Styling */ +.drag-handle { + cursor: grab; + font-size: 18px; + padding: 5px; + display: flex; + align-items: center; +} + +.mt-1r { + padding-top: 1rem !important; } \ No newline at end of file diff --git a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss index 4b80d099..f3c0b23a 100644 --- a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss +++ b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss @@ -164,7 +164,7 @@ p { align-items: center; gap: 20px; padding: 30px; - background: #f0f0f0; + // background: #f0f0f0; border-radius: 20px; }