@central-design-system/components 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/scss/modules/_transition.scss

@@ -1,14 +1,17 @@
 @import '../mixins/motion';
 
 $standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
+$standard-duration: $cds-duration-fast + ms;
+$accent-easting: map-get(map-get($easing, 'ease-in-out'), 'accent');
+$accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
   &-enter-active {
-    transition: 0.3s $standard-easing;
+    transition: $standard-duration $standard-easing;
   }
 
   &-leave-active {
-    transition: 0.3s $standard-easing;
+    transition: $standard-duration $standard-easing;
   }
 
   &-move {
@@ -16,11 +19,138 @@ $standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
   }
 }
 
+@mixin fade-out() {
+  &-leave-to {
+    opacity: 0;
+  }
+  &-leave-active {
+    transition-duration: 100ms !important;
+  }
+}
+
 // Generic transitions
+.fade-transition {
+  @include transition-default();
+
+  &-leave-active {
+    position: absolute;
+  }
+
+  &-enter-from, &-leave-to {
+    opacity: 0 !important;
+  }
+}
+
 .expand-transition {
   @include transition-default();
 }
 
-.expand-x-transition {
+.expand-transition-x {
   @include transition-default();
 }
+
+.slide-transition-y {
+  @include transition-default();
+
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.slide-transition-x {
+  @include transition-default();
+
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+}
+
+.slide-transition-right {
+  &-enter-active,
+  &-leave-active {
+    transition: transform $accent-duration $accent-easting;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+
+  &-enter-from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  &-leave-to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slide-transition-left {
+  &-enter-active,
+  &-leave-active {
+    transition: transform $accent-duration $accent-easting;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+
+  &-enter-from {
+    transform: translate3d(100%, 0, 0);
+  }
+  &-leave-to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.jump-transition {
+  &-left, &-right {
+    &-enter-active,
+    &-leave-active {
+      transition: opacity $accent-duration, transform $accent-duration;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0
+    }
+
+    &-leave-active {
+      position: absolute;
+    }
+  }
+
+  &-right {
+    &-enter-from {
+      transform: translate3d(-15px, 0, 0);
+    }
+    &-leave-to {
+      transform: translate3d(15px, 0, 0);
+    }
+  }
+
+  &-left {
+    &-enter-from {
+      transform: translate3d(15px, 0, 0);
+    }
+    &-leave-to {
+      transform: translate3d(-15px, 0, 0);
+    }
+  }
+}
+
+.scale-transition {
+  @include transition-default();
+  @include fade-out();
+
+  &-enter-from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: transform, opacity !important;
+  }
+}
+

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 2/18/2023, 7:04:48 PM
+ * Generated on 7/6/2023, 2:59:15 PM
  **/
 
 /**

package/src/scss/utility/lists.scss

@@ -14,6 +14,7 @@
     position: relative;
     list-style-type: none;
     border: 0;
+    text-align: left;
     counter-increment: listitem;
     margin: 0 0 $cds-spacing-xxs $cds-spacing-xs;
     padding: 0 0 0 $cds-spacing-xs;

package/dist/types/CdsOptions.d.ts

@@ -1,3 +0,0 @@
-export interface ICdsOptions {
-  cssGrid?: boolean;
-}