1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/pages/first-time-flow/index.scss
2022-03-18 19:43:33 -05:00

116 lines
2.0 KiB
SCSS

@import 'welcome/index';
@import 'select-action/index';
@import 'seed-phrase/index';
@import 'end-of-flow/index';
@import 'metametrics-opt-in/index';
.first-time-flow {
width: 100%;
background-color: var(--color-background-default);
display: flex;
justify-content: center;
&__wrapper {
@media screen and (min-width: $break-large) {
max-width: 742px;
display: flex;
flex-direction: column;
width: 100%;
margin-top: 2%;
}
.app-header__metafox-logo {
margin-bottom: 40px;
@media screen and (max-width: $break-small) {
margin-bottom: 0;
}
}
}
&__import,
&__form {
display: flex;
flex-direction: column;
}
&__create-back {
margin-bottom: 16px;
}
&__header {
@include H1;
margin-bottom: 24px;
color: var(--color-text-default);
}
&__input {
max-width: 350px;
}
&__text-block {
margin-bottom: 24px;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
@include H6;
margin-bottom: 16px;
}
}
&__button {
margin: 35px 0 14px;
width: 170px;
height: 44px;
}
&__checkbox-container {
display: flex;
align-items: center;
margin-top: 24px;
}
&__checkbox {
background: var(--color-background-default);
border: 1px solid var(--color-border-muted);
box-sizing: border-box;
height: 34px;
width: 34px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
border: 1.5px solid var(--color-primary-alternative);
}
.fa-check {
color: var(--color-primary-default);
}
}
&__checkbox-label {
@include H4;
color: var(--color-text-alternative);
margin-left: 18px;
}
&__link-text {
color: var(--color-primary-default);
}
}
.first-time-flow__wrapper.intro {
@media screen and (min-width: $break-large) {
max-width: 1010px;
}
@media screen and (max-width: 1010px) {
padding: 0 20px;
}
}