532 lines
9.5 KiB
SCSS
532 lines
9.5 KiB
SCSS
@import 'constants';
|
|
|
|
/* [1] Formulaire de type timeline
|
|
=========================================================*/
|
|
#WRAPPER > #CONTAINER section[data-timeline]{
|
|
display: block;
|
|
position: relative;
|
|
|
|
background-color: #fff;
|
|
|
|
font-size: .9em;
|
|
color: #000;
|
|
|
|
/* (1) On ajoute le liseré à droite pour TOUS les éléments */
|
|
& h5,
|
|
& h4,
|
|
& h3,
|
|
& *.line{
|
|
display: block;
|
|
|
|
color: #333;
|
|
|
|
margin: 0 40px;
|
|
padding: 5px 60px;
|
|
|
|
border-left: 2px solid #d8e0e9;
|
|
|
|
}
|
|
|
|
|
|
/* (2) Titres de sections */
|
|
& h3{
|
|
display: block;
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.4em;
|
|
color: #000;
|
|
font-weight: bold;
|
|
|
|
// background-color: $timeline-color;
|
|
|
|
/* TODO: Transformer les background en ::before pour que ca soit juste un cercle avec bg et border*/
|
|
/* FIXME: Corriger le liseré pour les autres navigateurs que FF*/
|
|
|
|
/* Gestion du before (compteur css) //*/
|
|
&[data-n]:before{
|
|
content: attr(data-n);
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-top: .6em;
|
|
margin-left: -41px;
|
|
padding: 3px 12px;
|
|
|
|
border-radius: 50%;
|
|
/* Contour blanc*/
|
|
box-shadow: 0 0 0 3px #fff;
|
|
|
|
background-color: $timeline-color;
|
|
|
|
font-size: 1.3em;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
/* On centre sur la ligne*/
|
|
@include transform( translateX(-50%) translateY(-50%) );
|
|
|
|
}
|
|
}
|
|
|
|
/* (3) Titres des sous-sections */
|
|
& h4{
|
|
display: block;
|
|
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.2em;
|
|
color: darken($timeline-color, 20);
|
|
font-weight: bold;
|
|
|
|
/* Gestion du before (compteur css) //*/
|
|
&[data-icon]:before{
|
|
content: attr(data-icon);
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-top: .9em;
|
|
margin-left: -41px;
|
|
padding: 9px;
|
|
|
|
border-radius: 50%;
|
|
/* Contour blanc*/
|
|
box-shadow: 0 0 0 2px #fff;
|
|
|
|
background-color: $timeline-color;
|
|
|
|
font-size: .9em;
|
|
font-family: 'icomoon';
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
/* On centre sur la ligne*/
|
|
@include transform( translateX(-50%) translateY(-50%) );
|
|
}
|
|
}
|
|
|
|
/* (4) Titres genre text message */
|
|
& h5{
|
|
display: block;
|
|
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.2em;
|
|
color: darken($timeline-color, 20);
|
|
font-weight: bold;
|
|
|
|
/* Gestion du before (compteur css) //*/
|
|
&:before{
|
|
content: '';
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-top: .7em;
|
|
margin-left: -41px;
|
|
padding: 7px;
|
|
|
|
border-radius: 50%;
|
|
/* Contour blanc*/
|
|
box-shadow: 0 0 0 2px #fff;
|
|
|
|
background-color: $timeline-color;
|
|
|
|
/* On centre sur la ligne*/
|
|
@include transform( translateX(-50%) translateY(-50%) );
|
|
}
|
|
|
|
/* Texte genre text message*/
|
|
&[data-text]:after{
|
|
content: attr(data-text);
|
|
padding: 6px 10px;
|
|
|
|
border-radius: 3px;
|
|
|
|
background: $timeline-color;
|
|
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
/* (5) 'Tags' -> textes sur le liseré gauche */
|
|
& [data-tag]{
|
|
display: block;
|
|
|
|
padding: 40px 60px;
|
|
|
|
&:before{
|
|
content: attr(data-tag);
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-top: .5em;
|
|
margin-left: -41px;
|
|
padding: 2px;
|
|
|
|
background-color: #fff;
|
|
|
|
font-size: 1.2em;
|
|
color: $timeline-color;
|
|
font-weight: bold;
|
|
|
|
/* On centre sur la ligne*/
|
|
@include transform( translateX(-50%) translateY(-50%) );
|
|
}
|
|
}
|
|
|
|
/* (6) Input d'upload de fichier (css hack) */
|
|
& input[type='file']{
|
|
position: relative;
|
|
opacity: 0;
|
|
|
|
z-index: 8;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
/* Contiendra l'input*/
|
|
& input[type='file'] + span.file-input{
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-top: -1px;
|
|
margin-left: -290px;
|
|
width: calc( 290px - 2*15px );
|
|
height: 30px;
|
|
|
|
padding: 0 15px;
|
|
|
|
border-radius: 3px;
|
|
background: $timeline-0;
|
|
|
|
color: #222;
|
|
line-height: 30px;
|
|
font-weight: normal;
|
|
|
|
z-index: 9;
|
|
|
|
cursor: pointer;
|
|
|
|
pointer-events: none;
|
|
|
|
/* Icone d'upload*/
|
|
&:before{
|
|
content: 'e ';
|
|
|
|
font-size: 1em;
|
|
font-family: 'icomoon';
|
|
color: #222;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@include transition( background .1s ease-in-out );
|
|
}
|
|
|
|
|
|
/* Animation de hover*/
|
|
& input[type='file']:hover + span.file-input{
|
|
background: darken($timeline-0, 10);
|
|
box-shadow: inset 0 0 5px #888;
|
|
}
|
|
|
|
|
|
/* Animation de .active*/
|
|
& input[type='file'].active + span.file-input{
|
|
background: $timeline-2;
|
|
color: #fff;
|
|
// On change l'icône
|
|
&:before{
|
|
content: 'v ';
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
/* (7) Inputs de type text */
|
|
& input[type='text'],
|
|
& input[type='password'],
|
|
& input[type='number'],
|
|
& input[type='button'],
|
|
& input[type='submit'],
|
|
& input[type='mail']{
|
|
display: inline;
|
|
width: auto;
|
|
|
|
margin: unset;
|
|
padding: 5px 10px;
|
|
margin-bottom: 5px;
|
|
margin-right: 15px;
|
|
|
|
border-radius: 0;
|
|
border: 0;
|
|
border-bottom: 1px solid #555;
|
|
|
|
font-size: .8em;
|
|
font-weight: normal;
|
|
color: #333;
|
|
|
|
@include transition( border .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out );
|
|
|
|
/* Animation de @focus*/
|
|
&:focus{
|
|
border-color: $timeline-2;
|
|
}
|
|
}
|
|
|
|
// Boutons
|
|
& input[type='submit']{
|
|
border-color: darken($timeline-2, 20);
|
|
|
|
background: $timeline-2;
|
|
|
|
color: #fff;
|
|
|
|
// Animation de @hover pour les boutons
|
|
&:hover,
|
|
&:focus{
|
|
background: darken($timeline-2, 5);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
& label{
|
|
color: #555;
|
|
}
|
|
|
|
/* (8) Gestion des espacements */
|
|
& [data-space]{
|
|
@extend *.line;
|
|
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
/* (10) Gestion des espacements verticaux */
|
|
& .spacetop{ margin-top: 20px !important; }
|
|
& .spacebtm{ margin-bottom: 20px !important; }
|
|
|
|
& .spaced{
|
|
@extend .spacetop;
|
|
@extend .spacebtm;
|
|
}
|
|
|
|
& .nobold,
|
|
& .nobold *{
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
/* (11) Gestion des custom <select> */
|
|
& select{
|
|
width: auto;
|
|
display: inline-block;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
// Hides right arrow
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
text-indent: 1px;
|
|
text-overflow: '';
|
|
font-size: .9em;
|
|
|
|
& option:not(:disabled){
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
& option:disabled:not(:first-child){
|
|
font-size: 1.2em;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
& option.pad{
|
|
padding-left: 2.5em;
|
|
}
|
|
}
|
|
|
|
& .select-container select{
|
|
// width: auto;
|
|
display: inline-block;
|
|
padding: 2px;
|
|
padding-right: 30px;
|
|
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
|
|
background: #fff url('/f/svg/bottom_arrow/st/container/333333') right 10px center no-repeat;
|
|
background-size: 10px auto;
|
|
|
|
overflow: hidden;
|
|
|
|
// Animation de @focus
|
|
&:focus{
|
|
border-color: $timeline-2;
|
|
background-image:url('/f/svg/bottom_arrow/st/container/#{color-str($timeline-2)}');
|
|
}
|
|
|
|
}
|
|
|
|
/* (12) Gestion des coloris pour les titres */
|
|
& h5.color0,
|
|
& h4.color0,
|
|
& h3.color0{
|
|
color: $timeline-0;
|
|
&:before,&:after{
|
|
background-color: $timeline-0;
|
|
}
|
|
}
|
|
|
|
& h5.color1,
|
|
& h4.color1,
|
|
& h3.color1{
|
|
color: $timeline-1;
|
|
&:before,&:after{
|
|
background-color: $timeline-1;
|
|
}
|
|
}
|
|
|
|
& h5.color2,
|
|
& h4.color2,
|
|
& h3.color2{
|
|
color: $timeline-2;
|
|
&:before,&:after{
|
|
background-color: $timeline-2;
|
|
}
|
|
}
|
|
|
|
& h5.color3,
|
|
& h4.color3,
|
|
& h3.color3{
|
|
color: $timeline-3;
|
|
&:before,&:after{
|
|
background-color: $timeline-3;
|
|
}
|
|
}
|
|
|
|
& h5.color4,
|
|
& h4.color4,
|
|
& h3.color4{
|
|
color: $timeline-4;
|
|
&:before,&:after{
|
|
background-color: $timeline-4;
|
|
}
|
|
}
|
|
|
|
|
|
/* (13) Gestion de la navigation fléchée */
|
|
& .arrow-container{
|
|
|
|
& span{
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
margin: .3em 0;
|
|
padding: .5em .8em;
|
|
|
|
border: 1px solid darken(#d8e0e9, 10);
|
|
|
|
// Pas de rebord droite sauf si dernier
|
|
&:not(:last-child){
|
|
border-right: 0;
|
|
}
|
|
|
|
color: darken(#d8e0e9, 30);
|
|
|
|
cursor: pointer;
|
|
|
|
@include transition( .2s ease-in-out );
|
|
|
|
|
|
&:first-child{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
|
|
&:last-child{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
|
|
|
|
// Animation quand la page est validée
|
|
&.done{
|
|
font-weight: bold;
|
|
color: $timeline-2;
|
|
|
|
// Animation de hover
|
|
&:hover,
|
|
&.active{//:not(:first-child):not(:last-child)
|
|
border-color: $timeline-2;
|
|
background: $timeline-2;
|
|
color: #fff;
|
|
// font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// Quand la page n'est pas validée
|
|
&:not(.done){
|
|
font-weight: bold;
|
|
color: #333;
|
|
|
|
// Animation de hover
|
|
&:hover,
|
|
&.active{//:not(:first-child):not(:last-child)
|
|
border-color: #aaa;
|
|
background: #aaa;
|
|
color: #fff;
|
|
// font-weight: bold;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* (14) Switch entre Nom et Prénom */
|
|
& span.switch{
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
margin-right: 15px;
|
|
|
|
background: url('/f/svg/switch/st/container/4e4e50') center center no-repeat;
|
|
background-size: 1em auto;
|
|
|
|
font-size: .8em;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* (14) Gestion de l'affichage des MINI fiches et des FICHES relations */
|
|
// & article > article{
|
|
// display: none;
|
|
//
|
|
// &.active{
|
|
// display: block;
|
|
// }
|
|
// }
|
|
|
|
}
|