parent
c8ae7147e6
commit
2c30adaeb9
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* This component displays a bar releaving the current step
|
||||
*/
|
||||
import {useTranslation} from "next-i18next";
|
||||
const {Row, Col} = require("reactstrap")
|
||||
|
||||
|
||||
const Step = ({name, position, active}) => {
|
||||
const {t} = useTranslation();
|
||||
return <Col
|
||||
className="col-auto">
|
||||
<Row className={`align-items-center creation-step ${active ? 'active' : ''}`}>
|
||||
<Col className='col-auto badge align-items-center justify-content-center d-flex'>
|
||||
<div>{position}</div>
|
||||
</Col>
|
||||
<Col className='col-auto name'>
|
||||
{t(`admin.step-${name}`)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Col >
|
||||
}
|
||||
|
||||
const CreationSteps = ({step, ...props}) => {
|
||||
const steps = ['candidate', 'params', 'confirm'];
|
||||
|
||||
if (!steps.includes(step)) {
|
||||
throw Error(`Unknown step {step}`);
|
||||
}
|
||||
|
||||
return <div {...props}>
|
||||
<Row className='justify-content-between creation-steps'>
|
||||
{steps.map((name, i) => <Step name={name} active={step === name} key={i} position={i + 1} />
|
||||
)}
|
||||
</Row >
|
||||
</div >
|
||||
|
||||
}
|
||||
|
||||
export default CreationSteps;
|
||||
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* A toggle button using bootstrap
|
||||
*/
|
||||
|
||||
|
||||
const Toggle = ({active, children}) => {
|
||||
|
||||
|
||||
return (<button
|
||||
type="button"
|
||||
className={`btn btn-toggle ${active ? 'active' : ''}`}
|
||||
data-toggle="button"
|
||||
aria-pressed="false"
|
||||
autocomplete="off"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
Toggle.defaultProps = {
|
||||
'active': false
|
||||
}
|
||||
|
||||
export default Toggle;
|
||||
@ -0,0 +1,63 @@
|
||||
/**
|
||||
* This is the candidate field used during election creation
|
||||
*/
|
||||
import {useState} from 'react'
|
||||
import Image from 'next/image'
|
||||
import TrashButton from "./TrashButton";
|
||||
import {Row, Col} from "reactstrap";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {useElection, useElectionDispatch} from './ElectionContext';
|
||||
import defaultAvatar from '../../public/avatar.svg'
|
||||
import addIcon from '../../public/add.svg'
|
||||
import CandidateModal from './CandidateModal';
|
||||
|
||||
|
||||
const CandidateField = ({position, className, ...inputProps}) => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
const election = useElection();
|
||||
const dispatch = useElectionDispatch();
|
||||
const candidate = election.candidates[position];
|
||||
const image = candidate && candidate.image ? candidate.image : defaultAvatar;
|
||||
const active = candidate && candidate.active === true
|
||||
|
||||
const [modal, setModal] = useState(false);
|
||||
|
||||
const addCandidate = () => {
|
||||
dispatch({'type': 'candidate-push', 'value': "default"})
|
||||
};
|
||||
|
||||
const removeCandidate = () => {
|
||||
dispatch({'type': 'candidate-rm', 'value': position})
|
||||
}
|
||||
|
||||
const toggle = () => setModal(m => !m)
|
||||
|
||||
return (
|
||||
<Row
|
||||
className={`${className} p-2 my-3 border border-dashed border-dark border-opacity-50 align-items-center ${active ? "active" : ""}`}
|
||||
{...inputProps}
|
||||
>
|
||||
<Col onClick={toggle} className='col-auto me-auto'>
|
||||
<Row className='gx-3'>
|
||||
<Col className='col-auto'>
|
||||
<Image fill src={image} className={image == defaultAvatar ? "default-avatar" : ""} alt={t('common.thumbnail')} />
|
||||
</Col>
|
||||
<Col className='col-auto fw-bold'>
|
||||
{t("admin.add-candidate")}
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col className='col-auto'>
|
||||
{active ?
|
||||
<div className={trashIcon}><TrashButton onClick={removeCandidate} /></div> :
|
||||
<Image src={addIcon} onClick={addCandidate} alt={t('admin.add-candidate')} />
|
||||
}
|
||||
|
||||
</Col>
|
||||
<CandidateModal toggle={toggle} isOpen={modal} position={position} />
|
||||
</Row >
|
||||
);
|
||||
}
|
||||
|
||||
export default CandidateField;
|
||||
@ -0,0 +1,117 @@
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Label,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Button, Modal, ModalHeader, ModalBody, Form
|
||||
} from "reactstrap";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import Image from 'next/image';
|
||||
import {
|
||||
faPlus, faCogs, faCheck, faTrash
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {useElection, useElectionDispatch} from './ElectionContext';
|
||||
import ButtonWithConfirm from "./ButtonWithConfirm";
|
||||
import defaultAvatar from '../../public/avatar.svg'
|
||||
import HelpButton from "@components/admin/HelpButton";
|
||||
import AddPicture from "@components/admin/AddPicture";
|
||||
import addIcon from '../../public/add.svg'
|
||||
import leftArrowIcon from '../../public/arrow-left.svg'
|
||||
|
||||
const CandidateModal = ({isOpen, position, toggle}) => {
|
||||
|
||||
const {t} = useTranslation();
|
||||
|
||||
const election = useElection();
|
||||
const dispatch = useElectionDispatch();
|
||||
const candidate = election.candidates[position];
|
||||
const image = candidate && candidate.image ? candidate.image : defaultAvatar;
|
||||
|
||||
const removeCandidate = () => {
|
||||
dispatch({'type': 'candidate-rm', 'value': position})
|
||||
}
|
||||
|
||||
const addCandidate = () => {
|
||||
dispatch({'type': 'candidate-push', 'value': "default"})
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
toggle={toggle}
|
||||
keyboard={true}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h4 className="modal-title">
|
||||
{t('admin.add-candidate')}
|
||||
</h4>
|
||||
<button type="button" onClick={toggle} className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<ModalBody>
|
||||
<p>{t('admin.add-candidate-desc')}
|
||||
</p>
|
||||
<Col className="addCandidateCard">
|
||||
<InputGroup className="addCandidateForm">
|
||||
<Form>
|
||||
<div className="input-group-prepend">
|
||||
<div className="ajout-avatar">
|
||||
<div>
|
||||
<div className="avatar-placeholer">
|
||||
</div>
|
||||
</div>
|
||||
<div className="avatar-text">
|
||||
<h4>{t('admin.photo')} <span> ({t('admin.optional')})</span></h4>
|
||||
|
||||
<p>{t('admin.photo-type')} jpg, png, pdf</p>
|
||||
<div className="btn-ajout-avatar">
|
||||
<input type="file" name="myImage" id="myImage" />
|
||||
<label className="inputfile" htmlFor="myImage">{t('admin.photo-import')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/avatar.svg" />
|
||||
</div>
|
||||
<Label className="addCandidateText">{t('common.name')}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("admin.candidate-name-placeholder")}
|
||||
tabIndex={position + 1}
|
||||
maxLength="250"
|
||||
autoFocus
|
||||
className="addCandidateText"
|
||||
required
|
||||
/>
|
||||
<Label>{t('common.description')} <span> ({t('admin.optional')})</span></Label>
|
||||
<Input
|
||||
type="text"
|
||||
defaultValue={candidate.description}
|
||||
placeholder={t("admin.candidate-desc-placeholder")}
|
||||
maxLength="250"
|
||||
/>
|
||||
<Row>
|
||||
<Col col='col-auto me-auto'>
|
||||
<Button onClick={toggle} color='dark' outline={true}>
|
||||
<Image src={leftArrowIcon} alt={t('common.cancel')} />
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col col='col-auto '>
|
||||
<Button outline={true} color="primary" onClick={addCandidate} className="p-3">
|
||||
<Image src={addIcon} alt={t('common.save')} />
|
||||
<span>{t('common.save')}</span>
|
||||
</Button>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</Form>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</ModalBody>
|
||||
</Modal >);
|
||||
|
||||
}
|
||||
export default CandidateModal;
|
||||
@ -0,0 +1,47 @@
|
||||
import {useState, useEffect, createRef} from 'react'
|
||||
import {useTranslation} from "react-i18next";
|
||||
import CandidateField from './CandidateField'
|
||||
import Alert from '@components/Alert'
|
||||
import {MAX_NUM_CANDIDATES} from '@services/constants';
|
||||
import {Container} from 'reactstrap';
|
||||
import {useElection, useElectionDispatch} from './ElectionContext';
|
||||
|
||||
|
||||
const CandidatesField = () => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
const election = useElection();
|
||||
const dispatch = useElectionDispatch();
|
||||
const candidates = election.candidates;
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
// What to do when we change the candidates
|
||||
useEffect(() => {
|
||||
// Initialize the list with at least two candidates
|
||||
if (candidates.length < 2) {
|
||||
dispatch({'type': 'candidate-push', 'value': "default"})
|
||||
}
|
||||
if (candidates.length > MAX_NUM_CANDIDATES) {
|
||||
setError('error.too-many-candidates')
|
||||
}
|
||||
}, [candidates])
|
||||
|
||||
return (
|
||||
<Container className="candidate mt-5">
|
||||
<h4 className='mb-4'>{t('admin.add-candidates')}</h4>
|
||||
<Alert msg={error} />
|
||||
{candidates.map((candidate, index) => {
|
||||
return (
|
||||
<CandidateField
|
||||
key={index}
|
||||
position={index}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default CandidatesField
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* This component manages the date for ending the election
|
||||
*/
|
||||
import {useState} from 'react';
|
||||
import {Row} from 'reactstrap';
|
||||
import {useTranslation} from "next-i18next";
|
||||
import {useElection, useElectionDispatch} from './ElectionContext';
|
||||
import Toggle from '@components/Toggle';
|
||||
|
||||
|
||||
const DateField = () => {
|
||||
const election = useElection();
|
||||
const dispatch = useElectionDispatch();
|
||||
const [toggle, setToggle] = useState(false)
|
||||
const {t} = useTranslation();
|
||||
|
||||
|
||||
return (<Row>
|
||||
<Col className='col-auto me-auto'>
|
||||
{t('admin.date-limit')}
|
||||
</Col>
|
||||
<Col className='col-auto'>
|
||||
<Toggle onChange={setToggle(t => !t)} />
|
||||
</Col>
|
||||
</Row>)
|
||||
}
|
||||
|
||||
export default DateField;
|
||||
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* This component manages the title of the election
|
||||
*/
|
||||
import {useElection, useElectionDispatch} from './ElectionContext';
|
||||
|
||||
const TitleField = () => {
|
||||
const election = useElection();
|
||||
const dispatch = useElectionDispatch();
|
||||
}
|
||||
|
||||
export default TitleField;
|
||||
|
||||
|
||||
@ -1,170 +0,0 @@
|
||||
// import {useState, useEffect} from 'react'
|
||||
// import ButtonWithConfirm from "./ButtonWithConfirm";
|
||||
// import TrashButton from "./TrashButton";
|
||||
// import {
|
||||
// Row,
|
||||
// Col,
|
||||
// Label,
|
||||
// Input,
|
||||
// InputGroup,
|
||||
// InputGroupAddon,
|
||||
// Button, Modal, ModalHeader, ModalBody, Form
|
||||
// } from "reactstrap";
|
||||
// import {useTranslation} from "react-i18next";
|
||||
// import HelpButton from "@components/form/HelpButton";
|
||||
// import AddPicture from "@components/form/AddPicture";
|
||||
// import {
|
||||
// faPlus, faCogs, faCheck, faTrash
|
||||
// } from "@fortawesome/free-solid-svg-icons";
|
||||
// import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
// const DragHandle = sortableHandle(({children}) => (
|
||||
// <span className="input-group-text indexNumber">{children}</span>
|
||||
// ));
|
||||
|
||||
// const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd, ...inputProps}) => {
|
||||
const CandidateField = (props) => {
|
||||
// const {t} = useTranslation();
|
||||
// const [visibled, setVisibility] = useState(false);
|
||||
// const toggle = () => setVisibility(!visibled)
|
||||
|
||||
// const [selected, setSelectedState] = useState(false);
|
||||
// const [className, setClassName] = useState("none");
|
||||
// const [trashIcon, setTrashIcon] = useState("none");
|
||||
// const [plusIcon, setPlusIcon] = useState("none");
|
||||
|
||||
// const addCandidate = () => {
|
||||
// if (label != "") {
|
||||
// toggle();
|
||||
// onAdd();
|
||||
// setSelectedState(!selected);
|
||||
// }
|
||||
// else {}
|
||||
// }
|
||||
// const type = label != "" ? "button" : "submit";
|
||||
|
||||
// useEffect(() => {
|
||||
// setClassName("candidateButton " + (selected ? "candidateAdded" : ""))
|
||||
// }, [selected]);
|
||||
// useEffect(() => {
|
||||
// setPlusIcon("mr-2 cursorPointer " + (selected ? "trashIcon" : ""))
|
||||
// }, [selected]);
|
||||
// useEffect(() => {
|
||||
// setTrashIcon("trashIcon " + (selected ? "displayTrash" : ""))
|
||||
// }, [selected]);
|
||||
|
||||
// const addFunction = () => {
|
||||
// addCandidate();
|
||||
// setSelectedState(!selected);
|
||||
// }
|
||||
// const removeCandidate = () => {
|
||||
// onDelete();
|
||||
// toggle();
|
||||
|
||||
// }
|
||||
|
||||
//const [image, setImage] = useState(null);
|
||||
// const [createObjectURL, setCreateObjectURL] = useState(null);
|
||||
|
||||
// const uploadToClient = (event) => {
|
||||
// if (event.target.files && event.target.files[0]) {
|
||||
// const i = event.target.files[0];
|
||||
// setImage(i);
|
||||
// setCreateObjectURL(URL.createObjectURL(i));
|
||||
// }
|
||||
// };
|
||||
|
||||
return (<p>FOO</p>);
|
||||
// return (
|
||||
// <Row className="rowNoMargin">
|
||||
// <div className={className}>
|
||||
// <div className="avatarThumb">
|
||||
// <img src={createObjectURL} alt="" />
|
||||
// <input placeholder="Ajouter un candidat" className="candidate-placeholder ml-2" value={label} />
|
||||
// </div>
|
||||
//
|
||||
// <FontAwesomeIcon onClick={toggle} icon={faPlus} className={plusIcon} />
|
||||
// <div className={trashIcon}><TrashButton label={label} onDelete={onDelete} /></div>
|
||||
// </div>
|
||||
//
|
||||
// <Modal
|
||||
// isOpen={visibled}
|
||||
// toggle={toggle}
|
||||
// className="modal-dialog-centered"
|
||||
// >
|
||||
//
|
||||
// <ModalHeader className='closeModalAddCandidate' toggle={toggle}>
|
||||
//
|
||||
// </ModalHeader>
|
||||
// <ModalBody>
|
||||
// <Col className="addCandidateCard">
|
||||
// <InputGroup className="addCandidateForm">
|
||||
// <Form>
|
||||
// <InputGroupAddon addonType="prepend" className="addCandidateHeader">
|
||||
// { //<DragHandle>
|
||||
// }
|
||||
// <h6>Ajouter un participant</h6>
|
||||
// <p>Ajoutez une photo, le nom et une description au candidat.</p>
|
||||
// <div className="ajout-avatar">
|
||||
// <div>
|
||||
// <div className="avatar-placeholer">
|
||||
// <img src={createObjectURL} />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="avatar-text">
|
||||
// <h4>Photo <span> (facultatif)</span></h4>
|
||||
//
|
||||
// <p>Importer une photo.<br />format : jpg, png, pdf</p>
|
||||
// <div className="btn-ajout-avatar">
|
||||
// <input type="file" name="myImage" id="myImage" value={avatar} onChange={uploadToClient} />
|
||||
// <label className="inputfile" htmlFor="myImage">Importer une photo</label>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <img src="/avatar.svg" />
|
||||
// { //</InputGroupAddon></DragHandle>
|
||||
// }
|
||||
// </InputGroupAddon>
|
||||
// <Label className="addCandidateText">Nom et prenom</Label>
|
||||
// <Input
|
||||
// type="text"
|
||||
// value={label}
|
||||
// {...inputProps}
|
||||
// placeholder={t("resource.candidatePlaceholder")}
|
||||
// tabIndex={candIndex + 1}
|
||||
// maxLength="250"
|
||||
// autoFocus
|
||||
// className="addCandidateText"
|
||||
// required
|
||||
// />
|
||||
// <Label>Description (Facultatif)</Label>
|
||||
// <Input
|
||||
// type="text"
|
||||
// defaultValue={description}
|
||||
// maxLength="250"
|
||||
// />
|
||||
// <Row className="removeAddButtons">
|
||||
//
|
||||
// <ButtonWithConfirm className="removeButton" label={label} onDelete={removeCandidate} />
|
||||
//
|
||||
// <Button type={type} className="addButton" label={label} onClick={addCandidate}>
|
||||
// <FontAwesomeIcon icon={faPlus} />
|
||||
// <span>Ajouter</span>
|
||||
// </Button>
|
||||
//
|
||||
// </Row>
|
||||
// </Form>
|
||||
// </InputGroup>
|
||||
// </Col>
|
||||
// </ModalBody></Modal>
|
||||
// {/* <Col xs="auto" className="align-self-center pl-0">
|
||||
// <HelpButton>
|
||||
// {t(
|
||||
// "Enter the name of your candidate or proposal here (250 characters max.)"
|
||||
// )}
|
||||
// </HelpButton>
|
||||
// </Col> */}
|
||||
// </Row >
|
||||
// );
|
||||
}
|
||||
|
||||
export default CandidateField
|
||||
@ -1,136 +0,0 @@
|
||||
import {useState, useEffect, createRef} from 'react'
|
||||
import {useTranslation} from "react-i18next";
|
||||
// import {DndContext, useDroppable} from '@dnd-kit/core';
|
||||
import CandidateField from './CandidateField'
|
||||
import Alert from '@components/Alert'
|
||||
import {MAX_NUM_CANDIDATES} from '@services/constants';
|
||||
|
||||
|
||||
// export function CandidateList(props) {
|
||||
// const {isOver, setNodeRef} = useDroppable({
|
||||
// id: props.id,
|
||||
// });
|
||||
// const style = {
|
||||
// opacity: isOver ? 1 : 0.5,
|
||||
// };
|
||||
//
|
||||
// return (
|
||||
// <div ref={setNodeRef} style={style}>
|
||||
// {props.children}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
|
||||
// const SortableItem = sortableElement(({className, ...childProps}) => <li className={className}><CandidateField {...childProps} /></li>);
|
||||
//
|
||||
// const SortableContainer = sortableContainer(({children}) => {
|
||||
// return <ul className="sortable">{children}</ul>;
|
||||
// });
|
||||
|
||||
|
||||
// const arrayMove = (arr, fromIndex, toIndex) => {
|
||||
// // https://stackoverflow.com/a/6470794/4986615
|
||||
// const element = arr[fromIndex];
|
||||
// arr.splice(fromIndex, 1);
|
||||
// arr.splice(toIndex, 0, element);
|
||||
// return arr
|
||||
// }
|
||||
|
||||
|
||||
const CandidatesField = ({onChange}) => {
|
||||
const {t} = useTranslation();
|
||||
const createCandidate = () => ({label: "", description: "", fieldRef: createRef()})
|
||||
|
||||
// Initialize the list with at least two candidates
|
||||
const [candidates, setCandidates] = useState([createCandidate(), createCandidate()])
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
const addCandidate = () => {
|
||||
if (candidates.length < MAX_NUM_CANDIDATES) {
|
||||
setCandidates(
|
||||
c => {
|
||||
c.push(createCandidate());
|
||||
return c
|
||||
}
|
||||
);
|
||||
} else {
|
||||
setError('error.too-many-candidates')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// What to do when we change the candidates
|
||||
useEffect(() => {
|
||||
onChange();
|
||||
}, [candidates])
|
||||
|
||||
|
||||
const removeCandidate = index => {
|
||||
if (candidates.length === 1) {
|
||||
setCandidates([createCandidate()]);
|
||||
}
|
||||
else {
|
||||
setCandidates(oldCandidates =>
|
||||
oldCandidates.filter((_, i) => i != index)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const editCandidate = (index, label) => {
|
||||
setCandidates(
|
||||
oldCandidates => {
|
||||
oldCandidates[index].label = label;
|
||||
return oldCandidates;
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
const handleKeyPress = (e, index) => {
|
||||
if (e.key !== "Enter") {
|
||||
e.preventDefault();
|
||||
if (index + 1 === candidates.length) {
|
||||
addCandidate();
|
||||
}
|
||||
candidates[index + 1].fieldRef.current.focus();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const onSortEnd = ({oldIndex, newIndex}) => {
|
||||
setCandidates(c => arrayMove(c, oldIndex, newIndex));
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="sectionAjouterCandidat">
|
||||
<div className="ajouterCandidat">
|
||||
<h4>Saisissez ici le nom de vos candidats.</h4>
|
||||
<Alert msg={error} />
|
||||
{candidates.map((candidate, index) => {
|
||||
const className = "sortable"
|
||||
return (
|
||||
<CandidateField
|
||||
className={className}
|
||||
key={`item-${index}`}
|
||||
index={index}
|
||||
candIndex={index}
|
||||
label={candidate.label}
|
||||
description={candidate.description}
|
||||
onDelete={() => removeCandidate(index)}
|
||||
onChange={(e) => editCandidate(index, e.target.value)}
|
||||
onKeyPress={(e) => handleKeyPress(e, index)}
|
||||
onAdd={addCandidate}
|
||||
innerRef={candidate.fieldRef}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default CandidatesField
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 190 B |
|
After Width: | Height: | Size: 525 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,37 @@
|
||||
.creation-step {
|
||||
color: rgb(255,255,255,0.64);
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
background-color: rgb(0,0,0, 0.2);
|
||||
}
|
||||
|
||||
}
|
||||
.creation-step.active {
|
||||
.badge {
|
||||
background-color: white;
|
||||
color: $mv-blue-color;
|
||||
}
|
||||
.name {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.candidate, .creation-steps {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.default-avatar {
|
||||
background-color: rgba(255, 255, 255, 0.16);
|
||||
width: inherit!important;
|
||||
position: inherit!important;
|
||||
padding: 4px;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
.modal .overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.modal .body {
|
||||
background: white;
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal .body {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
h4.modal-title {
|
||||
color: $mv-blue-color;
|
||||
}
|
||||
Loading…
Reference in new issue