360 lines
6.9 KiB
SCSS
360 lines
6.9 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 $timeline-color;
|
|
|
|
}
|
|
|
|
|
|
/* (2) Titres de sections */
|
|
& h3{
|
|
display: block;
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.4em;
|
|
color: #fff;
|
|
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: .48em;
|
|
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: .8em;
|
|
margin-left: -41px;
|
|
padding: 7px;
|
|
|
|
border-radius: 50%;
|
|
/* Contour blanc*/
|
|
box-shadow: 0 0 0 2px #fff;
|
|
|
|
background-color: $timeline-color;
|
|
|
|
font-size: 1em;
|
|
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: $theme-fg-primary;
|
|
|
|
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: #ddd;
|
|
|
|
color: #333;
|
|
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: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
@include transition( background .1s ease-in-out );
|
|
}
|
|
|
|
|
|
/* Animation de hover*/
|
|
& input[type='file']:hover + span.file-input{
|
|
background: #bbb;
|
|
box-shadow: inset 0 0 5px #888;
|
|
}
|
|
|
|
|
|
/* Animation de .active*/
|
|
& input[type='file'].active + span.file-input{
|
|
background: $timeline-color;
|
|
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 );
|
|
|
|
/* Animation de @focus*/
|
|
&:focus{
|
|
border-color: $timeline-color;
|
|
}
|
|
}
|
|
|
|
// Before pour les submit
|
|
& input[type='submit'][data-store]{
|
|
|
|
&:before{
|
|
/* Icone de sauvegarde */
|
|
content: 'y ';
|
|
|
|
font-size: 1em;
|
|
font-family: 'icomoon';
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
& label{
|
|
color: #555;
|
|
}
|
|
|
|
/* (8) Gestion des espacements */
|
|
& [data-space]{
|
|
@extend *.line;
|
|
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
/* (9) <article> sert uniquement à regrouper */
|
|
& article{
|
|
all: unset !important;
|
|
}
|
|
|
|
/* (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;
|
|
}
|
|
|
|
& .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-color;
|
|
background-image:url('/f/svg/bottom_arrow/st/container/#{color-str($timeline-color)}');
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|