Des questions au style plus franc
Une introduction plus pertinente et agréablepull/6/head
Mael Thomas
parent
9f34ddfbcf
commit
ec359b1998
|
|
@ -4,11 +4,12 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Syso</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,700' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="js">lOl</div>
|
||||
<script src="https://use.fontawesome.com/1da10bbdec.js"></script>
|
||||
<script type="text/javascript" src="/dist/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,25 @@
|
|||
#sim {
|
||||
padding: 2em;
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
#sim p {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#sim section {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#introduction {
|
||||
#sim #introduction {
|
||||
font-size: 110%;
|
||||
padding-top: 0;
|
||||
width: 60%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
#introduction h1 {
|
||||
font-size: 250%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
#conversation {
|
||||
|
|
@ -28,10 +38,9 @@
|
|||
}
|
||||
|
||||
#sim #help {
|
||||
background: #f7f7f7;
|
||||
border-radius: 3em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
font-style: italic;
|
||||
border-left: 6px solid #ddd;
|
||||
margin-left: 2em;
|
||||
padding-left: 3em;
|
||||
min-width: 30%;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import React from 'react'
|
||||
import colours from './themeColours'
|
||||
|
||||
export default () =>
|
||||
<section id="introduction">
|
||||
<h1 style={{color: colours().colour}}>Simulateur CDD</h1>
|
||||
<p>
|
||||
Le CDD en France est un contrat d'exception au CDI. On y a donc recours sous certaines conditions seulement. Cet outil vous aidera à respecter ces conditions et à calculer le prix mensuel de l'embauche, qui en dépend, en vous proposant une suite de questions.
|
||||
Le CDD en France est un contrat d'exception au CDI, apportant à l'employeur plus de souplesse dans un cadre précis prévu par la loi. Dans un certain nombre de cas, une contrepartie financière lui est demandée. Ce simulateur vous aidera à la calculer.
|
||||
</p>
|
||||
<p>
|
||||
Ici, vous avez le droit de ne pas savoir : certaines questions sont complexes, elles seront toujours accompagnées d'une aide contextuelle. Si ce n'est pas le cas, engueulez-nous !
|
||||
Ici, vous avez le droit de ne pas savoir : certaines questions sont complexes, elles seront toujours accompagnées d'une aide contextuelle. Si ce n'est pas le cas, écrivez-nous <i style={{cursor: 'pointer'}} className="fa fa-envelope"></i> !
|
||||
</p>
|
||||
{/*
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -122,9 +122,9 @@ export var FormDecorator = formType => RenderField =>
|
|||
<span>
|
||||
<h1
|
||||
style={{
|
||||
border: '2px solid ' + this.props.themeColours.colour, // higher border width and colour to emphasize focus
|
||||
background: 'none',
|
||||
color: this.props.themeColours.textColourOnWhite,
|
||||
// border: '2px solid ' + this.props.themeColours.colour, // higher border width and colour to emphasize focus
|
||||
// background: 'none',
|
||||
// color: this.props.themeColours.textColourOnWhite,
|
||||
maxWidth: wideQuestion ? '95%' : ''
|
||||
}}
|
||||
>{this.props.question}</h1>
|
||||
|
|
|
|||
|
|
@ -74,16 +74,18 @@
|
|||
}
|
||||
|
||||
.step h1 {
|
||||
background: #eee;
|
||||
color: #222;
|
||||
display: inline-block;
|
||||
max-width: 55%;
|
||||
font-size: 100%;
|
||||
font-size: 110%;
|
||||
font-weight: 400;
|
||||
padding: .5em 1em;
|
||||
padding: .6em 1em;
|
||||
margin: 0;
|
||||
margin-bottom: .4em;
|
||||
border-radius: 1.4em;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
/* The unfolded step is the currently focused
|
||||
question : make it visible with colors */
|
||||
|
|
@ -132,6 +134,22 @@ question : make it visible with colors */
|
|||
float: right;
|
||||
}
|
||||
|
||||
.step label.radio {
|
||||
text-align: center;
|
||||
margin-left: 1em;
|
||||
margin-top: 1em;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
padding: 0 .8em;
|
||||
line-height: 1.8em;
|
||||
border-radius: .4em;
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
font-size: 90%;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
.resume {
|
||||
transition: 1s display;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,5 @@ export let answered = ({colour, textColour}) => ({
|
|||
})
|
||||
|
||||
export let answer = ({textColourOnWhite}) => ({
|
||||
color: textColourOnWhite,
|
||||
border: '1px solid ' + textColourOnWhite,
|
||||
color: textColourOnWhite
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue