mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02:00
a0d64c7932
The fullscreen UI now shows roughly the same design as the popup UI. A few additional changes depicted in the new fullscreen designs will be implemented in subsequent PRs (e.g. the inline buttons on assets) This was done now to make asset pages easier to implement. Implementing asset pages solely for the popup UI would have been complicated by the fact that we use viewport size to switch between the two layouts, so we would have had to re-route upon resizing the window.
148 lines
2.4 KiB
SCSS
148 lines
2.4 KiB
SCSS
$sub-mid-size-breakpoint: 667px;
|
|
$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
|
|
|
|
/*
|
|
NewUI Container Elements
|
|
*/
|
|
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
align-items: center;
|
|
}
|
|
|
|
// Main container
|
|
.main-container {
|
|
z-index: $main-container-z-index;
|
|
font-family: Roboto;
|
|
}
|
|
|
|
.main-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.main-container-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex: 1 0 auto;
|
|
min-height: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
// main-container media queries
|
|
|
|
@media screen and (min-width: 576px) {
|
|
.lap-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.phone-visible {
|
|
display: none;
|
|
}
|
|
|
|
.main-container {
|
|
width: 85vw;
|
|
margin-bottom: 10vh;
|
|
min-height: 90vh;
|
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
.main-container {
|
|
width: 80vw;
|
|
min-height: 82vh;
|
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1281px) {
|
|
.main-container {
|
|
width: 62vw;
|
|
min-height: 82vh;
|
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
.lap-visible {
|
|
display: none;
|
|
}
|
|
|
|
.phone-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.main-container {
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
background-color: $white;
|
|
}
|
|
|
|
.main-container-wrapper {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.fiat-amount {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.token-balance__amount {
|
|
padding: 0 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;
|
|
}
|
|
}
|
|
|
|
.unlock-screen-container {
|
|
z-index: $main-container-z-index;
|
|
font-family: Roboto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
background: #f7f7f7;
|
|
width: 100%;
|
|
}
|
|
|
|
.unlock-screen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.first-view-main-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
background: white;
|
|
}
|