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

package/package.json

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

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

@@ -30,8 +30,7 @@ footer.signup-variant-no-signup {
 .footer-group {
     display: flex;
     flex-direction: column;
-    flex: 1 1 160px;
-    min-width: 160px;
+    flex: 0 1 content;
 }
 
 .footer-group > *:not(:last-child) {
@@ -195,7 +194,7 @@ footer.signup-variant-no-signup {
     gap: var(--dx-g-spacing-4xl);
     height: 218px;
     overflow: hidden;
-    align-content: flex-start;
+    justify-content: flex-end;
 }
 
 .locales {

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

@@ -1,457 +0,0 @@
-@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;
-    }
-}