@mgremy/ng-primitives 0.12.0 → 0.14.0

package/theme/components/toast.css

@@ -1,111 +0,0 @@
-@utility mgnp-toast {
-  position: absolute;
-  touch-action: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  height: fit-content;
-  padding: --spacing(3) --spacing(4);
-  border-radius: --spacing(2);
-  width: --spacing(87.5);
-  border: 1px solid var(--mg-border-ui);
-  background: var(--mg-background-ui);
-  box-shadow: var(--mg-shadow-ui);
-  z-index: var(--ngp-toast-z-index);
-  transform: var(--y);
-
-  @variant data-enter {
-    --y: translateY(0);
-    opacity: 1;
-    animation: mg-slide-in var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-
-  @variant data-exit {
-    opacity: 0;
-    transform: translateY(100%);
-    transition:
-      opacity var(--default-transition-duration) var(--default-transition-timing-function),
-      transform var(--default-transition-duration) var(--default-transition-timing-function);
-    --y: translateY(calc(calc(var(--lift) * var(--ngp-toast-gap)) * -1));
-  }
-
-  @variant data-[visible=false] {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @variant data-[position-x=end] {
-    right: 0;
-  }
-
-  @variant data-[position-x=start] {
-    left: 0;
-  }
-
-  @variant data-[position-y=top] {
-    top: 0;
-    --lift: 1;
-    --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));
-  }
-
-  @variant data-[position-y=bottom] {
-    bottom: 0;
-    --lift: -1;
-    --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));
-  }
-
-  @variant data-[expanded=true] {
-    --y: translateY(calc(var(--lift) * var(--ngp-toast-offset)));
-    height: auto;
-
-    ::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      height: calc(var(--ngp-toast-gap) + 1px);
-      bottom: 100%;
-      width: 100%;
-    }
-  }
-
-  @variant data-[expanded=false] {
-    @variant data-[front=false] {
-      --scale: var(--ngp-toasts-before) * 0.05 + 1;
-      --y: translateY(calc(var(--lift-amount) * var(--ngp-toasts-before)))
-        scale(calc(-1 * var(--scale)));
-      height: var(--ngp-toast-front-height);
-    }
-  }
-
-  @variant data-[swiping=true] {
-    transform: var(--y) translateY(var(--ngp-toast-swipe-amount-y, 0))
-      translateX(var(--ngp-toast-swipe-amount-x, 0));
-
-    @variant data-[swipe-direction=left] {
-      /* Fade out from -45px to -100px swipe */
-      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-x, 0px)) - 45) / 55, 1));
-    }
-
-    @variant data-[swipe-direction=right] {
-      /* Fade out from 45px to 100px swipe */
-      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-x, 0px) - 45) / 55, 1));
-    }
-
-    @variant data-[swipe-direction=top] {
-      /* Fade out from -45px to -100px swipe */
-      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-y, 0px)) - 45) / 55, 1));
-    }
-
-    @variant data-[swipe-direction=bottom] {
-      /* Fade out from 45px to 100px swipe */
-      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-y, 0px) - 45) / 55, 1));
-    }
-  }
-}
-
-@layer base {
-  [mgnpToast][data-mgnp-component='mgnp-toast'] {
-    @apply mgnp-toast transition;
-  }
-}

package/theme/components/tooltip.css

@@ -1,46 +0,0 @@
-@utility mgnp-tooltip {
-  position: absolute;
-  border: none;
-  animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
-  max-width: --spacing(64);
-  padding-block: --spacing(2);
-  padding-inline: --spacing(3);
-  font-size: var(--text-xs);
-  line-height: var(--text-xs--line-height);
-  border-radius: var(--radius-lg);
-  background-color: var(--mg-background-ui-inverse);
-  color: var(--mg-text-inverse);
-  transform-origin: var(--ngp-tooltip-transform-origin);
-
-  @variant data-exit {
-    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-}
-
-@utility mgnp-tooltip-arrow {
-  position: absolute;
-  pointer-events: none;
-  transform: rotate(45deg);
-  width: --spacing(2);
-  height: --spacing(2);
-  border-radius: var(--radius-xs);
-  background-color: var(--mg-background-ui-inverse);
-
-  @variant data-[placement="top"] {
-    top: calc(100% - 5px);
-  }
-
-  @variant data-[placement="bottom"] {
-    bottom: calc(100% - 5px);
-  }
-}
-
-@layer base {
-  [mgnpTooltip][data-mgnp-component='mgnp-tooltip'] {
-    @apply mgnp-tooltip transition;
-  }
-
-  [mgnpTooltipArrow][data-mgnp-component='mgnp-tooltip-arrow'] {
-    @apply mgnp-tooltip-arrow transition;
-  }
-}