@onepercentio/one-ui 0.8.1 → 0.8.2

package/dist/components/Input/Input.module.scss

@@ -1,69 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.inputContainer {
-  position: relative;
-  display: flex;
-  .icon {
-    position: absolute;
-    top: 1.5px;
-    right: 1.5px;
-    min-height: 30px;
-    min-width: 30px;
-    cursor: pointer;
-    user-select: none;
-    &img {
-      height: 30px;
-      width: 30px;
-    }
-  }
-  &.withIcon {
-    padding-right: 33px;
-  }
-  input,
-  textarea {
-    border: none;
-    background-color: transparent;
-    width: 100%;
-    font-size: 22px;
-    line-height: 33px;
-    font-family: $mainFontFamily;
-    color: var(--input-text-color, $spaceBlue);
-    margin-bottom: 18px;
-    outline: none;
-    &:placeholder-shown ~ .border {
-      animation-iteration-count: infinite;
-      animation-duration: $verySlow;
-      animation-name: pulse;
-      animation-delay: $slow;
-    }
-  }
-  & .border {
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    bottom: 18px;
-    height: 1px;
-    background-color: $spaceBlue;
-    opacity: 0;
-  }
-  .caption {
-    position: absolute;
-    bottom: 0px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

package/dist/components/LinkToId/LinkToId.module.scss

@@ -1,4 +0,0 @@
-.root:hover {
-    text-decoration: underline;
-    cursor: pointer;
-}

package/dist/components/Loader/Loader.module.scss

@@ -1,40 +0,0 @@
-@import "../../assets/styles/variables.scss";
-
-.indicator {
-  white-space: nowrap;
-  font-size: 14px;
-  & span {
-    display: inline-block;
-    width: 0.75em;
-    height: 0.75em;
-    border-radius: 0.375em;
-    margin-left: 4px;
-    background-color: $digitalBlue;
-    animation-name: transparentToOpaque;
-    animation-duration: $normal;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease-out;
-    &:nth-child(1) {
-      margin-left: initial;
-      animation-delay: 0;
-    }
-    &:nth-child(2) {
-      animation-delay: $veryFast;
-    }
-    &:nth-child(3) {
-      animation-delay: $fast;
-    }
-  }
-}
-
-@keyframes transparentToOpaque {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

package/dist/components/MainGrid/MainGrid.module.scss

@@ -1,28 +0,0 @@
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-
-  // TODO: Priorize reducing width of empty elements insteas of the main container
-  > :nth-child(1),
-  > :nth-child(3) {
-    flex: 1;
-    max-width: 250px;
-    min-width: 150px;
-  }
-
-  .content {
-    min-width: 250px;
-  }
-
-  > :nth-child(2) {
-    flex: 1;
-    max-width: 1200px;
-  }
-}
-
-.section {
-  align-items: flex-start;
-  min-height: initial;
-}

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss

@@ -1,179 +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);
-    }
-  }
-}

package/dist/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/dist/components/Parallax/Parallax.module.scss

@@ -1,28 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.parallax {
-  display: flex;
-  position: relative;
-  transition: transform $fast;
-  overflow: hidden;
-  user-select: none;
-  transform: translate3d(0, 0, 0);
-}
-
-.reflection {
-  transform: translateX(-50%) translateY(-50%);
-  width: 40%;
-  pointer-events: none;
-  &::after {
-    background: radial-gradient(#fff2, #fff2 5%, #aaa0 50%);
-    background-size: 100% 100%;
-    content: "";
-    display: block;
-    padding-bottom: 100%;
-    border-radius: 50%;
-    background-repeat: no-repeat;
-  }
-  position: absolute;
-  left: -50%;
-  top: -50%;
-}

package/dist/components/PasswordInput/PasswordInput.module.scss

@@ -1,11 +0,0 @@
-.inputContainer {
-  &.creation {
-    padding-bottom: 54px;
-  }
-  position: relative;
-
-  .rules {
-    position: absolute;
-    bottom: 0px;
-  }
-}

package/dist/components/PixelatedScan/PixelatedScan.module.scss

@@ -1,86 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-$animationDurationMs: 2000;
-
-@value animationDuration #{$animationDurationMs};
-
-$animationDuration: #{$animationDurationMs}ms;
-
-.guide {
-  width: 100%;
-  position: absolute;
-  animation-duration: $animationDuration;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  animation-fill-mode: forwards;
-  animation-timing-function: linear;
-  min-height: 10px;
-  top: 0;
-  &::after {
-    content: " ";
-    width: 100%;
-    height: 10px;
-    background: $pixelatedGuideBackground;
-  }
-}
-
-.grid {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  bottom: 0px;
-  overflow: hidden;
-  > * {
-    display: flex;
-    opacity: 0;
-    &.guide {
-      opacity: 1;
-    }
-  }
-  &.inverse {
-    transform: rotateX(180deg);
-  }
-}
-
-.gridItem {
-  background-color: var(--pixel-color);
-}
-
-.gridAnimate {
-  animation-duration: #{$animationDurationMs}ms;
-}
-
-.iterate {
-  .guide {
-    animation-name: upAndDown;
-  }
-  .gridAnimate {
-    animation-name: onAndOff;
-    will-change: opacity;
-  }
-}
-
-@keyframes onAndOff {
-  0% {
-    opacity: 0;
-  }
-
-  10% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes upAndDown {
-  0% {
-    height: 0%;
-  }
-  100% {
-    height: 100%;
-  }
-}

package/dist/components/Portal/Portal.module.scss

@@ -1,3 +0,0 @@
-.portal > :not(:last-child) {
-  display: none;
-}

package/dist/components/ProgressBar/ProgressBar.module.scss

@@ -1,32 +0,0 @@
-@use "sass:math";
-@import "../../assets/styles/index.scss";
-
-.container {
-  margin: 0.375em;
-  height: 0.25em;
-  background-color: red;
-  position: relative;
-  border-radius: math.div(0.25em, 2);
-  background: var(--progress-bar-bg, #0000);
-  > :first-child {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: green;
-    height: inherit;
-    border-top-left-radius: math.div(0.25em, 2);
-    border-bottom-left-radius: math.div(0.25em, 2);
-    background: var(--progress-bar-bar, var(--digital-blue));
-    transition: width var(--animation-speed-transition, $fast) ease-out;
-  }
-  > :last-child {
-    position: absolute;
-    margin-top: math.div(-0.5em, 1.25);
-    margin-left: -0.5em;
-    height: 1em;
-    width: 1em;
-    border-radius: 0.5em;
-    transition: left var(--animation-speed-transition, $fast) ease-out;
-    background: var(--progress-bar-guide, var(--digital-blue));
-  }
-}

package/dist/components/ProgressTexts/ProgressTexts.module.scss

@@ -1,37 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.container {
-  font-family: Manrope;
-  transition: max-height $slow;
-  overflow: hidden;
-  max-height: 0px;
-  * {
-    text-align: left;
-  }
-  button {
-    text-align: center;
-  }
-  h1 {
-    font-weight: bold;
-    font-size: 34px;
-    line-height: 41px;
-    color: $spaceBlue !important;
-  }
-  p {
-    font-family: Roboto;
-    font-size: 22px;
-    line-height: 33px;
-  }
-}
-
-.hidden {
-  max-height: 0px !important;
-}
-
-.loading * {
-  color: $spaceBlue !important;
-}
-
-.disabled * {
-  color: $mediumGray !important;
-}

package/dist/components/SectionContainer/SectionContainer.module.scss

@@ -1,30 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  .content {
-    width: 100%;
-    max-width: 1200px;
-    &.decorated {
-      position: relative;
-    }
-  }
-  .decoration {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    width: 16px;
-    height: 16px;
-    &.light {
-      background-color: white;
-    }
-    &.dark {
-      background-color: black;
-    }
-  }
-  h1 {
-    margin-bottom: 24px;
-  }
-}

package/dist/components/Select/Select.module.scss

@@ -1,46 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-> :last-child {
-  position: absolute;
-  right: 0px;
-  z-index: 100;
-}
-.items > * {
-  cursor: pointer;
-  background: $mainBackgroundColor;
-  padding: 12px 32px;
-  margin-bottom: 8px;
-  margin-left: 4px;
-  margin-right: 4px;
-  text-align: left;
-  border-radius: 4px;
-  font-size: 14px;
-  &.selected {
-    background-color: $lightGray;
-  }
-}
-.empty {
-  opacity: 0.3;
-}
-.input {
-  transition: opacity $fast;
-  cursor: pointer;
-  padding-right: 30px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform $fast;
-  min-height: inherit;
-  transform: rotateX(0deg);
-}
-.open {
-  transform: rotateX(180deg);
-}
-.optionsContainer {
-  margin: 0px 8px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
-}

package/dist/components/Spacing/Spacing.module.scss

@@ -1,13 +0,0 @@
-.spacing_large {
-  height: 33px;
-}
-.spacing_small {
-  height: 15px;
-}
-.spacing_stretch {
-  flex: 1;
-}
-
-.spacing {
-  display: block;
-}