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


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



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

	/* 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: scale(.8);
	-moz-transform: scale(.8);
	-webkit-transform: scale(.8);
	-ms-transform: scale(.8);
	-o-transform: scale(.8);

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


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

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

}