aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css
diff options
context:
space:
mode:
authorBruno Barbieri <bruno.barbieri@consensys.net>2018-07-20 03:00:59 +0800
committerGitHub <noreply@github.com>2018-07-20 03:00:59 +0800
commit9be2248d7accfc51fd21f31b16d08c18a468c0f7 (patch)
treed52384c0b0803e68188fe310a665cec2890b5680 /ui/app/css
parent3784a7e2c852974315cfe17a68673938cf24a7fa (diff)
parentdf19163bf9611d75aaf8ea6da52651dbba9a5e00 (diff)
downloadtangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.tar
tangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.tar.gz
tangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.tar.bz2
tangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.tar.lz
tangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.tar.xz
tangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.tar.zst
tangerine-wallet-browser-9be2248d7accfc51fd21f31b16d08c18a468c0f7.zip
Merge pull request #4625 from MetaMask/initial-trezor-support
Initial trezor support
Diffstat (limited to 'ui/app/css')
-rw-r--r--ui/app/css/itcss/components/account-menu.scss18
-rw-r--r--ui/app/css/itcss/components/alert.scss57
-rw-r--r--ui/app/css/itcss/components/index.scss2
-rw-r--r--ui/app/css/itcss/components/new-account.scss297
4 files changed, 365 insertions, 9 deletions
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 96fba890c..b14753e23 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -72,6 +72,7 @@
background-color: $dusty-gray;
color: $black;
font-weight: normal;
+ letter-spacing: .5px;
}
}
@@ -84,6 +85,23 @@
@media screen and (max-width: 575px) {
padding: 12px 14px;
}
+
+ .remove-account-icon {
+ width: 15px;
+ margin-left: 10px;
+ height: 15px;
+ }
+
+ &:hover {
+ .remove-account-icon::after {
+ content: '\00D7';
+ font-size: 25px;
+ color: $white;
+ cursor: pointer;
+ position: absolute;
+ margin-top: -5px;
+ }
+ }
}
&__account-info {
diff --git a/ui/app/css/itcss/components/alert.scss b/ui/app/css/itcss/components/alert.scss
new file mode 100644
index 000000000..930fc3f54
--- /dev/null
+++ b/ui/app/css/itcss/components/alert.scss
@@ -0,0 +1,57 @@
+.global-alert {
+ position: relative;
+ width: 100%;
+ background-color: #33A4E7;
+
+ .msg {
+ width: 100%;
+ display: block;
+ color: white;
+ font-size: 12px;
+ text-align: center;
+ }
+}
+
+.global-alert.hidden {
+ animation: alertHidden .5s ease forwards;
+}
+
+.global-alert.visible {
+ animation: alert .5s ease forwards;
+}
+
+/* Animation */
+@keyframes alert {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ padding: 0px;
+ line-height: 12px;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+
+ 100% {
+ top: 0;
+ padding: 8px;
+ line-height: 12px;
+ }
+}
+
+@keyframes alertHidden {
+ 0% {
+ top: 0;
+ opacity: 1;
+ padding: 8px;
+ line-height: 12px;
+ }
+
+ 100% {
+ opacity: 0;
+ top: -50px;
+ padding: 0px;
+ line-height: 0px;
+ }
+}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 5be040906..96ad5fe64 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -8,6 +8,8 @@
@import './modal.scss';
+@import './alert.scss';
+
@import './newui-sections.scss';
@import './account-dropdown.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 293579058..b12afb124 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -1,9 +1,8 @@
.new-account {
- width: 376px;
+ width: 375px;
background-color: #FFFFFF;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
z-index: 25;
- padding-bottom: 31px;
&__header {
display: flex;
@@ -28,7 +27,6 @@
&__tab {
height: 54px;
- width: 75px;
padding: 15px 10px;
color: $dusty-gray;
font-family: Roboto;
@@ -38,10 +36,6 @@
cursor: pointer;
}
- &__tab:first-of-type {
- margin-right: 20px;
- }
-
&__tab:hover {
color: $black;
border-bottom: none;
@@ -69,7 +63,7 @@
display: flex;
flex-flow: column;
align-items: center;
- padding: 0 30px;
+ padding: 0 30px 30px;
&__select-section {
display: flex;
@@ -158,11 +152,296 @@
}
}
+.hw-tutorial {
+ width: 375px;
+ border-top: 1px solid #D2D8DD;
+ border-bottom: 1px solid #D2D8DD;
+ overflow: visible;
+ display: block;
+ padding: 15px 30px;
+}
+
+.hw-connect {
+ &__header {
+ &__title {
+ margin-top: 5px;
+ margin-bottom: 15px;
+ font-size: 22px;
+ text-align: center;
+ }
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ margin-top: 10px;
+ margin-bottom: 0px;
+ }
+ }
+
+ &__learn-more {
+ margin-top: 15px;
+ font-size: 14px;
+ color: #5B5D67;
+ line-height: 19px;
+ text-align: center;
+ cursor: pointer;
+
+ &__arrow {
+ transform: rotate(90deg);
+ display: block;
+ text-align: center;
+ height: 30px;
+ margin: 0px auto 10px;
+ }
+ }
+
+ &__title {
+ padding-top: 10px;
+ font-weight: 400;
+ font-size: 18px;
+ }
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ margin-top: 10px;
+ margin-bottom: 15px;
+ }
+
+ &__link {
+ color: #2f9ae0;
+ }
+
+ &__footer {
+ width: 100%;
+
+ &__title {
+ padding-top: 15px;
+ padding-bottom: 12px;
+ font-weight: 400;
+ font-size: 18px;
+ text-align: center;
+ }
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ margin-top: 12px;
+ margin-bottom: 27px;
+ }
+
+ &__link {
+ color: #2f9ae0;
+ margin-left: 5px;
+ }
+ }
+
+ &__get-trezor {
+ width: 100%;
+ padding-bottom: 20px;
+ padding-top: 20px;
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ }
+
+ &__link {
+ font-size: 14px;
+ text-align: center;
+ color: #2f9ae0;
+ cursor: pointer;
+ }
+ }
+
+ &__step-asset {
+ margin: 0px auto 20px;
+ display: flex;
+ }
+}
+
+.hw-account-list {
+ display: flex;
+ flex: 1;
+ flex-flow: column;
+ width: 100%;
+
+ &__title_wrapper {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ }
+
+ &__title {
+ margin-bottom: 23px;
+ align-self: flex-start;
+ color: $scorpion;
+ font-family: Roboto;
+ font-size: 16px;
+ line-height: 21px;
+ font-weight: bold;
+ display: flex;
+ flex: 1;
+ }
+
+ &__device {
+ margin-bottom: 23px;
+ align-self: flex-end;
+ color: $scorpion;
+ font-family: Roboto;
+ font-size: 16px;
+ line-height: 21px;
+ font-weight: normal;
+ display: flex;
+ }
+
+ &__item {
+ font-size: 15px;
+ flex-direction: row;
+ display: flex;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ &__item:nth-of-type(even) {
+ background-color: #fbfbfb;
+ }
+
+ &__item:nth-of-type(odd) {
+ background: rgba(0, 0, 0, 0.03);
+ }
+
+ &__item:hover {
+ background-color: rgba(0, 0, 0, 0.06);
+ }
+
+ &__item__index {
+ display: flex;
+ width: 24px;
+ }
+
+ &__item__radio {
+ display: flex;
+ flex: 1;
+
+ input {
+ padding: 10px;
+ margin-top: 13px;
+ }
+ }
+
+ &__item__label {
+ display: flex;
+ flex: 1;
+ padding-left: 10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+
+ &__item__balance {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ }
+
+ &__item__link {
+ display: flex;
+ margin-top: 13px;
+ }
+
+ &__item__link img {
+ width: 15px;
+ height: 15px;
+ }
+}
+
+.hw-list-pagination {
+ display: flex;
+ align-self: flex-end;
+ margin-top: 10px;
+
+ &__button {
+ height: 19px;
+ display: flex;
+ color: #33a4e7;
+ font-size: 14px;
+ line-height: 19px;
+ border: none;
+ min-width: 46px;
+ margin-right: 0px;
+ margin-left: 16px;
+ padding: 0px;
+ text-transform: uppercase;
+ font-family: Roboto;
+ }
+}
+
+.new-account-connect-form {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ padding: 15px 30px 0;
+ height: 710px;
+ overflow: auto;
+
+ &.unsupported-browser {
+ height: 210px;
+ }
+
+ &.account-list {
+ height: auto;
+ }
+
+ &__buttons {
+ margin-top: 39px;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ &__button {
+ width: 150px;
+ min-width: initial;
+ }
+
+ .btn-primary {
+ background-color: #259DE5;
+ color: #FFFFFF;
+ border: none;
+ width: 100%;
+ min-height: 54px;
+ font-weight: 300;
+ font-size: 14px;
+ }
+
+ &__button.unlock {
+ width: 50%;
+ }
+
+ &__button.btn-primary--disabled {
+ cursor: not-allowed;
+ opacity: .5;
+ }
+}
+
+.hw-forget-device-container {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ padding: 22px;
+
+ a {
+ color: #2f9ae0;
+ font-size: 14px;
+ cursor: pointer;
+ }
+}
+
.new-account-create-form {
display: flex;
flex-flow: column;
align-items: center;
- padding: 30px 30px 0;
+ padding: 30px;
&__input-label {
color: $scorpion;