style: ImagePicker 768-480px responsive

fixing #116
roman-ojha · Jul 6, 2022 · fe6ec22 · fe6ec22
1 parent 78936b0
commit fe6ec22
Showing 1 changed file with 72 additions and 67 deletions.
diff --git a/client/src/styles/components/imagePicker.css b/client/src/styles/components/imagePicker.css
@@ -132,6 +132,63 @@
 }
 
 @media screen and (max-width: 1024px) and (min-width: 768px) {
+  .ImagePicker_Content_Container {
+    border-radius: 8px;
+    padding: 15px;
+  }
+
+  .ImagePicker_Content_Container h2 {
+    font-size: 0.7rem;
+  }
+
+  .ImagePicker_Image_Url_Field {
+    border-radius: 4px;
+    border-width: 1.5px;
+    margin-bottom: 5px;
+    height: 1.5rem;
+    padding: 3px;
+  }
+
+  .ImagePicker_Image_Url_Field:read-write {
+    font-size: 0.8rem;
+  }
+
+  .ImagePicker_File_Picker_Label_Container {
+    padding: 4px;
+    gap: 8px;
+    border-radius: 4px;
+  }
+
+  .ImagePicker_File_Picker_Label_Container label {
+    font-size: 0.8rem;
+  }
+
+  .ImagePicker_File_Picker_Label_Container svg {
+    font-size: 0.8rem;
+  }
+
+  .ImagePicker_Content_Preview {
+    height: 40vh;
+    border-radius: 8px;
+  }
+
+  .ImagePicker_Content_Preview h3 {
+    font-size: 0.7rem;
+  }
+
+  .ImagePicker_Content_Preview_ImgElement {
+    border-radius: 8px;
+  }
+
+  .ImagePicker_Submit_Button {
+    padding: 8px;
+    border-radius: 4px;
+    border-width: 0px;
+    font-size: 0.8rem;
+  }
+}
+
+@media screen and (max-width: 768px) and (min-width: 480px) {
   .ImagePicker_Page {
     position: fixed;
     width: 100%;
@@ -145,24 +202,14 @@
   }
 
   .ImagePicker_Content_Container {
-    /* border: 1px solid red; */
-    width: 40%;
-    height: 80vh;
-    background-color: white;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    text-align: center;
-    padding: 15px;
-    box-sizing: border-box;
+    width: 60%;
+    height: 70vh;
+    border-radius: 7px;
+    padding: 10px;
   }
 
   .ImagePicker_Content_Container h2 {
-    font-family: var(--primary-font-family);
-    font-size: 0.7rem;
-    font-weight: 600;
+    font-size: 0.65rem;
   }
 
   .ImagePicker_Image_Url_Container {
@@ -172,42 +219,19 @@
   .ImagePicker_Image_Url_Field {
     border-radius: 4px;
     border-width: 1.5px;
-    border-style: solid;
-    width: 100%;
     margin-bottom: 5px;
-    height: 1.5rem;
+    height: 1.3rem;
     padding: 3px;
-    border-color: rgb(150, 150, 150);
-  }
-
-  .ImagePicker_Image_Url_Field:focus {
-    outline: none;
   }
 
   .ImagePicker_Image_Url_Field:read-write {
-    font-family: var(--primary-font-family);
-    font-size: 0.8rem;
-    text-align: center;
-  }
-
-  /* .ImagePicker_File_Picker_Container {
-} */
-
-  .ImagePicker_File_Picker_Field {
-    position: absolute;
-    display: none;
+    font-size: 0.7rem;
   }
 
   .ImagePicker_File_Picker_Label_Container {
-    /* border: 1px solid red; */
-    background-color: #c9c9c9;
     padding: 4px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    gap: 8px;
     border-radius: 4px;
-    cursor: pointer;
-    transition-duration: 200ms;
   }
 
   .ImagePicker_File_Picker_Label_Container:hover {
@@ -216,51 +240,32 @@
 
   .ImagePicker_File_Picker_Label_Container label {
     cursor: pointer;
-    font-size: 0.8rem;
+    font-size: 0.7rem;
   }
 
   .ImagePicker_File_Picker_Label_Container svg {
-    font-size: 0.8rem;
+    font-size: 0.7rem;
   }
 
   .ImagePicker_Content_Preview {
     width: 65%;
-    height: 40vh;
-    background-color: var(--logo-icon-low-opacity-black-color);
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 35vh;
+    border-radius: 6px;
   }
 
   .ImagePicker_Content_Preview h3 {
-    color: white;
-    font-family: var(--primary-font-family);
     font-size: 0.7rem;
-    font-weight: 600;
   }
 
   .ImagePicker_Content_Preview_ImgElement {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 8px;
+    border-radius: 6px;
   }
 
   .ImagePicker_Submit_Button {
-    padding: 8px;
+    padding: 6px;
     border-radius: 4px;
     border-width: 0px;
-    background-color: var(--primary-color);
-    color: white;
-    font-family: var(--primary-font-family);
-    font-size: 0.8rem;
-    cursor: pointer;
-    transition-duration: 200ms;
+    font-size: 0.7rem;
     width: 65%;
   }
-
-  .ImagePicker_Submit_Button:hover {
-    background-color: var(--primary-color-button-hover-color);
-  }
 }