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;
}



/* 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;
}

/* LES LIENS DU MENU */
#WRAPPER > #MENU > a{
	/* position */
	display: inline-block;
	position: relative;
		width: calc( 100% - 3em );
	padding-left: 3em;
	padding-bottom: 1px;

	/* background */
	background-color: transparent;

	/* foreground */
	line-height: 2.5em;

	/* extra */
	cursor: pointer;
}

/* :hover / .active */
#WRAPPER > #MENU > a:hover:not(#ICON),
#WRAPPER > #MENU > a.active{
	background-color: #efefef !important;
	color: #818181;
}


/* @first/@last */
#WRAPPER > #MENU > a:nth-child(2){ margin-top:    1em; }
#WRAPPER > #MENU > a:last-child{   margin-bottom: 1em; }


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

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

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

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





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

	/* background */
	background: transparent url(../src/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;
}




/*************/
/* CONTAINER */
/*************/
#WRAPPER > #CONTAINER{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 225px;
		width: calc( 100% - 225px );
		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/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/home.svg);
	background-size: auto 100%;
}



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

	/* 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: -1px;
		width: calc( 100% - .5em - 2em );
	padding: .5em;
	padding-left: 2em;
	
	/* border */
	border: 1px solid #f09108;

	/* background */
	background: #f09108 url(../src/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/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 span{
	margin-left: 1em;
}


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

#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: block;
	position: relative;
	margin: 1em;
	padding: .7em;

	/* border */
	border: 1px solid #e5e5e5;
	
	/* 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;
}

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