@rabbitio/ui-kit 1.0.0-alpha.1

package/styles/_global-classes.scss

@@ -0,0 +1,459 @@
+@import "functions";
+@import "placeholder";
+@import "variables";
+
+@for $i from 0 through 10 {
+    .m-#{$i} {
+        margin: #{$i * 4}px;
+    }
+    .p-#{$i} {
+        padding: #{$i * 4}px;
+    }
+}
+
+@for $i from 0 through 10 {
+    .ml-#{$i} {
+        margin-left: #{$i * 4}px;
+    }
+    .pl-#{$i} {
+        padding-left: #{$i * 4}px;
+    }
+}
+
+@for $i from 0 through 10 {
+    .mr-#{$i} {
+        margin-right: #{$i * 4}px;
+    }
+    .pr-#{$i} {
+        padding-right: #{$i * 4}px;
+    }
+}
+
+@for $i from 0 through 10 {
+    .mt-#{$i} {
+        margin-top: #{$i * 4}px;
+    }
+    .pt-#{$i} {
+        padding-top: #{$i * 4}px;
+    }
+}
+
+@for $i from 0 through 10 {
+    .mb-#{$i} {
+        margin-bottom: #{$i * 4}px;
+    }
+    .pb-#{$i} {
+        padding-bottom: #{$i * 4}px;
+    }
+}
+
+@for $i from 0 through 10 {
+    .mx-#{$i} {
+        margin-right: #{$i * 4}px;
+        margin-left: #{$i * 4}px;
+    }
+    .px-#{$i} {
+        padding-right: #{$i * 4}px;
+        padding-left: #{$i * 4}px;
+    }
+}
+
+@for $i from 0 through 10 {
+    .my-#{$i} {
+        margin-top: #{$i * 4}px;
+        margin-bottom: #{$i * 4}px;
+    }
+    .py-#{$i} {
+        padding-top: #{$i * 4}px;
+        padding-bottom: #{$i * 4}px;
+    }
+}
+
+@media (min-width: $phone-width) {
+    @for $i from 0 through 10 {
+        .m-sm-#{$i} {
+            margin: #{$i * 4}px;
+        }
+        .p-sm-#{$i} {
+            padding: #{$i * 4}px;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .ml-sm-#{$i} {
+            margin-left: #{$i * 4}px !important;
+        }
+        .pl-sm-#{$i} {
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mr-sm-#{$i} {
+            margin-right: #{$i * 4}px !important;
+        }
+        .pr-sm-#{$i} {
+            padding-right: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mt-sm-#{$i} {
+            margin-top: #{$i * 4}px !important;
+        }
+        .pt-sm-#{$i} {
+            padding-top: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mb-sm-#{$i} {
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .pb-sm-#{$i} {
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mx-sm-#{$i} {
+            margin-right: #{$i * 4}px !important;
+            margin-left: #{$i * 4}px !important;
+        }
+        .px-sm-#{$i} {
+            padding-right: #{$i * 4}px !important;
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .my-sm-#{$i} {
+            margin-top: #{$i * 4}px !important;
+            margin-bottom: #{$i * 4}px !important;
+        }
+
+        .py-sm-#{$i} {
+            padding-top: #{$i * 4}px !important;
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+}
+
+@media (min-width: $laptop-width) {
+    @for $i from 0 through 10 {
+        .m-lg-#{$i} {
+            margin: #{$i * 4}px;
+        }
+        .p-lg-#{$i} {
+            padding: #{$i * 4}px;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .ml-lg-#{$i} {
+            margin-left: #{$i * 4}px !important;
+        }
+        .pl-lg-#{$i} {
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mr-lg-#{$i} {
+            margin-right: #{$i * 4}px !important;
+        }
+        .pr-lg-#{$i} {
+            padding-right: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mt-lg-#{$i} {
+            margin-top: #{$i * 4}px !important;
+        }
+        .pt-lg-#{$i} {
+            padding-top: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mb-lg-#{$i} {
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .pb-lg-#{$i} {
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mx-lg-#{$i} {
+            margin-right: #{$i * 4}px !important;
+            margin-left: #{$i * 4}px !important;
+        }
+        .px-lg-#{$i} {
+            padding-right: #{$i * 4}px !important;
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .my-lg-#{$i} {
+            margin-top: #{$i * 4}px !important;
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .py-lg-#{$i} {
+            padding-top: #{$i * 4}px !important;
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+}
+
+@media (min-width: $tablet-width) {
+    @for $i from 0 through 10 {
+        .m-md-#{$i} {
+            margin: #{$i * 4}px;
+        }
+        .p-md-#{$i} {
+            padding: #{$i * 4}px;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .ml-md-#{$i} {
+            margin-left: #{$i * 4}px !important;
+        }
+        .pl-md-#{$i} {
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mr-md-#{$i} {
+            margin-right: #{$i * 4}px !important;
+        }
+        .pr-md-#{$i} {
+            padding-right: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mt-md-#{$i} {
+            margin-top: #{$i * 4}px !important;
+        }
+        .pt-md-#{$i} {
+            padding-top: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mb-md-#{$i} {
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .pb-md-#{$i} {
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mx-md-#{$i} {
+            margin-right: #{$i * 4}px !important;
+            margin-left: #{$i * 4}px !important;
+        }
+        .px-md-#{$i} {
+            padding-right: #{$i * 4}px !important;
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .my-md-#{$i} {
+            margin-top: #{$i * 4}px !important;
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .py-md-#{$i} {
+            padding-top: #{$i * 4}px !important;
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+}
+
+@media (min-width: $desktop-width) {
+    @for $i from 0 through 10 {
+        .m-xl-#{$i} {
+            margin: #{$i * 4}px;
+        }
+        .p-xl-#{$i} {
+            padding: #{$i * 4}px;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .ml-xl-#{$i} {
+            margin-left: #{$i * 4}px !important;
+        }
+        .pl-xl-#{$i} {
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mr-xl-#{$i} {
+            margin-right: #{$i * 4}px !important;
+        }
+        .pr-xl-#{$i} {
+            padding-right: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mt-xl-#{$i} {
+            margin-top: #{$i * 4}px !important;
+        }
+        .pt-xl-#{$i} {
+            padding-top: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mb-xl-#{$i} {
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .pb-xl-#{$i} {
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .mx-xl-#{$i} {
+            margin-right: #{$i * 4}px !important;
+            margin-left: #{$i * 4}px !important;
+        }
+        .px-xl-#{$i} {
+            padding-right: #{$i * 4}px !important;
+            padding-left: #{$i * 4}px !important;
+        }
+    }
+
+    @for $i from 0 through 10 {
+        .my-xl-#{$i} {
+            margin-top: #{$i * 4}px !important;
+            margin-bottom: #{$i * 4}px !important;
+        }
+        .py-xl-#{$i} {
+            padding-top: #{$i * 4}px !important;
+            padding-bottom: #{$i * 4}px !important;
+        }
+    }
+}
+
+.container {
+    max-width: 1260px;
+    margin: 0 auto;
+    @extend %container-padding;
+}
+
+.background-shine {
+    position: absolute;
+    left: -165px;
+    top: -300px;
+    z-index: -1;
+
+    @media (max-width: $phone-width) {
+        left: -165px;
+        top: -103px;
+        width: 648px;
+    }
+}
+
+.path {
+    width: 100%;
+    height: 1px;
+    background: LightColor("white-20");
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    border-bottom: 0.5px solid SolidColor("smoke");
+}
+
+a {
+    text-decoration: none;
+}
+
+.skeleton {
+    background: SolidColor("lightsmoke");
+    animation: skeleton-animate 1s 1s infinite ease-in-out;
+}
+
+.skeleton-dark {
+    background: LightColor("dark-20");
+    animation: skeleton-dark-animate 1s 1s infinite ease-in-out;
+}
+
+.skeleton-transparent {
+    background: rgba($white, 0.2);
+    animation: skeleton-transparent-animate 1s 1s infinite ease-in-out;
+}
+
+.semi-transparent {
+    opacity: 0.5;
+}
+
+td {
+    padding: 0;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+textarea {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+@keyframes skeleton-animate {
+    0% {
+        background: #eaeaea;
+    }
+    50% {
+        background: SolidColor("lightsmoke");
+    }
+    100% {
+        background: #eaeaea;
+    }
+}
+
+@keyframes skeleton-dark-animate {
+    0% {
+        background: LightColor("dark-20");
+    }
+    50% {
+        background: LightColor("grey-20");
+    }
+    100% {
+        background: LightColor("dark-20");
+    }
+}
+
+@keyframes skeleton-transparent-animate {
+    0% {
+        background: rgba($white, 0.2);
+    }
+    50% {
+        background: rgba($white, 0.1);
+    }
+    100% {
+        background: rgba($white, 0.2);
+    }
+}

package/styles/_mixins.scss

@@ -0,0 +1,59 @@
+@import "variables";
+@import "functions";
+
+@mixin typograpy($tag) {
+    @if ($tag == "h1") {
+        font-size: 40px;
+        line-height: 50px;
+        letter-spacing: $letterSpacing;
+        font-weight: $extra-bold;
+        margin: 0;
+        color: SolidColor("dark");
+    }
+    @if ($tag == "h2") {
+        font-size: 35px;
+        line-height: 45px;
+        letter-spacing: $letterSpacing;
+        font-weight: $extra-bold;
+        margin: 0;
+        color: SolidColor("dark");
+    }
+    @if ($tag == "h3") {
+        font-size: 30px;
+        line-height: 40px;
+        letter-spacing: $letterSpacing;
+        font-weight: $extra-bold;
+        margin: 0;
+        color: SolidColor("dark");
+    }
+    @if ($tag == "h4") {
+        font-size: 25px;
+        line-height: 35px;
+        letter-spacing: $letterSpacing;
+        margin: 0;
+        color: SolidColor("dark");
+    }
+    @if ($tag == "h5") {
+        font-size: 20px;
+        line-height: 30px;
+        letter-spacing: $letterSpacing;
+        margin: 0;
+        font-weight: $medium;
+        color: SolidColor("dark");
+    }
+    @if ($tag == "h6") {
+        font-size: 16px;
+        line-height: 26px;
+        letter-spacing: $letterSpacing;
+        margin: 0;
+        font-weight: $medium;
+        color: SolidColor("dark");
+    }
+    @if ($tag == "p") {
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: $letterSpacing;
+        margin: 0;
+        color: SolidColor("dark");
+    }
+}

package/styles/_placeholder.scss

@@ -0,0 +1,146 @@
+@import "variables";
+@import "functions";
+
+%container-padding {
+    padding: Padding("50");
+
+    @media (max-width: $phone-width) {
+        padding: Padding("5");
+    }
+}
+
+%font {
+    font-family: NunitoSans;
+}
+
+%text-very-bold {
+    font-weight: $very-bold;
+    line-height: 1.71;
+    letter-spacing: $letterSpacing;
+    @extend %font;
+}
+
+%text-bold {
+    font-weight: $bold;
+    line-height: 1.71;
+    letter-spacing: $letterSpacing;
+    @extend %font;
+}
+
+%text-semibold {
+    font-weight: $semi-bold;
+    line-height: 1.71;
+    letter-spacing: $letterSpacing;
+    @extend %font;
+}
+
+%text-medium {
+    font-weight: $medium;
+    line-height: 1.71;
+    letter-spacing: $letterSpacing;
+    @extend %font;
+}
+
+%fiat-amount-grey {
+    color: SolidColor("grey");
+    font-size: 12px;
+    line-height: 22px;
+}
+
+%fiat-amount-white {
+    color: $white;
+    font-size: 12px;
+    line-height: 22px;
+}
+
+%seperator-border {
+    position: relative;
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% - 40px);
+        height: 1px;
+        border-top: $separatorBorder;
+    }
+}
+
+%skeleton-text {
+    height: 16px;
+    width: 100%;
+    border-radius: 4px;
+}
+
+%skeleton-big-text {
+    height: 20px;
+    width: 100%;
+    border-radius: 4px;
+}
+
+%skeleton-text-h3 {
+    height: 30px;
+    width: 100%;
+    border-radius: 4px;
+}
+
+%skeleton-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+}
+
+%skeleton-icon-h3 {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+}
+
+%white-box {
+    border-radius: $borderRadius;
+    background-color: $white;
+    padding: Padding("7");
+}
+
+%white-box-big-padding {
+    border-radius: $borderRadius;
+    background-color: $white;
+
+    padding: Padding("10");
+
+    @media (max-width: $phone-width) {
+        padding: Padding("5");
+    }
+}
+
+%hover-state {
+    opacity: 1;
+    transition-property: opacity;
+    transition-timing-function: ease;
+    transition-duration: 0.3s;
+
+    @media (hover: hover) {
+        &:hover {
+            cursor: pointer !important;
+            opacity: 0.6;
+            transition-duration: 0.03s;
+        }
+    }
+
+    &:active {
+        transition-duration: 0.03s;
+        opacity: 0.6;
+    }
+}
+
+%black-window {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(#0d1e3c, 0.5);
+    z-index: -1;
+}

package/styles/_variables.scss

@@ -0,0 +1,46 @@
+@import "colors/solid-colors";
+@import "colors/light-colors";
+@import "size/margin-size";
+@import "size/padding-size";
+
+$borderRadius: 16px;
+$background: linear-gradient(
+    39deg,
+    #6fdfa0 0%,
+    #405db0 81%,
+    #405db0 81%,
+    #3b5bb6 81%
+);
+$white: #ffffff;
+
+$separatorBorder: 0.5px solid SolidColor("smoke");
+$buttonBorder: 2px solid SolidColor("tosca");
+$buttonBorderWhite: 2px solid $white;
+
+$shadowOutlineStatic: 0px 0px 0px 1px rgba(0, 0, 0, 0) inset,
+    0px 0px 3px 0px rgba(0, 0, 0, 0);
+$shadowOutlineHover: 0px 0px 0px 1px LightColor("dark-20") inset,
+    0px 0px 3px 0px rgba(0, 0, 0, 0);
+$shadowOutlineActive: 0px 0px 0px 1px #16cdd6 inset,
+    0px 0px 3px 0px rgba(22, 205, 214, 0.3);
+$shadowOutlineError: 0px 0px 0px 1px #ee6a7d inset,
+    0px 0px 3px 0px rgba(#ee6a7d, 0.3);
+
+$transitionEaseOut: cubic-bezier(0.22, 0.61, 0.36, 1);
+
+// Width values for breakpoints. Should be used with the "@media (max-width: ..."
+$wide-desktop-width: 1279.98px;
+$desktop-width: 1199.98px;
+$laptop-width: 991.98px;
+$tablet-width: 767.98px;
+$phone-width: 575.98px;
+$extra-small: 358.98px;
+
+$extra-bold: 900;
+$very-bold: 800;
+$bold: 700;
+$semi-bold: 600;
+$medium: 400;
+$regular: 300;
+
+$letterSpacing: 0.5px;

package/styles/colors/_light-colors.scss

@@ -0,0 +1,14 @@
+$lightColor: (
+    "dark-20": #d3d5d9,
+    "red-20": #fce1e5,
+    "green-20": #d3f2e1,
+    "blue-20": #d3eafc,
+    "yellow-20": #fff0de,
+    "grey-20": #e9eaec,
+    "tosca-20": #d0f5f7,
+    "purple-20": #eae3fe,
+    "orange-20": #fde4e0,
+    "cyan-20": #e9eaec,
+    "army-20": #d0f5f7,
+    "white-20": rgba(#fff, 0.2),
+);