Sha256: 60f65ca429a81dc344eb04c2f8a294bbabb6c3f9fa900068b567cc88a099fcc0

Contents?: true

Size: 1.85 KB

Versions: 8

Compression:

Stored size: 1.85 KB

Contents

/// Creates a hinge transition by rotating the element.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
@mixin mui-hinge (
  $state: in,
  $from: left,
  $axis: edge,
  $perspective: 2000px,
  $turn-origin: null,
  $fade: map-get($motion-ui-settings, hinge-and-fade),
  $duration: null,
  $timing: null,
  $delay: null
) {
  $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
  $hinge: hinge($state, $from, $axis, $perspective, $turn-origin);

  @include transition-start($state) {
    @include transition-basics($duration, $timing, $delay);
    @include -mui-keyframe-get($hinge, 0);

    @if $fade {
      transition-property: transform, opacity;
      opacity: if($state == in, 0, 1);
    } @else {
      transition-property: transform, opacity;
    }
  }

  @include transition-end($state) {
    @include -mui-keyframe-get($hinge, 100);

    @if $fade {
      opacity: if($state == in, 1, 0);
    }
  }
}

Version data entries

8 entries across 8 versions & 2 rubygems

Version Path
foundation-rails-6.9.0.0 vendor/assets/scss/motion-ui/transitions/_hinge.scss
foundation-rails-6.6.2.0 vendor/assets/scss/motion-ui/transitions/_hinge.scss
bedrock_sass-0.2.2 assets/_vendor/motion-ui/transitions/_hinge.scss
foundation-rails-6.6.1.0 vendor/assets/scss/motion-ui/transitions/_hinge.scss
foundation-rails-6.5.3.0 vendor/assets/scss/motion-ui/transitions/_hinge.scss
bedrock_sass-0.2.1 assets/_vendor/motion-ui/transitions/_hinge.scss
foundation-rails-6.5.1.0 vendor/assets/scss/motion-ui/transitions/_hinge.scss
bedrock_sass-0.2.0 assets/_vendor/motion-ui/transitions/_hinge.scss