%body.nojs
  %h1 drop down menus

  .select
    %span Standard drop down
    %ul
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click


  %br


  .select
    %span multiple select dropdown
    %ul
      %li
        %label
          %input{:type => "checkbox"}/
          %span 
            awesome
      %li
        %label
          %input{:type => "checkbox"}/
          %span 
            awesome
      %li
        %label
          %input{:type => "checkbox"}/
          %span 
            awesome

      %li
        %label
          %input{:type => "checkbox"}/
          %span 
            awesome

      %li
        %label
          %input{:type => "checkbox"}/
          %span 
            awesome


  %br
  .select
    %span Drop down with a long list
    %ul
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} big tall list
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click wow
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} it is very tall
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} click
      %li
        %a{:href => ""} so tall

  %br
  %br
  %br
  %br
  %br
  %br
  %br
  %br
  %br
  %br
  %br
  %br

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);

@import "compass/css3";
$tone:  #b5b9bf;  
$rh-blue:      #4e9fdd;   
$line-height:1.75em;
$size:11.2px;
/* demo junk */
body{ max-width: 30em; margin: 1em auto;
  background-color:$tone;  height: 101%;
  padding:4em; 
  font:{ 
    family: "Open Sans",sans-serif;
    weight: 400;
    size: $size;
  }
  line-height:$line-height;
}

h1{font-weight: 300; font-size:4em; text-align:center; color: darken($tone, 10%); padding-bottom:.5em;line-height:1em;}
/*  ************************   */
/* meat and potatoes  */

.select{ user-select:none;
    cursor: pointer;  
    position:relative; 
    text-align:left;
    height: $line-height*2;
    line-height: $line-height*2;
    display: block;   width: 100%; 
    background-color:rgba(lighten($tone, 17%),.5); 
    @include background(linear-gradient(top, lighten($tone, 19%) 0%, darken($tone, 0%) 100%));
    @include border-radius( .25em); 
    color:rgba(0,0,0,0.5);  
    @include box-shadow(  0 1px 2px rgba(0,0,0,0.15),  0 0 0 1px rgba(0,0,0,0.05),  inset 0 0 0 1px rgba(255,255,255,0.12),  inset 0 $line-height 0 rgba(255,255,255,0.15));  
    text-indent: 1em;  
    width: 97%;   
    min-width: 11em;
    text-overflow:ellipsis; 
    white-space:nowrap;
    
    &:after{
      position:absolute; 
      top:0; 
      right:0; 
      content:""; 
      display: block;

    height: $line-height*2;      width: 2.5em ;  
      @include box-shadow( 0 0 0 1px rgba(0,0,0,0.015), inset 0 0 0 1px rgba(255,255,255,0.1),  -.2em 0 .2em -.2em rgba(0,0,0,0.2)) ; 
      float:right; 
      border-radius:0 .25em  .25em 0;
    } 
    
    &:before{
      content:""; 
      border: .5em   solid black; 
      border-width:.5em .5em 0;
      border-color: #ccc transparent ; 
      border-color: rgba(0,0,0,0.2) transparent ;
      width: 0; height: 0; 
      position:absolute; right:0;
      margin-top: $line-height*.85; 
      margin-left:-4em; 
      margin-right: .75em;  
      transition: all .15s ease;
    }
    &:hover{
      background-color: rgba(255,255,255,0.5); 
      color:#333;
      &:before{ 
        border-color: #666 transparent ; 
        border-color: rgba(0,0,0,0.5) transparent ;
      }
    
    }
  ul{ position:relative;
    list-style: none; z-index:2;
    padding:0; margin:0; 
    background-color: lighten($tone, 20%); 
    @include border-radius( 0 0 .25em .25em); 
    @include box-shadow(  0 1px 2px rgba(0,0,0,0.15),  
      0 0 0 1px rgba(0,0,0,0.05), 
      0 0 3em  rgba(0,0,0,0.2),
      inset 0 0 0 1px rgba(255,255,255,0.12));  
    width: 100%;
    overflow:hidden;
    max-height:15em; overflow-y: auto;
    li{ display:inline;
      margin:0; 
      padding:0; 
      width: 100%; 
    
    
    a, label, span{  
        span{display: block; position: absolute; top:0; left:0; width: 100%;}
        input[type="checkbox"]{opacity:0;}
        cursor: pointer;
        text-overflow: ellipsis;
        position:relative; 
        z-index:1;
        text-decoration: none; 
        display:block;
        color:darken($tone, 20%);
      &:hover,  input:checked ~ span{
          background-color:$rh-blue;
          @include background(linear-gradient(top, lighten($rh-blue, 7%) 0%, darken($rh-blue, 7%) 100%));
          color: white;
        } 
        input:checked ~ span{&:after{content: "selected"; position: absolute; right: 2em; margin-right:2em; }}
      } 
    &:last-child a{
        @include border-radius( 0 0 .25em .25em );
      }
    }
   

    &:before{
      content:""; 
      display: block; position: absolute; top: 2px; width: 100%; height: .5em; @include background(linear-gradient(top, lighten($rh-blue, 25%) 0%, lighten($tone, 20%) 100%)); 
      box-shadow:0 -1px 0 lighten($rh-blue, 35%), 0 -2px 0 $rh-blue} 
  }
  span{display:block;text-overflow: ellipsis; overflow:hidden; padding-right:3em; position:relative; z-index: 1;}
  
  }

.select.clicked{@include border-radius( .25em .25em 0 0 );
  background-color:rgba(lighten($tone, 17%),.5); 
  
    @include background(linear-gradient(top, 
    lighten($tone, 6%) 0%, 
   lighten($tone, 14%) 20%,
    lighten($tone, 22%) 100%));
  
  
  @include box-shadow(  0 1px .5em rgba($rh-blue,0.5),  0 0 0 1px $rh-blue,  inset 0 0 0 1px rgba(255,255,255,0.25));
  
     color: darken($tone, 50%);
 &:before{
      content:""; 
      border-width:0 .5em .5em .5em;
      border-color: rgba(0,0,0,0.15) transparent ;
      position:absolute; right:0;
      margin-top: $line-height*.8; 
}

  span{color:desaturate(darken($tone,50%), 80%)}
}

.select.clicked ul{display:block; @include box-shadow(  0 1px 2px rgba(0,0,0,0.15),  
      0 0 0 1px rgba(0,0,0,0.05), 
      0 0 3em  rgba(0,0,0,0.2),
      inset 0 0 0 1px rgba(255,255,255,0.12)); }

.select ul{display: none}

/* for our friends without javascript */
.nojs .select{ height: auto;
   &:hover ul{display:block; max-height: 8em; &:before{display:none;}}}

$("body").removeClass("nojs").addClass("js");

$("div.select > span").click(function(e) {
  var container = $(this).parent();
  // var container = $(this).closest('div.select'); // alternative

  if (container.hasClass('clicked')) {
    // Dropdown already open so close it
    container.removeClass('clicked');
  }
  else {
    // Hide all open dropdowns so only one is open at a time
    $("div.select.clicked").removeClass("clicked");
    // Open this dropdown
    container.addClass("clicked");
   }
   
   e.stopPropagation(); // prevent the $('html').click fires..
});

$('html').click(function(e){
  // this is not pretty...
  // check if we are clicking inside an open select
 if ($(e.target).closest('div.select.clicked').length == 0) {
   
   
    // Close open dropdowns when clicking elsewhere
    $('div.select.clicked').removeClass('clicked');
  }
});