Add custom selectbox

README.md

@@ -298,6 +298,43 @@ Example:
 }
 ```
 
+#### Components
+
+##### Selectbox
+
+Creates a styled jQuery selectbox.  This will create a div to hold the selected value and
+a ul list of options to select from.  User the following to style:
+
+***HTML***
+
+```html
+<div class="selector">
+  <select>
+    <option value="example">Example</option>
+    <option selected="selected" value="selected-example">Selected</option>
+  </select>
+</div>
+```
+
+***JAVASCRIPT***
+```javascript
+sbox = SelectBox.new({
+  container: $(".selector"),
+  scrollBreak: 2 // not required but can change how big the options menu is relative to the screen size
+})
+```
+
+***SCSS***
+
+```scss
+.selector {
+  // If any of these default variables are set, then it will adopt those values
+  // $base-body-color, $base-font-color, $base-border-color, $base-border-radius
+
+  @include select($height, $padding, $background-color, $color, $border, $border-radius, $arrow-color)
+}
+```
+
 ## Contributing
 
 1. Fork it

app/assets/javascripts/codelation/components/selectbox.js

@@ -0,0 +1,71 @@
+/*
+Required Args: container (a reference to a node)
+Optional Args:
+  - scrollBreak: (int) Determines how big the options menu is compaired to the screen size
+*/
+
+var SelectBox = function(args) {
+  if ($(args.container).has("select")){
+    var selectboxObj = $(args.container).find("select");
+
+    $(selectboxObj).each(function(){
+     var $this = $(this), numberOfOptions = $(this).children('option').length;
+
+     $this.wrap('<div class="ca-selectbox"></div>');
+     $this.after('<div class="ca-selectbox-styled"></div>');
+
+     //Set the selected item
+     var $styledSelect = $this.next('div.ca-selectbox-styled');
+     var selectedValue = $this.children('option').eq(0).text();
+     $this.children('option').each(function () {
+       if ($(this).attr("selected")) {
+           selectedValue = $(this).text();
+       }
+     });
+     $styledSelect.text(selectedValue);
+
+
+     var $list = $('<ul />', {
+         'class': 'ca-selectbox-options'
+     }).insertAfter($styledSelect);
+
+     args.scrollBreak =  (args.scrollBreak == null) ? 2 : args.scrollBreak;
+     //sets height of options
+     var optionListHeight = $(window).height() / args.scrollBreak;
+     if (optionListHeight < 230){
+       optionListHeight = 230;
+     }
+     $list.css({maxHeight: optionListHeight + 'px'});
+
+     for (var i = 0; i < numberOfOptions; i++) {
+         $('<li />', {
+             text: $this.children('option').eq(i).text(),
+             rel: $this.children('option').eq(i).val()
+         }).appendTo($list);
+     }
+
+     var $listItems = $list.children('li');
+
+     //Toggle Select box
+     $styledSelect.click(function(e) {
+         e.stopPropagation();
+         $(this).toggleClass('ca-selectbox-option-active').next('ul.ca-selectbox-options').toggle();
+     });
+
+     //Select option
+     $listItems.click(function(e) {
+         e.stopPropagation();
+         $styledSelect.text($(this).text()).removeClass('ca-selectbox-option-active');
+         $this.val($(this).attr('rel'));
+         $list.hide();
+     });
+
+     //Close if clicked outside
+     $(document).click(function() {
+         $styledSelect.removeClass('ca-selectbox-option-active');
+         $list.hide();
+     });
+
+    });
+  }
+};

app/assets/stylesheets/codelation/mixins/selectbox.scss

@@ -0,0 +1,103 @@
+$base-body-color: #fff !default;
+$base-font-color: #000 !default;
+$base-border-color: color($grey, 300) !default;
+$base-border-radius: 3px !default;
+
+@mixin selectbox($height: 40px, $padding: 0 5px, $bg-color: $base-body-color, $color: $base-font-color, $border: 1px solid $base-border-color, $border-radius: $base-border-radius, $arrow-color: transparentize($base-font-color, 0.5)) {
+  select {
+    display: none;
+    visibility: hidden;
+  }
+
+  .ca-selectbox {
+    background-color: $bg-color;
+    cursor: pointer;
+    font-size: 1em;
+    height: $height;
+    padding: 0 10px;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .ca-selectbox-styled {
+    @include transition(all 0.2s ease-in);
+
+    align-items: center;
+    border: $border;
+    border-radius: $border-radius;
+    bottom: 0;
+    display: flex;
+    left: 0;
+    padding: $padding;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &:after {
+      border: 7px solid transparent;
+      border-color: $arrow-color transparent transparent;
+      bottom: 0;
+      content: "";
+      height: 0;
+      margin: auto 6px;
+      position: absolute;
+      right: 0;
+      top: 4px;
+      width: 0;
+    }
+
+    &:hover {
+      background-color: darken($bg-color, 2);
+    }
+
+    &:active,
+    &.ca-selectbox-option-active {
+      background-color: darken($bg-color, 5);
+
+      &:after {
+        border-color: transparent transparent $arrow-color;
+        top: -4px;
+      }
+    }
+  }
+
+  .ca-selectbox-options {
+    background-color: $base-body-color;
+    border: $border;
+    border-radius: $border-radius;
+    box-shadow: 2px 2px 2px color($grey, 600);
+    display: none;
+    left: 0;
+    list-style: none;
+    margin: 0;
+    overflow: auto;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 999;
+
+    li {
+      @include transition(all 0.15s ease-in);
+      align-items: center;
+      border-top: $border;
+      display: flex;
+      height: $height;
+      margin: 0;
+      padding: $padding;
+
+
+      &:hover {
+        background: darken($bg-color, 10);
+      }
+
+      &[rel="hide"] {
+        display: none;
+      }
+
+      &:first-child {
+        border: 0;
+      }
+    }
+  }
+}