diff options
| author | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2024-06-03 13:33:37 -0400 |
|---|---|---|
| committer | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2024-06-03 13:33:37 -0400 |
| commit | 9e77f980e7704999ef0a1c1845d660bccb13ff8a (patch) | |
| tree | 14ca0da5915e4382a7bcb15f7d0b241941c8291f /src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss | |
| parent | 1be63695875c9242fba43d580465e8765cf3991d (diff) | |
| parent | 202e994515392892676f8f080852db1e32b8dbd3 (diff) | |
Merge branch 'master' into nathan-starter
Diffstat (limited to 'src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss new file mode 100644 index 000000000..e7413bf8e --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss @@ -0,0 +1,44 @@ +#label-handler { + display: flex; + flex-direction: column; + align-items: center; + + > div:first-child { + display: flex; // Puts the input and button on the same row + align-items: center; // Vertically centers items in the flex container + + input { + color: black; + } + + .IconButton { + margin-left: 8px; // Adds space between the input and the icon button + width: 19px; + } + } + + > div:not(:first-of-type) { + 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 + + p { + text-align: center; // Centers the text of the paragraph + flex-grow: 1; // Allows the paragraph to grow and occupy the available space + } + + .IconButton { + // Styling for the delete button + margin-left: auto; // Pushes the button to the far right + } + } + } +} |
