NxTIC/css/container/expanded.css

/* [1] COULEURS
=========================================================*/
/* (1) COULEURS DU THEME $DEFAULT */
/* (2) COULEURS DE THEME $DARK */
/* (3) Couleurs du theme pour la timeline */
/* [2] DIMENSIONS
=========================================================*/
/* (1) Layout de base */
/* [3] Mixins
=========================================================*/
/* [4] Functions
=========================================================*/
#WRAPPER > #CONTAINER {
  /* [1] Section (contenu)
	=========================================================*/
}

#WRAPPER > #CONTAINER > section {
  display: none;
  margin: 3em;
  position: relative;
  flex-grow: 1;
  padding: 1em;
  border-radius: 3px;
  background-color: #fff;
  color: #000;
  font-size: 1em;
  border: 1px solid #ddd;
  /* [2] Titres
		=========================================================*/
  /* [3][4] Boutons radio + Checkboxes
		=========================================================*/
  /* [5] Boutons de submit
		=========================================================*/
  /* [6] Images inline
		=========================================================*/
  /* [7] Contour flags
		=========================================================*/
}

#WRAPPER > #CONTAINER > section.active {
  display: block;
}

#WRAPPER > #CONTAINER > section h6 {
  color: #848484;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .2em;
  margin: 0;
  padding: 0;
}

#WRAPPER > #CONTAINER > section h6:before {
  content: '- ';
}

#WRAPPER > #CONTAINER > section h6:after {
  content: ' -';
}

#WRAPPER > #CONTAINER > section h6.center {
  text-align: center;
}

#WRAPPER > #CONTAINER > section input[type="radio"],
#WRAPPER > #CONTAINER > section input[type="checkbox"] {
  display: none;
}

#WRAPPER > #CONTAINER > section input[type="radio"] + label[for],
#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for] {
  padding-left: .8em;
  -webkit-touch-callout: none;
  /* iOS Safari          */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror           */
  -moz-user-select: none;
  /* Firefox             */
  -ms-user-select: none;
  /* IE/Edge             */
  user-select: none;
  /* non-prefixed        */
  cursor: pointer;
}

#WRAPPER > #CONTAINER > section input[type="radio"] + label[for]:before,
#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:before {
  content: '';
  display: inline-block;
  position: relative;
  top: .1em;
  left: -.8em;
  width: calc( 1em - 2*.15em);
  height: calc( 1em - 2*.15em);
  border-radius: 50% / 50%;
  border: 0.15em solid #0e6dbf;
  background: #fff center center no-repeat;
  background-image: none;
  background-size: 70% auto;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  cursor: pointer;
}

#WRAPPER > #CONTAINER > section input[type="radio"] + label[for]:hover,
#WRAPPER > #CONTAINER > section input[type="radio"] + label[for] .hover,
#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:hover,
#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for] .hover {
  text-decoration: underline;
}

#WRAPPER > #CONTAINER > section input[type="radio"]:checked + label[for]:before,
#WRAPPER > #CONTAINER > section input[type="checkbox"]:checked + label[for]:before {
  background-color: #0e6dbf;
  background-image: url("/src/static/container/checked.svg");
}

#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:before {
  border-radius: 3px;
  -webkit-transition: border 0.1s ease-in-out;
  transition: border 0.1s ease-in-out;
}

#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:hover:before {
  border-color: #094478;
}

#WRAPPER > #CONTAINER > section input[type="submit"],
#WRAPPER > #CONTAINER > section input[type="button"] {
  padding: .2em .5em;
  margin: .5em 0;
  border-radius: 3px;
  border: 1px solid #515151;
  color: #515151;
  background-color: #fff;
  -webkit-transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
  transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
  /* (1) Animation de @hover */
  /* (2) Bouton primaire */
}

#WRAPPER > #CONTAINER > section input[type="submit"]:hover, #WRAPPER > #CONTAINER > section input[type="submit"].hover,
#WRAPPER > #CONTAINER > section input[type="button"]:hover,
#WRAPPER > #CONTAINER > section input[type="button"].hover {
  background-color: #515151;
  color: #fff;
}

#WRAPPER > #CONTAINER > section input[type="submit"].primary,
#WRAPPER > #CONTAINER > section input[type="button"].primary {
  border-color: #0e6dbf;
  color: #0e6dbf;
  background-color: #fff;
  /* (3) Animation de @hover pour bouton primaire */
}

#WRAPPER > #CONTAINER > section input[type="submit"].primary:hover, #WRAPPER > #CONTAINER > section input[type="submit"].primary.hover,
#WRAPPER > #CONTAINER > section input[type="button"].primary:hover,
#WRAPPER > #CONTAINER > section input[type="button"].primary.hover {
  background-color: #0e6dbf;
  color: #fff;
}

#WRAPPER > #CONTAINER > section input[type='text'],
#WRAPPER > #CONTAINER > section input[type='number'],
#WRAPPER > #CONTAINER > section input[type='date'],
#WRAPPER > #CONTAINER > section input[type='time'] {
  display: inline-block;
  padding: .2em .5em;
  margin: .5em 0;
  border-radius: 3px;
  border: 1px solid #777;
}

#WRAPPER > #CONTAINER > section img {
  margin: 1em;
  height: 3em;
}

#WRAPPER > #CONTAINER > section .flag {
  margin: 0 .8em;
  padding: .2em .5em;
  border-radius: 5px;
  border: 1px solid #b5b5b5;
  color: #0e6cbe;
  font-family: 'Inconsolata';
}

#WRAPPER > #CONTAINER > section .flat-border {
  border-radius: 0;
}

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9jb250YWluZXIuc2NzcyIsCgkJIi4uL2NvbnN0YW50cy5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnY29uc3RhbnRzLnNjc3MnO1xuXG4jV1JBUFBFUiA+ICNDT05UQUlORVJ7XG5cblx0LyogWzFdIFNlY3Rpb24gKGNvbnRlbnUpXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdCYgPiBzZWN0aW9ue1xuXHRcdGRpc3BsYXk6IG5vbmU7XG5cblx0XHRtYXJnaW46IDNlbTtcblxuXHRcdC8vIEdlc3Rpb24gZGUgbCdhY3RpdmF0aW9uIGRlcyBzb3VzLXBhcnRpZXNcblx0XHQmLmFjdGl2ZXsgZGlzcGxheTogYmxvY2s7IH1cblxuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRmbGV4LWdyb3c6IDE7XG5cblx0XHRwYWRkaW5nOiAxZW07XG5cblx0XHRib3JkZXItcmFkaXVzOiAzcHg7XG5cblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG5cdFx0Y29sb3I6ICMwMDA7XG5cdFx0Zm9udC1zaXplOiAxZW07XG5cblx0XHRib3JkZXI6IDFweCBzb2xpZCAjZGRkO1xuXG5cblxuXHRcdC8qIFsyXSBUaXRyZXNcblx0XHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuXHRcdCYgaDZ7XG5cdFx0XHRjb2xvcjogbGlnaHRlbigkdGhlbWUtZmcsIDIwKTtcblx0XHRcdGZvbnQtc2l6ZTogMS4yZW07XG5cdFx0XHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRcdFx0Zm9udC13ZWlnaHQ6IDMwMDtcblx0XHRcdGxldHRlci1zcGFjaW5nOiAuMmVtO1xuXG5cdFx0XHRtYXJnaW46IDA7XG5cdFx0XHRwYWRkaW5nOiAwO1xuXG5cdFx0XHQmOmJlZm9yZXtjb250ZW50OictICc7fVxuXHRcdFx0JjphZnRlcntjb250ZW50OicgLSc7fVxuXG5cdFx0XHQvLyBxdWFuZCBjZW50csOpXG5cdFx0XHQmLmNlbnRlcntcblx0XHRcdFx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHRcdFx0fVxuXHRcdH1cblxuXG5cblxuXG5cdFx0LyogWzNdWzRdIEJvdXRvbnMgcmFkaW8gKyBDaGVja2JveGVzXG5cdFx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0XHQmIGlucHV0W3R5cGU9XCJyYWRpb1wiXSxcblx0XHQmIGlucHV0W3R5cGU9XCJjaGVja2JveFwiXXtcblx0XHRcdGRpc3BsYXk6IG5vbmU7XG5cdFx0fVxuXG5cdFx0Ly8gTGFiZWxcblx0XHQmIGlucHV0W3R5cGU9XCJyYWRpb1wiXSArIGxhYmVsW2Zvcl0sXG5cdFx0JiBpbnB1dFt0eXBlPVwiY2hlY2tib3hcIl0gKyBsYWJlbFtmb3Jde1xuXHRcdFx0cGFkZGluZy1sZWZ0OiAuOGVtO1xuXG5cdFx0XHQvLyBQYXMgZGUgc2VsZWN0aW9uXG5cdFx0XHQtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7IC8qIGlPUyBTYWZhcmkgICAgICAgICAgKi9cblx0XHRcdC13ZWJraXQtdXNlci1zZWxlY3Q6ICAgbm9uZTsgLyogQ2hyb21lL1NhZmFyaS9PcGVyYSAqL1xuXHRcdFx0LWtodG1sLXVzZXItc2VsZWN0OiAgICBub25lOyAvKiBLb25xdWVyb3IgICAgICAgICAgICovXG5cdFx0XHQtbW96LXVzZXItc2VsZWN0OiAgICAgIG5vbmU7IC8qIEZpcmVmb3ggICAgICAgICAgICAgKi9cblx0XHRcdC1tcy11c2VyLXNlbGVjdDogICAgICAgbm9uZTsgLyogSUUvRWRnZSAgICAgICAgICAgICAqL1xuXHRcdFx0dXNlci1zZWxlY3Q6ICAgICAgICAgICBub25lOyAvKiBub24tcHJlZml4ZWQgICAgICAgICovXG5cblx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblxuXHRcdFx0Ly8gUmVjZXB0YWNsZVxuXHRcdFx0JjpiZWZvcmV7XG5cdFx0XHRcdGNvbnRlbnQ6ICcnO1xuXHRcdFx0XHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0XHR0b3A6IC4xZW07XG5cdFx0XHRcdFx0bGVmdDogLS44ZW07XG5cdFx0XHRcdFx0d2lkdGg6IGNhbGMoIDFlbSAtIDIqLjE1ZW0gKTtcblx0XHRcdFx0XHRoZWlnaHQ6IGNhbGMoIDFlbSAtIDIqLjE1ZW0gKTtcblxuXHRcdFx0XHRib3JkZXItcmFkaXVzOiA1MCUgLyA1MCU7XG5cdFx0XHRcdGJvcmRlcjogLjE1ZW0gc29saWQgJHRoZW1lLWZnLXByaW1hcnk7XG5cblx0XHRcdFx0YmFja2dyb3VuZDogI2ZmZiBjZW50ZXIgY2VudGVyIG5vLXJlcGVhdDtcblx0XHRcdFx0YmFja2dyb3VuZC1pbWFnZTogbm9uZTtcblx0XHRcdFx0YmFja2dyb3VuZC1zaXplOiA3MCUgYXV0bztcblxuXHRcdFx0XHRAaW5jbHVkZSB0cmFuc2l0aW9uKCBiYWNrZ3JvdW5kIC4ycyBlYXNlLWluLW91dCApO1xuXG5cdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdH1cblxuXHRcdFx0Ly8gQW5pbWF0aW9uIGRlIGhvdmVyIHBvdXIgbGUgdGV4dGVcblx0XHRcdCY6aG92ZXIsXG5cdFx0XHQuaG92ZXJ7XG5cdFx0XHRcdHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdC8vIFF1YW5kIGFjdGlmXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl06Y2hlY2tlZCArIGxhYmVsW2Zvcl06YmVmb3JlLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdOmNoZWNrZWQgKyBsYWJlbFtmb3JdOmJlZm9yZXtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR0aGVtZS1mZy1wcmltYXJ5O1xuXHRcdFx0YmFja2dyb3VuZC1pbWFnZTogdXJsKCcvc3JjL3N0YXRpYy9jb250YWluZXIvY2hlY2tlZC5zdmcnKTtcblx0XHR9XG5cblxuXHRcdC8vIFNwZWNpZmlxdWUgYSBjaGVja2JveFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdICsgbGFiZWxbZm9yXTpiZWZvcmV7XG5cdFx0XHRib3JkZXItcmFkaXVzOiAzcHg7XG5cdFx0XHRAaW5jbHVkZSB0cmFuc2l0aW9uKCBib3JkZXIgLjFzIGVhc2UtaW4tb3V0ICk7XG5cdFx0fVxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdICsgbGFiZWxbZm9yXTpob3ZlcjpiZWZvcmV7XG5cdFx0XHRib3JkZXItY29sb3I6IGRhcmtlbigkdGhlb