Merge branch 'master' of https://github.com/brown-dash/Dash-Web into nathan-starter

1 files changed, 85 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss b/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss
new file mode 100644
index 000000000..819c72760
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.scss
@@ -0,0 +1,85 @@
+.image-box-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 10px;
+    line-height: 1;
+    background: none;
+    z-index: 1000;
+    padding: 0px;
+    overflow: auto;
+    cursor: default;
+}
+
+.image-label-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center; // Centers the content vertically in the flex container
+    width: 100%;
+
+    > div {
+        display: flex;
+        justify-content: space-between; // Puts the content and delete button on opposite ends
+        align-items: center;
+        width: 100%;
+        margin-top: 8px; // Adds space between label rows
+        background-color: black;
+
+        p {
+            text-align: center; // Centers the text of the paragraph
+            font-size: large;
+            vertical-align: middle;
+            margin-left: 10px;
+        }
+
+        .IconButton {
+            // Styling for the delete button
+            margin-left: auto; // Pushes the button to the far right
+        }
+    }
+}
+
+.image-information-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.image-information {
+    border: 1px solid;
+    width: 100%;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 2px;
+    overflow-x: auto;
+    overflow-y: auto;
+
+    img {
+        max-width: 200px;
+        max-height: 200px;
+        width: auto;
+        height: auto;
+    }
+}
+
+.image-information-labels {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .image-label {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding: 3px;
+        border-radius: 2px;
+        border: solid 1px;
+    }
+}