*{ 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; } /* */ appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; }