Merge pull request #200 from acemir/develop

Added "optgroup" support and improved "disabled" suport

blank_theme.css

@@ -20,6 +20,8 @@
   float: left; }
   .dk_container a {
     outline: 0; }
+  .dk_container[disabled] a {
+    cursor: not-allowed; }
 
 .dk_toggle {
   display: -moz-inline-stack;
@@ -51,7 +53,6 @@
 
 .dk_container select {
   position: absolute;
-  top: -99999em;
   visibility: hidden; }
 
 .dk_mobile {

blank_theme.scss

@@ -14,6 +14,10 @@
   }
   a {
 
+  }
+
+  &[disabled] a {
+
   }
 
   /* Toggle */
@@ -107,7 +111,7 @@
 // Hides only dropkick <select> instances
 .dk_container select {
   position: absolute;
-  top: -99999em;
+  // top: -99999em;
   visibility: hidden;
 }
 

dropkick.css

@@ -18,9 +18,13 @@
   -webkit-border-radius: 5px; }
   .dk_container:focus {
     outline: 0; }
+  .dk_container[disabled] {
+    opacity:.4; }
   .dk_container a {
     cursor: pointer;
     text-decoration: none; }
+  .dk_container[disabled] a {
+    cursor: not-allowed; }
 
 .dk_toggle {
   border: 1px solid #ccc;
@@ -99,14 +103,31 @@
     border-bottom: none; }
   .dk_options .disabled {
     cursor: default; }
-    .dk_options .disabled a {
+    .dk_options .disabled a,
+    .dk_options .dk_optgroup.disabled > span {
       color: #aaa; }
-    .dk_options .disabled:hover, .dk_options .disabled:hover a
-    .dk_options .disabled:focus, .dk_options .disabled:focus a {
+    .dk_options .disabled:hover a,
+    .dk_options .disabled:focus a {
       cursor: default;
       background-color: #fff;
       border-bottom-color: #999;
       text-shadow: none; }
+  .dk_options .dk_optgroup {
+    padding-left: 5px;
+    background: #ddd;
+  }
+    .dk_options .dk_optgroup > span {
+      display: block;
+      padding: 5px 10px 5px 5px;
+      font-style: italic;
+      color: #444;
+      background: #ddd;
+      border-bottom: ;
+    }
+    .dk_options .dk_optgroup.disabled,
+    .dk_options .dk_optgroup.disabled > span {
+      background: #eee;
+    }
 
 .dk_options_inner {
   max-height: 250px;
@@ -155,7 +176,7 @@
 
 .dk_container select {
   position: absolute;
-  top: -99999em;
+  /*top: -99999em;*/ /* IE was sending window to top on label click */
   visibility: hidden; }
 
 .dk_mobile {

dropkick.scss

@@ -23,10 +23,16 @@
   &:focus {
     outline: 0;
   }
+  &[disabled] {
+    opacity:.4;
+  }
   a {
     cursor: pointer;
     text-decoration: none;
   }
+  &[disabled] a {
+    cursor: not-allowed;
+  }
 }
 
 // Opens the dropdown and holds the menu label
@@ -130,7 +136,7 @@
     a {
       color: #aaa;
     }
-    &:hover, &:hover a
+    &:hover, &:hover a,
     &:focus, &:focus a {
       cursor: default;
       background-color: #fff;
@@ -191,6 +197,11 @@
   a, a:link, a:visited{
     display: block;
   }
+  .dk_optgroup {
+    > span {
+
+    }
+  }
 }
 
 .dk_options_inner {
@@ -203,7 +214,7 @@
 // Hides only dropkick <select> instances
 .dk_container select {
   position: absolute;
-  top: -99999em;
+  // top: -99999em;
   visibility: hidden;
 }
 

example/example.css

@@ -104,6 +104,9 @@ ul {
   margin-bottom: 20px;
   padding: 18px;
 }
+  .example .gist-wrap {
+    clear: both;
+  }
   .example .gist-data {
     font-size: 12px!important;
   }
@@ -115,6 +118,14 @@ ul {
     line-height: 2.25em;
   }
 
+  .example button {
+    border: 1px solid #ccc;
+    color: #333;
+    padding: 7px 10px;
+    text-shadow: #fff 1px 1px 0;
+    border-radius: 5px;
+  }
+
 
 fieldset {
   border: none;