From 8a39941d9a4c5b6fd4a3715394fec10c400c0f34 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 23:21:39 -0700 Subject: [PATCH] Cleanup SCSS and improve organization of color vars --- ui/app/css/itcss/components/hero-balance.scss | 12 ++----- ui/app/css/itcss/components/identicon.scss | 7 ----- ui/app/css/itcss/components/index.scss | 1 - .../css/itcss/components/newui-sections.scss | 13 ++++---- ui/app/css/itcss/components/sections.scss | 31 ++++++++----------- ui/app/css/itcss/generic/reset.scss | 1 + ui/app/css/itcss/settings/variables.scss | 31 +++++++++++++------ ui/app/css/itcss/tools/index.scss | 1 - ui/app/css/itcss/tools/utilities.scss | 2 +- 9 files changed, 45 insertions(+), 54 deletions(-) delete mode 100644 ui/app/css/itcss/components/identicon.scss diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 463a124fb..72333fb47 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -19,7 +19,6 @@ } .balance-container { - display: flex; margin: 0; justify-content: flex-start; @@ -33,7 +32,6 @@ flex-direction: row; flex-grow: 3; } - } .balance-display { @@ -66,17 +64,14 @@ margin-top: 0.25%; font-size: 105%; } - } - } .balance-icon { border-radius: 25px; width: 45px; height: 45px; - // TODO: colors - border: 1px solid #DEDEDE; + border: 1px solid $alto; } .hero-balance-buttons { @@ -106,9 +101,6 @@ min-height: 28px; font-size: .7em; } - } - } - -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/identicon.scss b/ui/app/css/itcss/components/identicon.scss deleted file mode 100644 index 2f2de6ed8..000000000 --- a/ui/app/css/itcss/components/identicon.scss +++ /dev/null @@ -1,7 +0,0 @@ -.identicon { - height: 46px; - width: 46px; - background-size: cover; - border-radius: 100%; - border: 3px solid gray; -} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index e5ba0babf..de248de79 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,7 +1,6 @@ @import './buttons.scss'; @import './header.scss'; @import './footer.scss'; -@import './identicon.scss'; @import './network.scss'; @import './modal.scss'; @import './newui-sections.scss'; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index d5ea8be1b..a9167dfb8 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -2,6 +2,10 @@ NewUI Container Elements */ +// Component Colors +$tx-view-bg: $white; +$wallet-view-bg: $wild-sand; + // Main container .main-container { position: absolute; @@ -13,20 +17,18 @@ overflow-y: scroll; } - // tx view .tx-view { flex: 63.5 0 66.5%; - background: $white; // TODO: add to resuable colors + background: $tx-view-bg; } - // wallet view .wallet-view { flex: 33.5 0 33.5%; - background: $wild-sand, + background: $wallet-view-bg, } .account-options-menu { @@ -35,8 +37,6 @@ margin: 5% 7%; } - - .wallet-view.sidebar { flex: 1 0 230px; background: rgb(250, 250, 250); @@ -136,5 +136,4 @@ @media screen and (max-width: 575px) { text-align: center; } - } diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 965abbe28..68f81d143 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -3,12 +3,7 @@ App Sections TODO: Move into separate files. */ -/* -debug / dev -*/ - /* initialize */ - textarea.twelve-word-phrase { padding: 12px; width: 300px; @@ -57,6 +52,7 @@ textarea.twelve-word-phrase { opacity: 0.0; transition: opacity 400ms ease-in, transform 400ms ease-in; } + .lock.unlocked { transform: scale(1); opacity: 1; @@ -67,15 +63,18 @@ textarea.twelve-word-phrase { transform: scaleX(1) translateX(0); transition: transform 250ms ease-in; } + .lock.unlocked .lock-top { transform: scaleX(-1) translateX(-12px); transition: transform 250ms ease-in; } + .lock.unlocked:hover { border-radius: 4px; background: #e5e5e5; border: 1px solid #b1b1b1; } + .lock.unlocked:active { background: #c3c3c3; } @@ -105,28 +104,35 @@ textarea.twelve-word-phrase { .editable-label{ display: flex; } + /* Webkit */ + .unlock-screen input::-webkit-input-placeholder { text-align: center; font-size: 1.2em; } + /* Firefox 18- */ + .unlock-screen input:-moz-placeholder { text-align: center; font-size: 1.2em; } + /* Firefox 19+ */ + .unlock-screen input::-moz-placeholder { text-align: center; font-size: 1.2em; } + /* IE */ + .unlock-screen input:-ms-input-placeholder { text-align: center; font-size: 1.2em; } - /* accounts */ .accounts-section { @@ -344,18 +350,6 @@ textarea.twelve-word-phrase { color: rgba(247, 134, 28, 1); } -.radio-titles-subtext { - -} - -.selected-exchange { - -} - -.buy-radio { - -} - .eth-warning{ transition: opacity 400ms ease-in, transform 400ms ease-in; } @@ -380,6 +374,7 @@ textarea.twelve-word-phrase { border-radius: 2px; } + .input-container:hover .buy-inputs{ box-sizing: inherit; border: solid; diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss index fef74825d..094893ae3 100644 --- a/ui/app/css/itcss/generic/reset.scss +++ b/ui/app/css/itcss/generic/reset.scss @@ -23,6 +23,7 @@ time, mark, audio, video { font: inherit; vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index bf858f6a3..9bd10cb4e 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -2,7 +2,11 @@ Variables */ -// Colors + + +/* + Colors + */ $white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)' $rajah: #F5C26D; // formerly 'light orange (button shades)' $buttercup: #F5A623; // formerly 'dark orange (text)' @@ -13,20 +17,29 @@ $shark: #22232C; $wild-sand: #F6F6F6; $white: #FFFFFF; $dusty-gray: #9B9B9B; +$alto: #DEDEDE; -// Z Indicies - Planned +/* + Z-Indicies + */ + +// Planned $dropdown-z: 30; $container-z: 15; $header-z: 12; -// Z Indicies - Current -// app - 11 -// hex/bn as decimal input - 1 - remove? -// dropdown - 11 -// loading - 10 - higher? -// mascot - 0 - remove? +/* + Z Indicies - Current + app - 11 + hex/bn as decimal input - 1 - remove? + dropdown - 11 + loading - 10 - higher? + mascot - 0 - remove? + */ -// Responsive Breakpoints +/* + Responsive Breakpoints + */ $break-small: 575px; $break-midpoint: 780px; $break-large: 576px; diff --git a/ui/app/css/itcss/tools/index.scss b/ui/app/css/itcss/tools/index.scss index 3634c839b..2236729e8 100644 --- a/ui/app/css/itcss/tools/index.scss +++ b/ui/app/css/itcss/tools/index.scss @@ -1,2 +1 @@ @import './utilities.scss'; - diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 2b7ffcb04..49d6dcf9c 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -299,7 +299,7 @@ hr.horizontal-line { Misc */ -// Move into component-level contextual 'active' state later +// TODO: move into component-level contextual 'active' state .letter-spacey { letter-spacing: 0.1em; }