mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-24 02:58:09 +01: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.
103 lines
1.7 KiB
SCSS
103 lines
1.7 KiB
SCSS
.home {
|
|
&__container {
|
|
display: flex;
|
|
min-height: 100%;
|
|
}
|
|
|
|
&__main-view {
|
|
flex: 1 1 66.5%;
|
|
background: $white;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__balance-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
// TODO: fix style import order so this isn't required to override specificity of `tab` class
|
|
&__main-view &__tab {
|
|
flex-grow: 1;
|
|
color: $Grey-500;
|
|
padding: 16px 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 130%;
|
|
}
|
|
|
|
&__main-view &__tab--active {
|
|
color: $Blue-500;
|
|
}
|
|
|
|
&__connect-status-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@extend %content-text;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
|
|
div {
|
|
&:last-child {
|
|
margin-top: 26px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__connected-status-popover {
|
|
width: 329px;
|
|
height: 295px;
|
|
margin-top: -12px;
|
|
|
|
.popover-header {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.popover-content {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.popover-arrow {
|
|
top: -6px;
|
|
left: 24px;
|
|
}
|
|
|
|
.popover-footer {
|
|
justify-content: flex-end;
|
|
|
|
& :only-child {
|
|
margin: 0;
|
|
}
|
|
|
|
button {
|
|
height: 39px;
|
|
width: 133px;
|
|
border-radius: 39px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__connected-status-popover-bg {
|
|
height: 34px;
|
|
width: 110px;
|
|
border-radius: 34px;
|
|
position: absolute;
|
|
top: 82px;
|
|
left: 12px;
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.2);
|
|
background: none;
|
|
}
|
|
|
|
&__connected-status-popover-bg-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|