diff options
Diffstat (limited to 'ui/app/css')
-rw-r--r-- | ui/app/css/itcss/components/account-menu.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/buttons.scss | 49 | ||||
-rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 1 | ||||
-rw-r--r-- | ui/app/css/itcss/components/token-list.scss | 13 |
4 files changed, 41 insertions, 26 deletions
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 657760ab5..96fba890c 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -116,6 +116,10 @@ &__name { color: $white; font-size: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 200px; } &__balance { diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 4cbed6093..f93daec04 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -2,10 +2,10 @@ Buttons */ +.btn-default, .btn-primary, -.btn-primary--lg, -.btn-secondary, -.btn-secondary--lg { +.btn-secondary { + height: 44px; background: $white; display: flex; justify-content: center; @@ -20,10 +20,16 @@ width: 100%; text-transform: uppercase; outline: none; + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } } -.btn-primary, -.btn-primary--lg { +.btn-primary { color: $curious-blue; border: 2px solid $spindle; @@ -35,17 +41,23 @@ &:hover { border-color: $curious-blue; } +} - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; +.btn-secondary { + color: $monzo; + border: 2px solid lighten($monzo, 40%); + + &:active { + background: lighten($monzo, 55%); + border-color: $monzo; + } + + &:hover { + border-color: $monzo; } } -.btn-secondary, -.btn-secondary--lg { +.btn-default { color: $scorpion; border: 2px solid $dusty-gray; @@ -57,20 +69,9 @@ &:hover { border-color: $scorpion; } - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-primary, .btn-secondary { - height: 44px; } -.btn-primary--lg, .btn-secondary--lg { +.btn--large { height: 54px; } diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 69cde8a0f..09d66aedd 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -6,6 +6,7 @@ justify-content: flex-start; align-items: center; flex: 0 0 auto; + padding-top: 16px; } @media screen and (min-width: $break-large) { diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index e8de317e3..72fda372f 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -14,10 +14,17 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( min-width: 0; &__token-balance { - font-size: 1.5rem; + margin-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + min-width: 0; + max-width: 100%; + } + + &__token-balance, &__token-symbol { + font-size: 1.5rem; + flex: 0 0 auto; @media #{$wallet-balance-breakpoint-range} { font-size: 95%; @@ -66,7 +73,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &__balance-wrapper { - flex: 1 1 auto; + flex: 1; + flex-flow: row wrap; + display: flex; min-width: 0; } } |