ok

2025-02-12 15:00:08 +07:00
parent 98ed1fe365
commit e21e0f513f
3 changed files with 358 additions and 85 deletions
--- a/src/components/ItemConfig.module.css
+++ b/src/components/ItemConfig.module.css
@@ -0,0 +1,101 @@
+/* Modal.module.css */
+
+.overlay {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    z-index: 200;
+    background-color: rgba(0, 0, 0, 0.38); /* #00000061 */
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+    height: 40%;
+    background-color: white;
+    border-radius: 20px 20px 0 0;
+    overflow-y: auto;
+}
+
+.imageContainer {
+    display: flex;
+}
+
+.image {
+    width: 26vw;
+    height: 26vw;
+    margin-right: 10px;
+}
+
+.imagePreview {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    object-fit: cover;
+}
+
+.changeImageButton {
+    width: 140px;
+    height: 40px;
+    align-content: center;
+    text-align: center;
+    border-radius: 10px;
+    border: 1px solid #60d37e;
+    color: #60d37e;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.inputField {
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-size: 14px;
+    width: 100%;
+    margin-bottom: 15px;
+    outline: none;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+}
+
+.inputField:focus {
+    border-color: #60d37e;
+}
+
+.inputField:blur {
+    border-color: #ccc;
+}
+
+.textarea {
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-size: 14px;
+    width: 100%;
+    margin-bottom: 15px;
+    outline: none;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    resize: none; /* Prevent manual resize that could cause overflow */
+}
+
+.saveButton {
+    width: 100%;
+    height: 40px;
+    align-content: center;
+    text-align: center;
+    border-radius: 10px;
+    border: 1px solid #60d37e;
+    color: #60d37e;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}