reports create, refactoring
This commit is contained in:
kurpfish
@ -1,140 +1,153 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useHistory, useParams, Link } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { currentCandidate, selectCurrentCandidate, auth } from '../../redux/outstaffingSlice';
|
||||
import arrow from '../../images/right-arrow.png';
|
||||
import rectangle from '../../images/rectangle_secondPage.png';
|
||||
import Sidebar from '../Sidebar/Sidebar';
|
||||
import SectionSkills from './SectionSkills';
|
||||
import front from '../../images/front_end.png';
|
||||
import back from '../../images/back_end.png';
|
||||
import design from '../../images/design.png';
|
||||
import { fetchItemsForId } from '../../server/server';
|
||||
import { Footer } from '../Footer/Footer';
|
||||
import React, { useEffect } from 'react'
|
||||
import { useHistory, useParams, Link } from 'react-router-dom'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
currentCandidate,
|
||||
selectCurrentCandidate,
|
||||
auth
|
||||
} from '../../redux/outstaffingSlice'
|
||||
import arrow from '../../images/right-arrow.png'
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
import Sidebar from '../CandidateSidebar/CandidateSidebar'
|
||||
import SkillSection from '../SkillSection/SkillSection'
|
||||
import front from '../../images/front_end.png'
|
||||
import back from '../../images/back_end.png'
|
||||
import design from '../../images/design.png'
|
||||
import { fetchGet } from '../../server/server'
|
||||
import { Footer } from '../Footer/Footer'
|
||||
|
||||
import './candidate.css';
|
||||
import { getRole } from '../../redux/roleSlice';
|
||||
import './candidate.scss'
|
||||
import { getRole } from '../../redux/roleSlice'
|
||||
|
||||
const Candidate = () => {
|
||||
const history = useHistory();
|
||||
const { id: candidateId } = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const role = useSelector(getRole);
|
||||
const history = useHistory()
|
||||
const { id: candidateId } = useParams()
|
||||
const dispatch = useDispatch()
|
||||
const role = useSelector(getRole)
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index:Number(candidateId), history, role, logout: dispatch(auth(false)) }).then((el) =>
|
||||
dispatch(currentCandidate(el))
|
||||
);
|
||||
}, [dispatch, candidateId]);
|
||||
fetchGet({
|
||||
link: `${process.env.REACT_APP_API_URL}/api/profile/`,
|
||||
params: Number(candidateId),
|
||||
history,
|
||||
role,
|
||||
logout: () => dispatch(auth(false))
|
||||
}).then((el) => dispatch(currentCandidate(el)))
|
||||
}, [dispatch, candidateId])
|
||||
|
||||
const currentCandidateObj = useSelector(selectCurrentCandidate);
|
||||
const currentCandidateObj = useSelector(selectCurrentCandidate)
|
||||
|
||||
const { position_id, skillValues, vc_text: text } = currentCandidateObj;
|
||||
const { position_id, skillValues, vc_text: text } = currentCandidateObj
|
||||
|
||||
const setStyles = () => {
|
||||
const styles = {
|
||||
classes: '',
|
||||
header: '',
|
||||
img: '',
|
||||
};
|
||||
img: ''
|
||||
}
|
||||
|
||||
switch (Number(position_id)) {
|
||||
case 1: {
|
||||
styles.classes = 'back';
|
||||
styles.header = 'Backend';
|
||||
styles.img = back;
|
||||
styles.classes = 'back'
|
||||
styles.header = 'Backend'
|
||||
styles.img = back
|
||||
|
||||
break;
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
styles.classes = 'des';
|
||||
styles.header = 'Frontend';
|
||||
styles.img = front;
|
||||
break;
|
||||
styles.classes = 'des'
|
||||
styles.header = 'Frontend'
|
||||
styles.img = front
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
styles.classes = 'front';
|
||||
styles.header = 'Design';
|
||||
styles.img = design;
|
||||
break;
|
||||
styles.classes = 'front'
|
||||
styles.header = 'Design'
|
||||
styles.img = design
|
||||
break
|
||||
}
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
|
||||
return styles;
|
||||
};
|
||||
|
||||
function createMarkup(text) {
|
||||
return { __html: text.split('</p>').join('</p>') };
|
||||
return styles
|
||||
}
|
||||
|
||||
const { header, img, classes } = setStyles();
|
||||
function createMarkup(text) {
|
||||
return { __html: text.split('</p>').join('</p>') }
|
||||
}
|
||||
|
||||
const { header, img, classes } = setStyles()
|
||||
|
||||
return (
|
||||
<div className='candidate'>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className='candidate__title'>
|
||||
<h2>
|
||||
<span>Аутстаффинг</span> it-персонала
|
||||
</h2>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='candidate__title'>
|
||||
<h2>
|
||||
<span>Аутстаффинг</span> it-персонала
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
<div className='candidate__header'>
|
||||
<div className='candidate__arrow' onClick={() => history.push('/')}>
|
||||
<div className='candidate__arrow-img'>
|
||||
<img src={arrow} alt='' />
|
||||
</div>
|
||||
<div className='candidate__arrow-sp'>
|
||||
<span>Вернуться к списку</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='candidate__icon'>
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt='' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className='candidate__header'>
|
||||
<div className='arrow' onClick={() => history.push('/')}>
|
||||
<div className='arrow__img'>
|
||||
<img src={arrow} alt="" />
|
||||
</div>
|
||||
<div className='arrow__sp'>
|
||||
<span>Вернуться к списку</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='icon'>
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='candidate__main'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<Sidebar candidate={currentCandidateObj} position />
|
||||
</div>
|
||||
</div>
|
||||
<div className='candidate__main'>
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-4">
|
||||
<Sidebar candidate={currentCandidateObj} />
|
||||
</div>
|
||||
<div className="col-12 col-xl-8">
|
||||
<div className='candidate__main__description'>
|
||||
<img src={rectangle} alt="" />
|
||||
<p className='hashtag'># Описание опыта</p>
|
||||
{text ? (
|
||||
<div className='candidate__text' dangerouslySetInnerHTML={createMarkup(text)}></div>
|
||||
) : (
|
||||
<p className='candidate__textSecondary'>
|
||||
{currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' }
|
||||
</p>
|
||||
)}
|
||||
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
||||
<div className='col-12 col-xl-8'>
|
||||
<div className='candidate__main-description'>
|
||||
<img src={rectangle} alt='' />
|
||||
<p className='candidate__hashtag'># Описание опыта</p>
|
||||
{text ? (
|
||||
<div
|
||||
className='candidate__text'
|
||||
dangerouslySetInnerHTML={createMarkup(text)}
|
||||
></div>
|
||||
) : (
|
||||
<p className='candidate__text-secondary'>
|
||||
{currentCandidateObj.vc_text
|
||||
? currentCandidateObj.vc_text
|
||||
: 'Описание отсутствует...'}
|
||||
</p>
|
||||
)}
|
||||
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
|
||||
<button type="submit" className='candidate__btn'>
|
||||
Выбрать к собеседованию
|
||||
</button>
|
||||
</Link> */}
|
||||
<SectionSkills skillsArr={skillValues} />
|
||||
</div>
|
||||
<SkillSection skillsArr={skillValues} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Candidate;
|
||||
export default Candidate
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import './candidate.css';
|
||||
|
||||
const SectionSkills = ({ skillsArr }) => {
|
||||
return (
|
||||
<div className='SectionSkills'>
|
||||
<h3>Навыки:</h3>
|
||||
<ul>{skillsArr && skillsArr.map((skills) => <li key={skills.id}>{skills.skill.name}</li>)}</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionSkills;
|
||||
@ -1,309 +0,0 @@
|
||||
.candidate__title {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.candidate__title > h2 {
|
||||
text-align: center;
|
||||
color: #52b709;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 77.81px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate__title > h2 {
|
||||
font-size: 5em;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.candidate__title > h2 {
|
||||
font-size: 4.5em;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.candidate__title > h2 > span {
|
||||
color: #282828;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.candidate__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 120px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.candidate__header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.candidate__header .arrow {
|
||||
margin-left: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.candidate__header .arrow {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.arrow {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow__img > img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrow__sp > span {
|
||||
margin-left: 40px;
|
||||
margin-right: 120px;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.arrow__sp > span {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 260px;
|
||||
min-height: 120px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon > h3 {
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
top: 40%;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icon > img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.front {
|
||||
left: -5%;
|
||||
}
|
||||
|
||||
.back {
|
||||
top: 11%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.des {
|
||||
top: 24%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.candidate__main {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.candidate__main__description {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.candidate__main__description > h2 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate__main__description > h2 {
|
||||
font-size: 3.2em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -410px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.candidate__main__description > h2 {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 345.98px) {
|
||||
.candidate__main__description > h2 {
|
||||
font-size: 2.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate__main__description > img {
|
||||
/* width: 50%;
|
||||
display: block;
|
||||
margin: 0 auto; */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.candidate__main__description > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 576.98px) {
|
||||
.candidate__btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate__btn {
|
||||
display: block;
|
||||
width: 221px;
|
||||
height: 49px;
|
||||
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 24px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.3em;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 28px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.SectionSkills {
|
||||
display: flex;
|
||||
border: 1px solid #69bf2c;
|
||||
padding: 28px 40px 16px 30px;
|
||||
margin-top: 60px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.SectionSkills {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.SectionSkills > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SectionSkills > ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.SectionSkills > ul > li {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.candidate__text > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.candidate__textSecondary {
|
||||
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;
|
||||
}
|
||||
|
||||
.candidate + .logout-button{
|
||||
top: 80px !important;
|
||||
}
|
||||
|
||||
.candidate footer {
|
||||
margin-top: 2.5rem !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.candidate + .logout-button {
|
||||
top: 16px !important;
|
||||
}
|
||||
}
|
||||
293
src/components/Candidate/candidate.scss
Normal file
293
src/components/Candidate/candidate.scss
Normal file
@ -0,0 +1,293 @@
|
||||
.candidate {
|
||||
&__title {
|
||||
margin-top: 60px;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #52b709;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 77.81px;
|
||||
|
||||
span {
|
||||
color: #282828;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 120px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
margin-top: 60px;
|
||||
|
||||
&-description {
|
||||
padding-left: 16px;
|
||||
|
||||
h2 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 2.8em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.6em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
min-width: 260px;
|
||||
min-height: 120px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
top: 40%;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate {
|
||||
&__title {
|
||||
h2 {
|
||||
font-size: 5em;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
margin-bottom: 40px;
|
||||
|
||||
&-img {
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-sp {
|
||||
span {
|
||||
margin-left: 40px;
|
||||
margin-right: 120px;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.candidate {
|
||||
&__title {
|
||||
h2 {
|
||||
font-size: 4.5em;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.candidate {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
margin-left: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.candidate {
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
&-description {
|
||||
h2 {
|
||||
font-size: 3.2em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -410px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: block;
|
||||
width: 221px;
|
||||
height: 49px;
|
||||
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
|
||||
border-radius: 24px;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-size: 1.3em;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 28px auto;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
margin-left: 0;
|
||||
|
||||
&-sp {
|
||||
span {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.front {
|
||||
left: -5%;
|
||||
}
|
||||
|
||||
.back {
|
||||
top: 11%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.des {
|
||||
top: 24%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.candidate + .logout-button {
|
||||
top: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.candidate {
|
||||
&__main {
|
||||
&-description {
|
||||
h2 {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 345.98px) {
|
||||
.candidate {
|
||||
&__main {
|
||||
&-description {
|
||||
h2 {
|
||||
font-size: 2.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576.98px) {
|
||||
.candidate {
|
||||
&__btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.candidate + .logout-button {
|
||||
top: 80px !important;
|
||||
}
|
||||
Reference in New Issue
Block a user