responsive

src/theme/variables.scss

@@ -1,6 +1,7 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import "~@angular/material/theming";
+@import '~src/function.scss';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -488,7 +489,7 @@ $app-theme: mat-light-theme(
 }
 .approve-event-time p {
   font-family: Roboto;
-  font-size: 13px;
+  font-size: rem(13) ;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
@@ -505,7 +506,7 @@ $app-theme: mat-light-theme(
 .approve-event-detail p {
   width: 250px;
   font-family: Roboto;
-  font-size: 13px;
+  font-size: rem(13);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
@@ -518,7 +519,7 @@ $app-theme: mat-light-theme(
 .approve-event-detail h3 {
   width: 250px;
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
   font-weight: bold;
   font-stretch: normal;
   font-style: normal;
@@ -530,7 +531,7 @@ $app-theme: mat-light-theme(
 }
 
 .nav-icon {
-  font-size: 40px;
+  font-size: rem(40);
 }
 
 .btn-div {
@@ -644,7 +645,7 @@ $app-theme: mat-light-theme(
   .label {
     border-radius: 20px;
     background: #ffb703;
-    font-size: 12px;
+    font-size: rem(12);
     float: right;
     padding: 2.5px 13.5px 2.5px 13.5px;
     color: #fff;