@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.0

package/sass-utilities/mixins.scss

@@ -1,6 +1,7 @@
 @use '../sass-utilities/functions' as *;
 @use '../sass-utilities/init' as *;
 @use '../sass-utilities/scss-variables' as *;
+@use '../sass-utilities/namespaces-components' as *;
 
 // Media query used to create responsive classes
 @mixin pf-v6-media-query($point) {
@@ -276,6 +277,25 @@
   }
 }
 
+// Animate error state on form elements
+@mixin pf-v6-animate-danger-jiggle {
+  translate: var(--#{$pf-global}--danger-jiggle--TranslateX, 0);
+  animation-name: #{$pf-global}-danger-jiggle-motion;
+  animation-duration: var(--#{$pf-global}--danger-jiggle--AnimationDuration--Transform);
+  animation-timing-function: var(--#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform);
+  animation-fill-mode: both;
+}
+
+// Animate default fade in/out
+@mixin pf-v6-fade-default($element) {
+  --#{$element}--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --#{$element}--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+
+  animation-name: #{$pf-global}-fade-in;
+  animation-duration: var(--#{$element}--TransitionDuration--Opacity);
+  animation-timing-function: var(--#{$element}--TransitionTimingFunction--Opacity);
+}
+
 // Build variable stack
 @mixin pf-v6-build-css-variable-stack($prop, $css-var, $breakpoint-map: $pf-v6-global--breakpoint-map, $important: false) {
   $list: ();
@@ -410,6 +430,7 @@
   scale: -1 1;
 }
 
+
 @mixin pf-v6-mirror-inline-on-rtl {
   @include pf-v6-rtl {
     @include pf-v6-mirror-inline;
@@ -427,3 +448,36 @@
     @content
   }
 }
+
+// Sets hamburger styles. Defaults to expand styles (right arrow)
+// $collapse - if true, changes to left arrow
+// $reset - will reset the bars to the default (no arrow)
+@mixin pf-v6-hamburger($collapse: false, $reset: false) {
+  @if $reset {
+    --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--path--base);
+    --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--path--base);
+    --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--path--base);
+    --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+  } @else {
+    // set direction vars
+    --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--collapse--path);
+    --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--collapse--path);
+    --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--collapse--path);
+
+    // collapse
+    @if $collapse {
+      --#{$button}__icon--TransitionDelay: 0s;
+      --#{$button}__icon--ScaleX: 1;
+      --#{$button}--hover__icon--TransitionDelay: 0s;
+      --#{$button}--hover__icon--ScaleX: 1;
+
+    // expand
+    } @else {
+      --#{$button}__icon--TransitionDelay: 0s;
+      --#{$button}__icon--ScaleX: var(--#{$button}--m-hamburger__icon--m-expand--ScaleX);
+      --#{$button}--hover__icon--TransitionDelay: 0s;
+      --#{$button}--hover__icon--ScaleX: var(--#{$button}--m-hamburger__icon--m-expand--ScaleX);
+    }
+  }
+}