NxTIC/subDir/public_html/css/expanded/container.css

196 lines
22 KiB
CSS
Raw Normal View History

/* [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;
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("/subDir/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,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiY29udGFpbmVyLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vY29udGFpbmVyLnNjc3MiLAoJCSIuLi9jb25zdGFudHMuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJIkBpbXBvcnQgJ2NvbnN0YW50cy5zY3NzJztcblxuI1dSQVBQRVIgPiAjQ09OVEFJTkVSe1xuXG5cdC8qIFsxXSBTZWN0aW9uIChjb250ZW51KVxuXHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuXHQmID4gc2VjdGlvbntcblx0XHRkaXNwbGF5OiBub25lO1xuXG5cdFx0bWFyZ2luOiAzZW07XG5cblx0XHQvLyBHZXN0aW9uIGRlIGwnYWN0aXZhdGlvbiBkZXMgc291cy1wYXJ0aWVzXG5cdFx0Ji5hY3RpdmV7IGRpc3BsYXk6IGJsb2NrOyB9XG5cblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0ZmxleC1ncm93OiAxO1xuXG5cdFx0cGFkZGluZzogMWVtO1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogM3B4O1xuXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuXHRcdGNvbG9yOiAjMDAwO1xuXHRcdGZvbnQtc2l6ZTogMWVtO1xuXG5cdFx0Ym9yZGVyOiAxcHggc29saWQgI2RkZDtcblxuXG5cblx0XHQvKiBbMl0gVGl0cmVzXG5cdFx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0XHQmIGg2e1xuXHRcdFx0Y29sb3I6IGxpZ2h0ZW4oJHRoZW1lLWZnLCAyMCk7XG5cdFx0XHRmb250LXNpemU6IDEuMmVtO1xuXHRcdFx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0XHRcdGZvbnQtd2VpZ2h0OiAzMDA7XG5cdFx0XHRsZXR0ZXItc3BhY2luZzogLjJlbTtcblxuXHRcdFx0bWFyZ2luOiAwO1xuXHRcdFx0cGFkZGluZzogMDtcblxuXHRcdFx0JjpiZWZvcmV7Y29udGVudDonLSAnO31cblx0XHRcdCY6YWZ0ZXJ7Y29udGVudDonIC0nO31cblxuXHRcdFx0Ly8gcXVhbmQgY2VudHLDqVxuXHRcdFx0Ji5jZW50ZXJ7XG5cdFx0XHRcdHRleHQtYWxpZ246IGNlbnRlcjtcblx0XHRcdH1cblx0XHR9XG5cblxuXG5cblxuXHRcdC8qIFszXVs0XSBCb3V0b25zIHJhZGlvICsgQ2hlY2tib3hlc1xuXHRcdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl0sXG5cdFx0JiBpbnB1dFt0eXBlPVwiY2hlY2tib3hcIl17XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdC8vIExhYmVsXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl0gKyBsYWJlbFtmb3JdLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdICsgbGFiZWxbZm9yXXtcblx0XHRcdHBhZGRpbmctbGVmdDogLjhlbTtcblxuXHRcdFx0Ly8gUGFzIGRlIHNlbGVjdGlvblxuXHRcdFx0LXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lOyAvKiBpT1MgU2FmYXJpICAgICAgICAgICovXG5cdFx0XHQtd2Via2l0LXVzZXItc2VsZWN0OiAgIG5vbmU7IC8qIENocm9tZS9TYWZhcmkvT3BlcmEgKi9cblx0XHRcdC1raHRtbC11c2VyLXNlbGVjdDogICAgbm9uZTsgLyogS29ucXVlcm9yICAgICAgICAgICAqL1xuXHRcdFx0LW1vei11c2VyLXNlbGVjdDogICAgICBub25lOyAvKiBGaXJlZm94ICAgICAgICAgICAgICovXG5cdFx0XHQtbXMtdXNlci1zZWxlY3Q6ICAgICAgIG5vbmU7IC8qIElFL0VkZ2UgICAgICAgICAgICAgKi9cblx0XHRcdHVzZXItc2VsZWN0OiAgICAgICAgICAgbm9uZTsgLyogbm9uLXByZWZpeGVkICAgICAgICAqL1xuXG5cdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cblx0XHRcdC8vIFJlY2VwdGFjbGVcblx0XHRcdCY6YmVmb3Jle1xuXHRcdFx0XHRjb250ZW50OiAnJztcblx0XHRcdFx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRcdFx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0XHRcdFx0bGVmdDogLS44ZW07XG5cdFx0XHRcdFx0d2lkdGg6IGNhbGMoIDFlbSAtIDIqLjE1ZW0gKTtcblx0XHRcdFx0XHRoZWlnaHQ6IGNhbGMoIDFlbSAtIDIqLjE1ZW0gKTtcblxuXHRcdFx0XHRib3JkZXItcmFkaXVzOiA1MCUgLyA1MCU7XG5cdFx0XHRcdGJvcmRlcjogLjE1ZW0gc29saWQgJHRoZW1lLWZnLXByaW1hcnk7XG5cblx0XHRcdFx0YmFja2dyb3VuZDogI2ZmZiBjZW50ZXIgY2VudGVyIG5vLXJlcGVhdDtcblx0XHRcdFx0YmFja2dyb3VuZC1pbWFnZTogbm9uZTtcblx0XHRcdFx0YmFja2dyb3VuZC1zaXplOiA3MCUgYXV0bztcblxuXHRcdFx0XHRAaW5jbHVkZSB0cmFuc2l0aW9uKCBiYWNrZ3JvdW5kIC4ycyBlYXNlLWluLW91dCApO1xuXG5cdFx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHRcdH1cblxuXHRcdFx0Ly8gQW5pbWF0aW9uIGRlIGhvdmVyIHBvdXIgbGUgdGV4dGVcblx0XHRcdCY6aG92ZXIsXG5cdFx0XHQuaG92ZXJ7XG5cdFx0XHRcdHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdC8vIFF1YW5kIGFjdGlmXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl06Y2hlY2tlZCArIGxhYmVsW2Zvcl06YmVmb3JlLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdOmNoZWNrZWQgKyBsYWJlbFtmb3JdOmJlZm9yZXtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR0aGVtZS1mZy1wcmltYXJ5O1xuXHRcdFx0YmFja2dyb3VuZC1pbWFnZTogdXJsKCcvc3ViRGlyL3NyYy9zdGF0aWMvY29udGFpbmVyL2NoZWNrZWQuc3ZnJyk7XG5cdFx0fVxuXG5cblx0XHQvLyBTcGVjaWZpcXVlIGEgY2hlY2tib3hcblx0XHQmIGlucHV0W3R5cGU9XCJjaGVja2JveFwiXSArIGxhYmVsW2Zvcl06YmVmb3Jle1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogM3B4O1xuXHRcdFx0QGluY2x1ZGUgdHJhbnNpdGlvbiggYm9yZGVyIC4xcyBlYXNlLWluLW91dCApO1xuXHRcdH1cblx0XHQmIGlucHV0W3R5cGU9XCJjaGVja2JveFwiXSArIGxhYmVsW2Zvcl06aG92ZXI6YmVmb3Jle1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiBkYXJrZW4oJHRoZW1lLWZnLXByaW1hcnksI