@onepercentio/one-ui 0.8.2 → 0.8.3

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

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

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

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

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

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

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

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

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

package/dist/components/Table/Table.module.scss

@@ -0,0 +1,76 @@
+@import "../../assets/styles/index.scss";
+
+.transitionContainer {
+  min-height: auto;
+  max-width: 100vw;
+  overflow: auto;
+}
+
+.container {
+  font-family: $mainFontFamily;
+  padding: 0px 4px;
+  width: 100%;
+  position: relative;
+  border-spacing: 0px;
+  th {
+    font-family: 14px;
+    line-height: 28px;
+    text-align: start;
+    font-weight: normal;
+  }
+  td,
+  th {
+    padding: 20px;
+  }
+  tbody tr {
+    background-color: $tableRowBgColor;
+    &:first-child td {
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+      border-top: 1px solid $tableRowBorderColor;
+    }
+    &:last-child td {
+      &:first-child {
+        border-bottom-left-radius: 8px;
+      }
+      &:last-child {
+        border-bottom-right-radius: 8px;
+      }
+    }
+    td {
+      border-bottom: 1px solid $tableRowBorderColor;
+      &:first-child {
+        border-left: 1px solid $tableRowBorderColor;
+      }
+      &:last-child {
+        border-right: 1px solid $tableRowBorderColor;
+      }
+    }
+  }
+}
+.footer {
+  padding: 0px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  --button-min-width: auto;
+  --button-min-height: auto;
+
+  .paging {
+    font-family: $mainFontFamily;
+    color: $digitalBlue;
+    margin: 0px 12px;
+    font-size: 18px;
+  }
+}
+
+.iterable {
+  @include iteractibleElement;
+  &:first-child {
+    margin-left: auto;
+  }
+}

package/dist/components/Tabs/Tabs.module.scss

@@ -0,0 +1,22 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  p {
+    cursor: pointer;
+    margin: 1em 2em;
+    &.selected {
+      font-weight: bold;
+    }
+  }
+}
+
+.guide {
+  height: 0.1em;
+  background-color: $digitalBlue;
+  position: absolute;
+  transition: left $fast, width $fast, top $fast;
+}

package/dist/components/Text/Text.module.scss

@@ -0,0 +1,77 @@
+@import "../../assets/styles/index.scss";
+
+.title {
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 33px;
+}
+.boldTitle {
+  font-family: $secondaryFontFamily;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 26px;
+}
+.boldTitleBig {
+  font-family: $secondaryFontFamily;
+  font-size: 28px;
+  font-weight: bolder;
+  line-height: 33.8px;
+}
+.content {
+  font-size: 16px;
+  line-height: 24px;
+  font-family: $mainFontFamily;
+}
+.icon.description {
+  font-size: 14px;
+  line-height: 21px;
+  color: $darkestGray;
+}
+.text.error,
+.text.caption {
+  font-size: 12px;
+  line-height: 18px;
+}
+.text.error {
+  color: $warningRed;
+}
+.text {
+  margin: 0px;
+  font-family: $mainFontFamily;
+  white-space: pre-wrap;
+  color: $textDefaultColor;
+}
+.highlightTitle {
+  font-family: $secondaryFontFamily;
+  font-size: 24px;
+  font-weight: bolder;
+  line-height: 29px;
+  color: $sunsetPink;
+}
+.subtitle {
+  font-family: $secondaryFontFamily;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 22px;
+  color: var(--text-default-color, $gray);
+}
+.link {
+  font-family: $mainFontFamily;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.iteractible {
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.highlight {
+  font-family: $secondaryFontFamily;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: $sunsetPink;
+}

package/dist/components/Transition/Transition.module.scss

@@ -0,0 +1,188 @@
+@import "../../assets/styles/index.scss";
+
+.section {
+  * {
+    box-sizing: border-box;
+  }
+  position: relative;
+  min-height: 250px;
+  display: flex;
+  align-items: center;
+  > div {
+    display: flex;
+    flex-direction: column;
+    min-height: inherit;
+    min-width: 100%;
+    animation-duration: var(--animation-speed-transition, $fast);
+    animation-timing-function: var(--animation-timing-transition, initial);
+    animation-fill-mode: forwards;
+    transform-origin: inherit;
+  }
+}
+
+div.entranceLeft {
+  animation-name: entranceLeft;
+}
+div.exitLeft {
+  animation-name: exitLeft;
+}
+
+@keyframes entranceLeft {
+  0% {
+    margin-left: -100%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+@keyframes exitLeft {
+  0% {
+    margin-left: 0%;
+  }
+  100% {
+    margin-left: -100%;
+  }
+}
+
+div.fadeOut {
+  animation-name: fadeOut;
+  position: absolute;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+div.scaleIn {
+  animation-fill-mode: forwards;
+  animation-name: scaleIn;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+div.scaleOut {
+  animation-fill-mode: initial;
+  animation-name: scaleOut;
+}
+
+@keyframes scaleOut {
+  0% {
+    position: absolute;
+    transform: scale(1);
+  }
+  100% {
+    position: absolute;
+    transform: scale(0);
+  }
+}
+
+div.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateX(0deg);
+  }
+
+  25% {
+    transform: rotateX(36deg);
+  }
+
+  50% {
+    transform: rotateX(90deg);
+  }
+
+  75% {
+    transform: rotateX(90deg);
+  }
+
+  100% {
+    transform: rotateX(90deg);
+  }
+}
+@keyframes flipIn {
+  0% {
+    transform: rotateX(90deg);
+  }
+
+  25% {
+    transform: rotateX(90deg);
+  }
+
+  50% {
+    transform: rotateX(90deg);
+  }
+
+  75% {
+    transform: rotateX(36deg);
+  }
+
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+.flipBottomUpOut {
+  transform-origin: 50% 50% !important;
+  position: absolute !important;
+  animation-name: flip;
+  animation-timing-function: linear !important;
+}
+.flipBottomUpIn {
+  transform-origin: 50% 50% !important;
+  animation-name: flipIn;
+  animation-timing-function: linear !important;
+}

package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.module.scss

@@ -0,0 +1,66 @@
+.animatedContainer {
+  position: relative;
+  animation-name: pingpong;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.resetHeight {
+  min-height: initial;
+}
+
+@keyframes pingpong {
+  0% {
+    left: 0%;
+  }
+
+  50% {
+    left: calc(100% - 100px);
+  }
+
+  100% {
+    left: 0%;
+  }
+}
+.fadeOut {
+  animation: fadeOutAnimation;
+  animation-duration: 2s !important;
+  animation-timing-function: linear;
+  position: absolute;
+}
+.outOfTheWay {
+  animation: fadeOutAnimation;
+  animation-duration: 2s !important;
+  animation-timing-function: linear;
+  position: absolute;
+}
+.fadeIn {
+  animation: fadeIn;
+  animation-duration: 2s !important;
+  animation-timing-function: linear;
+}
+
+@keyframes fadeIn {
+  0% {
+    background-color: green;
+    opacity: 0;
+  }
+
+  100% {
+    background-color: green;
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutAnimation {
+  0% {
+    background-color: red;
+    opacity: 1;
+  }
+
+  100% {
+    background-color: red;
+    opacity: 0;
+  }
+}

package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.module.scss

@@ -0,0 +1,5 @@
+.lockClass {
+    @media screen and (max-width: 639px) {
+        overflow: hidden;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "files": [
     "dist",