@salesforcedevs/dx-components 1.22.0-responsive → 1.22.0-responsive-2

package/package.json

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

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

@@ -0,0 +1,457 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.content-container {
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
+}
+
+a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+footer {
+    padding-top: var(--dx-c-footer-padding-top, var(--dx-g-spacing-5xl));
+}
+
+footer.signup-variant-large-signup {
+    padding-top: 160px;
+}
+
+footer.signup-variant-terms-only,
+footer.signup-variant-no-signup {
+    padding-top: 0;
+}
+
+/* COMMON UI PIECES */
+
+.footer-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer-group > *:not(:last-child) {
+    margin-bottom: 4px;
+}
+
+.subheading {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--dx-footer-themed-header-color);
+}
+
+.large-signup-heading {
+    color: var(--dx-footer-themed-header-color);
+}
+
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
+}
+
+/* TOP */
+
+.content-container_top {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background: var(--dx-footer-themed-top-background-color);
+    height: 78px;
+    border-bottom: 2px solid var(--dx-footer-themed-top-border-color);
+}
+
+.content-container_top > .subheading {
+    margin-right: var(--dx-g-spacing-lg);
+    text-align: right;
+    transform: translateY(2px);
+}
+
+.content-container_top_large {
+    position: relative;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    height: 504px;
+    background: var(--dx-footer-themed-top-large-background-color);
+}
+
+.content-container_top_large_no_signup {
+    height: 33vw;
+}
+
+.subscription {
+    position: relative;
+    z-index: 1;
+    grid-area: subscription;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.subscription > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.subscription p {
+    max-width: 536px;
+}
+
+.graphic {
+    user-select: none;
+    -webkit-user-drag: none;
+    background-repeat: no-repeat;
+    background-position: right 0 bottom 0;
+    background-size: 100%;
+}
+
+.content-container_top > .graphic {
+    align-self: flex-end;
+    transform: translateY(2px);
+    flex-shrink: 0;
+}
+
+.graphic-trees {
+    height: 112px;
+    width: 110px;
+    margin-right: var(--dx-g-spacing-lg);
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees.svg");
+    filter: var(--dx-g-svg-filter);
+}
+
+.graphic-mountains {
+    height: 96px;
+    width: 220px;
+    margin-right: var(--dx-g-spacing-lg);
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-2.svg");
+    filter: var(--dx-g-svg-filter);
+}
+
+.graphic-mountains-mobile {
+    display: none;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 56px;
+    width: 100px;
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-small-2.svg");
+    filter: var(--dx-g-svg-filter);
+}
+
+.graphic-trees-small {
+    height: 66px;
+    width: 52px;
+    margin-left: var(--dx-g-spacing-lg);
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees-small.svg");
+    filter: var(--dx-g-svg-filter);
+}
+
+.graphic-large {
+    z-index: 0;
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    width: 100%;
+    height: 100%;
+    background-image: var(--dx-footer-themed-large-graphic);
+    background-size: 101%;
+}
+
+/* MIDDLE */
+
+.content-container_middle {
+    display: grid;
+    grid-gap: var(--dx-g-spacing-xl);
+    grid-template:
+        "logo general" auto
+        "socials general" max-content
+        "locales general" max-content / auto max-content;
+    background: var(--dx-footer-themed-background-color);
+    padding-top: var(--dx-g-spacing-4xl);
+    padding-bottom: var(--dx-g-spacing-3xl);
+    container-type: inline-size;
+    container-name: footer-middle;
+}
+
+.logo {
+    grid-area: logo;
+    width: max-content;
+    height: var(--dx-g-spacing-4xl);
+}
+
+.logo > img {
+    height: 100%;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.general {
+    grid-area: general;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: var(--dx-g-spacing-4xl);
+}
+
+.locales {
+    grid-area: locales;
+}
+
+.socials {
+    grid-area: socials;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-auto-rows: min-content;
+    grid-gap: var(--dx-g-spacing-sm);
+}
+
+.socials > a {
+    border-radius: 50%;
+    height: var(--dx-g-spacing-xl);
+    width: var(--dx-g-spacing-xl);
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.terms a {
+    color: var(--dx-g-blue-vibrant-70);
+    text-decoration: underline;
+}
+
+.terms > span,
+.terms_links > a {
+    margin: var(--dx-g-spacing-sm) 0;
+}
+
+.terms > span > a {
+    display: inline;
+}
+
+.terms a:hover {
+    color: var(--dx-g-blue-vibrant-80);
+}
+
+.socials > a:hover {
+    background: var(--dx-g-blue-vibrant-80);
+}
+
+.socials > a > svg {
+    fill: var(--dx-footer-themed-svg-icon-color);
+    height: 100%;
+}
+
+/* BOTTOM */
+.content-container_bottom {
+    display: flex;
+    background: var(--dx-footer-themed-terms-and-conditions-background-color);
+}
+
+.content-container_bottom a {
+    text-decoration: underline;
+}
+
+.terms {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    margin: var(--dx-g-spacing-md) 0;
+}
+
+.terms > span {
+    padding-right: var(--dx-g-spacing-lg);
+    color: white;
+}
+
+.terms > span > img {
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.terms_links {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.terms_links > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-lg);
+}
+
+@media screen and (min-width: 1400px) {
+    .content-container_top_large:not(.content-container_top_large_no_signup) {
+        /* takes into account the background assets' h:w ratio */
+        height: 38vw;
+    }
+}
+
+@media screen and (max-width: 1160px) {
+    .graphic-trees {
+        display: none;
+    }
+}
+
+/* TABLET */
+@media screen and (max-width: 1024px) {
+    /* TOP */
+    .graphic-trees-small {
+        display: none;
+    }
+
+    .graphic-large {
+        background-size: 122.92%;
+    }
+
+    .content-container_top_large_no_signup .graphic-large {
+        background-size: 101%;
+    }
+
+    .content-container_top_large {
+        height: 464px;
+        padding-top: var(--dx-g-spacing-2xl);
+    }
+
+    .content-container_top_large_no_signup {
+        height: 38vw;
+        padding-top: 0;
+    }
+
+    .subscription h3 {
+        font-size: 24px;
+        line-height: 28px;
+    }
+
+    .subscription p {
+        max-width: 456px;
+    }
+
+    dx-input {
+        width: 320px;
+    }
+
+    /* MIDDLE */
+    .content-container_middle {
+        grid-gap: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-2xl);
+        padding-bottom: var(--dx-g-spacing-2xl);
+    }
+
+    .logo {
+        height: var(--dx-g-spacing-2xl);
+    }
+
+    .socials > a {
+        height: var(--dx-g-spacing-lg);
+        width: var(--dx-g-spacing-lg);
+    }
+
+    .socials > a > dx-icon {
+        --dx-c-icon-size: var(--dx-g-icon-size-xs);
+    }
+
+    .socials > a.github > dx-icon {
+        --dx-c-icon-size: var(--dx-g-spacing-lg);
+    }
+
+    .general {
+        grid-gap: var(--dx-g-spacing-xl);
+    }
+}
+
+/* Container Queries - based on actual footer width, not viewport! */
+@container footer-middle (max-width: 700px) {
+    .footer-group:nth-child(3) {
+        display: none !important;
+    }
+}
+
+@container footer-middle (max-width: 500px) {
+    .footer-group:nth-child(2) {
+        display: none !important;
+    }
+}
+
+/* MOBILE - LARGE */
+@media screen and (max-width: 768px) {
+    footer.signup-variant-large-signup {
+        padding-top: var(--dx-g-spacing-4xl);
+    }
+
+    /* TOP */
+    .content-container_top {
+        flex-direction: column;
+        padding: var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
+            var(--dx-g-spacing-2xl) var(--dx-g-spacing-md);
+        height: unset;
+    }
+
+    .content-container_top > .subheading {
+        text-align: center;
+        margin-right: unset;
+        margin-bottom: var(--dx-g-spacing-lg);
+    }
+
+    .content-container_top > dx-input {
+        margin-top: var(--dx-g-spacing-md);
+    }
+
+    .content-container_top > .graphic-mountains-mobile {
+        display: unset;
+    }
+
+    .content-container_top_large {
+        height: unset;
+        padding-bottom: 140px;
+    }
+
+    .content-container_top_large_no_signup {
+        height: 44vw;
+    }
+
+    .graphic-mountains {
+        display: none;
+    }
+
+    .content-container_top_large_no_signup .graphic-large,
+    .graphic-large {
+        background-size: 160%;
+        background-position: right 50% bottom 0;
+    }
+
+    .subscription h3 {
+        width: 240px;
+        max-width: 100%;
+    }
+
+    .subscription p {
+        width: 100%;
+    }
+
+    .footer-group:nth-child(2),
+    .footer-group:nth-child(3) {
+        display: flex;
+    }
+}
+
+/* MOBILE - SMALL */
+@media screen and (max-width: 640px) {
+    /* TOP */
+    .subscription dx-input {
+        width: 100%;
+    }
+
+    .term-icon {
+        margin-left: 0;
+    }
+}
+
+@media screen and (max-width: 380px) {
+    .content-container_middle {
+        display: none;
+    }
+}

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

@@ -30,7 +30,8 @@ footer.signup-variant-no-signup {
 .footer-group {
     display: flex;
     flex-direction: column;
-    flex: 0 1 auto;
+    flex: 1 1 160px;
+    min-width: 160px;
 }
 
 .footer-group > *:not(:last-child) {
@@ -169,7 +170,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);
@@ -189,9 +190,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;
+    align-content: flex-start;
 }
 
 .locales {
@@ -358,19 +362,7 @@ footer.signup-variant-no-signup {
     }
 
     .general {
-        grid-gap: var(--dx-g-spacing-xl);
-    }
-}
-
-@media screen and (max-width: 985px) {
-    .footer-group:nth-child(3) {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 850px) {
-    .footer-group:nth-child(2) {
-        display: none;
+        gap: var(--dx-g-spacing-xl);
     }
 }
 
@@ -429,24 +421,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: 620px) {
-    .footer-group:nth-child(3) {
-        display: none;
-    }
 }
 
-@media screen and (max-width: 480px) {
-    .footer-group:nth-child(2) {
-        display: none;
-    }
-
+/* MOBILE - SMALL */
+@media screen and (max-width: 640px) {
     /* TOP */
     .subscription dx-input {
         width: 100%;