aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css
diff options
context:
space:
mode:
authorkumavis <kumavis@users.noreply.github.com>2018-05-23 03:53:59 +0800
committerGitHub <noreply@github.com>2018-05-23 03:53:59 +0800
commitb5bbfd32648a7deb0fd8b25c12825697e522adf6 (patch)
treedab36d56c4eaf230512b7430ddb3baf75356eab0 /ui/app/css
parenta8e0d38cfbb1c01705b56288511c2a8ce392e25d (diff)
parent8245bf010e22dda3e00c044429e3f5b880691fcb (diff)
downloadtangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar
tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.gz
tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.bz2
tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.lz
tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.xz
tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.zst
tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.zip
Merge pull request #4308 from MetaMask/i4232-addtoken
Update designs for Add Token screen
Diffstat (limited to 'ui/app/css')
-rw-r--r--ui/app/css/itcss/components/add-token.scss461
-rw-r--r--ui/app/css/itcss/components/buttons.scss5
-rw-r--r--ui/app/css/itcss/components/index.scss4
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss2
-rw-r--r--ui/app/css/itcss/components/pages/index.scss2
-rw-r--r--ui/app/css/itcss/generic/index.scss45
6 files changed, 29 insertions, 490 deletions
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
deleted file mode 100644
index a3ea0d85b..000000000
--- a/ui/app/css/itcss/components/add-token.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-.add-token {
- width: 498px;
- max-height: 805px;
- display: flex;
- flex-flow: column nowrap;
- position: relative;
- z-index: 12;
- font-family: 'Roboto';
- background: white;
- border-radius: 8px;
- box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
-
- &__wrapper {
- background-color: $white;
- display: flex;
- flex-flow: column nowrap;
- align-items: center;
- flex: 0 0 auto;
- }
-
- &__header {
- display: flex;
- flex-flow: column nowrap;
- padding: 20px 20px 0px;
- border-bottom: 1px solid $geyser;
- flex: 0 0 auto;
-
- &__cancel {
- color: $dodger-blue;
- display: flex;
- align-items: center;
-
- span {
- font-family: Roboto;
- font-size: 16px;
- font-weight: 400;
- line-height: 21px;
- margin-left: 8px;
- cursor:pointer;
- }
- }
-
- &__title {
- color: $tundora;
- font-size: 32px;
- font-weight: 500;
- margin-top: 4px;
- }
-
- &__subtitle {
- font-weight: 400;
- margin-top: 15px;
- margin-bottom: 21px;
- }
-
- &__tabs {
- display: flex;
-
- &__tab {
- height: 54px;
- padding: 15px 10px;
- color: $dusty-gray;
- font-family: Roboto;
- font-size: 18px;
- font-weight: 400;
- line-height: 24px;
- text-align: center;
- }
-
- &__tab:first-of-type {
- margin-right: 20px;
- }
-
- &__unselected:hover {
- color: $black;
- border-bottom: none;
- cursor: pointer;
- }
-
- &__selected {
- color: $curious-blue;
- border-bottom: 3px solid $curious-blue;
- }
- }
- }
-
- &__info-box {
- height: 96px;
- margin: 20px 20px 0px;
- border-radius: 4px;
- background-color: $alabaster;
- position: relative;
- padding-left: 18px;
- display: flex;
- flex-flow: column;
-
- &__close::after {
- content: '\00D7';
- font-size: 29px;
- font-weight: 200;
- color: $dusty-gray;
- position: absolute;
- right: 17px;
- cursor: pointer;
- }
-
- &__title {
- color: $mid-gray;
- font-family: Roboto;
- font-size: 14px;
- font-weight: 400;
- margin-top: 15px;
- margin-bottom: 9px;
- }
-
- &__copy,
- &__copy--blue {
- color: $mid-gray;
- font-family: Roboto;
- font-size: 12px;
- font-weight: 400;
- line-height: 18px;
- }
-
- &__copy--blue {
- color: $curious-blue;
- }
- }
-
- &__description {
- text-align: center;
- }
-
- &__description + &__description {
- margin-top: 24px;
- }
-
- &__confirmation-description {
- font-weight: 400;
- margin: 20px 0 40px 0;
- }
-
- &__content-container {
- width: 100%;
- }
-
- &__input-container {
- display: flex;
- position: relative;
- }
-
- &__search-input-error-message {
- position: absolute;
- bottom: -10px;
- left: 22px;
- font-size: 12px;
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- color: $red;
- }
-
- &__input,
- &__add-custom-input {
- height: 54px;
- padding: 0px 20px;
- border: 1px solid $geyser;
- border-radius: 4px;
- margin: 22px 24px;
- position: relative;
- flex: 1 0 auto;
- color: $scorpion;
- font-family: Roboto;
- font-size: 16px;
-
- &::placeholder {
- color: $scorpion;
- font-family: Roboto;
- font-size: 16px;
- line-height: 21px;
- }
- }
-
- &__footers {
- width: 100%;
- }
-
- &__add-custom {
- color: $scorpion;
- font-size: 18px;
- line-height: 24px;
- text-align: center;
- padding: 12px 0;
- font-weight: 600;
- cursor: pointer;
- position: relative;
-
- &:hover {
- background-color: rgba(0, 0, 0, .05);
- }
-
- &:active {
- background-color: rgba(0, 0, 0, .1);
- }
-
- .fa {
- position: absolute;
- right: 24px;
- font-size: 24px;
- line-height: 24px;
- }
- }
-
- &__add-custom-form {
- display: flex;
- flex-flow: column nowrap;
- margin: 40px 0 30px;
- }
-
- &__add-custom-field {
- position: relative;
- display: flex;
- flex-flow: column;
- flex: 1 0 auto;
-
- &--error {
- .add-token__add-custom-input {
- border-color: $red;
- }
- }
- }
-
- &__add-custom-error-message {
- position: absolute;
- bottom: 1px;
- left: 22px;
- font-size: 12px;
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- color: $red;
- }
-
- &__add-custom-label {
- font-size: 16px;
- font-weight: 400;
- line-height: 21px;
- margin-left: 22px;
- color: $scorpion;
- }
-
- &__add-custom-input {
- margin-top: 6px;
- font-size: 16px;
-
- &::placeholder {
- color: $silver;
- font-size: 16px;
- }
- }
-
- &__add-custom-field + &__add-custom-field {
- margin-top: 6px;
- }
-
- &__buttons {
- display: flex;
- flex-flow: row nowrap;
- flex: 0 0 auto;
- align-items: center;
- justify-content: center;
- padding-bottom: 30px;
- padding-top: 20px;
- }
-
- &__confirm-button,
- &__cancel-button {
- margin: 0 12px;
- padding: 10px 13px;
- height: 54px;
- width: 133px;
- margin-right: 1.2rem;
- }
-
- &__token-icons-title {
- color: #5B5D67;
- font-family: Roboto;
- font-size: 18px;
- font-weight: 400;
- line-height: 24px;
- margin-left: 24px;
- margin-top: 8px;
- margin-bottom: 20px;
- }
-
- &__token-icons-container {
- display: flex;
- flex-flow: row wrap;
- }
-
- &__token-wrapper {
- transition: 200ms ease-in-out;
- display: flex;
- flex-flow: row nowrap;
- flex: 0 0 42.5%;
- align-items: center;
- padding: 12px;
- margin: 0% 2.5% 1.5%;
- box-sizing: border-box;
- border-radius: 10px;
- cursor: pointer;
- border: 2px solid transparent;
- position: relative;
-
- &:hover {
- border: 2px solid rgba($malibu-blue, .5);
- }
-
- &--selected {
- border: 2px solid $malibu-blue !important;
- }
-
- &--disabled {
- opacity: .4;
- pointer-events: none;
- }
- }
-
- &__token-data {
- align-self: flex-start;
- }
-
- &__token-name {
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- }
-
- &__token-symbol {
- font-size: 22px;
- line-height: 29px;
- font-weight: 600;
- }
-
- &__token-icon {
- width: 60px;
- height: 60px;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: center;
- border-radius: 50%;
- background-color: $white;
- box-shadow: 0 2px 4px 0 rgba($black, .24);
- margin-right: 12px;
- flex: 0 0 auto;
- }
-
- &__token-message {
- position: absolute;
- color: $caribbean-green;
- font-size: 11px;
- bottom: 0;
- left: 85px;
- }
-
- &__confirmation-token-list {
- display: flex;
- flex-flow: column nowrap;
-
- .token-balance {
- display: flex;
- flex-flow: row nowrap;
- align-items: flex-start;
-
- &__amount {
- color: $scorpion;
- font-size: 43px;
- line-height: 43px;
- margin-right: 8px;
- }
-
- &__symbol {
- color: $scorpion;
- font-size: 16px;
- font-weight: 400;
- line-height: 24px;
- }
- }
- }
-
- &__confirmation-title {
- padding: 30px 120px 12px;
-
- @media screen and (max-width: $break-small) {
- padding: 20px 0;
- width: 100%;
- }
- }
-
- &__confirmation-content {
- padding-bottom: 60px;
- }
-
- &__confirmation-token-list-item {
- display: flex;
- flex-flow: row nowrap;
- margin: 0 auto;
- align-items: center;
- }
-
- &__confirmation-token-list-item + &__confirmation-token-list-item {
- margin-top: 30px;
- }
-
- &__confirmation-token-icon {
- margin-right: 18px;
- }
-
- @media screen and (max-width: $break-small) {
- top: 0;
- width: 100%;
- overflow: hidden;
- flex: 1 0 auto;
-
- &__wrapper {
- box-shadow: none !important;
- flex: 1 1 auto;
- width: 100%;
- overflow-y: scroll;
- height: 400px;
- }
-
- &__footers {
- border-bottom: 1px solid $gallery;
- }
-
- &__token-icon {
- width: 50px;
- height: 50px;
- }
-
- &__token-symbol {
- font-size: 18px;
- line-height: 24px;
- }
-
- &__token-name {
- font-size: 12px;
- line-height: 16px;
- }
-
- &__buttons {
- padding: 1rem;
- margin: 0;
- border-top: 1px solid $gallery;
- width: 100%;
- }
- }
-}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 86daf60d8..4cbed6093 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -15,8 +15,9 @@
font-size: 14px;
font-weight: 500;
transition: border-color .3s ease;
- padding: 0 20px;
+ padding: 0 16px;
min-width: 140px;
+ width: 100%;
text-transform: uppercase;
outline: none;
}
@@ -110,6 +111,7 @@
font-size: .85rem;
font-weight: 400;
transition: border-color .3s ease;
+ width: 100%;
&:hover {
border-color: $scorpion;
@@ -126,6 +128,7 @@
font-size: .85rem;
font-weight: 400;
transition: border-color .3s ease;
+ width: 100%;
}
// No longer used in flat design, remove when modal buttons done
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 1c544e162..1d87b8004 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -30,8 +30,6 @@
@import './token-list.scss';
-@import './add-token.scss';
-
@import './currency-display.scss';
@import './account-menu.scss';
@@ -62,4 +60,4 @@
@import './sender-to-recipient.scss';
-@import '../../../components/export-text-container/export-text-container.scss';
+@import '../../../components/index';
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 2903e07b4..bbe0ee661 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -144,8 +144,8 @@ $wallet-view-bg: $alabaster;
flex: 0 0 auto;
margin: 36px auto;
background: none;
- padding: .7rem 2rem;
transition: border-color .3s ease;
+ width: 150px;
&:hover {
border-color: $curious-blue;
diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss
index 195185fff..709f8baf6 100644
--- a/ui/app/css/itcss/components/pages/index.scss
+++ b/ui/app/css/itcss/components/pages/index.scss
@@ -1,3 +1 @@
@import './reveal-seed.scss';
-
-@import '../../../../components/pages/unlock-page/unlock-page.scss';
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 9b2982096..f667eeda8 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -74,28 +74,32 @@ input.large-input {
}
.page-container {
- width: 400px;
+ width: 408px;
background-color: $white;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
z-index: 25;
display: flex;
flex-flow: column;
- border-radius: 7px;
+ border-radius: 8px;
&__header {
display: flex;
flex-flow: column;
border-bottom: 1px solid $geyser;
- padding: 20px;
+ padding: 16px;
flex: 0 0 auto;
position: relative;
+
+ &--no-padding-bottom {
+ padding-bottom: 0;
+ }
}
&__header-close {
color: $tundora;
position: absolute;
- top: 20px;
- right: 20px;
+ top: 16px;
+ right: 16px;
cursor: pointer;
overflow: hidden;
@@ -117,7 +121,7 @@ input.large-input {
flex-flow: row;
justify-content: center;
border-top: 1px solid $geyser;
- padding: 1.6rem;
+ padding: 16px;
flex: 0 0 auto;
.btn-clear,
@@ -128,11 +132,10 @@ input.large-input {
}
&__footer-button {
- width: 165px;
height: 55px;
font-size: 1rem;
text-transform: uppercase;
- margin-right: 1.2rem;
+ margin-right: 16px;
border-radius: 2px;
&:last-of-type {
@@ -162,25 +165,20 @@ input.large-input {
}
&__tabs {
- padding: 0 1.3rem;
display: flex;
+ margin-top: 16px;
}
&__tab {
min-width: 5rem;
- padding: .2rem .8rem .9rem;
+ padding: 8px;
color: $dusty-gray;
font-family: Roboto;
- font-size: 1.1rem;
- line-height: initial;
+ font-size: 1rem;
text-align: center;
cursor: pointer;
border-bottom: none;
- margin-right: 1rem;
-
- &:hover {
- color: $black;
- }
+ margin-right: 16px;
&:last-of-type {
margin-right: 0;
@@ -189,10 +187,6 @@ input.large-input {
&--selected {
color: $curious-blue;
border-bottom: 3px solid $curious-blue;
-
- &:hover {
- color: $curious-blue;
- }
}
}
@@ -260,7 +254,8 @@ input.large-input {
@media screen and (min-width: 576px) {
.page-container {
- height: 600px;
+ max-height: 82vh;
+ min-height: 570px;
flex: 0 0 auto;
}
}
@@ -303,3 +298,9 @@ input.form-control {
border: 1px solid $monzo;
}
}
+
+.hide-text-overflow {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}