2022-02-23 21:30:26 +01:00
|
|
|
.import-srp {
|
2022-03-21 20:09:26 +01:00
|
|
|
&__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 {
|
2022-03-22 01:41:53 +01:00
|
|
|
grid-template-areas:
|
|
|
|
"title"
|
|
|
|
"dropdown"
|
|
|
|
"paste-tip"
|
|
|
|
"input"
|
|
|
|
"error"
|
|
|
|
"too-many-words-error";
|
2022-03-21 20:09:26 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-23 21:30:26 +01:00
|
|
|
&__srp-label {
|
2022-03-21 20:09:26 +01:00
|
|
|
grid-area: title;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__number-of-words-dropdown {
|
|
|
|
grid-area: dropdown;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__paste-tip {
|
2022-02-23 21:30:26 +01:00
|
|
|
margin-bottom: 8px;
|
2022-03-21 20:09:26 +01:00
|
|
|
grid-area: paste-tip;
|
2022-03-22 01:41:53 +01:00
|
|
|
width: auto;
|
2022-03-21 20:09:26 +01:00
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2022-02-23 21:30:26 +01:00
|
|
|
}
|
|
|
|
|
2022-03-21 20:09:26 +01:00
|
|
|
&__srp {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
grid-area: input;
|
|
|
|
}
|
2022-02-23 21:30:26 +01:00
|
|
|
|
2022-03-21 20:09:26 +01:00
|
|
|
@media (max-width: 767px) {
|
|
|
|
&__srp {
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
}
|
2022-02-23 21:30:26 +01:00
|
|
|
}
|
|
|
|
|
2022-03-21 20:09:26 +01:00
|
|
|
&__srp-word {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__srp-word-label {
|
|
|
|
width: 2em;
|
2022-02-23 21:30:26 +01:00
|
|
|
}
|
|
|
|
|
2022-03-21 20:09:26 +01:00
|
|
|
&__srp-error {
|
|
|
|
margin-top: 4px;
|
|
|
|
grid-area: error;
|
2022-02-23 21:30:26 +01:00
|
|
|
}
|
|
|
|
|
2022-03-21 20:09:26 +01:00
|
|
|
&__srp-too-many-words-error {
|
|
|
|
margin-top: 4px;
|
|
|
|
grid-area: too-many-words-error;
|
2022-02-23 21:30:26 +01:00
|
|
|
}
|
|
|
|
}
|