125 lines
1.9 KiB
SCSS
125 lines
1.9 KiB
SCSS
|
|
@import 'constants';
|
|
|
|
/* [1] Formulaire de type timeline
|
|
=========================================================*/
|
|
#WRAPPER > #CONTAINER section[data-timeline].facebook{
|
|
|
|
|
|
|
|
/* Animation de .active*/
|
|
& input[type='file'].active + span.file-input{
|
|
background: $timeline-fb;
|
|
}
|
|
|
|
/* (7) Inputs de type text */
|
|
& input[type='text'],
|
|
& input[type='password'],
|
|
& input[type='number'],
|
|
& input[type='button'],
|
|
& input[type='submit'],
|
|
& input[type='mail']{
|
|
/* Animation de @focus*/
|
|
&:focus{
|
|
border-color: $timeline-fb;
|
|
}
|
|
}
|
|
|
|
// Boutons
|
|
& input[type='submit']{
|
|
border-color: darken($timeline-fb, 20);
|
|
|
|
background: $timeline-fb;
|
|
|
|
|
|
// Animation de @hover pour les boutons
|
|
&:hover,
|
|
&:focus{
|
|
background: darken($timeline-fb, 5);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
& .select-container select{
|
|
|
|
// Animation de @focus
|
|
&:focus{
|
|
border-color: $timeline-fb;
|
|
background-image:url('/src/static/container/bottom_arrow@#{color-str($timeline-fb)}.svg');
|
|
}
|
|
|
|
}
|
|
|
|
/* (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-fb;
|
|
&:before,&:after{
|
|
background-color: $timeline-fb;
|
|
}
|
|
}
|
|
|
|
& 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{
|
|
|
|
// Animation quand la page est validée
|
|
&.done{
|
|
color: $timeline-fb;
|
|
|
|
// Animation de hover
|
|
&:hover,
|
|
&.active{//:not(:first-child):not(:last-child)
|
|
border-color: $timeline-fb;
|
|
background: $timeline-fb;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|