diff options
Diffstat (limited to 'ui/app/css/itcss')
-rw-r--r-- | ui/app/css/itcss/components/account-menu.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/add-token.scss | 461 | ||||
-rw-r--r-- | ui/app/css/itcss/components/buttons.scss | 5 | ||||
-rw-r--r-- | ui/app/css/itcss/components/header.scss | 114 | ||||
-rw-r--r-- | ui/app/css/itcss/components/index.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/modal.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/pages/index.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/pages/unlock.scss | 9 | ||||
-rw-r--r-- | ui/app/css/itcss/components/request-signature.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/sections.scss | 41 | ||||
-rw-r--r-- | ui/app/css/itcss/components/settings.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/welcome-screen.scss | 97 | ||||
-rw-r--r-- | ui/app/css/itcss/generic/index.scss | 56 |
14 files changed, 143 insertions, 660 deletions
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 824b2ddb6..657760ab5 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -23,6 +23,10 @@ &__icon { margin-left: 20px; cursor: pointer; + + &--disabled { + cursor: initial; + } } &__header { 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/header.scss b/ui/app/css/itcss/components/header.scss index eeed9ee06..3ccfd5c15 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -1,15 +1,15 @@ .app-header { align-items: center; - visibility: visible; background: $gallery; position: relative; z-index: $header-z-index; display: flex; flex-flow: column nowrap; + width: 100%; + flex: 0 0 auto; @media screen and (max-width: 575px) { padding: 12px; - width: 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @@ -17,48 +17,71 @@ @media screen and (min-width: 576px) { height: 75px; justify-content: center; + + &--back-drop { + &::after { + content: ''; + position: absolute; + width: 100%; + height: 32px; + background: $gallery; + bottom: -32px; + } + } } - .metafox-icon { + &__metafox { cursor: pointer; } -} - -.app-header--initialized { - @media screen and (min-width: 576px) { - &::after { - content: ''; - position: absolute; - width: 100%; - height: 32px; - background: $gallery; - bottom: -32px; + &__beta-label { + font-family: Roboto; + text-transform: uppercase; + font-weight: 500; + font-size: .8rem; + color: $buttercup; + margin-left: 5px; + line-height: initial; + + @media screen and (max-width: 575px) { + display: none; } } -} -.app-header-contents { - display: flex; - justify-content: space-between; - flex-flow: row nowrap; - width: 100%; - height: 6.9vh; + &__contents { + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + width: 100%; - @media screen and (max-width: 575px) { - height: 100%; - } + @media screen and (max-width: 575px) { + height: 100%; + } - @media screen and (min-width: 576px) { - width: 85vw; + @media screen and (min-width: 576px) { + width: 85vw; + } + + @media screen and (min-width: 769px) { + width: 80vw; + } + + @media screen and (min-width: 1281px) { + width: 62vw; + } } - @media screen and (min-width: 769px) { - width: 80vw; + &__logo-container { + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; } - @media screen and (min-width: 1281px) { - width: 62vw; + &__account-menu-container { + display: flex; + flex-flow: row nowrap; + align-items: center; } } @@ -76,20 +99,6 @@ } } -.beta-label { - font-family: Roboto; - text-transform: uppercase; - font-weight: 500; - font-size: .8rem; - color: $buttercup; - margin-left: 5px; - line-height: initial; - - @media screen and (max-width: 575px) { - display: none; - } -} - h2.page-subtitle { text-transform: uppercase; color: #aeaeae; @@ -102,20 +111,3 @@ h2.page-subtitle { flex-direction: row; align-items: center; } - -.left-menu-wrapper { - display: flex; - flex-direction: row; - align-items: center; - cursor: pointer; -} - -.header__right-actions { - display: flex; - flex-flow: row nowrap; - align-items: center; - - .identicon { - cursor: pointer; - } -} 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/modal.scss b/ui/app/css/itcss/components/modal.scss index f972c0f7a..74658f656 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -566,7 +566,6 @@ padding: 30px; font-size: 22px; color: $nile-blue; - height: 79px; } &__message { @@ -832,7 +831,6 @@ padding: 30px; font-size: 22px; color: $nile-blue; - height: 79px; } .notification-modal-message { 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 d0b59da53..709f8baf6 100644 --- a/ui/app/css/itcss/components/pages/index.scss +++ b/ui/app/css/itcss/components/pages/index.scss @@ -1,3 +1 @@ -@import './unlock.scss'; - @import './reveal-seed.scss'; diff --git a/ui/app/css/itcss/components/pages/unlock.scss b/ui/app/css/itcss/components/pages/unlock.scss deleted file mode 100644 index 5d438377b..000000000 --- a/ui/app/css/itcss/components/pages/unlock.scss +++ /dev/null @@ -1,9 +0,0 @@ -.unlock-page { - box-shadow: none; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: rgb(247, 247, 247); - width: 100%; -} diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 8bba6c98e..e6916c418 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -43,8 +43,6 @@ } &__header__text { - height: 29px; - width: 179px; color: #5B5D67; font-family: Roboto; font-size: 22px; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index ace46bd8a..feec71c89 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -95,19 +95,6 @@ textarea.twelve-word-phrase { margin: -2px 8px 0px -8px; } -.unlock-screen #metamask-mascot-container { - margin-top: 24px; -} - -.unlock-screen h1 { - margin-top: -28px; - margin-bottom: 42px; -} - -.unlock-screen input[type=password] { - width: 260px; -} - .sizing-input { font-size: 14px; height: 30px; @@ -118,34 +105,6 @@ textarea.twelve-word-phrase { display: flex; } -/* Webkit */ - -.unlock-screen input::-webkit-input-placeholder { - text-align: center; - font-size: 1.2em; -} - -/* Firefox 18- */ - -.unlock-screen input:-moz-placeholder { - text-align: center; - font-size: 1.2em; -} - -/* Firefox 19+ */ - -.unlock-screen input::-moz-placeholder { - text-align: center; - font-size: 1.2em; -} - -/* IE */ - -.unlock-screen input:-ms-input-placeholder { - text-align: center; - font-size: 1.2em; -} - /* accounts */ .accounts-section { diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index dcc9b98d5..0dd61ac5e 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -3,8 +3,6 @@ background: $white; display: flex; flex-flow: column nowrap; - height: auto; - overflow: auto; } .settings__header { @@ -29,6 +27,8 @@ .settings__content { padding: 0 25px; + height: auto; + overflow: auto; } .settings__content-row { diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index bfd174ad9..af1d67398 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -1,59 +1,60 @@ .welcome-screen { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + font-family: Roboto; + font-weight: 400; + width: 100%; + flex: 1 0 auto; + padding: 70px 0; + background: $white; + + @media screen and (max-width: 575px) { + padding: 0; + } + + &__info { display: flex; flex-flow: column; - justify-content: center; - align-items: center; - font-family: Roboto; - font-weight: 400; width: 100%; - flex: 1 0 auto; - padding: 70px 0; - background: $white; - - @media screen and (max-width: 575px) { - padding: 0; - } - - &__info { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - align-items: center; - - &__header { - font-size: 1.65em; - margin-bottom: 14px; - - @media screen and (max-width: 575px) { - font-size: 1.5em; - } - } + height: 100%; + align-items: center; + justify-content: center; - &__copy { - font-size: 1em; - width: 400px; - max-width: 90vw; - text-align: center; + &__header { + font-size: 1.65em; + margin-bottom: 14px; - @media screen and (max-width: 575px) { - font-size: 0.9em; - } - } + @media screen and (max-width: 575px) { + font-size: 1.5em; + } } - &__button { - height: 54px; - width: 198px; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); - color: #FFFFFF; - font-size: 20px; - font-weight: 500; - line-height: 26px; + &__copy { + font-size: 1em; + width: 400px; + max-width: 90vw; text-align: center; - text-transform: uppercase; - margin: 35px 0 14px; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, 0.9); + + @media screen and (max-width: 575px) { + font-size: .9em; + } } + } + + &__button { + height: 54px; + width: 198px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + color: #fff; + font-size: 20px; + font-weight: 500; + line-height: 26px; + text-align: center; + text-transform: uppercase; + margin: 35px 0 14px; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, .9); + } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index b484d5a91..3525d2003 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,26 +187,22 @@ input.large-input { &--selected { color: $curious-blue; border-bottom: 3px solid $curious-blue; - - &:hover { - color: $curious-blue; - } } } &--full-width { - width: initial; + width: 100% !important; } &--full-height { - height: 100%; + height: 100% !important; + max-height: initial !important; + min-height: initial !important; } &__content { - height: 100%; overflow-y: auto; - min-height: 250px; - max-height: 400px; + flex: 1; } &__warning-container { @@ -256,12 +250,14 @@ input.large-input { overflow-y: auto; background-color: $white; border-radius: 0; + flex: 1; } } @media screen and (min-width: 576px) { .page-container { - height: 600px; + max-height: 82vh; + min-height: 570px; flex: 0 0 auto; } } @@ -304,3 +300,9 @@ input.form-control { border: 1px solid $monzo; } } + +.hide-text-overflow { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} |