projet-php/css/global.css

249 lines
4.2 KiB
CSS
Executable File

*{ 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 */
position: relative;
width: 100%;
height: 100px;
/* background */
background-color: red;
}
/* 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,
#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#doctor{
background: url(../src/doctor.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;
}
/*************/
/* 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 );
margin: 2em;
/* 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;
}