refactor(tagsInput): Small adjustments

scss/bootstrap/main.scss

@@ -67,24 +67,18 @@ tags-input {
     border-color: #843534;
     @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483)
   }
-  [disabled] {
-    &:focus {
-      outline: none;
-    }
+
+  &[disabled] {
     .tags {
       background-color: $tags-bgcolor-disabled;
-      cursor: not-allowed;
+
       .tag-item {
-        background: $tag-bgcolor;
-        border: $tag-border;
+        background: $tag-bgcolor-disabled;
         opacity: $tag-opacity-disabled;
-        .remove-button {
-          cursor: not-allowed;
-        }
       }
-      .input[disabled] {
-        background-color: #EEE;
-        cursor: not-allowed;
+
+      .input {
+        background-color: $tags-bgcolor-disabled;
       }
     }
   }

scss/bootstrap/variables.scss

@@ -11,6 +11,7 @@ $tag-color:                             #fff;
 $tag-bgcolor:                           #428bca;
 $tag-border:                            1px solid #357ebd;
 $tag-border-radius:                     4px;
+$tag-bgcolor-disabled:                  #337ab7;
 $tag-opacity-disabled:                  0.65;
 
 $tag-color-selected:                    #fff;

scss/tags-input.scss

@@ -82,22 +82,31 @@ tags-input {
     @include box-shadow($tags-outline-box-shadow-invalid);
   }
 
-  [disabled] {
-    &:focus {
+  &[disabled] {
+    .host:focus {
       outline: none;
     }
+
     .tags {
       background-color: $tags-bgcolor-disabled;
-      cursor: not-allowed;
+      cursor: default;
+
       .tag-item {
         opacity: $tag-opacity-disabled;
+        @include gradient($tag-color-disabled);
+
         .remove-button {
-          cursor: not-allowed;
+          cursor: default;
+
+          &:active {
+            color: $remove-button-color;
+          }
         }
       }
-      .input[disabled] {
-        background-color: #EEE;
-        cursor: not-allowed;
+
+      .input {
+        background-color: $tags-bgcolor-disabled;
+        cursor: default;
       }
     }
   }

scss/variables.scss

@@ -16,6 +16,7 @@ $tag-border:                            1px solid rgb(172, 172, 172);
 $tag-border-radius:                     3px;
 $tag-color-selected:                    rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 45%, rgba(255, 92, 92, 1) 100%;
 $tag-color-invalid:                     #ff0000;
+$tag-color-disabled:                    rgba(240, 249, 255, 1) 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%;
 $tag-opacity-disabled:                  0.65;
 
 $remove-button-color:                   #585858;

src/tags-input.js

@@ -237,8 +237,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig,
                 setElementValidity();
             });
 
-            attrs.$observe('disabled', function (disabled) {
-                scope.disabled = !!disabled;
+            attrs.$observe('disabled', function(value) {
+                scope.disabled = value;
             });
 
             scope.eventHandlers = {

templates/tags-input.html

@@ -1,4 +1,4 @@
-<div class="host" tabindex="-1" ng-click="disabled || eventHandlers.host.click()" ti-transclude-append ng-disabled="disabled">
+<div class="host" tabindex="-1" ng-click="disabled || eventHandlers.host.click()" ti-transclude-append>
   <div class="tags" ng-class="{focused: hasFocus}">
     <ul class="tag-list">
       <li class="tag-item" ng-repeat="tag in tagList.items track by track(tag)" ng-class="{ selected: tag == tagList.selected }">

test/tags-input.spec.js

@@ -1488,45 +1488,33 @@ describe('tags-input directive', function() {
         });
     });
 
-    describe('ng-disabled integration', function () {
-        it('disables the input', function () {
+    describe('ng-disabled support', function () {
+        it('disables the inner input element', function () {
             // Arrange/Act
             compile('ng-disabled="true"');
 
             // Assert
             expect(getInput()[0].disabled).toBe(true);
         });
 
-        it('disables possibility to set focus on the input field by clicking the container div element', function() {
+        it('doesn\'t focus the input field when the container div is clicked', function() {
             // Arrange
-            compile('ng-disabled="true"');
             var input = getInput()[0];
             spyOn(input, 'focus');
 
-            // Act
-            element.find('div').click();
-
-            // Assert
-            expect(input.focus).not.toHaveBeenCalled();
-        });
-
-        it('disables possibility to set focus on the input field by clicking the input element', function() {
-            // Arrange
             compile('ng-disabled="true"');
-            var input = getInput()[0];
-            spyOn(input, 'focus');
 
             // Act
-            input.click();
+            element.find('div').click();
 
             // Assert
             expect(input.focus).not.toHaveBeenCalled();
         });
 
-        it('disables function of remove button', function() {
+        it('doesn\'t remove existing tags', function() {
             // Arrange
-            $scope.tags = generateTags(1);
             compile('ng-disabled="true"');
+            $scope.tags = generateTags(1);
 
             // Act
             getRemoveButton(0).click();
@@ -1535,23 +1523,18 @@ describe('tags-input directive', function() {
             expect($scope.tags).toEqual([{ text: 'Tag1' }]);
         });
 
-        it('is bound', function () {
+        it('monitors the disabled attribute', function () {
             // Arrange
             $scope.disabled = false;
             compile('ng-disabled="disabled"');
-            var input = getInput()[0];
-            expect(input.disabled).toBe(false);
 
             // Act
             $scope.disabled = true;
             $scope.$digest();
 
             // Assert
-            expect(input.disabled).toBe(true);
+            expect(isolateScope.disabled).toBe(true);
         });
-
-
-
     });
 
     describe('autocomplete registration', function() {