mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 03:36:18 +02:00
0be6c65eb3
The styles for smaller viewports were broken because I forgot to update the small-screen grid template after adding the "paste-tip". The styles have now been updated to fit the content properly on all of our supported screen sizes.
72 lines
1.1 KiB
SCSS
72 lines
1.1 KiB
SCSS
.import-srp {
|
|
&__container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"title dropdown"
|
|
"paste-tip paste-tip"
|
|
"input input"
|
|
"error error"
|
|
"too-many-words-error too-many-words-error";
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
&__container {
|
|
grid-template-areas:
|
|
"title"
|
|
"dropdown"
|
|
"paste-tip"
|
|
"input"
|
|
"error"
|
|
"too-many-words-error";
|
|
}
|
|
}
|
|
|
|
&__srp-label {
|
|
grid-area: title;
|
|
}
|
|
|
|
&__number-of-words-dropdown {
|
|
grid-area: dropdown;
|
|
}
|
|
|
|
&__paste-tip {
|
|
margin-bottom: 8px;
|
|
grid-area: paste-tip;
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
&__srp {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-area: input;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
&__srp {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
&__srp-word {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 8px;
|
|
}
|
|
|
|
&__srp-word-label {
|
|
width: 2em;
|
|
}
|
|
|
|
&__srp-error {
|
|
margin-top: 4px;
|
|
grid-area: error;
|
|
}
|
|
|
|
&__srp-too-many-words-error {
|
|
margin-top: 4px;
|
|
grid-area: too-many-words-error;
|
|
}
|
|
}
|