Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://zeptojs.com/zepto.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="nav">
</div>
  <div class="regform closed">
    <h2> Login </h2>
    <form action="http://some.ru" onsubmit="return false">
      <span class="icon user box">
      <input type="email" placeholder="user" name="email">
      </span>
      <span class="icon pass box">
      <input type="password" placeholder="password">
      </span>
      <span class="icon box">
      <input type="password" placeholder="password">
      </span>
      <span style="position:relative">
    <input type="submit">
      </span>
    </form>
    <a href="http://site.ru" class="icon down">Вход</a>
  </div>
​
</body>
</html>
 
@import "compass/css3";
​
@font-face {
  font-family: 'Entypo';
  src: local('Entypo');
}
​
$topnav-height: 45px;
$topnav-border-wigth: 1px;
$topnav-background: #69A5DB;
$topnav-border-color: darken($topnav-background, 30%);
​
$regform-height: 400px;
$regform-color: lighten(#AD8CE3, 5%);
​
$radius: 4px;
​
$icons: (
  'user': '\1F464',
  'pass': '\1F512',
  'down': '\E75C'
);
​
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
​
}
body {
    background-color: lighten(#D9460C, 53%);
    text-align: justify;
}
​
h1, h2, h3, h4, h5, h6 {
  font-family: Liberation Serif, Sans-serif, Serif;
}
​
.nav {
  width: 100%;
  height: $topnav-height;
  background-clip: border-box;
  background-color: $topnav-background;
  border-top: $topnav-border-wigth solid $topnav-border-color;
  border-bottom: $topnav-border-wigth solid  $topnav-border-color;
  margin: 0;
  position: fixed;
  @include box-shadow(black 0 0 20px);
  z-index: 50;
}
 
 
.regform
{
  position: fixed;
  height: $regform-height;
  width: 600px;
  right:10px;
  z-index: 100;
  background-color: $regform-color;
  border: 1px solid darken($regform-color, 20%);
  @include border-bottom-radius(12px);
  top: 0px;
  transition: top 100ms;
   
  &.closed {
    top: -$regform-height;
  }
  
  h2 {
   background-color: darken($regform-color, 15%);
   height: $topnav-height;
   padding: 0;
   border-bottom: 1px solid darken($regform-color, 20%);
   color: white;
   text-align: center;
   font-size: 25px;
   line-height: $topnav-height;
  }
  
  a {
    top: $regform-height;
    display: inline-block;
    position: absolute;
    padding: 6px 50px;
    text-decoration: none;
    background-color: darken($regform-color, 0%);
    border: 1px solid darken($regform-color, 20%);
    border-top: none;
    @include border-bottom-radius(12px);
    right:10px;
    color:white;
    transition: font-weight;
    font-size: 20px;
    outline: none;
    
    &:active, &:hover {
      color:white;
    }
​
   }
}
​
form {
  padding: 2em 3em 0em 4em;
  position: relative;
  
 
 span.box {
  line-height: 1;
  background-color: rgba(white, 0.8);
  font-size: 1.1em;
  padding: 0.3em 0.1em 0.3em 2em;
  margin: 1em 0;
  border: 1px solid #666;
  transition: border-color 0.4s;
  position: relative;
  @include border-radius($radius);
  width: 100%;
  box-sizing:border-box;
  
​
 &.focus {
  border-color: darken($regform-color, 20%);
 }
   
 &.icon:before {
  color: #666;
 }}
  
input {
  border: none;
  width: 360px;
  padding: 0;
  margin-right: 0px;
  color: #666;
  transition: color 0.4s;
  display: inline-block;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1em;
  background-color: transparent;
  width:100%;
​
  
&:focus {
  color: black;
}
&:invalid {
  @include box-shadow (none);
}}}
​
input[type="submit"] {
  background-color: #E7F4FD;
  padding: 8px 24px;
  @include border-radius($radius);
  width: auto;
  border: 1px solid darken(#E7F4FD, 20%);
  transition: background-color 200ms;
  color: black;
  position: absolute;
  right: 0px;
​
  
 &:hover{
     background-color: darken(#E7F4FD, 10%);
     cursor: pointer;
 }}
​
.icon {
  padding-left: 36px;
  display: inline-block;
}
​
.icon:before {
  font-family: 'Entypo';
  content: '\270E';
  font-size: 2em;
  margin-left: -28px;
  position: absolute;
  display: inline-block;
  line-height:1;
  top: 0;
}
​
@each $icon, $map in $icons{
  .icon.#{$icon}:before {
    content: $map;
  }
}
​
 
Zepto(function($){
  $('input').on('focus', function(){
    $(this).parent('span').addClass('focus');
  }).on('blur', function(){
    $(this).parent('span').removeClass('focus');
  });
  $('a.down').on('click', function(e){
    $(this).parent('.regform').toggleClass('closed');
  return false;
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ekklpro
0viewers