projet-php/css/global.css

*{ margin: 0; padding: 0; }

a{
	/* remove-a default properties */
	text-decoration: none;
	color: inherit;
}



body{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	/* background */
	background-color: #e8e8e8;

	/* foreground */
	font-size: 14px;
	font-family: 'Open Sans', 'sans serif';
	color: #000;
}



/* BOX (POPUP) DE NOTIFICATION DE LA PAGE */
#NOTIFBAR{
	/* position */
	display: block;
	position: fixed;
		/*top: calc( 50% - 20em/2 );*/ top: calc( -100% );
		left: calc( 50% - 30em/2 );
		width: 30em;
		height: 20em;

	/* border */
	border-radius: 5px;
	box-shadow: 0 0 30px #aaa;
	
	/* foreground */
	font-size: 1em;
	color: #333;
	text-align: center;

	/* animation */
	transition: top .5s ease-in-out;
	-moz-transition: top .5s ease-in-out;
	-webkit-transition: top .5s ease-in-out;
	-ms-transition: top .5s ease-in-out;
	-o-transition: top .5s ease-in-out;

	/* z axis */
	z-index: 100;
	
	/* extra */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#NOTIFBAR.active{
	top: calc( 50% - 20em/2 );
}

#NOTIFBAR > div:nth-child(1){
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 55%;

	/* border */
	border-radius: 5px 5px 0 0 ;

	/* background */
	background: #e2747d url(../src/svg/notifications/error.svg) center center no-repeat;
	background-size: 4em auto;
}


#NOTIFBAR.error > div:nth-child(1){
	background-color: #e2747d;
	background-image: url(../src/svg/notifications/error.svg);
}

#NOTIFBAR.success > div:nth-child(1){
	background-color: #4ccd82;
	background-image: url(../src/svg/notifications/success.svg);
}
#NOTIFBAR.info > div:nth-child(1){
	background-color: #e0a325;
	background-image: url(../src/svg/notifications/info.svg);
}

#NOTIFBAR > div:nth-child(2){
	/* position */
	display: block;
	position: absolute;
		top: 55%;
		left: 0;
		width: 100%;
		height: 45%;

	/* border */
	border-radius: 0 0 5px 5px;

	/* background */
	background-color: #fff;
}

#NOTIFBAR h3{ margin-top: 1em; }

#NOTIFBAR input[type=button]{
	/* position */
	display: inline-block;
	position: relative;
		margin-top: 1em;
		padding: .7em 2.5em;
		padding-left: 3em;

	/* border */
	border-radius: 5em;
	border: 0;
	
	/* background */
	background: #e2747d url(../src/svg/notifications/close.svg) left 1.5em center no-repeat;
	background-size: auto 1em;

	/* foreground */
	color: #fff;
	font-size: .9em;
	letter-spacing: .1em;

	/* extra */
	cursor: pointer;

	/* animation */
	transition: transform .2s ease-in-out;
	-moz-transition: transform .2s ease-in-out;
	-webkit-transition: transform .2s ease-in-out;
	-ms-transition: transform .2s ease-in-out;
	-o-transition: transform .2s ease-in-out;
}

#NOTIFBAR.error input[type=button]{
	background-color: #e2747d;
}
#NOTIFBAR.success input[type=button]{
	background-color: #4ccd82;
}
#NOTIFBAR.info input[type=button]{
	background-color: #e0a325;
}


#NOTIFBAR input[type=button]:hover{
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}







/* WRAPPER DE LA PAGE */
#WRAPPER{
	/* position */
	display: block;
	position: absolute;
		top: 1em;
		left: calc( 50% - 512px - 1em );
		width: 1024px;
		min-height: 50%;
	margin: 2em;

	/* border */
	border: 1px solid #e2e2e2;
	box-shadow: 0 0 5px #e2e2e2;

	/* background */
	background-color: #fff;
}


/* MENU DE LA PAGE */
#WRAPPER > #MENU{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 225px;
		height: 100%;

	/* border */
	border-right: 1px solid #e2e2e2; 
	border-bottom: 1px solid #e2e2e2;

	/* background */
	background-color: #fafafa;
}


/* LOGO DANS LE MENU */
#WRAPPER > #MENU #ICON{
	/* position */
	display: block;
	position: relative;
		width: 100%;
		height: 100px;
	padding: 0;
	margin: 0;

	/* background */
	background: transparent url(../src/svg/icon.svg) center center no-repeat;
	background-size: auto 50%;

	/* animation */
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;

	/* z axis */
	z-index: 100;
}


#WRAPPER > #MENU > #ICON:hover{
	animation: shake .5s infinite alternate;
	-moz-animation: shake .5s infinite alternate;
	-webkit-animation: shake .5s infinite alternate;
	-ms-animation: shake .5s infinite alternate;
	-o-animation: shake .5s infinite alternate;
}


/* LE CONTENEUR DES LIENS DU MENU */
#WRAPPER > #MENU > div{
	/* position */
	display: flex;
	position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: calc( 100% - 100px );
	
	/* flex properties */
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	/* background */
	background: #fff;

	/* scroll */
	overflow: hidden;
}

#WRAPPER{ height:500%; }


/* LES LIENS DU MENU */
#WRAPPER > #MENU > div > a{
	/* position */
	display: inline-block;
	position: relative;
		width: calc( 225px/1.6  - 2*1em );
		height: calc( 225px/1.6 - 1em );
	padding: 0 1em;
	margin: 1em;

	/* border */
	border-radius: 5px;
	box-shadow: 0;
	border: 1px solid #eee;

	/* background */
	background-color: #004d8c;

	/* foreground */
	color: #4a4a4a;
	text-align: center;
	letter-spacing: .1em;

	/* extra */
	cursor: pointer;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

/* @hover / .active */
#WRAPPER > #MENU > div > a:hover,
#WRAPPER > #MENU > div > a.active{
	color: #000;
}

/* @hover */
#WRAPPER > #MENU > div > a:hover{
	box-shadow: 0 0 20px #eee;

	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}

/* icones associées aux liens */
#WRAPPER > #MENU > div > a#consultations{
	background: url(../src/svg/consultation.svg) center bottom 1em no-repeat;
	background-size: 50% auto;
}

#WRAPPER > #MENU > div > a#medecin{
	background: url(../src/svg/medecin.svg) center bottom 1em no-repeat;
	background-size: 50% auto;
}

#WRAPPER > #MENU > div > a#patient{
	background: url(../src/svg/patient.svg) center bottom 1em no-repeat;
	background-size: 50% auto;
}

#WRAPPER > #MENU > div > a#dashboard{
	background: url(../src/svg/dashboard.svg) center bottom 1em no-repeat;
	background-size: 50% auto;
}









/*************/
/* CONTAINER */
/*************/
#WRAPPER > #CONTAINER{
	/* position */
	display: block;
	position: relative;
		top: 0;
		left: 225px;
		width: calc( 100% - 225px );
		min-height: 100%;
}


/* FIL D'ARIANE */
#WRAPPER > #CONTAINER > #BREADCRUMB{
	/* position */
	display: inline-block;
	position: relative;
	width: calc( 100% - 2*2em - 2*.6em );
	margin: 2em;
	padding: .6em;

	/* background */
	background-color: #eee;

	/* foreground */
	color: #333;
}

#WRAPPER > #CONTAINER > #BREADCRUMB a:hover{
	text-decoration: underline;
}

/* chevrons */
#WRAPPER > #CONTAINER > #BREADCRUMB a:before{
	content: '';
	/* position */
	display: inline-block;
	position: relative;
		width: 1em;
		height: .7em;

	background: url(../src/svg/right-arrow.svg) center center no-repeat;
	background-size: 40% auto;
}

/* premier: maison au lien de chevron */
#WRAPPER > #CONTAINER > #BREADCRUMB a:first-child:before{
	margin-right: 1em;
	height: 1em;
	background-image: url(../src/svg/home.svg);
	background-size: auto 100%;
}

#CONTAINER > span{
	margin: 1.8em;

	color: #f00;
	font-size: 1.1em;
	font-weight: bold;
}

/******************************/
/* ARTICLES (cadres internes) */
/******************************/
#CONTAINER > article[data-title]{
	/* position */
	display: block;
	position: relative;
		width: calc( 100% - 2*2em - 2*1px - 2*1em );
	margin: 2em;
	margin-bottom: 4em; /* pour séparer les <articles> */
	padding: 1em;

	/* border */
	border: 1px solid #f09108;

}

#CONTAINER > article[data-title]:before{
	content: attr(data-title);
	/* position */
	display: block;
	position: relative;
		margin-top: -2.5em;
		margin-left: calc( -1px - 1em );
		width: calc( 100% - .5em );
	padding: .5em;
	padding-left: 2em;
	
	/* border */
	border: 1px solid #f09108;

	/* background */
	background: #f09108 url(../src/svg/title-gears.svg) left .5em center no-repeat;
	background-size: 1em auto;

	/* foreground */
	color: #fff;
}


/* <SELECT> */
#CONTAINER > article select{
	/* position */
	display: inline-block;
	position: relative;
	margin: 1em;
	padding: .3em;
	padding-right: 2em;

	/* border */
	border: 1px solid #e5e5e5;
	
	/* background */
	background: #f6f4f2 url(../src/svg/down-arrow.svg) right .5em center no-repeat;
	background-size: 1em auto;

	/* <select> */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

/* <SELECT> <OPTION> */
#CONTAINER > article select > option{
	/* position */
	padding: .5em;

	/* background */
	background: #fff;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
}

/* <SELECT>.associated */
#CONTAINER > article select.associated{
	border-color: #f09108;
}


/* <SPAN> */
#CONTAINER > article > form > span{
	margin-left: 1em;
}

#CONTAINER > article select:not(.associated) ~ span.associated{
	display: none; /* on cache le texte associé quand c'est pas le médecin associé */
}



/* <INPUT> */
#CONTAINER > article input{
	/* position */
	display: inline-block;
	position: relative;
	margin: 1em;
	padding: .7em;
	padding-right: 3em;

	/* border */
	border: 1px solid #e5e5e5;

	/* background */
	background: url(../src/svg/validated.svg) no-repeat;
	background-position: center right 1.5em;
	background-size: 0em auto;
	
	/* animation */
	transition:         border .2s, background-size .2s;
	-moz-transition:    border .2s, background-size .2s;
	-webkit-transition: border .2s, background-size .2s;
	-ms-transition:     border .2s, background-size .2s;
	-o-transition:      border .2s, background-size .2s;
}

/* input[type=text] padding-right */
#CONTAINER > article input[type=text]{
}

/* @focus */
#CONTAINER > article input:focus{
	border-color: #999;
}

/* .validated */
#CONTAINER > article input.validated{
	border-color: #1cc952;
	background-position: center right 1em;
	background-size: 1em auto;

}

/* .invalid */
#CONTAINER > article input.invalid{
	border-color: #ec111c;
	background-image: url(../src/svg/invalid.svg);
	background-position: center right 1em;
	background-size: 1em auto;
}

/* <span.invalid> après <input.invalid> */
#CONTAINER > article input.invalid + span.invalid{
	color: #ec111c;
}

/* <span.invalid> après <input> */
#CONTAINER > article input:not(.invalid) + span.invalid{
	display: none;
	color: #ec111c;
}


/* CLASSES STANDARD */
.info{
	/* position */
	display: inline-block;
	position: relative;
		padding: .5em;


	/* border */
	border-radius: 3px;
	border: 1px solid transparent;

	color: #fff;

	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

#CONTAINER > article input:hover + .info,
#CONTAINER > article input:focus + .info{
	color: #afafaf;
	border-color: #afafaf;
}


/* <INPUT> [type=submit] */
#CONTAINER > article input[type=submit]{
	/* position */
	padding-left: 3em;

	/* background */
	background: white url(../src/svg/save.svg) center left 1em no-repeat;
	background-size: 1em auto;

	/* foreground */
	color: #888;

	/* extra */
	cursor: pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

/* @hover */
#CONTAINER > article input[type=submit]:hover{
	color: #000;
	background-position: center left .75em;
	background-size: 1.5em auto;
}

/* @active */
#CONTAINER > article input[type=submit]:active{
	/* animation */
	transform: scale(.95);
	-moz-transform: scale(.95);
	-webkit-transform: scale(.95);
	-ms-transform: scale(.95);
	-o-transform: scale(.95);
}


/* CHECKBOX HACK */
input[type=radio]{ display: none !important; }

input[type=radio] + label{
	display: inline-block;
	margin-top: .5em;
	margin-left: 1em;
}

/* label */
input[type=radio] + label:before{
	content: '';
	/* position */
	display: inline-block;
	position: relative;
	margin-right: .5em;
	margin-bottom: -.3em;
		width: 1.2em;
		height: 1.2em;

	/* border */
	border-radius: 50% / 50%;
	border: 1px solid #f18624;

	/* background */
	background: url(../src/svg/radio.svg) center center no-repeat;
	background-size: 0% auto;

	/* animation */
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;

	
	transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);

	/* extra */
	cursor: pointer;
}

/* @active + label */
input[type=radio]:active + label:before{
	transform: rotate(360deg) scale(.9);
	-moz-transform: rotate(360deg) scale(.9);
	-webkit-transform: rotate(360deg) scale(.9);
	-ms-transform: rotate(360deg) scale(.9);
	-o-transform: rotate(360deg) scale(.9);
}


/* @checked + label */
input[type=radio]:checked + label:before{
	/* background */
	background-size: 50% auto;

	/* animation */
	transform: rotate(360deg) scale(1.2);
	-moz-transform: rotate(360deg) scale(1.2);
	-webkit-transform: rotate(360deg) scale(1.2);
	-ms-transform: rotate(360deg) scale(1.2);
	-o-transform: rotate(360deg) scale(1.2);

}







/* TABLEAU DE RESULTAT DE RECHERCHE */
#CONTAINER > article table{
	/* position */
	width: 100%;

	/* border */
	border-spacing: 0;

}

#CONTAINER > article table > tbody,
#CONTAINER > article table > tbody > tr{
	/* position */
	width: 100%;
}

#CONTAINER > article table td{
	/* position */
	max-width: calc( 100% / 6% );

	/* border */
	border-bottom: 1px solid #cacaca;
}

#CONTAINER > article table#searchResultMedecin td{
	/* position */
	max-width: calc( 100% / 5% );

	/* border */
	border-bottom: 1px solid #cacaca;
}


/* Suppression champ de recherche (patient/médecin/consultation) */
#CONTAINER > article .delPatient input[type=submit],
#CONTAINER > article .delMedecin input[type=submit]{
	/* position */
	padding: .5em 1em;

	/* border */
	border: 0;

	/* background */
	background-image: url(../src/svg/invalid.svg);
	background-position: center center;
}

/* Modification champ de recherche (patient/médecin/consultation) */

#CONTAINER > article .updPatient input[type=text],
#CONTAINER > article .updMedecin input[type=text]{
	width: 6em;
	padding: .1em;
	margin: 0 .2em;

	border: 0;
}



#CONTAINER > article .updPatient input[type=submit],
#CONTAINER > article .updMedecin input[type=submit]{
	/* position */
	padding: .5em 1em;

	/* border */
	border: 0;

	/* background */
	background-image: url(../src/svg/edit.svg);
	background-position: center center;
}


/* CALENDRIER */
#calendar{
	width: 100%;
	padding: 10%;
	height: auto;
}

/* cases */
#calendar rect[class^="day_"]{
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;

	cursor: pointer;
}

#calendar rect[class^="day_"]:hover{
	fill: #f09108 !important;
}

#calendar rect[class^="day_"]:hover + [class^="Textday_"]{
	fill: #fff !important;
	cursor: pointer;
	pointer-events: none;
}


/* Liste des rendez-vous */
.RDV{
	/* position */
	display: inline-block;
	position: relative;
	width: calc( 100% - 2*1em - 10em );
	margin-bottom: .5em;
	padding: 2em 1em;

	/* border */
	border-radius: 3px;
	border: 1px solid #c7c7c7;

	/* background */
	background: transparent;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;

	/* extra */
	cursor: pointer;
}

.RDV:hover{
	border-color: #898989;
}


/* les champs */
.RDV > form:nth-child(1) > input{
	/* position */
	display: inline-block !important;
	position: absolute !important;
	margin: 0 !important;
	padding: 0 !important;
	padding-right: 2em !important;
	
	/* border */
	border: 0 !important;

	/* foreground */
	color: #6a6a6a;

	/* event */
	/*pointer-events: none;*/
}

.RDV:hover > span{
	/* foreground */
	color: #000;
}

/* JOUR */
.RDV > form:nth-child(1) > input.jour{
	top: 1em;
}

/* HEURE */
.RDV > form:nth-child(1) > input.heure{
	top: 3em;
}

/* DUREE */
.RDV > form:nth-child(1) > input.duree{
	position: relative !important;
	margin-left: 10em !important;
}

/* PATIENT */
.RDV > form:nth-child(1) > input.Patient{
	margin-left: -10em !important;
	top: 1em;
}
/* MEDECIN */
.RDV > form:nth-child(1) > input.Medecin{
	margin-left: -10em !important;
	top: 3em;
}

/* SUPPRESSION */
.RDV > form:nth-child(2){
	display: inline-block;
	position: absolute;
		top: calc( 100% - .5em - 1.5em );
		left: calc( 100% - 2em );
		width: 2em;
		height: 2em;
}

/* BOUTON SUPPRESSION */
.RDV > form > input[type=submit]{
	/* position */
	display: inline-block;
	position: absolute;
	left: calc( 100% - 4em );
	top: -2em;

	padding: .5em 1em !important;

	/* border */
	border: 0 !important;

	/* background */
	background-color: transparent !important;
	background-image: url(../src/svg/invalid.svg) !important;
	background-position: center center !important;
}


/* BOUTON MODIFICATION */
.RDV > form:nth-child(1) > input[type=submit]{
	left: calc( 100% - 3em );
	top: .5em;
	background-image: url(../src/svg/edit.svg) !important;
}

/* Conteneur des barres de stats du Dashboard */
.StatContainer{
	float: left;
	margin-top: 20px;
	height: 240px;
	width:50%;
}

/* classe pour clear après des floats */
.clear{
	clear: both;
}

.bar{
	float: left;
	width: 15%;
	margin-right: 10%;
}

.man{
	background-color: #F09108;
}

.woman{
	background-color: #E04F5F;
}

.labels{
	width: 100%;
	height: 30px;
}

.label{
	display: block;
	float: left;
	width: 15%;
	margin-right: 10%;
	text-align: center;
	text-decoration: underline;
}

.value{
	text-decoration: none;
	font-size: 1.4em;
}

.title{
	display: block;
	width: 100%;
	margin: 0px;
	text-align: center;
	font-size: 1.8em;
}