@nuvoui/core 1.2.4 → 1.2.6

package/src/styles/utilities/_transitions.scss

@@ -1,5 +1,5 @@
 // _transitions.scss
-@use '../abstracts'  as *;
+@use "../abstracts/config" as VAR;
 
 /**
  * Transition Utilities
@@ -11,20 +11,25 @@
  * - .delay-{time}: Set transition delay
  */
 
-// Base transition mixins
+// Property-specific transition mixins
+@mixin transition-none {
+  transition-property: none;
+}
 @mixin transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  transition-property: all;
+}
+@mixin transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+}
+@mixin transition-opacity {
+  transition-property: opacity;
+}
+@mixin transition-shadow {
+  transition-property: box-shadow;
+}
+@mixin transition-transform {
+  transition-property: transform;
 }
-
-// Property-specific transition mixins
-@mixin transition-none { transition-property: none; }
-@mixin transition-all { transition-property: all; }
-@mixin transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
-@mixin transition-opacity { transition-property: opacity; }
-@mixin transition-shadow { transition-property: box-shadow; }
-@mixin transition-transform { transition-property: transform; }
 
 // Duration mixins
 @mixin duration($time) {
@@ -32,10 +37,18 @@
 }
 
 // Timing function mixins
-@mixin ease-linear { transition-timing-function: linear; }
-@mixin ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
-@mixin ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
-@mixin ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+@mixin ease-linear {
+  transition-timing-function: linear;
+}
+@mixin ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+@mixin ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+@mixin ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 
 // Delay mixins
 @mixin delay($time) {
@@ -44,110 +57,151 @@
 
 // Timing functions
 $timing-functions: (
-  'linear': linear,
-  'in': cubic-bezier(0.4, 0, 1, 1),
-  'out': cubic-bezier(0, 0, 0.2, 1),
-  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
+  "linear": linear,
+  "in": cubic-bezier(0.4, 0, 1, 1),
+  "out": cubic-bezier(0, 0, 0.2, 1),
+  "in-out": cubic-bezier(0.4, 0, 0.2, 1),
 );
 
 // Durations
 $durations: (
-  '0': 0ms,
-  '75': 75ms,
-  '100': 100ms,
-  '150': 150ms,
-  '200': 200ms,
-  '300': 300ms,
-  '500': 500ms,
-  '700': 700ms,
-  '1000': 1000ms,
+  "0": 0ms,
+  "75": 75ms,
+  "100": 100ms,
+  "150": 150ms,
+  "200": 200ms,
+  "300": 300ms,
+  "500": 500ms,
+  "700": 700ms,
+  "1000": 1000ms,
 );
 
-
 // Delays
 $delays: (
-  '0': 0ms,
-  '75': 75ms,
-  '100': 100ms,
-  '150': 150ms,
-  '200': 200ms,
-  '300': 300ms,
-  '500': 500ms,
-  '700': 700ms,
-  '1000': 1000ms,
+  "0": 0ms,
+  "75": 75ms,
+  "100": 100ms,
+  "150": 150ms,
+  "200": 200ms,
+  "300": 300ms,
+  "500": 500ms,
+  "700": 700ms,
+  "1000": 1000ms,
 );
 
+@if VAR.$generate-utility-classes {
+  // Property-specific transitions
+  #{VAR.$parent-selector} .transition-none {
+    @include transition-none;
+  }
 
-@if $generate-utility-classes {
-  // Base transition
-  .transition {
+  #{VAR.$parent-selector} .transition {
     @include transition;
   }
 
-  // Property-specific transitions
-  .transition-none { @include transition-none; }
-  .transition-all { @include transition-all; }
-  .transition-colors { @include transition-colors; }
-  .transition-opacity { @include transition-opacity; }
-  .transition-shadow { @include transition-shadow; }
-  .transition-transform { @include transition-transform; }
+  #{VAR.$parent-selector} .transition-colors {
+    @include transition-colors;
+  }
+
+  #{VAR.$parent-selector} .transition-opacity {
+    @include transition-opacity;
+  }
+
+  #{VAR.$parent-selector} .transition-shadow {
+    @include transition-shadow;
+  }
+
+  #{VAR.$parent-selector} .transition-transform {
+    @include transition-transform;
+  }
 
   @each $name, $value in $durations {
-    .duration-#{$name} {
+    #{VAR.$parent-selector} .duration-#{$name} {
       @include duration($value);
     }
   }
 
   @each $name, $value in $timing-functions {
-    .ease-#{$name} {
+    #{VAR.$parent-selector} .ease-#{$name} {
       transition-timing-function: $value;
     }
   }
 
   // Specific timing function classes
-  .ease-linear { @include ease-linear; }
-  .ease-in { @include ease-in; }
-  .ease-out { @include ease-out; }
-  .ease-in-out { @include ease-in-out; }
+  #{VAR.$parent-selector} .ease-linear {
+    @include ease-linear;
+  }
+
+  #{VAR.$parent-selector} .ease-in {
+    @include ease-in;
+  }
+
+  #{VAR.$parent-selector} .ease-out {
+    @include ease-out;
+  }
+
+  #{VAR.$parent-selector} .ease-in-out {
+    @include ease-in-out;
+  }
 
   @each $name, $value in $delays {
-    .delay-#{$name} {
+    #{VAR.$parent-selector} .delay-#{$name} {
       @include delay($value);
     }
   }
 
   // Responsive variants
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       // Base transition
-      .transition\@#{$breakpoint} {
+      #{VAR.$parent-selector} .transition\@#{$breakpoint} {
         @include transition;
       }
-      
+
       // Property-specific transitions
-      .transition-none\@#{$breakpoint} { @include transition-none; }
-      .transition-all\@#{$breakpoint} { @include transition-all; }
-      .transition-colors\@#{$breakpoint} { @include transition-colors; }
-      .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
-      .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
-      .transition-transform\@#{$breakpoint} { @include transition-transform; }
-      
+      #{VAR.$parent-selector} .transition-none\@#{$breakpoint} {
+        @include transition-none;
+      }
+      #{VAR.$parent-selector} .transition\@#{$breakpoint} {
+        @include transition;
+      }
+      #{VAR.$parent-selector} .transition-colors\@#{$breakpoint} {
+        @include transition-colors;
+      }
+      #{VAR.$parent-selector} .transition-opacity\@#{$breakpoint} {
+        @include transition-opacity;
+      }
+      #{VAR.$parent-selector} .transition-shadow\@#{$breakpoint} {
+        @include transition-shadow;
+      }
+      #{VAR.$parent-selector} .transition-transform\@#{$breakpoint} {
+        @include transition-transform;
+      }
+
       // Duration responsive variants
       @each $name, $value in $durations {
-        .duration-#{$name}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .duration-#{$name}\@#{$breakpoint} {
           @include duration($value);
         }
       }
-      
+
       // Timing function responsive variants
-      .ease-linear\@#{$breakpoint} { @include ease-linear; }
-      .ease-in\@#{$breakpoint} { @include ease-in; }
-      .ease-out\@#{$breakpoint} { @include ease-out; }
-      .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
-      
+      #{VAR.$parent-selector} .ease-linear\@#{$breakpoint} {
+        @include ease-linear;
+      }
+      #{VAR.$parent-selector} .ease-in\@#{$breakpoint} {
+        @include ease-in;
+      }
+      #{VAR.$parent-selector} .ease-out\@#{$breakpoint} {
+        @include ease-out;
+      }
+      #{VAR.$parent-selector} .ease-in-out\@#{$breakpoint} {
+        @include ease-in-out;
+      }
+
       // Delay responsive variants
       @each $name, $value in $delays {
-        .delay-#{$name}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .delay-#{$name}\@#{$breakpoint} {
           @include delay($value);
         }
       }