@onepercentio/one-ui 0.8.2 → 0.8.4

package/dist/assets/img/svg/checkbox.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7 -7 38 38">
+    <path style="stroke: #EDEDED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3px" fill="none" d="M22.9 3.7l-15.2 16.6-6.6-7.1" />
+</svg>

package/dist/assets/styles/index.scss

@@ -0,0 +1,2 @@
+@import "./variables.scss";
+@import "./mixins.scss";

package/dist/assets/styles/mixins.scss

@@ -0,0 +1,12 @@
+@mixin iteractibleElement() {
+  & {
+    cursor: pointer;
+    transition: transform $fast;
+  }
+  &:hover {
+    transform: scale(1.2);
+  }
+  &:active {
+    transform: scale(1.1);
+  }
+}

package/dist/assets/styles/variables.scss

@@ -0,0 +1,51 @@
+$digitalBlue: var(--digital-blue, #558eff);
+$mediumGray: var(--medium-gray, #bababa);
+$lightGray: var(--light-gray, #d6d6d6);
+$spaceBlue: var(--space-blue, #0f113a);
+$warningRed: var(--warning-red, #e84b4b);
+$sunsetPink: var(--sunset-pink, #ff3e7d);
+$darkestGray: var(--darkest-gray, #727272);
+$gray: var(--gray, #0f113a);
+$success: var(--success, lightgreen);
+$mainBackgroundColor: var(--bg-color, white);
+
+//FONTS
+$mainFontFamily: var(--main-font, Roboto);
+$secondaryFontFamily: var(--second-font, Manrope);
+
+// Component specific variables on the format --<component>-<element>-<category>
+$headerFillBackgroundColor: var(--header-background-color, $digitalBlue);
+$headerBackgroundColor: var(--header-divider-bg-color, #467eea);
+$headerTextColor: var(--header-text-color, #94b8ff);
+$headerBrightColor: var(--header-bright-color, white);
+
+$tableRowBgColor: var(--table-row-bg-color, white);
+$tableRowBorderColor: var(--table-row-border-color, #bec1ca);
+
+$buttonMinHeight: var(--button-min-height, 62px);
+$buttonMinWidth: var(--button-min-width, 150px);
+$buttonBorderRadius: var(--button-border-radius, 8px);
+$buttonTextColor: var(--button-text-color, white);
+
+$tooltipBackgroudColor: var(--tooltip-background-color, $digitalBlue);
+
+$checkboxBaseColor: var(--checkbox-base-color, $digitalBlue);
+
+$textDefaultColor: var(--text-default-color, $digitalBlue);
+
+$buttonPrimaryBackgroundColor: var(--button-primary-bg-color, #1e22aa);
+
+$fileInputBackgroundColor: var(--file-input-bg-color, #f2f6f7);
+$fileInputBorderColor: var(--file-input-border-color, #dce1e8);
+
+$avatarBackgroundColor: var(--avatar-bg-color, $lightGray);
+
+$pixelatedGuideBackground: var(--pixelated-scan-bg, var(--digital-blue));
+
+// Animation speed variables
+$almostInstant: var(--animation--speed-almostInstant, 50ms);
+$veryFast: var(--animation--speed-veryfast, 125ms);
+$fast: var(--animation--speed-fast, 250ms);
+$normal: var(--animation--speed-normal, 500ms);
+$slow: var(--animation--speed-slow, 1s);
+$verySlow: var(--animation--speed-veryslow, 2s);

package/dist/components/AdaptiveContainer/AdaptiveContainer.module.scss

@@ -0,0 +1,51 @@
+.resetSection {
+  min-height: 0px;
+  transition: width 400ms;
+  transition-timing-function: linear;
+  overflow: hidden;
+  > * {
+    min-width: auto !important;
+  }
+}
+
+.resetButton {
+  min-width: 0px !important;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+@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;
+  animation-duration: 500ms !important;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+  animation-duration: 500ms !important;
+}

package/dist/components/AdaptiveDialog/AdaptiveDialog.module.scss

@@ -0,0 +1,145 @@
+@import "../../assets/styles/index.scss";
+
+.backdrop {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  transition: backdrop-filter $veryFast linear;
+  backdrop-filter: var(--adaptive-dialog-backdrop-backdrop, initial);
+
+  @media screen and (orientation: "portrait") {
+    align-items: flex-end;
+  }
+}
+.backdrop,
+.container {
+  animation-duration: $fast;
+  animation-fill-mode: forwards;
+}
+
+.open {
+  &.backdrop {
+    animation-name: backdropAppear;
+  }
+  .container {
+    animation-name: reveal;
+  }
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-timing-function: ease-in-out;
+      animation-name: slideUp;
+    }
+  }
+}
+
+.close {
+  &.backdrop {
+    animation-name: backdropDismiss;
+  }
+
+  .container {
+    animation-name: dismiss;
+  }
+
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-name: slideDown;
+    }
+  }
+}
+
+.container {
+  > .closeBtn {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    background: none;
+    border: none;
+    width: auto;
+    height: auto;
+    padding: 0px !important;
+  }
+  padding: 16px 32px;
+  position: relative;
+  width: 100%;
+  max-width: 640px;
+  background: $mainBackgroundColor;
+  backdrop-filter: var(--adaptive-dialog-backdrop, initial);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-height: 90% !important;
+  overscroll-behavior: contain;
+  @media screen and (orientation: "portrait") {
+    min-height: initial;
+    align-items: flex-start;
+  }
+}
+
+@keyframes backdropAppear {
+  0% {
+    background-color: #0000;
+  }
+
+  100% {
+    background-color: #0005;
+  }
+}
+
+@keyframes backdropDismiss {
+  0% {
+    background-color: #0005;
+  }
+
+  100% {
+    background-color: #0000;
+  }
+}
+
+@keyframes reveal {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dismiss {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    min-height: 0px;
+    transform: translateY(100%);
+  }
+
+  100% {
+    min-height: 0px;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    min-height: 0px;
+    transform: translateY(100%);
+  }
+}

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss

@@ -0,0 +1,52 @@
+@import "../../assets/styles/index.scss";
+
+$hamburgerSize: 48;
+$hamburgerOffset: 24;
+
+@value hamburgerSize #{$hamburgerSize};
+
+.hamburger {
+  position: fixed;
+  top: #{$hamburgerOffset}px;
+  left: #{$hamburgerOffset}px;
+}
+
+.hamburger {
+  display: initial;
+}
+
+.hamburger,
+.container {
+  z-index: 1000;
+}
+
+@media screen and (min-width: 640px) {
+  .hamburger {
+    display: none;
+  }
+}
+
+.container {
+  box-sizing: border-box;
+  height: 100%;
+
+  @media screen and (max-width: 639px) {
+    &.defaultPadding {
+      padding-top: #{$hamburgerSize + $hamburgerOffset * 2}px;
+    }
+    position: fixed;
+    width: 100%;
+    overflow: auto;
+    z-index: 1000;
+    left: 0;
+
+    &.open {
+      transition: transform $veryFast ease-out;
+      transform: translateX(-0%);
+    }
+    &.closed {
+      transition: transform $veryFast ease-in;
+      transform: translateX(-100%);
+    }
+  }
+}

package/dist/components/AnchoredTooltip/AnchoredTooltip.module.scss

@@ -0,0 +1,62 @@
+@import "../../assets/styles/index.scss";
+
+/**
+* Some notions to take into account
+*/
+
+.tooltipContainer {
+  & > div {
+    background-color: $tooltipBackgroudColor;
+  }
+  // It should not overflow the viewport (screen)
+  max-width: 100vw;
+  max-height: 100vh;
+  min-width: fit-content;
+
+  // It should be floating over some point into the viewport
+  position: fixed;
+
+  // The position will be calculated via the javascript and the context
+
+  transition: top $almostInstant, left $almostInstant;
+  z-index: 1000;
+
+  pointer-events: none;
+
+  &.open {
+    pointer-events: initial;
+  }
+
+  &::after,
+  &::before {
+    content: " ";
+    width: 0px;
+    height: 0px;
+    border: 16px solid $tooltipBackgroudColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    transform: translateY(-16px) rotate(-45deg);
+    display: block;
+    margin: auto;
+    position: relative;
+    left: var(--anchor-indicator-offset-left, 0px);
+    z-index: -1;
+  }
+
+  &::before {
+    display: none;
+    transform: translateY(16px) rotate(135deg);
+  }
+  &.anchoredTop {
+    transform: translateY(4px);
+  }
+  &.anchoredBottom {
+    transform: translateY(-4px);
+    &::after {
+      display: none;
+    }
+    &::before {
+      display: block;
+    }
+  }
+}

package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss

@@ -0,0 +1,107 @@
+@use 'sass:math';
+@keyframes expand {
+  0% {
+    transform: translateX(100%);
+  }
+
+  35% {
+    transform: translateX(100%);
+  }
+
+  85% {
+    transform: translateX(-5%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes exiting {
+  100% {
+    transform: translateX(100%);
+  }
+
+  65% {
+    transform: translateX(100%);
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  15% {
+    transform: translateX(-5%);
+    opacity: 1;
+  }
+
+  0% {
+    transform: translateX(0%);
+  }
+}
+$duration: 1s;
+
+.elementExiting {
+  animation-duration: $duration !important;
+  animation-name: exiting;
+  position: absolute;
+}
+
+.elementEntering {
+  animation-duration: $duration !important;
+  animation-name: expand;
+}
+.elementExitingReverse {
+  animation-duration: $duration !important;
+  animation-name: exiting;
+}
+
+.elementEnteringReverse {
+  animation-duration: $duration !important;
+  animation-name: expand;
+  position: absolute;
+}
+
+.resetHeight {
+  transition: max-height math.div($duration, 2) $duration * 0.2;
+  min-height: initial;
+  align-items: flex-start !important;
+  > * {
+    justify-content: flex-start !important;
+  }
+}
+
+.maxHeight {
+  max-height: 0px;
+}
+
+@keyframes nothing {
+  100% {
+    transform: translateX(0%);
+  }
+
+  0% {
+    transform: translateX(0%);
+  }
+}
+
+.elementShrinking {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+  position: absolute;
+}
+
+.elementExpanding {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+}
+.elementShrinkingReverse {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+}
+
+.elementExpandingReverse {
+  animation-duration: $duration !important;
+  animation-name: nothing;
+  position: absolute;
+}

package/dist/components/Avatar/Avatar.module.scss

@@ -0,0 +1,22 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  &.noImg {
+    background-color: $avatarBackgroundColor;
+  }
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 0.5em;
+
+  > span,
+  > img {
+    font-size: 0.4em;
+    width: inherit;
+    height: inherit;
+    text-align: center;
+    line-height: 2.5em;
+    display: block;
+    color: $digitalBlue;
+  }
+}

package/dist/components/BucketFill/BucketFill.module.scss

@@ -0,0 +1,36 @@
+@import "../../assets/styles/variables.scss";
+
+.root {
+  position: relative;
+  z-index: 1;
+  > :not(div) {
+    mix-blend-mode: color;
+  }
+  > div > * {
+    mix-blend-mode: color;
+  }
+  &::before,
+  &::after {
+    background: var(--bg);
+    width: 100%;
+    position: absolute;
+    content: " ";
+    z-index: -1;
+    transition: height $fast, background-size $fast;
+  }
+  &::before {
+    opacity: 0;
+    top: 0;
+    height: var(--fill-height);
+  }
+  &::after {
+    opacity: 0.6;
+    bottom: 0;
+    height: var(--empty-height);
+    background-size: 100% var(--bg-offset);
+    background-position: bottom;
+  }
+  .ignoreFill {
+    mix-blend-mode: multiply;
+  }
+}

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

@@ -0,0 +1,3 @@
+* {
+    margin: 0px;
+}

package/dist/components/Button/Button.module.scss

@@ -0,0 +1,42 @@
+@import "../../assets/styles/variables.scss";
+
+.button {
+  cursor: pointer;
+  display: block;
+  min-width: $buttonMinWidth;
+  min-height: $buttonMinHeight;
+  padding: 16px;
+  border: none;
+  transition: color $fast;
+  color: $digitalBlue;
+  border-radius: $buttonBorderRadius;
+  &:disabled {
+    cursor: initial;
+  }
+}
+
+///"transparent" | "filled" | "outline";
+
+.transparent {
+  background-color: transparent;
+  &:disabled {
+    color: $mediumGray;
+  }
+}
+
+.filled {
+  background-color: $buttonPrimaryBackgroundColor;
+  color: $buttonTextColor;
+  border-width: 0px;
+  &:disabled {
+    color: $mediumGray;
+  }
+}
+
+.outline {
+  border: 1px solid $digitalBlue;
+  background-color: transparent;
+  &:disabled {
+    color: $mediumGray;
+  }
+}

package/dist/components/Card/Card.module.scss

@@ -0,0 +1,12 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  background: $mainBackgroundColor;
+  padding: 32px;
+  max-width: 640px;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  height: auto;
+}

package/dist/components/CheckBox/CheckBox.module.scss

@@ -0,0 +1,25 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  display: flex;
+  line-height: 1.5em;
+  vertical-align: middle;
+
+  > span:first-child {
+    visibility: visible;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 0.45em;
+    background-image: url("../../assets/img/svg/checkbox.svg");
+    background-color: transparent;
+    transition: background-color 250ms, border 250ms, box-shadow 250ms;
+    border: 1px solid rgb(40, 43, 53);
+    box-shadow: 0px 0px 0px -4px $digitalBlue;
+    margin-right: 0.45em;
+  }
+  > span:first-child.checked {
+    background-color: $digitalBlue;
+    border: 1px solid $digitalBlue;
+    box-shadow: 0px 0px 12px -4px $digitalBlue;
+  }
+}

package/dist/components/Collapsable/Collapsable.module.scss

@@ -0,0 +1,34 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  > .title {
+    cursor: pointer;
+    margin: 0px;
+    display: block;
+  }
+}
+
+.open .title::after {
+  transform: translateX(-0.5em) rotateX(180deg) rotateZ(45deg);
+}
+.closed .title::after {
+  transform: translateX(-0.5em) rotateX(0deg) rotateZ(45deg);
+}
+
+.content {
+  width: 100%;
+  max-width: 500px;
+  overflow: hidden;
+  transition: height $fast ease-in;
+  height: 0px;
+  &.float {
+    position: fixed;
+    z-index: 100;
+    background: $mainBackgroundColor;
+    overflow: auto;
+  }
+}
+
+.open {
+  transition: height $fast ease-out;
+}

package/dist/components/Divider/Divider.module.scss

@@ -0,0 +1,7 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  margin: 16px 0px;
+  height: 1px;
+  background-color: $lightGray;
+}

package/dist/components/FadeIn/FadeIn.module.scss

@@ -0,0 +1,18 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  opacity: 0;
+  transition: opacity $normal;
+  &.active {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInInit {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}