diff options
Diffstat (limited to 'ui/app/css/itcss/components/add-token.scss')
-rw-r--r-- | ui/app/css/itcss/components/add-token.scss | 87 |
1 files changed, 71 insertions, 16 deletions
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index aa8221c9a..5f6d0fcff 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -7,19 +7,6 @@ z-index: 12; font-family: 'DIN Next Light'; - @media screen and (max-width: $break-small) { - top: 0; - width: 100%; - - &__wrapper { - box-shadow: none !important; - } - - &__footers { - border-bottom: 1px solid $gallery; - } - } - &__wrapper { background-color: $white; box-shadow: 0 2px 4px 0 rgba($black, .08); @@ -109,7 +96,18 @@ cursor: pointer; &:hover { - background-color: $gallery; + background-color: rgba(0, 0, 0, .05); + } + + &:active { + background-color: rgba(0, 0, 0, .1); + } + + .fa { + position: absolute; + right: 24px; + font-size: 24px; + line-height: 24px; } } @@ -180,7 +178,7 @@ transition: 200ms ease-in-out; display: flex; flex-flow: row nowrap; - flex: 0 0 45%; + flex: 0 0 42.5%; align-items: center; padding: 12px; margin: 2.5%; @@ -204,6 +202,10 @@ } } + &__token-data { + align-self: flex-start; + } + &__token-name { font-size: 14px; line-height: 19px; @@ -263,6 +265,11 @@ &__confirmation-title { padding: 30px 120px 12px; + + @media screen and (max-width: $break-small) { + padding: 20px 0; + width: 100%; + } } &__confirmation-content { @@ -272,7 +279,7 @@ &__confirmation-token-list-item { display: flex; flex-flow: row nowrap; - padding: 0 120px; + margin: 0 auto; align-items: center; } @@ -283,4 +290,52 @@ &__confirmation-token-icon { margin-right: 18px; } + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + overflow: hidden; + height: 100%; + + &__wrapper { + box-shadow: none !important; + flex: 1 1 auto; + width: 100%; + overflow-y: auto; + } + + &__footers { + border-bottom: 1px solid $gallery; + } + + &__token-icon { + width: 50px; + height: 50px; + } + + &__token-symbol { + font-size: 18px; + line-height: 24px; + } + + &__token-name { + font-size: 12px; + line-height: 16px; + } + + &__buttons { + flex-flow: row nowrap; + width: 100%; + align-items: center; + justify-content: center; + padding: 12px 0; + margin: 0; + border-top: 1px solid $gallery; + + button { + flex: 1 0 auto; + margin: 0 12px; + } + } + } } |