NxTIC/css/timeline-form-facebook.scss

126 lines
1.9 KiB
SCSS
Raw Normal View History

@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{
color: #fff;
border-color: $timeline-fb;
background: $timeline-fb;
}
}
}
}
}