diff options
Diffstat (limited to 'ui/app/css/itcss')
-rw-r--r-- | ui/app/css/itcss/components/buttons.scss | 230 | ||||
-rw-r--r-- | ui/app/css/itcss/components/index.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/modal.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/network.scss | 35 | ||||
-rw-r--r-- | ui/app/css/itcss/components/send.scss | 205 | ||||
-rw-r--r-- | ui/app/css/itcss/generic/index.scss | 1 | ||||
-rw-r--r-- | ui/app/css/itcss/settings/typography.scss | 37 | ||||
-rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 18 |
8 files changed, 287 insertions, 243 deletions
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss deleted file mode 100644 index 3e99d0ac6..000000000 --- a/ui/app/css/itcss/components/buttons.scss +++ /dev/null @@ -1,230 +0,0 @@ -/* - Buttons - */ - -.button { - min-height: 44px; - background: $white; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - border-radius: 4px; - font-size: 14px; - font-weight: 400; - transition: border-color .3s ease; - padding: 0 16px; - min-width: 140px; - width: 100%; - text-transform: uppercase; - outline: none; - font-family: Roboto; - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-primary { - color: $curious-blue; - border: 2px solid $spindle; - - &:active { - background: $zumthor; - border-color: $curious-blue; - } - - &:hover { - border-color: $curious-blue; - } -} - -.btn-secondary { - color: $monzo; - border: 2px solid lighten($monzo, 40%); - - &:active { - background: lighten($monzo, 55%); - border-color: $monzo; - } - - &:hover { - border-color: $monzo; - } -} - -.btn-default { - color: $scorpion; - border: 2px solid $dusty-gray; - - &:active { - background: $gallery; - border-color: $dusty-gray; - } - - &:hover { - border-color: $scorpion; - } -} - -.btn-confirm { - color: $white; - border: 2px solid $curious-blue; - background-color: $curious-blue; -} - -.btn-raised { - color: $curious-blue; - background-color: $white; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); - padding: 6px; - height: initial; - min-height: initial; - width: initial; - min-width: initial; -} - -.btn--first-time { - height: 54px; - width: 198px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); - color: $white; - font-size: 1.25rem; - font-weight: 500; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); - border-radius: 0; -} - -.btn--large { - min-height: 54px; -} - -.btn-green { - background-color: #02c9b1; // TODO: reusable color in colors.css -} - -.btn-clear { - background: $white; - text-align: center; - padding: .8rem 1rem; - color: $curious-blue; - border: 2px solid $spindle; - border-radius: 4px; - font-size: .85rem; - font-weight: 400; - transition: border-color .3s ease; - - &:hover { - border-color: $curious-blue; - } - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-cancel { - background: $white; - text-align: center; - padding: .9rem 1rem; - color: $scorpion; - border: 2px solid $dusty-gray; - border-radius: 4px; - font-size: .85rem; - font-weight: 400; - transition: border-color .3s ease; - width: 100%; - - &:hover { - border-color: $scorpion; - } -} - -// 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-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/index.scss b/ui/app/css/itcss/components/index.scss index f2f37bfa3..3d426a33c 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,4 +1,4 @@ -@import './buttons.scss'; +@import '../../../components/ui/button/buttons'; @import './footer.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 42ef7ae0a..9c0a5cf61 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -538,6 +538,8 @@ } &__button { + @include paragraph; + @extend %button; width: 141px; margin: 0 5px; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index c828a2b26..da90b7910 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -29,6 +29,10 @@ &.rinkeby-test-network .menu-icon-circle div { background-color: rgba(235, 179, 63, .7) !important; } + + &.goerli-test-network .menu-icon-circle div { + background-color: rgba(48, 153, 242, .7) !important; + } } .dropdown-menu-item { @@ -47,6 +51,13 @@ line-height: 15px; font-size: 12px; padding: 0 4px; + flex: 0 0 auto; + } + + .fa-question-circle { + margin: 0 4px 0 6px; + font-size: 1rem; + flex: 0 0 auto; } } @@ -54,9 +65,12 @@ padding: 0 4px; font-family: Roboto; font-size: 12px; - flex: 1 0 auto; + flex: 1 1 auto; color: $tundora; font-weight: 500; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .dropdown-menu-item .fa.delete { @@ -165,5 +179,22 @@ } .network-caret { - margin: 0 8px 2px; + margin: 0 8px; +} + +.network-loading-spinner { + display: flex; + flex-flow: row nowrap; + align-items: center; + position: relative; + height: 16px; + width: 16px; + margin-left: 5px; + + img { + height: 26px; + position: absolute; + top: -5px; + left: -6px; + } } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 07ab04613..e2f0f9b2f 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -520,6 +520,10 @@ color: $red; } + &__error-amount { + margin-top: 5px; + } + &__warning { font-size: 12px; line-height: 12px; @@ -549,7 +553,7 @@ } &__form-row { - margin: 14.5px 18px 0px; + margin: 8px 18px 0px; position: relative; display: flex; flex-flow: row; @@ -557,6 +561,12 @@ justify-content: space-between; } + &__form-field-container { + display: flex; + flex-direction: column; + width: 277px; + } + &__form-field { flex: 1 1 auto; min-width: 0; @@ -592,8 +602,8 @@ flex: 0 0 auto; } - &__from-dropdown { - height: 73px; + &__from-dropdown, + &__asset-dropdown { width: 100%; border: 1px solid $alto; border-radius: 4px; @@ -628,6 +638,112 @@ } } + &__from-dropdown { + height: 73px; + } + + &__asset-dropdown { + height: 54px; + border: none; + + &__asset { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 0 8px; + cursor: pointer; + + &:hover { + background-color: rgba($alto, 0.2); + } + } + + &__asset-icon { + .identicon { + border: 1px solid $alto; + } + } + + &__asset-data { + display: flex; + flex-flow: column nowrap; + margin-left: 8px; + } + + &__symbol { + font-size: 16px; + margin-bottom: 2px; + } + + &__name { + display: flex; + flex-flow: row nowrap; + font-size: 12px; + + &__label { + margin-right: .25rem; + } + } + + &__close-area { + z-index: 2000; + } + + &__list { + z-index: 2050; + position: absolute; + height: 220px; + width: 100%; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + top: 65px; + left: 0; + box-sizing: content-box; + overflow-y: scroll; + margin-top: 0; + padding: 4px 0; + + .send-v2__asset-dropdown__asset { + padding: 8px; + } + } + + &__input-wrapper { + border: 1px solid $alto; + border-radius: 4px; + height: 100%; + + &--opened { + position: relative; + z-index: 2050; + } + + .send-v2__asset-dropdown__asset { + height: 100%; + &:hover { + background-color: $white; + } + } + } + + &__input { + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: none; + border-radius: 4px; + background-color: $white; + color: $tundora; + padding: 10px; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + } + } + &__to-autocomplete { position: relative; @@ -657,7 +773,43 @@ } } - &__to-autocomplete, &__memo-text-area, &__hex-data { + &__to-autocomplete { + display: flex; + flex-direction: column; + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $tundora; + padding: 0 10px; + font-family: Roboto; + line-height: 21px; + + &__input { + font-size: 16px; + height: 100%; + border: none; + } + + &__resolved { + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + height: 30px; + cursor: pointer; + + + .send-v2__to-autocomplete__qr-code { + top: 2px; + right: 0; + } + } + } + + &__memo-text-area, &__hex-data { &__input { z-index: 1025; position: relative; @@ -675,12 +827,47 @@ } &__amount-max { - color: $curious-blue; font-family: Roboto; font-size: 12px; - left: 8px; - border: none; - cursor: pointer; + position: relative; + display: inline-block; + width: 56px; + height: 20px; + margin-top: 5px; + + &__button { + width: 56px; + height: 20px; + position: absolute; + border: 2px solid #B0D7F2; + border-radius: 6px; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + color: #2f9ae0; + + &__disabled { + color: #B0D7F2; + cursor: auto; + } + } + + input:checked + &__button { + background-color: #037DD6; + border: 2px solid #037DD6; + color: #fff; + } + } + + &__amount-max input { + opacity: 0; + width: 0; + height: 0; } &__gas-fee-display { @@ -935,7 +1122,7 @@ font-size: 14px; color: #2f9ae0; cursor: pointer; - margin-top: 16px; + margin-top: 5px; } .sliders-icon-container { diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index d8e62c97a..8b282aa1e 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -18,6 +18,7 @@ body { height: 100%; margin: 0; padding: 0; + font-size: 16px; @media screen and (max-width: $break-small) { overflow-y: overlay; diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 18c444c8a..93107a106 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -403,3 +403,40 @@ font-weight: 400; font-style: normal; } + +@mixin fontScale($weight: 400, $size: 1rem) { + font-weight: $weight; + font-size: $size; +} + +@mixin h1($weight: 400, $size: 2.5rem){ + @include fontScale($weight, $size); +} + +@mixin h2($weight: 400, $size: 2rem){ + @include fontScale($weight, $size); +} + +@mixin h3($weight: 400, $size: 1.5rem){ + @include fontScale($weight, $size); +} + +@mixin h4($weight: 400, $size: 1.125rem){ + @include fontScale($weight, $size); +} + +@mixin h5($weight: 400, $size: 1rem){ + @include fontScale($weight, $size); +} + +@mixin h6($weight: 400, $size: .875rem){ + @include fontScale($weight, $size); +} + +@mixin h7($weight: 400, $size: .75rem){ + @include fontScale($weight, $size); +} + +@mixin paragraph($weight: 400, $size: 1rem){ + @include fontScale($weight, $size); +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 89bd8b96a..f7003b1f4 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -26,7 +26,7 @@ $dusty-gray: #9b9b9b; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #2f9ae0; +$curious-blue: #037DD6; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; @@ -93,3 +93,19 @@ $break-large: 576px; $primary-font-type: Roboto; +$Blue-000: #eaf6ff; +$Blue-400: #1098fc; +$Blue-500: #037DD6; +$Blue-600: #0260a4; + +$Grey-000: #f2f3f4; +$Grey-500: #6A737D; + +$Red-000: #fcf2f3; +$Red-500: #D73A49; +$Red-600: #b92534; + +$Orange-000: #fef5ef; +$Orange-500: #F66A0A; + + |