@salesforcedevs/dx-components 0.0.0-alpha.4 → 0.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.0.0-alpha.4",
+    "version": "0.0.0-alpha.5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/button/button.css

@@ -13,20 +13,22 @@
     --dx-c-button-opacity: 1;
     --dx-c-button-font-size: var(--dx-g-text-sm);
     --dx-c-button-font-weight: var(--dx-g-font-normal);
+    --dx-c-button-display: flex;
 }
 
 .button {
     background-color: var(--dx-c-button-background-color);
     opacity: var(--dx-c-button-opacity);
     width: inherit;
-    display: flex;
+    display: var(--dx-c-button-display);
     align-items: center;
     justify-content: var(--dx-c-button-justify-content);
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
     transition: var(--dx-g-transition-hue-1x);
-    padding: 0 var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
+    padding: var(--dx-c-button-vertical-spacing, 0)
+        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
     font-weight: var(--dx-c-button-font-weight);
 }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -21,6 +21,8 @@
     --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-image-container-transform: scale(0.7)
         translateY(14px);
+    --dx-c-featured-content-header-swoop-display: block;
+    --dx-c-featured-content-header-swoop-height: 30%;
 }
 
 .container {
@@ -32,7 +34,7 @@
     /* actual spacing between bottom of graphic and rest of page content */
     --bottom-spacing: var(--dx-g-spacing-4xl);
     --item-spacing: var(--dx-g-spacing-xl);
-    --swoop-height: 30%;
+    --swoop-height: var(--dx-c-featured-content-header-swoop-height);
     --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
 
@@ -64,6 +66,7 @@
 /* SWOOP SILHOUETTE */
 
 .swoop-silhouette {
+    display: var(--dx-c-featured-content-header-swoop-display);
     position: absolute;
     bottom: -2px;
     left: -1px;
@@ -230,8 +233,9 @@
 
 .custom-bg-trial::after {
     content: "";
-    background-image: url(/assets/svg/trial-left.svg), url(/assets/svg/trial-right.svg);
-    background-position: 48px 50px, right 95px top;
+    background-image: url(/assets/svg/trial-left.svg),
+        url(/assets/svg/trial-right.svg);
+    background-position: 48px 50px, right 15px top;
     background-repeat: no-repeat;
     position: absolute;
     left: 0;
@@ -240,6 +244,14 @@
     height: 100%;
 }
 
+@media screen and (max-width: 1024px) {
+    .custom-bg-trial::after {
+        background-image: url(/assets/svg/trial-left.svg);
+        background-position: 48px 30px;
+        background-size: contain;
+    }
+}
+
 /* Z INDEX STUFF */
 
 .label,