From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 10:31:27 +0200 Subject: Lint and cleanup all scss --- ui/app/css/itcss/components/buttons.scss | 20 ++-- ui/app/css/itcss/components/header.scss | 14 ++- ui/app/css/itcss/components/hero-balance.scss | 11 +- ui/app/css/itcss/components/index.scss | 8 ++ ui/app/css/itcss/components/modal.scss | 16 +-- ui/app/css/itcss/components/network.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 29 ++--- ui/app/css/itcss/components/sections.scss | 124 +++++++++++----------- ui/app/css/itcss/components/transaction-list.scss | 22 ++-- ui/app/css/itcss/components/wallet-balance.scss | 9 +- 10 files changed, 132 insertions(+), 123 deletions(-) (limited to 'ui/app/css/itcss/components') 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 +} -- cgit