@asd20/ui 3.2.746 → 3.2.747

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.746",
+  "version": "3.2.747",
   "private": false,
   "license": "MIT",
   "repository": {

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

@@ -38,9 +38,11 @@ export default {
   // background-image: var(--website-homepage-header__secondary-background-style);
   // background-position: bottom right !important;
   // background-size: cover !important;
-  padding: space(1) 0 space(1) 0;
+  padding: space(1) 0 0 0;
   .asd20-messaging {
     padding: 0;
+    display: flex;
+    flex-direction: column;
   }
 
   &::v-deep .message-image {
@@ -72,7 +74,7 @@ export default {
     order: 1;
     max-width: 100%;
     text-shadow: 1px 1px 4px black !important;
-    padding: space(1);
+    padding: space(2) space(1) space(1) space(1);
   }
   &::v-deep .asd20-button {
     @include asd20-font(
@@ -131,6 +133,9 @@ export default {
   .asd20-secondary-header {
     // background: var(--website-homepage-header__secondary-background-color)
     //   var(--website-homepage-header__secondary-background-style);
+    &::v-deep .asd20-messaging__content {
+      padding: space(1);
+    }
     &::v-deep .lead {
       width: 100%;
     }
@@ -143,6 +148,9 @@ export default {
 
 @media (min-width: 768px) {
   .asd20-secondary-header {
+    &::v-deep .message-image {
+      order: 0;
+    }
     &::v-deep .asd20-messaging__content {
       padding: space(1);
     }
@@ -156,8 +164,12 @@ export default {
     padding: space(3) space(3) space(2) space(3);
     background: var(--website-homepage-header__secondary-background-color)
       var(--website-homepage-header__secondary-background-style);
+    .asd20-messaging {
+      flex-direction: row;
+    }
     &::v-deep .message-image {
       margin-top: 0;
+      order: 2;
       img {
         height: auto;
         margin-left: space(1);

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

@@ -89,6 +89,9 @@ export default {
   .background-video {
     display: none;
   }
+  .hide-background-image {
+    order: 2;
+  }
   .background-image {
     display: block;
     // position: absolute;
@@ -125,7 +128,6 @@ export default {
     }
 
     & ::v-deep .notification-group--floating {
-      margin-left: 0.5rem;
       margin-right: 0;
     }
   }
@@ -194,6 +196,14 @@ export default {
   }
 }
 
+@media (min-width: 600px) {
+  .asd20-video-header {
+    .hide-background-image {
+      order: 0;
+    }
+  }
+}
+
 @media (min-width: 768px) {
   .asd20-video-header {
     &__top {

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

@@ -36,6 +36,42 @@ export default {
     tag: { type: String, default: 'main' },
     forceDisplay: { type: Boolean, default: false },
   },
+  methods: {
+    removeAlpha(colorString) {
+      if (colorString.startsWith('var(')) {
+        // Extract CSS variable value
+        const variableName = colorString.split('(')[1].split(')')[0]
+        const cssVariable = getComputedStyle(document.documentElement)
+          .getPropertyValue(variableName)
+          .trim()
+        if (cssVariable.startsWith('#') && cssVariable.length === 9) {
+          // Extract RGB values from hex color with alpha
+          const hexValue = cssVariable.slice(0, 7) // Remove the alpha part
+          return hexValue
+          // Check if the CSS variable value has an alpha value
+        } else if (cssVariable.startsWith('rgba(')) {
+          // Extract RGB values from RGBA color string
+          const rgbValues = cssVariable.match(/\d+/g)
+          if (rgbValues && rgbValues.length === 4) {
+            return `rgb(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]})`
+          }
+        }
+        // Invalid color format, return original color
+        return cssVariable
+      }
+      // Not a CSS variable, return original color
+      return colorString
+    },
+  },
+  mounted() {
+    const colorMinusAlpha = this.removeAlpha(
+      'var(--website-homepage-header__background-color)'
+    )
+    // Get the root element (usually the :root element in your CSS)
+    const root = document.documentElement
+    // Update the value of a new CSS variable
+    root.style.setProperty('--color-minus-alpha', colorMinusAlpha)
+  },
 }
 </script>
 
@@ -59,9 +95,9 @@ export default {
     //   rgba(8, 24, 43, 0) 100%
     // );
     // background: rgba(51, 92, 155, 0.7);
-    background: var(--website-homepage-header__background-color)
+    background: var(--color-minus-alpha)
       var(--website-homepage-header__background-style);
-    padding: space(1);
+    padding: space(3) space(1) space(1) space(1);
     height: auto;
   }
 
@@ -106,7 +142,7 @@ export default {
     // border-bottom: 10px solid var(--color__accent);
     text-shadow: 1px 1px 4px black !important;
     &::v-deep .asd20-messaging__content {
-      margin: space(1) 0;
+      margin: space(1) 0 0 0;
     }
   }
 }
@@ -126,13 +162,14 @@ export default {
     width: 100%;
     .asd20-messaging {
       height: inherit;
-      background: var(--website-homepage-header__background-color)
+      padding: space(1);
+      background: var(--color-minus-alpha)
         var(--website-homepage-header__background-style);
     }
     &::v-deep .header-messaging-section {
       .asd20-messaging__content {
         width: 100%;
-        margin-top: 0;
+        margin: 0 0 space(1) 0;
       }
     }
     &::v-deep .asd20-button {
@@ -145,6 +182,10 @@ export default {
 @media (min-width: 1024px) {
   .asd20-video-header-content {
     width: 80%;
+    .asd20-messaging {
+      background: var(--website-homepage-header__background-color)
+        var(--website-homepage-header__background-style);
+    }
     .header-messaging-section {
       border-bottom: none;
       // width: 80%;

package/src/design/tokens.css

@@ -132,7 +132,7 @@
   --website-header__overlay-background-color: transparent;
   --website-header__title-color: #fff;
   --website-homepage-header__accent: var(--color__accent);
-  --website-homepage-header__background-color: var(--color__secondary);
+  --website-homepage-header__background-color: #3f507bcc;
   --website-homepage-header__background-style: var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat);
   --website-homepage-header__button-background-color: var(--color__accent);
   --website-homepage-header__button-foreground-color: var(--color__on-accent);