@onepercentio/one-ui 0.8.2 → 0.8.3

package/dist/components/FileInput/FileInput.module.scss

@@ -0,0 +1,27 @@
+@import "../../assets/styles/index.scss";
+
+.hidden {
+  width: 0px;
+  height: 0px;
+  position: fixed;
+  opacity: 0.01;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: $fileInputBackgroundColor;
+  padding: 72px;
+  border: 1px solid;
+  border-color: $fileInputBorderColor;
+  position: relative;
+  margin-bottom: 28px;
+}
+
+.footer {
+  position: absolute;
+  bottom: -24px;
+  left: 0px;
+}

package/dist/components/FlowController/FlowController.module.scss

@@ -0,0 +1,47 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  .headingImg {
+    width: 100%;
+    margin: 0px -33px;
+  }
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  button {
+    width: 100%;
+    border-top: 1px solid $lightGray;
+  }
+  .transition {
+    margin-top: -105px;
+    height: 100%;
+    .content {
+      padding: 0px 33px 33px 33px;
+      margin-top: 105px;
+      max-height: calc(100% - 105px);
+
+      &.fullHeight {
+        margin-top: 0px;
+        max-height: 100%;
+        height: 100%;
+      }
+    }
+    section {
+      border-top: 1px solid $lightGray;
+      margin: 0px -33px;
+      padding: 0px 33px;
+    }
+  }
+  header {
+    margin: 55px 33px;
+    margin-bottom: 33px;
+  }
+  footer {
+    transition: opacity $fast;
+    opacity: 1;
+  }
+  footer.hidden {
+    opacity: 0;
+  }
+}

package/dist/components/Header/Header.module.scss

@@ -0,0 +1,119 @@
+@import "../../assets/styles/index.scss";
+
+.header {
+  position: sticky;
+  top: 0px;
+  width: 100%;
+  background-color: $headerFillBackgroundColor;
+  display: flex;
+  padding: 32px;
+  align-items: center;
+  font-family: $mainFontFamily;
+  z-index: 100;
+}
+
+.logo {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+}
+
+.option {
+  font-size: 18px;
+  line-height: 22px;
+  margin-right: 28px;
+  color: $headerTextColor;
+}
+
+.logoDivider {
+  margin: -32px 32px;
+  width: 1px;
+  background-color: $headerBackgroundColor;
+}
+
+.profile {
+  background-color: $headerBrightColor;
+  height: 36px;
+  width: 36px;
+  border-radius: 18px;
+  line-height: 36px;
+  text-align: center;
+}
+
+.profile,
+.profileName {
+  margin-right: 8px;
+}
+
+.profileName {
+  color: $headerBrightColor;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+}
+.headerOptions {
+  right: 0px;
+  width: fit-content;
+  margin-top: 18px;
+  z-index: 1000;
+  > * {
+    cursor: pointer;
+    backdrop-filter: var(--header-submenu-backdrop, initial);
+    padding: 12px 32px;
+    margin-bottom: 8px;
+    margin-left: 4px;
+    margin-right: 4px;
+    text-align: left;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+.indicator {
+  @include iteractibleElement();
+  transition: transform $fast;
+  transform: rotateX(0deg);
+
+  &.open {
+    transform: rotateX(180deg);
+  }
+
+  display: none;
+  @media screen and (max-width: 640px) {
+    display: initial;
+  }
+  &.withMoreOptions {
+    display: initial;
+  }
+}
+
+.desktopOnly {
+  @media screen and (max-width: 640px) {
+    display: none;
+  }
+}
+
+.mobileOnly {
+  @media screen and (min-width: 640px) {
+    display: none;
+  }
+}
+
+.options-right {
+  .logo {
+    margin-right: auto;
+  }
+  .sectionDivider {
+    margin-left: initial;
+  }
+}
+
+.options-left {
+  .sectionDivider {
+    margin-left: auto;
+  }
+}

package/dist/components/HeaderCloseBtn/HeaderCloseBtn.module.scss

@@ -0,0 +1,44 @@
+@import "../../assets/styles/index.scss";
+
+.headerButton {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  opacity: 1;
+  @include iteractibleElement();
+  transition: opacity $fast, transform $fast;
+  &.pointOfNoReturn {
+    opacity: 0;
+  }
+  div {
+    transition: width $fast, top $fast, left $fast;
+    position: absolute;
+    height: 3px;
+    border-radius: 1.5px;
+    width: 22px;
+    background-color: $digitalBlue;
+    transform-origin: 1.5px 1.5px;
+    &:nth-child(1) {
+      transform: rotateZ(45deg);
+    }
+    &:nth-child(2) {
+      transform: rotateZ(-45deg);
+    }
+  }
+  &.back div {
+    width: 12.5px;
+    top: 5.5px;
+    left: 0px;
+  }
+  &.close div {
+    width: 22px;
+    &:nth-child(1) {
+      top: 0px;
+      left: 0px;
+    }
+    &:nth-child(2) {
+      top: 13px;
+      left: 0px;
+    }
+  }
+}

package/dist/components/InfinityScroll/InfinityScroll.module.scss

@@ -0,0 +1,30 @@
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  > * {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  > :first-child {
+    // background-color: green;
+  }
+  > :nth-child(2) {
+    // background-color: yellow;
+  }
+  > :nth-child(3) {
+    // background-color: blue;
+  }
+}

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

@@ -0,0 +1,69 @@
+@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

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

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

@@ -0,0 +1,40 @@
+@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

@@ -0,0 +1,28 @@
+.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

@@ -0,0 +1,179 @@
+@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

@@ -0,0 +1,25 @@
+@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

@@ -0,0 +1,28 @@
+@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

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