@asd20/ui 3.5.2 → 3.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.5.2",
+  "version": "3.5.4",
   "private": false,
   "license": "MIT",
   "sideEffects": [

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -268,7 +268,7 @@ export default {
       height: 50%;
       background: linear-gradient(
         170deg,
-        rgba(6, 11, 31, 0.6) 10%,
+        rgba(6, 11, 31, 0.7) 10%,
         rgba(6, 11, 31, 0) 50%,
         transparent 100%
       );
@@ -303,7 +303,7 @@ export default {
       padding: 0;
       z-index: 101;
       position: absolute;
-      margin: space(2) space(1) space(2) space(2);
+      margin: space(0.5) space(1) space(2) space(2);
       width: 95%;
       display: flex;
     }

package/src/components/organisms/Asd20VideoHeaderContent/index.vue

@@ -80,8 +80,8 @@ export default {
       var(--website-homepage-header__background-style);
     padding: space(3) space(1) space(1) space(1);
     height: auto;
-    border-radius: 0 var(--website-shape__radius-m)
-      var(--website-shape__radius-m) 0;
+    // border-radius: 0 var(--website-shape__radius-m)
+    //   var(--website-shape__radius-m) 0;
   }
 
   &::v-deep .asd20-messaging__heading {
@@ -182,6 +182,28 @@ export default {
   }
 }
 
+@keyframes slide_right {
+  from {
+    opacity: 0;
+    margin-left: -200px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+  }
+}
+
+@keyframes slide_right2 {
+  from {
+    opacity: 0;
+    margin-left: -100px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+  }
+}
+
 @media (min-width: 667px) {
   .asd20-video-header-content {
     width: 100%;
@@ -226,16 +248,16 @@ export default {
       // width: 80%;
       &::v-deep .asd20-messaging {
         padding: space(1);
-        margin-left: space(3);
+        // margin-left: space(3);
         .asd20-messaging__content {
           margin: 0;
-          animation: slide_left 1.5s ease-in-out 0.5s both;
+          animation: slide_right 2s ease-in-out 0.5s both;
         }
         .asd20-messaging__heading {
           @include fluid-type($base-font-size * 1.15, $base-font-size * 1.5);
           color: var(--color__accent-s10);
           border-bottom: none;
-          // animation: slide_left2 1.25s ease-in-out 0.75s both;
+          animation: slide_right2 1.5s ease-in-out 1s both;
         }
       }
       // &::after {
@@ -255,13 +277,14 @@ export default {
       &::after {
         content: '';
         position: absolute;
-        inset: 0 auto 0 3.25rem; /* top:0; right:auto; bottom:0; left:3.25rem; */
+        inset: 0 -30px 0 auto; /* top:0; right:auto; bottom:0; left:3.25rem; */
         width: 30px;
         background: var(--website-homepage-header__accent);
-        border-radius: var(--website-shape__radius-m) 0 0 var(--website-shape__radius-m);
+        border-radius: 0 var(--website-shape__radius-l) var(--website-shape__radius-l) 0;
+        // border-radius: var(--website-shape__radius-m) 0 0 var(--website-shape__radius-m);
         /* Make sure it sits behind the messaging card */
         z-index: -1;
-        animation: slide_left2 2s ease-in-out 0s both;
+        // animation: slide_right2 1s ease-in-out 1.5s both;
       }
     }
     &::v-deep .asd20-messaging__button-group {

package/src/components/templates/Asd20DistrictVideoTemplate/index.vue

@@ -317,7 +317,17 @@ export default {
 @keyframes slide_right {
   from {
     opacity: 0;
-    margin-left: -200px;
+    margin-left: -300px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+  }
+}
+@keyframes slide_right2 {
+  from {
+    opacity: 0;
+    margin-left: -300px;
   }
   to {
     opacity: 1;
@@ -376,7 +386,14 @@ export default {
       position: absolute;
       bottom: 15%;
       transform: translate3d(0, calc(-70% * var(--scroll-progress)), 0);
-      animation: slide_left 1.5s ease-in-out 0.5s both;
+      animation: slide_right 1.5s ease-in-out 0.5s both;
+        // &::v-deep .asd20-messaging_heading {
+        //   animation: slide_right 1s ease-in-out 0.5s both;
+        // }
+        // &::v-deep .lead {
+        //   animation: slide_right2 .5s ease-in-out 0.5s both;
+        // }
+      
     }
     .asd20-organization-picker {
       display: inherit !important;