Connection FLAT inputs + css/js issue
This commit is contained in:
xdrm-brackets
parent
82f43cf33f
commit
9fdcb6ed9f
|
|
@ -0,0 +1,211 @@
|
|||
/*******************************/
|
||||
/*** RECTIFICATIONS GLOBALES ***/
|
||||
/*******************************/
|
||||
*{ margin: 0; padding: 0; }
|
||||
|
||||
body{
|
||||
/* position */
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* background */
|
||||
background-color: #233342;
|
||||
font-size: 16px;
|
||||
|
||||
/* foreground */
|
||||
font: 16px 'Open Sans';
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************/
|
||||
/*** FORMULAIRES ***/
|
||||
/*******************/
|
||||
form{
|
||||
/* position */
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: calc( 50% - 20em/2 );
|
||||
width: 20em;
|
||||
height: auto;
|
||||
margin: 2em;
|
||||
padding: 2em;
|
||||
|
||||
/* border */
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 10px #0a0f14;
|
||||
|
||||
/* background */
|
||||
background-color: #151f28;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/************************/
|
||||
/*** CHAMPS DE SAISIE ***/
|
||||
/************************/
|
||||
input[type=text],
|
||||
input[type=password]{
|
||||
/* position */
|
||||
display: inline-block;
|
||||
width: calc( 100% - 2*2em - 2*1em );
|
||||
padding: 1em 2em;
|
||||
margin: 1em;
|
||||
|
||||
/* border */
|
||||
border: 0;
|
||||
|
||||
/* background */
|
||||
/*background-color: #ddd;*/ background-color: transparent;
|
||||
background-image: -webkit-linear-gradient( right, #3272d8, #3272d8), -webkit-linear-gradient( right, white, white);
|
||||
background-image: -moz-linear-gradient( right, #3272d8, #3272d8), -moz-linear-gradient( right, white, white);
|
||||
background-image: -ms-linear-gradient( right, #3272d8, #3272d8), -ms-linear-gradient( right, white, white);
|
||||
background-image: -o-linear-gradient( right, #3272d8, #3272d8), -o-linear-gradient( right, white, white);
|
||||
background-image: linear-gradient( to left, #3272d8, #3272d8), linear-gradient( to left, white, white);
|
||||
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: bottom center, bottom center;
|
||||
background-size: 0 1px, 100% 1px;
|
||||
|
||||
/* foreground */
|
||||
color: #fff;
|
||||
font-size: .9em;
|
||||
|
||||
/* animation */
|
||||
transition: background-size .2s ease-in;
|
||||
-moz-transition: background-size .2s ease-in;
|
||||
-webkit-transition: background-size .2s ease-in;
|
||||
-ms-transition: background-size .2s ease-in;
|
||||
-o-transition: background-size .2s ease-in;
|
||||
}
|
||||
|
||||
input[type=text] + label,
|
||||
input[type=password] + label{
|
||||
/* position */
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin-left: 3em;
|
||||
margin-top: -3.1em;
|
||||
|
||||
/* foreground */
|
||||
font-size: .9em;
|
||||
|
||||
/* animation */
|
||||
transition: margin .2s ease-in-out;
|
||||
-moz-transition: margin .2s ease-in-out;
|
||||
-webkit-transition: margin .2s ease-in-out;
|
||||
-ms-transition: margin .2s ease-in-out;
|
||||
-o-transition: margin .2s ease-in-out;
|
||||
}
|
||||
|
||||
input[type=text]:focus,
|
||||
input[type=password]:focus{
|
||||
background-size: 100% 1px, 100% 1px;
|
||||
}
|
||||
|
||||
input[type=text]:focus + label, input[type=text]:not([value='']) + label,
|
||||
input[type=password]:focus + label, input[type=password]:not([value='']) + label{
|
||||
/* position */
|
||||
margin-left: 1em;
|
||||
margin-top: -5.1em;
|
||||
|
||||
/* foreground */
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/****************************/
|
||||
/*** CHAMPS DE VALIDATION ***/
|
||||
/****************************/
|
||||
input[type=submit]{
|
||||
/* position */
|
||||
display: inline-block;
|
||||
padding: 1em 2em;
|
||||
margin: 1em;
|
||||
width: calc( 100% - 2*2em - 5px - 2*1em );
|
||||
|
||||
/* border */
|
||||
border-radius: 3px 0 0 3px;
|
||||
border: 0;
|
||||
border-right: 5px solid #aaa;
|
||||
|
||||
/* background */
|
||||
background-color: #ddd;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
/*****************************/
|
||||
/*** BOUTONS DE VALIDATION ***/
|
||||
/*****************************/
|
||||
input[type=submit],
|
||||
input[type=button]{
|
||||
/* position */
|
||||
width: auto;
|
||||
float: right;
|
||||
|
||||
/* foreground */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type=submit]:hover,
|
||||
input[type=button]:hover{
|
||||
|
||||
/* border */
|
||||
border-right-color: #1b84db;
|
||||
|
||||
/* background */
|
||||
background-color: #fff;
|
||||
|
||||
/* foreground */
|
||||
color: #1b84db;
|
||||
|
||||
/* extra */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* @hover */
|
||||
/*input:focus { background-color: #fff; }
|
||||
input:nth-child(4n+0):focus{ border-right-color: #f45b2a; }
|
||||
input:nth-child(4n+1):focus{ border-right-color: #1b84db; }
|
||||
input:nth-child(4n+2):focus{ border-right-color: #f4b92a; }
|
||||
input:nth-child(4n+3):focus{ border-right-color: #b62af4; }*/
|
||||
|
||||
/****************/
|
||||
/*** MESSAGES ***/
|
||||
/****************/
|
||||
.error{
|
||||
font-size: .8em;
|
||||
padding: 1em 1em;
|
||||
color: #f14973;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.success{
|
||||
font-size: .8em;
|
||||
padding: 1em 1em;
|
||||
color: #49f16b;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
26
index.php
26
index.php
|
|
@ -29,21 +29,29 @@ if(Authentification::checkUser(0)){
|
|||
<meta name='author' value='{xdrm} & SeekDaSky'/>
|
||||
|
||||
|
||||
<link rel='stylesheet' href='css/login.css'/>
|
||||
<link rel='stylesheet' href='css/login-material.css'/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<?php
|
||||
<?php
|
||||
|
||||
echo "<form action='#auth' method='POST'>";
|
||||
echo "<input type='text' name='username' placeholder='username'>";
|
||||
echo "<input type='password' name='password' placeholder='password'>";
|
||||
echo "<input type='submit' name='co' value='Me connecter'>";
|
||||
echo "</form>";
|
||||
|
||||
?>
|
||||
echo "<form action='#auth' method='POST'>";
|
||||
echo "<input type='text' name='username' id='username' value=''><label for='username'>Username</label>";
|
||||
echo "<input type='password' name='password' id='password' value=''><label for='password'>Password</label>";
|
||||
echo "<input type='submit' name='co' value='Me connecter'>";
|
||||
echo "</form>";
|
||||
|
||||
?>
|
||||
|
||||
<script type='text/javascript'>
|
||||
/* On règle le pb d'accessibilité à l'attribut "value" des inputs
|
||||
* au niveau du CSS
|
||||
*/
|
||||
|
||||
var inputs = document.querySelectorAll('input[type=text], input[type=password]');
|
||||
for( var i = 0 ; i < inputs.length ; i++ )
|
||||
inputs[i].addEventListener('change', function(e){ e.target.setAttribute('value', e.target.value); }, false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue