.wrapper

  .title Material design form
  
  .content
      ul
        li
          label.icon.mail(for='mail')
          input#mail.wicon(type='text', placeholder='E-mail')
        li
          label.icon.location(for='address')
          input#address(type='text', placeholder='Address')
          select#address(type='text', placeholder='Country')
            option(value='Russia') Russia
            option(value='USA') USA
            option(value='Canada') Canada
            option(value='Australia') Australia
        li
          input#more.block(type='text', placeholder='Message')
          
  
   
  .actions
    button.button.blue submit
    button.button cancel
    

    
    
    

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,900,700italic,900italic);

$grid = 4

$color-indigo500 = #3F51B5
$color-blue500 = #2196F3

$animation = .28s cubic-bezier(0.4,0,.2,1)
$animation-slow = .56s cubic-bezier(0.4,0,.2,1)

body
  font-family 'Roboto'
  background #eee


.wrapper
  display table
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  width ($grid * 100)px
  margin auto
  background #fff
  border-radius ($grid / 2)px
  box-shadow 0 19px 38px rgba(black, .3), 0 15px 12px rgba(black, .22)
  z-index 100


.title
  display block
  padding ($grid * 6)px ($grid * 6)px 0
  font-size ($grid * 5)px
  font-weight 600
  color rgba(black, 87%)


.content
  display block
  padding ($grid * 6)px ($grid * 6)px ($grid * 4)px
  & ul
    display block
    margin 0
    padding 0
    & li
      display block
      margin ($grid * 2)px 0
      padding 0
      &::after
        content ''
        display table
        clear both
      &:first-of-type
        margin-top 0
      &:last-of-type
        margin-bottom 0
      & *
        float left
  
  
  & p
    margin 0
    color rgba(black, 54%)
  
  
//width = 88 of grid  
input[type=text], select  
  display inline-block
  box-sizing border-box
  padding 0
  margin 0 0 ($grid * 2)px
  height ($grid * 10)px
  line-height 3
  border none
  border-bottom 1px solid rgba(black, 12%)
  outline none
  color rgba(black, 87%)
  font-weight medium
  font-size ($grid * 4)px
  vertical-align top
  transition border $animation-slow
  &:focus
    border-bottom 2px solid $color-blue500   
  &.block
    width 100%
  &.wicon
    width ($grid * 73)px

.icon
  display inline-block
  width ($grid * 12)px
  height ($grid * 12)px
  margin-right ($grid * 3)px
  vertical-align top
  &.location
    background url(https://google.github.io/material-design-icons/action/svg/ic_room_24px.svg) no-repeat center
  &.mail
    background url(https://google.github.io/material-design-icons/communication/svg/ic_email_24px.svg) no-repeat center

select
  width ($grid * 25)px
  margin-left ($grid * 2)px
input[type=text]
  width ($grid * 46)px
  
  
.selection
  display inline-block
  position absolute
  padding ($grid * 2)px 0
  background #fff
  box-shadow 0 0 (($grid * 2)px) rgba(black, 24%)
  overflow hidden
  opacity 0
  z-index 300
  & a
    display block
    width 100%
    box-sizing border-box
    padding 0 ($grid * 4)px ($grid * 5)px
    height ($grid * 12)px
    line-height ($grid * 12)px
    font-size ($grid * 4)px
    cursor pointer
    &:active
      background #eee
  
  
.actions
  display block
  height ($grid * 12)px
  padding 0 ($grid * 4)px ($grid * 4)px
  text-align right
  & .button
    float right
    margin-left ($grid * 2)px

.button
  display inline-block
  position relative
  padding 0 ($grid * 2)px
  height ($grid * 9)px
  border none
  margin ($grid * 2)px 0
  cursor pointer
  border-radius ($grid / 2)px
  font-size ($grid * 4)px
  font-weight 400
  color $color-blue500
  text-transform uppercase
  text-decoration none
  background none
  outline none
  transition box-shadow $animation,
             color $animation  

  &:hover
    box-shadow 0 3px 6px rgba(black, .2),
               0 3px 6px rgba(black, .28)
  &:active
    box-shadow 0 10px 20px rgba(black, .19),
               0 6px 6px rgba(black, .23)  
  &.blue
    background $color-blue500
    color rgba(white, 95%)
  

var grid = 4;
var item_height = 48;

$(document).ready(function() {
  
  $('select').on('mousedown', function (e) {

        var _this = this,
            options = $(_this).find('option'),
            wrapper = $('<div class="selection"></div>');

        $('.selection').remove();
        
        $(_this).focus();
    
        for (var i = 0; i < options.length; i++) {

            var link = $('<a data-id="' + options[i].value + '">' + options[i].innerText + '</a>');
              
            wrapper.append(link)
            
        }
        
        wrapper.on('click', function(e) {
          $(this).remove();
          $(_this).find('option[value=' + e.target.dataset.id + ']').attr('selected', 'selected');
        });
    
    
        var top_start = $(_this).position().top - $(_this).height() * 2,
            left_start = $(_this).position().left + $(_this).width();
        
        var top_finish = $(_this).position().top - (grid * 3) - (item_height * ( ( $(_this).children('option:selected').index() ) ) ),
            left_finish = $(_this).position().left - grid;   
      
        $(_this).after(wrapper);
    
        wrapper.css({top: top_start, left: left_start, height: 0, width: 0});
        wrapper.animate({
          width: $(_this).outerWidth(),
          height: 'auto',
          top: top_finish,
          left: left_finish,
          opacity: 1
        }, 280, 'easeInOutQuint');

        e.preventDefault();
        e.stopPropagation();
  })

})