diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css index 523629ca33f..933a97822c1 100644 --- a/packages/modal/src/spectrum-modal-wrapper.css +++ b/packages/modal/src/spectrum-modal-wrapper.css @@ -20,7 +20,6 @@ governing permissions and limitations under the License. visibility: hidden; pointer-events: none; z-index: 1; - transition: visibility 0s linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); justify-content: center; align-items: center; display: flex; diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index 42bbf1efd7c..df1c9c87622 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -22,7 +22,6 @@ governing permissions and limitations under the License. .modal { visibility: hidden; opacity: 0; - transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance))); z-index: 1; max-block-size: 90vh; max-block-size: var(--mod-modal-max-height, 90vh); @@ -31,10 +30,6 @@ governing permissions and limitations under the License. background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100)); pointer-events: auto; - transition: - opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay), - visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), - transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); outline: none; overflow: hidden; } @@ -43,9 +38,6 @@ governing permissions and limitations under the License. pointer-events: auto; visibility: visible; opacity: 1; - transition: - transform var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay), - opacity var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay); transform: translateY(0); } diff --git a/packages/overlay/src/overlay.css b/packages/overlay/src/overlay.css index 450576b1c83..3e336296e66 100644 --- a/packages/overlay/src/overlay.css +++ b/packages/overlay/src/overlay.css @@ -178,11 +178,6 @@ slot[name="longpress-describedby-descriptor"] { @supports (overlay: auto) { .dialog { display: none; - transition: - all var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)), - translate 0s, - display var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)); - transition-behavior: allow-discrete; } .dialog:popover-open { diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index 047724c2007..4f6a05a1c2b 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -145,7 +145,6 @@ governing permissions and limitations under the License. border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color)); border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)); padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width))); - transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out; border-style: solid; border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index de9b3aa6ff5..954bc360645 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -22,11 +22,6 @@ governing permissions and limitations under the License. text-transform: none; vertical-align: top; -webkit-appearance: button; - transition: - background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; justify-content: center; align-items: center; margin: 0; @@ -174,10 +169,6 @@ governing permissions and limitations under the License. block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width)); border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)); - transition: - background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), - box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), - border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); border-style: solid; @@ -302,7 +293,6 @@ governing permissions and limitations under the License. .label.placeholder { font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); } @@ -312,7 +302,6 @@ governing permissions and limitations under the License. .picker { vertical-align: top; - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 6370df1c596..3195adc51cd 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -15,22 +15,12 @@ governing permissions and limitations under the License. pointer-events: none; visibility: hidden; opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out, - opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out, - visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)); } :host([open]) { pointer-events: auto; visibility: visible; opacity: 1; - transition-delay: 0s; - transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s)); } :host { diff --git a/packages/tray/src/spectrum-tray.css b/packages/tray/src/spectrum-tray.css index bfd4b874e21..2bd279ab6cc 100644 --- a/packages/tray/src/spectrum-tray.css +++ b/packages/tray/src/spectrum-tray.css @@ -28,14 +28,6 @@ governing permissions and limitations under the License. box-sizing: border-box; border-radius: 0; border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0; - transition: - opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s, - visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-duration)), - transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s; - transition: - opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay), - visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-delay) + var(--spectrum-tray-exit-animation-duration)), - transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay); background-color: var(--spectrum-tray-background-color); outline: none; margin-block-start: var(--spectrum-tray-spacing-edge-to-tray-safe-zone); @@ -46,9 +38,6 @@ governing permissions and limitations under the License. } :host([open]) .tray { - transition: - transform var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay), - opacity var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay); transform: translateY(0); } diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index 5611f54d516..f196aa09e7f 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -24,9 +24,6 @@ governing permissions and limitations under the License. opacity: 0; background-color: var(--spectrum-underlay-background-color); z-index: 1; - transition: - opacity var(--spectrum-underlay-background-exit-animation-duration) var(--spectrum-underlay-background-exit-animation-ease) var(--spectrum-underlay-background-exit-animation-delay), - visibility 0s linear calc(var(--spectrum-underlay-background-exit-animation-delay) + var(--spectrum-underlay-background-exit-animation-duration)); position: fixed; inset-block: 0; inset-inline: 0; @@ -37,6 +34,4 @@ governing permissions and limitations under the License. pointer-events: auto; visibility: visible; opacity: 1; - transition: opacity var(--spectrum-underlay-background-entry-animation-duration) var(--spectrum-underlay-background-entry-animation-ease) var(--spectrum-underlay-background-entry-animation-delay); - transition-delay: var(--spectrum-underlay-background-entry-animation-delay); }