Update font size and line height in aside menu

src/assets/css/style.css

@@ -861,7 +861,14 @@ body {
 
 /* Aside */
 
+.aside-text {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .aside-single-item-active {
+  font-size: 0.75rem;
+  line-height: 1rem;
   display: flex;
   width: 100%;
   align-items: center;
@@ -870,8 +877,6 @@ body {
   padding-bottom: 0.5rem;
   padding-left: 0.5rem;
   padding-right: 1rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
   font-weight: 700;
@@ -880,6 +885,8 @@ body {
 }
 
 .aside-single-item-inactive {
+  font-size: 0.75rem;
+  line-height: 1rem;
   display: flex;
   width: 100%;
   align-items: center;
@@ -888,8 +895,6 @@ body {
   padding-bottom: 0.5rem;
   padding-left: 0.5rem;
   padding-right: 1rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -3259,6 +3264,11 @@ body {
   font-family: Plus Jakarta Sans, sans-serif;
 }
 
+.\!text-xs {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -5881,10 +5891,6 @@ body {
     margin-left: 1.5rem;
   }
 
-  .md\:mr-3 {
-    margin-right: 0.75rem;
-  }
-
   .md\:mr-6 {
     margin-right: 1.5rem;
   }
@@ -5917,11 +5923,6 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:rounded-t-3xl {
-    border-top-left-radius: 1.5rem;
-    border-top-right-radius: 1.5rem;
-  }
-
   .md\:bg-primary-500 {
     --tw-bg-opacity: 1;
     background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -5931,11 +5932,6 @@ body {
     padding: 5rem;
   }
 
-  .md\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   .md\:py-0 {
     padding-top: 0px;
     padding-bottom: 0px;
@@ -5949,6 +5945,11 @@ body {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -5978,6 +5979,10 @@ body {
     margin-right: 0.25rem;
   }
 
+  .lg\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
   .lg\:mt-12 {
     margin-top: 3rem;
   }
@@ -6040,6 +6045,11 @@ body {
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .lg\:rounded-t-3xl {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
   .lg\:border-b-0 {
     border-bottom-width: 0px;
   }
@@ -6048,6 +6058,11 @@ body {
     border-right-width: 1px;
   }
 
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

src/assets/css/tailwind.css

@@ -26,8 +26,11 @@
         @apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
     }
     /* Aside */
+    .aside-text{
+        @apply text-xs;
+    }
     .aside-single-item {
-        @apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
+        @apply aside-text w-full flex items-center pl-2 pr-4 py-2 rounded-xl;
     }
     .aside-single-item-active {
         @apply aside-single-item bg-primary-500 text-white font-bold;

src/components/Navigation/Aside/AsideMenuMultiple.vue

@@ -43,7 +43,7 @@ const isMenuSelected = computed(() => {
                     :class="[(isMenuSelected || item.expanded || isChildren || selected) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
                     aria-hidden="true" />
                 <span
-                    :class="[(isMenuSelected || item.expanded || selected) ? 'text-primary-500' : 'group-hover:text-primary-500', 'flex-1']">
+                    :class="[(isMenuSelected || item.expanded || selected) ? 'text-primary-500' : 'group-hover:text-primary-500', 'flex-1 aside-text']">
                     {{ item.name }}
                 </span>