251 lines
5.0 KiB
SCSS
Executable File
251 lines
5.0 KiB
SCSS
Executable File
@import 'constants';
|
|
|
|
/* [1] Panel list (tokens, utilisateurs, etc)
|
|
=========================================================*/
|
|
@import 'panel-list';
|
|
|
|
/* [2] Formulaire de type 'timeline'
|
|
=========================================================*/
|
|
// @import 'timeline-form';
|
|
|
|
/* [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 */
|
|
& *:not(.no-line){
|
|
display: block;
|
|
|
|
color: #333;
|
|
|
|
margin: 0 40px;
|
|
padding: 5px 60px;
|
|
|
|
border-left: 2px solid #399ced;
|
|
|
|
}
|
|
|
|
|
|
/* (2) Titres de sections */
|
|
& h3:not(.no-line){
|
|
display: block;
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.4em;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
background-color: #399ced;
|
|
|
|
// 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: #399ced;
|
|
|
|
font-size: 1.3em;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
// On centre sur la ligne
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
}
|
|
}
|
|
|
|
/* (3) Titres des sous-sections */
|
|
& h4:not(.no-line){
|
|
display: block;
|
|
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.2em;
|
|
color: darken(#399ced, 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: #399ced;
|
|
|
|
font-size: 1em;
|
|
font-family: 'icomoon';
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
// On centre sur la ligne
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
}
|
|
|
|
/* (4) Titres genre text message */
|
|
& h5:not(.no-line){
|
|
display: block;
|
|
|
|
padding: 20px 40px;
|
|
|
|
font-size: 1.2em;
|
|
color: darken(#399ced, 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: #399ced;
|
|
|
|
// On centre sur la ligne
|
|
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: #399ced;
|
|
font-weight: bold;
|
|
|
|
// On centre sur la ligne
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
}
|
|
|
|
/* (6) Input d'upload de fichier (css hack) */
|
|
& input[type='file']{
|
|
position: relative;
|
|
opacity: 0;
|
|
|
|
z-index: 10;
|
|
|
|
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;
|
|
|
|
// Icone d'upload
|
|
&:before{
|
|
content: 'e ';
|
|
|
|
font-size: 1em;
|
|
font-family: 'icomoon';
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/* (7) Inputs de type text */
|
|
& input:not([type='file']){
|
|
display: inline;
|
|
width: auto;
|
|
|
|
margin: unset;
|
|
padding: 5px 10px;
|
|
margin-bottom: 5px;
|
|
margin-right: 15px;
|
|
|
|
border-radius: 0;
|
|
border: 1.5px solid #aaa;
|
|
|
|
font-size: .8em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* (8) Gestion des espacements */
|
|
& [data-space]{
|
|
padding-top: 30px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
|
|
|
|
}
|