From a0a956d646d23891082801e560fac2149b14dca7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:02:31 -0700 Subject: Move generic button components and body styles to components and generic, respectively --- ui/app/css/itcss/tools/utilities.scss | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 ui/app/css/itcss/tools/utilities.scss (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss new file mode 100644 index 000000000..c45cb9f02 --- /dev/null +++ b/ui/app/css/itcss/tools/utilities.scss @@ -0,0 +1,30 @@ +/* + Utility Classes + */ +.full-size { + height: 100%; + width: 100%; +} + +.full-width { + width: 100%; +} + +.full-height { + height: 100%; +} + +.full-flex-height { + display: flex; + flex: 1 1 auto; + flex-direction: column; +} + +/* + Misc + */ + +// Move into component-level contextual 'active' state later +.active { + color: #909090; +} -- cgit From d46a79df25afa0973f19210048b929fa5ba76117 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:24:06 -0700 Subject: Organize app components scss --- ui/app/css/itcss/tools/utilities.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index c45cb9f02..09fbc8fc0 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -25,6 +25,18 @@ */ // Move into component-level contextual 'active' state later +.letter-spacey { + letter-spacing: 0.1em; +} + .active { color: #909090; } + +.check { + margin-left: 7px; + color: #F7861C; + flex: 1 0 auto; + display: flex; + justify-content: flex-end; +} -- cgit From 966b25573b04cc9562ba7eb5d345cf48789ddfd9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 14:03:44 -0700 Subject: Move remaining debug, fonts, reset, and transitions into inverted triangle --- ui/app/css/itcss/tools/utilities.scss | 275 ++++++++++++++++++++++++++++++++++ 1 file changed, 275 insertions(+) (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 09fbc8fc0..5e26ede64 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -1,6 +1,19 @@ /* Utility Classes */ + +/* color */ + +.color-orange { + color: #F7861C; // TODO: move to settings/variables +} + +.color-forest { + color: #0A5448; // TODO: move to settings/variables +} + +/* lib */ + .full-size { height: 100%; width: 100%; @@ -20,6 +33,268 @@ flex-direction: column; } +.full-width { + width: 100%; +} + +.full-height { + height: 100%; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +.space-around { + justify-content: space-around; +} + +.flex-column-bottom { + display: flex; + flex-direction: column-reverse; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.flex-space-between { + justify-content: space-between; +} + +.flex-space-around { + justify-content: space-around; +} + +.flex-right { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.flex-left { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.flex-fixed { + flex: none; +} + +.flex-basis-auto { + flex-basis: auto; +} + +.flex-grow { + flex: 1 1 auto; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +.flex-justify-center { + justify-content: center; +} + +.flex-align-center { + align-items: center; +} + +.flex-self-end { + align-self: flex-end; +} + +.flex-self-stretch { + align-self: stretch; +} + +.flex-vertical { + flex-direction: column; +} + +.z-bump { + z-index: 1; +} + +.select-none { + cursor: inherit; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.pointer { + cursor: pointer; +} +.cursor-pointer { + cursor: pointer; + transform-origin: center center; + transition: transform 50ms ease-in-out; +} +.cursor-pointer:hover { + transform: scale(1.1); +} +.cursor-pointer:active { + transform: scale(0.95); +} + +.cursor-disabled { + cursor: not-allowed; +} + +.margin-bottom-sml { + margin-bottom: 20px; +} + +.margin-bottom-med { + margin-bottom: 40px; +} + +.margin-right-left { + margin: 0 20px; +} + +.bold { + font-weight: bold; +} + +.text-transform-uppercase { + text-transform: uppercase; +} + +.font-small { + font-size: 12px; +} + +.font-medium { + font-size: 1.2em; +} + +hr.horizontal-line { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +.hover-white:hover { + background: white; +} + +.red-dot { + background: #E91550; + color: white; + border-radius: 10px; +} + +.diamond { + transform: rotate(45deg); + background: #038789; +} + +.hollow-diamond { + transform: rotate(45deg); + border: 3px solid #690496; +} + +.golden-square { + background: #EBB33F; +} + +.pending-dot { + background: red; + left: 14px; + top: 14px; + color: white; + border-radius: 10px; + height: 20px; + min-width: 20px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + z-index: 1; +} + +.keyring-label { + z-index: 1; + font-size: 11px; + background: rgba(255,0,0,0.8); + bottom: -47px; + color: white; + border-radius: 10px; + height: 20px; + min-width: 20px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; +} + +.ether-balance { + display: flex; + align-items: center; +} + +.tabSection { + min-width: 350px; +} + +.menu-icon { + display: inline-block; + height: 9px; + min-width: 9px; + margin: 13px; +} +.ether-icon { + background: rgb(0, 163, 68); + border-radius: 20px; +} +.testnet-icon { + background: #2465E1; +} + +.drop-menu-item { + display: flex; + align-items: center; +} + +.invisible { + visibility: hidden; +} + +.one-line-concat { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.critical-error { + text-align: center; + margin-top: 20px; + color: red; +} + + /* Misc */ -- cgit From 8a39941d9a4c5b6fd4a3715394fec10c400c0f34 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 23:21:39 -0700 Subject: Cleanup SCSS and improve organization of color vars --- ui/app/css/itcss/tools/utilities.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/tools/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; } -- cgit 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/tools/utilities.scss | 46 ++++++++++++++++------------------- 1 file changed, 21 insertions(+), 25 deletions(-) (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 49d6dcf9c..b9c99219b 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -5,11 +5,11 @@ /* color */ .color-orange { - color: #F7861C; // TODO: move to settings/variables + color: #f7861c; // TODO: move to settings/variables } .color-forest { - color: #0A5448; // TODO: move to settings/variables + color: #0a5448; // TODO: move to settings/variables } /* lib */ @@ -23,20 +23,12 @@ width: 100%; } -.full-height { - height: 100%; -} - .full-flex-height { display: flex; flex: 1 1 auto; flex-direction: column; } -.full-width { - width: 100%; -} - .full-height { height: 100%; } @@ -141,16 +133,19 @@ .pointer { cursor: pointer; } + .cursor-pointer { cursor: pointer; transform-origin: center center; transition: transform 50ms ease-in-out; } + .cursor-pointer:hover { transform: scale(1.1); } + .cursor-pointer:active { - transform: scale(0.95); + transform: scale(.95); } .cursor-disabled { @@ -170,7 +165,7 @@ } .bold { - font-weight: bold; + font-weight: 700; } .text-transform-uppercase { @@ -195,12 +190,12 @@ hr.horizontal-line { } .hover-white:hover { - background: white; + background: $white; } .red-dot { - background: #E91550; - color: white; + background: #e91550; + color: $white; border-radius: 10px; } @@ -215,14 +210,14 @@ hr.horizontal-line { } .golden-square { - background: #EBB33F; + background: #ebb33f; } .pending-dot { - background: red; + background: $red; left: 14px; top: 14px; - color: white; + color: $white; border-radius: 10px; height: 20px; min-width: 20px; @@ -237,9 +232,9 @@ hr.horizontal-line { .keyring-label { z-index: 1; font-size: 11px; - background: rgba(255,0,0,0.8); + background: rgba(255, 0, 0, .8); bottom: -47px; - color: white; + color: $white; border-radius: 10px; height: 20px; min-width: 20px; @@ -270,8 +265,9 @@ hr.horizontal-line { background: rgb(0, 163, 68); border-radius: 20px; } + .testnet-icon { - background: #2465E1; + background: #2465e1; } .drop-menu-item { @@ -292,7 +288,7 @@ hr.horizontal-line { .critical-error { text-align: center; margin-top: 20px; - color: red; + color: $red; } /* @@ -301,7 +297,7 @@ hr.horizontal-line { // TODO: move into component-level contextual 'active' state .letter-spacey { - letter-spacing: 0.1em; + letter-spacing: .1em; } .active { @@ -310,8 +306,8 @@ hr.horizontal-line { .check { margin-left: 7px; - color: #F7861C; + color: #f7861c; flex: 1 0 auto; display: flex; justify-content: flex-end; -} \ No newline at end of file +} -- cgit From c2ccd6e90ed15245ed4e9e2965f2f5c9f293f115 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 27 Sep 2017 21:45:27 -0230 Subject: Makes styling fixes to account dropdown. --- ui/app/css/itcss/tools/utilities.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 9f1caa732..4a55303b9 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -239,9 +239,8 @@ hr.horizontal-line { height: 20px; min-width: 20px; position: absolute; - display: flex; - align-items: center; - justify-content: center; + top: 0px; + right: 5px; padding: 4px; } -- cgit From 085551b7e6b7dab21c21b99a40c4f79c413799d5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 17 Oct 2017 22:36:53 -0700 Subject: New Account modal --- ui/app/css/itcss/tools/utilities.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index 4a55303b9..ca9fd0d9c 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -231,17 +231,15 @@ hr.horizontal-line { .keyring-label { z-index: 1; - font-size: 11px; - background: rgba(255, 0, 0, .8); - bottom: -47px; - color: $white; + font-size: 8px; + line-height: 8px; + background: rgba(255, 255, 255, 0.4); + color: #fff; border-radius: 10px; - height: 20px; - min-width: 20px; - position: absolute; - top: 0px; - right: 5px; padding: 4px; + width: 41px; + text-align: center; + height: 15px; } .ether-balance { -- cgit From 6d3f261b2f923782279be5e2ce05e8d6cc558a9e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 23 Oct 2017 23:11:47 -0700 Subject: Change LOOSE label to IMPORTED --- ui/app/css/itcss/tools/utilities.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/css/itcss/tools/utilities.scss') diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index ca9fd0d9c..ee867640d 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -237,7 +237,6 @@ hr.horizontal-line { color: #fff; border-radius: 10px; padding: 4px; - width: 41px; text-align: center; height: 15px; } -- cgit