fix(style): add padding to individual disabled elements

fixes #406
ng-select · May 10, 2018 · 6e5cf50 · 6e5cf50
1 parent 10fcfe9
commit 6e5cf50
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 5 deletions.
diff --git a/demo/app/examples/multi.component.ts b/demo/app/examples/multi.component.ts
@@ -139,8 +139,8 @@ export class SelectMultiComponent {
         this.githubUsers$ = this.dataService.getGithubAccounts('anjm');
 
         this.selectedPeople3 = [
-            { id: '5a15b13c2340978ec3d2c0ea', name: 'Rochelle Estes' },
-            { id: '5a15b13c728cd3f43cc0fe8a', name: 'Marquez Nolan' }
+            { id: '5a15b13c2340978ec3d2c0ea', name: 'Rochelle Estes', disabled: true },
+            { id: '5a15b13c728cd3f43cc0fe8a', name: 'Marquez Nolan', disabled: true }
         ];
     }
 

diff --git a/demo/app/shared/data.service.ts b/demo/app/shared/data.service.ts
@@ -68,6 +68,7 @@ function getMockPeople() {
             'picture': 'http://placehold.it/32x32',
             'age': 35,
             'name': 'Rochelle Estes',
+            'disabled': true,
             'gender': 'female',
             'company': 'EXTRAWEAR',
             'email': 'rochelleestes@extrawear.com',
@@ -106,6 +107,7 @@ function getMockPeople() {
             'name': 'Marquez Nolan',
             'gender': 'male',
             'company': 'MIRACLIS',
+            'disabled': true,
             'email': 'marqueznolan@miraclis.com',
             'phone': '+1 (853) 571-3921'
         },

diff --git a/src/ng-select/ng-select.component.html b/src/ng-select/ng-select.component.html
@@ -3,7 +3,7 @@
         <div class="ng-placeholder">{{placeholder}}</div>
 
         <ng-container *ngIf="!multiLabelTemplate && selectedItems.length > 0">
-            <div [class.disabled]="item.disabled" class="ng-value" *ngFor="let item of selectedItems">
+            <div [class.ng-value-disabled]="item.disabled" class="ng-value" *ngFor="let item of selectedItems">
                 <ng-template #defaultLabelTemplate>
                     <span class="ng-value-icon left" (click)="unselect(item);" aria-hidden="true">×</span>
                     <span class="ng-value-label">{{item.label}}</span>

diff --git a/src/ng-select/ng-select.component.scss b/src/ng-select/ng-select.component.scss
@@ -116,7 +116,7 @@
                 }
                 .ng-value {
                     white-space: nowrap;
-                    &.disabled {
+                    &.ng-value-disabled {
                         .ng-value-icon {
                             display: none;
                         }

diff --git a/src/themes/default.theme.scss b/src/themes/default.theme.scss
@@ -94,9 +94,12 @@ $color-selected: #f5faff;
                     background-color: $color-selected;
                     border-radius: 2px;
                     border: 1px solid #c2e0ff;
-                    &.ng-select-disabled {
+                    &.ng-value-disabled {
                         background-color: #f9f9f9;
                         border: 1px solid #e3e3e3;
+                        .ng-value-label {
+                            padding-left: 5px;
+                        }
                     }
                     .ng-value-label {
                         display: inline-block;

diff --git a/src/themes/material.theme.scss b/src/themes/material.theme.scss
@@ -104,6 +104,10 @@ $highlight-color: #3f51b5;
                     border-radius: 2px;
                     color: #fff;
                     padding: 2px 5px;
+                    &.ng-value-disabled {
+                        background-color: rgba(0, 0, 0, .12);
+                        color: rgba(0, 0, 0, .26);
+                    }
                     .ng-value-label {
                         font-size: 14px;
                         font-weight: 500