Added <optgroup> support

Added <optgroup> support
Changed Sass file to easier customization, and stripped-down some
properties
Small fixes

Author: lcdsantos

.csscomb.json

@@ -0,0 +1,20 @@
+{
+  "always-semicolon": true,
+  "block-indent": 2,
+  "color-case": "upper",
+  "color-shorthand": true,
+  "leading-zero": true,
+  "remove-empty-rulesets": true,
+  "space-after-colon": 1,
+  "space-after-combinator": 1,
+  "space-between-declarations": "\n",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": 1,
+  "space-before-closing-brace": "\n",
+  "space-before-colon": 0,
+  "space-before-combinator": 1,
+  "unitless-zero": true,
+  "vendor-prefix-align": true,
+  "strip-spaces": false,
+  "tab-size": 2
+}

README.md

@@ -16,7 +16,7 @@ jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulati
 Make sure to include jQuery in your page:
 
 ```html
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 ```
 
 Include **jQuery Selectric:**
@@ -28,13 +28,11 @@ Include **jQuery Selectric:**
 Put styles in your CSS and change it to your taste :D
 
 ```css
-/*======================================================================
+/*======================================
   Selectric
-======================================================================*/
+======================================*/
 .selectricWrapper {
   position: relative;
-  margin: 0 0 10px;
-  width: 300px;
   cursor: pointer;
 }
 
@@ -46,31 +44,29 @@ Put styles in your CSS and change it to your taste :D
   border: 1px solid #DDD;
   background: #F8F8F8;
   position: relative;
-  border-radius: 2px;
 }
 .selectric .label {
   display: block;
   white-space: nowrap;
   overflow: hidden;
-  margin: 0 30px 0 0;
-  padding: 6px;
+  text-overflow: ellipsis;
+  margin: 0 38px 0 10px;
   font-size: 12px;
-  line-height: 18px;
+  line-height: 38px;
   color: #444;
-  min-height: 18px;
+  height: 38px;
 }
 .selectric .button {
   display: block;
   position: absolute;
   right: 0;
   top: 0;
-  width: 30px;
-  height: 30px;
+  width: 38px;
+  height: 38px;
   color: #BBB;
   text-align: center;
   font: 0/0 a;
-  /* IE Fix */
-  *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial;
+  *font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial;
 }
 .selectric .button:after {
   content: " ";
@@ -88,21 +84,17 @@ Put styles in your CSS and change it to your taste :D
 }
 
 .selectricHover .selectric {
-  border-color: #CCC;
+  border-color: #C4C4C4;
 }
 .selectricHover .selectric .button {
-  color: #888;
-}
-.selectricHover .selectric .button:after {
-  border-top-color: #888;
+  color: #A2A2A2;
 }
 
 .selectricOpen {
   z-index: 9999;
 }
 .selectricOpen .selectric {
-  border-color: #CCC;
-  background: #F0F0F0;
+  border-color: #C4C4C4;
 }
 .selectricOpen .selectricItems {
   display: block;
@@ -112,7 +104,6 @@ Put styles in your CSS and change it to your taste :D
   filter: alpha(opacity=50);
   opacity: 0.5;
   cursor: default;
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -159,8 +150,8 @@ Put styles in your CSS and change it to your taste :D
   position: absolute;
   top: 100%;
   left: 0;
-  background: #F9F9F9;
-  border: 1px solid #CCC;
+  background: #F8F8F8;
+  border: 1px solid #C4C4C4;
   z-index: -1;
   box-shadow: 0 0 10px -6px;
 }
@@ -182,7 +173,7 @@ Put styles in your CSS and change it to your taste :D
 }
 .selectricItems li {
   display: block;
-  padding: 5px;
+  padding: 8px;
   border-top: 1px solid #FFF;
   border-bottom: 1px solid #EEE;
   color: #666;
@@ -191,18 +182,41 @@ Put styles in your CSS and change it to your taste :D
 .selectricItems li.selected {
   background: #EFEFEF;
   color: #444;
-  border-top-color: #E0E0E0;
 }
 .selectricItems li:hover {
   background: #F0F0F0;
   color: #444;
 }
-.selectricItems li.disabled {
-  background: #F5F5F5;
-  color: #BBB;
-  border-top-color: #FAFAFA;
+.selectricItems .disabled {
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  cursor: default !important;
+  background: none !important;
+  color: #666 !important;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.selectricItems .selectricGroup .selectricGroupLabel {
+  font-weight: bold;
+  padding-left: 10px;
   cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  background: none;
+  color: #444;
+}
+.selectricItems .selectricGroup.disabled li {
+  filter: alpha(opacity=100);
+  opacity: 1;
 }
+.selectricItems .selectricGroup li {
+  padding-left: 25px;
+}
+
 ```
 
 Initialize **jQuery Selectric:**

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "jquery-selectric",
   "description": "Fast, simple and light jQuery plugin to customize HTML selects",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "keywords": [
     "select",
     "selectbox",