style(arc-saas): responsive screens of main module

responsive screens of main module

GH-34

Author: Deepika516

projects/saas-ui/src/app/main/components/add-plan/add-plan.component.html

@@ -1,4 +1,4 @@
-<nb-card class="h-100 card-row">
+<nb-card class="h-100 card-row card-wrapper">
   <nb-card-body class="m-0">
     <div class="main-wrapper">
       <div>

projects/saas-ui/src/app/main/components/add-plan/add-plan.component.scss

@@ -1,5 +1,6 @@
 @use '../../../../styles.scss' as *;
 @use '../../styles/grid-styles.scss' as *;
+
 .input-wrapper {
   display: flex;
   gap: 10px;
@@ -19,13 +20,16 @@
       background: #fff;
     }
   }
+
   .select {
     width: 100%;
   }
 }
+
 .input-radio {
   width: 100%;
 }
+
 .radioselect {
   nb-radio-group {
     display: flex;
@@ -41,6 +45,7 @@
   margin-top: 5px;
   border: 1px solid #000;
 }
+
 .regbtn {
   text-align: right;
   margin: 10px;
@@ -50,3 +55,45 @@
 input.ng-invalid.ng-touched {
   border: 1px solid red;
 }
+
+/* Media Queries for Responsiveness */
+
+@media (max-width: 576px) {
+  .input-box {
+    width: 100%;
+  }
+
+  .card-wrapper {
+    padding: 0;
+  }
+
+  .input-wrapper {
+    gap: 5px;
+  }
+
+  .regbtn {
+    text-align: center;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .input-box {
+    width: 100%;
+  }
+
+  .regbtn {
+    text-align: center;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .input-box {
+    width: 48%;
+  }
+}
+
+@media (min-width: 992px) {
+  .input-box {
+    width: 48%;
+  }
+}

projects/saas-ui/src/app/main/styles/grid-styles.scss

@@ -29,3 +29,41 @@
     }
   }
 }
+
+/* Media Queries for Responsiveness */
+
+@media (max-width: 576px) {
+  .heading {
+    font-size: 18px;
+  }
+
+  .ag-theme-quartz {
+    height: 350px;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .heading {
+    font-size: 20px;
+  }
+
+  .ag-theme-quartz {
+    height: 400px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .heading {
+    font-size: 22px;
+  }
+
+  .ag-theme-quartz {
+    height: 450px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .ag-theme-quartz {
+    height: 550px;
+  }
+}