1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/components/page-container/index.scss
2018-08-22 14:12:01 -07:00

187 lines
2.9 KiB
SCSS

.page-container {
width: 408px;
background-color: $white;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
z-index: 25;
display: flex;
flex-flow: column;
border-radius: 8px;
&__header {
display: flex;
flex-flow: column;
border-bottom: 1px solid $geyser;
padding: 16px;
flex: 0 0 auto;
position: relative;
&--no-padding-bottom {
padding-bottom: 0;
}
}
&__header-close {
color: $tundora;
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
overflow: hidden;
&::after {
content: '\00D7';
font-size: 40px;
line-height: 20px;
}
}
&__header-row {
padding-bottom: 10px;
display: flex;
justify-content: space-between;
}
&__footer {
display: flex;
flex-flow: row;
justify-content: center;
border-top: 1px solid $geyser;
padding: 16px;
flex: 0 0 auto;
.btn-default,
.btn-confirm {
font-size: 1rem;
}
}
&__footer-button {
height: 55px;
font-size: 1rem;
text-transform: uppercase;
margin-right: 16px;
&:last-of-type {
margin-right: 0;
}
}
&__back-button {
color: #2f9ae0;
font-size: 1rem;
cursor: pointer;
font-weight: 400;
}
&__title {
color: $black;
font-size: 2rem;
font-weight: 500;
line-height: 2rem;
}
&__subtitle {
padding-top: .5rem;
line-height: initial;
font-size: .9rem;
color: $gray;
}
&__tabs {
display: flex;
margin-top: 16px;
}
&__tab {
min-width: 5rem;
padding: 8px;
color: $dusty-gray;
font-family: Roboto;
font-size: 1rem;
text-align: center;
cursor: pointer;
border-bottom: none;
margin-right: 16px;
&:last-of-type {
margin-right: 0;
}
&--selected {
color: $curious-blue;
border-bottom: 2px solid $curious-blue;
}
}
&--full-width {
width: 100% !important;
}
&--full-height {
height: 100% !important;
max-height: initial !important;
min-height: initial !important;
}
&__content {
overflow-y: auto;
flex: 1;
}
&__warning-container {
background: $linen;
padding: 20px;
display: flex;
align-items: start;
}
&__warning-message {
padding-left: 15px;
}
&__warning-title {
font-weight: 500;
}
&__warning-icon {
padding-top: 5px;
}
}
@media screen and (max-width: 250px) {
.page-container {
&__footer {
flex-flow: column-reverse;
}
&__footer-button {
width: 100%;
margin-bottom: 1rem;
margin-right: 0;
&:first-of-type {
margin-bottom: 0;
}
}
}
}
@media screen and (max-width: 575px) {
.page-container {
height: 100%;
width: 100%;
overflow-y: auto;
background-color: $white;
border-radius: 0;
flex: 1;
}
}
@media screen and (min-width: 576px) {
.page-container {
max-height: 82vh;
min-height: 570px;
flex: 0 0 auto;
}
}