BULL-2085 hover on wave component logos

src/components/Base/LogoCard.vue

@@ -48,29 +48,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.hvr-grow {
-  display: inline-block;
-  vertical-align: middle;
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
-  transition-duration: 0.3s;
-  transition-property: transform;
-  cursor: pointer;
-}
-
 .hvr-no-grow {
   display: inline-block;
   vertical-align: middle;
   cursor: not-allowed;
 }
-
-.hvr-grow:hover,
-.hvr-grow:focus,
-.hvr-grow:active {
-  transform: scale(1.1);
-}
 .card-style {
   max-width: 400px;
 }

src/components/Footer.vue

@@ -6,7 +6,7 @@
           <PlatformOneWordMarkLogo />
           <div class="my-4">
             <a
-              class="social-logo linkedin"
+              class="social-logo hvr-grow linkedin"
               href="https://www.linkedin.com/company/dodplatformone"
               target="_blank"
               rel="noopener noreferrer"
@@ -14,7 +14,7 @@
               <LinkedInLogo width="32" class="mr-3" />
             </a>
             <a
-              class="social-logo youtube"
+              class="social-logo hvr-grow youtube"
               href="https://www.youtube.com/channel/UCJYa7FHdC-4iQMvSb5uEraw"
               target="_blank"
               rel="noopener noreferrer"
@@ -22,7 +22,7 @@
               <YouTubeLogo width="32" class="mr-3" />
             </a>
             <a
-              class="social-logo medium"
+              class="social-logo hvr-grow medium"
               href="https://medium.com/@platformone"
               target="_blank"
               rel="noopener noreferrer"
@@ -38,6 +38,7 @@
           lg="2"
         >
           <a
+            class="hvr-grow"
             id="af-logo"
             href="https://www.af.mil/"
             target="_blank"

src/scss/custom.scss

@@ -25,10 +25,29 @@ body {
     text-decoration: none;
   }
 
+  .hvr-grow {
+    display: inline-block;
+    vertical-align: middle;
+    transform: translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    backface-visibility: hidden;
+    -moz-osx-font-smoothing: grayscale;
+    transition-duration: 0.3s;
+    transition-property: transform;
+    cursor: pointer;
+  }
+
+  .hvr-grow:hover,
+  .hvr-grow:focus,
+  .hvr-grow:active {
+    transform: scale(1.1);
+  }
+
   .v-date-picker-table {
     .v-btn {
       height: 31px;
       text-transform: capitalize;
+
       &:not(.v-btn--round) {
         min-width: 31px;
       }
@@ -42,6 +61,7 @@ body {
       }
     }
   }
+
   .v-btn {
     text-transform: capitalize;
 
@@ -62,15 +82,18 @@ body {
     color: #4a4a4a;
     font-size: 1rem;
   }
+
   .description-style {
     color: #828282;
     font-weight: 300;
   }
+
   .border-left-md {
     @media (min-width: 960px) {
       border-left: solid white 1px;
     }
   }
+
   .border-left-md-dark {
     @media (min-width: 960px) {
       border-left: solid black 1px;
@@ -82,21 +105,25 @@ body {
     line-height: 6rem;
     letter-spacing: 3.2px;
   }
+
   h2 {
     font-size: 1.625rem;
     line-height: 2.375rem;
     letter-spacing: 1.1px;
   }
+
   h3 {
     font-size: 1.5rem;
     line-height: 1.8125rem;
     letter-spacing: 1.1px;
   }
+
   h4 {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: 1.1px;
   }
+
   h6 {
     font-size: 1.25rem;
     font-weight: 500;
@@ -144,21 +171,25 @@ body {
       line-height: 2.625rem;
       letter-spacing: 1.1px;
     }
+
     h2 {
       font-size: 1.375rem;
       line-height: 2rem;
       letter-spacing: 1.1px;
     }
+
     h3 {
       font-size: 1.125rem;
       line-height: 1.625rem;
       letter-spacing: 1.1px;
     }
+
     h4 {
       font-size: 1rem;
       line-height: 1.625rem;
       letter-spacing: 1.1px;
     }
+
     font-size: 1rem;
   }
 
@@ -167,10 +198,12 @@ body {
       margin-top: 1rem;
       margin-bottom: 1rem;
     }
+
     h2 {
       margin-top: 2rem;
       margin-bottom: 1rem;
     }
+
     h4 {
       margin-top: 1rem;
       margin-bottom: 0.5rem;
@@ -180,6 +213,7 @@ body {
   .flex-card {
     display: flex;
     flex-direction: column;
+
     & > .v-card__text {
       flex-grow: 1;
     }
@@ -190,6 +224,7 @@ body {
     .vue-lb-modal-image {
       background-color: $light-bg-color;
     }
+
     .vue-lb-arrow > span > svg {
       fill: $p1-light-green;
     }