From 5eb3d5d485b17b98b19443d8def2f03dec9b38ef Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 3 Jul 2017 15:39:25 -0700 Subject: Make folder for responsive UI --- ui/app/css/lib.css | 268 ----------------------------------------------------- 1 file changed, 268 deletions(-) delete mode 100644 ui/app/css/lib.css (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css deleted file mode 100644 index 910a24ee2..000000000 --- a/ui/app/css/lib.css +++ /dev/null @@ -1,268 +0,0 @@ -/* color */ - -.color-orange { - color: #F7861C; -} - -.color-forest { - color: #0A5448; -} - -/* lib */ - -.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; -} - -.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; -} -- cgit From 86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 20 Jul 2017 12:38:38 -0700 Subject: Move responsive ui into its own folder for easier merges --- ui/app/css/lib.css | 268 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 268 insertions(+) create mode 100644 ui/app/css/lib.css (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css new file mode 100644 index 000000000..910a24ee2 --- /dev/null +++ b/ui/app/css/lib.css @@ -0,0 +1,268 @@ +/* color */ + +.color-orange { + color: #F7861C; +} + +.color-forest { + color: #0A5448; +} + +/* lib */ + +.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; +} + +.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; +} -- cgit From a22adec66fd0c541eb350ea424a6b00d179eedaf Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 24 Jul 2017 17:04:13 -0700 Subject: Replace ui with responsive-ui --- ui/app/css/lib.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 910a24ee2..b0ca958a2 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -232,6 +232,10 @@ hr.horizontal-line { align-items: center; } +.tabSection { + min-width: 350px; +} + .menu-icon { display: inline-block; height: 9px; -- cgit From 0ea6749dbc923a6e796b1de4bbd301d931739b9d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 25 Jul 2017 18:22:31 -0700 Subject: Lots of flex rearrangement on account detail view Includes removal of ReactCssTransitionGroup for a simpler UI refactor. --- ui/app/css/lib.css | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index b0ca958a2..98570859a 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -270,3 +270,4 @@ hr.horizontal-line { margin-top: 20px; color: red; } + -- cgit From 086441e41c3a06cb062a475b59b542aa4ea6f185 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 3 Aug 2017 18:50:29 -0700 Subject: Increase size of network dropdown --- ui/app/css/lib.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 98570859a..6fff4f56a 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -238,10 +238,15 @@ hr.horizontal-line { .menu-icon { display: inline-block; - height: 9px; - min-width: 9px; + height: 12px; + min-width: 12px; margin: 13px; } + +i.fa.fa-question-circle.fa-lg.menu-icon { + font-size: 18px; +} + .ether-icon { background: rgb(0, 163, 68); border-radius: 20px; -- cgit From 0cd72db2d2aa575420befa687156cf2bd271b6dd Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 4 Aug 2017 12:57:16 -0700 Subject: Adds early breakpoint from @frankiebee 's + @kumavis 's CR --- ui/app/css/lib.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 6fff4f56a..e7b3bab05 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -276,3 +276,27 @@ i.fa.fa-question-circle.fa-lg.menu-icon { color: red; } +// Account Subsection + Tab Section Breakpoints Hack: +// Resolves issue from @frankiebee in: +// https://github.com/MetaMask/metamask-extension/pull/1835 +// Please remove this when integrating new designs +@media screen and (min-width: 575px) and (max-width: 800px) { + .account-data-subsection { + flex: 0 0 auto !important; // needs to remove default flex settings + width: 40%; + margin-left: 10px !important; + margin-right: 10px !important; + } + + .tabSection { + flex: 0 0 auto !important; // needs to remove default flex settings + width: 49%; + min-width: 305px; // min-width needs to be low for an early break + margin-left: 10px !important; + margin-right: 10px !important; + } + + .name-label { + width: 80%; // repositions dropdown after early break + } +} -- cgit From 8cc3ae5988d652b73217e80df93a685d7e5a8422 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 4 Aug 2017 13:19:06 -0700 Subject: Cleanup breakpoint css + comment on hackiness --- ui/app/css/lib.css | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'ui/app/css/lib.css') diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index e7b3bab05..81647d1c1 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -276,27 +276,30 @@ i.fa.fa-question-circle.fa-lg.menu-icon { color: red; } -// Account Subsection + Tab Section Breakpoints Hack: -// Resolves issue from @frankiebee in: -// https://github.com/MetaMask/metamask-extension/pull/1835 -// Please remove this when integrating new designs +/* + Hacky breakpoint fix for account + tab sections + Resolves issue from @frankiebee in + https://github.com/MetaMask/metamask-extension/pull/1835 + Please remove this when integrating new designs + */ + @media screen and (min-width: 575px) and (max-width: 800px) { .account-data-subsection { - flex: 0 0 auto !important; // needs to remove default flex settings - width: 40%; - margin-left: 10px !important; + flex: 0 0 auto !important; // reset flex + margin-left: 10px !important; // create additional horizontal space margin-right: 10px !important; + width: 40%; } .tabSection { - flex: 0 0 auto !important; // needs to remove default flex settings - width: 49%; - min-width: 305px; // min-width needs to be low for an early break + flex: 0 0 auto !important; margin-left: 10px !important; margin-right: 10px !important; + min-width: 285px; + width: 49%; } .name-label { - width: 80%; // repositions dropdown after early break + width: 80%; } } -- cgit