@react-md/core 1.0.0-next.2 → 1.0.0-next.21

package/src/transition/_transition.scss

@@ -1,355 +0,0 @@
-@use "sass:color";
-@use "sass:map";
-@use "../utils";
-@use "../theme/colors";
-@use "../theme/theme";
-
-$disable-everything: false !default;
-$disable-collapse-transition: $disable-everything !default;
-$disable-cross-fade-transition: $disable-everything !default;
-$disable-scale-transition: $disable-everything !default;
-$disable-scale-y-transition: $disable-scale-transition !default;
-$disable-skeleton-placeholder: $disable-everything !default;
-$disable-slide-transition: $disable-everything !default;
-$disable-max-width-transition: $disable-everything !default;
-$disable-max-width-transition-gap: $disable-max-width-transition !default;
-
-$linear-duration: 0.15s !default;
-$enter-duration: 0.2s !default;
-$leave-duration: 0.15s !default;
-
-$sharp-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;
-$linear-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$acceleration-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
-$deceleration-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
-
-$cross-fade-translate-distance: -1rem !default;
-$cross-fade-transition-duration: 0.3s !default;
-
-$scale-transition-enter-duration: $enter-duration !default;
-$scale-transition-leave-duration: $leave-duration !default;
-$scale-y-transition-enter-duration: $enter-duration !default;
-$scale-y-transition-leave-duration: $leave-duration !default;
-
-$skeleton-placeholder-height: 1.125em !default;
-$skeleton-placeholder-border-radius: 0.25rem !default;
-$skeleton-placeholder-light-background-color: #000 !default;
-$skeleton-placeholder-dark-background-color: colors.$grey-300 !default;
-$skeleton-placeholder-background-color: if(
-  theme.$color-scheme == system,
-  $skeleton-placeholder-dark-background-color,
-  $skeleton-placeholder-light-background-color
-) !default;
-$skeleton-placeholder-animation: (
-  0%: (
-    opacity: 0.06,
-  ),
-  60%: (
-    opacity: 0.1,
-  ),
-  80%: (
-    opacity: 0.08,
-  ),
-  100%: (
-    opacity: 0.06,
-  ),
-) !default;
-$skeleton-placeholder-animation-duration: 1.8s !default;
-$skeleton-placeholder-animation-timing-function: ease-in-out !default;
-
-$slide-duration: $linear-duration !default;
-$slide-timing-function: $linear-timing-function !default;
-
-$max-width-transition-duration: $linear-duration !default;
-$max-width-transition-timing-function: $linear-timing-function !default;
-$max-width-transition-default: 100% !default;
-
-$transition-variables: (
-  skeleton-placeholder-background-color,
-  skeleton-placeholder-height,
-  skeleton-placeholder-width,
-  slide-duration,
-  max-width,
-  max-width-gap
-);
-
-@function transition-get-var($name, $fallback: null) {
-  $var: utils.get-var-name($transition-variables, $name, "transition");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin transition-set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($transition-variables, $name, "transition")}: #{$value};
-  }
-}
-
-@mixin transition-use-var($property, $name: $property, $fallback: null) {
-  #{$property}: transition-get-var($name, $fallback);
-}
-
-@mixin transition-use-light-theme {
-  @if not $disable-skeleton-placeholder {
-    @include transition-set-var(
-      skeleton-placeholder-background-color,
-      $skeleton-placeholder-light-background-color
-    );
-  }
-}
-
-@mixin transition-use-dark-theme {
-  @if not $disable-skeleton-placeholder {
-    @include transition-set-var(
-      skeleton-placeholder-background-color,
-      $skeleton-placeholder-dark-background-color
-    );
-  }
-}
-
-/// Note: This was only added because there was an issue with stylelint using @include as the only child within a keyframes
-@mixin keyframes($name) {
-  @keyframes #{$name} {
-    @content;
-  }
-}
-
-@mixin collapse-transition {
-  .rmd-collapse {
-    transition-property: max-height, padding-bottom, padding-top;
-    will-change: max-height, padding-bottom, padding-top;
-
-    &--no-overflow {
-      overflow: hidden;
-    }
-
-    &--enter {
-      transition-timing-function: $deceleration-timing-function;
-    }
-
-    &--leave {
-      transition-timing-function: $acceleration-timing-function;
-    }
-  }
-}
-
-@mixin cross-fade-transition {
-  .rmd-cross-fade {
-    opacity: 0;
-    transform: translateY($cross-fade-translate-distance);
-
-    &--active {
-      opacity: 1;
-      transform: translateY(0);
-      transition-duration: $cross-fade-transition-duration;
-      transition-property: opacity, transform;
-      transition-timing-function: $deceleration-timing-function;
-    }
-  }
-}
-
-@mixin scale-transition {
-  .rmd-scale-transition--enter {
-    opacity: 0;
-    transform: scale(0);
-  }
-
-  .rmd-scale-transition--enter-active {
-    opacity: 1;
-    transform: scale(1);
-    transition-duration: $scale-transition-enter-duration;
-    transition-property: opacity, transform;
-    transition-timing-function: $deceleration-timing-function;
-  }
-
-  .rmd-scale-transition--exit {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .rmd-scale-transition--exit-active {
-    opacity: 0;
-    transform: scale(0);
-    transition-duration: $scale-transition-leave-duration;
-    transition-property: opacity, transform;
-    transition-timing-function: $acceleration-timing-function;
-  }
-}
-
-@mixin scale-y-transition {
-  .rmd-scale-transition--y-enter {
-    transform: scaleY(0);
-    transform-origin: 0 0;
-  }
-
-  .rmd-scale-transition--y-enter-active {
-    transform: scaleY(1);
-    @if $scale-y-transition-enter-duration != $scale-transition-enter-duration {
-      transition-duration: $scale-y-transition-enter-duration;
-    }
-  }
-
-  .rmd-scale-transition--y-exit {
-    transform: scaleY(1);
-    transform-origin: 0 0;
-  }
-
-  .rmd-scale-transition--y-exit-active {
-    transform: scaleY(0);
-    @if $scale-y-transition-leave-duration != $scale-transition-leave-duration {
-      transition-duration: $scale-y-transition-leave-duration;
-    }
-  }
-}
-
-@mixin skeleton-placeholder-animation {
-  .rmd-skeleton-placeholder {
-    @include transition-use-var(
-      background-color,
-      skeleton-placeholder-background-color
-    );
-    @include transition-use-var(height, skeleton-placeholder-height);
-
-    animation: rmd-skeleton-placeholder $skeleton-placeholder-animation-duration
-      $skeleton-placeholder-animation-timing-function infinite;
-    border-radius: $skeleton-placeholder-border-radius;
-    color: transparent;
-  }
-
-  @include keyframes(rmd-skeleton-placeholder) {
-    @include utils.map-to-animation($skeleton-placeholder-animation);
-  }
-}
-
-@mixin slide-transition {
-  .rmd-slide-container {
-    align-items: flex-start;
-    display: flex;
-    flex-wrap: nowrap;
-    height: 100%;
-    overflow: hidden auto;
-    width: 100%;
-
-    &--left {
-      --p1-start: 0;
-      --p2-start: 0;
-      --p1-end: -100%;
-      --p2-end: -100%;
-    }
-
-    &--right {
-      --p1-start: -100%;
-      --p2-start: -100%;
-      --p1-end: 0;
-      --p2-end: 0;
-    }
-  }
-
-  .rmd-slide {
-    flex: 1 0 auto;
-    height: 100%;
-    width: 100%;
-    will-change: transform;
-
-    &--animate {
-      transition: transform transition-get-var(slide-duration)
-        $slide-timing-function;
-    }
-
-    &--enter {
-      transform: translate3d(var(--p1-start), 0, 0);
-    }
-
-    &--enter-active {
-      transform: translate3d(var(--p1-end), 0, 0);
-    }
-
-    &--exit {
-      transform: translate3d(var(--p2-start), 0, 0);
-    }
-
-    &--exit-active {
-      transform: translate3d(var(--p2-end), 0, 0);
-    }
-  }
-}
-
-@mixin transition-variables {
-  @if not $disable-skeleton-placeholder {
-    @include transition-set-var(
-      skeleton-placeholder-background-color,
-      $skeleton-placeholder-background-color
-    );
-    @include transition-set-var(
-      skeleton-placeholder-height,
-      $skeleton-placeholder-height
-    );
-  }
-
-  @if not $disable-slide-transition {
-    @include transition-set-var(slide-duration, $slide-duration);
-  }
-
-  @if not $disable-max-width-transition {
-    @include transition-set-var(max-width, $max-width-transition-default);
-
-    @if not $disable-max-width-transition-gap {
-      @include transition-set-var(max-width-gap, 0);
-    }
-  }
-}
-
-@mixin transition-styles {
-  @if not $disable-collapse-transition {
-    @include collapse-transition;
-  }
-
-  @if not $disable-cross-fade-transition {
-    @include cross-fade-transition;
-  }
-
-  @if not $disable-scale-transition or not $disable-scale-y-transition {
-    @include scale-transition;
-  }
-
-  @if not $disable-scale-y-transition {
-    @include scale-y-transition;
-  }
-
-  @if not $disable-skeleton-placeholder {
-    @include skeleton-placeholder-animation;
-  }
-
-  @if not $disable-slide-transition {
-    @include slide-transition;
-  }
-
-  @if not $disable-max-width-transition {
-    .rmd-max-width-transition {
-      @if not $disable-max-width-transition-gap {
-        @include utils.auto-rtl(
-          margin-right,
-          utils.negate-var(transition-get-var(max-width-gap)),
-          0
-        );
-      }
-
-      max-width: 0;
-      overflow: hidden;
-      transition: max-width
-        $max-width-transition-duration
-        $max-width-transition-timing-function;
-      will-change: max-width;
-
-      &--visible {
-        @if not $disable-max-width-transition-gap {
-          @include utils.auto-rtl(margin-right, 0);
-        }
-        @include transition-use-var(max-width);
-      }
-    }
-  }
-}