init

assets/styles/components/_box.scss

@@ -0,0 +1,189 @@
+.box {
+  border: 1px solid #393939;
+  position: relative;
+  z-index: 2;
+
+  &-stats {
+    height: 100%;
+
+    @include tablet {
+      max-width: 440px;
+      margin-left: auto;
+    }
+
+    .box {
+      border-top-left-radius: 0;
+      margin-bottom: 0;
+    }
+
+    .tab-with-corner.is-left-top {
+      display: inline-flex;
+      align-items: center;
+      font-weight: 700;
+      font-size: 1.35rem;
+
+      @include until(375px) {
+        font-size: 1.135rem;
+      }
+
+      &:after {
+        right: -1.8rem;
+
+        @include until(375px) {
+          right: -1.5rem;
+        }
+      }
+    }
+
+    span.selected {
+      border-radius: 4px;
+      font-size: 0.75rem;
+      background-color: #0d1f16;
+      border: 1px solid $primary;
+      color: $primary;
+      padding: calc(0.375em - 1px) 0.75em;
+      height: 2.25em;
+      display: inline-flex;
+      margin-left: 1rem;
+
+      > span {
+        padding-right: 0.5em;
+      }
+    }
+
+    .deposits {
+      font-size: 0.82rem;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .row {
+        display: flex;
+        height: 27px;
+
+        &:nth-child(odd) {
+          background-color: #171717;
+        }
+      }
+
+      .value {
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
+        padding-left: 0.625rem;
+        padding-right: 0.3125rem;
+        white-space: nowrap;
+        padding-right: 0.25rem;
+        text-align: right;
+      }
+
+      .data {
+        width: 100%;
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
+        padding-right: 0.625rem;
+        color: $primary;
+        @include noWrap;
+      }
+
+      .b-skeleton {
+        &-item {
+          height: 1.429rem;
+        }
+
+        + .b-skeleton {
+          margin-top: 0.625rem;
+        }
+      }
+    }
+
+    @include until(375px) {
+      .b-tooltip.is-top.is-multiline.is-large:after {
+        width: 100%;
+      }
+    }
+
+    .box-ip {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  &-modal {
+    max-width: 440px;
+    overflow-y: auto;
+
+    &.has-delete {
+      .delete {
+        position: absolute;
+        right: 1.5rem;
+        top: 1.571rem;
+      }
+
+      .b-tabs.is-modal {
+        .tabs {
+          margin-top: -0.5em;
+          margin-right: 2.143rem;
+          overflow: hidden;
+          overflow-x: auto;
+
+          ul {
+            @include tablet {
+              flex-wrap: wrap;
+              flex-shrink: 1;
+            }
+          }
+        }
+      }
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1.5rem;
+
+      &.is-spaced {
+        margin-bottom: 0.475rem;
+      }
+
+      .delete {
+        margin-left: auto;
+      }
+    }
+
+    &-title {
+      font-size: 1.143rem;
+      font-weight: 700;
+    }
+
+    .note {
+      margin-bottom: 1rem;
+    }
+
+    .znote {
+      color: $primary;
+      word-break: break-all;
+      margin-bottom: 1rem;
+    }
+
+    .checkbox {
+      margin-bottom: 1.5rem;
+    }
+
+    .buttons {
+      .b-tooltip {
+        margin-bottom: 0.5rem;
+
+        .button {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .p {
+      font-size: 0.929rem;
+      margin-top: 0.25rem;
+      margin-bottom: 1rem;
+    }
+  }
+}