@salesforcedevs/dx-components 1.22.0-responsive-1 → 1.22.0-responsive-3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.22.0-responsive-1",
+    "version": "1.22.0-responsive-3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/footer/footer.css

@@ -30,6 +30,7 @@ footer.signup-variant-no-signup {
 .footer-group {
     display: flex;
     flex-direction: column;
+    flex: 0 1 content;
 }
 
 .footer-group > *:not(:last-child) {
@@ -168,7 +169,7 @@ footer.signup-variant-no-signup {
     grid-template:
         "logo general" auto
         "socials general" max-content
-        "locales general" max-content / auto minmax(0, max-content);
+        "locales general" max-content / auto fit-content(100%);
     background: var(--dx-footer-themed-background-color);
     padding-top: var(--dx-g-spacing-4xl);
     padding-bottom: var(--dx-g-spacing-3xl);
@@ -188,9 +189,12 @@ footer.signup-variant-no-signup {
 
 .general {
     grid-area: general;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, max-content));
-    grid-gap: var(--dx-g-spacing-4xl);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dx-g-spacing-4xl);
+    height: 218px;
+    overflow: hidden;
+    justify-content: flex-end;
 }
 
 .locales {
@@ -357,19 +361,7 @@ footer.signup-variant-no-signup {
     }
 
     .general {
-        grid-gap: var(--dx-g-spacing-xl);
-    }
-}
-
-@media screen and (max-width: 950px) {
-    .footer-group:nth-child(3) {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 820px) {
-    .footer-group:nth-child(2) {
-        display: none;
+        gap: var(--dx-g-spacing-xl);
     }
 }
 
@@ -428,24 +420,10 @@ footer.signup-variant-no-signup {
     .subscription p {
         width: 100%;
     }
-
-    .footer-group:nth-child(2),
-    .footer-group:nth-child(3) {
-        display: flex;
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .footer-group:nth-child(3) {
-        display: none;
-    }
 }
 
-@media screen and (max-width: 500px) {
-    .footer-group:nth-child(2) {
-        display: none;
-    }
-
+/* MOBILE - SMALL */
+@media screen and (max-width: 640px) {
     /* TOP */
     .subscription dx-input {
         width: 100%;