NxTIC/css/timeline-form/expanded.css

@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
=========================================================*/
#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 */
  /* (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 */
}

#WRAPPER > #CONTAINER section[data-timeline] *:not(.no-line) {
  display: block;
  color: #333;
  margin: 0 40px;
  padding: 5px 60px;
  border-left: 2px solid #399ced;
}

#WRAPPER > #CONTAINER section[data-timeline] h3:not(.no-line) {
  display: block;
  padding: 20px 40px;
  font-size: 1.4em;
  color: #fff;
  font-weight: bold;
  background-color: #399ced;
}

#WRAPPER > #CONTAINER section[data-timeline] h3:not(.no-line)[data-n]:before {
  content: attr(data-n);
  display: inline-block;
  position: absolute;
  margin-top: .48em;
  margin-left: -41px;
  padding: 3px 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;
  background-color: #399ced;
  font-size: 1.3em;
  color: #fff;
  font-weight: bold;
  transform: translateX(-50%) translateY(-50%);
}

#WRAPPER > #CONTAINER section[data-timeline] h4:not(.no-line) {
  display: block;
  padding: 20px 40px;
  font-size: 1.2em;
  color: #1068b0;
  font-weight: bold;
}

#WRAPPER > #CONTAINER section[data-timeline] h4:not(.no-line)[data-icon]:before {
  content: attr(data-icon);
  display: inline-block;
  position: absolute;
  margin-top: .8em;
  margin-left: -41px;
  padding: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  background-color: #399ced;
  font-size: 1em;
  font-family: 'icomoon';
  color: #fff;
  font-weight: bold;
  transform: translateX(-50%) translateY(-50%);
}

#WRAPPER > #CONTAINER section[data-timeline] h5:not(.no-line) {
  display: block;
  padding: 20px 40px;
  font-size: 1.2em;
  color: #1068b0;
  font-weight: bold;
}

#WRAPPER > #CONTAINER section[data-timeline] h5:not(.no-line):before {
  content: '';
  display: inline-block;
  position: absolute;
  margin-top: .7em;
  margin-left: -41px;
  padding: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #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: 6px 10px;
  border-radius: 3px;
  background: #399ced;
  color: #fff;
  font-weight: normal;
}

#WRAPPER > #CONTAINER section[data-timeline] [data-tag] {
  display: block;
  padding: 40px 60px;
}

#WRAPPER > #CONTAINER section[data-timeline] [data-tag]: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;
  transform: translateX(-50%) translateY(-50%);
}

#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: -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;
  transition: background .1s ease-in-out;
}

#WRAPPER > #CONTAINER section[data-timeline] input[type='file'] + span.file-input:before {
  content: 'e ';
  font-size: 1em;
  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 5px #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: 5px 10px;
  margin-bottom: 5px;
  margin-right: 15px;
  border-radius: 0;
  border: 1.5px solid #aaa;
  font-size: .8em;
  font-weight: normal;
  transition: border .2s 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: 30px;
  padding-bottom: 30px;
}

#WRAPPER > #CONTAINER section[data-timeline] article {
  all: unset !important;
}

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi90aW1lbGluZS1mb3JtLnNjc3MiLAoJCSIuLi9jb25zdGFudHMuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJIkBpbXBvcnQgJ2NvbnN0YW50cyc7XG5cbi8qIFsxXSBGb3JtdWxhaXJlIGRlIHR5cGUgdGltZWxpbmVcbj09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG4jV1JBUFBFUiA+ICNDT05UQUlORVIgc2VjdGlvbltkYXRhLXRpbWVsaW5lXXtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG5cdGZvbnQtc2l6ZTogLjllbTtcblx0Y29sb3I6ICMwMDA7XG5cblx0LyogKDEpIE9uIGFqb3V0ZSBsZSBsaXNlcsOpIMOgIGRyb2l0ZSBwb3VyIFRPVVMgbGVzIMOpbMOpbWVudHMgKi9cblx0JiAqOm5vdCgubm8tbGluZSl7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cblx0XHRjb2xvcjogIzMzMztcblxuXHRcdG1hcmdpbjogMCA0MHB4O1xuXHRcdHBhZGRpbmc6IDVweCA2MHB4O1xuXG4gICAgICAgIGJvcmRlci1sZWZ0OiAycHggc29saWQgIzM5OWNlZDtcblxuXHR9XG5cblxuXHQvKiAoMikgVGl0cmVzIGRlIHNlY3Rpb25zICovXG5cdCYgaDM6bm90KC5uby1saW5lKXtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRwYWRkaW5nOiAyMHB4IDQwcHg7XG5cblx0XHRmb250LXNpemU6IDEuNGVtO1xuXHRcdGNvbG9yOiAjZmZmO1xuXHRcdGZvbnQtd2VpZ2h0OiBib2xkO1xuXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzOTljZWQ7XG5cblx0XHQvLyBUT0RPOiBUcmFuc2Zvcm1lciBsZXMgYmFja2dyb3VuZCBlbiA6OmJlZm9yZSBwb3VyIHF1ZSBjYSBzb2l0IGp1c3RlIHVuIGNlcmNsZSBhdmVjIGJnIGV0IGJvcmRlclxuXHRcdC8vIEZJWE1FOiBDb3JyaWdlciBsZSBsaXNlcsOpIHBvdXIgbGVzIGF1dHJlcyBuYXZpZ2F0ZXVycyBxdWUgRkZcblxuXHRcdC8vIEdlc3Rpb24gZHUgYmVmb3JlIChjb21wdGV1ciBjc3MpIC8vXG5cdFx0JltkYXRhLW5dOmJlZm9yZXtcbiAgICAgICAgICAgIGNvbnRlbnQ6IGF0dHIoZGF0YS1uKTtcblxuICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgbWFyZ2luLXRvcDogLjQ4ZW07XG4gICAgICAgICAgICBtYXJnaW4tbGVmdDogLTQxcHg7XG4gICAgICAgICAgICBwYWRkaW5nOiAzcHggMTJweDtcblxuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgLy8gQ29udG91ciBibGFuY1xuICAgICAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgM3B4ICNmZmY7XG5cbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzOTljZWQ7XG5cblx0XHRcdGZvbnQtc2l6ZTogMS4zZW07XG5cdFx0XHRjb2xvcjogI2ZmZjtcblx0XHRcdGZvbnQtd2VpZ2h0OiBib2xkO1xuXG4gICAgICAgICAgICAvLyBPbiBjZW50cmUgc3VyIGxhIGxpZ25lXG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSkgdHJhbnNsYXRlWSgtNTAlKTtcblxuXHRcdH1cblx0fVxuXG5cdC8qICgzKSBUaXRyZXMgZGVzIHNvdXMtc2VjdGlvbnMgKi9cblx0JiBoNDpub3QoLm5vLWxpbmUpe1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXG5cdFx0cGFkZGluZzogMjBweCA0MHB4O1xuXG5cdFx0Zm9udC1zaXplOiAxLjJlbTtcblx0XHRjb2xvcjogZGFya2VuKCMzOTljZWQsIDIwKTtcblx0XHRmb250LXdlaWdodDogYm9sZDtcblxuXHRcdC8vIEdlc3Rpb24gZHUgYmVmb3JlIChjb21wdGV1ciBjc3MpIC8vXG5cdFx0JltkYXRhLWljb25dOmJlZm9yZXtcblx0XHRcdGNvbnRlbnQ6IGF0dHIoZGF0YS1pY29uKTtcblxuICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgbWFyZ2luLXRvcDogLjhlbTtcbiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAtNDFweDtcbiAgICAgICAgICAgIHBhZGRpbmc6IDdweDtcblxuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgLy8gQ29udG91ciBibGFuY1xuICAgICAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgMnB4ICNmZmY7XG5cbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzOTljZWQ7XG5cblx0XHRcdGZvbnQtc2l6ZTogMWVtO1xuXHRcdFx0Zm9udC1mYW1pbHk6ICdpY29tb29uJztcblx0XHRcdGNvbG9yOiAjZmZmO1xuXHRcdFx0Zm9udC13ZWlnaHQ6IGJvbGQ7XG5cbiAgICAgICAgICAgIC8vIE9uIGNlbnRyZSBzdXIgbGEgbGlnbmVcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtNTAlKSB0cmFuc2xhdGVZKC01MCUpO1xuXHRcdH1cblx0fVxuXG5cdC8qICg0KSBUaXRyZXMgZ2VucmUgdGV4dCBtZXNzYWdlICovXG5cdCYgaDU6bm90KC5uby1saW5lKXtcblx0XHRkaXNwbGF5OiBibG9jaztcblxuXHRcdHBhZGRpbmc6IDIwcHggNDBweDtcblxuXHRcdGZvbnQtc2l6ZTogMS4yZW07XG5cdFx0Y29sb3I6IGRhcmtlbigjMzk5Y2VkLCAyMCk7XG5cdFx0Zm9udC13ZWlnaHQ6IGJvbGQ7XG5cblx0XHQvLyBHZXN0aW9uIGR1IGJlZm9yZSAoY29tcHRldXIgY3NzKSAvL1xuXHRcdCY6YmVmb3Jle1xuXHRcdFx0Y29udGVudDogJyc7XG5cbiAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgIG1hcmdpbi10b3A6IC43ZW07XG4gICAgICAgICAgICBtYXJnaW4tbGVmdDogLTQxcHg7XG4gICAgICAgICAgICBwYWRkaW5nOiA3cHg7XG5cbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgIC8vIENvbnRvdXIgYmxhbmNcbiAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDJweCAjZmZmO1xuXG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjM