2016-04-20 14:57:59 +00:00
@ charset "UTF-8" ;
/ * [ 1 ] COULEURS
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/* (1) COULEURS DU THEME $DEFAULT */
/* (2) COULEURS DE THEME $DARK */
/ * [ 2 ] DIMENSIONS
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/* (1) Layout de base */
/ * [ 1 ] Formulaire de type timeline
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
2016-04-21 14:41:11 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] { display : block ; position : relative ; background-color : #fff ; font-size : .9 em ; color : #000 ; /* (1) On ajoute le liseré à droite pour TOUS les éléments */ /* (2) Titres de sections */ /* (3) Titres des sous-sections */ /* (4) Titres genre text message */ /* (5) 'Tags' -> textes sur le liseré gauche */ /* (6) Input d'upload de fichier (css hack) */ /* (7) Inputs de type text */ /* (8) Gestion des espacements */ /* (9) <article> sert uniquement à regrouper */ }
2016-04-20 14:57:59 +00:00
2016-04-21 08:33:03 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] * : not ( . no-line ) { display : block ; color : #333 ; margin : 0 40 px ; padding : 5 px 60 px ; border-left : 2 px solid #399ced ; }
2016-04-20 14:57:59 +00:00
2016-04-21 14:41:11 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] h3 : not ( . no-line ) { display : block ; padding : 20 px 40 px ; font-size : 1.4 em ; color : #fff ; font-weight : bold ; background-color : #399ced ; }
2016-04-20 14:57:59 +00:00
2016-04-21 14:41:11 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] h3 : not ( . no-line ) [ data-n ] : before { content : attr ( data - n ) ; display : inline-block ; position : absolute ; margin-top : .48 em ; margin-left : -41 px ; padding : 3 px 12 px ; border-radius : 50 % ; box-shadow : 0 0 0 3 px #fff ; background-color : #399ced ; font-size : 1.3 em ; color : #fff ; font-weight : bold ; transform : translateX ( -50 % ) translateY ( -50 % ) ; }
2016-04-20 15:06:48 +00:00
2016-04-21 08:33:03 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] h4 : not ( . no-line ) { display : block ; padding : 20 px 40 px ; font-size : 1.2 em ; color : #1068b0 ; font-weight : bold ; }
2016-04-20 20:58:19 +00:00
2016-04-21 14:41:11 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] h4 : not ( . no-line ) [ data-icon ] : before { content : attr ( data - icon ) ; display : inline-block ; position : absolute ; margin-top : .8 em ; margin-left : -41 px ; padding : 7 px ; border-radius : 50 % ; box-shadow : 0 0 0 2 px #fff ; background-color : #399ced ; font-size : 1 em ; font-family : 'icomoon' ; color : #fff ; font-weight : bold ; transform : translateX ( -50 % ) translateY ( -50 % ) ; }
2016-04-20 20:58:19 +00:00
2016-04-21 08:33:03 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] h5 : not ( . no-line ) { display : block ; padding : 20 px 40 px ; font-size : 1.2 em ; color : #1068b0 ; font-weight : bold ; }
2016-04-20 20:58:19 +00:00
2016-04-21 08:33:03 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] h5 : not ( . no-line ) : before { content : '' ; display : inline-block ; position : absolute ; margin-top : .7 em ; margin-left : -41 px ; padding : 7 px ; border-radius : 50 % ; box-shadow : 0 0 0 2 px #fff ; background-color : #399ced ; transform : translateX ( -50 % ) translateY ( -50 % ) ; }
# WRAPPER > # CONTAINER section [ data-timeline ] h5 : not ( . no-line ) [ data-text ] : after { content : attr ( data - text ) ; padding : 6 px 10 px ; border-radius : 3 px ; background : #399ced ; color : #fff ; font-weight : normal ; }
# WRAPPER > # CONTAINER section [ data-timeline ] [ data-tag ] { display : block ; padding : 40 px 60 px ; }
# WRAPPER > # CONTAINER section [ data-timeline ] [ data-tag ] : before { content : attr ( data - tag ) ; display : inline-block ; position : absolute ; margin-top : .5 em ; margin-left : -41 px ; padding : 2 px ; background-color : #fff ; font-size : 1.2 em ; color : #399ced ; font-weight : bold ; transform : translateX ( -50 % ) translateY ( -50 % ) ; }
2016-04-21 14:41:11 +00:00
# WRAPPER > # CONTAINER section [ data-timeline ] input [ type = 'file' ] { position : relative ; opacity : 0 ; z-index : 10 ; cursor : pointer ; }
# WRAPPER > # CONTAINER section [ data-timeline ] input [ type = 'file' ] + span . file-input { display : inline-block ; position : absolute ; margin-top : -1 px ; margin-left : -290 px ; width : calc ( 290 px - 2 * 15 px ) ; height : 30 px ; padding : 0 15 px ; border-radius : 3 px ; background : #ddd ; color : #333 ; line-height : 30 px ; font-weight : normal ; z-index : 9 ; cursor : pointer ; transition : background .1 s ease-in-out ; }
# WRAPPER > # CONTAINER section [ data-timeline ] input [ type = 'file' ] + span . file-input : before { content : 'e ' ; font-size : 1 em ; font-family : 'icomoon' ; color : #333 ; font-weight : bold ; }
# WRAPPER > # CONTAINER section [ data-timeline ] input [ type = 'file' ] : hover + span . file-input { background : #bbb ; box-shadow : inset 0 0 5 px #888 ; }
# WRAPPER > # CONTAINER section [ data-timeline ] input [ type = 'file' ] . active + span . file-input { background : #399ced ; color : #fff ; }
# WRAPPER > # CONTAINER section [ data-timeline ] input : not ( [ type = 'file' ] ) { display : inline ; width : auto ; margin : unset ; padding : 5 px 10 px ; margin-bottom : 5 px ; margin-right : 15 px ; border-radius : 0 ; border : 1.5 px solid #aaa ; font-size : .8 em ; font-weight : normal ; transition : border .2 s ease-in-out ; }
# WRAPPER > # CONTAINER section [ data-timeline ] input : not ( [ type = 'file' ] ) : focus { border-color : #399ced ; }
# WRAPPER > # CONTAINER section [ data-timeline ] [ data-space ] { padding-top : 30 px ; padding-bottom : 30 px ; }
# WRAPPER > # CONTAINER section [ data-timeline ] article { all : unset !important ; }
/ * # sourceMappingURL = data : application / json ; base64 , ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiY29tcGFjdC5jc3MiLAoJInNvdXJjZXMiOiBbCgkJIi4uL3RpbWVsaW5lLWZvcm0uc2NzcyIsCgkJIi4uL2NvbnN0YW50cy5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnY29uc3RhbnRzJztcblxuLyogWzFdIEZvcm11bGFpcmUgZGUgdHlwZSB0aW1lbGluZVxuPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cbiNXUkFQUEVSID4gI0NPTlRBSU5FUiBzZWN0aW9uW2RhdGEtdGltZWxpbmVde1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG5cblx0Zm9udC1zaXplOiAuOWVtO1xuXHRjb2xvcjogIzAwMDtcblxuXHQvKiAoMSkgT24gYWpvdXRlIGxlIGxpc2Vyw6kgw6AgZHJvaXRlIHBvdXIgVE9VUyBsZXMgw6lsw6ltZW50cyAqL1xuXHQmICo6bm90KC5uby1saW5lKXtcblx0XHRkaXNwbGF5OiBibG9jaztcblxuXHRcdGNvbG9yOiAjMzMzO1xuXG5cdFx0bWFyZ2luOiAwIDQwcHg7XG5cdFx0cGFkZGluZzogNXB4IDYwcHg7XG5cbiAgICAgICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCAjMzk5Y2VkO1xuXG5cdH1cblxuXG5cdC8qICgyKSBUaXRyZXMgZGUgc2VjdGlvbnMgKi9cblx0JiBoMzpub3QoLm5vLWxpbmUpe1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdHBhZGRpbmc6IDIwcHggNDBweDtcblxuXHRcdGZvbnQtc2l6ZTogMS40ZW07XG5cdFx0Y29sb3I6ICNmZmY7XG5cdFx0Zm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzM5OWNlZDtcblxuXHRcdC8vIFRPRE86IFRyYW5zZm9ybWVyIGxlcyBiYWNrZ3JvdW5kIGVuIDo6YmVmb3JlIHBvdXIgcXVlIGNhIHNvaXQganVzdGUgdW4gY2VyY2xlIGF2ZWMgYmcgZXQgYm9yZGVyXG5cdFx0Ly8gRklYTUU6IENvcnJpZ2VyIGxlIGxpc2Vyw6kgcG91ciBsZXMgYXV0cmVzIG5hdmlnYXRldXJzIHF1ZSBGRlxuXG5cdFx0Ly8gR2VzdGlvbiBkdSBiZWZvcmUgKGNvbXB0ZXVyIGNzcykgLy9cblx0XHQmW2RhdGEtbl06YmVmb3Jle1xuICAgICAgICAgICAgY29udGVudDogYXR0cihkYXRhLW4pO1xuXG4gICAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAuNDhlbTtcbiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAtNDFweDtcbiAgICAgICAgICAgIHBhZGRpbmc6IDNweCAxMnB4O1xuXG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAvLyBDb250b3VyIGJsYW5jXG4gICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAzcHggI2ZmZjtcblxuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzM5OWNlZDtcblxuXHRcdFx0Zm9udC1zaXplOiAxLjNlbTtcblx0XHRcdGNvbG9yOiAjZmZmO1xuXHRcdFx0Zm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgICAgICAgICAgIC8vIE9uIGNlbnRyZSBzdXIgbGEgbGlnbmVcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtNTAlKSB0cmFuc2xhdGVZKC01MCUpO1xuXG5cdFx0fVxuXHR9XG5cblx0LyogKDMpIFRpdHJlcyBkZXMgc291cy1zZWN0aW9ucyAqL1xuXHQmIGg0Om5vdCgubm8tbGluZSl7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cblx0XHRwYWRkaW5nOiAyMHB4IDQwcHg7XG5cblx0XHRmb250LXNpemU6IDEuMmVtO1xuXHRcdGNvbG9yOiBkYXJrZW4oIzM5OWNlZCwgMjApO1xuXHRcdGZvbnQtd2VpZ2h0OiBib2xkO1xuXG5cdFx0Ly8gR2VzdGlvbiBkdSBiZWZvcmUgKGNvbXB0ZXVyIGNzcykgLy9cblx0XHQmW2RhdGEtaWNvbl06YmVmb3Jle1xuXHRcdFx0Y29udGVudDogYXR0cihkYXRhLWljb24pO1xuXG4gICAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAuOGVtO1xuICAgICAgICAgICAgbWFyZ2luLWxlZnQ6IC00MXB4O1xuICAgICAgICAgICAgcGFkZGluZzogN3B4O1xuXG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAvLyBDb250b3VyIGJsYW5jXG4gICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAycHggI2ZmZjtcblxuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzM5OWNlZDtcblxuXHRcdFx0Zm9udC1zaXplOiAxZW07XG5cdFx0XHRmb250LWZhbWlseTogJ2ljb21vb24nO1xuXHRcdFx0Y29sb3I6ICNmZmY7XG5cdFx0XHRmb250LXdlaWdodDogYm9sZDtcblxuICAgICAgICAgICAgLy8gT24gY2VudHJlIHN1ciBsYSBsaWduZVxuICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC01MCUpIHRyYW5zbGF0ZVkoLTUwJSk7XG5cdFx0fVxuXHR9XG5cblx0LyogKDQpIFRpdHJlcyBnZW5yZSB0ZXh0IG1lc3NhZ2UgKi9cblx0JiBoNTpub3QoLm5vLWxpbmUpe1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXG5cdFx0cGFkZGluZzogMjBweCA0MHB4O1xuXG5cdFx0Zm9udC1zaXplOiAxLjJlbTtcblx0XHRjb2xvcjogZGFya2VuKCMzOTljZWQsIDIwKTtcblx0XHRmb250LXdlaWdodDogYm9sZDtcblxuXHRcdC8vIEdlc3Rpb24gZHUgYmVmb3JlIChjb21wdGV1ciBjc3MpIC8vXG5cdFx0JjpiZWZvcmV7XG5cdFx0XHRjb250ZW50OiAnJztcblxuICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgbWFyZ2luLXRvcDogLjdlbTtcbiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAtNDFweDtcbiAgICAgICAgICAgIHBhZGRpbmc6IDdweDtcblxuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgLy8gQ29udG91ciBibGFuY1xuICAgICAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgMnB4ICNmZmY7XG5cbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzO