fix quiz and tracker modal styles

This commit is contained in:
Victor Batischev
2024-02-08 15:42:08 +03:00
parent 81d2ee4098
commit 5b44a97329
9 changed files with 31 additions and 60 deletions

View File

@ -5,7 +5,6 @@ import "./modalSelect.scss";
export const ModalSelect = ({ active, children }) => {
return (
<div className={active ? "project__settings active" : "project__settings "}>
<span className="project__settings-ellipsis">...</span>
{children}
</div>
);

View File

@ -1,29 +1,30 @@
.project {
&__settings {
position: absolute;
padding: 32px 23px 10px 11px;
padding: 0 10px;
background: #e1fccf;
border-radius: 12px;
transform: scale(0);
bottom: -40px;
right: -120px;
bottom: -30px;
right: -130px;
@media (max-width: 1050px) {
right: 10px;
padding-top: 10px;
bottom: -75px;
right: 5px;
bottom: -30px;
}
&-menu {
font-size: 14px;
line-height: 38px;
padding: 5px 0;
div {
display: flex;
align-items: center;
padding: 2px 0;
img {
margin-right: 12px;
width: 12px;
margin-right: 5px;
}
p:hover {

View File

@ -109,7 +109,7 @@ export const ProjectTicket = ({ project, index }) => {
to={`/profile/statistics/${project.id}`}
className="project__statistics"
>
Просмотреть статистику
Посмотреть статистику
</Link>
<TrackerModal
@ -133,7 +133,7 @@ export const ProjectTicket = ({ project, index }) => {
</div>
<div>
<img src={link}></img>
<p onClick={copyProjectLink(project.id)}>ссылка на проект</p>
<p onClick={copyProjectLink(project.id)}>скопировать ссылку</p>
</div>
<div
onClick={() => {

View File

@ -80,8 +80,8 @@
position: absolute;
font-size: 21px;
color: #6f6f6f;
right: 26px;
top: 10px;
right: 15px;
top: 0px;
}
&__avatar {

View File

@ -31,16 +31,14 @@ $maxWidthContainer: 1123;
}
.quiz-btn {
display: flex;
font-family: "Lab Grotesque";
align-items: center;
justify-content: center;
// box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
white-space: nowrap;
background: #406128;
border-radius: 44px;
color: #fff;
outline: none;
//border: 2px solid #52b709;
border: none;
transition: 0 all ease 0.8s;
padding: 7px 51px;
@ -48,11 +46,6 @@ $maxWidthContainer: 1123;
font-size: 14px;
text-decoration: none;
line-height: 200%;
// &:hover{
// text-decoration: none;
// color: #52b709;
// background: #fff;
// }
&_back {
background: #dddddd;
color: #000;
@ -68,13 +61,11 @@ $maxWidthContainer: 1123;
}
}
.quiz-title_h3 {
font-family: "Lab Grotesque";
font-weight: 700;
font-size: 18px;
line-height: 156%;
color: #52b709;
}
//=============================================
.error-msg {
text-align: center;
@ -140,7 +131,6 @@ $maxWidthContainer: 1123;
.form-task__group {
display: block;
margin-bottom: 13px;
font-family: "Lab Grotesque";
label {
font-weight: 400;
font-size: 15px;
@ -312,9 +302,9 @@ $maxWidthContainer: 1123;
}
.card-introduction {
padding: 0px 25px;
padding: 0px 20px;
margin: 0px 0px 50px 0px;
flex: 0 1 33.333%;
flex: 0 1 33%;
@media (max-width: 850px) {
flex: 0 1 50%;
}
@ -324,14 +314,13 @@ $maxWidthContainer: 1123;
&__body {
display: flex;
gap: 20px;
gap: 10px;
}
&__title {
font-weight: 900;
font-size: 14px;
line-height: 171%;
font-size: 18px;
color: #52b709;
margin: 0 0 30px 0;
margin-bottom: 10px;
}
&__icon {
flex: 0 0 25px;
@ -343,8 +332,8 @@ $maxWidthContainer: 1123;
}
&__text {
font-weight: 400;
font-size: 12px;
line-height: 200%;
font-size: 15px;
line-height: 20px;
color: #000000;
}
}
@ -352,20 +341,8 @@ $maxWidthContainer: 1123;
.quiz-passing-information {
background: #fff;
border-radius: 12px;
&__container {
// @media (max-width: 600px) {
// display: block;
// }
// @media (max-width: 600px) {
// display: block;
// }
// @media (max-width: 600px) {
// display: block;
// }
}
&__main {
//flex: 1 1 auto;
padding: 35px 45px;
padding: 30px;
height: 100%;
display: grid;
grid-template-columns: 1fr 1.2fr 1.2fr 0.6fr;
@ -388,7 +365,7 @@ $maxWidthContainer: 1123;
}
&__text {
font-weight: 400;
font-size: 12px;
font-size: 14px;
line-height: 167%;
color: #6f6f6f;
span {
@ -399,7 +376,7 @@ $maxWidthContainer: 1123;
&__timer,
&__attempt {
display: flex;
gap: 23px;
gap: 10px;
align-items: center;
}