1 files changed, 267 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
new file mode 100644
index 000000000..c9a06a2cc
--- /dev/null
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -0,0 +1,267 @@
+/*
+  NewUI Container Elements
+ */
+
+// Component Colors
+$tx-view-bg: $white;
+$wallet-view-bg: $alabaster;
+
+// Main container
+.main-container {
+  // position: absolute;
+  z-index: $main-container-z-index;
+  font-family: Roboto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.main-container::-webkit-scrollbar {
+  display: none;
+}
+
+// tx view
+
+.tx-view {
+  flex: 63.5 0 66.5%;
+  background: $tx-view-bg;
+
+  // No title on mobile
+  @media screen and (max-width: 575px) {
+    .identicon-wrapper {
+      display: none;
+    }
+
+    .account-name {
+      display: none;
+    }
+  }
+}
+
+.open-in-browser {
+  cursor: pointer;
+}
+
+// wallet view and sidebar
+
+.wallet-view {
+  display: flex;
+  flex-direction: column;
+  flex: 32 1 32%;
+  width: 0;
+  background: $wallet-view-bg;
+  z-index: 200;
+  position: relative;
+
+  @media screen and (min-width: 576px) {
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .wallet-view-account-details {
+    flex: 0 0 auto;
+  }
+
+  &__name-container {
+    flex: 0 0 auto;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  &__keyring-label {
+    height: 50px;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 10px;
+    text-align: right;
+    padding: 17px 20px 0;
+    box-sizing: border-box;
+  }
+
+  &__details-button {
+    font-size: 10px;
+    border-radius: 17px;
+    background-color: transparent;
+    margin: 0 auto;
+    padding: 4px 12px;
+    flex: 0 0 auto;
+  }
+
+  &__address {
+    border-radius: 3px;
+    background-color: $alto;
+    color: $scorpion;
+    font-size: 14px;
+    line-height: 12px;
+    padding: 4px 12px;
+    margin: 24px auto;
+    font-weight: 300;
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+
+  &__sidebar-close {
+
+    @media screen and (max-width: 575px) {
+      &::after {
+        content: '\00D7';
+        font-size: 40px;
+        color: $tundora;
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__add-token-button {
+    flex: 0 0 auto;
+    margin: 36px auto;
+    background: none;
+    padding: .7rem 2rem;
+    transition: border-color .3s ease;
+
+    &:hover {
+      border-color: $curious-blue;
+    }
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .wallet-view::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.wallet-view-title-wrapper {
+  flex: 0 0 25px;
+}
+
+.wallet-view-title {
+  margin-left: 15px;
+  font-size: 16px;
+
+  // No title on mobile
+  @media screen and (max-width: 575px) {
+    display: none;
+  }
+}
+
+.wallet-view.sidebar {
+  flex: 1 0 230px;
+  background: rgb(250, 250, 250);
+  z-index: $sidebar-z-index;
+  position: fixed;
+  top: 66px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  will-change: transform;
+  overflow-y: auto;
+  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+  width: 85%;
+  height: calc(100% - 56px);
+}
+
+.sidebar-overlay {
+  z-index: $sidebar-overlay-z-index;
+  position: fixed;
+  // top: 41px;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+// main-container media queries
+
+@media screen and (min-width: 576px) {
+  .lap-visible {
+    display: flex;
+  }
+
+  .phone-visible {
+    display: none;
+  }
+
+  .main-container {
+    // margin-top: 6.9vh;
+    width: 85vw;
+    height: 90vh;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .main-container {
+    // margin-top: 6.9vh;
+    width: 80vw;
+    height: 82vh;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .main-container {
+    // margin-top: 6.9vh;
+    width: 62vw;
+    height: 82vh;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .lap-visible {
+    display: none;
+  }
+
+  .phone-visible {
+    display: flex;
+  }
+
+  .main-container {
+    // margin-top: 41px;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    background-color: $white;
+  }
+}
+
+// wallet view
+.account-name {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 20px;
+  color: $black;
+  margin-top: 8px;
+  margin-bottom: .9rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+  padding: 0 8px;
+  text-align: center;
+}
+
+// account options dropdown
+.account-options-menu {
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5% 7% 0%;
+}
+
+.fiat-amount {
+  text-transform: uppercase;
+}
+
+.token-balance__amount {
+  padding-right: 6px;
+}