Cannot visually disable tabs with css

When trying to use CSS like: .tabs dd.disabled a, .tabs .tab-title.disabled a { background-color: transparent; color: #c0c0c0; }

My tabs are properly disabled navigation-wise. But they are not disabled visually. In order to get this to work I had to modify the templates to add the "disabled" property to the ng-class because there were only entries for "active".

angular.module("template/tabs/tab.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tab.html",
    "<dd ng-class=\"{active: active, disabled: disabled}\">\n" +
    "  <a ng-click=\"select()\" tab-heading-transclude>{{heading}}</a>\n" +
    "</dd>\n" +
    "");
}]);

angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tabset.html",
    "<div class=\"tabbable\">\n" +
    "  <dl class=\"tabs\" ng-class=\"{'vertical': vertical}\" ng-transclude></dl>\n" +
    "  <div class=\"tabs-content\" ng-class=\"{'vertical': vertical}\">\n" +
    "    <div class=\"content\" \n" +
    "      ng-repeat=\"tab in tabs\" \n" +
    "      ng-class=\"{active: tab.active, disabled: tab.disabled}\">\n" +
    "      <div tab-content-transclude=\"tab\"></div>\n" +
    "    </div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

This PR fixes it: https://github.com/pineconellc/angular-foundation/pull/293

yalabot / angular-foundation

Cannot visually disable tabs with css #292