aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css
diff options
context:
space:
mode:
authorsdtsui <szehungdanieltsui@gmail.com>2017-08-11 14:21:39 +0800
committersdtsui <szehungdanieltsui@gmail.com>2017-08-11 14:21:39 +0800
commit8a39941d9a4c5b6fd4a3715394fec10c400c0f34 (patch)
tree3e57976f8120484b9ac3f0d30e6905e20c1c6349 /ui/app/css
parent58b61eb1fc2d4add59f6225ddf4df09fdfa5b92b (diff)
downloadtangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.tar
tangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.tar.gz
tangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.tar.bz2
tangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.tar.lz
tangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.tar.xz
tangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.tar.zst
tangerine-wallet-browser-8a39941d9a4c5b6fd4a3715394fec10c400c0f34.zip
Cleanup SCSS and improve organization of color vars
Diffstat (limited to 'ui/app/css')
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss12
-rw-r--r--ui/app/css/itcss/components/identicon.scss7
-rw-r--r--ui/app/css/itcss/components/index.scss1
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss13
-rw-r--r--ui/app/css/itcss/components/sections.scss31
-rw-r--r--ui/app/css/itcss/generic/reset.scss1
-rw-r--r--ui/app/css/itcss/settings/variables.scss31
-rw-r--r--ui/app/css/itcss/tools/index.scss1
-rw-r--r--ui/app/css/itcss/tools/utilities.scss2
9 files changed, 45 insertions, 54 deletions
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;
}