NxTIC/css/container/nested.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
=========================================================*/
#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.charts {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around; }
    #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        */ }
      #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 #399ced;
        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"]:checked + label[for]:before,
    #WRAPPER > #CONTAINER > section input[type="checkbox"]:checked + label[for]:before {
      background-color: #399ced;
      background-image: url("/f/svg/checked/st/container"); }
    #WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:before {
      border-radius: 3px; }
    #WRAPPER > #CONTAINER > section input[type="submit"],
    #WRAPPER > #CONTAINER > section input[type="button"] {
      margin: .5em 0;
      padding: .3em .5em;
      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="button"]:hover {
        background-color: #515151;
        color: #fff; }
      #WRAPPER > #CONTAINER > section input[type="submit"].primary,
      #WRAPPER > #CONTAINER > section input[type="button"].primary {
        border-color: #399ced;
        color: #399ced;
        background-color: #fff;
        /* (3) Animation de @hover pour bouton primaire */ }
        #WRAPPER > #CONTAINER > section input[type="submit"].primary:hover,
        #WRAPPER > #CONTAINER > section input[type="button"].primary:hover {
          background-color: #399ced;
          color: #fff; }
    #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: #555;
      font-family: 'Inconsolata'; }

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibmVzdGVkLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vY29udGFpbmVyLnNjc3MiLAoJCSIuLi9jb25zdGFudHMuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJIkBpbXBvcnQgJ2NvbnN0YW50cy5zY3NzJztcblxuI1dSQVBQRVIgPiAjQ09OVEFJTkVSe1xuXG5cdC8qIFsxXSBTZWN0aW9uIChjb250ZW51KVxuXHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuXHQmID4gc2VjdGlvbntcblx0XHRkaXNwbGF5OiBub25lO1xuXG5cdFx0bWFyZ2luOiAzZW07XG5cblx0XHQvLyBHZXN0aW9uIGRlIGwnYWN0aXZhdGlvbiBkZXMgc291cy1wYXJ0aWVzXG5cdFx0Ji5hY3RpdmV7IGRpc3BsYXk6IGJsb2NrOyB9XG5cblx0XHQvLyBHZXN0aW9uIGQndW5lIHNlY3Rpb24gY29udGVuYW50IGRlcyBncmFwaGlxdWVzXG5cdFx0Ji5jaGFydHN7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXG5cdFx0XHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRcdFx0ZmxleC13cmFwOiB3cmFwO1xuXHRcdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG5cdFx0fVxuXG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdGZsZXgtZ3JvdzogMTtcblxuXHRcdHBhZGRpbmc6IDFlbTtcblxuXHRcdGJvcmRlci1yYWRpdXM6IDNweDtcblxuXHRcdGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG5cblx0XHRjb2xvcjogIzAwMDtcblx0XHRmb250LXNpemU6IDFlbTtcblxuXHRcdGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XG5cblxuXG5cdFx0LyogWzJdIFRpdHJlc1xuXHRcdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdFx0JiBoNntcblx0XHRcdGNvbG9yOiBsaWdodGVuKCR0aGVtZS1mZywgMjApO1xuXHRcdFx0Zm9udC1zaXplOiAxLjJlbTtcblx0XHRcdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdFx0XHRmb250LXdlaWdodDogMzAwO1xuXHRcdFx0bGV0dGVyLXNwYWNpbmc6IC4yZW07XG5cblx0XHRcdG1hcmdpbjogMDtcblx0XHRcdHBhZGRpbmc6IDA7XG5cblx0XHRcdCY6YmVmb3Jle2NvbnRlbnQ6Jy0gJzt9XG5cdFx0XHQmOmFmdGVye2NvbnRlbnQ6JyAtJzt9XG5cblx0XHRcdC8vIHF1YW5kIGNlbnRyw6lcblx0XHRcdCYuY2VudGVye1xuXHRcdFx0XHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cdFx0XHR9XG5cdFx0fVxuXG5cblxuXG5cblx0XHQvKiBbM11bNF0gQm91dG9ucyByYWRpbyArIENoZWNrYm94ZXNcblx0XHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuXHRcdCYgaW5wdXRbdHlwZT1cInJhZGlvXCJdLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJde1xuXHRcdFx0ZGlzcGxheTogbm9uZTtcblx0XHR9XG5cblx0XHQvLyBMYWJlbFxuXHRcdCYgaW5wdXRbdHlwZT1cInJhZGlvXCJdICsgbGFiZWxbZm9yXSxcblx0XHQmIGlucHV0W3R5cGU9XCJjaGVja2JveFwiXSArIGxhYmVsW2Zvcl17XG5cdFx0XHRwYWRkaW5nLWxlZnQ6IC44ZW07XG5cblx0XHRcdC8vIFBhcyBkZSBzZWxlY3Rpb25cblx0XHRcdC13ZWJraXQtdG91Y2gtY2FsbG91dDogbm9uZTsgLyogaU9TIFNhZmFyaSAgICAgICAgICAqL1xuXHRcdFx0LXdlYmtpdC11c2VyLXNlbGVjdDogICBub25lOyAvKiBDaHJvbWUvU2FmYXJpL09wZXJhICovXG5cdFx0XHQta2h0bWwtdXNlci1zZWxlY3Q6ICAgIG5vbmU7IC8qIEtvbnF1ZXJvciAgICAgICAgICAgKi9cblx0XHRcdC1tb3otdXNlci1zZWxlY3Q6ICAgICAgbm9uZTsgLyogRmlyZWZveCAgICAgICAgICAgICAqL1xuXHRcdFx0LW1zLXVzZXItc2VsZWN0OiAgICAgICBub25lOyAvKiBJRS9FZGdlICAgICAgICAgICAgICovXG5cdFx0XHR1c2VyLXNlbGVjdDogICAgICAgICAgIG5vbmU7IC8qIG5vbi1wcmVmaXhlZCAgICAgICAgKi9cblxuXG5cdFx0XHQvLyBSZWNlcHRhY2xlXG5cdFx0XHQmOmJlZm9yZXtcblx0XHRcdFx0Y29udGVudDogJyc7XG5cdFx0XHRcdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHRcdHRvcDogLjFlbTtcblx0XHRcdFx0XHRsZWZ0OiAtLjhlbTtcblx0XHRcdFx0XHR3aWR0aDogY2FsYyggMWVtIC0gMiouMTVlbSApO1xuXHRcdFx0XHRcdGhlaWdodDogY2FsYyggMWVtIC0gMiouMTVlbSApO1xuXG5cdFx0XHRcdGJvcmRlci1yYWRpdXM6IDUwJSAvIDUwJTtcblx0XHRcdFx0Ym9yZGVyOiAuMTVlbSBzb2xpZCAkdGhlbWUtZmctcHJpbWFyeTtcblxuXHRcdFx0XHRiYWNrZ3JvdW5kOiAjZmZmIGNlbnRlciBjZW50ZXIgbm8tcmVwZWF0O1xuXHRcdFx0XHRiYWNrZ3JvdW5kLWltYWdlOiBub25lO1xuXHRcdFx0XHRiYWNrZ3JvdW5kLXNpemU6IDcwJSBhdXRvO1xuXG5cdFx0XHRcdEBpbmNsdWRlIHRyYW5zaXRpb24oIGJhY2tncm91bmQgLjJzIGVhc2UtaW4tb3V0ICk7XG5cblx0XHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdC8vIFF1YW5kIGFjdGlmXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl06Y2hlY2tlZCArIGxhYmVsW2Zvcl06YmVmb3JlLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdOmNoZWNrZWQgKyBsYWJlbFtmb3JdOmJlZm9yZXtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR0aGVtZS1mZy1wcmltYXJ5O1xuXHRcdFx0YmFja2dyb3VuZC1pbWFnZTogdXJsKCcvZi9zdmcvY2hlY2tlZC9zdC9jb250YWluZXInKTtcblx0XHR9XG5cblxuXHRcdC8vIFNwZWNpZmlxdWUgYSBjaGVja2JveFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdICsgbGFiZWxbZm9yXTpiZWZvcmV7XG5cdFx0XHRib3JkZXItcmFkaXVzOiAzcHg7XG5cdFx0fVxuXG5cblxuXG5cblx0XHQvKiBbNV0gQm91dG9ucyBkZSBzdWJtaXRcblx0XHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuX