refactor: refactored sm class usage in application-hub [WTEL-3172]

webitel · Feb 24, 2023 · b92e103 · b92e103
1 parent 33cfe56
commit b92e103
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/modules/application-hub/components/application-hub.vue b/src/modules/application-hub/components/application-hub.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="application-hub-wrap">
         <cc-header/>
-        <nav class="application-hub">
+        <nav
+          class="application-hub"
+          :class="{ 'application-hub--sm': $breakpoint.smAndDown}"
+        >
           <div class="application-hub__background"></div>
             <ul class="application-hub__list">
                 <li
@@ -36,11 +39,8 @@
                                 :alt="`${app.name}-title`"
                               >
                             </div>
-                            <h1
-                              class="application-link__title"
-                              :class="{ 'application-link__title--sm': $breakpoint.smAndDown  }"
-                            >
-                              {{app.title}}
+                            <h1 class="application-link__title">
+                              {{ app.title }}
                             </h1>
                         </div>
                     </a>
@@ -258,10 +258,6 @@
     .application-link__title {
       @extend %typo-body-1;
       color: var(--main-color);
-
-      &--sm {
-        @extend %typo-body-2;
-      }
     }
 
     // specific @hover toggled styles (hovered)
@@ -278,6 +274,13 @@
       }
     }
 
+    .application-hub--sm {
+      // title text
+      .application-link__title {
+        @extend %typo-body-2;
+      }
+    }
+
     @media screen and (max-width: $viewport-sm) {
       .application-hub__card {
         width: 278px;