@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/MutableHamburgerButton/MutableHamburgerButton.module.scss

@@ -1,220 +0,0 @@
-@use 'sass:math';
-@import "../../assets/styles/index.scss";
-
-$slice: math.div(1, 7);
-
-.container {
-  box-sizing: content-box;
-  cursor: pointer;
-  width: 1em;
-  height: 1em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-evenly;
-  background-size: 0 0;
-  background-repeat: no-repeat;
-  transition: transform 250ms;
-  transition-timing-function: ease-in-out;
-  &:active {
-    transform: scale(0.9);
-  }
-  > * {
-    position: relative;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    width: 0.8em;
-    height: #{$slice}em;
-    border-radius: #{math.div($slice, 2)}em;
-    transition: transform $veryFast, width $veryFast, height $veryFast,
-      border-width $veryFast, background-color $veryFast,
-      border-radius $veryFast, top $veryFast;
-    background: var(--mutable-hamburger-background, $digitalBlue);
-    background-size: 1em 1em;
-    background-repeat: no-repeat;
-    border: 0em solid #0000;
-    top: 0px;
-    &:nth-child(1) {
-      border-top-color: var(--mutable-hamburger-background, $digitalBlue);
-    }
-    &:nth-child(2) {
-      border-right-color: var(--mutable-hamburger-background, $digitalBlue);
-    }
-    &:nth-child(3) {
-      border-bottom-color: var(--mutable-hamburger-background, $digitalBlue);
-      border-left-color: var(--mutable-hamburger-background, $digitalBlue);
-    }
-  }
-  & > * {
-    background-position-x: -0.1em;
-  }
-  & > :nth-child(1) {
-    background-position-y: #{$slice * -1}em;
-  }
-  & > :nth-child(2) {
-    background-position-y: #{$slice * -3}em;
-  }
-  & > :nth-child(3) {
-    background-position-y: #{$slice * -5}em;
-  }
-
-  &.closed {
-    > :nth-child(1) {
-      transform: translateY(#{$slice * 2}em) rotateZ(-45deg);
-    }
-    > :nth-child(2) {
-      transform: rotateZ(45deg);
-    }
-    > :nth-child(3) {
-      transform: translateY(-#{$slice * 2}em) rotateZ(-45deg);
-    }
-  }
-
-  &.arrow-up {
-    > * {
-      width: 0.4em;
-    }
-    > :nth-child(1) {
-      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(45deg);
-    }
-    > :nth-child(2) {
-      transform: translateX(0.1em) rotateZ(45deg);
-    }
-    > :nth-child(3) {
-      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(-45deg);
-    }
-  }
-
-  &.arrow-down {
-    > * {
-      width: 0.4em;
-    }
-    > :nth-child(1) {
-      transform: translateX(0.1em) translateY(#{$slice * 2}em) rotateZ(-45deg);
-    }
-    > :nth-child(2) {
-      transform: translateX(0.1em) rotateZ(-45deg);
-    }
-    > :nth-child(3) {
-      transform: translateX(-0.1em) translateY(-#{$slice * 2}em) rotateZ(45deg);
-    }
-  }
-
-  &.search {
-    > :nth-child(1) {
-      $rate: 1.8;
-      width: #{$slice * $rate + math.div($slice, 1.35)}em;
-      height: #{$slice * $rate + math.div($slice, 1.35)}em;
-      border-radius: #{$slice * $rate * 2}em;
-      background-color: transparent;
-      border: #{math.div($slice, 1.35)}em solid
-        var(--mutable-hamburger-background, $digitalBlue);
-      transform: translateX(-0.15em);
-    }
-    > :nth-child(2) {
-      transform: translateX(0.12em) translateY(-0.05em) rotateZ(45deg);
-      height: #{math.div($slice, 1.35)}em;
-      width: 0.55em;
-    }
-    > :nth-child(3) {
-      transform: translateX(0.12em) translateY(-#{($slice * 1.3) + 0.085}em)
-        rotateZ(45deg);
-      height: #{math.div($slice, 1.35)}em;
-      width: 0.55em;
-    }
-  }
-
-  &.checkmark {
-    > :nth-child(1) {
-      transform: translateY(#{$slice * 2}em) translateX(-0.178em)
-        translateY(0.13em) rotate(45deg);
-      height: #{$slice}em;
-      width: 0.45em;
-    }
-    > :nth-child(2) {
-      height: #{$slice}em;
-      width: 0.7em;
-      transform: translateX(0.1em) rotate(-55deg);
-    }
-    > :nth-child(3) {
-      transform: translateY(-#{$slice * 2}em) translateX(0.1em) rotate(-55deg);
-      height: #{$slice}em;
-      width: 0.7em;
-    }
-  }
-
-  &.loading {
-    $slice: math.div(1, 6);
-    @keyframes rotate {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-    animation-name: rotate;
-    animation-duration: 1s;
-    animation-delay: $veryFast;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    > * {
-      background-color: #0000;
-      width: #{$slice * 4.5}em;
-      height: #{$slice * 4.5}em;
-      border-radius: #{$slice * 4.5}em;
-      border-width: #{$slice}em;
-    }
-    > :nth-child(1) {
-      top: (#{$slice * 4.5}em);
-    }
-    > :nth-child(2) {
-      transform: rotateZ(-5deg);
-    }
-    > :nth-child(3) {
-      transform: rotateZ(-95deg);
-      top: (-#{$slice * 4.5}em);
-    }
-  }
-  &.pencil {
-    perspective: 600px;
-
-    > :nth-child(1) {
-      height: #{$slice}em;
-      width: 0.15em;
-      transform: translateX(0.3em) rotate(-45deg);
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-
-    > :nth-child(2) {
-      width: 0.6em;
-      transform: rotate(-45deg);
-      border-radius: 0;
-    }
-
-    > :nth-child(3) {
-      $slice: $slice * 0.6;
-
-      height: 0em;
-      width: 0em;
-      border-radius: 0;
-      transform: translateX(-0.27em) translateY(0.027em) rotate(-80deg)
-        rotateY(45deg) skew(12deg, 12deg);
-
-      border-left: #{$slice}em solid transparent;
-      border-right: #{$slice}em solid transparent;
-      border-bottom: 0em solid transparent;
-      border-top: #{$slice}em solid;
-      background-color: transparent;
-    }
-  }
-  &.hamburger {
-    > :nth-child(1) {
-      width: 0.7em;
-    }
-    > :nth-child(3) {
-      width: 0.7em;
-    }
-  }
-}

package/src/components/MutableHamburgerButton/MutableHamburgerButton.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import Styles from "./MutableHamburgerButton.module.scss";
-
-/**
- * A hamburger button that mutates according to it's state
- **/
-export default function MutableHamburgerButton({
-  state = "default",
-  size,
-  className = "",
-  ...props
-}: {
-  state?:
-    | "default"
-    | "closed"
-    | "arrow-up"
-    | "arrow-down"
-    | "search"
-    | "loading"
-    | "checkmark"
-    | "pencil"
-    | "hamburger";
-  size: number;
-} & React.HTMLProps<HTMLDivElement>) {
-  const stateClass = state in Styles ? Styles[state] : "";
-
-  return (
-    <div
-      {...props}
-      className={`${Styles.container} ${stateClass} ${className}`}
-      style={{ fontSize: `${size}px` }}
-    >
-      <div />
-      <div />
-      <div />
-    </div>
-  );
-}

package/src/components/MutableHamburgerButton/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./MutableHamburgerButton";
-export * from "./MutableHamburgerButton";

package/src/components/Notification/Notification.module.scss

@@ -1,25 +0,0 @@
-@import "../../assets/styles/variables.scss";
-
-.container {
-  animation-fill-mode: forwards;
-  animation-duration: $fast;
-  animation-name: expand;
-  width: auto;
-  min-width: 250px;
-}
-
-.success {
-  background-color: $success;
-}
-
-@keyframes expand {
-  0% {
-    padding: 0px 12px;
-    max-height: 0%;
-  }
-
-  100% {
-    padding: 12px 12px;
-    max-height: 100%;
-  }
-}

package/src/components/Notification/Notification.tsx

@@ -1,13 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import Card from "../Card";
-import Styles from "./Notification.module.scss";
-
-/**
- * A layout for the notification card
- **/
-export default function Notification({
-  type,
-  children
-}: PropsWithChildren<{ type: "success" }>) {
-  return <Card className={`${Styles.container} ${Styles[type]}`}>{children}</Card>;
-}

package/src/components/Notification/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./Notification";
-export * from "./Notification";

package/src/components/OrderableList/OrderableList.module.scss

@@ -1,98 +0,0 @@
-$baseSpeed: 300ms;
-$fast: var(--orderable-list--speed);
-
-.unselectable * {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.clone {
-  --orderable-list--speed: #{$baseSpeed};
-  transition: max-height $fast linear;
-  pointer-events: none;
-  position: fixed;
-  overflow: hidden;
-}
-
-.ordering {
-  > * {
-    opacity: 0;
-  }
-  .visible {
-    opacity: 1;
-    * {
-      pointer-events: none;
-    }
-  }
-}
-
-.shrinkable.ordering section.visible,
-.shrinkable.ordering section.currentOrdering {
-  max-height: var(--shrink-to) !important;
-}
-.shrinkable.ordering > section:not(.visible):not(.currentOrdering) > * {
-  max-height: var(--shrink-to) !important;
-}
-.transitionHeight {
-  transition: max-height $fast linear;
-}
-
-.root {
-  position: relative;
-  --orderable-list--speed: #{$baseSpeed};
-  transition: padding-top $fast linear;
-  > * {
-    transition: max-height $fast linear;
-    overflow: hidden;
-    > * > * {
-      flex-shrink: 0;
-    }
-  }
-
-  &::before {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    content: " ";
-  }
-}
-
-.transition {
-  width: 100%;
-  align-items: flex-start !important;
-  overflow: visible !important;
-  > * {
-    flex-direction: row !important;
-    flex-wrap: wrap;
-    // &:first-child {
-    //   visibility: hidden;
-    // }
-    &:last-child {
-      visibility: visible;
-    }
-  }
-}
-
-div.stub {
-  animation-name: stub;
-  position: absolute;
-  pointer-events: none;
-  opacity: 0 !important;
-}
-
-div.stubEntering {
-  animation-name: stub;
-  z-index: -1;
-}
-@keyframes stub {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-  }
-}