diff options
Diffstat (limited to 'ui/app/css/itcss')
21 files changed, 923 insertions, 63 deletions
diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss new file mode 100644 index 000000000..996993db7 --- /dev/null +++ b/ui/app/css/itcss/components/account-dropdown-mini.scss @@ -0,0 +1,48 @@ +.account-dropdown-mini { + height: 22px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + width: 124px; + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__list { + z-index: 1050; + position: absolute; + height: 180px; + width: 96pxpx; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + overflow-y: scroll; + } + + .account-list-item { + margin-top: 6px; + } + + .account-list-item__account-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 80px; + } + + .account-list-item__top-row { + margin: 0; + } + + .account-list-item__icon { + position: initial; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 4fc7c705a..c298c4019 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -62,4 +62,11 @@ &__account-secondary-balance { color: $dusty-gray; } + + &__account-address { + margin-left: 35px; + width: 80%; + overflow: hidden; + text-overflow: ellipsis; + } } diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 090710f7b..e40e5a8c0 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -21,6 +21,7 @@ } &__icon { + margin-left: 20px; cursor: pointer; } @@ -65,6 +66,8 @@ .keyring-label { margin-top: 5px; + background-color: $black; + color: $dusty-gray; } } @@ -88,9 +91,20 @@ &__check-mark { width: 14px; + margin-right: 12px; flex: 0 0 auto; } + &__check-mark-icon { + background-image: url("images/check-white.svg"); + height: 18px; + width: 18px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + margin: 3px 0; + } + .identicon { margin: 0 12px 0 0; flex: 0 0 auto; diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index aa8221c9a..5f6d0fcff 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -7,19 +7,6 @@ z-index: 12; font-family: 'DIN Next Light'; - @media screen and (max-width: $break-small) { - top: 0; - width: 100%; - - &__wrapper { - box-shadow: none !important; - } - - &__footers { - border-bottom: 1px solid $gallery; - } - } - &__wrapper { background-color: $white; box-shadow: 0 2px 4px 0 rgba($black, .08); @@ -109,7 +96,18 @@ cursor: pointer; &:hover { - background-color: $gallery; + 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; } } @@ -180,7 +178,7 @@ transition: 200ms ease-in-out; display: flex; flex-flow: row nowrap; - flex: 0 0 45%; + flex: 0 0 42.5%; align-items: center; padding: 12px; margin: 2.5%; @@ -204,6 +202,10 @@ } } + &__token-data { + align-self: flex-start; + } + &__token-name { font-size: 14px; line-height: 19px; @@ -263,6 +265,11 @@ &__confirmation-title { padding: 30px 120px 12px; + + @media screen and (max-width: $break-small) { + padding: 20px 0; + width: 100%; + } } &__confirmation-content { @@ -272,7 +279,7 @@ &__confirmation-token-list-item { display: flex; flex-flow: row nowrap; - padding: 0 120px; + margin: 0 auto; align-items: center; } @@ -283,4 +290,52 @@ &__confirmation-token-icon { margin-right: 18px; } + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + overflow: hidden; + height: 100%; + + &__wrapper { + box-shadow: none !important; + flex: 1 1 auto; + width: 100%; + overflow-y: auto; + } + + &__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 { + flex-flow: row nowrap; + width: 100%; + align-items: center; + justify-content: center; + padding: 12px 0; + margin: 0; + border-top: 1px solid $gallery; + + button { + flex: 1 0 auto; + margin: 0 12px; + } + } + } } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index d4f0fe5ac..4a8232e39 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -16,6 +16,15 @@ } } +.notification { + .confirm-screen-wrapper { + + @media screen and (max-width: $break-small) { + height: calc(100vh - 85px); + } + } +} + .confirm-screen-wrapper { height: 100%; width: 380px; @@ -37,7 +46,7 @@ overflow-y: auto; top: 0; box-shadow: none; - height: calc(100vh - 58px - 100px); + height: calc(100vh - 58px - 85px); border-top-left-radius: 0; border-top-right-radius: 0; } @@ -66,7 +75,7 @@ flex: 0 0 auto; @media screen and (max-width: $break-small) { - font-size: 22px; + font-size: 20px; } } @@ -76,8 +85,10 @@ background: $athens-grey; position: absolute; transform: rotate(45deg); - left: 178px; top: 71px; + left: 0; + right: 0; + margin: 0 auto; } .confirm-screen-title { @@ -133,6 +144,14 @@ height: 16px; } +.confirm-send-ether, +.confirm-send-token { + i.fa-arrow-right { + align-self: start; + margin: 24px 14px 0 !important; + } +} + .confirm-screen-identicons { margin-top: 24px; flex: 0 0 auto; @@ -271,6 +290,7 @@ section .confirm-screen-account-number, box-shadow: none; flex: 1 0 auto; font-weight: 300; + margin: 0 8px; } .btn-light.confirm-screen-cancel-button { @@ -288,6 +308,7 @@ section .confirm-screen-account-number, cursor: pointer; flex: 1 0 auto; font-weight: 300; + margin: 0 8px; } #pending-tx-form { @@ -296,7 +317,7 @@ section .confirm-screen-account-number, display: flex; flex-flow: row nowrap; background-color: $white; - padding: 19px 18px; + padding: 12px 18px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; width: 100%; diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index eb1776c58..9459629b6 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -22,6 +22,7 @@ line-height: 22px; border: none; outline: 0 !important; + max-width: 100%; } &__primary-currency { @@ -43,4 +44,13 @@ font-size: 12px; line-height: 12px; } + + &__input-wrapper { + position: relative; + display: flex; + } + + &__currency-symbol { + margin-top: 1px; + } }
\ No newline at end of file diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss new file mode 100644 index 000000000..13570610c --- /dev/null +++ b/ui/app/css/itcss/components/editable-label.scss @@ -0,0 +1,34 @@ +.editable-label { + display: flex; + align-items: center; + justify-content: center; + position: relative; + + &__value { + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__input { + width: 250px; + font-size: 14px; + text-align: center; + + &--error { + border: 1px solid $monzo; + } + } + + &__icon-wrapper { + position: absolute; + margin-left: 10px; + left: 100%; + } + + &__icon { + cursor: pointer; + color: $dusty-gray; + } +} diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index ef84dc3f4..a6332f819 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -27,6 +27,10 @@ bottom: -32px; } } + + .metafox-icon { + cursor: pointer; + } } .app-header-contents { @@ -58,6 +62,7 @@ text-transform: uppercase; font-weight: 400; color: #22232c; // $shark + line-height: 29px; @media screen and (max-width: 575px) { display: none; @@ -75,13 +80,13 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; - margin-right: 20px; } .left-menu-wrapper { display: flex; flex-direction: row; align-items: center; + cursor: pointer; } .header__right-actions { diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index fda002785..4ba02be67 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -38,3 +38,14 @@ @import './gas-slider.scss'; +@import './settings.scss'; + +@import './tab-bar.scss'; + +@import './simple-dropdown.scss'; + +@import './request-signature.scss'; + +@import './account-dropdown-mini.scss'; + +@import './editable-label.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 1ffea58a9..b69bd5c7e 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -57,6 +57,7 @@ border-radius: 6px; border: 1px solid $black; padding: 0% 7%; + justify-content: center; div.buy-modal-content-option-title { font-size: 20px; @@ -293,6 +294,11 @@ font-size: 18px; } +.account-modal__name { + margin-top: 9px; + font-size: 20px; +} + .private-key-password { display: flex; flex-direction: column; @@ -372,6 +378,7 @@ resize: none; padding: 9px 13px 8px; text-transform: uppercase; + font-weight: 300; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index bb8c4eea8..98dbdffb2 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -1,3 +1,12 @@ +.network-component--disabled { + // border-color: transparent !important; + cursor: default; + + .fa-caret-down { + opacity: 0; + } +} + .network-component.pointer { border: 1px solid $shark; border-radius: 82px; @@ -40,7 +49,7 @@ .dropdown-menu-item { .menu-icon-circle, .menu-icon-circle--active { - margin: 0 16px; + margin: 0 14px; } } @@ -116,8 +125,8 @@ .menu-icon-circle div, .menu-icon-circle--active div { - height: 17px; - width: 17px; + height: 12px; + width: 12px; border-radius: 17px; } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 1ee8283ef..244de2ba0 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -43,8 +43,11 @@ $wallet-view-bg: $wild-sand; .wallet-view { display: flex; flex-direction: column; - flex: 33.5 0 33.5%; + flex: 33.5 1 33.5%; + width: 0; background: $wallet-view-bg; + z-index: 200; + position: relative; @media screen and (min-width: 576px) { overflow-y: scroll; @@ -52,7 +55,78 @@ $wallet-view-bg: $wild-sand; } .wallet-view-account-details { - flex: 0 0 150px; + flex: 0 0 auto; + } + + &__name-container { + flex: 0 0 auto; + cursor: pointer; + width: 100%; + } + + &__keyring-label { + height: 40px; + color: $dusty-gray; + font-family: Roboto; + font-size: 10px; + line-height: 40px; + text-align: right; + padding: 0 20px; + } + + &__details-button { + color: $curious-blue; + font-size: 10px; + line-height: 13px; + text-align: center; + border: 1px solid $curious-blue; + border-radius: 10.5px; + background-color: transparent; + margin: 0 auto; + padding: 4px 12px; + flex: 0 0 auto; + } + + &__address { + border-radius: 3px; + background-color: $alto; + color: $scorpion; + font-size: 14px; + line-height: 12px; + padding: 4px 12px; + margin: 24px auto; + font-weight: 300; + cursor: pointer; + flex: 0 0 auto; + } + + &__sidebar-close { + + @media screen and (max-width: 575px) { + &::after { + content: '\00D7'; + font-size: 40px; + color: $tundora; + position: absolute; + top: 12px; + left: 12px; + cursor: pointer; + } + } + } + + &__add-token-button { + flex: 0 0 auto; + color: $dusty-gray; + font-size: 14px; + line-height: 19px; + text-align: center; + margin: 36px auto; + border: 1px solid $dusty-gray; + border-radius: 2px; + font-weight: 300; + background: none; + padding: 9px 30px; } } @@ -81,7 +155,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 57px; + top: 56px; left: 0; right: 0; bottom: 0; @@ -91,7 +165,7 @@ $wallet-view-bg: $wild-sand; overflow-y: auto; box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; width: 85%; - height: calc(100% - 57px); + height: calc(100% - 56px); } .sidebar-overlay { @@ -173,15 +247,18 @@ $wallet-view-bg: $wild-sand; // wallet view .account-name { - - @media screen and (max-width: 575px) { - font-size: 102%; - margin-left: 3%; - } - - @media screen and (max-width: 575px) { - text-align: center; - } + font-size: 24px; + font-weight: 200; + line-height: 20px; + color: $scorpion; + margin-top: 8px; + margin-bottom: 24px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + padding: 0 8px; + text-align: center; } // account options dropdown diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss new file mode 100644 index 000000000..ee54235d0 --- /dev/null +++ b/ui/app/css/itcss/components/request-signature.scss @@ -0,0 +1,222 @@ +.request-signature { + &__container { + width: 380px; + border-radius: 8px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + height: 100%; + + @media screen and (max-width: $break-small) { + width: 100%; + top: 0; + box-shadow: none; + } + + @media screen and (min-width: $break-large) { + max-height: 620px; + } + } + + &__header { + height: 64px; + width: 100%; + position: relative; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + flex: 0 0 auto; + } + + &__header-background { + position: absolute; + background-color: $athens-grey; + z-index: 2; + width: 100%; + height: 100%; + } + + &__header__text { + height: 29px; + width: 179px; + color: #5B5D67; + font-family: Roboto; + font-size: 22px; + font-weight: 300; + line-height: 29px; + z-index: 3; + } + + &__header__tip-container { + width: 100%; + display: flex; + justify-content: center; + } + + &__header__tip { + height: 25px; + width: 25px; + background: $athens-grey; + transform: rotate(45deg); + position: absolute; + bottom: -8px; + z-index: 1; + } + + &__account-info { + display: flex; + justify-content: space-between; + margin-top: 18px; + margin-bottom: 20px; + } + + &__account { + color: $dusty-gray; + margin-left: 17px; + } + + &__account-text { + font-size: 14px; + } + + &__balance { + color: $dusty-gray; + margin-right: 17px; + width: 124px; + } + + &__balance-text { + text-align: right; + font-size: 14px; + } + + &__balance-value { + text-align: right; + margin-top: 2.5px; + } + + &__request-icon { + margin-top: 25px; + } + + &__body { + width: 100%; + height: 100%; + display: flex; + flex-flow: column; + flex: 1 1 auto; + height: 0; + } + + &__request-info { + display: flex; + justify-content: center; + } + + &__headline { + height: 48px; + width: 240px; + color: $tundora; + font-family: Roboto; + font-size: 18px; + font-weight: 300; + line-height: 24px; + text-align: center; + margin-top: 20px; + } + + &__notice { + color: #9B9B9B; + font-family: "Avenir Next"; + font-size: 14px; + line-height: 19px; + text-align: center; + margin-top: 41px; + margin-bottom: 11px; + width: 100%; + } + + &__rows { + height: 100%; + overflow-y: scroll; + overflow-x: hidden; + border-top: 1px solid $geyser; + display: flex; + flex-flow: column; + } + + &__row { + display: flex; + flex-flow: column; + } + + &__row-title { + width: 80px; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + margin-top: 12px; + margin-left: 18px; + width: 100%; + } + + &__row-value { + color: $scorpion; + font-family: Roboto; + font-size: 14px; + line-height: 19px; + width: 100%; + overflow-wrap: break-word; + border-bottom: 1px solid #d2d8dd; + padding: 6px 18px 15px; + } + + &__footer { + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; + font-size: 22px; + position: relative; + flex: 0 0 auto; + border-top: 1px solid $geyser; + + &__cancel-button, + &__sign-button { + display: flex; + align-items: center; + justify-content: center; + flex: 1 0 auto; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + height: 55px; + line-height: 32px; + cursor: pointer; + border-radius: 2px; + box-shadow: none; + max-width: 162px; + margin: 12px; + } + + &__cancel-button { + background: none; + border: 1px solid $dusty-gray; + margin-right: 6px; + } + + &__sign-button { + background-color: $caribbean-green; + border-width: 0; + color: $white; + margin-left: 6px; + } + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index bc89fdccc..388aea175 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -39,7 +39,9 @@ textarea.twelve-word-phrase { /* unlock */ .error { - color: #e20202; + // color: #e20202; + color: #f7861c; + margin-bottom: 9px; } .warning { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 9a076551e..282eef030 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -274,6 +274,7 @@ color: #9b9b9b; font-size: .8em; padding: 1px 4px; + cursor: pointer; } .token-gas { @@ -400,7 +401,7 @@ .send-v2 { &__container { - height: 701px; + // height: 701px; width: 380px; border-radius: 8px; background-color: $white; @@ -416,6 +417,7 @@ width: 100%; top: 0; box-shadow: none; + flex: 1 1 auto; } } @@ -473,6 +475,7 @@ @media screen and (max-width: $break-small) { height: 59px; + width: 100vw; } } @@ -483,10 +486,13 @@ position: absolute; transform: rotate(45deg); left: 178px; - top: 65px; + top: 75px; @media screen and (max-width: $break-small) { top: 46px; + left: 0; + right: 0; + margin: 0 auto; } } @@ -520,18 +526,20 @@ } &__form { - margin-top: 13px; + margin: 13px 0; width: 100%; @media screen and (max-width: $break-small) { - margin-top: 0px; + padding: 13px 0; + margin: 0; height: 0; overflow-y: auto; flex: 1 1 auto; } } - &__form-header, &__form-header-copy { + &__form-header, + &__form-header-copy { width: 100%; display: flex; flex-flow: column; @@ -594,6 +602,16 @@ } } + &__to-autocomplete { + position: relative; + + &__down-caret { + position: absolute; + top: 18px; + right: 12px; + } + } + &__to-autocomplete, &__memo-text-area { &__input { height: 54px; @@ -652,31 +670,32 @@ } &__next-btn, - &__cancel-btn { + &__cancel-btn, + &__next-btn__disabled { width: 163px; text-align: center; height: 55px; - width: 163px; border-radius: 2px; background-color: $white; font-family: Roboto; font-size: 16px; font-weight: 300; line-height: 21px; - text-align: center; border: 1px solid; + margin: 0 4px; } + &__next-btn, &__next-btn__disabled { - opacity: .5; - cursor: auto; - } - - &__next-btn { color: $curious-blue; border-color: $curious-blue; } + &__next-btn__disabled { + opacity: .5; + cursor: auto; + } + &__cancel-btn { color: $dusty-gray; border-color: $dusty-gray; @@ -692,8 +711,8 @@ flex-flow: column; @media screen and (max-width: $break-small) { - width: 355px; - height: 598px; + width: 100vw; + height: 100vh; } &__header { @@ -703,6 +722,10 @@ align-items: center; justify-content: space-between; font-size: 22px; + + @media screen and (max-width: $break-small) { + flex: 0 0 auto; + } } &__title { @@ -718,14 +741,19 @@ margin-right: 19.25px; } + &__content { + display: flex; + flex-flow: column nowrap; + height: 100%; + } + &__body { - height: 248px; display: flex; + margin-bottom: 24px; @media screen and (max-width: $break-small) { - width: 355px; - height: 470px; flex-flow: column; + flex: 1 1 auto; } } @@ -736,6 +764,11 @@ align-items: center; justify-content: space-between; font-size: 22px; + position: relative; + + @media screen and (max-width: $break-small) { + flex: 0 0 auto; + } } &__buttons { @@ -745,7 +778,7 @@ margin-right: 21.25px; } - &__revert, &__cancel, &__save { + &__revert, &__cancel, &__save, &__save__error { display: flex; justify-content: center; align-items: center; @@ -758,7 +791,7 @@ margin-left: 21.25px; } - &__cancel, &__save { + &__cancel, &__save, &__save__error { height: 34.64px; width: 85.74px; border: 1px solid $dusty-gray; @@ -767,6 +800,21 @@ font-size: 12px; color: $dusty-gray; } + + &__save__error { + opacity: 0.5; + cursor: auto; + } + + &__error-message { + display: block; + position: absolute; + top: 4px; + right: 4px; + font-size: 12px; + line-height: 12px; + color: $red; + } } &__gas-modal-card { @@ -778,7 +826,6 @@ &__title { height: 26px; - width: 84px; color: $tundora; font-family: Roboto; font-size: 20px; diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss new file mode 100644 index 000000000..2f29d8017 --- /dev/null +++ b/ui/app/css/itcss/components/settings.scss @@ -0,0 +1,201 @@ +.settings { + position: relative; + background: $white; + display: flex; + flex-flow: column nowrap; + height: auto; + overflow: auto; +} + +.settings__header { + padding: 25px; +} + +.settings__close-button::after { + content: '\00D7'; + font-size: 40px; + color: $dusty-gray; + position: absolute; + top: 25px; + right: 30px; + cursor: pointer; +} + +.settings__error { + padding-bottom: 20px; + text-align: center; + color: $crimson; +} + +.settings__content { + padding: 0 25px; +} + +.settings__content-row { + display: flex; + flex-direction: row; + padding: 10px 0 20px; + + @media screen and (max-width: 575px) { + flex-direction: column; + padding: 10px 0; + } +} + +.settings__content-item { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + padding: 0 5px; + height: 71px; + + @media screen and (max-width: 575px) { + height: initial; + padding: 5px 0; + } + + &--without-height { + height: initial; + } +} + +.settings__content-item-col { + max-width: 300px; + display: flex; + flex-direction: column; + + @media screen and (max-width: 575px) { + max-width: 100%; + width: 100%; + } +} + +.settings__content-description { + font-size: 14px; + color: $dusty-gray; + padding-top: 5px; +} + +.settings__input { + padding-left: 10px; + font-size: 14px; + height: 40px; + border: 1px solid $alto; +} + +.settings__input::-webkit-input-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__input::-moz-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__input:-ms-input-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__input:-moz-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__provider-wrapper { + font-size: 16px; + border: 1px solid $alto; + border-radius: 2px; + padding: 15px; + background-color: $white; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.settings__provider-icon { + height: 10px; + width: 10px; + margin-right: 10px; + border-radius: 10px; +} + +.settings__rpc-save-button { + align-self: flex-end; + padding: 5px; + text-transform: uppercase; + color: $dusty-gray; + cursor: pointer; +} + +.settings__clear-button { + font-size: 16px; + border: 1px solid $curious-blue; + color: $curious-blue; + border-radius: 2px; + padding: 18px; + background-color: $white; + text-transform: uppercase; +} + +.settings__clear-button--red { + border: 1px solid $monzo; + color: $monzo; +} + +.settings__info-logo-wrapper { + height: 80px; + margin-bottom: 20px; +} + +.settings__info-logo { + max-height: 100%; + max-width: 100%; +} + +.settings__info-item { + padding: 10px 0; +} + +.settings__info-link-header { + padding-bottom: 15px; + + @media screen and (max-width: 575px) { + padding-bottom: 5px; + } +} + +.settings__info-link-item { + padding: 15px 0; + + @media screen and (max-width: 575px) { + padding: 5px 0; + } +} + +.settings__info-version-number { + padding-top: 5px; + font-size: 13px; + color: $dusty-gray; +} + +.settings__info-about { + color: $dusty-gray; + margin-bottom: 15px; +} + +.settings__info-link { + color: $curious-blue; +} + +.settings__info-separator { + margin: 15px 0; + width: 80px; + border-color: $alto; + border: none; + height: 1px; + background-color: $alto; + color: $alto; +} diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss new file mode 100644 index 000000000..a21095a3e --- /dev/null +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -0,0 +1,65 @@ +.simple-dropdown { + height: 56px; + display: flex; + justify-content: flex-start; + align-items: center; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + font-size: 16px; + color: #4d4d4d; + cursor: pointer; + position: relative; +} + +.simple-dropdown__caret { + color: $silver; + padding: 0 10px; +} + +.simple-dropdown__selected { + flex-grow: 1; + padding: 0 15px; +} + +.simple-dropdown__options { + z-index: 1050; + position: absolute; + height: 220px; + width: 100%; + border: 1px solid #d2d8dd; + border-radius: 4px; + background-color: #fff; + -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + margin-top: 10px; + overflow-y: scroll; + left: 0; + top: 100%; +} + +.simple-dropdown__option { + padding: 10px; + + &:hover { + background-color: $gallery; + } +} + +.simple-dropdown__option--selected { + background-color: $alto; + + &:hover { + background-color: $alto; + cursor: default; + } +} + +.simple-dropdown__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; +} diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss new file mode 100644 index 000000000..4f3077974 --- /dev/null +++ b/ui/app/css/itcss/components/tab-bar.scss @@ -0,0 +1,23 @@ +.tab-bar { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; +} + +.tab-bar__tab { + min-width: 0; + flex: 0 0 auto; + padding: 15px 25px; + border-bottom: 1px solid $alto; + box-sizing: border-box; + font-size: 18px; +} + +.tab-bar__tab--active { + border-color: $black; +} + +.tab-bar__grow-tab { + flex-grow: 1; +} diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index bbc64c324..d4add71b1 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -67,19 +67,21 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( position: fixed; margin-top: 20px; margin-left: 105px; + z-index: 2000; &__close-area { position: fixed; top: 0; left: 0; - z-index: 1000; + z-index: 2100; width: 100%; height: 100%; + cursor: default; } &__container { padding: 16px 34px 32px; - z-index: 1050; + z-index: 2200; position: relative; } diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index cd44f89bb..64b291b89 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -1,4 +1,4 @@ -$wallet-balance-bg: $gallery; +$wallet-balance-bg: #e7e7e7; $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; @@ -20,6 +20,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( align-items: center; flex: 0 0 auto; cursor: pointer; + border-top: 1px solid $wallet-balance-bg; .balance-container { display: flex; 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; } |