NxTIC/css/global.scss

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;
}
}