@salesforcedevs/dx-components 1.2.19-lightdom → 1.3.0

package/src/modules/dx/cardCallout/cardCallout.scoped.css

@@ -1,45 +0,0 @@
-:host {
-    display: block;
-
-    --dx-g-card-border: 1px solid var(--dx-g-gray-90);
-    --dx-g-card-border-radius: 16px;
-    --dx-g-card-item-spacing: 12px;
-    --dx-g-card-img-spacing: 20px;
-    --dx-c-body-max-lines: 6;
-}
-
-.card-callout {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-/* in the callout card's case it needs to be subservient to the other items in the grid */
-.dx-card-base_override-width {
-    height: 100% !important;
-    min-height: unset !important;
-}
-
-/* title */
-
-.dx-text-heading-3 {
-    color: inherit;
-    margin-bottom: var(--dx-g-spacing-3xl);
-    overflow-wrap: hyphenate-word;
-    hyphens: overflow;
-}
-
-/* label */
-
-.dx-text-button-light {
-    color: inherit;
-    margin-top: auto;
-}
-
-/* callout arrow */
-
-@media screen and (max-width: 1024px) {
-    .dx-text-heading-3 {
-        margin-bottom: var(--dx-g-spacing-xl);
-    }
-}

package/src/modules/dx/cardTitle/cardTitle.scoped.css

@@ -1,25 +0,0 @@
-h3.dx-text-heading-4 {
-    color: var(--dx-c-card-title-color);
-    transition: var(--dx-g-transition-hue-1x);
-    font-size: var(--dx-c-card-title-font-size);
-    line-height: var(--dx-c-card-title-line-height);
-    letter-spacing: var(--dx-c-card-title-letter-spacing);
-    word-break: break-word;
-    hyphens: auto;
-    font-family: var(--dx-g-font-display);
-}
-
-a {
-    font-family: var(--dx-g-font-display);
-}
-
-.nowrap {
-    white-space: nowrap;
-}
-
-@media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
-        font-size: 20px;
-        line-height: 24px;
-    }
-}

package/src/modules/dx/checkbox/checkbox.scoped.css

@@ -1,169 +0,0 @@
-:host {
-    display: block;
-}
-
-.container {
-    --error-color: var(--dx-g-red-vibrant-50);
-
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.checkbox-label,
-input {
-    cursor: pointer;
-}
-
-label {
-    display: var(--dx-c-checkbox-display, flex);
-    align-items: var(--dx-c-checkbox-align-label, flex-start);
-}
-
-input {
-    flex-shrink: 0;
-    margin: 0;
-}
-
-.checkbox-label {
-    line-height: var(--dx-c-checkbox-text-line-height, 20px);
-    font-size: var(--dx-c-checkbox-font-size, --dx-g-text-base);
-    transform: translateY(-2px);
-    padding-left: 12px;
-}
-
-.checkbox-label::first-letter {
-    text-transform: uppercase;
-}
-
-.checkbox-error {
-    opacity: 0;
-    margin-top: var(--dx-g-spacing-xs);
-    user-select: none;
-}
-
-input:disabled {
-    cursor: not-allowed;
-    opacity: 0.9;
-}
-
-input:disabled + .checkbox-label {
-    cursor: not-allowed;
-    color: var(--sds-g-gray-9);
-}
-
-.container.show-error .checkbox-error {
-    opacity: 1;
-    user-select: auto;
-}
-
-/* adapted from https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ */
-@supports (-webkit-appearance: none) or (-moz-appearance: none) {
-    input {
-        --active-color: var(--dx-g-blue-vibrant-50);
-        --active-inner-color: #fff;
-        --focus-shadow: 1px var(--dx-g-blue-vibrant-80);
-        --border-color: var(--sds-g-gray-5);
-        --border-color-hover: var(--sds-g-gray-6);
-        --background: #fff;
-        --disabled-color: var(--sds-g-gray-4);
-        --disabled-inner-color: var(--dx-g-gray-60);
-        --size: var(--dx-g-spacing-md);
-
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        height: var(--size);
-        width: var(--size);
-        outline: none;
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        cursor: pointer;
-        border: 1px solid var(--border-color-override, var(--border-color));
-        background: var(--background-override, var(--background));
-        transition: var(--dx-g-transition-box-shadow-1x),
-            var(--dx-g-transition-hue-1x);
-    }
-
-    input::after {
-        content: "";
-        display: block;
-        left: 0;
-        top: 0;
-        position: absolute;
-        opacity: var(--opacity, 0);
-        transition: transform var(--transition-duration-transform, 0.3s)
-                var(--transition-easing-transorm, ease),
-            opacity var(--transition-duration-opacity, 0.2s);
-    }
-
-    input[type="checkbox"] {
-        border-radius: 2px;
-    }
-
-    input[type="radio"] {
-        border-radius: 50%;
-    }
-
-    input:disabled {
-        --background-override: var(--disabled-color);
-    }
-
-    input:focus {
-        box-shadow: 0 0 0 var(--focus-shadow);
-    }
-
-    input:checked {
-        --opacity: 1;
-        --transition-duration-opacity: 0.3s;
-        --transition-duration-transform: 0.6s;
-        --transition-easing-transorm: cubic-bezier(0.2, 0.85, 0.32, 1.2);
-    }
-
-    input:disabled:checked {
-        --border-color-override: var(--border-color);
-    }
-
-    input:hover:not(:disabled) {
-        --border-color-override: var(--border-color-hover);
-    }
-
-    input[type="checkbox"]::after {
-        --checkbox-width: 4px;
-        --checkbox-height: 8px;
-
-        width: var(--checkbox-width);
-        height: var(--checkbox-height);
-        border: 2px solid var(--active-color);
-        border-top: 0;
-        border-left: 0;
-        left: calc(50% - var(--checkbox-width) / 2);
-        top: calc(50% - var(--checkbox-height) / 2);
-        transform: rotate(var(--checkbox-rotation, 20deg));
-    }
-
-    input[type="checkbox"]:checked {
-        --checkbox-rotation: 43deg;
-    }
-
-    input[type="radio"]::after {
-        --opacity: 0;
-
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: var(--active-color);
-        margin: 3px;
-        transition: var(--dx-g-transition-hue-1x);
-    }
-
-    input:checked[type="radio"]::after {
-        --opacity: 1;
-    }
-
-    .container.show-error input {
-        --border-color-override: var(--error-color) !important;
-
-        box-shadow: 0 0 0 1px var(--error-color) !important;
-    }
-}

package/src/modules/dx/header/header.scoped.css

@@ -1,92 +0,0 @@
-dx-header-mobile-nav-menu {
-    --dx-c-color-background: var(--dx-g-brand-current-color-background);
-    --dx-c-button-color-background-inactive: var(
-        --dx-g-brand-current-button-color-background-inactive
-    );
-    --dx-c-button-color-background-active: var(
-        --dx-g-brand-current-button-color-background-active
-    );
-    --dx-c-color: var(--dx-g-brand-current-color);
-    --dx-c-color-border: var(--dx-g-brand-current-color-border);
-    --dx-c-color-background-2: var(--dx-g-brand-current-color-background-2);
-    --dx-c-button-color-background-inactive-hover: var(
-        --dx-g-brand-current-button-color-background-inactive-hover
-    );
-    --dx-c-color-border-2: var(--dx-g-brand-current-color-border-2);
-}
-
-.header_l2_group-title {
-    margin-right: var(--dx-g-spacing-4xl);
-}
-
-.header_l2_group-nav_menu-ctas {
-    display: none;
-    position: relative;
-    justify-content: center;
-    align-items: center;
-    padding-right: var(--dx-g-spacing-sm);
-    height: 100%;
-}
-
-.header_l2_group-nav_menu-ctas::after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: var(--dx-g-spacing-sm);
-    height: calc(100% - var(--dx-g-spacing-md));
-    width: 1px;
-    background: transparent;
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-header.has-navscrollshadow .header_l2_group-nav_menu-ctas::after {
-    background: var(--dx-g-brand-current-color-border);
-}
-
-.header_l2_group-nav_menu-button {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-secondary-color-hover: var(
-        --dx-g-brand-current-button-color-background-inactive
-    );
-}
-
-@media (max-width: 1024px) {
-    .header_l2 {
-        flex-wrap: wrap;
-        height: unset;
-        padding: 0;
-    }
-
-    .header_l2_group-title {
-        margin-right: 0;
-        padding: 12px var(--dx-g-page-padding-horizontal);
-    }
-
-    .header_l2_group {
-        width: 100%;
-    }
-
-    .header_l2_group-nav {
-        height: var(--dx-g-spacing-3xl);
-        padding: 0;
-        padding-left: var(--dx-g-spacing-sm);
-    }
-
-    .header_l2_group-nav_overflow {
-        margin-right: var(--dx-g-spacing-sm);
-    }
-
-    .header_version-dropdown {
-        margin-left: auto;
-    }
-
-    .has-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
-    }
-}
-
-@media (max-width: 768px) {
-    .header_l2_group-nav > .header_l2_group-nav_menu-ctas {
-        display: flex;
-    }
-}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.scoped.css

@@ -1,142 +0,0 @@
-.nav-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    max-height: 56vh;
-    overflow-y: auto;
-    padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
-        var(--dx-g-spacing-sm);
-    background: var(--dx-c-color-background);
-    box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
-    transform: translateY(0);
-    border-top: 1px solid transparent;
-    transition: var(--dx-g-transition-transform-2x),
-        var(--dx-g-transition-hue-1x);
-    z-index: 1000;
-}
-
-.nav-menu.has-scrollshadow {
-    border-color: var(--dx-c-color-border-2);
-}
-
-.nav-menu ul {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.nav-menu_item {
-    display: flex;
-    flex-direction: column;
-}
-
-.nav-menu_item,
-.nav-menu_item_cta-main {
-    transition: var(--dx-g-transition-hue-1x);
-    border-radius: var(--dx-g-spacing-xs);
-}
-
-.nav-menu_item_cta-main {
-    justify-content: space-between;
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    color: var(--dx-g-blue-vibrant-20);
-    line-height: 20px;
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
-    width: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.nav-menu ul > .nav-menu_item:not(:last-of-type) {
-    margin-bottom: var(--dx-g-spacing-xs);
-}
-
-.nav-menu_item.state-open {
-    background: var(--dx-c-button-color-background-inactive);
-}
-
-.nav-menu_item_cta-main:not(.state-active):hover {
-    background: var(--dx-c-button-color-background-inactive);
-}
-
-.nav-menu_item.state-open .nav-menu_item_cta-main:hover {
-    background: var(--dx-c-button-color-background-inactive-hover);
-}
-
-.nav-menu_item.state-open .chevrondown {
-    transform: rotateX(180deg);
-}
-
-.nav-menu_item_cta-options {
-    position: relative;
-    display: none;
-    flex-direction: column;
-    width: 100%;
-}
-
-.nav-menu_item.state-open > .nav-menu_item_cta-options {
-    display: flex;
-}
-
-.nav-menu_item_cta {
-    height: var(--dx-g-spacing-3xl);
-}
-
-.nav-menu_item_cta-main.state-active {
-    background: var(--dx-c-button-color-background-active);
-    color: var(--dx-c-color);
-}
-
-.nav-menu_item_cta-main > span {
-    transform: translateY(3px); /* ghost padding */
-}
-
-.nav-menu_item_cta-sub {
-    --dx-c-button-secondary-color-hover: var(
-        --dx-c-button-color-background-inactive-hover
-    );
-
-    font-size: var(--dx-g-text-sm);
-    width: 100%;
-}
-
-.nav-menu_item_cta-sub::part(container) {
-    justify-content: flex-start;
-}
-
-.nav-menu_item_cta-sub.state-active {
-    text-decoration: underline;
-}
-
-.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type) {
-    padding-top: var(--dx-g-spacing-xs);
-    margin-top: var(--dx-g-spacing-xs);
-}
-
-.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type)::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: var(--dx-g-spacing-md);
-    width: calc(100% - var(--dx-g-spacing-xl));
-    height: 1px;
-    background: var(--dx-c-color-border-2);
-}
-
-.backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    z-index: -1;
-}
-
-.nav-menu.state-closed {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-16px);
-    pointer-events: none;
-}

package/src/modules/dx/headerSearch/headerSearch.scoped.css

@@ -1,56 +0,0 @@
-/* DESKTOP */
-
-.desktop_search-container {
-    position: relative;
-    display: flex;
-    height: var(--dx-g-spacing-xl);
-    font-size: var(--dx-g-text-sm);
-    font-family: var(--dx-g-font-sans);
-    color: var(--dx-g-gray-50);
-}
-
-.desktop_search-container dx-input {
-    --dx-c-input-width: calc(
-        var(--dx-c-header-search-width) - var(--toggle-width)
-    );
-}
-
-/* MOBILE */
-
-.mobile_search-button {
-    position: relative;
-    z-index: 3;
-}
-
-.mobile_search-dropdown {
-    --dx-c-popover-border-radius: 0;
-    --dx-c-popover-border: none;
-}
-
-.mobile_search-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    transition: var(--dx-g-transition-hue-1x);
-    opacity: 0;
-    pointer-events: none;
-
-    --dx-c-input-border: none;
-    --dx-c-input-border-radius: 0;
-    --dx-c-input-border-active: none;
-    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
-    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
-    --dx-c-input-background-active: var(
-        --dx-g-brand-current-color-background-2
-    );
-    --dx-c-input-height: 100% !important;
-    --dx-c-input-width: 100%;
-}
-
-.mobile_search-input.state-open {
-    opacity: 1;
-    pointer-events: auto;
-}

package/src/modules/dx/relativeDateTime/relativeDateTime.scoped.css

@@ -1,3 +0,0 @@
-time {
-    font-family: var(--dx-g-font-display);
-}