1 files changed, 111 insertions, 0 deletions

diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
new file mode 100644
index 000000000..9dc4f1055
--- /dev/null
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -0,0 +1,111 @@
+$wallet-balance-breakpoint: 890px;
+$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+
+.token-list-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding: 20px 24px;
+  cursor: pointer;
+  transition: linear 200ms;
+  background-color: rgba($wallet-balance-bg, 0);
+  position: relative;
+
+  &__token-balance {
+    font-size: 1.5rem;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 95%;
+    }
+  }
+
+  &__fiat-amount {
+    margin-top: .25%;
+    font-size: 105%;
+    text-transform: uppercase;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 95%;
+    }
+  }
+
+  @media #{$wallet-balance-breakpoint-range} {
+    padding: 10% 4%;
+  }
+
+  &--active {
+    background-color: $manatee;
+    color: $white;
+  }
+
+  &__identicon {
+    margin-right: 15px;
+    border: '1px solid #dedede';
+    min-width: 50px;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      margin-right: 4%;
+    }
+  }
+
+  &__balance-ellipsis {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__ellipsis {
+    line-height: 45px;
+    margin-left: 5px;
+  }
+
+  &__balance-wrapper {
+    flex: 1 1 auto;
+  }
+}
+
+.token-menu-dropdown {
+  height: 55px;
+  width: 80%;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .82);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
+  position: absolute;
+  top: 60px;
+  right: 25px;
+  z-index: 2000;
+
+  @media #{$wallet-balance-breakpoint-range} {
+    right: 18px;
+  }
+
+  &__close-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2100;
+    width: 100%;
+    height: 100%;
+    cursor: default;
+  }
+
+  &__container {
+    padding: 16px;
+    z-index: 2200;
+    position: relative;
+  }
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__option {
+    color: $white;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
\ No newline at end of file