From f0a219294d0a3e26a6755bbbf608b96490a397c2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 12:45:21 -0700 Subject: Add inverted triangle css (itcss) folder structure --- ui/app/css/itcss/generic/index.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 ui/app/css/itcss/generic/index.scss (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss new file mode 100644 index 000000000..e69de29bb -- cgit 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/generic/index.scss | 50 +++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index e69de29bb..69da497b1 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -0,0 +1,50 @@ +// Generic styles +* { + box-sizing: border-box; +} + +html, body { + font-family: 'Montserrat Regular', Arial; + color: #4D4D4D; + font-weight: 300; + line-height: 1.4em; + background: #F7F7F7; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +html { + min-height: 500px; +} + +.app-root { + overflow: hidden; + position: relative +} + +.app-primary { + display: flex; +} + +input:focus, textarea:focus { + outline: none; +} + +#app-content { + overflow-x: hidden; + min-width: 357px; + height: 100%; + display: flex; + flex-direction: column; +} + +a { + text-decoration: none; + color: inherit; +} + +a:hover{ + color: #df6b0e; +} -- 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/generic/index.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 69da497b1..0beb63efe 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -48,3 +48,12 @@ a { a:hover{ color: #df6b0e; } + +input.large-input, textarea.large-input { + /*margin-bottom: 24px;*/ + padding: 8px; +} + +input.large-input { + height: 36px; +} -- 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/generic/index.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 0beb63efe..a0ce312cc 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -1,4 +1,9 @@ -// Generic styles +/* + Generic + */ + +@import './reset.scss'; + * { box-sizing: border-box; } -- 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/generic/index.scss | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index a0ce312cc..a1ffa98a3 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -8,12 +8,13 @@ box-sizing: border-box; } -html, body { +html, +body { font-family: 'Montserrat Regular', Arial; - color: #4D4D4D; + color: #4d4d4d; font-weight: 300; line-height: 1.4em; - background: #F7F7F7; + background: #f7f7f7; width: 100%; height: 100%; margin: 0; @@ -26,17 +27,19 @@ html { .app-root { overflow: hidden; - position: relative + position: relative; } .app-primary { display: flex; } -input:focus, textarea:focus { +input:focus, +textarea:focus { outline: none; } +/* stylelint-disable */ #app-content { overflow-x: hidden; min-width: 357px; @@ -44,18 +47,19 @@ input:focus, textarea:focus { display: flex; flex-direction: column; } +/* stylelint-enable */ a { text-decoration: none; color: inherit; } -a:hover{ +a:hover { color: #df6b0e; } -input.large-input, textarea.large-input { - /*margin-bottom: 24px;*/ +input.large-input, +textarea.large-input { padding: 8px; } -- cgit From 35d8671843ff15822488ae39310c8c12818fb1a3 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 09:56:40 -0700 Subject: Add responsive UI to send ether modal --- ui/app/css/itcss/generic/index.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index a1ffa98a3..51b7cf789 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -42,10 +42,13 @@ textarea:focus { /* stylelint-disable */ #app-content { overflow-x: hidden; - min-width: 357px; height: 100%; display: flex; flex-direction: column; + + @media screen and (max-width: $break-small) { + background-color: $white; + } } /* stylelint-enable */ -- cgit From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 12 Oct 2017 18:46:09 -0400 Subject: Various styling fixes --- ui/app/css/itcss/generic/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 51b7cf789..9d55324e3 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -10,7 +10,7 @@ html, body { - font-family: 'Montserrat Regular', Arial; + font-family: Roboto, Arial; color: #4d4d4d; font-weight: 300; line-height: 1.4em; -- cgit From 9db0a32dac81ad071f3c15651ce5fb830d2ddf4a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 6 Feb 2018 21:07:00 -0800 Subject: Update modal header design on send screen (#3196) --- ui/app/css/itcss/generic/index.scss | 114 ++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 9d55324e3..75f823320 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -69,3 +69,117 @@ textarea.large-input { input.large-input { height: 36px; } + +.page-container { + width: 400px; + background-color: $white; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + z-index: 25; + display: flex; + flex-flow: column; + + &__header { + display: flex; + flex-flow: column; + border-bottom: 1px solid $geyser; + padding: 1.6rem 1rem; + flex: 0 0 auto; + } + + &__footer { + display: flex; + flex-flow: row; + justify-content: center; + border-top: 1px solid $geyser; + padding: 1.6rem; + flex: 0 0 auto; + } + + &__footer-button { + width: 165px; + height: 60px; + font-size: 1rem; + text-transform: uppercase; + margin-right: 1rem; + + &:last-of-type { + margin-right: 0; + } + } + + &__title { + color: $tundora; + font-family: Roboto; + font-size: 2rem; + font-weight: 500; + line-height: initial; + } + + &__subtitle { + padding-top: .5rem; + line-height: initial; + font-size: .9rem; + } + + &__tabs { + padding: 0 1.3rem; + display: flex; + } + + &__tab { + min-width: 5rem; + padding: .2rem .8rem .9rem; + color: $dusty-gray; + font-family: Roboto; + font-size: 1.1rem; + line-height: initial; + text-align: center; + cursor: pointer; + border-bottom: none; + margin-right: 1rem; + + &:hover { + color: $black; + } + + &:last-of-type { + margin-right: 0; + } + + &--selected { + color: $curious-blue; + border-bottom: 3px solid $curious-blue; + + &:hover { + color: $curious-blue; + } + } + } +} + +@media screen and (max-width: 250px) { + .page-container { + &__footer { + flex-flow: column-reverse; + } + + &__footer-button { + width: 100%; + margin-bottom: 1rem; + margin-right: 0; + + &:first-of-type { + margin-bottom: 0; + } + } + } +} + +@media screen and (max-width: 575px) { + .page-container { + height: 100%; + width: 100%; + overflow-y: auto; + background-color: $white; + } +} -- cgit From e4c83466befc439f26cdd9c32d130b367bc552a7 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 13 Feb 2018 03:09:15 -0330 Subject: Send screen style updates. (#3234) --- ui/app/css/itcss/generic/index.scss | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/generic/index.scss') diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 75f823320..9b3d7475b 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -82,8 +82,20 @@ input.large-input { display: flex; flex-flow: column; border-bottom: 1px solid $geyser; - padding: 1.6rem 1rem; + padding: 1.15rem 0.95rem; flex: 0 0 auto; + background: $alabaster; + position: relative; + } + + &__header-close::after { + content: '\00D7'; + font-size: 40px; + color: $tundora; + position: absolute; + top: 21.5px; + right: 28.5px; + cursor: pointer; } &__footer { @@ -93,6 +105,11 @@ input.large-input { border-top: 1px solid $geyser; padding: 1.6rem; flex: 0 0 auto; + + .btn-clear, + .btn-cancel { + font-size: 1rem; + } } &__footer-button { @@ -101,6 +118,7 @@ input.large-input { font-size: 1rem; text-transform: uppercase; margin-right: 1rem; + border-radius: 2px; &:last-of-type { margin-right: 0; @@ -108,7 +126,7 @@ input.large-input { } &__title { - color: $tundora; + color: $black; font-family: Roboto; font-size: 2rem; font-weight: 500; @@ -119,6 +137,7 @@ input.large-input { padding-top: .5rem; line-height: initial; font-size: .9rem; + color: $gray; } &__tabs { -- cgit