rujira.ui 0.1.0

package/src/scss/components/_warning.scss

@@ -0,0 +1,65 @@
+.warning {
+  display: flex;
+  padding: 0.5rem;
+  border: 1px solid $grey;
+  color: $grey;
+  background-color: rgba($grey, 0.25);
+  font-size: 0.875rem;
+  line-height: 1.2em;
+  border-radius: 0.5rem;
+  font-weight: 500;
+
+  &--teal {
+    color: $teal;
+    border-color: $teal;
+    background-color: rgba($teal, 0.25);
+  }
+
+  &--orange {
+    color: $orange;
+    border-color: $orange;
+    background-color: rgba($orange, 0.25);
+  }
+
+  &--red {
+    color: $red;
+    border-color: $red;
+    background-color: rgba($red, 0.25);
+  }
+
+  &__icon, &__close, svg:first-child {
+    width: auto;
+    height: 1.25rem;
+    display: block;
+    flex-grow: 0;
+    margin-top: -0.1rem;
+
+    svg {
+      display: block;
+      width: auto;
+      height: 100%;
+    }
+  }
+  
+  &__icon, & > svg:first-child {
+    margin-right: 0.25rem;
+    flex-shrink: 0;
+  }
+  
+  &__msg {
+    display: block;
+    flex: 1;
+    text-align: left;
+  }
+
+  &--pre &__msg {
+    white-space: pre;
+  }
+
+  &__close {
+    color: inherit;
+    margin-right: 0;
+    margin-left: 0.25rem;
+    cursor: pointer;
+  }
+}

package/src/scss/index.scss

@@ -0,0 +1,37 @@
+@import "base/normalize";
+@import "base/variables";
+
+@import "styledcomponents/drawer";
+@import "styledcomponents/general";
+@import "styledcomponents/card";
+@import "styledcomponents/table";
+@import "styledcomponents/tabs";
+@import "styledcomponents/tag";
+
+@import "components/button";
+@import "components/button-group";
+@import "components/decimal";
+@import "components/denom-select";
+@import "components/fiat";
+@import "components/footer";
+@import "components/header";
+@import "components/input";
+@import "components/loader";
+@import "components/modal";
+@import "components/numeric-input";
+@import "components/popout";
+@import "components/progress";
+@import "components/radio-checkbox";
+@import "components/select";
+@import "components/slider";
+@import "components/toggle";
+@import "components/warning";
+
+@import "base/tooltip";
+@import "base/typography";
+@import "base/flex";
+@import "base/colors";
+@import "base/filters";
+@import "base/display";
+@import "base/spacing";
+@import "base/important";

package/src/scss/styledcomponents/_card.scss

@@ -0,0 +1,130 @@
+.card {
+  border-radius: 1rem;
+  background: $black;
+
+  &--shadow {
+    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.07),
+      6.7px 6.7px 5.3px rgba(0, 0, 0, 0.05),
+      12.5px 12.5px 10px rgba(0, 0, 0, 0.042),
+      22.3px 22.3px 17.9px rgba(0, 0, 0, 0.035),
+      41.8px 41.8px 33.4px rgba(0, 0, 0, 0.028),
+      100px 100px 80px rgba(0, 0, 0, 0.02);
+  }
+
+  &--semi-transparent {
+    background: rgba($black, 0.75);
+  }
+
+  &--very-transparent {
+    background: rgba($black, 0.25);
+  }
+
+  &--transparent {
+    background: transparent;
+  }
+
+  &--blur {
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+  }
+
+  &--hide-overflow {
+    overflow: hidden;
+  }
+
+  &--h-full {
+    height: 100%;
+  }
+
+  &--stretch {
+    min-height: 100%;
+  }
+
+  &--vertical-split {
+    height: 50%;
+  }
+
+  &--tabbed {
+    border-top: 0;
+    border-radius: 0 0 1rem 1rem;
+  }
+  
+
+  &--border {
+    border: 1px solid rgba($grey, 0.5);
+  }
+
+  &--border-solid {
+    border: 1px solid $grey;
+  }
+
+  &--hover-border {
+    &:hover {
+      outline: 1px solid rgba($grey, 0.5);
+    }
+  }
+}
+
+a.card {
+  transition: all 0.25s;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0px 0px 0px 1px rgba($grey, 1);
+  }
+}
+
+.gradient-card-container {
+  z-index: 0;
+  position: relative;
+}
+
+.gradient-card {
+  position: relative;
+  $border: 1px;
+  background-clip: padding-box;
+  border: solid $border transparent;
+  border-radius: 1em;
+  //padding: 20px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    margin: -$border;
+    border-radius: inherit;
+    background: linear-gradient(
+      45deg,
+      rgba($grey, 0.5),
+      rgba($lightGrey, 0.1)
+    );
+  }
+
+  &--purple {
+    &:before {
+      background: linear-gradient(
+        45deg,
+        rgba($pink, 1),
+        rgba($purple, 1)
+      );
+    }
+  }
+
+  &--blue {
+    &:before {
+      background: linear-gradient(
+        45deg,
+        rgba($teal, 1),
+        rgba($blue, 1)
+      );
+    }
+  }
+}
+
+a.gradient-card {
+  text-decoration: none;
+}

package/src/scss/styledcomponents/_drawer.scss

@@ -0,0 +1,36 @@
+.drawer {
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    -webkit-backdrop-filter: brightness(40%);
+    -moz-backdrop-filter: brightness(40%);
+    backdrop-filter: brightness(40%);
+    z-index: 200;
+  }
+  &__content {
+    z-index: 201;
+    position: fixed;
+    display: flex;
+    
+    &--left, &--right {
+      --initial-transform: calc(100% + 8px);
+      top: 0.5rem;
+      bottom: 0.5rem;
+      max-width: calc(100% - 1rem);
+    }
+
+    &--left {
+      left: 0.5rem;
+    }
+
+    &--right {
+      right: 0.5rem;
+    }
+  }
+  &__card {
+    border-radius: 1rem;
+    background-color: $black;
+    color: $white;
+    padding: 1.5rem;
+  }
+}

package/src/scss/styledcomponents/_general.scss

@@ -0,0 +1,20 @@
+.hr {
+  padding: 0;
+  border: 0;
+  background: rgba($grey, 0.5);
+  height: 1px;
+  width: 100%;
+  
+  &--dark {
+    background: rgba($black, 0.5);
+  }
+}
+
+.link {
+  color: $pink;
+  transition: color 0.15s;
+
+  &:hover {
+    color: $white;
+  }
+}

package/src/scss/styledcomponents/_table.scss

@@ -0,0 +1,302 @@
+.table-overflow {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+.table-overflow, .table-sticky {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: $black;
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: $grey;
+    border-radius: 4px;
+    border: 2px solid $black;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: $primary1;
+    border-width: 1px;
+  }
+}
+
+.table {
+  border-collapse: collapse;
+  width: 100%;
+  font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  font-weight: 400;
+  text-align: left;
+
+  &:not(:has(.popout--open)):not(.table--no-hover) tbody:hover {  
+    tr:not(:hover) {
+      opacity: 0.5;
+    }
+  }
+
+  &:has(.popout--open):not(.table--no-hover) tbody {  
+    tr:not(:has(.popout--open)) {
+      opacity: 0.5;
+    }
+  }
+
+  tr {
+    tr {
+      transition: opacity 0.2s;
+    }
+
+    th,
+    td {
+      line-height: 1.1em;
+      padding: 0.25rem 0.5rem;
+
+      &.nopad {
+        padding: 0;
+      }
+    }
+
+    th {
+      color: $grey;
+      font-weight: 500;
+      padding-top: 0;
+      padding-bottom: 0.75rem;
+      font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+
+      &.can-sort {
+        cursor: pointer;
+        user-select: none;
+
+        svg {
+          display: inline-block;
+          vertical-align: bottom;
+          width: 0.75rem;
+          height: 0.75rem;
+          margin-left: 0.25rem;
+        }
+
+        .icon-primary {
+          color: $teal;
+        }
+      }
+    }
+
+    td:first-child,
+    th:first-child {
+      padding-left: 0;
+    }
+    td:last-child,
+    th:last-child {
+      padding-right: 0;
+    }
+  }
+
+  &--in-card {
+    tr {
+      td:first-child,
+      th:first-child {
+        padding-left: 1.5rem;
+      }
+      td:last-child,
+      th:last-child {
+        padding-right: 1.5rem;
+      }
+    }
+
+    tbody:only-child {
+      tr {
+        &:first-child {
+          td,
+          th {
+            padding-top: 1.5rem;
+          }
+        }
+
+        &:last-child {
+          td,
+          th {
+            padding-bottom: 1.5rem;
+          }
+        }
+      }
+    }
+
+    thead {
+      tr {
+        td,
+        th {
+          padding-top: 1.5rem;
+        }
+      }
+    }
+
+    thead + tbody {
+      tr {
+        &:last-child {
+          td,
+          th {
+            padding-bottom: 1.5rem;
+          }
+        }
+      }
+    }
+  }
+
+  &--lined {
+    th,
+    td {
+      border-bottom: 1px solid rgba($grey, 0.125);
+    }
+  }
+
+  &--spaced {
+    tbody tr td, tbody tr th {
+      padding-top: 0.375rem;
+      padding-bottom: 0.375rem;
+    }
+  }
+
+  &--big {
+    tbody tr td, tbody tr th {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+
+  /* &--nohover {
+    tbody,
+    thead {
+      tr:not(.no-hover) {
+        th,
+        td {
+          transition: background 0.2s;
+        }
+      }
+    }
+  } */
+
+  /* &--light#{&}--lined {
+    th,
+    td {
+      border-bottom: 1px solid rgba($grey, 0.15);
+    }
+
+    tbody {
+      tr:not(.no-hover):hover {
+        td,
+        th {
+          & {
+            background: rgba($grey, 0.2);
+          }
+        }
+      }
+    }
+  } */
+
+  &--va-t {
+    th, tr {
+      vertical-align: top;
+    }
+  }
+
+  .va-t {
+    vertical-align: top !important;
+  }
+
+  .va-m {
+    vertical-align: middle !important;
+  }
+
+  .va-b {
+    vertical-align: bottom !important;
+  }
+
+  .auto {
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  .breath {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+
+  thead.border {
+    th {
+      border-bottom: 1px solid rgba($grey, 0.15);
+      padding-bottom: 0.5rem;
+    }
+    & + tbody {
+      tr:first-child {
+        td {
+          padding-top: 0.5rem;
+        }
+      }
+    }
+  }
+  tfoot.border {
+    th {
+      border-top: 1px solid rgba($grey, 0.15);
+      padding-top: 0.5rem;
+    }
+  }
+  tfoot.uni-border {
+    th {
+      padding-top: 0.5rem;
+    }
+  }
+}
+
+.responsiveTable tbody tr {
+  border: 0 !important;
+}
+
+.inline-link {
+  text-decoration: none;
+  color: $lightGrey;
+  transition: color 0.15s;
+
+  &:hover {
+    color: $teal;
+  }
+
+  svg {
+    width: 0.75em;
+    height: auto;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-left: 0.25rem;
+  }
+
+  .inline-block {
+    vertical-align: baseline;
+    svg {
+      display: block;
+    }
+  }
+}
+
+.table-sticky {
+ overflow: auto;
+ 
+ .table {
+   thead th:first-child {
+     position: sticky;
+     left: 0;
+     z-index: 2;
+   }
+
+   tbody th {
+     position: sticky;
+     left: 0;
+     z-index: 1;
+   }
+ }
+}

package/src/scss/styledcomponents/_tabs.scss

@@ -0,0 +1,97 @@
+.tabs {
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+  overflow-y: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  //margin-left: -0.25rem;
+  //margin-right: -0.25rem;
+  //border-radius: 2rem;
+
+  &.wrap {
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+  
+
+  &::-webkit-scrollbar { 
+    display: none;
+  }
+
+  & > a, & > div {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    height: 3rem;
+    border-radius: 2rem;
+    color: $grey;
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    //margin: 0.25rem;
+    transition: all 0.15s;
+    user-select: none;
+
+    &:hover {
+      color: $lightGrey;
+      background: rgba($grey, 0.03);
+    }
+
+    &.selected {
+      background: rgba($grey, 0.12);
+      color: $white;
+      box-shadow: none;
+
+      &.bg-black {
+        background: $black;
+      }
+
+      i {
+        background: linear-gradient(
+          45deg,
+          $primary2,
+          $primary1
+        );
+        color: $white;
+      }
+    }
+
+    i {
+      min-width: 1rem;
+      height: 1rem;
+      font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+      font-size: 0.625rem;
+      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $primary1;
+      box-shadow: inset 0 0 0 1px $primary1;
+      font-style: normal;
+      padding: 0 0.25rem;
+      margin-left: 0.5rem;
+      font-weight: 500;
+    }
+  }
+
+  &--sm {
+    a {
+      font-size: 0.75rem;
+      background: rgba($darkGrey, 0.5);
+      margin-right: 0.25rem;
+      height: 2rem;
+
+      &:not(.selected):hover {
+        background: rgba($darkGrey, 0.75);
+      }
+
+      &.selected {
+        background-color: $darkGrey;
+      }
+    }
+  }
+}