Lint and cleanup all scss

10 files changed, 132 insertions, 123 deletions

diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 114a2f892..9916db488 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -3,11 +3,11 @@
  */
 
 .btn-green {
-  background-color: #02C9B1; // TODO: reusable color in colors.css
+  background-color: #02c9b1; // TODO: reusable color in colors.css
 }
 
 button.btn-clear {
-  background: white;
+  background: $white;
   border: 1px solid;
 }
 
@@ -46,9 +46,9 @@ button.btn-clear {
 
 button.primary {
   padding: 8px 12px;
-  background: #F7861C;
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-  color: white;
+  background: #f7861c;
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: $white;
   font-size: 1.1em;
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
@@ -57,8 +57,8 @@ button.primary {
 .btn-light {
   padding: 8px 12px;
   // background: #FFFFFF; // $bg-white
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-  color: #585D67; // TODO: make reusable light button color
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: #585d67; // TODO: make reusable light button color
   font-size: 1.1em;
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
@@ -66,14 +66,14 @@ button.primary {
   line-height: 20px;
   border-radius: 2px;
   border: 1px solid #979797; // #TODO: make reusable light border color
-  opacity: 0.5;
+  opacity: .5;
 }
 
 // TODO: cleanup: not used anywhere
 button.btn-thin {
   border: 1px solid;
-  border-color: #4D4D4D;
-  color: #4D4D4D;
+  border-color: #4d4d4d;
+  color: #4d4d4d;
   background: rgb(255, 174, 41);
   border-radius: 4px;
   min-width: 200px;
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index 405c45f7f..9434d0386 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -1,20 +1,18 @@
 .app-header {
   align-items: center;
   visibility: visible;
-  background: rgb(239, 239, 239);
-  padding-top: 1.5vh;
+  background: $gallery;
+  padding: 6px 8px;
   height: 12vh;
   max-height: 60px;
   position: relative;
   z-index: 12;
-  padding: 6px 8px;
-  // background: #EFEFEF; // $gallery
 
   @media screen and (max-width: 575px) {
     position: fixed;
     height: 34px;
     width: 100%;
-    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08);
     z-index: 30;
   }
 }
@@ -22,13 +20,13 @@
 .app-header h1 {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
-  color: #22232C; // $shark
+  color: #22232c; // $shark
 }
 
 h2.page-subtitle {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
-  color: #AEAEAE;
+  color: #aeaeae;
   font-size: 1em;
   margin: 12px;
 }
@@ -51,4 +49,4 @@ h2.page-subtitle {
   @media screen and (min-width: 576px) {
     margin-bottom: 1.8em;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 72333fb47..ad7f5952f 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -5,7 +5,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin: 0.3em 0.9em 0em 0.9em;
+    margin: .3em .9em 0;
     height: 80vh;
     max-height: 225px;
   }
@@ -15,7 +15,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin: 2.8em 0.9em 0.8em 0.9em;
+    margin: 2.8em .9em .8em;
   }
 
   .balance-container {
@@ -47,7 +47,7 @@
       .fiat-amount {
         font-size: 115%;
         margin-top: 8.5%;
-        color: #A0A0A0;
+        color: #a0a0a0;
       }
     }
 
@@ -61,7 +61,7 @@
       }
 
       .fiat-amount {
-        margin-top: 0.25%;
+        margin-top: .25%;
         font-size: 105%;
       }
     }
@@ -75,6 +75,7 @@
   }
 
   .hero-balance-buttons {
+
     @media screen and (max-width: $break-small) {
       width: 100%;
       height: 100px; // needed a round number to set the heights of the buttons inside
@@ -86,7 +87,7 @@
 
     button.btn-clear {
       font-size: 75%;
-      background: white;
+      background: $white;
       border: 1px solid;
 
       @media screen and (max-width: $break-small) {
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 1b0a41714..291e09007 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,13 +1,21 @@
 @import './buttons.scss';
+
 @import './header.scss';
+
 @import './footer.scss';
+
 @import './network.scss';
+
 @import './modal.scss';
+
 @import './newui-sections.scss';
 
 // Balances
 @import './hero-balance.scss';
+
 @import './wallet-balance.scss';
 
+// Tx List and Sections
 @import './transaction-list.scss';
+
 @import './sections.scss';
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index cfe1cb366..8bf7cd44f 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -37,7 +37,7 @@
     margin: 10px;
     text-align: center;
     border-radius: 6px;
-    border: 1px solid black;
+    border: 1px solid $black;
     padding: 0% 7%;
     justify-content: space-around;
 
@@ -71,7 +71,7 @@
 
   .modal-content-options {
     flex-direction: row;
-    margin: 20px 0px
+    margin: 20px 0;
   }
 
   div.modal-content-option {
@@ -81,8 +81,8 @@
     height: 18vw;
     text-align: center;
     border-radius: 6px;
-    border: 1px solid black;
-    margin: 0px .5vw;
+    border: 1px solid $black;
+    margin: 0 .5vw;
     justify-content: space-around;
 
     div.modal-content-option-title {
@@ -99,25 +99,25 @@
 
     div.modal-content-option-subtitle {
       font-size: 16px;
-      padding: 0px 10px;
+      padding: 0 10px;
       height: 25%;
 
       @media screen and (max-width: 679px) {
         font-size: 10px;
-        padding: 0px 10px;
+        padding: 0 10px;
         margin-bottom: 5px;
         line-height: 15px;
       }
 
       @media screen and (min-width: 680px) {
         font-size: 14px;
-        padding: 0px 4px;
+        padding: 0 4px;
         margin-bottom: 2px;
       }
 
       @media screen and (min-width: 1281px) {
         font-size: 20px;
-        padding: 0px 0px;
+        padding: 0;
       }
     }
 
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 75c3a68d8..aea5063f0 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -1,7 +1,7 @@
 .network-indicator {
   display: flex;
   align-items: center;
-  font-size: 0.6em;
+  font-size: .6em;
 }
 
 .network-name {
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index afda29cd5..7daf72bf2 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -10,7 +10,7 @@ $wallet-view-bg: $wild-sand;
 .main-container {
   position: absolute;
   z-index: 18;
-  font-family: DIN OT;
+  font-family: "DIN OT";
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -61,14 +61,14 @@ $wallet-view-bg: $wild-sand;
   z-index: 26;
   position: fixed;
   top: 35px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   opacity: 1;
   visibility: visible;
   will-change: transform;
   overflow-y: auto;
-  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
+  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
   width: 85%;
   height: 100%;
 }
@@ -77,12 +77,12 @@ $wallet-view-bg: $wild-sand;
   z-index: 25;
   position: fixed;
   top: 35px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   opacity: 1;
   visibility: visible;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, .3);
 }
 
 // main-container media queries
@@ -100,7 +100,7 @@ $wallet-view-bg: $wild-sand;
     margin-top: 35px;
     width: 85%;
     height: 90vh;
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -109,7 +109,7 @@ $wallet-view-bg: $wild-sand;
     margin-top: 35px;
     width: 80%;
     height: 82vh;
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -118,7 +118,7 @@ $wallet-view-bg: $wild-sand;
     margin-top: 35px;
     width: 65%;
     height: 82vh;
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -140,13 +140,14 @@ $wallet-view-bg: $wild-sand;
     width: 93px;
     height: 50px;
     font-size: .7em;
-    background: white;
+    background: $white;
     border: 1px solid;
   }
 }
 
 // wallet view
 .account-name {
+
   @media screen and (max-width: 575px) {
     font-size: 102%;
     margin-left: 3%;
@@ -162,4 +163,4 @@ $wallet-view-bg: $wild-sand;
   align-items: center;
   justify-content: flex-start;
   margin: 5% 7%;
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index 68f81d143..5f0a034d8 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/ui/app/css/itcss/components/sections.scss
@@ -1,3 +1,7 @@
+// Old scss, do not lint - clean up later
+/* stylelint-disable */
+
+
 /*
 App Sections
   TODO: Move into separate files.
@@ -9,14 +13,14 @@ textarea.twelve-word-phrase {
   width: 300px;
   height: 140px;
   font-size: 16px;
-  background: white;
+  background: $white;
   resize: none;
 }
 
 .initialize-screen hr {
   width: 60px;
   margin: 12px;
-  border-color: #F7861C;
+  border-color: #f7861c;
   border-style: solid;
 }
 
@@ -35,11 +39,11 @@ textarea.twelve-word-phrase {
 
 /* unlock */
 .error {
-  color: #E20202;
+  color: #e20202;
 }
 
 .warning {
-  color: #FFAE00;
+  color: #ffae00;
 }
 
 .lock {
@@ -49,7 +53,7 @@ textarea.twelve-word-phrase {
 
 .lock.locked {
   transform: scale(1.5);
-  opacity: 0.0;
+  opacity: 0;
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
 
@@ -96,12 +100,13 @@ textarea.twelve-word-phrase {
   width: 260px;
 }
 
-.sizing-input{
+.sizing-input {
   font-size: 14px;
   height: 30px;
   padding-left: 5px;
 }
-.editable-label{
+
+.editable-label {
   display: flex;
 }
 
@@ -140,7 +145,7 @@ textarea.twelve-word-phrase {
 }
 
 .accounts-section .horizontal-line {
-  margin: 0px 18px;
+  margin: 0 18px;
 }
 
 .accounts-list-option {
@@ -157,7 +162,7 @@ textarea.twelve-word-phrase {
 }
 
 .unconftx-link .fa-arrow-right {
-  margin: 0px -8px 0px 8px;
+  margin: 0 -8px 0px 8px;
 }
 
 /* identity panel */
@@ -184,7 +189,7 @@ textarea.twelve-word-phrase {
 .identity-panel i {
   margin-top: 32px;
   margin-right: 6px;
-  color: #B9B9B9;
+  color: #b9b9b9;
 }
 
 .identity-panel .arrow-right {
@@ -195,34 +200,33 @@ textarea.twelve-word-phrase {
 }
 
 .identity-copy.flex-column {
-  flex: 0.25 0 auto;
+  flex: .25 0 auto;
   justify-content: center;
 }
 
 /* accounts screen */
 
 .identity-section {
-
 }
 
 .identity-section .identity-panel {
-  background: #E9E9E9;
-  border-bottom: 1px solid #B1B1B1;
+  background: #e9e9e9;
+  border-bottom: 1px solid #b1b1b1;
   cursor: pointer;
 }
 
 .identity-section .identity-panel.selected {
-  background: white;
-  color: #F3C83E;
+  background: $white;
+  color: #f3c83e;
 }
 
 .identity-section .identity-panel.selected .identicon {
-  border-color: orange;
+  border-color: $orange;
 }
 
 .identity-section .accounts-list-option:hover,
 .identity-section .accounts-list-option.selected {
-  background:white;
+  background: $white;
 }
 
 /* account detail screen */
@@ -238,15 +242,14 @@ textarea.twelve-word-phrase {
   flex-grow: 10;
 }
 
-.name-label{
-
+.name-label {
 }
 
 .unapproved-tx-icon {
   height: 16px;
   width: 16px;
   background: rgb(47, 174, 244);
-  border-color: #AEAEAE;
+  border-color: $silver-chalice;
   border-radius: 13px;
 }
 
@@ -262,7 +265,7 @@ textarea.twelve-word-phrase {
   margin-bottom: 2px;
   font-size: 11px;
   text-rendering: geometricPrecision;
-  color: #F7861C;
+  color: #f7861c;
 }
 
 .name-label:hover .edit-text {
@@ -276,8 +279,8 @@ textarea.twelve-word-phrase {
   margin: 12px;
   margin-bottom: 24px;
   border-radius: 4px;
-  border: 2px solid #F3C83E;
-  background: #FAF6F0;
+  border: 2px solid #f3c83e;
+  background: #faf6f0;
 }
 
 /* Send Screen */
@@ -294,25 +297,25 @@ textarea.twelve-word-phrase {
 /* Ether Balance Widget */
 
 .ether-balance-amount {
-  color: #F7861C;
+  color: #f7861c;
 }
 
 .ether-balance-label {
-  color: #ABA9AA;
+  color: #aba9aa;
 }
 
 /* Info screen */
-.info-gray{
+.info-gray {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
-  color: #AEAEAE;
+  color: $silver-chalice;
 }
 
-.icon-size{
+.icon-size {
   width: 20px;
 }
 
-.info{
+.info {
   font-family: 'Montserrat Regular', Arial;
   padding-bottom: 10px;
   display: inline-block;
@@ -325,7 +328,6 @@ textarea.twelve-word-phrase {
   align-items: center;
 }
 
-
 .custom-radio-selected {
   width: 17px;
   height: 17px;
@@ -334,7 +336,7 @@ textarea.twelve-word-phrase {
   border-radius: 15px;
   border-width: 5px;
   background: rgba(247, 134, 28, 1);
-  border-color: #F7F7F7;
+  border-color: #f7f7f7;
 }
 
 .custom-radio-inactive {
@@ -343,26 +345,26 @@ textarea.twelve-word-phrase {
   border: solid;
   border-width: 1px;
   border-radius: 24px;
-  border-color: #AEAEAE;
+  border-color: $silver-chalice;
 }
 
 .radio-titles {
   color: rgba(247, 134, 28, 1);
 }
 
-.eth-warning{
+.eth-warning {
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
 
-.buy-subview{
+.buy-subview {
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
 
-.input-container:hover .edit-text{
+.input-container:hover .edit-text {
   visibility: visible;
 }
 
-.buy-inputs{
+.buy-inputs {
   font-family: 'Montserrat Light';
   font-size: 13px;
   height: 20px;
@@ -370,34 +372,32 @@ textarea.twelve-word-phrase {
   box-sizing: border-box;
   border: solid;
   border-color: transparent;
-  border-width: 0.5px;
+  border-width: .5px;
   border-radius: 2px;
-
 }
 
-.input-container:hover .buy-inputs{
+.input-container:hover .buy-inputs {
   box-sizing: inherit;
   border: solid;
-  border-color: #F7861C;
-  border-width: 0.5px;
+  border-color: #f7861c;
+  border-width: .5px;
   border-radius: 2px;
 }
 
-.buy-inputs:focus{
+.buy-inputs:focus {
   border: solid;
-  border-color: #F7861C;
-  border-width: 0.5px;
+  border-color: #f7861c;
+  border-width: .5px;
   border-radius: 2px;
 }
 
 .activeForm {
-  background: #F7F7F7;
+  background: #f7f7f7;
   border: none;
   border-radius: 8px 8px 0px 0px;
   width: 50%;
   text-align: center;
   padding-bottom: 4px;
-
 }
 
 .inactiveForm {
@@ -416,12 +416,12 @@ textarea.twelve-word-phrase {
   width: 118px;
   height: 42px;
   padding: 1px;
-  color: #4D4D4D;
+  color: #4d4d4d;
 }
 
-.marketinfo{
+.marketinfo {
   font-family: 'Montserrat light';
-  color: #AEAEAE;
+  color: $silver-chalice;
   font-size: 15px;
   line-height: 17px;
 }
@@ -436,25 +436,25 @@ textarea.twelve-word-phrase {
   overflow: scroll;
 }
 
-.icon-control .fa-refresh{
+.icon-control .fa-refresh {
   visibility: hidden;
 }
 
-.icon-control:hover .fa-refresh{
+.icon-control:hover .fa-refresh {
   visibility: visible;
 }
 
-.icon-control:hover .fa-chevron-right{
+.icon-control:hover .fa-chevron-right {
   visibility: hidden;
 }
 
 .inactive {
-    color: #AEAEAE;
+  color: $silver-chalice;
 }
 
-.inactive button{
-    background: #AEAEAE;
-    color: white;
+.inactive button {
+  background: $silver-chalice;
+  color: $white;
 }
 
 .ellip-address {
@@ -467,21 +467,23 @@ textarea.twelve-word-phrase {
 }
 
 .qr-header {
-    font-size: 25px;
-    margin-top: 40px;
+  font-size: 25px;
+  margin-top: 40px;
 }
 
 .qr-message {
   font-size: 12px;
-  color: #F7861C;
+  color: #f7861c;
 }
 
 div.message-container > div:first-child {
   margin-top: 18px;
   font-size: 15px;
-  color: #4D4D4D;
+  color: #4d4d4d;
 }
 
 .pop-hover:hover {
   transform: scale(1.1);
 }
+
+/* stylelint-enable */
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index ca32508b8..a6e68df42 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -1,5 +1,6 @@
 .tx-list-container {
   height: 87.5%;
+
   @media screen and (min-width: $break-large) {
     overflow-y: scroll;
   }
@@ -7,8 +8,8 @@
 
 @media screen and (max-width: $break-small) {
   .tx-list-header-wrapper {
-    margin-top: 0.2em;
-    margin-bottom: 0.6em;
+    margin-top: .2em;
+    margin-bottom: .6em;
     // TODO: Resolve Layout Conflicst in Wallet View
     //  - This fixes txlist "transactions" title dispay
     // margin-top: 0.2em;
@@ -30,7 +31,7 @@
 
   .tx-list-header {
     font-size: 16px;
-    margin: 1.8em 1.3em 1.8em 1.3em;
+    margin: 1.8em 1.3em;
   }
 }
 
@@ -40,11 +41,11 @@
   flex: 0 0 1px;
 
   @media screen and (max-width: $break-small) {
-    margin: 0.1em 0em 0.1em 0em;
+    margin: .1em 0;
   }
 
   @media screen and (min-width: $break-large) {
-    margin: 0.1em 1.3em 0.1em 1.3em;
+    margin: .1em 1.3em;
   }
 }
 
@@ -54,23 +55,22 @@
   justify-content: flex-start;
 
   @media screen and (max-width: $break-small) {
-    margin: 0em 1.3em 0.95em 1.3em;
+    margin: 0 1.3em .95em;
   }
 
   @media screen and (min-width: $break-large) {
-    margin: 0em 1.3em 0em 1.3em;
+    margin: 0 1.3em;
   }
 }
 
 .tx-list-date-wrapper {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: auto;
+  flex: 1 1 auto;
 
   @media screen and (max-width: $break-small) {
     margin-top: 6px;
     margin-bottom: 20px;
   }
+
   @media screen and (min-width: $break-large) {
     margin-top: 6px;
   }
@@ -138,4 +138,4 @@
   .tx-list-fiat-value {
     font-size: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index e1b37cb1f..36f0e1025 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -1,10 +1,9 @@
 $wallet-balance-bg: $gallery;
 $wallet-balance-breakpoint: 890px;
-$wallet-balance-breakpoint-range:
-  "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
 
 .wallet-balance-wrapper {
-  flex: 0 0 80px
+  flex: 0 0 80px;
 }
 
 .wallet-balance {
@@ -37,7 +36,7 @@ $wallet-balance-breakpoint-range:
     }
 
     .fiat-amount {
-      margin-top: 0.25%;
+      margin-top: .25%;
       font-size: 105%;
     }
 
@@ -64,4 +63,4 @@ $wallet-balance-breakpoint-range:
 
 .wallet-balance-wrapper-active {
   background: $wallet-balance-bg;
-}
\ No newline at end of file
+}