Make new-ui create password screen responsive.

feature/default_network_editable
Dan 7 years ago
parent 5ebdb215ae
commit b8dec68271
  1. 2
      mascara/src/app/first-time/create-password-screen.js
  2. 56
      mascara/src/app/first-time/index.css
  3. 24
      ui/app/css/itcss/components/newui-sections.scss

@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
: (
<div>
<div className="first-view-main">
<div className="mascara-info">
<div className="mascara-info first-view-phone-invisible">
<Mascot
animationEventEmitter={this.animationEventEmitter}
width="225"

@ -21,6 +21,24 @@
justify-content: space-between;
}
@media screen and (min-width: 576px) {
.first-view-main {
width: 85vw;
}
}
@media screen and (min-width: 769px) {
.first-view-main {
width: 80vw;
}
}
@media screen and (min-width: 1281px) {
.first-view-main {
width: 62vw;
}
}
.mascara-info {
display: flex;
flex-flow: column;
@ -81,6 +99,44 @@
width: initial !important;
}
.alpha-warning {
line-height: 1em;
padding: 8px 12px;
}
.first-view-main {
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
margin-top: 12px;
}
.first-view-main .create-password {
margin-top: 0px;
}
.mascara-info {
margin-top: 0px;
width: 100%;
align-items: center;
}
.mascara-info .info {
text-align: center;
font-size: 16px;
margin: 0 10px;
padding-left: 0px;
}
.mascara-info :first-child {
align-self: center;
}
.first-view-phone-invisible {
display: none;
}
.first-time-flow__input {
width: initial !important;
font-size: 14px !important;

@ -290,27 +290,3 @@ $wallet-view-bg: $alabaster;
.token-balance__amount {
padding-right: 6px;
}
// first time
.first-view-main {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
@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: 62vw;
}
}
Loading…
Cancel
Save