diff options
Diffstat (limited to 'ui/app/css/itcss')
30 files changed, 4654 insertions, 0 deletions
diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss new file mode 100644 index 000000000..baa6ea037 --- /dev/null +++ b/ui/app/css/itcss/base/index.scss @@ -0,0 +1 @@ +// Base diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss new file mode 100644 index 000000000..4fc7c705a --- /dev/null +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -0,0 +1,65 @@ +.account-dropdown-name { + font-family: Roboto; +} + +.account-dropdown-balance { + color: $dusty-gray; + line-height: 19px; +} + +.account-dropdown-edit-button { + color: $dusty-gray; + font-family: Roboto; + + &:hover { + color: $white; + } +} + +.account-list-item { + &__top-row { + display: flex; + margin-top: 10px; + margin-left: 8px; + position: relative; + } + + &__account-balances { + height: auto; + border: none; + background-color: transparent; + color: #9b9b9b; + margin-left: 34px; + margin-top: 4px; + position: relative; + } + + &__account-name { + font-size: 16px; + margin-left: 8px; + } + + &__icon { + position: absolute; + right: 12px; + top: 1px; + } + + &__account-primary-balance, + &__account-secondary-balance { + font-family: Roboto; + line-height: 16px; + font-size: 12px; + font-weight: 300; + } + + &__account-primary-balance { + color: $scorpion; + border: none; + outline: 0 !important; + } + + &__account-secondary-balance { + color: $dusty-gray; + } +} diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss new file mode 100644 index 000000000..857903ce1 --- /dev/null +++ b/ui/app/css/itcss/components/account-menu.scss @@ -0,0 +1,118 @@ +.account-menu { + position: fixed; + z-index: 100; + top: 58px; + width: 310px; + + @media screen and (max-width: 575px) { + right: calc((100vw - 100%) / 2); + } + + @media screen and (min-width: 576px) { + right: calc((100vw - 85vw) / 2); + } + + @media screen and (min-width: 769px) { + right: calc((100vw - 80vw) / 2); + } + + @media screen and (min-width: 1281px) { + right: calc((100vw - 65vw) / 2); + } + + &__icon { + cursor: pointer; + } + + &__header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + } + + &__logout-button { + border: 1px solid $dusty-gray; + background-color: transparent; + color: $white; + border-radius: 4px; + font-size: 12px; + line-height: 23px; + padding: 0 24px; + font-weight: 200; + } + + img { + width: 16px; + height: 16px; + } + + &__accounts { + display: flex; + flex-flow: column nowrap; + overflow-y: auto; + max-height: 240px; + position: relative; + z-index: 200; + + &::-webkit-scrollbar { + display: none; + } + + @media screen and (max-width: 575px) { + max-height: 215px; + } + + .keyring-label { + margin-top: 5px; + } + } + + &__account { + display: flex; + flex-flow: row nowrap; + padding: 16px 14px; + flex: 0 0 auto; + + @media screen and (max-width: 575px) { + padding: 12px 14px; + } + } + + &__account-info { + flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; + padding-top: 4px; + } + + &__check-mark { + width: 14px; + flex: 0 0 auto; + } + + .identicon { + margin: 0 12px 0 0; + flex: 0 0 auto; + } + + &__name { + color: $white; + font-size: 18px; + font-weight: 200; + line-height: 16px; + } + + &__balance { + color: $dusty-gray; + font-size: 14px; + line-height: 19px; + } + + &__action { + font-size: 16px; + line-height: 18px; + font-weight: 200; + cursor: pointer; + } +} diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss new file mode 100644 index 000000000..aa8221c9a --- /dev/null +++ b/ui/app/css/itcss/components/add-token.scss @@ -0,0 +1,286 @@ +.add-token { + width: 498px; + display: flex; + flex-flow: column nowrap; + align-items: center; + position: relative; + 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); + display: flex; + flex-flow: column nowrap; + align-items: center; + flex: 0 0 auto; + } + + &__title-container { + display: flex; + flex-flow: column nowrap; + align-items: center; + padding: 30px 60px 12px; + border-bottom: 1px solid $gallery; + flex: 0 0 auto; + } + + &__title { + color: $scorpion; + font-size: 20px; + line-height: 26px; + text-align: center; + font-weight: 600; + margin-bottom: 12px; + } + + &__description { + text-align: center; + } + + &__description + &__description { + margin-top: 24px; + } + + &__confirmation-description { + margin: 12px 0; + } + + &__content-container { + width: 100%; + border-bottom: 1px solid $gallery; + } + + &__input-container { + padding: 11px 0; + width: 263px; + margin: 0 auto; + position: relative; + } + + &__search-input-error-message { + position: absolute; + bottom: -10px; + font-size: 12px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: $red; + } + + &__input { + width: 100%; + border: 2px solid $gallery; + border-radius: 4px; + padding: 5px 15px; + font-size: 14px; + line-height: 19px; + + &::placeholder { + color: $silver; + } + } + + &__footers { + width: 100%; + } + + &__add-custom { + color: $scorpion; + font-size: 18px; + line-height: 24px; + text-align: center; + padding: 12px 0; + font-weight: 600; + cursor: pointer; + + &:hover { + background-color: $gallery; + } + } + + &__add-custom-form { + display: flex; + flex-flow: column nowrap; + margin: 8px 0 51px; + } + + &__add-custom-field { + width: 290px; + margin: 0 auto; + position: relative; + + &--error { + .add-token__add-custom-input { + border-color: $red; + } + } + } + + &__add-custom-error-message { + position: absolute; + bottom: -21px; + font-size: 12px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: $red; + } + + &__add-custom-label { + font-size: 16px; + line-height: 21px; + margin-bottom: 8px; + } + + &__add-custom-input { + width: 100%; + border: 1px solid $silver; + padding: 5px 15px; + font-size: 14px; + line-height: 19px; + + &::placeholder { + color: $silver; + } + } + + &__add-custom-field + &__add-custom-field { + margin-top: 21px; + } + + &__buttons { + display: flex; + flex-flow: column nowrap; + margin: 30px 0 51px; + flex: 0 0 auto; + } + + &__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 45%; + align-items: center; + padding: 12px; + margin: 2.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-name { + 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; + font-weight: 300; + line-height: 43px; + margin-right: 8px; + } + + &__symbol { + color: $scorpion; + font-size: 16px; + line-height: 24px; + } + } + } + + &__confirmation-title { + padding: 30px 120px 12px; + } + + &__confirmation-content { + padding-bottom: 60px; + } + + &__confirmation-token-list-item { + display: flex; + flex-flow: row nowrap; + padding: 0 120px; + align-items: center; + } + + &__confirmation-token-list-item + &__confirmation-token-list-item { + margin-top: 30px; + } + + &__confirmation-token-icon { + margin-right: 18px; + } +} diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss new file mode 100644 index 000000000..8ba084b4a --- /dev/null +++ b/ui/app/css/itcss/components/buttons.scss @@ -0,0 +1,108 @@ +/* + Buttons + */ + +.btn-green { + background-color: #02c9b1; // TODO: reusable color in colors.css +} + +button.btn-clear { + background: $white; + border: 1px solid; +} + +// No longer used in flat design, remove when modal buttons done +// div.wallet-btn { +// border: 1px solid rgb(91, 93, 103); +// border-radius: 2px; +// height: 30px; +// width: 75px; +// font-size: 0.8em; +// text-align: center; +// line-height: 25px; +// } + +// .btn-red { +// background: rgba(254, 35, 17, 1); +// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); +// } + +button[disabled], +input[type="submit"][disabled] { + cursor: not-allowed; + opacity: .5; + // background: rgba(197, 197, 197, 1); + // box-shadow: 0 3px 6px rgba(197, 197, 197, .36); +} + +// button.spaced { +// margin: 2px; +// } + +// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { +// transform: scale(1.1); +// } +// button:not([disabled]):active, input[type="submit"]:not([disabled]):active { +// transform: scale(0.95); +// } + +button.primary { + padding: 8px 12px; + background: #f7861c; + box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + color: $white; + font-size: 1.1em; + font-family: Roboto; + text-transform: uppercase; +} + +.btn-light { + padding: 8px 12px; + // background: #FFFFFF; // $bg-white + box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + color: #585d67; // TODO: make reusable light button color + font-size: 1.1em; + font-family: Roboto; + text-transform: uppercase; + text-align: center; + line-height: 20px; + border-radius: 2px; + border: 1px solid #979797; // #TODO: make reusable light border color + opacity: .5; +} + +// TODO: cleanup: not used anywhere +button.btn-thin { + border: 1px solid; + border-color: #4d4d4d; + color: #4d4d4d; + background: rgb(255, 174, 41); + border-radius: 4px; + min-width: 200px; + margin: 12px 0; + padding: 6px; + font-size: 13px; +} + +.btn-secondary { + border: 1px solid #979797; + border-radius: 2px; + background-color: $white; + font-size: 16px; + line-height: 24px; + padding: 16px 42px; + + &[disabled] { + background-color: $white !important; + opacity: .5; + } +} + +.btn-tertiary { + border: 1px solid transparent; + border-radius: 2px; + background-color: transparent; + font-size: 16px; + line-height: 24px; + padding: 16px 42px; +} diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss new file mode 100644 index 000000000..d4f0fe5ac --- /dev/null +++ b/ui/app/css/itcss/components/confirm.scss @@ -0,0 +1,309 @@ +.confirm-screen-container { + position: relative; + align-items: center; + font-family: Roboto; + flex: 0 0 auto; + flex-flow: column nowrap; + box-shadow: 0 2px 4px 0 rgba($black, .08); + border-radius: 8px; + + @media screen and (max-width: 575px) { + width: 100%; + } + + @media screen and (min-width: 576px) { + // top: -26px; + } +} + +.confirm-screen-wrapper { + height: 100%; + width: 380px; + background-color: $white; + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + overflow-y: auto; + overflow-x: hidden; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + + @media screen and (max-width: $break-small) { + width: 100%; + overflow-x: hidden; + overflow-y: auto; + top: 0; + box-shadow: none; + height: calc(100vh - 58px - 100px); + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +.confirm-screen-wrapper > .confirm-screen-total-box { + margin-left: 10px; + margin-right: 10px; +} + +.confirm-screen-wrapper > .confirm-memo-wrapper { + margin: 0; +} + +.confirm-screen-header { + height: 88px; + background-color: $athens-grey; + position: relative; + display: flex; + justify-content: center; + align-items: center; + font-size: 22px; + line-height: 29px; + width: 100%; + padding: 25px 0; + flex: 0 0 auto; + + @media screen and (max-width: $break-small) { + font-size: 22px; + } +} + +.confirm-screen-header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 71px; +} + +.confirm-screen-title { + line-height: 27px; + + @media screen and (max-width: $break-small) { + margin-left: 22px; + margin-right: 8px; + } +} + +.confirm-screen-back-button { + background: transparent; + border: 1px solid $curious-blue; + left: 24px; + position: absolute; + text-align: center; + color: $curious-blue; + padding: 6px 13px 7px 12px; + border-radius: 2px; + height: 30px; + width: 54px; + + @media screen and (max-width: $break-small) { + margin-right: 12px; + } +} + +.confirm-screen-account-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} + +.confirm-screen-account-name { + margin-top: 12px; + font-size: 14px; + line-height: 19px; + color: $scorpion; + text-align: center; +} + +.confirm-screen-row-info { + font-size: 16px; + line-height: 21px; +} + +.confirm-screen-account-number { + font-size: 10px; + line-height: 16px; + color: $dusty-gray; + text-align: center; + height: 16px; +} + +.confirm-screen-identicons { + margin-top: 24px; + flex: 0 0 auto; + + i.fa-arrow-right { + align-self: start; + margin: 42px 14px 0; + } + + i.fa-file-text-o { + font-size: 60px; + margin: 16px 8px 0 8px; + text-align: center; + } +} + +.confirm-screen-sending-to-message { + text-align: center; + font-size: 16px; + margin-top: 30px; + font-family: 'DIN NEXT Light'; +} + +.confirm-screen-send-amount { + color: $scorpion; + margin-top: 12px; + text-align: center; + font-size: 40px; + font-weight: 300; + line-height: 53px; + flex: 0 0 auto; +} + +.confirm-screen-send-amount-currency { + font-size: 20px; + line-height: 20px; + text-align: center; + flex: 0 0 auto; +} + +.confirm-memo-wrapper { + min-height: 24px; + width: 100%; + border-bottom: 1px solid $alto; + flex: 0 0 auto; +} + +.confirm-screen-send-memo { + color: $scorpion; + font-size: 16px; + line-height: 19px; + font-weight: 400; +} + +.confirm-screen-label { + font-size: 18px; + line-height: 40px; + color: $scorpion; + text-align: left; +} + +section .confirm-screen-account-name, +section .confirm-screen-account-number, +.confirm-screen-row-info, +.confirm-screen-row-detail { + text-align: left; +} + +.confirm-screen-rows { + display: flex; + flex-flow: column nowrap; + width: 100%; + flex: 0 0 auto; +} + +.confirm-screen-section-column { + flex: .5; +} + +.confirm-screen-row { + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid $alto; + width: 100%; + align-items: center; + padding: 12px; + padding-left: 35px; + font-size: 16px; + line-height: 22px; + font-weight: 300; +} + +.confirm-screen-row-detail { + font-size: 12px; + line-height: 16px; + color: $dusty-gray; +} + +.confirm-screen-total-box { + background-color: $wild-sand; + padding: 20px; + padding-left: 35px; + border-bottom: 1px solid $alto; + + .confirm-screen-label { + line-height: 18px; + } + + .confirm-screen-row-detail { + color: $scorpion; + } + + &__subtitle { + font-size: 12px; + line-height: 22px; + } + + .confirm-screen-row-info { + font-size: 16px; + font-weight: 500; + line-height: 21px; + } +} + +.confirm-screen-confirm-button { + height: 62px; + border-radius: 2px; + background-color: #02c9b1; + font-size: 16px; + color: $white; + text-align: center; + font-family: Roboto; + padding-top: 15px; + padding-bottom: 15px; + border-width: 0; + box-shadow: none; + flex: 1 0 auto; + font-weight: 300; +} + +.btn-light.confirm-screen-cancel-button { + height: 62px; + background: none; + border: none; + opacity: 1; + font-family: Roboto; + border-width: 0; + padding-top: 15px; + padding-bottom: 15px; + font-size: 16px; + line-height: 32px; + box-shadow: none; + cursor: pointer; + flex: 1 0 auto; + font-weight: 300; +} + +#pending-tx-form { + flex: 1 0 auto; + position: relative; + display: flex; + flex-flow: row nowrap; + background-color: $white; + padding: 19px 18px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + width: 100%; + + @media screen and (max-width: $break-small) { + border-top: 1px solid $alto; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss new file mode 100644 index 000000000..f2cc6e700 --- /dev/null +++ b/ui/app/css/itcss/components/currency-display.scss @@ -0,0 +1,46 @@ +.currency-display { + height: 54px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + padding: 8px 10px; + position: relative; + + &__primary-row { + display: flex; + } + + &__input { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + border: none; + outline: 0 !important; + } + + &__primary-currency { + color: $scorpion; + font-weight: 400; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + } + + &__converted-row { + display: flex; + } + + &__converted-value, + &__converted-currency { + color: $dusty-gray; + font-family: Roboto; + font-size: 12px; + line-height: 12px; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/footer.scss b/ui/app/css/itcss/components/footer.scss new file mode 100644 index 000000000..000a53eed --- /dev/null +++ b/ui/app/css/itcss/components/footer.scss @@ -0,0 +1,4 @@ +.app-footer { + padding-bottom: 10px; + align-items: center; +} diff --git a/ui/app/css/itcss/components/gas-slider.scss b/ui/app/css/itcss/components/gas-slider.scss new file mode 100644 index 000000000..c27a560bd --- /dev/null +++ b/ui/app/css/itcss/components/gas-slider.scss @@ -0,0 +1,51 @@ +.gas-slider { + position: relative; + width: 313px; + + &__input { + width: 317px; + margin-left: -2px; + z-index: 2; + } + + input[type=range] { + -webkit-appearance: none !important; + } + + input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none !important; + height: 26px; + width: 26px; + border: 2px solid #B8B8B8; + background-color: #FFFFFF; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + border-radius: 50%; + position: relative; + z-index: 10; + } + + &__bar { + height: 6px; + width: 313px; + background: $alto; + display: flex; + justify-content: space-between; + position: absolute; + top: 11px; + z-index: 0; + } + + &__low, &__high { + height: 6px; + width: 49px; + z-index: 1; + } + + &__low { + background-color: $crimson; + } + + &__high { + background-color: $caribbean-green; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss new file mode 100644 index 000000000..ef84dc3f4 --- /dev/null +++ b/ui/app/css/itcss/components/header.scss @@ -0,0 +1,95 @@ +.app-header { + align-items: center; + visibility: visible; + background: $gallery; + position: relative; + z-index: $header-z-index; + display: flex; + flex-flow: column nowrap; + + @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; + } + + @media screen and (min-width: 576px) { + height: 75px; + justify-content: center; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 32px; + background: $gallery; + bottom: -32px; + } + } +} + +.app-header-contents { + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + width: 100%; + height: 6.9vh; + + @media screen and (max-width: 575px) { + height: 100%; + } + + @media screen and (min-width: 576px) { + width: 85vw; + } + + @media screen and (min-width: 769px) { + width: 80vw; + } + + @media screen and (min-width: 1281px) { + width: 65vw; + } +} + +.app-header h1 { + font-family: Roboto; + text-transform: uppercase; + font-weight: 400; + color: #22232c; // $shark + + @media screen and (max-width: 575px) { + display: none; + } +} + +h2.page-subtitle { + text-transform: uppercase; + color: #aeaeae; + font-size: 1em; + margin: 12px; +} + +.network-component-wrapper { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 20px; +} + +.left-menu-wrapper { + display: flex; + flex-direction: row; + align-items: center; +} + +.header__right-actions { + display: flex; + flex-flow: row nowrap; + align-items: center; + + .identicon { + cursor: pointer; + } +} diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss new file mode 100644 index 000000000..8f6731358 --- /dev/null +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -0,0 +1,110 @@ +.hero-balance { + + @media screen and (max-width: $break-small) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin: .3em .9em 0; + height: 80vh; + max-height: 225px; + } + + @media screen and (min-width: $break-large) { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 2.8em 2.37em .8em; + } + + .balance-container { + display: flex; + margin: 0; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: $break-small) { + flex-direction: column; + } + + @media screen and (min-width: $break-large) { + flex-direction: row; + flex-grow: 3; + } + } + + .balance-display { + + @media screen and (max-width: $break-small) { + text-align: center; + + .token-amount { + font-size: 175%; + margin-top: 12.5%; + } + + .fiat-amount { + font-size: 115%; + margin-top: 8.5%; + color: #a0a0a0; + } + } + + @media screen and (min-width: $break-large) { + margin-left: 3%; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 135%; + } + + .fiat-amount { + margin-top: .25%; + font-size: 105%; + } + } + } + + .balance-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + } + + .hero-balance-buttons { + + @media screen and (max-width: $break-small) { + width: 100%; + height: 100px; // needed a round number to set the heights of the buttons inside + } + + @media screen and (min-width: $break-large) { + flex-grow: 2; + justify-content: flex-end; + } + + button.btn-clear { + background: $white; + border: 1px solid; + border-radius: 2px; + font-size: 12px; + + @media screen and (max-width: $break-small) { + width: 23%; + height: 55%; + border-color: $black; + } + + @media screen and (min-width: $break-large) { + border-color: $curious-blue; + color: $curious-blue; + padding: 0; + width: 85px; + height: 34px; + } + } + } +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss new file mode 100644 index 000000000..fda002785 --- /dev/null +++ b/ui/app/css/itcss/components/index.scss @@ -0,0 +1,40 @@ +@import './buttons.scss'; + +@import './header.scss'; + +@import './footer.scss'; + +@import './network.scss'; + +@import './modal.scss'; + +@import './newui-sections.scss'; + +@import './account-dropdown.scss'; + +@import './send.scss'; + +@import './confirm.scss'; + +// Balances +@import './hero-balance.scss'; + +@import './wallet-balance.scss'; + +// Tx List and Sections +@import './transaction-list.scss'; + +@import './sections.scss'; + +@import './token-list.scss'; + +@import './add-token.scss'; + +@import './currency-display.scss'; + +@import './account-menu.scss'; + +@import './menu.scss'; + +@import './gas-slider.scss'; + diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss new file mode 100644 index 000000000..c98ee70d9 --- /dev/null +++ b/ui/app/css/itcss/components/menu.scss @@ -0,0 +1,58 @@ +.menu { + border-radius: 4px; + background: rgba($black, .8); + box-shadow: rgba($black, .15) 0 2px 2px 2px; + min-width: 150px; + color: $white; + + &__item { + padding: 18px; + display: flex; + flex-flow: row nowrap; + align-items: center; + position: relative; + z-index: 200; + + @media screen and (max-width: 575px) { + padding: 14px; + } + + &--clickable { + cursor: pointer; + + &:hover { + background-color: rgba($white, .05); + } + + &:active { + background-color: rgba($white, .1); + } + } + + &__icon { + height: 16px; + width: 16px; + margin-right: 14px; + } + + &__text { + font-size: 16px; + line-height: 21px; + } + } + + &__divider { + background-color: $scorpion; + width: 100%; + height: 1px; + } + + &__close-area { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 100; + } +} diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss new file mode 100644 index 000000000..1ffea58a9 --- /dev/null +++ b/ui/app/css/itcss/components/modal.scss @@ -0,0 +1,558 @@ +.modal > div:focus { + outline: none !important; +} + +// Buy Modal +.buy-modal-content { + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + font-family: Roboto; + padding: 0 16px; +} + +.buy-modal-content-option { + cursor: pointer; + color: #5B5D67; +} + +.qr-ellip-address, .ellip-address { + width: 247px; + border: none; + font-family: Roboto; + font-size: 14px; +} + +@media screen and (max-width: 575px) { + .buy-modal-content-title-wrapper { + justify-content: space-around; + width: 100%; + height: 100px; + } + + .buy-modal-content-title { + font-size: 26px; + margin-top: 15px; + } + + .buy-modal-content-options { + flex-direction: column; + padding: 5% 33%; + } + + .buy-modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + div.buy-modal-content-option { + display: flex; + flex-direction: column; + width: 80vw; + height: 15vh; + margin: 10px; + text-align: center; + border-radius: 6px; + border: 1px solid $black; + padding: 0% 7%; + + div.buy-modal-content-option-title { + font-size: 20px; + } + + div.buy-modal-content-option-subtitle { + font-size: 16px; + } + } +} + +@media screen and (min-width: 576px) { + .buy-modal-content-title-wrapper { + justify-content: space-around; + width: 100%; + height: 110px; + } + + .buy-modal-content-title { + font-size: 26px; + margin-top: 15px; + } + + .buy-modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + .buy-modal-content-options { + flex-direction: row; + margin: 20px 0 60px; + } + + div.buy-modal-content-option { + display: flex; + flex-direction: column; + width: 20vw; + height: 120px; + text-align: center; + border-radius: 6px; + border: 1px solid $black; + margin: 0 8px; + padding: 18px 0; + + div.buy-modal-content-option-title { + font-size: 20px; + margin-bottom: 12px; + + @media screen and (max-width: 679px) { + font-size: 14px; + } + + @media screen and (min-width: 1281px) { + font-size: 20px; + } + } + + div.buy-modal-content-option-subtitle { + font-size: 16px; + padding: 0 10px; + height: 25%; + + @media screen and (max-width: 679px) { + font-size: 10px; + padding: 0 10px; + margin-bottom: 5px; + line-height: 15px; + } + + @media screen and (min-width: 680px) { + font-size: 14px; + padding: 0 4px; + margin-bottom: 2px; + } + + @media screen and (min-width: 1281px) { + font-size: 16px; + padding: 0; + } + } + + div.buy-modal-content-footer { + margin-top: 8vh; + } + } +} + +// Edit Account Name Modal +.edit-account-name-modal-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; +} + +.edit-account-name-modal-cancel { + position: absolute; + top: 12px; + right: 20px; + font-size: 25px; +} + +.edit-account-name-modal-title { + margin: 15px; +} + +.edit-account-name-modal-save-button { + width: 33%; + height: 45px; + margin: 15px; + font-weight: 700; + margin-top: 25px; +} + +.edit-account-name-modal-input { + width: 90%; + height: 50px; + text-align: left; + margin: 10px; + padding: 10px; + font-size: 18px; +} + +// Account Modal Container +.account-modal-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + padding: 5px 0 31px 0; + border: 1px solid $silver; + border-radius: 4px; + font-family: Roboto; + + button { + cursor: pointer; + } +} + +.account-modal-back { + color: $dusty-gray; + position: absolute; + top: 13px; + left: 17px; + cursor: pointer; + + &__text { + margin-top: 2px; + font-family: Roboto; + font-size: 14px; + line-height: 18px; + } +} + +.account-modal-close::after { + content: '\00D7'; + font-size: 40px; + color: $dusty-gray; + position: absolute; + top: 10px; + right: 12px; + cursor: pointer; +} + +.account-modal-container .identicon { + position: relative; + left: 0; + right: 0; + margin: 0 auto; + top: -32px; + margin-bottom: -32px; +} + + +// Account Details Modal + +.account-modal-container { + + .qr-header { + margin-top: 9px; + font-size: 20px; + } + + .qr-wrapper { + margin-top: 5px; + } + + .ellip-address-wrapper { + display: flex; + justify-content: center; + border: 1px solid $alto; + padding: 5px 10px; + font-family: Roboto; + margin-top: 7px; + width: 286px; + } + + .btn-clear { + min-height: 28px; + font-size: 14px; + border-color: $curious-blue; + color: $curious-blue; + border-radius: 2px; + flex-basis: 100%; + width: 75%; + margin-top: 17px; + padding: 10px 22px; + height: 44px; + width: 235px; + font-family: Roboto; + } +} + +.account-modal-divider { + width: 100%; + height: 1px; + margin: 19px 0 8px 0; + background-color: $alto; +} + +// Export Private Key Modal + +.account-modal-container .account-name { + margin-top: 9px; + font-size: 20px; +} + +.account-modal-container .modal-body-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: 18px; +} + +.private-key-password { + display: flex; + flex-direction: column; +} + +.private-key-password-label, .private-key-password-error { + color: $scorpion; + font-size: 14px; + line-height: 18px; + margin-bottom: 10px; +} + +.private-key-password-error { + color: $crimson; + margin-bottom: 0; +} + +.private-key-password-input { + padding: 10px 0 13px 17px; + font-size: 16px; + line-height: 21px; + width: 291px; + height: 44px; +} + +.private-key-password::-webkit-input-placeholder { + color: $dusty-gray; + font-family: Roboto; +} + +.private-key-password-warning { + border-radius: 8px; + background-color: #FFF6F6; + font-size: 12px; + font-weight: 500; + line-height: 15px; + color: $crimson; + width: 292px; + padding: 9px 15px; + margin-top: 18px; + font-family: Roboto; +} + +.export-private-key-buttons { + display: flex; + flex-direction: row; + justify-content: center; + + .btn-clear { + width: 141px; + height: 54px; + } + + .btn-cancel { + margin-right: 15px; + border-color: $dusty-gray; + color: $scorpion; + } +} + +.private-key-password-display-wrapper { + height: 80px; + width: 291px; + border: 1px solid $silver; + border-radius: 2px; +} + +.private-key-password-display-textarea { + color: $crimson; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + border: none; + height: 75px; + width: 100%; + overflow: hidden; + resize: none; + padding: 9px 13px 8px; + text-transform: uppercase; +} + + +// New Account Modal +.new-account-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + border: 1px solid $alto; + box-shadow: 0 0 2px 2px $alto; + font-family: Roboto; +} + +.new-account-modal-header { + background: $wild-sand; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: $nile-blue; + height: 79px; +} + +.modal-close-x::after { + content: '\00D7'; + font-size: 2em; + color: $dusty-gray; + position: absolute; + top: 25px; + right: 17.5px; + font-family: sans-serif; + cursor: pointer; +} + +.new-account-modal-content { + width: 100%; + display: flex; + justify-content: center; + margin-top: 15px; + font-size: 17px; + color: $nile-blue; +} + +.new-account-modal-content.after-input { + margin-top: 15px; + line-height: 25px; +} + +.new-account-input-wrapper { + display: flex; + width: 100%; + justify-content: center; + padding-bottom: 2px; + margin-top: 13px; +} + +.new-account-input { + padding: 15px; + padding-bottom: 20px; + border-radius: 8px; + border: 1px solid $alto; + width: 100%; + font-size: 1em; + color: $dusty-gray; + font-family: Roboto; + font-size: 17px; + margin: 0 60px; +} + +// For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css +.new-account-input::-webkit-input-placeholder { + color: $dusty-gray; +} + +.new-account-input:-moz-placeholder { + color: $dusty-gray; + opacity: 1; +} + +.new-account-input::-moz-placeholder { + color: $dusty-gray; + opacity: 1; +} + +.new-account-input:-ms-input-placeholder { + color: $dusty-gray; +} + +.new-account-input::-ms-input-placeholder { + color: $dusty-gray; +} + +.new-account-modal-content.button { + margin-top: 22px; + margin-bottom: 30px; + width: 113px; + height: 44px; +} + +.new-account-modal-wrapper .btn-clear { + font-size: 14px; + font-weight: 700; + background: $white; + border: 1px solid; + border-radius: 2px; + color: $tundora; + flex: 1; +} + +// Hide token confirmation + +.hide-token-confirmation { + min-height: 250.72px; + width: 374.49px; + border-radius: 4px; + background-color: #FFFFFF; + box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + + &__container { + padding: 24px 27px 21px; + display: flex; + flex-direction: column; + align-items: center; + } + + &__identicon { + margin-bottom: 10px + } + + &__symbol { + color: $tundora; + font-family: Roboto; + font-size: 16px; + line-height: 24px; + text-align: center; + margin-bottom: 7.5px; + } + + &__title { + height: 30px; + width: 271.28px; + color: $tundora; + font-family: Roboto; + font-size: 22px; + line-height: 30px; + text-align: center; + margin-bottom: 10.5px; + } + + &__copy { + height: 41px; + width: 318px; + color: $scorpion; + font-family: Roboto; + font-size: 14px; + line-height: 18px; + text-align: center; + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 15px; + width: 100%; + + button { + height: 44px; + width: 113px; + border: 1px solid $scorpion; + border-radius: 2px; + color: $tundora; + font-family: Roboto; + font-size: 14px; + line-height: 20px; + text-align: center; + margin-left: 4px; + margin-right: 4px; + } + } +} diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss new file mode 100644 index 000000000..bb8c4eea8 --- /dev/null +++ b/ui/app/css/itcss/components/network.scss @@ -0,0 +1,160 @@ +.network-component.pointer { + border: 1px solid $shark; + border-radius: 82px; + padding: 6px; + flex: 0 0 auto; + + &.ethereum-network { + border-color: rgb(3, 135, 137); + + .menu-icon-circle div { + background-color: rgba(3, 135, 137, .7) !important; + } + } + + &.ropsten-test-network { + border-color: rgb(233, 21, 80); + + .menu-icon-circle div { + background-color: rgba(233, 21, 80, .7) !important; + } + } + + &.kovan-test-network { + border-color: rgb(105, 4, 150); + + .menu-icon-circle div { + background-color: rgba(105, 4, 150, .7) !important; + } + } + + &.rinkeby-test-network { + border-color: rgb(235, 179, 63); + + .menu-icon-circle div { + background-color: rgba(235, 179, 63, .7) !important; + } + } +} + +.dropdown-menu-item { + .menu-icon-circle, + .menu-icon-circle--active { + margin: 0 16px; + } +} + +.network-indicator { + display: flex; + align-items: center; + font-size: .6em; + + .fa-caret-down { + line-height: 15px; + font-size: 12px; + padding: 0 4px; + } +} + +.network-name { + line-height: 15px; + padding: 0 4px; + font-family: Roboto; + font-size: 12px; + flex: 1 0 auto; +} + +.network-droppo { + right: 2px; + + @media screen and (min-width: 576px) { + right: calc(((100% - 85vw) / 2) + 2px); + } + + @media screen and (min-width: 769px) { + right: calc(((100% - 80vw) / 2) + 2px); + } + + @media screen and (min-width: 1281px) { + right: calc(((100% - 65vw) / 2) + 2px); + } +} + +.network-name-item { + font-weight: 100; + flex: 1 0 auto; + color: $dusty-gray; +} + +.network-check, +.network-check__transparent { + color: $white; + margin-left: 7px; +} + +.network-check__transparent { + opacity: 0; + width: 16px; + margin: 0; +} + +.menu-icon-circle, +.menu-icon-circle--active { + background: none; + border-radius: 22px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid transparent; + margin: 0 4px; +} + +.menu-icon-circle--active { + border: 1px solid $white; + background: rgba(100, 100, 100, .4); +} + +.menu-icon-circle div, +.menu-icon-circle--active div { + height: 17px; + width: 17px; + border-radius: 17px; +} + +.menu-icon-circle--active div { + opacity: 1; +} + +.network-dropdown-header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.network-dropdown-divider { + width: 100%; + height: 1px; + margin: 10px 0; + background-color: $scorpion; +} + +.network-dropdown-title { + height: 25px; + width: 75px; + color: $white; + font-family: Roboto; + font-size: 18px; + line-height: 25px; + text-align: center; +} + +.network-dropdown-content { + height: 36px; + width: 265px; + color: $dusty-gray; + font-family: Roboto; + font-size: 14px; + line-height: 18px; +} + diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss new file mode 100644 index 000000000..fc1dba87c --- /dev/null +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -0,0 +1,189 @@ +/* + NewUI Container Elements + */ + +// Component Colors +$tx-view-bg: $white; +$wallet-view-bg: $wild-sand; + +// Main container +.main-container { + // position: absolute; + z-index: $main-container-z-index; + font-family: Roboto; + display: flex; + flex-wrap: wrap; + align-items: stretch; +} + +.main-container::-webkit-scrollbar { + display: none; +} + +// tx view + +.tx-view { + flex: 63.5 0 66.5%; + background: $tx-view-bg; +} + +// wallet view and sidebar + +.wallet-view { + display: flex; + flex-direction: column; + flex: 33.5 0 33.5%; + background: $wallet-view-bg; + + @media screen and (min-width: 576px) { + overflow-y: scroll; + overflow-x: hidden; + } + + .wallet-view-account-details { + flex: 0 0 150px; + } +} + +@media screen and (min-width: 576px) { + .wallet-view::-webkit-scrollbar { + display: none; + } +} + +.wallet-view-title-wrapper { + flex: 0 0 25px; +} + +.wallet-view-title { + margin-left: 15px; + font-size: 16px; + + // No title on mobile + @media screen and (max-width: 575px) { + display: none; + } +} + +.wallet-view.sidebar { + flex: 1 0 230px; + background: rgb(250, 250, 250); + z-index: $sidebar-z-index; + position: fixed; + // top: 41px; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + visibility: visible; + will-change: transform; + overflow-y: auto; + box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; + width: 85%; + height: 100%; +} + +.sidebar-overlay { + z-index: $sidebar-overlay-z-index; + position: fixed; + // top: 41px; + height: 100%; + width: 100%; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + visibility: visible; + background-color: rgba(0, 0, 0, .3); +} + +// main-container media queries + +@media screen and (min-width: 576px) { + .lap-visible { + display: flex; + } + + .phone-visible { + display: none; + } + + .main-container { + // margin-top: 6.9vh; + width: 85%; + height: 90vh; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + } +} + +@media screen and (min-width: 769px) { + .main-container { + // margin-top: 6.9vh; + width: 80%; + height: 82vh; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + } +} + +@media screen and (min-width: 1281px) { + .main-container { + // margin-top: 6.9vh; + width: 65%; + height: 82vh; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + } +} + +@media screen and (max-width: 575px) { + .lap-visible { + display: none; + } + + .phone-visible { + display: flex; + } + + .main-container { + // margin-top: 41px; + height: 100%; + width: 100%; + overflow-y: auto; + background-color: $white; + } + + button.btn-clear { + width: 93px; + height: 50px; + font-size: .7em; + background: $white; + border: 1px solid; + } +} + +// 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; + } +} + +// account options dropdown +.account-options-menu { + align-items: center; + justify-content: flex-start; + margin: 5% 7% 0%; +} + +.fiat-amount { + text-transform: uppercase; +} + +.token-balance__amount { + padding-right: 6px; +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss new file mode 100644 index 000000000..bc89fdccc --- /dev/null +++ b/ui/app/css/itcss/components/sections.scss @@ -0,0 +1,474 @@ +// Old scss, do not lint - clean up later +/* stylelint-disable */ + + +/* +App Sections + TODO: Move into separate files. +*/ + +/* initialize */ +textarea.twelve-word-phrase { + padding: 12px; + width: 300px; + height: 140px; + font-size: 16px; + background: $white; + resize: none; +} + +.initialize-screen hr { + width: 60px; + margin: 12px; + border-color: #f7861c; + border-style: solid; +} + +.initialize-screen label { + margin-top: 20px; +} + +.initialize-screen button.create-vault { + margin-top: 40px; +} + +.initialize-screen .warning { + font-size: 14px; + margin: 0 16px; +} + +/* unlock */ +.error { + color: #e20202; +} + +.warning { + color: #ffae00; +} + +.lock { + width: 50px; + height: 50px; +} + +.lock.locked { + transform: scale(1.5); + opacity: 0; + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.lock.unlocked { + transform: scale(1); + opacity: 1; + transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease-in; +} + +.lock.locked .lock-top { + transform: scaleX(1) translateX(0); + transition: transform 250ms ease-in; +} + +.lock.unlocked .lock-top { + transform: scaleX(-1) translateX(-12px); + transition: transform 250ms ease-in; +} + +.lock.unlocked:hover { + border-radius: 4px; + background: #e5e5e5; + border: 1px solid #b1b1b1; +} + +.lock.unlocked:active { + background: #c3c3c3; +} + +.section-title .fa-arrow-left { + 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; + padding-left: 5px; +} + +.editable-label { + 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 { + margin: 0 0px; +} + +.accounts-section .horizontal-line { + margin: 0 18px; +} + +.accounts-list-option { + height: 120px; +} + +.accounts-list-option .identicon-wrapper { + width: 100px; +} + +.unconftx-link { + margin-top: 24px; + cursor: pointer; +} + +.unconftx-link .fa-arrow-right { + margin: 0 -8px 0px 8px; +} + +/* identity panel */ + +.identity-panel { + font-weight: 500; +} + +.identity-panel .identicon-wrapper { + margin: 4px; + margin-top: 8px; + display: flex; + align-items: center; +} + +.identity-panel .identicon-wrapper span { + margin: 0 auto; +} + +.identity-panel .identity-data { + margin: 8px 8px 8px 18px; +} + +.identity-panel i { + margin-top: 32px; + margin-right: 6px; + color: #b9b9b9; +} + +.identity-panel .arrow-right { + padding-left: 18px; + width: 42px; + min-width: 18px; + height: 100%; +} + +.identity-copy.flex-column { + flex: .25 0 auto; + justify-content: center; +} + +/* accounts screen */ + +.identity-section { +} + +.identity-section .identity-panel { + background: #e9e9e9; + border-bottom: 1px solid #b1b1b1; + cursor: pointer; +} + +.identity-section .identity-panel.selected { + background: $white; + color: #f3c83e; +} + +.identity-section .identity-panel.selected .identicon { + border-color: $orange; +} + +.identity-section .accounts-list-option:hover, +.identity-section .accounts-list-option.selected { + background: $white; +} + +/* account detail screen */ + +.account-detail-section { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + flex-direction: inherit; +} + +.grow-tenx { + flex-grow: 10; +} + +.name-label { +} + +.unapproved-tx-icon { + height: 16px; + width: 16px; + background: rgb(47, 174, 244); + border-color: $silver-chalice; + border-radius: 13px; +} + +.edit-text { + height: 100%; + visibility: hidden; +} + +.editing-label { + display: flex; + justify-content: flex-start; + margin-left: 50px; + margin-bottom: 2px; + font-size: 11px; + text-rendering: geometricPrecision; + color: #f7861c; +} + +.name-label:hover .edit-text { + visibility: visible; +} +/* tx confirm */ + +.unconftx-section input[type=password] { + height: 22px; + padding: 2px; + margin: 12px; + margin-bottom: 24px; + border-radius: 4px; + border: 2px solid #f3c83e; + background: #faf6f0; +} + +/* Ether Balance Widget */ + +.ether-balance-amount { + color: #f7861c; +} + +.ether-balance-label { + color: #aba9aa; +} + +/* Info screen */ +.info-gray { + font-family: Roboto; + text-transform: uppercase; + color: $silver-chalice; +} + +.icon-size { + width: 20px; +} + +.info { + font-family: Roboto, Arial; + padding-bottom: 10px; + display: inline-block; + padding-left: 5px; +} + +/* buy eth warning screen */ +.custom-radios { + justify-content: space-around; + align-items: center; +} + +.custom-radio-selected { + width: 17px; + height: 17px; + border: solid; + border-style: double; + border-radius: 15px; + border-width: 5px; + background: rgba(247, 134, 28, 1); + border-color: #f7f7f7; +} + +.custom-radio-inactive { + width: 14px; + height: 14px; + border: solid; + border-width: 1px; + border-radius: 24px; + border-color: $silver-chalice; +} + +.radio-titles { + color: rgba(247, 134, 28, 1); +} + +.eth-warning { + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.buy-subview { + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.input-container:hover .edit-text { + visibility: visible; +} + +.buy-inputs { + font-family: Roboto; + font-size: 13px; + height: 20px; + background: transparent; + box-sizing: border-box; + border: solid; + border-color: transparent; + border-width: .5px; + border-radius: 2px; +} + +.input-container:hover .buy-inputs { + box-sizing: inherit; + border: solid; + border-color: #f7861c; + border-width: .5px; + border-radius: 2px; +} + +.buy-inputs:focus { + border: solid; + border-color: #f7861c; + border-width: .5px; + border-radius: 2px; +} + +.activeForm { + background: #f7f7f7; + border: none; + border-radius: 8px 8px 0px 0px; + width: 50%; + text-align: center; + padding-bottom: 4px; +} + +.inactiveForm { + border: none; + border-radius: 8px 8px 0px 0px; + width: 50%; + text-align: center; + padding-bottom: 4px; +} + +.ex-coins { + font-family: Roboto; + text-transform: uppercase; + text-align: center; + font-size: 33px; + width: 118px; + height: 42px; + padding: 1px; + color: #4d4d4d; +} + +.marketinfo { + font-family: Roboto; + color: $silver-chalice; + font-size: 15px; + line-height: 17px; +} + +#fromCoin::-webkit-calendar-picker-indicator { + display: none; +} + +#coinList { + width: 400px; + height: 500px; + overflow: scroll; +} + +.icon-control .fa-refresh { + visibility: hidden; +} + +.icon-control:hover .fa-refresh { + visibility: visible; +} + +.icon-control:hover .fa-chevron-right { + visibility: hidden; +} + +.inactive { + color: $silver-chalice; +} + +.inactive button { + background: $silver-chalice; + color: $white; +} + +.qr-ellip-address, .ellip-address { + overflow: hidden; + text-overflow: ellipsis; +} + +.qr-header { + font-size: 25px; + margin-top: 40px; +} + +.qr-message { + font-size: 12px; + color: #f7861c; +} + +div.message-container > div:first-child { + margin-top: 18px; + font-size: 15px; + color: #4d4d4d; +} + +.pop-hover:hover { + transform: scale(1.1); +} + +/* stylelint-enable */ diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss new file mode 100644 index 000000000..7e72e8399 --- /dev/null +++ b/ui/app/css/itcss/components/send.scss @@ -0,0 +1,803 @@ +.send-screen-wrapper { + display: flex; + flex-flow: column nowrap; + z-index: 25; + font-family: Roboto; + + @media screen and (max-width: $break-small) { + width: 100%; + overflow-y: auto; + } + + section { + flex: 0 0 auto; + } +} + +.send-screen-card { + background-color: #fff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + padding: 46px 40.5px 26px; + position: relative; + // top: -26px; + align-items: center; + display: flex; + flex-flow: column nowrap; + width: 498px; + flex: 1 0 auto; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + box-shadow: none; + padding: 12px; + } +} + +/* Send Screen */ + +.send-screen section { + margin: 4px 16px; +} + +.send-screen input { + width: 100%; + font-size: 12px; +} + +.send-eth-icon { + border-radius: 50%; + width: 70px; + height: 70px; + border: 1px solid $alto; + box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); + position: absolute; + top: -35px; + z-index: 25; + padding: 4px; + background-color: $white; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } +} + +.send-screen-input-wrapper { + width: 95%; + position: relative; + + .fa-bolt { + padding-right: 4px; + } + + .large-input { + border: 1px solid $dusty-gray; + border-radius: 4px; + margin: 4px 0 20px; + font-size: 16px; + line-height: 22.4px; + font-family: Roboto; + } + + .send-screen-gas-input { + border: 1px solid transparent; + } + + &__error-message { + display: none; + } + + &--error { + input, + .send-screen-gas-input { + border-color: $red !important; + } + + .send-screen-input-wrapper__error-message { + display: block; + position: absolute; + bottom: 4px; + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } + } + + .send-screen-input-wrapper__error-message { + display: block; + position: absolute; + bottom: 4px; + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } +} + +.send-screen-input { + width: 100%; +} + +.send-screen-gas-input { + width: 100%; + height: 41px; + border-radius: 3px; + background-color: #f3f3f3; + border-width: 0; + border-style: none; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 10px; + padding-right: 12px; + font-size: 16px; + color: $scorpion; +} + +.send-screen-amount-labels { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.send-screen-gas-labels { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.currency-toggle { + &__item { + color: $curious-blue; + cursor: pointer; + + &--selected { + color: $black; + cursor: default; + } + } +} + +.send-screen-gas-input-customize { + color: $curious-blue; + font-size: 12px; + cursor: pointer; +} + +.gas-tooltip-close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; +} + +.customize-gas-tooltip-container { + position: absolute; + bottom: 50px; + width: 237px; + height: 307px; + background-color: $white; + opacity: 1; + box-shadow: $alto 0 0 5px; + z-index: 1050; + padding: 13px 19px; + font-size: 16px; + border-radius: 4px; + font-family: "Lato"; + font-weight: 500; +} + +.gas-tooltip-arrow { + height: 25px; + width: 25px; + z-index: 1200; + background: $white; + position: absolute; + transform: rotate(45deg); + left: 107px; + top: 294px; + box-shadow: 2px 2px 2px $alto; +} + +.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; +} + +.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; +} + +.customize-gas-tooltip { + position: relative; +} + +.gas-tooltip { + display: flex; + justify-content: center; +} + +.gas-tooltip-label { + font-size: 16px; + color: $tundora; +} + +.gas-tooltip-header { + padding-bottom: 12px; +} + +.gas-tooltip-input-label { + margin-bottom: 5px; +} + +.gas-tooltip-input-label i { + color: $silver-chalice; + margin-left: 6px; +} + +.customize-gas-input { + width: 178px; + height: 28px; + border: 1px solid $alto; + font-size: 16px; + color: $nile-blue; + padding-left: 8px; +} + +.customize-gas-input-wrapper { + position: relative; +} + +.gas-tooltip-input-detail { + position: absolute; + top: 4px; + right: 26px; + font-size: 12px; + color: $silver-chalice; +} + +.gas-tooltip-input-arrows { + position: absolute; + top: 0; + right: 4px; + width: 17px; + height: 28px; + border: 1px solid #dadada; + border-left: 0; + display: flex; + flex-direction: column; + color: #9b9b9b; + font-size: .8em; + padding: 1px 4px; +} + +.token-gas { + &__amount { + display: inline-block; + margin-right: 4px; + } + + &__symbol { + display: inline-block; + } +} + +.send-screen { + &__title { + color: $scorpion; + font-size: 18px; + line-height: 29px; + } + + &__subtitle { + margin: 10px 0 20px; + font-size: 14px; + line-height: 24px; + } + + &__send-button, + &__cancel-button { + width: 163px; + text-align: center; + } + + &__send-button__disabled { + opacity: .5; + cursor: auto; + } +} + +.send-token { + display: flex; + flex-flow: column nowrap; + z-index: 25; + font-family: Roboto; + + &__content { + width: 498px; + height: 605px; + background-color: #fff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + padding: 46px 40.5px 26px; + position: relative; + // top: -26px; + align-items: center; + display: flex; + flex-flow: column nowrap; + flex: 1 0 auto; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + box-shadow: none; + padding: 12px; + } + } + + .identicon { + position: absolute; + top: -35px; + z-index: 25; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + flex: 0 0 auto; + } + } + + &__title { + color: $scorpion; + font-size: 18px; + line-height: 29px; + } + + &__description, + &__balance-text, + &__token-symbol { + margin-top: 10px; + font-size: 14px; + line-height: 24px; + text-align: center; + } + + &__token-balance { + font-size: 40px; + line-height: 40px; + margin-top: 13px; + + .token-balance__amount { + padding-right: 12px; + } + } + + &__button-group { + display: flex; + flex-flow: column nowrap; + align-items: center; + flex: 0 0 auto; + + @media screen and (max-width: $break-small) { + margin-top: 24px; + } + + button { + width: 163px; + } + } +} + +.confirm-send-token { + &__hero-amount-wrapper { + width: 100%; + } +} + +.send-v2 { + &__container { + height: 701px; + width: 380px; + border-radius: 8px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + + @media screen and (max-width: $break-small) { + width: 100%; + overflow-y: auto; + top: 0; + box-shadow: none; + } + } + + &__send-header-icon-container { + z-index: 25; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } + } + + &__send-header-icon { + border-radius: 50%; + width: 48px; + height: 48px; + border: 1px solid $alto; + z-index: 25; + padding: 4px; + background-color: $white; + } + + &__send-arrow-icon { + color: #f28930; + transform: rotate(-45deg); + position: absolute; + top: -2px; + left: 0; + font-size: 1.12em; + } + + &__arrow-background { + background-color: $white; + height: 14px; + width: 14px; + position: absolute; + top: 52px; + left: 199px; + border-radius: 50%; + z-index: 100; + } + + &__header { + height: 88px; + width: 380px; + background-color: $athens-grey; + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + &__header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 65px; + } + + &__title { + color: $scorpion; + font-size: 22px; + line-height: 29px; + text-align: center; + margin-top: 25px; + } + + &__copy { + color: $gray; + font-size: 14px; + font-weight: 300; + line-height: 19px; + text-align: center; + margin-top: 10px; + width: 287px; + } + + &__error { + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } + + &__error-border { + color: $red; + } + + &__form { + display: flex; + flex-direction: column; + margin-top: 13px; + width: 100%; + } + + &__form-row { + margin: 14.5px 18px 0px; + display: flex; + position: relative; + justify-content: space-between; + } + + &__form-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + display: flex; + flex-flow: column; + justify-content: center; + } + + &__from-dropdown { + height: 73px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + color: $tundora; + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__list { + z-index: 1050; + position: absolute; + height: 220px; + width: 240px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + margin-top: 11px; + margin-left: -1px; + overflow-y: scroll; + } + } + + &__to-autocomplete, &__memo-text-area { + &__input { + height: 54px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $dusty-gray; + padding: 10px; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + font-weight: 300; + } + } + + &__sliders-icon-container { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + border: 1px solid $curious-blue; + border-radius: 4px; + background-color: $white; + padding: 5px; + position: absolute; + right: 15px; + top: 14px; + cursor: pointer; + } + + &__sliders-icon { + color: $curious-blue; + } + + &__memo-text-area { + &__input { + padding: 6px 10px; + } + } + + &__footer { + height: 92px; + width: 100%; + display: flex; + justify-content: space-evenly; + align-items: center; + border-top: 1px solid $alto; + margin-top: 29px; + } + + &__next-btn, + &__cancel-btn { + 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; + } + + &__next-btn__disabled { + opacity: .5; + cursor: auto; + } + + &__next-btn { + color: $curious-blue; + border-color: $curious-blue; + } + + &__cancel-btn { + color: $dusty-gray; + border-color: $dusty-gray; + } + + &__customize-gas { + border: 1px solid #D8D8D8; + border-radius: 4px; + background-color: #FFFFFF; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); + font-family: Roboto; + display: flex; + flex-flow: column; + + @media screen and (max-width: $break-small) { + width: 355px; + height: 598px; + } + + &__header { + height: 52px; + border-bottom: 1px solid $alto; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 22px; + } + + &__title { + margin-left: 19.25px; + } + + &__close::after { + content: '\00D7'; + font-size: 1.8em; + color: $dusty-gray; + font-family: sans-serif; + cursor: pointer; + margin-right: 19.25px; + } + + &__body { + height: 248px; + display: flex; + + @media screen and (max-width: $break-small) { + width: 355px; + height: 470px; + flex-flow: column; + } + } + + &__footer { + height: 75px; + border-top: 1px solid $alto; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 22px; + } + + &__buttons { + display: flex; + justify-content: space-between; + width: 181.75px; + margin-right: 21.25px; + } + + &__revert, &__cancel, &__save { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + &__revert { + color: $silver-chalice; + font-size: 16px; + margin-left: 21.25px; + } + + &__cancel, &__save { + height: 34.64px; + width: 85.74px; + border: 1px solid $dusty-gray; + border-radius: 2px; + font-family: 'DIN OT'; + font-size: 12px; + color: $dusty-gray; + } + } + + &__gas-modal-card { + width: 360px; + display: flex; + flex-flow: column; + align-items: flex-start; + padding-left: 20px; + + &__title { + height: 26px; + width: 84px; + color: $tundora; + font-family: Roboto; + font-size: 20px; + font-weight: 300; + line-height: 26px; + margin-top: 17px; + } + + &__copy { + height: 38px; + width: 314px; + color: $tundora; + font-family: Roboto; + font-size: 14px; + line-height: 19px; + margin-top: 17px; + } + + .customize-gas-input-wrapper { + margin-top: 17px; + } + + .customize-gas-input { + height: 54px; + width: 315px; + border: 1px solid $geyser; + background-color: $white; + padding-left: 15px; + } + + .gas-tooltip-input-arrows { + width: 32px; + height: 54px; + border-left: 1px solid #dadada; + font-size: 18px; + color: $tundora; + right: 0px; + padding: 1px 4px; + display: flex; + justify-content: space-around; + align-items: center; + } + + input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } + + input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } + } +} diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss new file mode 100644 index 000000000..bbc64c324 --- /dev/null +++ b/ui/app/css/itcss/components/token-list.scss @@ -0,0 +1,99 @@ +$wallet-balance-breakpoint: 890px; +$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + +.token-list-item { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 20px 24px; + cursor: pointer; + transition: linear 200ms; + background-color: rgba($wallet-balance-bg, 0); + position: relative; + + &__token-balance { + font-size: 130%; + + @media #{$wallet-balance-breakpoint-range} { + font-size: 105%; + } + } + + &__fiat-amount { + margin-top: .25%; + font-size: 105%; + text-transform: uppercase; + + @media #{$wallet-balance-breakpoint-range} { + font-size: 95%; + } + } + + @media #{$wallet-balance-breakpoint-range} { + padding: 10% 4%; + } + + &--active { + background-color: rgba($wallet-balance-bg, 1); + } + + &__identicon { + margin-right: 15px; + border: '1px solid #dedede'; + + @media #{$wallet-balance-breakpoint-range} { + margin-right: 4%; + } + } + + &__ellipsis { + // position: absolute; + // top: 20px; + // right: 24px; + line-height: 45px; + } + + &__balance-wrapper { + flex: 1 1 auto; + } +} + +.token-menu-dropdown { + height: 55px; + width: 191px; + border-radius: 4px; + background-color: rgba(0,0,0,0.82); + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); + position: fixed; + margin-top: 20px; + margin-left: 105px; + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__container { + padding: 16px 34px 32px; + z-index: 1050; + position: relative; + } + + &__options { + display: flex; + flex-direction: column; + justify-content: center; + } + + &__option { + color: $white; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + text-align: center; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss new file mode 100644 index 000000000..76fac09e2 --- /dev/null +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -0,0 +1,257 @@ +.tx-list-container { + height: 87.5%; + + @media screen and (min-width: $break-large) { + overflow-y: scroll; + } +} + +.tx-list-header { + text-transform: capitalize; +} + +@media screen and (max-width: $break-small) { + .tx-list-header-wrapper { + margin-top: .2em; + margin-bottom: .6em; + // TODO: Resolve Layout Conflicst in Wallet View + // - This fixes txlist "transactions" title dispay + // margin-top: 0.2em; + // margin-bottom: 0.6em; + justify-content: center; + } + + .tx-list-header { + align-self: center; + font-size: 12px; + color: $dusty-gray; + } +} + +@media screen and (min-width: $break-large) { + .tx-list-header-wrapper { + flex: 0 0 55px; + } + + .tx-list-header { + font-size: 16px; + margin: 1.5em 2.37em; + } + + .tx-list-container::-webkit-scrollbar { + display: none; + } +} + +.tx-list-content-divider { + height: 1px; + background: rgb(231, 231, 231); + flex: 0 0 1px; + + @media screen and (max-width: $break-small) { + margin: .1em 0; + } + + @media screen and (min-width: $break-large) { + margin: .1em 2.37em; + } +} + +.tx-list-item-wrapper { + flex: 1 1 auto; + width: 0; + align-items: stretch; + justify-content: flex-start; + display: flex; + flex-flow: column nowrap; + + @media screen and (max-width: $break-small) { + padding: 0 1.3em; + } + + @media screen and (min-width: $break-large) { + padding-bottom: 12px; + } +} + +.tx-list-clickable { + cursor: pointer; + + &:hover { + background: rgba($alto, .2); + } +} + +.tx-list-pending-item-container { + cursor: pointer; + opacity: .5; +} + +.tx-list-date-wrapper { + flex: 1 1 auto; + + @media screen and (max-width: $break-small) { + margin-top: 6px; + } + + @media screen and (min-width: $break-large) { + margin-top: 12px; + } +} + +.tx-list-content-wrapper { + align-items: stretch; + margin-bottom: 4px; + margin-top: 2px; + flex: 1 0 auto; + width: 100%; + display: flex; + flex-flow: row nowrap; + + @media screen and (max-width: $break-small) { + font-size: 12px; + + .tx-list-status { + font-size: 12px !important; + } + + .tx-list-account { + font-size: 14px !important; + } + + .tx-list-value { + font-size: 14px; + } + + .tx-list-fiat-value { + font-size: 12px; + } + } +} + +.tx-list-date { + color: $dusty-gray; + font-size: 12px; + font-family: Roboto; +} + +.tx-list-identicon-wrapper { + align-self: center; + flex: 0 0 auto; + margin-right: 16px; +} + +.tx-list-account-and-status-wrapper { + display: flex; + flex: 1 1 auto; + flex-flow: row wrap; + width: 0; + + @media screen and (max-width: $break-small) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: center; + } + + @media screen and (min-width: $break-large) { + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .tx-list-account-wrapper { + flex: 1.3 2 auto; + min-width: 153px; + } + + .tx-list-status-wrapper { + flex: 6 6 auto; + } + } + + .tx-list-account { + font-size: 16px; + color: $scorpion; + } + + .tx-list-status { + color: $dusty-gray; + font-size: 16px; + text-transform: capitalize; + } + + .tx-list-status--rejected, + .tx-list-status--failed { + color: $monzo; + } +} + +.tx-list-item { + border-top: 1px solid rgb(231, 231, 231); + flex: 0 0 auto; + display: flex; + flex-flow: row nowrap; + + @media screen and (max-width: $break-small) { + // margin: 0 1.3em .95em; !important + } + + @media screen and (min-width: $break-large) { + margin: 0 2.37em; + } + + &:last-of-type { + border-bottom: 1px solid rgb(231, 231, 231); + margin-bottom: 32px; + } + + &__wrapper { + align-self: center; + flex: 2 2 auto; + color: $dusty-gray; + + .tx-list-value { + font-size: 16px; + text-align: right; + } + + .tx-list-value--confirmed { + color: $caribbean-green; + } + + .tx-list-fiat-value { + font-size: 12px; + text-align: right; + } + } + + &--empty { + text-align: center; + border-bottom: none !important; + padding: 16px; + } +} + +.tx-list-details-wrapper { + overflow: hidden; + flex: 0 0 35%; +} + +.tx-list-value { + font-size: 16px; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tx-list-fiat-value { + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tx-list-value--confirmed { + color: $caribbean-green; +} diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss new file mode 100644 index 000000000..cd44f89bb --- /dev/null +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -0,0 +1,70 @@ +$wallet-balance-bg: $gallery; +$wallet-balance-breakpoint: 890px; +$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + +.wallet-balance-wrapper { + flex: 0 0 auto; + transition: linear 200ms; + background: rgba($wallet-balance-bg, 0); + + &--active { + background: rgba($wallet-balance-bg, 1); + } +} + +.wallet-balance { + background: inherit; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex: 0 0 auto; + cursor: pointer; + + .balance-container { + display: flex; + justify-content: flex-start; + align-items: center; + margin: 20px 24px; + flex-direction: row; + flex-grow: 3; + + @media #{$wallet-balance-breakpoint-range} { + margin: 10% 4%; + } + } + + .balance-display { + margin-left: 15px; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 135%; + } + + .fiat-amount { + margin-top: .25%; + font-size: 105%; + } + + @media #{$wallet-balance-breakpoint-range} { + margin-left: 4%; + + .token-amount { + font-size: 105%; + } + + .fiat-amount { + font-size: 95%; + } + } + } + + .balance-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + } +} diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss new file mode 100644 index 000000000..9d55324e3 --- /dev/null +++ b/ui/app/css/itcss/generic/index.scss @@ -0,0 +1,71 @@ +/* + Generic + */ + +@import './reset.scss'; + +* { + box-sizing: border-box; +} + +html, +body { + font-family: Roboto, Arial; + color: #4d4d4d; + font-weight: 300; + line-height: 1.4em; + background: #f7f7f7; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +html { + min-height: 500px; +} + +.app-root { + overflow: hidden; + position: relative; +} + +.app-primary { + display: flex; +} + +input:focus, +textarea:focus { + outline: none; +} + +/* stylelint-disable */ +#app-content { + overflow-x: hidden; + height: 100%; + display: flex; + flex-direction: column; + + @media screen and (max-width: $break-small) { + background-color: $white; + } +} +/* stylelint-enable */ + +a { + text-decoration: none; + color: inherit; +} + +a:hover { + color: #df6b0e; +} + +input.large-input, +textarea.large-input { + padding: 8px; +} + +input.large-input { + height: 36px; +} diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss new file mode 100644 index 000000000..e054d533e --- /dev/null +++ b/ui/app/css/itcss/generic/reset.scss @@ -0,0 +1,147 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + /* stylelint-disable */ + font: inherit; + /* stylelint-enable */ + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ + +/* stylelint-disable */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + border-style: none; + cursor: pointer; +} + +/* stylelint-enable */ diff --git a/ui/app/css/itcss/objects/index.scss b/ui/app/css/itcss/objects/index.scss new file mode 100644 index 000000000..220775682 --- /dev/null +++ b/ui/app/css/itcss/objects/index.scss @@ -0,0 +1 @@ +// Objects diff --git a/ui/app/css/itcss/settings/index.scss b/ui/app/css/itcss/settings/index.scss new file mode 100644 index 000000000..58a7ca7b7 --- /dev/null +++ b/ui/app/css/itcss/settings/index.scss @@ -0,0 +1,3 @@ +@import './variables.scss'; + +@import './typography.scss'; diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss new file mode 100644 index 000000000..58e2d444e --- /dev/null +++ b/ui/app/css/itcss/settings/typography.scss @@ -0,0 +1,71 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'); + +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); + +@font-face { + font-family: 'Montserrat Regular'; + src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); + src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-size: 'small'; +} + +@font-face { + font-family: 'Montserrat Bold'; + src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff'); + src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Montserrat Light'; + src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); + src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Montserrat UltraLight'; + src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); + src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'DIN OT'; + src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'DIN OT Light'; + src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'DIN NEXT'; + src: url('/fonts/DIN NEXT/DIN NEXT W01 Regular.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'DIN NEXT Light'; + src: url('/fonts/DIN NEXT/DIN NEXT W10 Light.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss new file mode 100644 index 000000000..387d14b5f --- /dev/null +++ b/ui/app/css/itcss/settings/variables.scss @@ -0,0 +1,77 @@ +/* + Variables + */ + +// Base Colors +$white: #fff; +$black: #000; +$orange: #ffa500; +$red: #f00; +$gray: #808080; + +/* + Colors + http://chir.ag/projects/name-that-color + */ +$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)' +$rajah: #f5c26d; // formerly 'light orange (button shades)' +$buttercup: #f5a623; // formerly 'dark orange (text)' +$tundora: #4a4a4a; // formerly 'borders/font/any gray' +$gallery: #efefef; +$alabaster: #f7f7f7; +$shark: #22232c; +$wild-sand: #f6f6f6; +$white: #fff; +$dusty-gray: #9b9b9b; +$alto: #dedede; +$alabaster: #fafafa; +$silver-chalice: #aeaeae; +$curious-blue: #2f9ae0; +$concrete: #f3f3f3; +$tundora: #4d4d4d; +$nile-blue: #1b344d; +$scorpion: #5d5d5d; +$silver: #cdcdcd; +$caribbean-green: #02c9b1; +$monzo: #d0021b; +$crimson: #e91550; +$blue-lagoon: #038789; +$purple: #690496; +$tulip-tree: #ebb33f; +$malibu-blue: #7ac9fd; +$athens-grey: #e9edf0; +$jaffa: #f28930; +$geyser: #d2d8dd; + +/* + Z-Indicies + */ +$dropdown-z-index: 30; +$token-icon-z-index: 15; +$container-z-index: 15; +$header-z-index: 12; +$mobile-header-z-index: 26; +$main-container-z-index: 18; +$send-card-z-index: 20; +$sidebar-z-index: 26; +$sidebar-overlay-z-index: 25; + +/* + Z Indicies - Current + app - 11 + hex/bn as decimal input - 1 - remove? + dropdown - 11 + loading - 10 - higher? + mascot - 0 - remove? + */ + +/* + Responsive Breakpoints + */ +$break-small: 575px; +$break-midpoint: 780px; +$break-large: 576px; + + +$primary-font-type: Roboto; + diff --git a/ui/app/css/itcss/tools/index.scss b/ui/app/css/itcss/tools/index.scss new file mode 100644 index 000000000..2236729e8 --- /dev/null +++ b/ui/app/css/itcss/tools/index.scss @@ -0,0 +1 @@ +@import './utilities.scss'; diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss new file mode 100644 index 000000000..ca9fd0d9c --- /dev/null +++ b/ui/app/css/itcss/tools/utilities.scss @@ -0,0 +1,310 @@ +/* + Utility Classes + */ + +/* color */ + +.color-orange { + color: #f7861c; // TODO: move to settings/variables +} + +.color-forest { + color: #0a5448; // TODO: move to settings/variables +} + +/* lib */ + +.full-size { + height: 100%; + width: 100%; +} + +.full-width { + width: 100%; +} + +.full-flex-height { + display: flex; + flex: 1 1 auto; + flex-direction: column; +} + +.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(.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: 700; +} + +.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: 8px; + line-height: 8px; + background: rgba(255, 255, 255, 0.4); + color: #fff; + border-radius: 10px; + padding: 4px; + width: 41px; + text-align: center; + height: 15px; +} + +.ether-balance { + display: flex; + align-items: center; +} + +.tabSection { + min-width: 350px; +} + +.menu-icon { + display: inline-block; + height: 12px; + min-width: 12px; + 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; +} + +/* + Misc + */ + +// TODO: move into component-level contextual 'active' state +.letter-spacey { + letter-spacing: .1em; +} + +.active { + color: #909090; +} + +.check { + margin-left: 7px; + color: #f7861c; + flex: 1 0 auto; + display: flex; + justify-content: flex-end; +} diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss new file mode 100644 index 000000000..d9a4202a4 --- /dev/null +++ b/ui/app/css/itcss/trumps/index.scss @@ -0,0 +1,72 @@ +/* + Trumps + */ + +// Transitions + +/* universal */ +.app-primary .main-enter { + position: absolute; + width: 100%; +} + +/* center position */ +.app-primary.from-right .main-enter-active, +.app-primary.from-left .main-enter-active { + overflow-x: hidden; + transform: translateX(0); + transition: transform 300ms ease-in; +} + +/* exited positions */ +.app-primary.from-left .main-leave-active { + transform: translateX(360px); + transition: transform 300ms ease-in; +} + +.app-primary.from-right .main-leave-active { + transform: translateX(-360px); + transition: transform 300ms ease-in; +} + +.sidebar.from-left { + transform: translateX(-320px); + transition: transform 300ms ease-in; +} + +/* loader transitions */ +.loader-enter, +.loader-leave-active { + opacity: 0; + transition: opacity 150 ease-in; +} + +.loader-enter-active, +.loader-leave { + opacity: 1; + transition: opacity 150 ease-in; +} + +/* entering positions */ +.app-primary.from-right .main-enter:not(.main-enter-active) { + transform: translateX(360px); +} + +.app-primary.from-left .main-enter:not(.main-enter-active) { + transform: translateX(-360px); +} + +i.fa.fa-question-circle.fa-lg.menu-icon { + font-size: 18px; +} + +// This text is contained inside a div. +// ID needed to override user agent stylesheet. +// See components/modal.scss + +/* stylelint-disable */ +#buy-modal-content-footer-text { + font-family: 'DIN OT'; + font-size: 16px; +} +/* stylelint-enable */ |