reports create, refactoring
This commit is contained in:
kurpfish
@ -1,143 +1,238 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import style from './Description.module.css';
|
||||
import male from '../../images/medium_male.png';
|
||||
import rectangle from '../../images/rectangle_secondPage.png';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { LEVELS, SKILLS } from '../constants/constants';
|
||||
import { selectProfiles, selectFilteredCandidates, selectItems, auth } from '../../redux/outstaffingSlice';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { fetchProfile } from '../../server/server';
|
||||
import { Loader } from '../Loader/Loader';
|
||||
import { getRole } from '../../redux/roleSlice';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import male from '../../images/medium_male.png'
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
import { Link, useHistory } from 'react-router-dom'
|
||||
import { LEVELS, SKILLS } from '../constants/constants'
|
||||
import {
|
||||
selectProfiles,
|
||||
selectFilteredCandidates,
|
||||
selectItems,
|
||||
auth
|
||||
} from '../../redux/outstaffingSlice'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { fetchGet } from '../../server/server'
|
||||
import { Loader } from '../Loader/Loader'
|
||||
import { getRole } from '../../redux/roleSlice'
|
||||
|
||||
import './description.scss'
|
||||
|
||||
const Description = ({ onLoadMore, isLoadingMore }) => {
|
||||
const dispatch = useDispatch();
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const history = useHistory();
|
||||
const dispatch = useDispatch()
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const history = useHistory()
|
||||
const role = useSelector(getRole)
|
||||
const candidatesListArr = useSelector(selectProfiles);
|
||||
const itemsArr = useSelector(selectItems);
|
||||
const filteredListArr = useSelector(selectFilteredCandidates);
|
||||
const [allCandidates, getAllCandidates] = useState([]);
|
||||
const candidatesListArr = useSelector(selectProfiles)
|
||||
const itemsArr = useSelector(selectItems)
|
||||
const filteredListArr = useSelector(selectFilteredCandidates)
|
||||
const [allCandidates, getAllCandidates] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role, logout: dispatch(auth(false)) }).then((p) => {
|
||||
getAllCandidates(p);
|
||||
setIsLoaded(true);
|
||||
});
|
||||
}, []);
|
||||
fetchGet({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`,
|
||||
params: 1000,
|
||||
history,
|
||||
role,
|
||||
logout: () => dispatch(auth(false))
|
||||
}).then((p) => {
|
||||
getAllCandidates(p)
|
||||
setIsLoaded(true)
|
||||
})
|
||||
}, [])
|
||||
|
||||
if(!filteredListArr) {
|
||||
if (!filteredListArr) {
|
||||
return (
|
||||
<section className={style.description}>
|
||||
<div className="container">
|
||||
<div className={style.description__wrapper}>
|
||||
{
|
||||
candidatesListArr && candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
|
||||
<div className="row" key={el.id}>
|
||||
<div className="col-2 col-xs-12">
|
||||
<img className={style.description__img} src={el.photo} alt="" />
|
||||
</div>
|
||||
<div className="col-12 col-xl-6">
|
||||
<h3 className={style.description__title}>
|
||||
<Link to={`/candidate/${el.id}`}>{el.specification} {SKILLS[el.position_id]}, {LEVELS[el.level]} </Link>
|
||||
</h3>
|
||||
|
||||
{el.vc_text_short ? (
|
||||
<div className={style.description__text}>{el.vc_text_short}</div>
|
||||
) : (
|
||||
<p className={style.description__textSecondary}>Описание отсутствует...</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<Link to={`/candidate/${el.id}`}>
|
||||
<button className={style.description__button}>Подробное резюме</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-xl-2"></div>
|
||||
<div className="col-12 col-xl-6">
|
||||
<ul className={style.description__list}>
|
||||
{el.skillValues.map((e) => (
|
||||
<li key={e.id} className={style.description__list__item}>
|
||||
{e.skill.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img className={style.description__rectangle} src={rectangle} alt="" />
|
||||
</div>
|
||||
<div className="col-xl-4"></div>
|
||||
</div>
|
||||
)) : <div className={style.description__empty}>{
|
||||
isLoaded ? 'В данный момент в категории нет свободных специалистов' : 'Загрузка...'
|
||||
}</div>}
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className={style.description__footer}>
|
||||
<div className={style.description__footer__btn}>
|
||||
<button onClick={() => onLoadMore(2)}>
|
||||
{
|
||||
isLoadingMore ? <Loader width={40} height={40} /> : 'Загрузить еще'
|
||||
} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={style.description}>
|
||||
<div className="container">
|
||||
<div className={style.description__wrapper}>
|
||||
{filteredListArr && filteredListArr.length > 0
|
||||
? filteredListArr.map((el) => (
|
||||
<div className="row" key={el.id}>
|
||||
<div className="col-2">
|
||||
<img className={style.description__img} src={el.photo} alt="" />
|
||||
<section className='description'>
|
||||
<div className='container'>
|
||||
<div className='description__wrapper'>
|
||||
{candidatesListArr && candidatesListArr.length > 0 ? (
|
||||
candidatesListArr.map((el) => (
|
||||
<div className='row' key={el.id}>
|
||||
<div className='col-2 col-xs-12'>
|
||||
<img className='description__img' src={el.photo} alt='' />
|
||||
</div>
|
||||
<div className="col-12 col-xl-6">
|
||||
<h3 className={style.description__title}>
|
||||
<Link to={`/candidate/${el.id}`}> {el.specification} {SKILLS[el.position_id]}, {LEVELS[el.level]} </Link>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<h3 className='description__title'>
|
||||
<Link to={`/candidate/${el.id}`}>
|
||||
{el.specification} {SKILLS[el.position_id]},{' '}
|
||||
{LEVELS[el.level]}{' '}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
{el.vc_text_short ? (
|
||||
<div className={style.description__text}>{el.vc_text_short}</div>
|
||||
<div className='description__text'>
|
||||
{el.vc_text_short}
|
||||
</div>
|
||||
) : (
|
||||
<p className={style.description__textSecondary}>Описание отсутствует...</p>
|
||||
<p className='description__text-secondary'>
|
||||
Описание отсутствует...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<div className='col-12 col-xl-4'>
|
||||
<Link to={`/candidate/${el.id}`}>
|
||||
<button className={style.description__button}>Подробное резюме</button>
|
||||
<button className='description__button'>
|
||||
Подробное резюме
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-xl-2"></div>
|
||||
<div className="col-12 col-xl-6">
|
||||
<ul className={style.description__list}>
|
||||
<div className='col-xl-2'></div>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<ul className='description__list'>
|
||||
{el.skillValues.map((e) => (
|
||||
<li key={e.id} className={style.description__list__item}>
|
||||
<li key={e.id} className='description__list-item'>
|
||||
{e.skill.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img className={style.description__rectangle} src={rectangle} alt="" />
|
||||
<img
|
||||
className='description__rectangle'
|
||||
src={rectangle}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
<div className="col-xl-4"></div>
|
||||
<div className='col-xl-4'></div>
|
||||
</div>
|
||||
))
|
||||
: <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> }
|
||||
) : (
|
||||
<div className='description__empty'>
|
||||
{isLoaded
|
||||
? 'В данный момент в категории нет свободных специалистов'
|
||||
: 'Загрузка...'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='description__footer'>
|
||||
<div className='description__footer-btn'>
|
||||
<button onClick={() => onLoadMore(2)}>
|
||||
{isLoadingMore ? (
|
||||
<Loader width={40} height={40} />
|
||||
) : (
|
||||
'Загрузить еще'
|
||||
)}{' '}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='description'>
|
||||
<div className='container'>
|
||||
<div className='description__wrapper'>
|
||||
{filteredListArr && filteredListArr.length > 0
|
||||
? filteredListArr.map((el) => (
|
||||
<div className='row' key={el.id}>
|
||||
<div className='col-2'>
|
||||
<img className='description__img' src={el.photo} alt='' />
|
||||
</div>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<h3 className='description__title'>
|
||||
<Link to={`/candidate/${el.id}`}>
|
||||
{' '}
|
||||
{el.specification} {SKILLS[el.position_id]},{' '}
|
||||
{LEVELS[el.level]}{' '}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
{el.vc_text_short ? (
|
||||
<div className='description__text'>
|
||||
{el.vc_text_short}
|
||||
</div>
|
||||
) : (
|
||||
<p className='description__text-secondary'>
|
||||
Описание отсутствует...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<Link to={`/candidate/${el.id}`}>
|
||||
<button className='description__button'>
|
||||
Подробное резюме
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='col-xl-2'></div>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<ul className='description__list'>
|
||||
{el.skillValues.map((e) => (
|
||||
<li key={e.id} className='description__list-item'>
|
||||
{e.skill.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img
|
||||
className='description__rectangle'
|
||||
src={rectangle}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
<div className='col-xl-4'></div>
|
||||
</div>
|
||||
))
|
||||
: /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
|
||||
candidatesListArr &&
|
||||
candidatesListArr.map((el) => (
|
||||
<div className='row' key={el.id}>
|
||||
<div className='col-2'>
|
||||
<img className='description__img' src={male} alt='' />
|
||||
</div>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<h3 className='description__title'>
|
||||
{SKILLS[el.position_id]}, {LEVELS[el.level]}
|
||||
</h3>
|
||||
|
||||
{el.vc_text_short ? (
|
||||
<div className='description__text'>
|
||||
{el.vc_text_short}
|
||||
</div>
|
||||
) : (
|
||||
<p className='description__text-secondary'>
|
||||
Описание отсутствует...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<Link to={`/candidate/${el.id}`}>
|
||||
<button className='description__button'>
|
||||
Подробное резюме
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='col-xl-2'></div>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<ul className='description__list'>
|
||||
{el.skillValues.map((e) => (
|
||||
<li key={e.id} className='description__list-item'>
|
||||
{e.skill.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img
|
||||
className='description__rectangle'
|
||||
src={rectangle}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
<div className='col-xl-4'></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className={style.description__footer}>
|
||||
<div className={style.description__footer__btn}>
|
||||
{(candidatesListArr.length !== allCandidates.length && filteredListArr.length > 0) || filteredListArr===null ? (
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='description__footer'>
|
||||
<div className='description__footer-btn'>
|
||||
{allCandidates &&
|
||||
candidatesListArr &&
|
||||
candidatesListArr.length !== allCandidates.length &&
|
||||
filteredListArr.length === 0 ? (
|
||||
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
|
||||
) : null}
|
||||
</div>
|
||||
@ -146,7 +241,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Description;
|
||||
export default Description
|
||||
|
||||
@ -1,250 +0,0 @@
|
||||
.description {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.description__empty {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.4em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description__wrapper {
|
||||
border: 1px solid #efefef;
|
||||
background-color: #fdfdfd;
|
||||
padding: 60px 40px 0 40px;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
}
|
||||
.description__img {
|
||||
margin-top: 16px;
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description__img {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: calc(50% - 60px);
|
||||
}
|
||||
.description__wrapper {
|
||||
padding: 45px 40px 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.description__title {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.6em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.description__title a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description__title {
|
||||
text-align: center;
|
||||
margin-bottom: 170px;
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 376px) {
|
||||
.description__title {
|
||||
font-size: 2.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 346px) {
|
||||
.description__title {
|
||||
font-size: 2.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.description__text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.description__textSecondary {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.7em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description__text {
|
||||
margin-left: 20px;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.description__button {
|
||||
width: 280px;
|
||||
height: 60px;
|
||||
border-radius: 100px;
|
||||
background-color: #73c141;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.8px;
|
||||
text-align: center;
|
||||
margin-top: 74px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.description__button:hover {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #73c141;
|
||||
box-shadow: inset 0 0 0 3px #73c141;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description__button {
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
z-index: 5;
|
||||
margin-left: 85px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.description__button {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325.98px) {
|
||||
.description__button {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.description__list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.description__list__item {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.7em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
line-height: 36px;
|
||||
margin-right: 10px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description__list__item {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description__rectangle {
|
||||
display: block;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description__rectangle {
|
||||
width: 80%;
|
||||
margin: 50px auto 80px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.description__footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.description__footer__btn > button {
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid #73c141;
|
||||
background-color: white;
|
||||
margin-right: 60px;
|
||||
color: #a0a0a0;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.description__footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.description__footer__btn > button {
|
||||
width: 160px;
|
||||
margin-right: 10px;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.description__footer__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.description__footer__sp {
|
||||
color: #705fa3;
|
||||
font-family: Circe;
|
||||
font-size: 1.3em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.description__button {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
252
src/components/Description/description.scss
Normal file
252
src/components/Description/description.scss
Normal file
@ -0,0 +1,252 @@
|
||||
.description {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 120px;
|
||||
|
||||
&__title {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.6em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&__empty {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.4em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&____wrapper {
|
||||
border: 1px solid #efefef;
|
||||
background-color: #fdfdfd;
|
||||
padding: 60px 40px 0 40px;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__img {
|
||||
margin-top: 16px;
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
word-wrap: break-word;
|
||||
|
||||
&-secondary {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.7em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 280px;
|
||||
height: 60px;
|
||||
border-radius: 100px;
|
||||
background-color: #73c141;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.8px;
|
||||
text-align: center;
|
||||
margin-top: 74px;
|
||||
margin-left: 30px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #73c141;
|
||||
box-shadow: inset 0 0 0 3px #73c141;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-item {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.7em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
line-height: 36px;
|
||||
margin-right: 10px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&__rectangle {
|
||||
display: block;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 60px;
|
||||
|
||||
&-btn {
|
||||
button {
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid #73c141;
|
||||
background-color: white;
|
||||
margin-right: 60px;
|
||||
color: #a0a0a0;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-sp {
|
||||
color: #705fa3;
|
||||
font-family: Circe;
|
||||
font-size: 1.3em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.description {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__wrapper {
|
||||
padding: 35px 40px 0 40px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
margin-bottom: 170px;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-left: 20px;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&__img {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: calc(50% - 60px);
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
z-index: 5;
|
||||
margin-left: 85px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
&-item {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__rectangle {
|
||||
width: 80%;
|
||||
margin: 50px auto 80px auto;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: 0;
|
||||
|
||||
&-btn {
|
||||
button {
|
||||
width: 160px;
|
||||
margin-right: 10px;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.description {
|
||||
&__button {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 376px) {
|
||||
.description {
|
||||
&__title {
|
||||
font-size: 2.8em;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 346px) {
|
||||
.description {
|
||||
&__title {
|
||||
font-size: 2.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325.98px) {
|
||||
.description {
|
||||
&__button {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user