diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss index 7e5396f7f..627f905e8 100644 --- a/src/sass/views/amount.scss +++ b/src/sass/views/amount.scss @@ -32,6 +32,13 @@ padding-left: 48px; } } + @media(max-width: 320px) { + .bitcoin-address { + & > span:last-child { + margin-left: -2px; + } + } + } .send-gravatar { left: 11px; position: absolute; @@ -51,6 +58,9 @@ @media(max-height: 480px) { padding: 0px; } + @media(max-width: 320px) { + padding: 0px; + } .title { float: left; padding-top: 10px; @@ -78,6 +88,16 @@ @media(max-height: 480px) { top: 45px; } + @media(max-width: 320px) { + bottom: 276px; + top: 60px; + & > div { + display: inline-block; + } + & > div:first-child { + display: inherit; + } + } } } .amount-pane-no-recipient { @@ -147,6 +167,10 @@ position: relative; top: -3px; line-height: 1; + @media(max-width: 320px) { + line-height: 30px; + height: 30px; + } } &__results { &--minimize { diff --git a/src/sass/views/feedback/complete.scss b/src/sass/views/feedback/complete.scss index 71b384cda..bb2e75ea6 100644 --- a/src/sass/views/feedback/complete.scss +++ b/src/sass/views/feedback/complete.scss @@ -56,6 +56,7 @@ padding: 50px 10px 30px; background-color: $v-subtle-gray; text-align: center; + -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; animation-name: slideUpFadeIn; @@ -76,10 +77,12 @@ @keyframes slideUpFadeIn { from { + -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } to { + -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } diff --git a/src/sass/views/includes/walletActivity.scss b/src/sass/views/includes/walletActivity.scss index ffba46ecf..0d5fb0496 100644 --- a/src/sass/views/includes/walletActivity.scss +++ b/src/sass/views/includes/walletActivity.scss @@ -8,6 +8,9 @@ &-amount { float: right; font-size: 18px; + @media(max-width: 320px) { + text-align: right; + } } &-note { diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index c0441e304..33f308ef2 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -13,6 +13,7 @@ height: 100%; transition: transform 2.5s ease; &.shrink{ + -webkit-transform: scale(.8); transform: scale(.8); } &-container { diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 483f988c3..09831a149 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -28,6 +28,9 @@ @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2) { height: 64vh; } + @media(max-width: 320px) { + height: 62vh; + } &-info { height: 100%; display: flex; @@ -35,6 +38,9 @@ justify-content: center; align-items: center; width: 100%; + @media(max-width: 320px) { + height: auto; + } } article { flex:1; @@ -42,11 +48,9 @@ } #bit-address { width: 100%; - align-self: flex-end; margin-top: auto; - justify-content: center; - align-content: center; - position: relative; + position: absolute; + bottom: 0; min-height: 40px; #next-address { color:$v-light-gray; @@ -100,6 +104,7 @@ top:50%; &, &.next { left:100%; + -webkit-transform: translate(100%, -40%); transform: translate(100%, -40%); } &.next, &.prev { @@ -110,10 +115,12 @@ left:50%; } &.current { + -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); z-index: 3; } &.prev { + -webkit-transform: translate(-150%, -40%); transform: translate(-150%, -40%); } .item { @@ -127,6 +134,12 @@ @media(min-width:450px) { font-size:1rem; } + &.item-icon-left { + @media(max-width: 320px) { + padding-left: 48px; + text-overflow: initial; + } + } color:$v-light-gray; } } @@ -139,6 +152,10 @@ justify-content: center; flex: 1; z-index: 1; + @media(max-width: 320px) { + height: 260px; + margin-top: -50px; + } div { transition: all .4s ease; &.current, @@ -152,13 +169,16 @@ left:50%; } &.current { + -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); } &.prev { + -webkit-transform: translate(-150%, -40%); transform: translate(-150%, -40%); } &.next { left:100%; + -webkit-transform: translate(100%, -40%); transform: translate(100%, -40%); } } @@ -170,6 +190,7 @@ button { width: 100%; top: 50%; + -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @@ -211,9 +232,6 @@ transform: scale(.7); } } - #bit-address { - position: relative; - } } } } @@ -379,6 +397,7 @@ .bit-address { .item{ top: 40%; + -webkit-transform: translateY(-40%); transform: translateY(-40%); font-size:1rem; } @@ -417,6 +436,7 @@ position: relative; .card { opacity: 1; + -webkit-transform: scale(1); transform: scale(1); } &:before { @@ -445,6 +465,7 @@ margin: 1.5rem auto 0; position: relative; opacity: .5; + -webkit-transform:scale(.85); transform:scale(.85); transition:transform .2s ease; .item { diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index fe68b1d40..18baa3324 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -152,6 +152,7 @@ position: absolute; width: 100%; height: 500px; + -webkit-transform: translateY(-499px); transform: translateY(-499px); &.collapsible { @@ -161,6 +162,7 @@ position: absolute; width: 100%; height: 200px; + -webkit-transform: translateY(100px); transform: translateY(100px); } } @@ -174,12 +176,16 @@ display: block; align-items: center; justify-content: center; + @media(max-width: 320px) { + padding-top: 60px; + } &.collapsible { margin-bottom: 10px; } &__balance { + -webkit-transform: scale3d(1, 1, 1) translateY(45px); transform: scale3d(1, 1, 1) translateY(45px); }