From c2d20719b2ed627f7f4a98a5b8a5b47f2751d34f Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 25 Jul 2023 10:06:54 -0700 Subject: [PATCH] refactor: clean up global stylesheets - reduces root selector amount and organizes into mixins --- .../src/assets/styles/_animation.scss | 168 +++++++++--------- .../src/assets/styles/_floating-ui.scss | 2 +- .../src/assets/styles/global.scss | 6 + 3 files changed, 93 insertions(+), 83 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_animation.scss b/packages/calcite-components/src/assets/styles/_animation.scss index 386cf24c6e2..28fd660a120 100644 --- a/packages/calcite-components/src/assets/styles/_animation.scss +++ b/packages/calcite-components/src/assets/styles/_animation.scss @@ -1,68 +1,102 @@ -@keyframes in { - 0% { - opacity: 0; +@mixin animation-helper-classes() { + @keyframes in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } - 100% { - opacity: 1; + + @keyframes in-down { + 0% { + opacity: 0; + transform: translate3D(0, -5px, 0); + } + 100% { + opacity: 1; + transform: translate3D(0, 0, 0); + } } -} -@keyframes in-down { - 0% { - opacity: 0; - transform: translate3D(0, -5px, 0); + @keyframes in-up { + 0% { + opacity: 0; + transform: translate3D(0, 5px, 0); + } + 100% { + opacity: 1; + transform: translate3D(0, 0, 0); + } } - 100% { - opacity: 1; - transform: translate3D(0, 0, 0); + + @keyframes in-right { + 0% { + opacity: 0; + transform: translate3D(-5px, 0, 0); + } + 100% { + opacity: 1; + transform: translate3D(0, 0, 0); + } } -} -@keyframes in-up { - 0% { - opacity: 0; - transform: translate3D(0, 5px, 0); + @keyframes in-left { + 0% { + opacity: 0; + transform: translate3D(5px, 0, 0); + } + 100% { + opacity: 1; + transform: translate3D(0, 0, 0); + } } - 100% { - opacity: 1; - transform: translate3D(0, 0, 0); + + @keyframes in-scale { + 0% { + opacity: 0; + transform: scale3D(0.95, 0.95, 1); + } + 100% { + opacity: 1; + transform: scale3D(1, 1, 1); + } } -} -@keyframes in-right { - 0% { + // allows animation trigger via JS by adding class to element + .calcite-animate { opacity: 0; - transform: translate3D(-5px, 0, 0); + animation-fill-mode: both; + animation-duration: var(--calcite-animation-timing); } - 100% { - opacity: 1; - transform: translate3D(0, 0, 0); + + // specify animation + .calcite-animate__in { + animation-name: in; } -} -@keyframes in-left { - 0% { - opacity: 0; - transform: translate3D(5px, 0, 0); + .calcite-animate__in-down { + animation-name: in-down; } - 100% { - opacity: 1; - transform: translate3D(0, 0, 0); + + .calcite-animate__in-up { + animation-name: in-up; } -} -@keyframes in-scale { - 0% { - opacity: 0; - transform: scale3D(0.95, 0.95, 1); + .calcite-animate__in-right { + animation-name: in-right; + } + + .calcite-animate__in-left { + animation-name: in-left; } - 100% { - opacity: 1; - transform: scale3D(1, 1, 1); + + .calcite-animate__in-scale { + animation-name: in-scale; } } -:root { +@mixin animation-base() { --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor)); --calcite-internal-duration-factor: var(--calcite-duration-factor, 1); --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor)); @@ -70,43 +104,13 @@ --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor)); } -// allows animation trigger via JS by adding class to element -.calcite-animate { - opacity: 0; - animation-fill-mode: both; - animation-duration: var(--calcite-animation-timing); -} - -// specify animation -.calcite-animate__in { - animation-name: in; -} - -.calcite-animate__in-down { - animation-name: in-down; -} - -.calcite-animate__in-up { - animation-name: in-up; -} - -.calcite-animate__in-right { - animation-name: in-right; -} - -.calcite-animate__in-left { - animation-name: in-left; -} - -.calcite-animate__in-scale { - animation-name: in-scale; -} - -@media (prefers-reduced-motion: reduce) { - :root { - // [workaround] using 0.01 to ensure `openCloseComponent` utils work consistently - // this should be removed once https://github.com/Esri/calcite-design-system/issues/6604 is addressed - --calcite-internal-duration-factor: 0.01; +@mixin animation-reduced-motion() { + @media (prefers-reduced-motion: reduce) { + :root { + // [workaround] using 0.01 to ensure `openCloseComponent` utils work consistently + // this should be removed once https://github.com/Esri/calcite-design-system/issues/6604 is addressed + --calcite-internal-duration-factor: 0.01; + } } } diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index d2f80673b4d..3783853269d 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -3,7 +3,7 @@ $floating-ui-transform-top: translateY(5px); $floating-ui-transform-left: translateX(5px); $floating-ui-transform-right: translateX(-5px); -:root { +@mixin floating-ui-base { --calcite-floating-ui-transition: var(--calcite-animation-timing); --calcite-floating-ui-z-index: theme("zIndex.dropdown"); } diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss index fac59dcb6c2..023c0f02556 100644 --- a/packages/calcite-components/src/assets/styles/global.scss +++ b/packages/calcite-components/src/assets/styles/global.scss @@ -40,6 +40,8 @@ @extend %type-vars; @include calcite-theme-headless(); @include calcite-mode-light-extended(); + @include floating-ui-base(); + @include animation-base(); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -73,3 +75,7 @@ @include calcite-mode-light-extended(); } } + +@include animation-reduced-motion(); + +@include animation-helper-classes();