cleanup css; add disabled class for menu

Author: jseppi

angular-dropdowns.css

@@ -1,7 +1,6 @@
 /****** dropdown-select *******/
 
 .wrap-dd-select {
-  /* Size and position */
   position: relative;
   width: 200px;
   margin: 0 auto;
@@ -11,24 +10,18 @@
   -moz-user-select:none;
   user-select:none;
 
-  /* Styles */
   background: #fff;
   border-radius: 7px;
   border: 1px solid rgba(0,0,0,0.15);
   box-shadow: 0 1px 1px rgba(50,50,50,0.1);
   cursor: pointer;
   outline: none;
-
-  /* Font settings */
   font-weight: bold;
   color: #8AA8BD;
 }
 
-.disabled {
-  /* Styles */
+.wrap-dd-select.disabled {
   cursor: default;
-
-  /* Font settings */
   color: #5B6A7D;
 }
 
@@ -45,28 +38,23 @@
   border-color: #8aa8bd transparent;
 }
 
-.disabled:after {
+.wrap-dd-select.disabled:after {
   border: none;
 }
 
 .wrap-dd-select .dropdown {
-  /* Size & position */
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 10;
-
-  /* Styles */
   background: white;
   padding: 0;
   border-radius: inherit;
   border: 1px solid rgba(0,0,0,0.17);
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   font-weight: normal;
   list-style: none;
-
-  /* Hiding */
   visibility: hidden;
 }
 
@@ -106,8 +94,6 @@
   border: none;
 }
 
-/* Hover state */
-
 .wrap-dd-select .dropdown li:hover a {
   background: #f3f8f8;
 }
@@ -142,31 +128,30 @@
 
 /****** dropdown-menu *******/
 .wrap-dd-menu {
-  /* Size and position */
   position: relative;
   width: 200px;
   margin: 0 auto;
   padding: 10px;
 }
 
+.wrap-dd-menu.disabled {
+  cursor: default;
+  color: #5B6A7D;
+}
+
 .wrap-dd-menu .dropdown {
-  /* Size & position */
   position: absolute;
   z-index: 1;
   top: 70%;
   left: 0;
   right: 0;
-
-  /* Styles */
   background: white;
   padding: 0;
   border-radius: 7px;
   border: 1px solid rgba(0,0,0,0.17);
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   font-weight: normal;
   list-style: none;
-
-  /* Hiding */
   visibility: hidden;
 }
 
@@ -206,8 +191,6 @@
   border: none;
 }
 
-/* Hover state */
-
 .wrap-dd-menu .dropdown li:hover a {
   background: #f3f8f8;
 }

angular-dropdowns.js

@@ -148,11 +148,13 @@
           $template.data('$dropdownMenuController', this);
 
           var tpl = $compile($template)($scope);
-          var $wrap = angular.element('<div class="wrap-dd-menu"></div>');
+          var $wrap = $compile(angular.element(
+            '<div class="wrap-dd-menu" ng-class="{\'disabled\': dropdownDisabled}"></div>')
+          )($scope);
 
           $element.replaceWith($wrap);
           $wrap.append($element);
-          $wrap.append(tpl);
+          $wrap.append($template);
 
           DropdownService.register(tpl);
 

dist/angular-dropdowns.css

@@ -1,7 +1,6 @@
 /****** dropdown-select *******/
 
 .wrap-dd-select {
-  /* Size and position */
   position: relative;
   width: 200px;
   margin: 0 auto;
@@ -11,24 +10,18 @@
   -moz-user-select:none;
   user-select:none;
 
-  /* Styles */
   background: #fff;
   border-radius: 7px;
   border: 1px solid rgba(0,0,0,0.15);
   box-shadow: 0 1px 1px rgba(50,50,50,0.1);
   cursor: pointer;
   outline: none;
-
-  /* Font settings */
   font-weight: bold;
   color: #8AA8BD;
 }
 
-.disabled {
-  /* Styles */
+.wrap-dd-select.disabled {
   cursor: default;
-
-  /* Font settings */
   color: #5B6A7D;
 }
 
@@ -45,28 +38,23 @@
   border-color: #8aa8bd transparent;
 }
 
-.disabled:after {
+.wrap-dd-select.disabled:after {
   border: none;
 }
 
 .wrap-dd-select .dropdown {
-  /* Size & position */
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 10;
-
-  /* Styles */
   background: white;
   padding: 0;
   border-radius: inherit;
   border: 1px solid rgba(0,0,0,0.17);
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   font-weight: normal;
   list-style: none;
-
-  /* Hiding */
   visibility: hidden;
 }
 
@@ -106,8 +94,6 @@
   border: none;
 }
 
-/* Hover state */
-
 .wrap-dd-select .dropdown li:hover a {
   background: #f3f8f8;
 }
@@ -142,31 +128,30 @@
 
 /****** dropdown-menu *******/
 .wrap-dd-menu {
-  /* Size and position */
   position: relative;
   width: 200px;
   margin: 0 auto;
   padding: 10px;
 }
 
+.wrap-dd-menu.disabled {
+  cursor: default;
+  color: #5B6A7D;
+}
+
 .wrap-dd-menu .dropdown {
-  /* Size & position */
   position: absolute;
   z-index: 1;
   top: 70%;
   left: 0;
   right: 0;
-
-  /* Styles */
   background: white;
   padding: 0;
   border-radius: 7px;
   border: 1px solid rgba(0,0,0,0.17);
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   font-weight: normal;
   list-style: none;
-
-  /* Hiding */
   visibility: hidden;
 }
 
@@ -206,8 +191,6 @@
   border: none;
 }
 
-/* Hover state */
-
 .wrap-dd-menu .dropdown li:hover a {
   background: #f3f8f8;
 }

dist/angular-dropdowns.js

@@ -148,11 +148,13 @@
           $template.data('$dropdownMenuController', this);
 
           var tpl = $compile($template)($scope);
-          var $wrap = angular.element('<div class="wrap-dd-menu"></div>');
+          var $wrap = $compile(angular.element(
+            '<div class="wrap-dd-menu" ng-class="{\'disabled\': dropdownDisabled}"></div>')
+          )($scope);
 
           $element.replaceWith($wrap);
           $wrap.append($element);
-          $wrap.append(tpl);
+          $wrap.append($template);
 
           DropdownService.register(tpl);