CSS et JS pour input secu + corrections mineures
This commit is contained in:
xdrm-brackets
parent
8d618fef8a
commit
c197cebc86
|
|
@ -14,7 +14,10 @@ if(!Authentification::checkUser(0)){
|
|||
<meta name='description' value='Site de test'/>
|
||||
<meta name='author' value='{xdrm} & SeekDaSky'/>
|
||||
|
||||
<link rel='stylesheet' href='css/animations.css'/>
|
||||
<link rel='stylesheet' href='css/global.css'/>
|
||||
|
||||
<script type='text/javascript' src='js/adjust.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -23,9 +26,9 @@ if(!Authentification::checkUser(0)){
|
|||
|
||||
<!-- MENU DE LA PAGE -->
|
||||
<nav id='MENU'>
|
||||
<div id='ICON'></div>
|
||||
<a id='dashboard'>Tableau de bord</a>
|
||||
<a id='consultations'>Nouvelle consultation</a>
|
||||
<a href='Dashboard.php' id='ICON'></a>
|
||||
<a href='Dashboard.php' id='dashboard' class='active'>Tableau de bord</a>
|
||||
<a href='Consultations.php' id='consultations'>Consultations</a>
|
||||
<a>Médecins</a>
|
||||
</nav>
|
||||
|
||||
|
|
@ -35,21 +38,7 @@ if(!Authentification::checkUser(0)){
|
|||
<section id='CONTAINER'>
|
||||
|
||||
<!-- FIL D'ARIANE -->
|
||||
<div id='BREADCRUMB'><a href='Dashboard.php'>Accueil</a> <a href='Test1.php'>Test1</a> <a href='test2.php'>test2</a> </div>
|
||||
|
||||
|
||||
<article data-title="Saisir un rendez-vous">
|
||||
<div>
|
||||
<select id='newRDVPatient'>
|
||||
<?php $patients = json_decode( file_get_contents('Docs/PatientExemple.json') );
|
||||
foreach($patients as $PATIENT)
|
||||
echo "<option value='".$PATIENT->Id."'>".$PATIENT->Nom." ".$PATIENT->Prenom."</option>";
|
||||
?>
|
||||
</select>
|
||||
</div><div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<div id='BREADCRUMB'><a href='Dashboard.php'>Accueil</a></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -66,18 +66,6 @@ body{
|
|||
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 */
|
||||
|
|
@ -98,7 +86,7 @@ body{
|
|||
}
|
||||
|
||||
/* :hover / .active */
|
||||
#WRAPPER > #MENU > a:hover,
|
||||
#WRAPPER > #MENU > a:hover:not(#ICON),
|
||||
#WRAPPER > #MENU > a.active{
|
||||
background-color: #efefef !important;
|
||||
color: #818181;
|
||||
|
|
@ -116,8 +104,13 @@ body{
|
|||
background-size: auto 1.5em;
|
||||
}
|
||||
|
||||
#WRAPPER > #MENU > a#doctor{
|
||||
background: url(../src/doctor.svg) left 1em center no-repeat;
|
||||
#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;
|
||||
}
|
||||
|
||||
|
|
@ -129,6 +122,43 @@ body{
|
|||
|
||||
|
||||
|
||||
|
||||
/* 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 */
|
||||
/*************/
|
||||
|
|
@ -193,8 +223,9 @@ body{
|
|||
/* position */
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 2*2em );
|
||||
width: calc( 100% - 2*2em - 2*1px );
|
||||
margin: 2em;
|
||||
margin-bottom: 4em; /* pour séparer les <articles> */
|
||||
|
||||
/* border */
|
||||
border: 1px solid #f09108;
|
||||
|
|
@ -238,7 +269,6 @@ body{
|
|||
/* background */
|
||||
background: #f6f4f2 url(../src/down-arrow.svg) right .5em center no-repeat;
|
||||
background-size: 1em auto;
|
||||
|
||||
|
||||
/* <select> */
|
||||
appearance: none;
|
||||
|
|
@ -250,7 +280,10 @@ body{
|
|||
|
||||
/* <SELECT> <OPTION> */
|
||||
#CONTAINER > article select > option{
|
||||
/* position */
|
||||
padding: .5em;
|
||||
|
||||
/* background */
|
||||
background: #fff;
|
||||
|
||||
appearance: none;
|
||||
|
|
@ -258,4 +291,29 @@ body{
|
|||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-o-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
/* <INPUT> */
|
||||
#CONTAINER > article input{
|
||||
/* position */
|
||||
display: inline-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;
|
||||
}
|
||||
Loading…
Reference in New Issue